@wise/dynamic-flow-client 5.8.1 → 5.9.0

package/build/domain/components/SelectInputComponent.js

@@ -0,0 +1,88 @@
+var __rest = (this && this.__rest) || function (s, e) {
+    var t = {};
+    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
+        t[p] = s[p];
+    if (s != null && typeof Object.getOwnPropertySymbols === "function")
+        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
+                t[p[i]] = s[p[i]];
+        }
+    return t;
+};
+import { getLocalValueValidator } from '../features/validation/validation-functions';
+import { getInputUpdateFunction } from './utils/component-utils';
+import { isPartialModelMatch } from './utils/isPartialModelMatch';
+export const createSelectInputComponent = (selectProps, onComponentUpdate) => {
+    const { uid, checks, initialModel, options, schemaOnChange, onValueChange, summariser } = selectProps, rest = __rest(selectProps, ["uid", "checks", "initialModel", "options", "schemaOnChange", "onValueChange", "summariser"]);
+    const children = options.map((option) => option.component);
+    const matchingOptions = options.map((option) => isPartialModelMatch(option.component.getSubmittableValueSync(), initialModel));
+    const selectedIndex = matchingOptions.filter((match) => match).length === 1 ? matchingOptions.indexOf(true) : null;
+    const update = getInputUpdateFunction(onComponentUpdate);
+    const getValidationErrors = getLocalValueValidator(checks);
+    const component = Object.assign(Object.assign({ uid, type: 'select', kind: 'input', children,
+        options,
+        selectedIndex, value: null }, rest), { _update(updateFn) {
+            update(this, updateFn);
+        },
+        getChildren() {
+            return this.children;
+        },
+        getSelectedChild() {
+            return this.selectedIndex !== null ? this.children[this.selectedIndex] : null;
+        },
+        async getSubmittableValue() {
+            var _a, _b;
+            return (_b = (await ((_a = this.getSelectedChild()) === null || _a === void 0 ? void 0 : _a.getSubmittableValue()))) !== null && _b !== void 0 ? _b : null;
+        },
+        getSubmittableValueSync() {
+            var _a, _b;
+            return (_b = (_a = this.getSelectedChild()) === null || _a === void 0 ? void 0 : _a.getSubmittableValueSync()) !== null && _b !== void 0 ? _b : null;
+        },
+        getSummary() {
+            var _a, _b;
+            return (_b = (_a = this.getSelectedChild()) === null || _a === void 0 ? void 0 : _a.getSummary()) !== null && _b !== void 0 ? _b : {};
+        },
+        getLocalValue() {
+            var _a, _b;
+            return (_b = (_a = this.getSelectedChild()) === null || _a === void 0 ? void 0 : _a.getLocalValue()) !== null && _b !== void 0 ? _b : null;
+        },
+        onBlur() {
+            this.validate();
+        },
+        onFocus() { }, // noop
+        onSelect(updatedIndex) {
+            if (updatedIndex === this.selectedIndex) {
+                return;
+            }
+            if (updatedIndex !== null) {
+                // new event, always triggered when an option is selected
+                selectProps.trackEvent('OneOf Option Selected', {
+                    schema: this.analyticsId,
+                    selectedOption: this.children[updatedIndex].analyticsId,
+                });
+                if (this.analyticsId) {
+                    // legacy event, only triggered if the main schema has an analyticsId or $id
+                    selectProps.trackEvent('OneOf Selected', {
+                        oneOfId: this.analyticsId,
+                        schemaId: this.children[updatedIndex].analyticsId,
+                    });
+                }
+            }
+            this._update((draft) => {
+                draft.errors = [];
+                draft.selectedIndex = updatedIndex;
+            });
+            void (schemaOnChange === null || schemaOnChange === void 0 ? void 0 : schemaOnChange());
+            onValueChange();
+        },
+        validate() {
+            var _a, _b;
+            const validChild = (_b = (_a = this.getSelectedChild()) === null || _a === void 0 ? void 0 : _a.validate()) !== null && _b !== void 0 ? _b : true;
+            const errors = getValidationErrors(this.getLocalValue());
+            this._update((draft) => {
+                draft.errors = errors;
+            });
+            return errors.length === 0 && validChild;
+        } });
+    return component;
+};

package/build/domain/components/StatusListComponent.js

@@ -0,0 +1 @@
+export const createStatusListComponent = (statusListProps) => (Object.assign({ type: 'status-list', kind: 'layout' }, statusListProps));

package/build/domain/components/SubflowDomainComponent.js

@@ -0,0 +1,9 @@
+import { getInputUpdateFunction } from './utils/component-utils';
+import { getRandomId } from './utils/getRandomId';
+export const createSubflowDomainComponent = (subflowProps, onComponentUpdate) => {
+    const update = getInputUpdateFunction(onComponentUpdate);
+    const subflowComponent = Object.assign(Object.assign({ uid: `subflow-${getRandomId()}`, type: 'subflow', kind: 'layout' }, subflowProps), { _update(updateFn) {
+            update(this, updateFn);
+        } });
+    return subflowComponent;
+};

package/build/domain/components/TabsComponent.js

@@ -0,0 +1 @@
+export const createTabsComponent = (tabsProps) => (Object.assign(Object.assign({}, tabsProps), { type: 'tabs', kind: 'layout' }));

package/build/domain/components/TextInputComponent.js

@@ -0,0 +1,76 @@
+var __rest = (this && this.__rest) || function (s, e) {
+    var t = {};
+    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
+        t[p] = s[p];
+    if (s != null && typeof Object.getOwnPropertySymbols === "function")
+        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
+                t[p[i]] = s[p[i]];
+        }
+    return t;
+};
+import { getDebouncedSchemaOnChange } from '../features/schema-on-change/getDebouncedSchemaOnChange';
+import { getLocalValueValidator } from '../features/validation/validation-functions';
+import { getDebouncedComponentValidationAsync } from '../features/validationAsync/getComponentValidationAsync';
+import { getInputUpdateFunction } from './utils/component-utils';
+export const createTextInputComponent = (textInputProps, onComponentUpdate) => {
+    const { uid, id, checks, schemaOnChange, performValidationAsync, onValueChange, onPersistAsync, summariser, value } = textInputProps, rest = __rest(textInputProps, ["uid", "id", "checks", "schemaOnChange", "performValidationAsync", "onValueChange", "onPersistAsync", "summariser", "value"]);
+    const update = getInputUpdateFunction(onComponentUpdate);
+    const getValidationErrors = getLocalValueValidator(checks);
+    const performOnChange = getDebouncedSchemaOnChange(schemaOnChange, getValidationErrors);
+    const validateAsync = performValidationAsync
+        ? getDebouncedComponentValidationAsync(update, performValidationAsync)
+        : undefined;
+    const inputComponent = Object.assign({ type: 'text', kind: 'input', uid,
+        id,
+        value,
+        _update(updateFn) {
+            update(this, updateFn);
+        },
+        onBlur() {
+            const isValid = this.validate();
+            performOnChange === null || performOnChange === void 0 ? void 0 : performOnChange.flush();
+            if (isValid) {
+                void (onPersistAsync === null || onPersistAsync === void 0 ? void 0 : onPersistAsync().catch(() => { }));
+                validateAsync === null || validateAsync === void 0 ? void 0 : validateAsync.flush();
+            }
+        },
+        onFocus() { }, // Noop
+        onChange(updatedValue) {
+            const prevValue = this.value;
+            this._update((draft) => {
+                draft.errors = [];
+                draft.validationAsyncState.messages = {};
+                draft.value = updatedValue;
+            });
+            performOnChange === null || performOnChange === void 0 ? void 0 : performOnChange(prevValue, updatedValue);
+            const isValid = getValidationErrors(updatedValue).length === 0;
+            if (isValid) {
+                validateAsync === null || validateAsync === void 0 ? void 0 : validateAsync(this, updatedValue);
+            }
+            if (!updatedValue) {
+                validateAsync === null || validateAsync === void 0 ? void 0 : validateAsync.cancel();
+            }
+            onValueChange();
+        },
+        async getSubmittableValue() {
+            return this.getSubmittableValueSync();
+        },
+        getSubmittableValueSync() {
+            return this.getLocalValue() || null;
+        },
+        getSummary() {
+            return summariser(this.getLocalValue());
+        },
+        getLocalValue() {
+            return this.value;
+        },
+        validate() {
+            const errors = getValidationErrors(this.getLocalValue());
+            this._update((draft) => {
+                draft.errors = errors;
+            });
+            return errors.length === 0;
+        } }, rest);
+    return inputComponent;
+};

package/build/domain/components/TupleComponent.js

@@ -0,0 +1,41 @@
+import { mergeSummaries, summariseFromChildren } from '../features/summary/summary-utils';
+import { validateComponents } from '../features/validation/validation-functions';
+export const createTupleComponent = (tupleProps) => {
+    const { uid, schemaId, analyticsId, alert, components, control, description, help, hidden, media, summariser, title, tags, } = tupleProps;
+    return {
+        type: 'tuple',
+        kind: 'input',
+        uid,
+        schemaId,
+        analyticsId,
+        alert,
+        components,
+        control,
+        description,
+        help,
+        hidden,
+        media,
+        title,
+        tags,
+        getChildren() {
+            return this.components;
+        },
+        async getSubmittableValue() {
+            return Promise.all(this.components.map(async (child) => child.getSubmittableValue()));
+        },
+        getSubmittableValueSync() {
+            return this.components.map((child) => child.getSubmittableValueSync());
+        },
+        getSummary() {
+            const summary = summariser(this.getLocalValue());
+            const childSummary = summariseFromChildren(this.getChildren());
+            return mergeSummaries(summary, childSummary);
+        },
+        getLocalValue() {
+            return this.components.map((child) => child.getLocalValue());
+        },
+        validate() {
+            return hidden ? true : validateComponents(this.getChildren());
+        },
+    };
+};

package/build/domain/components/UploadInputComponent.js

@@ -0,0 +1,83 @@
+var __rest = (this && this.__rest) || function (s, e) {
+    var t = {};
+    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
+        t[p] = s[p];
+    if (s != null && typeof Object.getOwnPropertySymbols === "function")
+        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
+                t[p[i]] = s[p[i]];
+        }
+    return t;
+};
+import { getLocalValueValidator } from '../features/validation/validation-functions';
+import { getInputUpdateFunction } from './utils/component-utils';
+import { toBase64 } from './utils/file-utils';
+export const createUploadInputComponent = (uploadInputProps, onComponentUpdate) => {
+    const { uid, id, checks, format, value, schemaOnChange, onValueChange, onPersistAsync, summariser } = uploadInputProps, rest = __rest(uploadInputProps, ["uid", "id", "checks", "format", "value", "schemaOnChange", "onValueChange", "onPersistAsync", "summariser"]);
+    const update = getInputUpdateFunction(onComponentUpdate);
+    const getValidationErrors = getLocalValueValidator(checks);
+    const uploadComponent = Object.assign({ type: 'upload', kind: 'input', uid,
+        id,
+        format,
+        value, base64Value: null, _update(updateFn) {
+            update(this, updateFn);
+        },
+        onBlur() {
+            this.validate();
+        },
+        onFocus() { }, // Noop
+        async onUpload(updatedValue) {
+            const base64Value = this.format === 'base64' && updatedValue ? await toBase64(updatedValue) : null;
+            this._update((draft) => {
+                draft.errors = [];
+                draft.value = updatedValue;
+                draft.base64Value = base64Value;
+            });
+            void (schemaOnChange === null || schemaOnChange === void 0 ? void 0 : schemaOnChange());
+            onValueChange();
+            await (onPersistAsync === null || onPersistAsync === void 0 ? void 0 : onPersistAsync().catch((e) => {
+                this._update((draft) => {
+                    draft.value = null;
+                });
+                throw e;
+            }));
+        },
+        async getSubmittableValue() {
+            const file = this.getLocalValue();
+            if (this.format === 'base64' && file) {
+                return toBase64(file);
+            }
+            return null;
+        },
+        getSubmittableValueSync() {
+            return this.base64Value;
+        },
+        getSummary() {
+            var _a, _b;
+            return summariser((_b = (_a = this.getLocalValue()) === null || _a === void 0 ? void 0 : _a.name) !== null && _b !== void 0 ? _b : null);
+        },
+        getLocalValue() {
+            return this.value;
+        },
+        validate() {
+            const errors = getValidationErrors(this.getLocalValue());
+            this._update((draft) => {
+                draft.errors = errors;
+            });
+            return errors.length === 0;
+        } }, rest);
+    if (format === 'base64' && value && !onPersistAsync) {
+        void initialiseBase64Value(uploadComponent);
+    }
+    return uploadComponent;
+};
+const initialiseBase64Value = async (uploadComponent) => {
+    const { format, value } = uploadComponent;
+    const base64Value = format === 'base64' && value ? await toBase64(value) : null;
+    if (base64Value) {
+        // eslint-disable-next-line no-underscore-dangle
+        uploadComponent._update((draft) => {
+            draft.base64Value = base64Value;
+        });
+    }
+};

package/build/domain/components/UpsellComponent.js

@@ -0,0 +1,25 @@
+var __rest = (this && this.__rest) || function (s, e) {
+    var t = {};
+    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
+        t[p] = s[p];
+    if (s != null && typeof Object.getOwnPropertySymbols === "function")
+        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
+                t[p[i]] = s[p[i]];
+        }
+    return t;
+};
+import { getInputUpdateFunction } from './utils/component-utils';
+export const createUpsellComponent = (upsellProps, onComponentUpdate) => {
+    const update = getInputUpdateFunction(onComponentUpdate);
+    const { onDismiss: propsOnDismiss } = upsellProps, restProps = __rest(upsellProps, ["onDismiss"]);
+    const component = Object.assign(Object.assign({ type: 'upsell', kind: 'layout' }, restProps), { visible: true, onDismiss: propsOnDismiss
+            ? () => {
+                update(component, (draft) => {
+                    draft.visible = false;
+                });
+                propsOnDismiss();
+            }
+            : undefined });
+    return component;
+};

package/build/domain/components/searchComponent/SearchComponent.js

@@ -0,0 +1,92 @@
+import { getInputUpdateFunction } from '../utils/component-utils';
+import { debounce } from '../utils/debounce';
+const DEBOUNCE_TIME = 400;
+export const createSearchComponent = (searchProps, performSearch, onBehavior, onComponentUpdate) => {
+    const { uid, analyticsId, control, emptyMessage, initialState, hint, margin, tags, title } = searchProps;
+    const update = getInputUpdateFunction(onComponentUpdate);
+    let abortController = new AbortController();
+    const search = (component, query, searchConfig) => {
+        abortController.abort();
+        abortController = new AbortController();
+        const { signal } = abortController;
+        performSearch({
+            signal,
+            query,
+            config: searchConfig,
+        })
+            .then((state) => {
+            if (!signal.aborted) {
+                update(component, (draft) => {
+                    draft.state = state !== null && state !== void 0 ? state : initialState;
+                    draft.isLoading = false;
+                    draft.error = undefined;
+                });
+            }
+        })
+            .catch(() => {
+            if (!signal.aborted) {
+                update(component, (draft) => {
+                    draft.error = 'No response';
+                    draft.isLoading = false;
+                });
+            }
+        });
+    };
+    const debouncedSearch = debounce(search, DEBOUNCE_TIME);
+    const component = {
+        type: 'search',
+        kind: 'layout',
+        uid,
+        analyticsId,
+        control,
+        emptyMessage,
+        initialState,
+        hint,
+        margin,
+        state: initialState,
+        tags,
+        title,
+        isLoading: false,
+        query: '',
+        _update(updateFn) {
+            update(this, updateFn);
+        },
+        onChange(query) {
+            if (query.trim()) {
+                this._update((draft) => {
+                    draft.query = query;
+                    draft.isLoading = true;
+                });
+                debouncedSearch(this, query.trim());
+            }
+            else {
+                // if the query is empty, we want to reset to the initial state immediately
+                abortController.abort();
+                debouncedSearch.cancel();
+                update(component, (draft) => {
+                    draft.query = query;
+                    draft.state = initialState;
+                    draft.isLoading = false;
+                    draft.error = undefined;
+                });
+            }
+        },
+        onSelect({ type, value }) {
+            if (type === 'action') {
+                void onBehavior({ type: 'action', action: value });
+            }
+            else {
+                this._update((draft) => {
+                    draft.query = value.query;
+                    draft.isLoading = true;
+                });
+                search(this, value.query, {
+                    method: value.method,
+                    param: value.param,
+                    url: value.url,
+                });
+            }
+        },
+    };
+    return component;
+};

package/build/domain/components/searchComponent/SearchComponent.test.js

@@ -0,0 +1,190 @@
+import { vi } from 'vitest';
+import { wait } from '../../../test-utils';
+import { getUpdateFunctionMock } from '../../mappers/schema/tests/test-utils';
+import { createMarkdownComponent } from '../MarkdownComponent';
+import { createSearchComponent } from './SearchComponent';
+const defaultSearchProps = {
+    uid: '0',
+    emptyMessage: '',
+    initialState: { type: 'layout', content: [] },
+    margin: 'md',
+    title: 'title',
+};
+describe('SearchComponent', () => {
+    describe('when onChange is called', () => {
+        it('searching is debounced', () => {
+            const performSearch = vi.fn().mockImplementation(async () => Promise.resolve([]));
+            const onAction = vi.fn();
+            const mockUpdateFunction = getUpdateFunctionMock(() => component);
+            const component = createSearchComponent(defaultSearchProps, performSearch, onAction, mockUpdateFunction);
+            component.onChange('query');
+            expect(performSearch).toHaveBeenCalledTimes(0);
+            vi.advanceTimersByTime(500);
+            expect(performSearch).toHaveBeenCalledTimes(1);
+        });
+        it('updates the query state immediately', () => {
+            const performSearch = vi
+                .fn()
+                .mockImplementation(async () => Promise.resolve({ type: 'noResults' }));
+            const onAction = vi.fn();
+            const mockUpdateFunction = getUpdateFunctionMock(() => component);
+            const component = createSearchComponent(defaultSearchProps, performSearch, onAction, mockUpdateFunction);
+            component.onChange('query');
+            expect(performSearch).toHaveBeenCalledTimes(0);
+            expect(component.query).toBe('query');
+        });
+        describe('after debouncing', () => {
+            it('performs a search', async () => {
+                const performSearch = vi.fn().mockImplementation(async () => {
+                    return Promise.resolve({ type: 'noResults' });
+                });
+                const onAction = vi.fn();
+                const mockUpdateFunction = getUpdateFunctionMock(() => component);
+                const component = createSearchComponent(defaultSearchProps, performSearch, onAction, mockUpdateFunction);
+                component.onChange('query');
+                await vi.advanceTimersByTimeAsync(1000); // debounce time
+                expect(performSearch).toHaveBeenCalled();
+            });
+            it('sets isLoading when search begins, and when search ends sets isLoading to false', async () => {
+                const performSearch = vi.fn().mockImplementation(async () => {
+                    await wait(1000);
+                    return Promise.resolve({ type: 'noResults' });
+                });
+                const onAction = vi.fn();
+                const mockUpdateFunction = getUpdateFunctionMock(() => component);
+                const component = createSearchComponent(defaultSearchProps, performSearch, onAction, mockUpdateFunction);
+                component.onChange('query');
+                await vi.advanceTimersByTimeAsync(500);
+                expect(performSearch).toHaveBeenCalled();
+                expect(component.isLoading).toBe(true);
+                await vi.advanceTimersByTimeAsync(1000);
+                expect(component.isLoading).toBe(false);
+            });
+        });
+        describe('when a valid response is received', () => {
+            describe('and the response is the results type', () => {
+                describe('and results is non-empty', () => {
+                    it('updates results', async () => {
+                        const performSearch = vi.fn().mockImplementation(async () => Promise.resolve({
+                            type: 'results',
+                            results: [{ type: 'action', title: '', action: {} }],
+                        }));
+                        const onAction = vi.fn();
+                        const mockUpdateFunction = getUpdateFunctionMock(() => component);
+                        const component = createSearchComponent(defaultSearchProps, performSearch, onAction, mockUpdateFunction);
+                        component.onChange('query');
+                        await vi.advanceTimersByTimeAsync(500);
+                        expect(performSearch).toHaveBeenCalled();
+                        expect(component.isLoading).toBe(false);
+                        expect(component.state).toStrictEqual(expect.objectContaining({
+                            type: 'results',
+                            // eslint-disable-next-line @typescript-eslint/no-unsafe-assignment
+                            results: expect.arrayContaining([expect.objectContaining({ type: 'action' })]),
+                        }));
+                    });
+                });
+                describe('and results is empty', () => {
+                    it('updates results', async () => {
+                        const performSearch = vi
+                            .fn()
+                            .mockImplementation(async () => Promise.resolve({ type: 'results', results: [] }));
+                        const onAction = vi.fn();
+                        const mockUpdateFunction = getUpdateFunctionMock(() => component);
+                        const component = createSearchComponent(defaultSearchProps, performSearch, onAction, mockUpdateFunction);
+                        component.onChange('query');
+                        await vi.advanceTimersByTimeAsync(500);
+                        expect(performSearch).toHaveBeenCalled();
+                        expect(component.isLoading).toBe(false);
+                        expect(component.state).toStrictEqual(expect.objectContaining({
+                            type: 'results',
+                            // eslint-disable-next-line @typescript-eslint/no-unsafe-assignment
+                            results: expect.arrayContaining([]),
+                        }));
+                    });
+                });
+            });
+            describe('and the response is the modern layout type', () => {
+                it('updates the state to contain the new layout', async () => {
+                    const performSearch = vi.fn().mockImplementation(async () => Promise.resolve({
+                        type: 'layout',
+                        content: [
+                            createMarkdownComponent({
+                                uid: 'markdown',
+                                margin: 'md',
+                                align: 'start',
+                                content: 'Here is some markdown',
+                                size: 'md',
+                            }),
+                        ],
+                    }));
+                    const onAction = vi.fn();
+                    const mockUpdateFunction = getUpdateFunctionMock(() => component);
+                    const component = createSearchComponent(defaultSearchProps, performSearch, onAction, mockUpdateFunction);
+                    component.onChange('query');
+                    await vi.advanceTimersByTimeAsync(500);
+                    expect(performSearch).toHaveBeenCalled();
+                    expect(component.isLoading).toBe(false);
+                    expect(component.state).toStrictEqual(expect.objectContaining({
+                        type: 'layout',
+                        // eslint-disable-next-line @typescript-eslint/no-unsafe-assignment
+                        content: expect.arrayContaining([
+                            expect.objectContaining({ type: 'markdown', content: 'Here is some markdown' }),
+                        ]),
+                    }));
+                });
+            });
+        });
+        describe('when an invalid response is received', () => {
+            it('sets error string', async () => {
+                const performSearch = vi.fn().mockImplementation(async () => {
+                    throw Error('cannot parse response');
+                });
+                const onAction = vi.fn();
+                const mockUpdateFunction = getUpdateFunctionMock(() => component);
+                const component = createSearchComponent(defaultSearchProps, performSearch, onAction, mockUpdateFunction);
+                component.onChange('query');
+                await vi.advanceTimersByTimeAsync(500);
+                expect(performSearch).toHaveBeenCalled();
+                expect(component.isLoading).toBe(false);
+                expect(component.error).toBeDefined();
+            });
+        });
+        describe('when onClick is called', () => {
+            describe('on an `action` result', () => {
+                it('calls onAction with the result', async () => {
+                    const performSearch = vi.fn();
+                    const onBehavior = vi.fn();
+                    const mockUpdateFunction = getUpdateFunctionMock(() => component);
+                    const component = createSearchComponent(defaultSearchProps, performSearch, onBehavior, mockUpdateFunction);
+                    component.onSelect({
+                        type: 'action',
+                        title: 'title',
+                        value: { id: 'selected-action-id' },
+                    });
+                    expect(onBehavior).toHaveBeenCalledWith(expect.objectContaining({ type: 'action', action: { id: 'selected-action-id' } }));
+                });
+            });
+            describe('on a `search` result', () => {
+                it('performs a search with the new config', async () => {
+                    const performSearch = vi.fn().mockImplementation(async () => Promise.resolve([]));
+                    const onAction = vi.fn();
+                    const mockUpdateFunction = getUpdateFunctionMock(() => component);
+                    const component = createSearchComponent(defaultSearchProps, performSearch, onAction, mockUpdateFunction);
+                    component.onSelect({
+                        type: 'search',
+                        title: 'title',
+                        value: { url: '/new-search', param: 'query', method: 'GET', query: 'new' },
+                    });
+                    expect(performSearch).toHaveBeenCalledWith(expect.objectContaining({
+                        query: 'new',
+                        config: expect.objectContaining({
+                            url: '/new-search',
+                            method: 'GET',
+                            param: 'query',
+                        }),
+                    }));
+                });
+            });
+        });
+    });
+});

package/build/domain/components/step/ExternalConfirmationComponent.js

@@ -0,0 +1,28 @@
+import { getInputUpdateFunction } from '../utils/component-utils';
+export const createExternalConfirmation = (uid, url, onComponentUpdate) => {
+    const update = getInputUpdateFunction(onComponentUpdate);
+    return {
+        type: 'external-confirmation',
+        kind: 'layout',
+        uid,
+        url,
+        status: 'initial',
+        onSuccess() {
+            update(this, (draft) => {
+                draft.status = 'success';
+            });
+        },
+        onFailure() {
+            if (this.status === 'initial') {
+                update(this, (draft) => {
+                    draft.status = 'failure';
+                });
+            }
+        },
+        onCancel() {
+            update(this, (draft) => {
+                draft.status = 'dismissed';
+            });
+        },
+    };
+};