[PM-18132] - Update the Appearance settings page to include click to fill setting (#13460)

* Update the Appearance settings page to include click to fill setting * fix tests * fix tests * add tests * new customization options callout * use classes instead of inline styling * revert changes to index and tw-theme * remove shared module * Revert "remove shared module" This reverts commit 0b68aaae23. * Revert "revert changes to index and tw-theme" This reverts commit 4a05f0ca20. * Revert "use classes instead of inline styling" This reverts commit 0e441c4284. * Revert "new customization options callout" This reverts commit f3054c9b27. * remove unused code * disable margin on autofill suggestion
2025-12-11 05:43:41 +00:00 · 2025-02-21 08:57:06 -08:00
parent 413f638b9d
commit 0bc7813b1c
6 changed files with 83 additions and 34 deletions
--- a/apps/browser/src/_locales/en/messages.json
+++ b/apps/browser/src/_locales/en/messages.json
@@ -1029,6 +1029,9 @@
  "clickToAutofillOnVault": {
    "message": "Click items to autofill on Vault view"
  },
+  "clickToAutofill": {
+    "message": "Click items in autofill suggestion to fill"
+  },
  "clearClipboard": {
    "message": "Clear clipboard",
    "description": "Clipboard is the operating system thing where you copy/paste data to on your device."
@@ -2085,6 +2088,9 @@
    "message": "to create a strong unique password",
    "description": "This will be used as part of a larger sentence, broken up to include the generator icon. The full sentence will read 'Use the generator [GENERATOR_ICON] to create a strong unique password'"
  },
+  "vaultCustomization": {
+    "message": "Vault customization"
+  },
  "vaultTimeoutAction": {
    "message": "Vault timeout action"
  },
--- a/apps/browser/src/autofill/popup/settings/autofill.component.html
+++ b/apps/browser/src/autofill/popup/settings/autofill.component.html
@@ -120,7 +120,7 @@
          />
          <bit-label for="showCardsSuggestions">{{ "showCardsInVaultViewV2" | i18n }}</bit-label>
        </bit-form-control>
-        <bit-form-control>
+        <bit-form-control disableMargin>
          <input
            bitCheckbox
            id="showIdentitiesSuggestions"
@@ -132,18 +132,6 @@
            {{ "showIdentitiesInVaultViewV2" | i18n }}
          </bit-label>
        </bit-form-control>
-        <bit-form-control disableMargin>
-          <input
-            bitCheckbox
-            id="clickToAutofill"
-            type="checkbox"
-            (change)="updateClickItemsVaultView()"
-            [(ngModel)]="clickItemsVaultView"
-          />
-          <bit-label for="clickToAutofill" class="tw-whitespace-normal">
-            {{ "clickToAutofillOnVault" | i18n }}
-          </bit-label>
-        </bit-form-control>
      </bit-card>
    </bit-section>
    <bit-section>
--- a/apps/browser/src/autofill/popup/settings/autofill.component.ts
+++ b/apps/browser/src/autofill/popup/settings/autofill.component.ts
@@ -109,7 +109,6 @@ export class AutofillComponent implements OnInit {
  uriMatchOptions: { name: string; value: UriMatchStrategySetting }[];
  showCardsCurrentTab: boolean = true;
  showIdentitiesCurrentTab: boolean = true;
-  clickItemsVaultView: boolean = false;
  autofillKeyboardHelperText: string;
  accountSwitcherEnabled: boolean = false;

@@ -211,10 +210,6 @@ export class AutofillComponent implements OnInit {
    this.showIdentitiesCurrentTab = await firstValueFrom(
      this.vaultSettingsService.showIdentitiesCurrentTab$,
    );
-
-    this.clickItemsVaultView = await firstValueFrom(
-      this.vaultSettingsService.clickItemsToAutofillVaultView$,
-    );
  }

  async updateInlineMenuVisibility() {
@@ -421,8 +416,4 @@ export class AutofillComponent implements OnInit {
  async updateShowInlineMenuIdentities() {
    await this.autofillSettingsService.setShowInlineMenuIdentities(this.showInlineMenuIdentities);
  }
-
-  async updateClickItemsVaultView() {
-    await this.vaultSettingsService.setClickItemsToAutofillVaultView(this.clickItemsVaultView);
-  }
 }
--- a/apps/browser/src/vault/popup/settings/appearance-v2.component.html
+++ b/apps/browser/src/vault/popup/settings/appearance-v2.component.html
@@ -31,25 +31,32 @@
        >
      </bit-form-control>

-      <bit-form-control>
-        <input bitCheckbox formControlName="showQuickCopyActions" type="checkbox" />
-        <bit-label>{{ "showQuickCopyActions" | i18n }}</bit-label>
-      </bit-form-control>
-
      <bit-form-control>
        <input bitCheckbox formControlName="enableBadgeCounter" type="checkbox" />
        <bit-label>{{ "showNumberOfAutofillSuggestions" | i18n }}</bit-label>
      </bit-form-control>

-      <bit-form-control>
-        <input bitCheckbox formControlName="enableFavicon" type="checkbox" />
-        <bit-label>{{ "enableFavicon" | i18n }}</bit-label>
-      </bit-form-control>
-
      <bit-form-control disableMargin>
        <input bitCheckbox formControlName="enableAnimations" type="checkbox" />
        <bit-label>{{ "showAnimations" | i18n }}</bit-label>
      </bit-form-control>
    </bit-card>
+    <h2 bitTypography="h6" class="tw-font-bold tw-mt-4">{{ "vaultCustomization" | i18n }}</h2>
+    <bit-card>
+      <bit-form-control>
+        <input bitCheckbox formControlName="enableFavicon" type="checkbox" />
+        <bit-label>{{ "enableFavicon" | i18n }}</bit-label>
+      </bit-form-control>
+      <bit-form-control>
+        <input bitCheckbox formControlName="showQuickCopyActions" type="checkbox" />
+        <bit-label>{{ "showQuickCopyActions" | i18n }}</bit-label>
+      </bit-form-control>
+      <bit-form-control disableMargin>
+        <input bitCheckbox formControlName="clickItemsToAutofillVaultView" type="checkbox" />
+        <bit-label>
+          {{ "clickToAutofill" | i18n }}
+        </bit-label>
+      </bit-form-control>
+    </bit-card>
  </form>
 </popup-page>
--- a/apps/browser/src/vault/popup/settings/appearance-v2.component.spec.ts
+++ b/apps/browser/src/vault/popup/settings/appearance-v2.component.spec.ts
@@ -12,6 +12,7 @@ import { MessagingService } from "@bitwarden/common/platform/abstractions/messag
 import { PlatformUtilsService } from "@bitwarden/common/platform/abstractions/platform-utils.service";
 import { ThemeType } from "@bitwarden/common/platform/enums";
 import { ThemeStateService } from "@bitwarden/common/platform/theming/theme-state.service";
+import { VaultSettingsService } from "@bitwarden/common/vault/abstractions/vault-settings/vault-settings.service";

 import { PopupCompactModeService } from "../../../platform/popup/layout/popup-compact-mode.service";
 import { PopupHeaderComponent } from "../../../platform/popup/layout/popup-header.component";
@@ -36,7 +37,9 @@ class MockPopupHeaderComponent {
  selector: "popup-page",
  template: `<ng-content></ng-content>`,
 })
-class MockPopupPageComponent {}
+class MockPopupPageComponent {
+  @Input() loading: boolean;
+}

 describe("AppearanceV2Component", () => {
  let component: AppearanceV2Component;
@@ -48,12 +51,14 @@ describe("AppearanceV2Component", () => {
  const enableRoutingAnimation$ = new BehaviorSubject<boolean>(true);
  const enableCompactMode$ = new BehaviorSubject<boolean>(false);
  const showQuickCopyActions$ = new BehaviorSubject<boolean>(false);
+  const clickItemsToAutofillVaultView$ = new BehaviorSubject<boolean>(false);
  const setSelectedTheme = jest.fn().mockResolvedValue(undefined);
  const setShowFavicons = jest.fn().mockResolvedValue(undefined);
  const setEnableBadgeCounter = jest.fn().mockResolvedValue(undefined);
  const setEnableRoutingAnimation = jest.fn().mockResolvedValue(undefined);
  const setEnableCompactMode = jest.fn().mockResolvedValue(undefined);
  const setShowQuickCopyActions = jest.fn().mockResolvedValue(undefined);
+  const setClickItemsToAutofillVaultView = jest.fn().mockResolvedValue(undefined);

  const mockWidthService: Partial<PopupSizeService> = {
    width$: new BehaviorSubject("default"),
@@ -98,6 +103,13 @@ describe("AppearanceV2Component", () => {
          provide: PopupSizeService,
          useValue: mockWidthService,
        },
+        {
+          provide: VaultSettingsService,
+          useValue: {
+            clickItemsToAutofillVaultView$,
+            setClickItemsToAutofillVaultView,
+          },
+        },
      ],
    })
      .overrideComponent(AppearanceV2Component, {
@@ -115,7 +127,10 @@ describe("AppearanceV2Component", () => {
    fixture.detectChanges();
  });

-  it("populates the form with the user's current settings", () => {
+  it("populates the form with the user's current settings", async () => {
+    fixture.detectChanges();
+    await fixture.whenStable();
+    fixture.detectChanges();
    expect(component.appearanceForm.value).toEqual({
      enableAnimations: true,
      enableFavicon: true,
@@ -124,6 +139,7 @@ describe("AppearanceV2Component", () => {
      enableCompactMode: false,
      showQuickCopyActions: false,
      width: "default",
+      clickItemsToAutofillVaultView: false,
    });
  });

@@ -151,5 +167,29 @@ describe("AppearanceV2Component", () => {

      expect(setEnableRoutingAnimation).toHaveBeenCalledWith(false);
    });
+
+    it("updates the compact mode setting", () => {
+      component.appearanceForm.controls.enableCompactMode.setValue(true);
+
+      expect(setEnableCompactMode).toHaveBeenCalledWith(true);
+    });
+
+    it("updates the quick copy actions setting", () => {
+      component.appearanceForm.controls.showQuickCopyActions.setValue(true);
+
+      expect(setShowQuickCopyActions).toHaveBeenCalledWith(true);
+    });
+
+    it("updates the width setting", () => {
+      component.appearanceForm.controls.width.setValue("wide");
+
+      expect(mockWidthService.setWidth).toHaveBeenCalledWith("wide");
+    });
+
+    it("updates the click items to autofill vault view setting", () => {
+      component.appearanceForm.controls.clickItemsToAutofillVaultView.setValue(true);
+
+      expect(setClickItemsToAutofillVaultView).toHaveBeenCalledWith(true);
+    });
  });
 });
--- a/apps/browser/src/vault/popup/settings/appearance-v2.component.ts
+++ b/apps/browser/src/vault/popup/settings/appearance-v2.component.ts
@@ -14,6 +14,7 @@ import { I18nService } from "@bitwarden/common/platform/abstractions/i18n.servic
 import { MessagingService } from "@bitwarden/common/platform/abstractions/messaging.service";
 import { ThemeType } from "@bitwarden/common/platform/enums";
 import { ThemeStateService } from "@bitwarden/common/platform/theming/theme-state.service";
+import { VaultSettingsService } from "@bitwarden/common/vault/abstractions/vault-settings/vault-settings.service";
 import {
  BadgeModule,
  CardComponent,
@@ -64,6 +65,7 @@ export class AppearanceV2Component implements OnInit {
    enableCompactMode: false,
    showQuickCopyActions: false,
    width: "default" as PopupWidthOption,
+    clickItemsToAutofillVaultView: false,
  });

  /** To avoid flashes of inaccurate values, only show the form after the entire form is populated. */
@@ -88,6 +90,7 @@ export class AppearanceV2Component implements OnInit {
    private destroyRef: DestroyRef,
    private animationControlService: AnimationControlService,
    i18nService: I18nService,
+    private vaultSettingsService: VaultSettingsService,
  ) {
    this.themeOptions = [
      { name: i18nService.t("systemDefault"), value: ThemeType.System },
@@ -108,6 +111,9 @@ export class AppearanceV2Component implements OnInit {
      this.copyButtonsService.showQuickCopyActions$,
    );
    const width = await firstValueFrom(this.popupSizeService.width$);
+    const clickItemsToAutofillVaultView = await firstValueFrom(
+      this.vaultSettingsService.clickItemsToAutofillVaultView$,
+    );

    // Set initial values for the form
    this.appearanceForm.setValue({
@@ -118,6 +124,7 @@ export class AppearanceV2Component implements OnInit {
      enableCompactMode,
      showQuickCopyActions,
      width,
+      clickItemsToAutofillVaultView,
    });

    this.formLoading = false;
@@ -163,6 +170,16 @@ export class AppearanceV2Component implements OnInit {
      .subscribe((width) => {
        void this.updateWidth(width);
      });
+
+    this.appearanceForm.controls.clickItemsToAutofillVaultView.valueChanges
+      .pipe(takeUntilDestroyed(this.destroyRef))
+      .subscribe((clickItemsToAutofillVaultView) => {
+        void this.updateClickItemsToAutofillVaultView(clickItemsToAutofillVaultView);
+      });
+  }
+
+  async updateClickItemsToAutofillVaultView(clickItemsToAutofillVaultView: boolean) {
+    await this.vaultSettingsService.setClickItemsToAutofillVaultView(clickItemsToAutofillVaultView);
  }

  async updateFavicon(enableFavicon: boolean) {