Customize rows after import (#2401)

horviadam · web-flow · commit c5e861587990 · 2026-03-11T05:29:20.000Z
* Add getCustomizeStepRows event

* Fix build errors.

* Run prettier

* Fix integration tests

* Remove extra unwrapping.

* Make linter happy.

* Clear timeout if response was received

* Use onConfigUpdate subcription instead of introducing a callback

* Fix rebase errors

* Fix linter errors

* introduce a guard for nextStepDefs[key]

* remove unnecessary test

* Extend "Given onConfigUpdate behavior" UT with additional state verification

* Allow running "Given onConfigUpdate behavior" test on macOS

* Add new onboarding test to onboarding.v4.spec.js

* Make prettier happy.

* refactor duplicated code
diff --git a/messaging/lib/messaging.types.d.ts b/messaging/lib/messaging.types.d.ts
@@ -38,6 +38,8 @@ interface Window {
         mockResponses: Record<string, import('../index.js').MessageResponse>;
         subscriptionEvents: import('../index.js').SubscriptionEvent[];
         publishSubscriptionEvent?: (evt: import('../index.js').SubscriptionEvent) => void;
+        /** Optional map of subscription name -> Set of callbacks (used by onboarding mock transport in tests). */
+        subscriptions?: Map<string, Set<(data: unknown) => void>>;
         mocks: {
             outgoing: UnstableMockCall[];
         };
diff --git a/special-pages/pages/onboarding/app/global.js b/special-pages/pages/onboarding/app/global.js
@@ -23,6 +23,29 @@ export function reducer(state, action) {
     // console.log('action', action)
     // console.groupEnd()
 
+    if (action.kind === 'config-update') {
+        let nextStepDefs = state.stepDefinitions;
+        if (action.stepDefinitions) {
+            nextStepDefs = { ...state.stepDefinitions };
+            for (const [key, value] of Object.entries(action.stepDefinitions)) {
+                if (typeof value === 'object' && value !== null && nextStepDefs[key]) {
+                    nextStepDefs[key] = { ...nextStepDefs[key], ...value };
+                } else {
+                    nextStepDefs[key] = value;
+                }
+            }
+        }
+        let nextOrder = state.order;
+        if (action.exclude) {
+            nextOrder = state.order.filter((id) => !action.exclude?.includes(id));
+        }
+        return {
+            ...state,
+            stepDefinitions: nextStepDefs,
+            order: nextOrder,
+            step: nextStepDefs[state.activeStep] ?? state.step,
+        };
+    }
     switch (state.status.kind) {
         case 'idle': {
             switch (action.kind) {
@@ -198,7 +221,7 @@ export function GlobalProvider({ order, children, stepDefinitions, messaging, fi
             dispatch(msg);
 
             /**
-             * Side effects that don't impact global state
+             * Side effects that don't impact global state (advance to non-customize step, or other message kinds).
              */
             if (msg.kind === 'advance') {
                 messaging.stepCompleted({ id: state.activeStep });
@@ -213,6 +236,16 @@ export function GlobalProvider({ order, children, stepDefinitions, messaging, fi
         [state, messaging],
     );
 
+    useEffect(() => {
+        const unsubscribe = messaging.onConfigUpdate((data) => {
+            dispatch({
+                kind: 'config-update',
+                stepDefinitions: data.stepDefinitions,
+                exclude: /** @type {import('./types.js').ConfigUpdateEvent['exclude']} */ (data.exclude),
+            });
+        });
+        return unsubscribe;
+    }, [messaging]);
     // handle *fatal* state (from error boundary)
     useEffect(() => {
         if (state.status.kind !== 'fatal') return;
diff --git a/special-pages/pages/onboarding/app/messages.js b/special-pages/pages/onboarding/app/messages.js
@@ -159,6 +159,15 @@ export class OnboardingMessages {
         this.messaging.notify('reportInitException', params);
     }
 
+    /**
+     * Subscribe to config updates pushed by native (e.g. customize step rows).
+     * @param {(data: {stepDefinitions?: Record<string, any>, exclude?: string[]}) => void} params
+     * @returns {() => void}
+     */
+    onConfigUpdate(params) {
+        return this.messaging.subscribe('onConfigUpdate', params);
+    }
+
     /**
      * Sent when the user wants to enable or disable ad blocking.
      *
diff --git a/special-pages/pages/onboarding/app/types.js b/special-pages/pages/onboarding/app/types.js
@@ -98,7 +98,8 @@ export const ORDER_V4 = ['welcome', 'getStarted', 'makeDefaultSingle', 'systemSe
  *   | DismisstoSettingsEvent
  *   | ErrorBoundaryEvent
  *   | ShowOverlayEvent
- *   | DismissOverlayEvent} GlobalEvents
+ *   | DismissOverlayEvent
+ *   | ConfigUpdateEvent} GlobalEvents
  *  All the events that the UI can dispatch
  * @typedef {{ kind: "enqueue-next"; }} NextEvent
  * @typedef {{ kind: "advance" }} AdvanceEvent
@@ -111,7 +112,7 @@ export const ORDER_V4 = ['welcome', 'getStarted', 'makeDefaultSingle', 'systemSe
  * @typedef {{ kind: "title-complete"; }} TitleCompleteEvent
  * @typedef {{ kind: "show-overlay"; overlay: OverlayId }} ShowOverlayEvent
  * @typedef {{ kind: "dismiss-overlay" }} DismissOverlayEvent
- *
+ * @typedef {{ kind: "config-update"; stepDefinitions?: Record<string, any>; exclude?: Step['id'][] }} ConfigUpdateEvent
  */
 
 /** @type {ImportMeta['injectName'][]} */
diff --git a/special-pages/pages/onboarding/integration-tests/onboarding.page.js b/special-pages/pages/onboarding/integration-tests/onboarding.page.js
@@ -48,10 +48,16 @@ export class OnboardingPage {
     }
 
     withInitData(data) {
-        this.mocks.defaultResponses({
-            ...this.defaultResponses,
-            init: data,
-        });
+        this.defaultResponses = { ...this.defaultResponses, init: data };
+        this.mocks.defaultResponses(this.defaultResponses);
+    }
+
+    /**
+     * Push an onConfigUpdate subscription event (e.g. stepDefinitions.customize.rows for integration tests).
+     * @param {{ stepDefinitions?: Record<string, any>; exclude?: string[] }} payload
+     */
+    async pushConfigUpdate(payload) {
+        await this.mocks.simulateSubscriptionMessage('onConfigUpdate', payload);
     }
 
     /**
diff --git a/special-pages/pages/onboarding/integration-tests/onboarding.v3.spec.js b/special-pages/pages/onboarding/integration-tests/onboarding.v3.spec.js
@@ -765,5 +765,28 @@ test.describe('onboarding v3', () => {
             // ▶️ Then I can toggle it afterward
             await onboarding.startBrowsing();
         });
+
+        test.describe('Given onConfigUpdate behavior', () => {
+            test('When config update has reduced customize rows (no bookmarks), only those rows are shown', async ({
+                page,
+            }, workerInfo) => {
+                const onboarding = OnboardingV3Page.create(page, workerInfo);
+                onboarding.withInitData({
+                    order: 'v3',
+                    stepDefinitions: { systemSettings: { rows: ['dock', 'import', 'default-browser'] } },
+                });
+                await onboarding.reducedMotion();
+                await onboarding.openPage({ env: 'app', page: 'customize' });
+                // before push — default rows include bookmarks
+                await page.getByRole('button', { name: 'Show Bookmarks Bar' }).waitFor({ timeout: 10000 });
+                await expect(page.getByRole('button', { name: 'Show Bookmarks Bar' })).toBeVisible();
+                // push config update removing bookmarks
+                await onboarding.pushConfigUpdate({ stepDefinitions: { customize: { rows: ['session-restore', 'home-shortcut'] } } });
+                // after push — bookmarks gone
+                await page.getByRole('button', { name: 'Enable Session Restore' }).waitFor({ timeout: 10000 });
+                await expect(page.getByRole('button', { name: 'Show Bookmarks Bar' })).not.toBeVisible();
+                await expect(page.getByRole('button', { name: 'Enable Session Restore' })).toBeVisible();
+            });
+        });
     });
 });
diff --git a/special-pages/pages/onboarding/integration-tests/onboarding.v4.spec.js b/special-pages/pages/onboarding/integration-tests/onboarding.v4.spec.js
@@ -462,5 +462,28 @@ test.describe('onboarding v4', () => {
             // ▶️ Then I can toggle it afterward
             await onboarding.startBrowsing();
         });
+
+        test.describe('Given onConfigUpdate behavior', () => {
+            test('When config update has reduced customize rows (no bookmarks), only those rows are shown', async ({
+                page,
+            }, workerInfo) => {
+                const onboarding = OnboardingV4Page.create(page, workerInfo);
+                onboarding.withInitData({
+                    order: 'v4',
+                    stepDefinitions: { systemSettings: { rows: ['dock', 'import', 'default-browser'] } },
+                });
+                await onboarding.reducedMotion();
+                await onboarding.openPage({ env: 'app', page: 'customize' });
+                // before push - default rows include bookmarks
+                await page.getByRole('button', { name: 'Show Bookmarks Bar' }).waitFor({ timeout: 10000 });
+                await expect(page.getByRole('button', { name: 'Show Bookmarks Bar' })).toBeVisible();
+                // push config update removing bookmarks
+                await onboarding.pushConfigUpdate({ stepDefinitions: { customize: { rows: ['session-restore', 'home-shortcut'] } } });
+                // after push - bookmarks gone
+                await page.getByRole('button', { name: 'Enable Session Restore' }).waitFor({ timeout: 10000 });
+                await expect(page.getByRole('button', { name: 'Show Bookmarks Bar' })).not.toBeVisible();
+                await expect(page.getByRole('button', { name: 'Enable Session Restore' })).toBeVisible();
+            });
+        });
     });
 });
diff --git a/special-pages/pages/onboarding/src/mock-transport.js b/special-pages/pages/onboarding/src/mock-transport.js
@@ -7,6 +7,13 @@ import { TestTransportConfig } from '@duckduckgo/messaging';
 const url = new URL(window.location.href);
 
 export function mockTransport() {
+    if (typeof window !== 'undefined' && window.__playwright_01) {
+        window.__playwright_01.publishSubscriptionEvent = (/** @type {{ subscriptionName: string; params?: unknown }} */ evt) => {
+            window.__playwright_01?.subscriptions
+                ?.get(evt.subscriptionName)
+                ?.forEach((/** @type {(data: unknown) => void} */ cb) => cb(evt.params));
+        };
+    }
     return new TestTransportConfig({
         notify(_msg) {
             window.__playwright_01?.mocks?.outgoing?.push?.({ payload: structuredClone(_msg) });
@@ -79,11 +86,20 @@ export function mockTransport() {
         },
         subscribe(_msg, callback) {
             window.__playwright_01?.mocks?.outgoing?.push?.({ payload: structuredClone(_msg) });
-
-            callback(null);
-
+            if (!window.__playwright_01) {
+                return () => {};
+            }
+            const msg = /** @type {{ method?: string; subscriptionName?: string }} */ (_msg);
+            const name = typeof _msg === 'string' ? _msg : (msg.subscriptionName ?? msg.method ?? 'onConfigUpdate');
+            if (!window.__playwright_01.subscriptions) {
+                window.__playwright_01.subscriptions = new Map();
+            }
+            if (!window.__playwright_01.subscriptions.has(name)) {
+                window.__playwright_01.subscriptions.set(name, new Set());
+            }
+            window.__playwright_01.subscriptions.get(name)?.add(callback);
             return () => {
-                // any cleanup
+                window.__playwright_01?.subscriptions?.get(name)?.delete(callback);
             };
         },
     });
