bitwarden/browser
1
0
Fork 0
mirror of https://github.com/bitwarden/browser synced 2025-12-21 10:43:35 +00:00
Code Issues Releases Wiki Activity

UIF - Prefer signal & change detection (#16940)

Browse Source
This commit is contained in:
Oscar Hinton
2025-10-21 18:52:40 +02:00
committed by GitHub
parent d3fc20f8b9
commit 65da23feaa
135 changed files with 503 additions and 51 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
apps/browser/src/platform/popup/layout/popup-footer.component.ts
View File

@@ -1,5 +1,7 @@
import { Component } from "@angular/core";
// 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",
templateUrl: "popup-footer.component.html",

12
apps/browser/src/platform/popup/layout/popup-header.component.ts
View File

@@ -16,6 +16,8 @@ import { PopupRouterCacheService } from "../view-cache/popup-router-cache.servic
import { PopupPageComponent } from "./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: "popup-header",
templateUrl: "popup-header.component.html",
@@ -23,13 +25,19 @@ import { PopupPageComponent } from "./popup-page.component";
})
export class PopupHeaderComponent {
private popupRouterCacheService = inject(PopupRouterCacheService);
// FIXME(https://bitwarden.atlassian.net/browse/CL-903): Migrate to Signals
// eslint-disable-next-line @angular-eslint/prefer-signals
protected pageContentScrolled: Signal<boolean> = inject(PopupPageComponent).isScrolled;
/** Background color */
// FIXME(https://bitwarden.atlassian.net/browse/CL-903): Migrate to Signals
// eslint-disable-next-line @angular-eslint/prefer-signals
@Input()
background: "default" | "alt" = "default";
/** Display the back button, which uses Location.back() to go back one page in history */
// FIXME(https://bitwarden.atlassian.net/browse/CL-903): Migrate to Signals
// eslint-disable-next-line @angular-eslint/prefer-signals
@Input()
get showBackButton() {
return this._showBackButton;
@@ -41,6 +49,8 @@ export class PopupHeaderComponent {
private _showBackButton = false;
/** Title string that will be inserted as an h1 */
// FIXME(https://bitwarden.atlassian.net/browse/CL-903): Migrate to Signals
// eslint-disable-next-line @angular-eslint/prefer-signals
@Input({ required: true }) pageTitle: string;
/**
@@ -48,6 +58,8 @@ export class PopupHeaderComponent {
*
* If unset, will call `location.back()`
**/
// FIXME(https://bitwarden.atlassian.net/browse/CL-903): Migrate to Signals
// eslint-disable-next-line @angular-eslint/prefer-signals
@Input()
backAction: FunctionReturningAwaitable = async () => {
return this.popupRouterCacheService.back();

28
apps/browser/src/platform/popup/layout/popup-layout.stories.ts
View File

@@ -41,6 +41,8 @@ import { PopupHeaderComponent } from "./popup-header.component";
import { PopupPageComponent } from "./popup-page.component";
import { PopupTabNavigationComponent } from "./popup-tab-navigation.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: "extension-container",
template: `
@@ -51,6 +53,8 @@ import { PopupTabNavigationComponent } from "./popup-tab-navigation.component";
})
class ExtensionContainerComponent {}
// 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: "extension-popped-container",
template: `
@@ -62,6 +66,8 @@ class ExtensionContainerComponent {}
})
class ExtensionPoppedContainerComponent {}
// 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-placeholder",
template: /*html*/ `
@@ -95,6 +101,8 @@ class VaultComponent {
protected data = Array.from(Array(20).keys());
}
// 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: "mock-add-button",
template: `
@@ -107,6 +115,8 @@ class VaultComponent {
})
class MockAddButtonComponent {}
// 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: "mock-popout-button",
template: `
@@ -116,6 +126,8 @@ class MockAddButtonComponent {}
})
class MockPopoutButtonComponent {}
// 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: "mock-current-account",
template: `
@@ -127,6 +139,8 @@ class MockPopoutButtonComponent {}
})
class MockCurrentAccountComponent {}
// 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: "mock-search",
template: ` <bit-search placeholder="Search"> </bit-search> `,
@@ -134,6 +148,8 @@ class MockCurrentAccountComponent {}
})
class MockSearchComponent {}
// 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: "mock-banner",
template: `
@@ -145,6 +161,8 @@ class MockSearchComponent {}
})
class MockBannerComponent {}
// 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: "mock-vault-page",
template: `
@@ -172,6 +190,8 @@ class MockBannerComponent {}
})
class MockVaultPageComponent {}
// 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: "mock-vault-page-popped",
template: `
@@ -195,6 +215,8 @@ class MockVaultPageComponent {}
})
class MockVaultPagePoppedComponent {}
// 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: "mock-generator-page",
template: `
@@ -219,6 +241,8 @@ class MockVaultPagePoppedComponent {}
})
class MockGeneratorPageComponent {}
// 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: "mock-send-page",
template: `
@@ -243,6 +267,8 @@ class MockGeneratorPageComponent {}
})
class MockSendPageComponent {}
// 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: "mock-settings-page",
template: `
@@ -267,6 +293,8 @@ class MockSendPageComponent {}
})
class MockSettingsPageComponent {}
// 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: "mock-vault-subpage",
template: `

10
apps/browser/src/platform/popup/layout/popup-page.component.ts
View File

@@ -4,6 +4,8 @@ import { booleanAttribute, Component, inject, Input, signal } from "@angular/cor
import { I18nService } from "@bitwarden/common/platform/abstractions/i18n.service";
import { ScrollLayoutHostDirective } 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: "popup-page",
templateUrl: "popup-page.component.html",
@@ -15,15 +17,23 @@ import { ScrollLayoutHostDirective } from "@bitwarden/components";
export class PopupPageComponent {
protected i18nService = inject(I18nService);
// FIXME(https://bitwarden.atlassian.net/browse/CL-903): Migrate to Signals
// eslint-disable-next-line @angular-eslint/prefer-signals
@Input() loading = false;
// FIXME(https://bitwarden.atlassian.net/browse/CL-903): Migrate to Signals
// eslint-disable-next-line @angular-eslint/prefer-signals
@Input({ transform: booleanAttribute })
disablePadding = false;
// FIXME(https://bitwarden.atlassian.net/browse/CL-903): Migrate to Signals
// eslint-disable-next-line @angular-eslint/prefer-signals
protected scrolled = signal(false);
isScrolled = this.scrolled.asReadonly();
/** Accessible loading label for the spinner. Defaults to "loading" */
// FIXME(https://bitwarden.atlassian.net/browse/CL-903): Migrate to Signals
// eslint-disable-next-line @angular-eslint/prefer-signals
@Input() loadingText?: string = this.i18nService.t("loading");
handleScroll(event: Event) {

4
apps/browser/src/platform/popup/layout/popup-tab-navigation.component.ts
View File

@@ -15,6 +15,8 @@ export type NavButton = {
showBerry?: boolean;
};
// 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-tab-navigation",
templateUrl: "popup-tab-navigation.component.html",
@@ -24,6 +26,8 @@ export type NavButton = {
},
})
export class PopupTabNavigationComponent {
// FIXME(https://bitwarden.atlassian.net/browse/CL-903): Migrate to Signals
// eslint-disable-next-line @angular-eslint/prefer-signals
@Input() navButtons: NavButton[] = [];
constructor(private i18nService: I18nService) {}

2
apps/browser/src/popup/components/extension-anon-layout-wrapper/extension-anon-layout-wrapper.component.ts
View File

@@ -29,6 +29,8 @@ export interface ExtensionAnonLayoutWrapperData extends AnonLayoutWrapperData {
hideFooter?: boolean;
}
// 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: "extension-anon-layout-wrapper.component.html",
imports: [

8
apps/browser/src/popup/components/extension-anon-layout-wrapper/extension-anon-layout-wrapper.stories.ts
View File

@@ -164,6 +164,8 @@ type Story = StoryObj<ExtensionAnonLayoutWrapperComponent>;
// Default Example
// 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: "bit-default-primary-outlet-example-component",
template: "<p>Primary Outlet Example: <br> your primary component goes here</p>",
@@ -171,6 +173,8 @@ type Story = StoryObj<ExtensionAnonLayoutWrapperComponent>;
})
class DefaultPrimaryOutletExampleComponent {}
// 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: "bit-default-secondary-outlet-example-component",
template: "<p>Secondary Outlet Example: <br> your secondary component goes here</p>",
@@ -178,6 +182,8 @@ class DefaultPrimaryOutletExampleComponent {}
})
class DefaultSecondaryOutletExampleComponent {}
// 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: "bit-default-env-selector-outlet-example-component",
template: "<p>Env Selector Outlet Example: <br> your env selector component goes here</p>",
@@ -261,6 +267,8 @@ const changedData: ExtensionAnonLayoutWrapperData = {
showLogo: false,
};
// 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: "bit-dynamic-content-example-component",
template: `