Skip to content

Commit

Permalink
feat(webhooks)!: add UI to support custom responder JavaScript extens…
Browse files Browse the repository at this point in the history
…ions and drop `delay` setting
azasypkin committed Dec 31, 2023
1 parent 65d444c commit 7727f82
Showing 5 changed files with 32 additions and 19 deletions.
Original file line number Diff line number Diff line change
@@ -87,7 +87,7 @@ export interface Props {
defaultValue?: string;
}

export default function WebPageTrackerScriptEditor({ onChange, defaultValue }: Props) {
export function ScriptEditor({ onChange, defaultValue }: Props) {
const { colorMode } = useEuiTheme();

const monacoTheme = createTheme(
Original file line number Diff line number Diff line change
@@ -18,10 +18,10 @@ import axios from 'axios';
import { getDefaultRetryStrategy, WEB_PAGE_TRACKER_SCHEDULES } from './consts';
import type { SchedulerJobConfig, WebPageContentTracker } from './web_page_tracker';
import { WebPageTrackerRetryStrategy } from './web_page_tracker_retry_strategy';
import WebPageTrackerScriptEditor from './web_page_tracker_script_editor';
import { type AsyncData, getApiRequestConfig, getApiUrl, getErrorMessage, isClientError } from '../../../../model';
import { isValidURL } from '../../../../tools/url';
import { EditorFlyout } from '../../components/editor_flyout';
import { ScriptEditor } from '../../components/script_editor';
import { useWorkspaceContext } from '../../hooks';

export interface Props {
@@ -290,7 +290,7 @@ export function WebPageContentTrackerEditFlyout({ onClose, tracker }: Props) {
</span>
}
>
<WebPageTrackerScriptEditor onChange={onExtractContentScriptChange} defaultValue={extractContentScript} />
<ScriptEditor onChange={onExtractContentScriptChange} defaultValue={extractContentScript} />
</EuiFormRow>
</EuiDescribedFormGroup>
</EuiForm>
Original file line number Diff line number Diff line change
@@ -18,10 +18,10 @@ import axios from 'axios';
import { getDefaultRetryStrategy, WEB_PAGE_TRACKER_SCHEDULES } from './consts';
import type { SchedulerJobConfig, WebPageResourcesTracker } from './web_page_tracker';
import { WebPageTrackerRetryStrategy } from './web_page_tracker_retry_strategy';
import WebPageTrackerScriptEditor from './web_page_tracker_script_editor';
import { type AsyncData, getApiRequestConfig, getApiUrl, getErrorMessage, isClientError } from '../../../../model';
import { isValidURL } from '../../../../tools/url';
import { EditorFlyout } from '../../components/editor_flyout';
import { ScriptEditor } from '../../components/script_editor';
import { useWorkspaceContext } from '../../hooks';

export interface Props {
@@ -284,10 +284,7 @@ export function WebPageResourcesTrackerEditFlyout({ onClose, tracker }: Props) {
</span>
}
>
<WebPageTrackerScriptEditor
onChange={onResourceFilterMapScriptChange}
defaultValue={resourceFilterMapScript}
/>
<ScriptEditor onChange={onResourceFilterMapScriptChange} defaultValue={resourceFilterMapScript} />
</EuiFormRow>
</EuiDescribedFormGroup>
</EuiForm>
2 changes: 1 addition & 1 deletion src/pages/workspace/utils/webhooks/responder.ts
Original file line number Diff line number Diff line change
@@ -8,7 +8,7 @@ export interface Responder {
statusCode: number;
headers?: Array<[string, string]>;
body?: string;
delay?: number;
script?: string;
};
createdAt: number;
}
36 changes: 26 additions & 10 deletions src/pages/workspace/utils/webhooks/responder_edit_flyout.tsx
Original file line number Diff line number Diff line change
@@ -8,6 +8,7 @@ import {
EuiFieldText,
EuiForm,
EuiFormRow,
EuiLink,
EuiSelect,
EuiTextArea,
} from '@elastic/eui';
@@ -17,6 +18,7 @@ import type { Responder } from './responder';
import type { AsyncData } from '../../../../model';
import { getApiRequestConfig, getApiUrl, getErrorMessage, isClientError } from '../../../../model';
import { EditorFlyout } from '../../components/editor_flyout';
import { ScriptEditor } from '../../components/script_editor';
import { useWorkspaceContext } from '../../hooks';

export interface ResponderEditFlyoutProps {
@@ -66,6 +68,11 @@ export function ResponderEditFlyout({ onClose, responder }: ResponderEditFlyoutP
);
const [areHeadersInvalid, setAreHeadersInvalid] = useState(false);

const [script, setScript] = useState<string | undefined>(responder?.settings.script);
const onUserScriptChange = useCallback((value?: string) => {
setScript(value);
}, []);

const onCreateHeader = (headerValue: string) => {
if (!isHeaderValid(headerValue)) {
return false;
@@ -93,11 +100,6 @@ export function ResponderEditFlyout({ onClose, responder }: ResponderEditFlyoutP
setBody(e.target.value);
}, []);

const [delay, setDelay] = useState<number>(responder?.settings.delay ?? 0);
const onDelayChange = useCallback((e: ChangeEvent<HTMLInputElement>) => {
setDelay(+e.target.value);
}, []);

const [updatingStatus, setUpdatingStatus] = useState<AsyncData<void>>();
const onSave = useCallback(() => {
if (updatingStatus?.status === 'pending') {
@@ -124,7 +126,7 @@ export function ResponderEditFlyout({ onClose, responder }: ResponderEditFlyoutP
] as [string, string];
})
: undefined,
delay,
script: script?.trim() ? script.trim() : undefined,
},
};

@@ -168,7 +170,7 @@ export function ResponderEditFlyout({ onClose, responder }: ResponderEditFlyoutP
});
},
);
}, [name, method, path, requestsToTrack, statusCode, body, headers, delay, responder, updatingStatus]);
}, [name, method, path, requestsToTrack, statusCode, body, headers, script, responder, updatingStatus]);

return (
<EditorFlyout
@@ -246,10 +248,24 @@ export function ResponderEditFlyout({ onClose, responder }: ResponderEditFlyoutP
<EuiTextArea value={body} onChange={onBodyChange} />
</EuiFormRow>
<EuiFormRow
label="Delay"
helpText="Responder will handle an incoming request only after specified number of milliseconds"
label="Script"
helpText={
<span>
The script is executed within a constrained version of the{' '}
<EuiLink target="_blank" href="https://deno.com/">
<b>Deno JavaScript runtime</b>
</EuiLink>{' '}
for every received request. It returns an object that can override the default response status code,
headers, or body. Request information is available through the global "context" variable. Refer to the{' '}
<EuiLink target="_blank" href="/docs/guides/webhooks#annex-responder-script-examples">
<b>documentation</b>
</EuiLink>{' '}
for a list of script examples, expected return value and properties available in the "context" object
argument.
</span>
}
>
<EuiFieldNumber fullWidth min={0} step={1} value={delay} onChange={onDelayChange} />
<ScriptEditor onChange={onUserScriptChange} defaultValue={script} />
</EuiFormRow>
</EuiDescribedFormGroup>
</EuiForm>

0 comments on commit 7727f82

Please sign in to comment.