Fix violations in AISettingsTab & migrate it to extend UI.Widget.VBox

Fixed: 407751702
Change-Id: I4b95136448e165ab32ed86609d27daf05efd1963
Reviewed-on: https://chromium-review.googlesource.com/c/devtools/devtools-frontend/+/7085212
Reviewed-by: Ergün Erdoğmuş <[email protected]>
Commit-Queue: Samiya Caur <[email protected]>

Author: Samiya Caur

front_end/panels/settings/AISettingsTab.test.ts

@@ -5,21 +5,19 @@
 import * as Common from '../../core/common/common.js';
 import * as Host from '../../core/host/host.js';
 import type * as Platform from '../../core/platform/platform.js';
+import type {LocalizedString} from '../../core/platform/UIString.js';
 import * as AiAssistanceModel from '../../models/ai_assistance/ai_assistance.js';
 import {renderElementIntoDOM} from '../../testing/DOMHelpers.js';
 import {describeWithEnvironment, updateHostConfig} from '../../testing/EnvironmentHelpers.js';
+import {createViewFunctionStub, type ViewFunctionStub} from '../../testing/ViewFunctionHelpers.js';
 import * as Switch from '../../ui/components/switch/switch.js';
 
 import * as Settings from './settings.js';
 
-async function drainMicroTasks() {
-  await new Promise(resolve => setTimeout(resolve, 0));
-}
-
 describeWithEnvironment('AISettingsTab', () => {
   let deleteAiAssistanceHistoryStub:
       sinon.SinonStub<Parameters<typeof AiAssistanceModel.AiHistoryStorage.AiHistoryStorage.prototype.deleteAll>>;
-  let view: Settings.AISettingsTab.AISettingsTab|undefined;
+  let aidaAccessStub: sinon.SinonStub<[], Promise<Host.AidaClient.AidaAccessPreconditions>>;
 
   beforeEach(async () => {
     deleteAiAssistanceHistoryStub =
@@ -33,11 +31,12 @@ describeWithEnvironment('AISettingsTab', () => {
         enabled: true,
       }
     });
+    aidaAccessStub = sinon.stub(Host.AidaClient.AidaClient, 'checkAccessPreconditions');
+    aidaAccessStub.returns(Promise.resolve(Host.AidaClient.AidaAccessPreconditions.AVAILABLE));
   });
 
   afterEach(async () => {
-    await drainMicroTasks();
-    view?.remove();
+    aidaAccessStub.restore();
   });
 
   function mockHostConfigWithExplainThisResourceEnabled() {
@@ -49,72 +48,48 @@ describeWithEnvironment('AISettingsTab', () => {
     });
   }
 
-  function isExpanded(details: Element): boolean {
-    return details.classList.contains('open');
-  }
-
-  async function renderAISettings(): Promise<{
-    switches: Switch.Switch.Switch[],
-    details: Element[],
-    dropdownButtons: HTMLElement[],
-    toggleContainers: HTMLElement[],
-    view: Settings.AISettingsTab.AISettingsTab,
+  async function setupWidget(): Promise<{
+    widget: Settings.AISettingsTab.AISettingsTab,
+    view: ViewFunctionStub<typeof Settings.AISettingsTab.AISettingsTab>,
   }> {
-    Common.Settings.moduleSetting('console-insights-enabled').set(false);
-    Common.Settings.moduleSetting('ai-assistance-enabled').set(true);
-    Common.Settings.moduleSetting('ai-annotations-enabled').set(true);
-    Common.Settings.moduleSetting('ai-code-completion-enabled').set(false);
-
-    view = new Settings.AISettingsTab.AISettingsTab();
-    renderElementIntoDOM(view);
-    await view.render();
-    assert.isNotNull(view.shadowRoot);
-
-    const switches = Array.from(view.shadowRoot.querySelectorAll('devtools-switch'));
-    assert.lengthOf(switches, 4);
-    const details = Array.from(view.shadowRoot.querySelectorAll('.whole-row'));
-    assert.lengthOf(details, 4);
-    const dropdownButtons = Array.from(view.shadowRoot.querySelectorAll('.dropdown devtools-button')) as HTMLElement[];
-    assert.lengthOf(dropdownButtons, 4);
-    const toggleContainers =
-        Array.from(view.shadowRoot.querySelectorAll('.toggle-container')) as Switch.Switch.Switch[];
-    assert.lengthOf(toggleContainers, 4);
-    return {switches, details, dropdownButtons, toggleContainers, view};
+    const view = createViewFunctionStub(Settings.AISettingsTab.AISettingsTab);
+    const widget = new Settings.AISettingsTab.AISettingsTab(view);
+    const container = document.createElement('div');
+    renderElementIntoDOM(container);
+    widget.markAsRoot();
+    widget.show(container);
+    await view.nextInput;
+    return {widget, view};
   }
 
-  it('renders', async () => {
+  it('renders disclaimers and settings', async () => {
     Common.Settings.moduleSetting('console-insights-enabled').set(true);
     Common.Settings.moduleSetting('ai-assistance-enabled').set(true);
     Common.Settings.moduleSetting('ai-annotations-enabled').set(true);
     Common.Settings.moduleSetting('ai-code-completion-enabled').set(true);
 
-    view = new Settings.AISettingsTab.AISettingsTab();
-    renderElementIntoDOM(view);
-    await view.render();
-    assert.isNotNull(view.shadowRoot);
+    const {view} = await setupWidget();
 
-    const sharedDisclaimerHeader = view.shadowRoot.querySelector('.shared-disclaimer h2');
-    assert.strictEqual(sharedDisclaimerHeader?.textContent, 'Boost your productivity with AI');
-
-    const disclaimers = view.shadowRoot.querySelectorAll('.shared-disclaimer .disclaimer-list div');
+    const disclaimers = view.input.sharedDisclaimerBulletPoints;
+    const sendDataDiscalimer = disclaimers[1].text as LocalizedString;
     assert.strictEqual(
-        disclaimers[3].textContent,
+        sendDataDiscalimer,
         'These features send relevant data to Google. Google collects this data and feedback to improve its products and services with the help of human reviewers. Avoid sharing sensitive or personal information.');
-    assert.strictEqual(disclaimers[5].textContent, 'Depending on your region, Google may refrain from data collection');
+    const dataCollectionDiscalimer = disclaimers[2].text as LocalizedString;
+    assert.strictEqual(dataCollectionDiscalimer, 'Depending on your region, Google may refrain from data collection');
 
-    const settingCards = view.shadowRoot.querySelectorAll('.setting-card h2');
-    const settingNames = Array.from(settingCards).map(element => element.textContent);
+    const settingToParams = view.input.settingToParams;
+    const settingParams = Array.from(settingToParams.values());
+    const settingNames = settingParams.map(setting => setting.settingName);
     assert.deepEqual(settingNames, ['Console Insights', 'AI assistance', 'Auto annotations', 'Code suggestions']);
-
-    const settingCardDesc = view.shadowRoot.querySelectorAll('.setting-description');
-    assert.strictEqual(settingCardDesc[0].textContent, 'Helps you understand and fix console warnings and errors');
-    assert.strictEqual(settingCardDesc[1].textContent, 'Get help with understanding CSS styles');
+    assert.strictEqual(settingParams[0].settingDescription, 'Helps you understand and fix console warnings and errors');
+    assert.strictEqual(settingParams[1].settingDescription, 'Get help with understanding CSS styles');
     assert.strictEqual(
-        settingCardDesc[2].textContent, 'Automatically generate titles for performance trace annotations');
-    assert.strictEqual(settingCardDesc[3].textContent, 'Get help completing your code');
+        settingParams[2].settingDescription, 'Automatically generate titles for performance trace annotations');
+    assert.strictEqual(settingParams[3].settingDescription, 'Get help completing your code');
   });
 
-  it('renders different dislaimers for managed users which have logging disabled', async () => {
+  it('has different dislaimers for managed users which have logging disabled', async () => {
     Common.Settings.moduleSetting('console-insights-enabled').set(true);
     Common.Settings.moduleSetting('ai-assistance-enabled').set(true);
     Common.Settings.moduleSetting('ai-annotations-enabled').set(true);
@@ -130,73 +105,88 @@ describeWithEnvironment('AISettingsTab', () => {
       },
     });
 
-    view = new Settings.AISettingsTab.AISettingsTab();
-    renderElementIntoDOM(view);
-    await view.render();
-    assert.isNotNull(view.shadowRoot);
+    const {view} = await setupWidget();
 
-    const disclaimers = view.shadowRoot.querySelectorAll('.shared-disclaimer .disclaimer-list div');
+    const disclaimers = view.input.sharedDisclaimerBulletPoints;
+    const sendDataNoLogging = disclaimers[1].text as LocalizedString;
     assert.strictEqual(
-        disclaimers[3].textContent,
+        sendDataNoLogging,
         'Your content will not be used by human reviewers to improve AI. Your organization may change these settings at any time.');
+    const dataCollectionNoLogging = disclaimers[2].text as LocalizedString;
     assert.strictEqual(
-        disclaimers[5].textContent,
+        dataCollectionNoLogging,
         'Depending on your Google account management and/or region, Google may refrain from data collection');
   });
 
-  it('renders with explain this resource enabled', async () => {
-    mockHostConfigWithExplainThisResourceEnabled();
+  it('has explain this resource enabled', async () => {
     Common.Settings.moduleSetting('console-insights-enabled').set(true);
     Common.Settings.moduleSetting('ai-assistance-enabled').set(true);
+    mockHostConfigWithExplainThisResourceEnabled();
 
-    view = new Settings.AISettingsTab.AISettingsTab();
-    renderElementIntoDOM(view);
-    await view.render();
-    assert.isNotNull(view.shadowRoot);
+    const {view} = await setupWidget();
 
-    const settingCardDesc = view.shadowRoot.querySelectorAll('.setting-description');
-    assert.strictEqual(settingCardDesc[1].textContent, 'Get help with understanding CSS styles, and network requests');
+    const settingToParams = view.input.settingToParams.entries();
+    settingToParams.next();
+    const explainThisResource = settingToParams.next();
+    assert.exists(explainThisResource.value);
+    assert.isFalse(explainThisResource.value[0].disabled());
+    assert.strictEqual(
+        explainThisResource.value[1].settingDescription,
+        'Get help with understanding CSS styles, and network requests');
   });
 
   it('can turn feature on, which automatically expands it', async () => {
-    const {switches, details} = await renderAISettings();
+    Common.Settings.moduleSetting('console-insights-enabled').set(false);
+    const {view} = await setupWidget();
+
     assert.isFalse(Common.Settings.moduleSetting('console-insights-enabled').get());
-    assert.isFalse(isExpanded(details[0]));
+    const setting = view.input.settingToParams.entries().next();
+    assert.exists(setting.value);
+    assert.isFalse(setting.value[1].settingExpandState.isSettingExpanded);
 
-    switches[0].dispatchEvent(new Switch.Switch.SwitchChangeEvent(true));
+    view.input.toggleSetting(setting.value[0], new Switch.Switch.SwitchChangeEvent(true));
     assert.isTrue(Common.Settings.moduleSetting('console-insights-enabled').get());
-    assert.isTrue(isExpanded(details[0]));
+    assert.isTrue(setting.value[1].settingExpandState.isSettingExpanded);
   });
 
-  it('can expand and collaps details via click', async () => {
-    const {details, dropdownButtons} = await renderAISettings();
-    assert.isFalse(isExpanded(details[0]));
+  it('can expand and collapse details via click', async () => {
+    Common.Settings.moduleSetting('console-insights-enabled').set(false);
+    const {view} = await setupWidget();
+
+    const setting = view.input.settingToParams.entries().next();
+    assert.exists(setting.value);
+    assert.isFalse(setting.value[1].settingExpandState.isSettingExpanded);
     assert.isFalse(Common.Settings.moduleSetting('console-insights-enabled').get());
 
-    dropdownButtons[0].click();
-    assert.isTrue(isExpanded(details[0]));
+    view.input.expandSetting(setting.value[0]);
     assert.isFalse(Common.Settings.moduleSetting('console-insights-enabled').get());
+    assert.isTrue(setting.value[1].settingExpandState.isSettingExpanded);
 
-    dropdownButtons[0].click();
-    assert.isFalse(isExpanded(details[0]));
+    view.input.expandSetting(setting.value[0]);
     assert.isFalse(Common.Settings.moduleSetting('console-insights-enabled').get());
+    assert.isFalse(setting.value[1].settingExpandState.isSettingExpanded);
   });
 
   it('can turn feature off without collapsing it', async () => {
-    const {switches, details, dropdownButtons} = await renderAISettings();
-    dropdownButtons[1].click();
+    Common.Settings.moduleSetting('ai-assistance-enabled').set(true);
+    const {view} = await setupWidget();
+
+    const settingToParams = view.input.settingToParams.entries();
+    settingToParams.next();
+    const setting = settingToParams.next();
+    assert.exists(setting.value);
+
+    view.input.expandSetting(setting.value[0]);
     assert.isTrue(Common.Settings.moduleSetting('ai-assistance-enabled').get());
-    assert.isTrue(isExpanded(details[1]));
+    assert.isTrue(setting.value[1].settingExpandState.isSettingExpanded);
 
-    (switches[1].parentElement as HTMLElement).click();
+    view.input.toggleSetting(setting.value[0], new MouseEvent('click'));
     assert.isFalse(Common.Settings.moduleSetting('ai-assistance-enabled').get());
-    assert.isTrue(isExpanded(details[1]));
+    assert.isTrue(setting.value[1].settingExpandState.isSettingExpanded);
   });
 
   it('disables switches if blocked by age', async () => {
     const underAgeExplainer = 'This feature is only available to users who are 18 years of age or older.';
-    const aidaAccessStub = sinon.stub(Host.AidaClient.AidaClient, 'checkAccessPreconditions');
-    aidaAccessStub.returns(Promise.resolve(Host.AidaClient.AidaAccessPreconditions.AVAILABLE));
     updateHostConfig({
       aidaAvailability: {
         blockedByAge: true,
@@ -209,50 +199,28 @@ describeWithEnvironment('AISettingsTab', () => {
       },
     });
 
-    const {switches, toggleContainers, view} = await renderAISettings();
-    assert.strictEqual(view.shadowRoot?.querySelector('.disabled-explainer')?.textContent?.trim(), underAgeExplainer);
-    assert.isTrue(switches[0].disabled);
-    assert.strictEqual(toggleContainers[0].title, underAgeExplainer);
-    assert.isTrue(switches[1].disabled);
-    assert.strictEqual(toggleContainers[1].title, underAgeExplainer);
-    assert.isTrue(switches[2].disabled);
-    assert.strictEqual(toggleContainers[2].title, underAgeExplainer);
-    assert.isTrue(switches[3].disabled);
-    assert.strictEqual(toggleContainers[3].title, underAgeExplainer);
+    const {view} = await setupWidget();
 
-    aidaAccessStub.restore();
+    assert.deepEqual(view.input.disabledReasons, [underAgeExplainer]);
   });
 
   it('updates when the user logs in', async () => {
     const notLoggedInExplainer = 'This feature is only available when you sign into Chrome with your Google account.';
-    const aidaAccessStub = sinon.stub(Host.AidaClient.AidaClient, 'checkAccessPreconditions');
     aidaAccessStub.returns(Promise.resolve(Host.AidaClient.AidaAccessPreconditions.NO_ACCOUNT_EMAIL));
 
-    const {switches, toggleContainers, view} = await renderAISettings();
-    assert.strictEqual(
-        view.shadowRoot?.querySelector('.disabled-explainer')?.textContent?.trim(), notLoggedInExplainer);
-    assert.isTrue(switches[0].disabled);
-    assert.strictEqual(toggleContainers[0].title, notLoggedInExplainer);
-    assert.isTrue(switches[1].disabled);
-    assert.strictEqual(toggleContainers[1].title, notLoggedInExplainer);
-    assert.isTrue(switches[2].disabled);
-    assert.strictEqual(toggleContainers[2].title, notLoggedInExplainer);
-    assert.isTrue(switches[3].disabled);
-    assert.strictEqual(toggleContainers[3].title, notLoggedInExplainer);
+    const {view} = await setupWidget();
+
+    assert.deepEqual(view.input.disabledReasons, [notLoggedInExplainer]);
 
     aidaAccessStub.returns(Promise.resolve(Host.AidaClient.AidaAccessPreconditions.AVAILABLE));
     Host.AidaClient.HostConfigTracker.instance().dispatchEventToListeners(
         Host.AidaClient.Events.AIDA_AVAILABILITY_CHANGED);
-    await drainMicroTasks();
-    assert.isNull(view.shadowRoot?.querySelector('.disabled-explainer'));
-    assert.isFalse(switches[0].disabled);
-    assert.isFalse(switches[1].disabled);
-    assert.isFalse(switches[2].disabled);
-    assert.isFalse(switches[3].disabled);
-    aidaAccessStub.restore();
+    await view.nextInput;
+
+    assert.deepEqual(view.input.disabledReasons, []);
   });
 
-  it('renders disabled switch component with reason', async () => {
+  it('updates disabled reason', async () => {
     Common.Settings.moduleSetting('console-insights-enabled').setRegistration({
       settingName: 'console-insights-enabled',
       settingType: Common.Settings.SettingType.BOOLEAN,
@@ -269,24 +237,23 @@ describeWithEnvironment('AISettingsTab', () => {
         return {disabled: true, reasons: ['some reason' as Platform.UIString.LocalizedString]};
       },
     });
-    const stub = sinon.stub(Host.AidaClient.AidaClient, 'checkAccessPreconditions');
-    stub.returns(Promise.resolve(Host.AidaClient.AidaAccessPreconditions.AVAILABLE));
-
-    const {switches, toggleContainers, view} = await renderAISettings();
-    assert.strictEqual(view.shadowRoot?.querySelector('.disabled-explainer')?.textContent?.trim(), 'some reason');
-    assert.isTrue(switches[0].disabled);
-    assert.strictEqual(toggleContainers[0].title, 'some reason');
-    assert.isTrue(switches[1].disabled);
-    assert.strictEqual(toggleContainers[1].title, 'some reason');
-    stub.restore();
+
+    const {view} = await setupWidget();
+
+    assert.deepEqual(view.input.disabledReasons, ['some reason']);
   });
 
   it('can turn feature off and clear history', async () => {
-    const {switches} = await renderAISettings();
     Common.Settings.moduleSetting('ai-assistance-enabled').set(true);
     Common.Settings.moduleSetting('ai-assistance-history-entries').set([{}, {}]);
+    const {view} = await setupWidget();
+
+    const settingToParams = view.input.settingToParams.entries();
+    settingToParams.next();
+    const setting = settingToParams.next();
+    assert.exists(setting.value);
 
-    (switches[1].parentElement as HTMLElement).click();
+    view.input.toggleSetting(setting.value[0], new MouseEvent('click'));
     assert.isFalse(Common.Settings.moduleSetting('ai-assistance-enabled').get());
     assert.isTrue(
         deleteAiAssistanceHistoryStub.called, 'Expected AiHistoryStorage deleteAll to be called but it is not called');