UIF - Prefer signal & change detection (#16940)

apps/web/src/app/layouts/frontend-layout.component.ts

@@ -7,6 +7,8 @@ import { PlatformUtilsService } from "@bitwarden/common/platform/abstractions/pl
 import { EnvironmentSelectorComponent } from "../components/environment-selector/environment-selector.component";
 import { SharedModule } from "../shared";
 
+// 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-frontend-layout",
   templateUrl: "frontend-layout.component.html",

apps/web/src/app/layouts/header/web-header.component.ts

@@ -14,6 +14,8 @@ import { MessagingService } from "@bitwarden/common/platform/abstractions/messag
 import { PlatformUtilsService } from "@bitwarden/common/platform/abstractions/platform-utils.service";
 import { UserId } from "@bitwarden/common/types/guid";
 
+// 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-header",
   templateUrl: "./web-header.component.html",
@@ -23,11 +25,15 @@ export class WebHeaderComponent {
   /**
    * Custom title that overrides the route data `titleId`
    */
+  // FIXME(https://bitwarden.atlassian.net/browse/CL-903): Migrate to Signals
+  // eslint-disable-next-line @angular-eslint/prefer-signals
   @Input() title: string;
 
   /**
    * Icon to show before the title
    */
+  // FIXME(https://bitwarden.atlassian.net/browse/CL-903): Migrate to Signals
+  // eslint-disable-next-line @angular-eslint/prefer-signals
   @Input() icon: string;
 
   protected routeData$: Observable<{ titleId: string }>;

apps/web/src/app/layouts/header/web-header.stories.ts

@@ -46,6 +46,8 @@ class MockStateService {
   accounts$ = new BehaviorSubject({ "1": { profile: { name: "Foo" } } }).asObservable();
 }
 
+// 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: "product-switcher",
   template: `<button type="button" bitIconButton="bwi-filter" label="Switch products"></button>`,
@@ -53,6 +55,8 @@ class MockStateService {
 })
 class MockProductSwitcher {}
 
+// 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: "dynamic-avatar",
   template: `<bit-avatar [text]="name$ | async"></bit-avatar>`,
@@ -68,6 +72,8 @@ class MockDynamicAvatar implements Partial<DynamicAvatarComponent> {
     ),
   );
 
+  // FIXME(https://bitwarden.atlassian.net/browse/CL-903): Migrate to Signals
+  // eslint-disable-next-line @angular-eslint/prefer-signals
   @Input()
   text?: string;
 

apps/web/src/app/layouts/org-switcher/org-switcher.component.ts

@@ -14,6 +14,8 @@ import { DialogService, NavigationModule } from "@bitwarden/components";
 import { OrganizationWarningsModule } from "@bitwarden/web-vault/app/billing/organizations/warnings/organization-warnings.module";
 import { OrganizationWarningsService } from "@bitwarden/web-vault/app/billing/organizations/warnings/services";
 
+// 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: "org-switcher",
   templateUrl: "org-switcher.component.html",
@@ -43,20 +45,28 @@ export class OrgSwitcherComponent {
    * const smFilter = (org: Organization) => org.canAccessSecretsManager
    * // <org-switcher [filter]="smFilter">
    */
+  // FIXME(https://bitwarden.atlassian.net/browse/CL-903): Migrate to Signals
+  // eslint-disable-next-line @angular-eslint/prefer-signals
   @Input()
   filter: (org: Organization) => boolean = () => true;
 
   /**
    * Is `true` if the expanded content is visible
    */
+  // FIXME(https://bitwarden.atlassian.net/browse/CL-903): Migrate to Signals
+  // eslint-disable-next-line @angular-eslint/prefer-signals
   @Input()
   open = false;
+  // FIXME(https://bitwarden.atlassian.net/browse/CL-903): Migrate to Signals
+  // eslint-disable-next-line @angular-eslint/prefer-output-emitter-ref
   @Output()
   openChange = new EventEmitter<boolean>();
 
   /**
    * Visibility of the New Organization button
    */
+  // FIXME(https://bitwarden.atlassian.net/browse/CL-903): Migrate to Signals
+  // eslint-disable-next-line @angular-eslint/prefer-signals
   @Input()
   hideNewButton = false;
 

apps/web/src/app/layouts/product-switcher/navigation-switcher/navigation-switcher.component.spec.ts

@@ -16,6 +16,8 @@ import { ProductSwitcherItem, ProductSwitcherService } from "../shared/product-s
 
 import { NavigationProductSwitcherComponent } from "./navigation-switcher.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-upgrade-nav-button",
   template: "<div>Upgrade Nav Button</div>",

apps/web/src/app/layouts/product-switcher/navigation-switcher/navigation-switcher.component.ts

@@ -3,6 +3,8 @@ import { map, Observable } from "rxjs";
 
 import { ProductSwitcherItem, ProductSwitcherService } from "../shared/product-switcher.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: "navigation-product-switcher",
   templateUrl: "./navigation-switcher.component.html",

apps/web/src/app/layouts/product-switcher/navigation-switcher/navigation-switcher.stories.ts

@@ -37,6 +37,8 @@ class MockOrganizationService implements Partial<OrganizationService> {
     return MockOrganizationService._orgs.asObservable();
   }
 
+  // FIXME(https://bitwarden.atlassian.net/browse/CL-903): Migrate to Signals
+  // eslint-disable-next-line @angular-eslint/prefer-signals
   @Input()
   set mockOrgs(orgs: Organization[]) {
     MockOrganizationService._orgs.next(orgs);
@@ -54,6 +56,8 @@ class MockProviderService implements Partial<ProviderService> {
     return MockProviderService._providers.asObservable();
   }
 
+  // FIXME(https://bitwarden.atlassian.net/browse/CL-903): Migrate to Signals
+  // eslint-disable-next-line @angular-eslint/prefer-signals
   @Input()
   set mockProviders(providers: Provider[]) {
     MockProviderService._providers.next(providers);
@@ -93,6 +97,8 @@ class MockConfigService implements Partial<ConfigService> {
   }
 }
 
+// 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: "story-layout",
   template: `<ng-content></ng-content>`,
@@ -100,6 +106,8 @@ class MockConfigService implements Partial<ConfigService> {
 })
 class StoryLayoutComponent {}
 
+// 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: "story-content",
   template: ``,

apps/web/src/app/layouts/product-switcher/product-switcher-content.component.ts

@@ -6,12 +6,16 @@ import { MenuComponent } from "@bitwarden/components";
 
 import { ProductSwitcherService } from "./shared/product-switcher.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: "product-switcher-content",
   templateUrl: "./product-switcher-content.component.html",
   standalone: false,
 })
 export class ProductSwitcherContentComponent {
+  // FIXME(https://bitwarden.atlassian.net/browse/CL-903): Migrate to Signals
+  // eslint-disable-next-line @angular-eslint/prefer-signals
   @ViewChild("menu")
   menu: MenuComponent;
 

apps/web/src/app/layouts/product-switcher/product-switcher.component.ts

@@ -5,6 +5,8 @@ import { AfterViewInit, ChangeDetectorRef, Component, Input } from "@angular/cor
 import { IconButtonType } from "@bitwarden/components/src/icon-button/icon-button.component";
 
 import { ProductSwitcherService } from "./shared/product-switcher.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: "product-switcher",
   templateUrl: "./product-switcher.component.html",
@@ -14,6 +16,8 @@ export class ProductSwitcherComponent implements AfterViewInit {
   /**
    * Passed to the product switcher's `bitIconButton`
    */
+  // FIXME(https://bitwarden.atlassian.net/browse/CL-903): Migrate to Signals
+  // eslint-disable-next-line @angular-eslint/prefer-signals
   @Input()
   buttonType: IconButtonType = "main";
 

apps/web/src/app/layouts/product-switcher/product-switcher.stories.ts

@@ -37,6 +37,8 @@ class MockOrganizationService implements Partial<OrganizationService> {
     return MockOrganizationService._orgs.asObservable();
   }
 
+  // FIXME(https://bitwarden.atlassian.net/browse/CL-903): Migrate to Signals
+  // eslint-disable-next-line @angular-eslint/prefer-signals
   @Input()
   set mockOrgs(orgs: Organization[]) {
     MockOrganizationService._orgs.next(orgs);
@@ -54,6 +56,8 @@ class MockProviderService implements Partial<ProviderService> {
     return MockProviderService._providers.asObservable();
   }
 
+  // FIXME(https://bitwarden.atlassian.net/browse/CL-903): Migrate to Signals
+  // eslint-disable-next-line @angular-eslint/prefer-signals
   @Input()
   set mockProviders(providers: Provider[]) {
     MockProviderService._providers.next(providers);
@@ -93,6 +97,8 @@ class MockConfigService implements Partial<ConfigService> {
   }
 }
 
+// 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: "story-layout",
   template: `<ng-content></ng-content>`,
@@ -100,6 +106,8 @@ class MockConfigService implements Partial<ConfigService> {
 })
 class StoryLayoutComponent {}
 
+// 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: "story-content",
   template: ``,

apps/web/src/app/layouts/toggle-width.component.ts

@@ -4,6 +4,8 @@ import { Component } from "@angular/core";
 import { PlatformUtilsService } from "@bitwarden/common/platform/abstractions/platform-utils.service";
 import { NavigationModule } from "@bitwarden/components";
 
+// 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-toggle-width",
   template: `<bit-nav-item

apps/web/src/app/layouts/user-layout.component.ts

@@ -16,6 +16,8 @@ import { BillingFreeFamiliesNavItemComponent } from "../billing/shared/billing-f
 
 import { WebLayoutModule } from "./web-layout.module";
 
+// 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-user-layout",
   templateUrl: "user-layout.component.html",

apps/web/src/app/layouts/web-layout.component.ts

@@ -5,6 +5,8 @@ import { LayoutComponent } from "@bitwarden/components";
 
 import { ProductSwitcherModule } from "./product-switcher/product-switcher.module";
 
+// 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-layout",
   templateUrl: "web-layout.component.html",

apps/web/src/app/layouts/web-side-nav.component.ts

@@ -6,11 +6,15 @@ import { SideNavVariant, NavigationModule } from "@bitwarden/components";
 import { ProductSwitcherModule } from "./product-switcher/product-switcher.module";
 import { ToggleWidthComponent } from "./toggle-width.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-side-nav",
   templateUrl: "web-side-nav.component.html",
   imports: [CommonModule, NavigationModule, ProductSwitcherModule, ToggleWidthComponent],
 })
 export class WebSideNavComponent {
+  // FIXME(https://bitwarden.atlassian.net/browse/CL-903): Migrate to Signals
+  // eslint-disable-next-line @angular-eslint/prefer-signals
   @Input() variant: SideNavVariant = "primary";
 }