@wise/dynamic-flow-client 5.30.0-experimental-7a76ef5 → 5.30.1

package/build/domain/components/collectionComponent/CollectionStack.js

@@ -0,0 +1,40 @@
+import { createCollectionState, forkCollectionState } from './CollectionState';
+/** Owns collection snapshots and notifies the view after changes. */
+export const createCollectionStack = (uid, initialState, onChange) => {
+    let states = [createCollectionState(`${uid}-state-0`, initialState, '')];
+    let forkCount = 0;
+    return {
+        getStates: () => states,
+        getState: (id) => states.find((state) => state.id === id),
+        getActiveState: () => states[states.length - 1],
+        update(id, transform) {
+            const state = states.find((current) => current.id === id);
+            if (!state) {
+                return;
+            }
+            const updated = transform(state);
+            if (updated === state) {
+                return;
+            }
+            const replace = (current) => (current.id === id ? updated : current);
+            const [root, ...forks] = states;
+            states = [replace(root), ...forks.map(replace)];
+            onChange();
+        },
+        fork() {
+            forkCount += 1;
+            const state = forkCollectionState(states[states.length - 1], `${uid}-state-${forkCount}`);
+            states = [...states, state];
+            onChange();
+        },
+        pop() {
+            const [root, ...forks] = states;
+            const popped = forks.at(-1);
+            if (popped) {
+                states = [root, ...forks.slice(0, -1)];
+                onChange();
+            }
+            return popped;
+        },
+    };
+};

package/build/domain/components/collectionComponent/CollectionStack.test.js

@@ -0,0 +1,173 @@
+import { vi } from 'vitest';
+import { wait } from '../../../test-utils';
+import { createCollectionStack } from './CollectionStack';
+import { createCollectionController } from './CollectionController';
+const initialState = {
+    sections: [],
+    search: { param: 'q' },
+    analytics: {},
+};
+describe('CollectionStack', () => {
+    it('does not pop the root state', () => {
+        const stack = createCollectionStack('collection', initialState, vi.fn());
+        expect(stack.getStates()).toHaveLength(1);
+        stack.pop();
+        expect(stack.getStates()).toHaveLength(1);
+    });
+    it('allows forking by duplicating the top-most state', () => {
+        const stack = createCollectionStack('collection', initialState, vi.fn());
+        expect(stack.getStates()).toHaveLength(1);
+        const root = stack.getActiveState();
+        stack.fork();
+        stack.fork();
+        expect(stack.getStates()).toHaveLength(3);
+        const top = stack.getActiveState();
+        expect(root.search).toStrictEqual(top.search);
+        expect(root.sections).toStrictEqual(top.sections);
+    });
+    it('resets loading state to idle when forking', async () => {
+        const response = {
+            sections: [{ id: 'results', type: 'items', items: [{ id: 'found' }] }],
+            analytics: {},
+        };
+        const query = vi.fn().mockImplementation(async () => {
+            await wait(1000);
+            return response;
+        });
+        const stack = createCollectionStack('collection', initialState, vi.fn());
+        const controller = createCollectionController({
+            stack,
+            collectionClient: query,
+            trackEvent: vi.fn(),
+        });
+        const root = stack.getActiveState();
+        controller.search(root.id, 'query');
+        await vi.advanceTimersByTimeAsync(800);
+        expect(stack.getActiveState().status.type).toBe('loading');
+        controller.fork();
+        expect(stack.getActiveState().status.type).toBe('idle');
+    });
+    it('runs controller commands and notifies subscribers without a component', async () => {
+        var _a;
+        const onChange = vi.fn();
+        const response = {
+            sections: [{ id: 'results', type: 'items', items: [{ id: 'found' }] }],
+            analytics: {},
+        };
+        const query = vi.fn().mockResolvedValue(response);
+        const stack = createCollectionStack('collection', initialState, onChange);
+        const controller = createCollectionController({
+            stack,
+            collectionClient: query,
+            trackEvent: vi.fn(),
+        });
+        controller.search(stack.getActiveState().id, 'hello');
+        expect((_a = stack.getActiveState().search) === null || _a === void 0 ? void 0 : _a.query).toBe('hello');
+        expect(stack.getActiveState().status).toEqual({ type: 'loading', reason: 'search' });
+        expect(onChange).toHaveBeenCalledTimes(1);
+        await vi.advanceTimersByTimeAsync(800);
+        expect(stack.getActiveState().sections).toEqual(response.sections);
+        expect(stack.getActiveState().status).toEqual({ type: 'idle' });
+        expect(onChange).toHaveBeenCalledTimes(2);
+    });
+    it('ignores updates and commands for discarded states', async () => {
+        const onChange = vi.fn();
+        const query = vi.fn().mockResolvedValue(null);
+        const stack = createCollectionStack('collection', initialState, onChange);
+        const controller = createCollectionController({
+            stack,
+            collectionClient: query,
+            trackEvent: vi.fn(),
+        });
+        controller.fork();
+        const { id } = stack.getActiveState();
+        controller.pop();
+        onChange.mockClear();
+        stack.update(id, () => {
+            throw new Error('A discarded state must not be updated');
+        });
+        controller.search(id, 'late callback');
+        controller.loadMore(id);
+        controller.retry(id);
+        controller.selectFilter(id, 0, 0);
+        await vi.advanceTimersByTimeAsync(800);
+        expect(query).not.toHaveBeenCalled();
+        expect(onChange).not.toHaveBeenCalled();
+        expect(stack.getStates()).toHaveLength(1);
+    });
+    it('replaces a scheduled search with an immediate request using the latest state', async () => {
+        const query = vi.fn().mockResolvedValue(initialState);
+        const stack = createCollectionStack('collection', Object.assign(Object.assign({}, initialState), { nextCursor: 'page-2' }), vi.fn());
+        const controller = createCollectionController({
+            stack,
+            collectionClient: query,
+            trackEvent: vi.fn(),
+        });
+        const { id } = stack.getActiveState();
+        controller.search(id, 'first');
+        controller.search(id, 'latest');
+        controller.loadMore(id);
+        expect(query).toHaveBeenCalledTimes(1);
+        expect(query).toHaveBeenCalledWith(expect.objectContaining({ query: 'latest', cursor: 'page-2' }));
+        await vi.advanceTimersByTimeAsync(800);
+        expect(query).toHaveBeenCalledTimes(1);
+        expect(stack.getActiveState().status).toEqual({ type: 'idle' });
+    });
+    it('applies responses to the latest state and tracks the request outcome', async () => {
+        var _a, _b;
+        const response = {
+            sections: [{ id: 'results', type: 'items', items: [{ id: 'found' }] }],
+            analytics: { result: 'success' },
+        };
+        const query = vi.fn().mockImplementation(async () => {
+            await wait(100);
+            return response;
+        });
+        const trackEvent = vi.fn();
+        const stack = createCollectionStack('collection', initialState, vi.fn());
+        const controller = createCollectionController({
+            stack,
+            collectionClient: query,
+            trackEvent,
+        });
+        controller.fork();
+        const second = stack.getActiveState();
+        controller.search(second.id, 'requested');
+        await vi.advanceTimersByTimeAsync(800);
+        stack.update(second.id, (state) => (Object.assign(Object.assign({}, state), { search: { param: 'q', query: 'updated while waiting' } })));
+        await vi.advanceTimersByTimeAsync(100);
+        expect(query).toHaveBeenCalledWith(expect.objectContaining({ query: 'requested' }));
+        expect((_a = stack.getActiveState().search) === null || _a === void 0 ? void 0 : _a.query).toBe('updated while waiting');
+        expect(stack.getActiveState().sections).toEqual(response.sections);
+        expect(trackEvent.mock.calls).toEqual([
+            ['Collection Search Triggered', {}],
+            ['Collection Search Succeeded', response.analytics],
+        ]);
+        controller.pop();
+        expect((_b = stack.getActiveState().search) === null || _b === void 0 ? void 0 : _b.query).not.toBe('updated while waiting');
+        expect(stack.getActiveState().sections).not.toBe(response.sections);
+    });
+    it('ignores a rejected request after its state is popped', async () => {
+        const query = vi.fn().mockImplementation(async () => {
+            await wait(100);
+            throw new Error('request failed after cancellation');
+        });
+        const onChange = vi.fn();
+        const trackEvent = vi.fn();
+        const stack = createCollectionStack('collection', initialState, onChange);
+        const controller = createCollectionController({
+            stack,
+            collectionClient: query,
+            trackEvent,
+        });
+        controller.fork();
+        controller.search(stack.getActiveState().id, 'hello');
+        await vi.advanceTimersByTimeAsync(800);
+        controller.pop();
+        onChange.mockClear();
+        await vi.advanceTimersByTimeAsync(100);
+        expect(stack.getActiveState().status).toEqual({ type: 'idle' });
+        expect(onChange).not.toHaveBeenCalled();
+        expect(trackEvent.mock.calls).toEqual([['Collection Search Triggered', {}]]);
+    });
+});

package/build/domain/components/collectionComponent/CollectionState.js

@@ -0,0 +1,39 @@
+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;
+};
+/**
+ * Creates a collection state from a collection response.
+ */
+export const createCollectionState = (id, _a, searchQuery) => {
+    var { search } = _a, response = __rest(_a, ["search"]);
+    return (Object.assign(Object.assign({}, response), { id, status: { type: 'idle' }, search: search ? Object.assign(Object.assign({}, search), { query: searchQuery }) : undefined }));
+};
+/**
+ * Creates a copy of a collection state with the given id, which can be searched or filtered
+ * without affecting the original but stateful layouts (inputs, search, etc.) are shallow-copied,
+ * meaning states in one state will still update that layout in another.
+ */
+export const forkCollectionState = (_a, forkedId) => { var _b; var _c; var { id, status } = _a, state = __rest(_a, ["id", "status"]); return createCollectionState(forkedId, state, (_c = (_b = state.search) === null || _b === void 0 ? void 0 : _b.query) !== null && _c !== void 0 ? _c : ''); };
+/**
+ * Returns the layout components in a collection state, including its initial search sections.
+ */
+export const getCollectionStateChildren = (state) => { var _a; var _b, _c, _d; return [
+    // TODO We should be calling the lifecycle stop/start methods on new layouts
+    ...((_b = state.beforeSections) !== null && _b !== void 0 ? _b : []),
+    ...getSectionsChildren(state.sections),
+    ...getSectionsChildren((_c = (_a = state.search) === null || _a === void 0 ? void 0 : _a.initialSections) !== null && _c !== void 0 ? _c : []),
+    ...((_d = state.afterSections) !== null && _d !== void 0 ? _d : []),
+]; };
+export const setLoading = (state, reason) => (Object.assign(Object.assign({}, state), { status: { type: 'loading', reason } }));
+export const setError = (state, reason) => (Object.assign(Object.assign({}, state), { sections: reason === 'pagination' ? state.sections : [], status: { type: 'error', reason } }));
+export const setQuery = (state, value) => state.search
+    ? Object.assign(Object.assign({}, state), { search: Object.assign(Object.assign({}, state.search), { query: value }) }) : state;
+const getSectionsChildren = (sections) => sections.filter((section) => section.type === 'layout').flatMap((section) => section.components);

package/build/domain/components/collectionComponent/applyCollectionResponse.js

@@ -0,0 +1,9 @@
+import { recursiveMerge } from '../../../utils/recursiveMerge';
+import { mergeSections } from './mergeSections';
+/**
+ * Returns a collection state with a collection response applied, appending to its sections for
+ * pagination.
+ */
+export const applyCollectionResponse = (state, mode, incoming) => { var _a; var _b, _c, _d, _e; return (Object.assign(Object.assign({}, state), { sections: mode === 'pagination' ? mergeSections(state.sections, incoming.sections) : incoming.sections, nextCursor: incoming.nextCursor, analytics: mode === 'pagination'
+        ? recursiveMerge(state.analytics, incoming.analytics)
+        : incoming.analytics, filters: (_b = incoming.filters) !== null && _b !== void 0 ? _b : state.filters, search: incoming.search ? Object.assign(Object.assign({}, incoming.search), { query: (_c = (_a = state.search) === null || _a === void 0 ? void 0 : _a.query) !== null && _c !== void 0 ? _c : '' }) : state.search, beforeSections: (_d = incoming.beforeSections) !== null && _d !== void 0 ? _d : state.beforeSections, afterSections: (_e = incoming.afterSections) !== null && _e !== void 0 ? _e : state.afterSections, status: { type: 'idle' } })); };

package/build/domain/components/collectionComponent/mergeSections.js

@@ -0,0 +1,28 @@
+export const mergeSections = (existing, incoming) => {
+    const knownIds = new Set(existing.map((section) => section.id));
+    const newSections = incoming.filter((section) => !knownIds.has(section.id));
+    const merged = existing.map((section) => {
+        var _a, _b, _c, _d;
+        const match = incoming.find((s) => s.id === section.id);
+        if (!match)
+            return section;
+        if (section.type !== match.type)
+            return section;
+        const baseProps = {
+            type: section.type,
+            id: match.id,
+            title: (_a = match.title) !== null && _a !== void 0 ? _a : section.title,
+            callToAction: (_b = match.callToAction) !== null && _b !== void 0 ? _b : section.callToAction,
+            help: (_c = match.help) !== null && _c !== void 0 ? _c : section.help,
+            inlineAlert: (_d = match.inlineAlert) !== null && _d !== void 0 ? _d : section.inlineAlert,
+        };
+        if (section.type === 'layout' && match.type === 'layout') {
+            return Object.assign(Object.assign({}, baseProps), { type: 'layout', components: [...section.components, ...match.components] });
+        }
+        if (section.type === 'items' && match.type === 'items') {
+            return Object.assign(Object.assign({}, baseProps), { type: 'items', items: [...section.items, ...match.items] });
+        }
+        return section;
+    });
+    return [...merged, ...newSections];
+};

package/build/domain/components/collectionComponent/toggleFilterOption.js

@@ -0,0 +1,15 @@
+export const toggleFilterOption = (state, filterIndex, optionIndex) => {
+    var _a;
+    const filter = (_a = state.filters) === null || _a === void 0 ? void 0 : _a[filterIndex];
+    if (!state.filters || !filter) {
+        return state;
+    }
+    const currentValue = filter.options[optionIndex].selected;
+    const options = filter.options.map((option, index) => {
+        if (index === optionIndex) {
+            return Object.assign(Object.assign({}, option), { selected: !currentValue });
+        }
+        return filter.multiSelect ? option : Object.assign(Object.assign({}, option), { selected: false });
+    });
+    return Object.assign(Object.assign({}, state), { filters: state.filters.map((current, index) => index === filterIndex ? Object.assign(Object.assign({}, current), { options }) : current) });
+};

package/build/domain/components/collectionComponent/types.js

@@ -0,0 +1 @@
+export {};

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

@@ -0,0 +1,91 @@
+import { getInputUpdateFunction } from '../utils/component-utils';
+import { debounce } from '../utils/debounce';
+const DEBOUNCE_TIME = 400;
+export const createSearchComponent = (props, performSearch, onBehavior, onComponentUpdate) => {
+    const { uid, analyticsId, control, emptyMessage, initialState, hint, margin, tags, title } = props;
+    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: '',
+        setQuery(query) {
+            if (query.trim()) {
+                update(component, (draft) => {
+                    draft.query = query;
+                    draft.isLoading = true;
+                });
+                debouncedSearch(component, 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;
+                });
+            }
+        },
+        selectResult({ type, value }) {
+            if (type === 'action') {
+                void onBehavior({ type: 'action', action: value, track: false });
+            }
+            else {
+                update(component, (draft) => {
+                    draft.query = value.query;
+                    draft.isLoading = true;
+                });
+                search(component, value.query, {
+                    method: value.method,
+                    param: value.param,
+                    url: value.url,
+                });
+            }
+        },
+        start() { },
+        stop() { },
+    };
+    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 setQuery 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.setQuery('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.setQuery('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.setQuery('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.setQuery('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.setQuery('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.setQuery('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.setQuery('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.setQuery('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.selectResult({
+                        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.selectResult({
+                        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,27 @@
+import { getInputUpdateFunction } from '../utils/component-utils';
+export const createExternalConfirmation = (uid, url, onLink, onComponentUpdate) => {
+    const update = getInputUpdateFunction(onComponentUpdate);
+    const component = {
+        type: 'external-confirmation',
+        kind: 'layout',
+        uid,
+        url,
+        status: 'initial',
+        open() {
+            if (component.status === 'initial' || component.status === 'failure') {
+                const success = onLink(component.url);
+                update(component, (draft) => {
+                    draft.status = success ? 'success' : 'failure';
+                });
+            }
+        },
+        onCancel() {
+            update(component, (draft) => {
+                draft.status = 'dismissed';
+            });
+        },
+        start() { },
+        stop() { },
+    };
+    return component;
+};