only use saved mode if enableAi is on

Author: shakyShane

special-pages/pages/new-tab/app/omnibar/components/OmnibarConsumer.js

@@ -12,6 +12,7 @@ import { useTabState } from '../../tabs/TabsProvider.js';
 /**
  * @typedef {import('../strings.json')} Strings
  * @typedef {import('../../../types/new-tab.js').OmnibarConfig} OmnibarConfig
+ * @typedef {import('../../../types/new-tab.js').OmnibarMode} Mode
  */
 
 /**
@@ -43,7 +44,19 @@ export function OmnibarConsumer() {
 function OmnibarReadyState({ config, tabId }) {
     const { enableAi = true, showAiSetting = true, mode: defaultMode } = config;
     const { setEnableAi, setMode } = useContext(OmnibarContext);
-    const mode = useModeWithLocalPersistence(tabId, defaultMode);
+    const modeForCurrentTab = useModeWithLocalPersistence(tabId, defaultMode);
+
+    /**
+     * Respect the current tab's mode only if 'enableAi' is on.
+     * Otherwise always search
+     *
+     * @type {Mode}
+     */
+    const mode = (() => {
+        if (enableAi) return modeForCurrentTab;
+        return /** @type {const} */ ('search');
+    })();
+
     return (
         <>
             {showAiSetting && <AiSetting enableAi={enableAi} setEnableAi={setEnableAi} />}

special-pages/pages/new-tab/app/omnibar/integration-tests/omnibar.page.js

@@ -186,18 +186,50 @@ export class OmnibarPage {
      * @returns {Promise<void>}
      */
     async didSwitchToTab(tabId, tabIds) {
-        await test.step('simulate tab change event', async () => {
+        await test.step(`simulate tab change event, to: ${tabId} `, async () => {
             await this.ntp.mocks.simulateSubscriptionMessage(sub('tabs_onDataUpdate'), tabs({ tabId, tabIds }));
         });
     }
 
+    /**
+     * @param {object} props
+     * @param {Mode} props.mode
+     * @returns {Promise<void>}
+     */
+    switchMode({ mode }) {
+        switch (mode) {
+            case 'ai': {
+                return this.aiTab().click();
+            }
+            case 'search': {
+                return this.searchTab().click();
+            }
+        }
+    }
+
+    /**
+     * @param {object} props
+     * @param {Mode} props.mode
+     * @param {string} props.value
+     */
+    async expectValue({ mode, value }) {
+        switch (mode) {
+            case 'ai': {
+                return await expect(this.chatInput()).toHaveValue(value);
+            }
+            case 'search': {
+                return await expect(this.searchInput()).toHaveValue(value);
+            }
+        }
+    }
+
     /**
      * @param {object} props
      * @param {Mode} props.mode
      * @param {string} props.value
      * @returns {Promise<void>}
      */
-    input({ mode, value }) {
+    types({ mode, value }) {
         switch (mode) {
             case 'ai': {
                 return this.chatInput().fill(value);

special-pages/pages/new-tab/app/omnibar/integration-tests/omnibar.persistence.spec.js

@@ -1,6 +1,7 @@
 import { test } from '@playwright/test';
 import { NewtabPage } from '../../../integration-tests/new-tab.page.js';
 import { OmnibarPage } from './omnibar.page.js';
+import { CustomizerPage } from '../../customizer/integration-tests/customizer.page.js';
 
 test.describe('omnibar widget persistence', () => {
     test('remembers input across tabs', async ({ page }, workerInfo) => {
@@ -11,14 +12,14 @@ test.describe('omnibar widget persistence', () => {
         await omnibar.ready();
 
         // first fill
-        await omnibar.input({ mode: 'search', value: 'shoes' });
+        await omnibar.types({ mode: 'search', value: 'shoes' });
 
         // switch
         await omnibar.didSwitchToTab('02', ['01', '02']);
         await omnibar.expectInputValue('');
 
         // second fill
-        await omnibar.input({ mode: 'search', value: 'dresses' });
+        await omnibar.types({ mode: 'search', value: 'dresses' });
 
         // back to first
         await omnibar.didSwitchToTab('01', ['01', '02']);
@@ -36,7 +37,7 @@ test.describe('omnibar widget persistence', () => {
         await omnibar.ready();
 
         // first fill
-        await omnibar.input({ mode: 'search', value: 'shoes' });
+        await omnibar.types({ mode: 'search', value: 'shoes' });
         await page.getByRole('tab', { name: 'Duck.ai' }).click();
 
         // new tab, should be opened with duck.ai input still visible
@@ -47,4 +48,29 @@ test.describe('omnibar widget persistence', () => {
         await omnibar.didSwitchToTab('01', ['01', '02']);
         await omnibar.expectChatValue('shoes');
     });
+    test('adjusts mode of other tabs when duck.ai is disabled', async ({ page }, workerInfo) => {
+        const ntp = NewtabPage.create(page, workerInfo);
+        const omnibar = new OmnibarPage(ntp);
+        const customizer = new CustomizerPage(ntp);
+        await ntp.reducedMotion();
+        await ntp.openPage({ additional: { omnibar: true, tabs: true, 'tabs.debug': true } });
+        await omnibar.ready();
+
+        // first tab, switch to ai mode
+        await omnibar.switchMode({ mode: 'ai' });
+
+        // switch to second tab, should be empty but still on duck.ai
+        await omnibar.didSwitchToTab('02', ['01', '02']);
+        await omnibar.expectValue({ value: '', mode: 'ai' });
+        await omnibar.types({ value: 'shoes', mode: 'ai' });
+
+        // now turn duck.ai off, 'shoes' should remain, but on search mode
+        await customizer.opensCustomizer();
+        await omnibar.toggleDuckAiButton().uncheck();
+        await omnibar.expectValue({ value: 'shoes', mode: 'search' });
+
+        // back to first tab, should be empty + search
+        await omnibar.didSwitchToTab('01', ['01', '02']);
+        await omnibar.expectValue({ value: '', mode: 'search' });
+    });
 });