Vault - Prefer signal & change detection (#16947)

2025-12-20 10:13:31 +00:00 · 2025-10-27 16:13:11 +01:00
parent fd45689745
commit af6e19335d
134 changed files with 918 additions and 13 deletions
--- a/apps/browser/src/vault/popup/components/at-risk-callout/at-risk-password-callout.component.ts
+++ b/apps/browser/src/vault/popup/components/at-risk-callout/at-risk-password-callout.component.ts
@@ -10,6 +10,8 @@ import { AnchorLinkDirective, CalloutModule, BannerModule } from "@bitwarden/com
 import { I18nPipe } from "@bitwarden/ui-common";
 import { AtRiskPasswordCalloutData, AtRiskPasswordCalloutService } from "@bitwarden/vault";

+// FIXME(https://bitwarden.atlassian.net/browse/CL-764): Migrate to OnPush
+// eslint-disable-next-line @angular-eslint/prefer-on-push-component-change-detection
@Component({
  selector: "vault-at-risk-password-callout",
  imports: [
--- a/apps/browser/src/vault/popup/components/at-risk-carousel-dialog/at-risk-carousel-dialog.component.ts
+++ b/apps/browser/src/vault/popup/components/at-risk-carousel-dialog/at-risk-carousel-dialog.component.ts
@@ -17,6 +17,8 @@ export const AtRiskCarouselDialogResult = {

 type AtRiskCarouselDialogResult = UnionOfValues<typeof AtRiskCarouselDialogResult>;

+// FIXME(https://bitwarden.atlassian.net/browse/CL-764): Migrate to OnPush
+// eslint-disable-next-line @angular-eslint/prefer-on-push-component-change-detection
@Component({
  selector: "vault-at-risk-carousel-dialog",
  templateUrl: "./at-risk-carousel-dialog.component.html",
@@ -32,6 +34,8 @@ type AtRiskCarouselDialogResult = UnionOfValues<typeof AtRiskCarouselDialogResul
 export class AtRiskCarouselDialogComponent {
  private dialogRef = inject(DialogRef);

+  // FIXME(https://bitwarden.atlassian.net/browse/CL-903): Migrate to Signals
+  // eslint-disable-next-line @angular-eslint/prefer-signals
  protected dismissBtnEnabled = signal(false);

  protected async dismiss() {
--- a/apps/browser/src/vault/popup/components/at-risk-passwords/at-risk-passwords.component.spec.ts
+++ b/apps/browser/src/vault/popup/components/at-risk-passwords/at-risk-passwords.component.spec.ts
@@ -37,28 +37,42 @@ import { AtRiskCarouselDialogResult } from "../at-risk-carousel-dialog/at-risk-c
 import { AtRiskPasswordPageService } from "./at-risk-password-page.service";
 import { AtRiskPasswordsComponent } from "./at-risk-passwords.component";

+// FIXME(https://bitwarden.atlassian.net/browse/CL-764): Migrate to OnPush
+// eslint-disable-next-line @angular-eslint/prefer-on-push-component-change-detection
@Component({
  selector: "popup-header",
  template: `<ng-content></ng-content>`,
 })
 class MockPopupHeaderComponent {
+  // FIXME(https://bitwarden.atlassian.net/browse/CL-903): Migrate to Signals
+  // eslint-disable-next-line @angular-eslint/prefer-signals
  @Input() pageTitle: string | undefined;
+  // FIXME(https://bitwarden.atlassian.net/browse/CL-903): Migrate to Signals
+  // eslint-disable-next-line @angular-eslint/prefer-signals
  @Input() backAction: (() => void) | undefined;
 }

+// FIXME(https://bitwarden.atlassian.net/browse/CL-764): Migrate to OnPush
+// eslint-disable-next-line @angular-eslint/prefer-on-push-component-change-detection
@Component({
  selector: "popup-page",
  template: `<ng-content></ng-content>`,
 })
 class MockPopupPageComponent {
+  // FIXME(https://bitwarden.atlassian.net/browse/CL-903): Migrate to Signals
+  // eslint-disable-next-line @angular-eslint/prefer-signals
  @Input() loading: boolean | undefined;
 }

+// FIXME(https://bitwarden.atlassian.net/browse/CL-764): Migrate to OnPush
+// eslint-disable-next-line @angular-eslint/prefer-on-push-component-change-detection
@Component({
  selector: "app-vault-icon",
  template: `<ng-content></ng-content>`,
 })
 class MockAppIcon {
+  // FIXME(https://bitwarden.atlassian.net/browse/CL-903): Migrate to Signals
+  // eslint-disable-next-line @angular-eslint/prefer-signals
  @Input() cipher: CipherView | undefined;
 }

--- a/apps/browser/src/vault/popup/components/at-risk-passwords/at-risk-passwords.component.ts
+++ b/apps/browser/src/vault/popup/components/at-risk-passwords/at-risk-passwords.component.ts
@@ -58,6 +58,8 @@ import {

 import { AtRiskPasswordPageService } from "./at-risk-password-page.service";

+// FIXME(https://bitwarden.atlassian.net/browse/CL-764): Migrate to OnPush
+// eslint-disable-next-line @angular-eslint/prefer-on-push-component-change-detection
@Component({
  imports: [
    PopupPageComponent,
--- a/apps/browser/src/vault/popup/components/vault-v2/add-edit/add-edit-v2.component.ts
+++ b/apps/browser/src/vault/popup/components/vault-v2/add-edit/add-edit-v2.component.ts
@@ -131,6 +131,8 @@ class QueryParams {

 export type AddEditQueryParams = Partial<Record<keyof QueryParams, string>>;

+// FIXME(https://bitwarden.atlassian.net/browse/CL-764): Migrate to OnPush
+// eslint-disable-next-line @angular-eslint/prefer-on-push-component-change-detection
@Component({
  selector: "app-add-edit-v2",
  templateUrl: "add-edit-v2.component.html",
--- a/apps/browser/src/vault/popup/components/vault-v2/assign-collections/assign-collections.component.ts
+++ b/apps/browser/src/vault/popup/components/vault-v2/assign-collections/assign-collections.component.ts
@@ -28,6 +28,8 @@ import { PopupFooterComponent } from "../../../../../platform/popup/layout/popup
 import { PopupHeaderComponent } from "../../../../../platform/popup/layout/popup-header.component";
 import { PopupPageComponent } from "../../../../../platform/popup/layout/popup-page.component";

+// FIXME(https://bitwarden.atlassian.net/browse/CL-764): Migrate to OnPush
+// eslint-disable-next-line @angular-eslint/prefer-on-push-component-change-detection
@Component({
  selector: "app-assign-collections",
  templateUrl: "./assign-collections.component.html",
--- a/apps/browser/src/vault/popup/components/vault-v2/attachments/attachments-v2.component.spec.ts
+++ b/apps/browser/src/vault/popup/components/vault-v2/attachments/attachments-v2.component.spec.ts
@@ -25,20 +25,30 @@ import { PopupRouterCacheService } from "../../../../../platform/popup/view-cach

 import { AttachmentsV2Component } from "./attachments-v2.component";

+// FIXME(https://bitwarden.atlassian.net/browse/CL-764): Migrate to OnPush
+// eslint-disable-next-line @angular-eslint/prefer-on-push-component-change-detection
@Component({
  selector: "popup-header",
  template: `<ng-content></ng-content>`,
 })
 class MockPopupHeaderComponent {
+  // FIXME(https://bitwarden.atlassian.net/browse/CL-903): Migrate to Signals
+  // eslint-disable-next-line @angular-eslint/prefer-signals
  @Input() pageTitle: string;
+  // FIXME(https://bitwarden.atlassian.net/browse/CL-903): Migrate to Signals
+  // eslint-disable-next-line @angular-eslint/prefer-signals
  @Input() backAction: () => void;
 }

+// FIXME(https://bitwarden.atlassian.net/browse/CL-764): Migrate to OnPush
+// eslint-disable-next-line @angular-eslint/prefer-on-push-component-change-detection
@Component({
  selector: "popup-footer",
  template: `<ng-content></ng-content>`,
 })
 class MockPopupFooterComponent {
+  // FIXME(https://bitwarden.atlassian.net/browse/CL-903): Migrate to Signals
+  // eslint-disable-next-line @angular-eslint/prefer-signals
  @Input() pageTitle: string;
 }

--- a/apps/browser/src/vault/popup/components/vault-v2/attachments/attachments-v2.component.ts
+++ b/apps/browser/src/vault/popup/components/vault-v2/attachments/attachments-v2.component.ts
@@ -17,6 +17,8 @@ import { PopupHeaderComponent } from "../../../../../platform/popup/layout/popup
 import { PopupPageComponent } from "../../../../../platform/popup/layout/popup-page.component";
 import { PopupRouterCacheService } from "../../../../../platform/popup/view-cache/popup-router-cache.service";

+// FIXME(https://bitwarden.atlassian.net/browse/CL-764): Migrate to OnPush
+// eslint-disable-next-line @angular-eslint/prefer-on-push-component-change-detection
@Component({
  selector: "app-attachments-v2",
  templateUrl: "./attachments-v2.component.html",
--- a/apps/browser/src/vault/popup/components/vault-v2/attachments/open-attachments/open-attachments.component.ts
+++ b/apps/browser/src/vault/popup/components/vault-v2/attachments/open-attachments/open-attachments.component.ts
@@ -25,6 +25,8 @@ import { CipherFormContainer } from "@bitwarden/vault";
 import BrowserPopupUtils from "../../../../../../platform/browser/browser-popup-utils";
 import { FilePopoutUtilsService } from "../../../../../../tools/popup/services/file-popout-utils.service";

+// FIXME(https://bitwarden.atlassian.net/browse/CL-764): Migrate to OnPush
+// eslint-disable-next-line @angular-eslint/prefer-on-push-component-change-detection
@Component({
  selector: "app-open-attachments",
  templateUrl: "./open-attachments.component.html",
@@ -39,6 +41,8 @@ import { FilePopoutUtilsService } from "../../../../../../tools/popup/services/f
 })
 export class OpenAttachmentsComponent implements OnInit {
  /** Cipher `id` */
+  // FIXME(https://bitwarden.atlassian.net/browse/CL-903): Migrate to Signals
+  // eslint-disable-next-line @angular-eslint/prefer-signals
  @Input({ required: true }) cipherId: CipherId;

  /** True when the attachments window should be opened in a popout */
--- a/apps/browser/src/vault/popup/components/vault-v2/autofill-vault-list-items/autofill-vault-list-items.component.ts
+++ b/apps/browser/src/vault/popup/components/vault-v2/autofill-vault-list-items/autofill-vault-list-items.component.ts
@@ -15,6 +15,8 @@ import { VaultPopupItemsService } from "../../../services/vault-popup-items.serv
 import { PopupCipherViewLike } from "../../../views/popup-cipher.view";
 import { VaultListItemsContainerComponent } from "../vault-list-items-container/vault-list-items-container.component";

+// FIXME(https://bitwarden.atlassian.net/browse/CL-764): Migrate to OnPush
+// eslint-disable-next-line @angular-eslint/prefer-on-push-component-change-detection
@Component({
  imports: [
    CommonModule,
@@ -46,7 +48,7 @@ export class AutofillVaultListItemsComponent {
      startWith(true), // Start with true to avoid flashing the fill button on first load
    );

-  protected groupByType = toSignal(
+  protected readonly groupByType = toSignal(
    this.vaultPopupItemsService.hasFilterApplied$.pipe(map((hasFilter) => !hasFilter)),
  );

--- a/apps/browser/src/vault/popup/components/vault-v2/blocked-injection-banner/blocked-injection-banner.component.ts
+++ b/apps/browser/src/vault/popup/components/vault-v2/blocked-injection-banner/blocked-injection-banner.component.ts
@@ -15,6 +15,8 @@ import { VaultPopupAutofillService } from "../../../services/vault-popup-autofil

 const blockedURISettingsRoute = "/blocked-domains";

+// FIXME(https://bitwarden.atlassian.net/browse/CL-764): Migrate to OnPush
+// eslint-disable-next-line @angular-eslint/prefer-on-push-component-change-detection
@Component({
  imports: [
    BannerModule,
--- a/apps/browser/src/vault/popup/components/vault-v2/intro-carousel/intro-carousel.component.ts
+++ b/apps/browser/src/vault/popup/components/vault-v2/intro-carousel/intro-carousel.component.ts
@@ -9,6 +9,8 @@ import { VaultCarouselModule } from "@bitwarden/vault";

 import { IntroCarouselService } from "../../../services/intro-carousel.service";

+// FIXME(https://bitwarden.atlassian.net/browse/CL-764): Migrate to OnPush
+// eslint-disable-next-line @angular-eslint/prefer-on-push-component-change-detection
@Component({
  selector: "app-intro-carousel",
  templateUrl: "./intro-carousel.component.html",
--- a/apps/browser/src/vault/popup/components/vault-v2/item-copy-action/item-copy-actions.component.ts
+++ b/apps/browser/src/vault/popup/components/vault-v2/item-copy-action/item-copy-actions.component.ts
@@ -21,6 +21,8 @@ type CipherItem = {
  field: CopyAction;
 };

+// FIXME(https://bitwarden.atlassian.net/browse/CL-764): Migrate to OnPush
+// eslint-disable-next-line @angular-eslint/prefer-on-push-component-change-detection
@Component({
  selector: "app-item-copy-actions",
  templateUrl: "item-copy-actions.component.html",
@@ -35,6 +37,8 @@ type CipherItem = {
 })
 export class ItemCopyActionsComponent {
  protected showQuickCopyActions$ = inject(VaultPopupCopyButtonsService).showQuickCopyActions$;
+  // FIXME(https://bitwarden.atlassian.net/browse/CL-903): Migrate to Signals
+  // eslint-disable-next-line @angular-eslint/prefer-signals
  @Input({ required: true }) cipher!: CipherViewLike;

  protected CipherViewLikeUtils = CipherViewLikeUtils;
--- a/apps/browser/src/vault/popup/components/vault-v2/item-more-options/item-more-options.component.ts
+++ b/apps/browser/src/vault/popup/components/vault-v2/item-more-options/item-more-options.component.ts
@@ -34,6 +34,8 @@ import { PasswordRepromptService } from "@bitwarden/vault";
 import { VaultPopupAutofillService } from "../../../services/vault-popup-autofill.service";
 import { AddEditQueryParams } from "../add-edit/add-edit-v2.component";

+// FIXME(https://bitwarden.atlassian.net/browse/CL-764): Migrate to OnPush
+// eslint-disable-next-line @angular-eslint/prefer-on-push-component-change-detection
@Component({
  selector: "app-item-more-options",
  templateUrl: "./item-more-options.component.html",
@@ -42,6 +44,8 @@ import { AddEditQueryParams } from "../add-edit/add-edit-v2.component";
 export class ItemMoreOptionsComponent {
  private _cipher$ = new BehaviorSubject<CipherViewLike>(undefined);

+  // FIXME(https://bitwarden.atlassian.net/browse/CL-903): Migrate to Signals
+  // eslint-disable-next-line @angular-eslint/prefer-signals
  @Input({
    required: true,
  })
@@ -57,6 +61,8 @@ export class ItemMoreOptionsComponent {
   * Flag to show view item menu option. Used when something else is
   * assigned as the primary action for the item, such as autofill.
   */
+  // FIXME(https://bitwarden.atlassian.net/browse/CL-903): Migrate to Signals
+  // eslint-disable-next-line @angular-eslint/prefer-signals
  @Input({ transform: booleanAttribute })
  showViewOption: boolean;

@@ -64,6 +70,8 @@ export class ItemMoreOptionsComponent {
   * Flag to hide the autofill menu options. Used for items that are
   * already in the autofill list suggestion.
   */
+  // FIXME(https://bitwarden.atlassian.net/browse/CL-903): Migrate to Signals
+  // eslint-disable-next-line @angular-eslint/prefer-signals
  @Input({ transform: booleanAttribute })
  hideAutofillOptions: boolean;

--- a/apps/browser/src/vault/popup/components/vault-v2/new-item-dropdown/new-item-dropdown-v2.component.ts
+++ b/apps/browser/src/vault/popup/components/vault-v2/new-item-dropdown/new-item-dropdown-v2.component.ts
@@ -23,6 +23,8 @@ export interface NewItemInitialValues {
  collectionId?: CollectionId;
 }

+// FIXME(https://bitwarden.atlassian.net/browse/CL-764): Migrate to OnPush
+// eslint-disable-next-line @angular-eslint/prefer-on-push-component-change-detection
@Component({
  selector: "app-new-item-dropdown",
  templateUrl: "new-item-dropdown-v2.component.html",
@@ -34,6 +36,8 @@ export class NewItemDropdownV2Component implements OnInit {
  /**
   * Optional initial values to pass to the add cipher form
   */
+  // FIXME(https://bitwarden.atlassian.net/browse/CL-903): Migrate to Signals
+  // eslint-disable-next-line @angular-eslint/prefer-signals
  @Input()
  initialValues: NewItemInitialValues;

--- a/apps/browser/src/vault/popup/components/vault-v2/vault-generator-dialog/vault-generator-dialog.component.spec.ts
+++ b/apps/browser/src/vault/popup/components/vault-v2/vault-generator-dialog/vault-generator-dialog.component.spec.ts
@@ -18,14 +18,24 @@ import {
  VaultGeneratorDialogComponent,
 } from "./vault-generator-dialog.component";

+// FIXME(https://bitwarden.atlassian.net/browse/CL-764): Migrate to OnPush
+// eslint-disable-next-line @angular-eslint/prefer-on-push-component-change-detection
@Component({
  selector: "vault-cipher-form-generator",
  template: "",
 })
 class MockCipherFormGenerator {
+  // FIXME(https://bitwarden.atlassian.net/browse/CL-903): Migrate to Signals
+  // eslint-disable-next-line @angular-eslint/prefer-signals
  @Input() type: "password" | "username" = "password";
+  // FIXME(https://bitwarden.atlassian.net/browse/CL-903): Migrate to Signals
+  // eslint-disable-next-line @angular-eslint/prefer-output-emitter-ref
  @Output() algorithmSelected: EventEmitter<AlgorithmInfo> = new EventEmitter();
+  // FIXME(https://bitwarden.atlassian.net/browse/CL-903): Migrate to Signals
+  // eslint-disable-next-line @angular-eslint/prefer-signals
  @Input() uri: string = "";
+  // FIXME(https://bitwarden.atlassian.net/browse/CL-903): Migrate to Signals
+  // eslint-disable-next-line @angular-eslint/prefer-output-emitter-ref
  @Output() valueGenerated = new EventEmitter<string>();
 }

--- a/apps/browser/src/vault/popup/components/vault-v2/vault-generator-dialog/vault-generator-dialog.component.ts
+++ b/apps/browser/src/vault/popup/components/vault-v2/vault-generator-dialog/vault-generator-dialog.component.ts
@@ -38,6 +38,8 @@ export const GeneratorDialogAction = {

 type GeneratorDialogAction = UnionOfValues<typeof GeneratorDialogAction>;

+// FIXME(https://bitwarden.atlassian.net/browse/CL-764): Migrate to OnPush
+// eslint-disable-next-line @angular-eslint/prefer-on-push-component-change-detection
@Component({
  selector: "app-vault-generator-dialog",
  templateUrl: "./vault-generator-dialog.component.html",
--- a/apps/browser/src/vault/popup/components/vault-v2/vault-header/vault-header-v2.component.ts
+++ b/apps/browser/src/vault/popup/components/vault-v2/vault-header/vault-header-v2.component.ts
@@ -17,6 +17,8 @@ import { VaultPopupListFiltersService } from "../../../../../vault/popup/service
 import { VaultListFiltersComponent } from "../vault-list-filters/vault-list-filters.component";
 import { VaultV2SearchComponent } from "../vault-search/vault-v2-search.component";

+// FIXME(https://bitwarden.atlassian.net/browse/CL-764): Migrate to OnPush
+// eslint-disable-next-line @angular-eslint/prefer-on-push-component-change-detection
@Component({
  selector: "app-vault-header-v2",
  templateUrl: "vault-header-v2.component.html",
@@ -31,6 +33,8 @@ import { VaultV2SearchComponent } from "../vault-search/vault-v2-search.componen
  ],
 })
 export class VaultHeaderV2Component {
+  // FIXME(https://bitwarden.atlassian.net/browse/CL-903): Migrate to Signals
+  // eslint-disable-next-line @angular-eslint/prefer-signals
  @ViewChild(DisclosureComponent) disclosure: DisclosureComponent;

  /** Emits the visibility status of the disclosure component. */
--- a/apps/browser/src/vault/popup/components/vault-v2/vault-list-filters/vault-list-filters.component.ts
+++ b/apps/browser/src/vault/popup/components/vault-v2/vault-list-filters/vault-list-filters.component.ts
@@ -8,6 +8,8 @@ import { ChipSelectComponent } from "@bitwarden/components";

 import { VaultPopupListFiltersService } from "../../../services/vault-popup-list-filters.service";

+// FIXME(https://bitwarden.atlassian.net/browse/CL-764): Migrate to OnPush
+// eslint-disable-next-line @angular-eslint/prefer-on-push-component-change-detection
@Component({
  selector: "app-vault-list-filters",
  templateUrl: "./vault-list-filters.component.html",
--- a/apps/browser/src/vault/popup/components/vault-v2/vault-list-items-container/vault-list-items-container.component.ts
+++ b/apps/browser/src/vault/popup/components/vault-v2/vault-list-items-container/vault-list-items-container.component.ts
@@ -90,12 +90,18 @@ export class VaultListItemsContainerComponent implements AfterViewInit {
  private vaultPopupSectionService = inject(VaultPopupSectionService);
  protected CipherViewLikeUtils = CipherViewLikeUtils;

+  // FIXME(https://bitwarden.atlassian.net/browse/CL-903): Migrate to Signals
+  // eslint-disable-next-line @angular-eslint/prefer-signals
  @ViewChild(CdkVirtualScrollViewport, { static: false }) viewPort!: CdkVirtualScrollViewport;
+  // FIXME(https://bitwarden.atlassian.net/browse/CL-903): Migrate to Signals
+  // eslint-disable-next-line @angular-eslint/prefer-signals
  @ViewChild(DisclosureComponent) disclosure!: DisclosureComponent;

  /**
   * Indicates whether the section should be open or closed if collapsibleKey is provided
   */
+  // FIXME(https://bitwarden.atlassian.net/browse/CL-903): Migrate to Signals
+  // eslint-disable-next-line @angular-eslint/prefer-signals
  protected sectionOpenState: Signal<boolean> = computed(() => {
    if (!this.collapsibleKey()) {
      return true;
@@ -130,17 +136,23 @@ export class VaultListItemsContainerComponent implements AfterViewInit {
   */
  private viewCipherTimeout?: number;

+  // FIXME(https://bitwarden.atlassian.net/browse/CL-903): Migrate to Signals
+  // eslint-disable-next-line @angular-eslint/prefer-signals
  ciphers = input<PopupCipherViewLike[]>([]);

  /**
   * If true, we will group ciphers by type (Login, Card, Identity)
   * within subheadings in a single container, converted to a WritableSignal.
   */
+  // FIXME(https://bitwarden.atlassian.net/browse/CL-903): Migrate to Signals
+  // eslint-disable-next-line @angular-eslint/prefer-signals
  groupByType = input<boolean | undefined>(false);

  /**
   * Computed signal for a grouped list of ciphers with an optional header
   */
+  // FIXME(https://bitwarden.atlassian.net/browse/CL-903): Migrate to Signals
+  // eslint-disable-next-line @angular-eslint/prefer-signals
  cipherGroups = computed<
    {
      subHeaderKey?: string;
@@ -183,6 +195,8 @@ export class VaultListItemsContainerComponent implements AfterViewInit {
  /**
   * Title for the vault list item section.
   */
+  // FIXME(https://bitwarden.atlassian.net/browse/CL-903): Migrate to Signals
+  // eslint-disable-next-line @angular-eslint/prefer-signals
  title = input<string | undefined>(undefined);

  /**
@@ -191,33 +205,45 @@ export class VaultListItemsContainerComponent implements AfterViewInit {
   * The key must be added to the state definition in `vault-popup-section.service.ts` since the
   * collapsed state is stored locally.
   */
+  // FIXME(https://bitwarden.atlassian.net/browse/CL-903): Migrate to Signals
+  // eslint-disable-next-line @angular-eslint/prefer-signals
  collapsibleKey = input<keyof PopupSectionOpen | undefined>(undefined);

  /**
   * Optional description for the vault list item section. Will be shown below the title even when
   * no ciphers are available.
   */
+  // FIXME(https://bitwarden.atlassian.net/browse/CL-903): Migrate to Signals
+  // eslint-disable-next-line @angular-eslint/prefer-signals
  description = input<string | undefined>(undefined);

  /**
   * Option to show a refresh button in the section header.
   */
+  // FIXME(https://bitwarden.atlassian.net/browse/CL-903): Migrate to Signals
+  // eslint-disable-next-line @angular-eslint/prefer-signals
  showRefresh = input(false, { transform: booleanAttribute });

  /**
   * Event emitted when the refresh button is clicked.
   */
+  // FIXME(https://bitwarden.atlassian.net/browse/CL-903): Migrate to Signals
+  // eslint-disable-next-line @angular-eslint/prefer-output-emitter-ref
  @Output()
  onRefresh = new EventEmitter<void>();

  /**
   * Flag indicating that the current tab location is blocked
   */
+  // FIXME(https://bitwarden.atlassian.net/browse/CL-903): Migrate to Signals
+  // eslint-disable-next-line @angular-eslint/prefer-signals
  currentURIIsBlocked = toSignal(this.vaultPopupAutofillService.currentTabIsOnBlocklist$);

  /**
   * Resolved i18n key to use for suggested cipher items
   */
+  // FIXME(https://bitwarden.atlassian.net/browse/CL-903): Migrate to Signals
+  // eslint-disable-next-line @angular-eslint/prefer-signals
  cipherItemTitleKey = computed(() => {
    return (cipher: CipherViewLike) => {
      const login = CipherViewLikeUtils.getLogin(cipher);
@@ -233,11 +259,15 @@ export class VaultListItemsContainerComponent implements AfterViewInit {
  /**
   * Option to show the autofill button for each item.
   */
+  // FIXME(https://bitwarden.atlassian.net/browse/CL-903): Migrate to Signals
+  // eslint-disable-next-line @angular-eslint/prefer-signals
  showAutofillButton = input(false, { transform: booleanAttribute });

  /**
   * Flag indicating whether the suggested cipher item autofill button should be shown or not
   */
+  // FIXME(https://bitwarden.atlassian.net/browse/CL-903): Migrate to Signals
+  // eslint-disable-next-line @angular-eslint/prefer-signals
  hideAutofillButton = computed(
    () => !this.showAutofillButton() || this.currentURIIsBlocked() || this.primaryActionAutofill(),
  );
@@ -245,22 +275,30 @@ export class VaultListItemsContainerComponent implements AfterViewInit {
  /**
   * Flag indicating whether the cipher item autofill menu options should be shown or not
   */
+  // FIXME(https://bitwarden.atlassian.net/browse/CL-903): Migrate to Signals
+  // eslint-disable-next-line @angular-eslint/prefer-signals
  hideAutofillMenuOptions = computed(() => this.currentURIIsBlocked() || this.showAutofillButton());

  /**
   * Option to perform autofill operation as the primary action for autofill suggestions.
   */
+  // FIXME(https://bitwarden.atlassian.net/browse/CL-903): Migrate to Signals
+  // eslint-disable-next-line @angular-eslint/prefer-signals
  primaryActionAutofill = input(false, { transform: booleanAttribute });

  /**
   * Remove the bottom margin from the bit-section in this component
   * (used for containers at the end of the page where bottom margin is not needed)
   */
+  // FIXME(https://bitwarden.atlassian.net/browse/CL-903): Migrate to Signals
+  // eslint-disable-next-line @angular-eslint/prefer-signals
  disableSectionMargin = input(false, { transform: booleanAttribute });

  /**
   * Remove the description margin
   */
+  // FIXME(https://bitwarden.atlassian.net/browse/CL-903): Migrate to Signals
+  // eslint-disable-next-line @angular-eslint/prefer-signals
  disableDescriptionMargin = input(false, { transform: booleanAttribute });

  /**
@@ -275,6 +313,8 @@ export class VaultListItemsContainerComponent implements AfterViewInit {
    return collections[0]?.name;
  }

+  // FIXME(https://bitwarden.atlassian.net/browse/CL-903): Migrate to Signals
+  // eslint-disable-next-line @angular-eslint/prefer-signals
  protected autofillShortcutTooltip = signal<string | undefined>(undefined);

  constructor(
--- a/apps/browser/src/vault/popup/components/vault-v2/vault-password-history-v2/vault-password-history-v2.component.ts
+++ b/apps/browser/src/vault/popup/components/vault-v2/vault-password-history-v2/vault-password-history-v2.component.ts
@@ -18,6 +18,8 @@ import { PopupHeaderComponent } from "../../../../../platform/popup/layout/popup
 import { PopupPageComponent } from "../../../../../platform/popup/layout/popup-page.component";
 import { PopupRouterCacheService } from "../../../../../platform/popup/view-cache/popup-router-cache.service";

+// FIXME(https://bitwarden.atlassian.net/browse/CL-764): Migrate to OnPush
+// eslint-disable-next-line @angular-eslint/prefer-on-push-component-change-detection
@Component({
  selector: "vault-password-history-v2",
  templateUrl: "vault-password-history-v2.component.html",
--- a/apps/browser/src/vault/popup/components/vault-v2/vault-search/vault-v2-search.component.ts
+++ b/apps/browser/src/vault/popup/components/vault-v2/vault-search/vault-v2-search.component.ts
@@ -10,6 +10,8 @@ import { SearchModule } from "@bitwarden/components";

 import { VaultPopupItemsService } from "../../../services/vault-popup-items.service";

+// FIXME(https://bitwarden.atlassian.net/browse/CL-764): Migrate to OnPush
+// eslint-disable-next-line @angular-eslint/prefer-on-push-component-change-detection
@Component({
  imports: [CommonModule, SearchModule, JslibModule, FormsModule],
  selector: "app-vault-v2-search",
--- a/apps/browser/src/vault/popup/components/vault-v2/vault-v2.component.ts
+++ b/apps/browser/src/vault/popup/components/vault-v2/vault-v2.component.ts
@@ -64,6 +64,8 @@ const VaultState = {

 type VaultState = UnionOfValues<typeof VaultState>;

+// FIXME(https://bitwarden.atlassian.net/browse/CL-764): Migrate to OnPush
+// eslint-disable-next-line @angular-eslint/prefer-on-push-component-change-detection
@Component({
  selector: "app-vault",
  templateUrl: "vault-v2.component.html",
@@ -89,6 +91,8 @@ type VaultState = UnionOfValues<typeof VaultState>;
  ],
 })
 export class VaultV2Component implements OnInit, AfterViewInit, OnDestroy {
+  // FIXME(https://bitwarden.atlassian.net/browse/CL-903): Migrate to Signals
+  // eslint-disable-next-line @angular-eslint/prefer-signals
  @ViewChild(CdkVirtualScrollableElement) virtualScrollElement?: CdkVirtualScrollableElement;

  NudgeType = NudgeType;
--- a/apps/browser/src/vault/popup/components/vault-v2/view-v2/view-v2.component.ts
+++ b/apps/browser/src/vault/popup/components/vault-v2/view-v2/view-v2.component.ts
@@ -76,6 +76,8 @@ type LoadAction =
  | typeof COPY_VERIFICATION_CODE_ID
  | typeof UPDATE_PASSWORD;

+// FIXME(https://bitwarden.atlassian.net/browse/CL-764): Migrate to OnPush
+// eslint-disable-next-line @angular-eslint/prefer-on-push-component-change-detection
@Component({
  selector: "app-view-v2",
  templateUrl: "view-v2.component.html",
--- a/apps/browser/src/vault/popup/services/vault-popup-section.service.ts
+++ b/apps/browser/src/vault/popup/services/vault-popup-section.service.ts
@@ -31,7 +31,7 @@ export class VaultPopupSectionService {
  private vaultPopupItemsService = inject(VaultPopupItemsService);
  private stateProvider = inject(StateProvider);

-  private hasFilterOrSearchApplied = toSignal(
+  private readonly hasFilterOrSearchApplied = toSignal(
    this.vaultPopupItemsService.hasFilterApplied$.pipe(map((hasFilter) => hasFilter)),
  );

@@ -40,7 +40,7 @@ export class VaultPopupSectionService {
   * application-applied overrides.
   * `null` means there is no current override
   */
-  private temporaryStateOverride = signal<Partial<PopupSectionOpen> | null>(null);
+  private readonly temporaryStateOverride = signal<Partial<PopupSectionOpen> | null>(null);

  constructor() {
    effect(
@@ -71,7 +71,7 @@ export class VaultPopupSectionService {
   * Stored disk state for the open/close state of the sections, with an initial value provided
   * if the stored disk state does not yet exist.
   */
-  private sectionOpenStoredState = toSignal<PopupSectionOpen | null>(
+  private readonly sectionOpenStoredState = toSignal<PopupSectionOpen | null>(
    this.sectionOpenStateProvider.state$.pipe(map((sectionOpen) => sectionOpen ?? INITIAL_OPEN)),
    // Indicates that the state value is loading
    { initialValue: null },
@@ -81,7 +81,7 @@ export class VaultPopupSectionService {
   * Indicates the current open/close display state of each section, accounting for temporary
   * non-persisted overrides.
   */
-  sectionOpenDisplayState: Signal<Partial<PopupSectionOpen>> = computed(() => ({
+  readonly sectionOpenDisplayState: Signal<Partial<PopupSectionOpen>> = computed(() => ({
    ...this.sectionOpenStoredState(),
    ...this.temporaryStateOverride(),
  }));
--- a/apps/browser/src/vault/popup/settings/appearance-v2.component.spec.ts
+++ b/apps/browser/src/vault/popup/settings/appearance-v2.component.spec.ts
@@ -22,20 +22,30 @@ import { VaultPopupCopyButtonsService } from "../services/vault-popup-copy-butto

 import { AppearanceV2Component } from "./appearance-v2.component";

+// FIXME(https://bitwarden.atlassian.net/browse/CL-764): Migrate to OnPush
+// eslint-disable-next-line @angular-eslint/prefer-on-push-component-change-detection
@Component({
  selector: "popup-header",
  template: `<ng-content></ng-content>`,
 })
 class MockPopupHeaderComponent {
+  // FIXME(https://bitwarden.atlassian.net/browse/CL-903): Migrate to Signals
+  // eslint-disable-next-line @angular-eslint/prefer-signals
  @Input() pageTitle: string;
+  // FIXME(https://bitwarden.atlassian.net/browse/CL-903): Migrate to Signals
+  // eslint-disable-next-line @angular-eslint/prefer-signals
  @Input() backAction: () => void;
 }

+// FIXME(https://bitwarden.atlassian.net/browse/CL-764): Migrate to OnPush
+// eslint-disable-next-line @angular-eslint/prefer-on-push-component-change-detection
@Component({
  selector: "popup-page",
  template: `<ng-content></ng-content>`,
 })
 class MockPopupPageComponent {
+  // FIXME(https://bitwarden.atlassian.net/browse/CL-903): Migrate to Signals
+  // eslint-disable-next-line @angular-eslint/prefer-signals
  @Input() loading: boolean;
 }

--- a/apps/browser/src/vault/popup/settings/appearance-v2.component.ts
+++ b/apps/browser/src/vault/popup/settings/appearance-v2.component.ts
@@ -33,6 +33,8 @@ import { PopupPageComponent } from "../../../platform/popup/layout/popup-page.co
 import { PopupSizeService } from "../../../platform/popup/layout/popup-size.service";
 import { VaultPopupCopyButtonsService } from "../services/vault-popup-copy-buttons.service";

+// FIXME(https://bitwarden.atlassian.net/browse/CL-764): Migrate to OnPush
+// eslint-disable-next-line @angular-eslint/prefer-on-push-component-change-detection
@Component({
  templateUrl: "./appearance-v2.component.html",
  imports: [
--- a/apps/browser/src/vault/popup/settings/archive.component.ts
+++ b/apps/browser/src/vault/popup/settings/archive.component.ts
@@ -33,6 +33,8 @@ import { PopOutComponent } from "../../../platform/popup/components/pop-out.comp
 import { PopupHeaderComponent } from "../../../platform/popup/layout/popup-header.component";
 import { PopupPageComponent } from "../../../platform/popup/layout/popup-page.component";

+// FIXME(https://bitwarden.atlassian.net/browse/CL-764): Migrate to OnPush
+// eslint-disable-next-line @angular-eslint/prefer-on-push-component-change-detection
@Component({
  templateUrl: "archive.component.html",
  standalone: true,
--- a/apps/browser/src/vault/popup/settings/download-bitwarden.component.ts
+++ b/apps/browser/src/vault/popup/settings/download-bitwarden.component.ts
@@ -13,6 +13,8 @@ import { PopOutComponent } from "../../../platform/popup/components/pop-out.comp
 import { PopupHeaderComponent } from "../../../platform/popup/layout/popup-header.component";
 import { PopupPageComponent } from "../../../platform/popup/layout/popup-page.component";

+// FIXME(https://bitwarden.atlassian.net/browse/CL-764): Migrate to OnPush
+// eslint-disable-next-line @angular-eslint/prefer-on-push-component-change-detection
@Component({
  templateUrl: "download-bitwarden.component.html",
  imports: [
--- a/apps/browser/src/vault/popup/settings/folders-v2.component.spec.ts
+++ b/apps/browser/src/vault/popup/settings/folders-v2.component.spec.ts
@@ -21,20 +21,30 @@ import { PopupHeaderComponent } from "../../../platform/popup/layout/popup-heade

 import { FoldersV2Component } from "./folders-v2.component";

+// FIXME(https://bitwarden.atlassian.net/browse/CL-764): Migrate to OnPush
+// eslint-disable-next-line @angular-eslint/prefer-on-push-component-change-detection
@Component({
  selector: "popup-header",
  template: `<ng-content></ng-content>`,
 })
 class MockPopupHeaderComponent {
+  // FIXME(https://bitwarden.atlassian.net/browse/CL-903): Migrate to Signals
+  // eslint-disable-next-line @angular-eslint/prefer-signals
  @Input() pageTitle: string = "";
+  // FIXME(https://bitwarden.atlassian.net/browse/CL-903): Migrate to Signals
+  // eslint-disable-next-line @angular-eslint/prefer-signals
  @Input() backAction: () => void = () => {};
 }

+// FIXME(https://bitwarden.atlassian.net/browse/CL-764): Migrate to OnPush
+// eslint-disable-next-line @angular-eslint/prefer-on-push-component-change-detection
@Component({
  selector: "popup-footer",
  template: `<ng-content></ng-content>`,
 })
 class MockPopupFooterComponent {
+  // FIXME(https://bitwarden.atlassian.net/browse/CL-903): Migrate to Signals
+  // eslint-disable-next-line @angular-eslint/prefer-signals
  @Input() pageTitle: string = "";
 }

--- a/apps/browser/src/vault/popup/settings/folders-v2.component.ts
+++ b/apps/browser/src/vault/popup/settings/folders-v2.component.ts
@@ -22,6 +22,8 @@ import { PopOutComponent } from "../../../platform/popup/components/pop-out.comp
 import { PopupHeaderComponent } from "../../../platform/popup/layout/popup-header.component";
 import { PopupPageComponent } from "../../../platform/popup/layout/popup-page.component";

+// FIXME(https://bitwarden.atlassian.net/browse/CL-764): Migrate to OnPush
+// eslint-disable-next-line @angular-eslint/prefer-on-push-component-change-detection
@Component({
  templateUrl: "./folders-v2.component.html",
  imports: [
--- a/apps/browser/src/vault/popup/settings/more-from-bitwarden-page-v2.component.ts
+++ b/apps/browser/src/vault/popup/settings/more-from-bitwarden-page-v2.component.ts
@@ -17,6 +17,8 @@ import { PopOutComponent } from "../../../platform/popup/components/pop-out.comp
 import { PopupHeaderComponent } from "../../../platform/popup/layout/popup-header.component";
 import { PopupPageComponent } from "../../../platform/popup/layout/popup-page.component";

+// FIXME(https://bitwarden.atlassian.net/browse/CL-764): Migrate to OnPush
+// eslint-disable-next-line @angular-eslint/prefer-on-push-component-change-detection
@Component({
  templateUrl: "more-from-bitwarden-page-v2.component.html",
  imports: [
--- a/apps/browser/src/vault/popup/settings/trash-list-items-container/trash-list-items-container.component.ts
+++ b/apps/browser/src/vault/popup/settings/trash-list-items-container/trash-list-items-container.component.ts
@@ -53,9 +53,13 @@ export class TrashListItemsContainerComponent {
  /**
   * The list of trashed items to display.
   */
+  // FIXME(https://bitwarden.atlassian.net/browse/CL-903): Migrate to Signals
+  // eslint-disable-next-line @angular-eslint/prefer-signals
  @Input()
  ciphers: PopupCipherViewLike[] = [];

+  // FIXME(https://bitwarden.atlassian.net/browse/CL-903): Migrate to Signals
+  // eslint-disable-next-line @angular-eslint/prefer-signals
  @Input()
  headerText: string;

--- a/apps/browser/src/vault/popup/settings/vault-settings-v2.component.ts
+++ b/apps/browser/src/vault/popup/settings/vault-settings-v2.component.ts
@@ -19,6 +19,8 @@ import { PopOutComponent } from "../../../platform/popup/components/pop-out.comp
 import { PopupHeaderComponent } from "../../../platform/popup/layout/popup-header.component";
 import { PopupPageComponent } from "../../../platform/popup/layout/popup-page.component";

+// FIXME(https://bitwarden.atlassian.net/browse/CL-764): Migrate to OnPush
+// eslint-disable-next-line @angular-eslint/prefer-on-push-component-change-detection
@Component({
  templateUrl: "vault-settings-v2.component.html",
  imports: [
@@ -37,12 +39,12 @@ export class VaultSettingsV2Component implements OnInit, OnDestroy {
  private userId$ = this.accountService.activeAccount$.pipe(getUserId);

  // Check if user is premium user, they will be able to archive items
-  protected userCanArchive = toSignal(
+  protected readonly userCanArchive = toSignal(
    this.userId$.pipe(switchMap((userId) => this.cipherArchiveService.userCanArchive$(userId))),
  );

  // Check if user has archived items (does not check if user is premium)
-  protected showArchiveFilter = toSignal(
+  protected readonly showArchiveFilter = toSignal(
    this.userId$.pipe(switchMap((userId) => this.cipherArchiveService.showArchiveVault$(userId))),
  );