From d71add85e81c51bc52c5f13e46416a45625b9319 Mon Sep 17 00:00:00 2001
From: Nick Krantz <125900171+nick-livefront@users.noreply.github.com>
Date: Wed, 12 Nov 2025 08:31:25 -0600
Subject: [PATCH 01/14] [PM-25084] Vault Skeleton loading (#17321)
* add import to overflow styles to override the overflow applied by virtual scrolling
* add position relative so absolute children display in scrolling context rather over the entire page
* add fade in skeleton to vault page
* refactor vault loading state to shared service
* disable search while loading
* add live announcement when vault is loading / loaded
* simplify announcement
* resolve CI issues
* add feature flag for skeletons
* add feature flag observables for loading state
* update component naming
---
apps/browser/src/_locales/en/messages.json | 6 ++
.../popup/layout/popup-page.component.html | 4 +-
.../vault-fade-in-out-skeleton.component.html | 6 ++
.../vault-fade-in-out-skeleton.component.ts | 20 ++++++
.../vault-header-v2.component.spec.ts | 5 ++
.../vault-v2-search.component.html | 1 +
.../vault-search/vault-v2-search.component.ts | 3 +
.../vault-v2/vault-v2.component.html | 8 ++-
.../components/vault-v2/vault-v2.component.ts | 46 ++++++++----
.../vault-popup-loading.service.spec.ts | 72 +++++++++++++++++++
.../services/vault-popup-loading.service.ts | 27 +++++++
11 files changed, 183 insertions(+), 15 deletions(-)
create mode 100644 apps/browser/src/vault/popup/components/vault-fade-in-out-skeleton/vault-fade-in-out-skeleton.component.html
create mode 100644 apps/browser/src/vault/popup/components/vault-fade-in-out-skeleton/vault-fade-in-out-skeleton.component.ts
create mode 100644 apps/browser/src/vault/popup/services/vault-popup-loading.service.spec.ts
create mode 100644 apps/browser/src/vault/popup/services/vault-popup-loading.service.ts
diff --git a/apps/browser/src/_locales/en/messages.json b/apps/browser/src/_locales/en/messages.json
index 4ea69404024..0ff2db480c1 100644
--- a/apps/browser/src/_locales/en/messages.json
+++ b/apps/browser/src/_locales/en/messages.json
@@ -5806,6 +5806,12 @@
"upgradeToPremium": {
"message": "Upgrade to Premium"
},
+ "loadingVault": {
+ "message": "Loading vault"
+ },
+ "vaultLoaded": {
+ "message": "Vault loaded"
+ },
"settingDisabledByPolicy": {
"message": "This setting is disabled by your organization's policy.",
"description": "This hint text is displayed when a user setting is disabled due to an organization policy."
diff --git a/apps/browser/src/platform/popup/layout/popup-page.component.html b/apps/browser/src/platform/popup/layout/popup-page.component.html
index a9184a9dd54..828d9947373 100644
--- a/apps/browser/src/platform/popup/layout/popup-page.component.html
+++ b/apps/browser/src/platform/popup/layout/popup-page.component.html
@@ -27,10 +27,10 @@
data-testid="popup-layout-scroll-region"
(scroll)="handleScroll($event)"
[ngClass]="{
- 'tw-overflow-hidden': hideOverflow(),
+ '!tw-overflow-hidden': hideOverflow(),
'tw-overflow-y-auto': !hideOverflow(),
'tw-invisible': loading(),
- 'tw-py-3 bit-compact:tw-py-2 tw-px-[max(0.75rem,calc((100%-(var(--tw-sm-breakpoint)))/2))] bit-compact:tw-px-[max(0.5rem,calc((100%-(var(--tw-sm-breakpoint)))/2))]':
+ 'tw-relative tw-py-3 bit-compact:tw-py-2 tw-px-[max(0.75rem,calc((100%-(var(--tw-sm-breakpoint)))/2))] bit-compact:tw-px-[max(0.5rem,calc((100%-(var(--tw-sm-breakpoint)))/2))]':
!disablePadding(),
}"
bitScrollLayoutHost
diff --git a/apps/browser/src/vault/popup/components/vault-fade-in-out-skeleton/vault-fade-in-out-skeleton.component.html b/apps/browser/src/vault/popup/components/vault-fade-in-out-skeleton/vault-fade-in-out-skeleton.component.html
new file mode 100644
index 00000000000..c83c1ab85c4
--- /dev/null
+++ b/apps/browser/src/vault/popup/components/vault-fade-in-out-skeleton/vault-fade-in-out-skeleton.component.html
@@ -0,0 +1,6 @@
+
+
+
+
diff --git a/apps/browser/src/vault/popup/components/vault-fade-in-out-skeleton/vault-fade-in-out-skeleton.component.ts b/apps/browser/src/vault/popup/components/vault-fade-in-out-skeleton/vault-fade-in-out-skeleton.component.ts
new file mode 100644
index 00000000000..2426153ad68
--- /dev/null
+++ b/apps/browser/src/vault/popup/components/vault-fade-in-out-skeleton/vault-fade-in-out-skeleton.component.ts
@@ -0,0 +1,20 @@
+import { animate, style, transition, trigger } from "@angular/animations";
+import { ChangeDetectionStrategy, Component, HostBinding } from "@angular/core";
+
+@Component({
+ selector: "vault-fade-in-out-skeleton",
+ templateUrl: "./vault-fade-in-out-skeleton.component.html",
+ animations: [
+ trigger("fadeInOut", [
+ transition(":enter", [
+ style({ opacity: 0 }),
+ animate("100ms ease-in", style({ opacity: 1 })),
+ ]),
+ transition(":leave", [animate("300ms ease-out", style({ opacity: 0 }))]),
+ ]),
+ ],
+ changeDetection: ChangeDetectionStrategy.OnPush,
+})
+export class VaultFadeInOutSkeletonComponent {
+ @HostBinding("@fadeInOut") fadeInOut = true;
+}
diff --git a/apps/browser/src/vault/popup/components/vault-v2/vault-header/vault-header-v2.component.spec.ts b/apps/browser/src/vault/popup/components/vault-v2/vault-header/vault-header-v2.component.spec.ts
index 9564aeadc09..e6afc69b56a 100644
--- a/apps/browser/src/vault/popup/components/vault-v2/vault-header/vault-header-v2.component.spec.ts
+++ b/apps/browser/src/vault/popup/components/vault-v2/vault-header/vault-header-v2.component.spec.ts
@@ -28,6 +28,7 @@ import {
PopupListFilter,
VaultPopupListFiltersService,
} from "../../../../../vault/popup/services/vault-popup-list-filters.service";
+import { VaultPopupLoadingService } from "../../../services/vault-popup-loading.service";
import { VaultHeaderV2Component } from "./vault-header-v2.component";
@@ -99,6 +100,10 @@ describe("VaultHeaderV2Component", () => {
provide: StateProvider,
useValue: { getGlobal: () => ({ state$, update }) },
},
+ {
+ provide: VaultPopupLoadingService,
+ useValue: { loading$: new BehaviorSubject(false) },
+ },
],
}).compileComponents();
diff --git a/apps/browser/src/vault/popup/components/vault-v2/vault-search/vault-v2-search.component.html b/apps/browser/src/vault/popup/components/vault-v2/vault-search/vault-v2-search.component.html
index 224eaccd93c..68e5baac5f3 100644
--- a/apps/browser/src/vault/popup/components/vault-v2/vault-search/vault-v2-search.component.html
+++ b/apps/browser/src/vault/popup/components/vault-v2/vault-search/vault-v2-search.component.html
@@ -4,5 +4,6 @@
[(ngModel)]="searchText"
(ngModelChange)="onSearchTextChanged()"
appAutofocus
+ [disabled]="loading$ | async"
>
diff --git 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
index c254c290915..afe71404717 100644
--- 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
@@ -9,6 +9,7 @@ import { SearchTextDebounceInterval } from "@bitwarden/common/vault/services/sea
import { SearchModule } from "@bitwarden/components";
import { VaultPopupItemsService } from "../../../services/vault-popup-items.service";
+import { VaultPopupLoadingService } from "../../../services/vault-popup-loading.service";
// FIXME(https://bitwarden.atlassian.net/browse/CL-764): Migrate to OnPush
// eslint-disable-next-line @angular-eslint/prefer-on-push-component-change-detection
@@ -22,8 +23,10 @@ export class VaultV2SearchComponent {
private searchText$ = new Subject();
+ protected loading$ = this.vaultPopupLoadingService.loading$;
constructor(
private vaultPopupItemsService: VaultPopupItemsService,
+ private vaultPopupLoadingService: VaultPopupLoadingService,
private ngZone: NgZone,
) {
this.subscribeToLatestSearchText();
diff --git a/apps/browser/src/vault/popup/components/vault-v2/vault-v2.component.html b/apps/browser/src/vault/popup/components/vault-v2/vault-v2.component.html
index 07d3f042e60..5bca9cddd4f 100644
--- a/apps/browser/src/vault/popup/components/vault-v2/vault-v2.component.html
+++ b/apps/browser/src/vault/popup/components/vault-v2/vault-v2.component.html
@@ -1,4 +1,4 @@
-
+
@@ -103,4 +103,10 @@
>
+
+ @if (showSkeletonsLoaders$ | async) {
+
+
+
+ }
diff --git 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
index 2dd6c1a0ce1..e55a702d350 100644
--- 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
@@ -1,3 +1,4 @@
+import { LiveAnnouncer } from "@angular/cdk/a11y";
import { CdkVirtualScrollableElement, ScrollingModule } from "@angular/cdk/scrolling";
import { CommonModule } from "@angular/common";
import { AfterViewInit, Component, DestroyRef, OnDestroy, OnInit, ViewChild } from "@angular/core";
@@ -5,14 +6,15 @@ import { takeUntilDestroyed } from "@angular/core/rxjs-interop";
import { Router, RouterModule } from "@angular/router";
import {
combineLatest,
+ distinctUntilChanged,
filter,
firstValueFrom,
map,
Observable,
shareReplay,
- startWith,
switchMap,
take,
+ tap,
} from "rxjs";
import { JslibModule } from "@bitwarden/angular/jslib.module";
@@ -22,6 +24,8 @@ import { DeactivatedOrg, NoResults, VaultOpen } from "@bitwarden/assets/svg";
import { AccountService } from "@bitwarden/common/auth/abstractions/account.service";
import { getUserId } from "@bitwarden/common/auth/services/account.service";
import { FeatureFlag } from "@bitwarden/common/enums/feature-flag.enum";
+import { ConfigService } from "@bitwarden/common/platform/abstractions/config/config.service";
+import { I18nService } from "@bitwarden/common/platform/abstractions/i18n.service";
import { CipherId, CollectionId, OrganizationId, UserId } from "@bitwarden/common/types/guid";
import { CipherService } from "@bitwarden/common/vault/abstractions/cipher.service";
import { CipherType } from "@bitwarden/common/vault/enums";
@@ -41,11 +45,13 @@ import { PopOutComponent } from "../../../../platform/popup/components/pop-out.c
import { PopupHeaderComponent } from "../../../../platform/popup/layout/popup-header.component";
import { PopupPageComponent } from "../../../../platform/popup/layout/popup-page.component";
import { IntroCarouselService } from "../../services/intro-carousel.service";
-import { VaultPopupCopyButtonsService } from "../../services/vault-popup-copy-buttons.service";
import { VaultPopupItemsService } from "../../services/vault-popup-items.service";
import { VaultPopupListFiltersService } from "../../services/vault-popup-list-filters.service";
+import { VaultPopupLoadingService } from "../../services/vault-popup-loading.service";
import { VaultPopupScrollPositionService } from "../../services/vault-popup-scroll-position.service";
import { AtRiskPasswordCalloutComponent } from "../at-risk-callout/at-risk-password-callout.component";
+import { VaultFadeInOutSkeletonComponent } from "../vault-fade-in-out-skeleton/vault-fade-in-out-skeleton.component";
+import { VaultLoadingSkeletonComponent } from "../vault-loading-skeleton/vault-loading-skeleton.component";
import { BlockedInjectionBanner } from "./blocked-injection-banner/blocked-injection-banner.component";
import {
@@ -88,6 +94,8 @@ type VaultState = UnionOfValues;
SpotlightComponent,
RouterModule,
TypographyModule,
+ VaultLoadingSkeletonComponent,
+ VaultFadeInOutSkeletonComponent,
],
})
export class VaultV2Component implements OnInit, AfterViewInit, OnDestroy {
@@ -108,19 +116,30 @@ export class VaultV2Component implements OnInit, AfterViewInit, OnDestroy {
);
activeUserId: UserId | null = null;
+
+ private loading$ = this.vaultPopupLoadingService.loading$.pipe(
+ distinctUntilChanged(),
+ tap((loading) => {
+ const key = loading ? "loadingVault" : "vaultLoaded";
+ void this.liveAnnouncer.announce(this.i18nService.translate(key), "polite");
+ }),
+ );
+ private skeletonFeatureFlag$ = this.configService.getFeatureFlag$(
+ FeatureFlag.VaultLoadingSkeletons,
+ );
+
protected favoriteCiphers$ = this.vaultPopupItemsService.favoriteCiphers$;
protected remainingCiphers$ = this.vaultPopupItemsService.remainingCiphers$;
protected allFilters$ = this.vaultPopupListFiltersService.allFilters$;
- protected loading$ = combineLatest([
- this.vaultPopupItemsService.loading$,
- this.allFilters$,
- // Added as a dependency to avoid flashing the copyActions on slower devices
- this.vaultCopyButtonsService.showQuickCopyActions$,
- ]).pipe(
- map(([itemsLoading, filters]) => itemsLoading || !filters),
- shareReplay({ bufferSize: 1, refCount: true }),
- startWith(true),
+ /** When true, show spinner loading state */
+ protected showSpinnerLoaders$ = combineLatest([this.loading$, this.skeletonFeatureFlag$]).pipe(
+ map(([loading, skeletonsEnabled]) => loading && !skeletonsEnabled),
+ );
+
+ /** When true, show skeleton loading state */
+ protected showSkeletonsLoaders$ = combineLatest([this.loading$, this.skeletonFeatureFlag$]).pipe(
+ map(([loading, skeletonsEnabled]) => loading && skeletonsEnabled),
);
protected newItemItemValues$: Observable =
@@ -150,14 +169,17 @@ export class VaultV2Component implements OnInit, AfterViewInit, OnDestroy {
private vaultPopupItemsService: VaultPopupItemsService,
private vaultPopupListFiltersService: VaultPopupListFiltersService,
private vaultScrollPositionService: VaultPopupScrollPositionService,
+ private vaultPopupLoadingService: VaultPopupLoadingService,
private accountService: AccountService,
private destroyRef: DestroyRef,
private cipherService: CipherService,
private dialogService: DialogService,
- private vaultCopyButtonsService: VaultPopupCopyButtonsService,
private introCarouselService: IntroCarouselService,
private nudgesService: NudgesService,
private router: Router,
+ private liveAnnouncer: LiveAnnouncer,
+ private i18nService: I18nService,
+ private configService: ConfigService,
) {
combineLatest([
this.vaultPopupItemsService.emptyVault$,
diff --git a/apps/browser/src/vault/popup/services/vault-popup-loading.service.spec.ts b/apps/browser/src/vault/popup/services/vault-popup-loading.service.spec.ts
new file mode 100644
index 00000000000..4b9c284b3b7
--- /dev/null
+++ b/apps/browser/src/vault/popup/services/vault-popup-loading.service.spec.ts
@@ -0,0 +1,72 @@
+import { TestBed } from "@angular/core/testing";
+import { firstValueFrom, skip, Subject } from "rxjs";
+
+import { VaultPopupCopyButtonsService } from "./vault-popup-copy-buttons.service";
+import { VaultPopupItemsService } from "./vault-popup-items.service";
+import { VaultPopupListFiltersService } from "./vault-popup-list-filters.service";
+import { VaultPopupLoadingService } from "./vault-popup-loading.service";
+
+describe("VaultPopupLoadingService", () => {
+ let service: VaultPopupLoadingService;
+ let itemsLoading$: Subject;
+ let allFilters$: Subject;
+ let showQuickCopyActions$: Subject;
+
+ beforeEach(() => {
+ itemsLoading$ = new Subject();
+ allFilters$ = new Subject();
+ showQuickCopyActions$ = new Subject();
+
+ TestBed.configureTestingModule({
+ providers: [
+ VaultPopupLoadingService,
+ { provide: VaultPopupItemsService, useValue: { loading$: itemsLoading$ } },
+ { provide: VaultPopupListFiltersService, useValue: { allFilters$: allFilters$ } },
+ {
+ provide: VaultPopupCopyButtonsService,
+ useValue: { showQuickCopyActions$: showQuickCopyActions$ },
+ },
+ ],
+ });
+
+ service = TestBed.inject(VaultPopupLoadingService);
+ });
+
+ it("emits true initially", async () => {
+ const loading = await firstValueFrom(service.loading$);
+
+ expect(loading).toBe(true);
+ });
+
+ it("emits false when items are loaded and filters are available", async () => {
+ const loadingPromise = firstValueFrom(service.loading$.pipe(skip(1)));
+
+ itemsLoading$.next(false);
+ allFilters$.next({});
+ showQuickCopyActions$.next(true);
+
+ expect(await loadingPromise).toBe(false);
+ });
+
+ it("emits true when filters are not available", async () => {
+ const loadingPromise = firstValueFrom(service.loading$.pipe(skip(2)));
+
+ itemsLoading$.next(false);
+ allFilters$.next({});
+ showQuickCopyActions$.next(true);
+ allFilters$.next(null);
+
+ expect(await loadingPromise).toBe(true);
+ });
+
+ it("emits true when items are loading", async () => {
+ const loadingPromise = firstValueFrom(service.loading$.pipe(skip(2)));
+
+ itemsLoading$.next(false);
+ allFilters$.next({});
+ showQuickCopyActions$.next(true);
+ itemsLoading$.next(true);
+
+ expect(await loadingPromise).toBe(true);
+ });
+});
diff --git a/apps/browser/src/vault/popup/services/vault-popup-loading.service.ts b/apps/browser/src/vault/popup/services/vault-popup-loading.service.ts
new file mode 100644
index 00000000000..f56f2b8d8ee
--- /dev/null
+++ b/apps/browser/src/vault/popup/services/vault-popup-loading.service.ts
@@ -0,0 +1,27 @@
+import { inject, Injectable } from "@angular/core";
+import { combineLatest, map, shareReplay, startWith } from "rxjs";
+
+import { VaultPopupCopyButtonsService } from "./vault-popup-copy-buttons.service";
+import { VaultPopupItemsService } from "./vault-popup-items.service";
+import { VaultPopupListFiltersService } from "./vault-popup-list-filters.service";
+
+@Injectable({
+ providedIn: "root",
+})
+export class VaultPopupLoadingService {
+ private vaultPopupItemsService = inject(VaultPopupItemsService);
+ private vaultPopupListFiltersService = inject(VaultPopupListFiltersService);
+ private vaultCopyButtonsService = inject(VaultPopupCopyButtonsService);
+
+ /** Loading state of the vault */
+ loading$ = combineLatest([
+ this.vaultPopupItemsService.loading$,
+ this.vaultPopupListFiltersService.allFilters$,
+ // Added as a dependency to avoid flashing the copyActions on slower devices
+ this.vaultCopyButtonsService.showQuickCopyActions$,
+ ]).pipe(
+ map(([itemsLoading, filters]) => itemsLoading || !filters),
+ shareReplay({ bufferSize: 1, refCount: true }),
+ startWith(true),
+ );
+}
From f2e485ec8eddeb971e4c6e917e54ba17e7cba057 Mon Sep 17 00:00:00 2001
From: Bernd Schoolmann
Date: Wed, 12 Nov 2025 16:00:46 +0100
Subject: [PATCH 02/14] [PM-27847] Enable biometric IPC on mac dmg (#16247)
* Enable biometric IPC on mac dmg
* Remove i18n string
---
.../src/app/accounts/settings.component.ts | 16 ----------------
apps/desktop/src/locales/en/messages.json | 3 ---
apps/desktop/src/utils.ts | 3 +--
3 files changed, 1 insertion(+), 21 deletions(-)
diff --git a/apps/desktop/src/app/accounts/settings.component.ts b/apps/desktop/src/app/accounts/settings.component.ts
index 3db6c08a6c8..ebab653fc85 100644
--- a/apps/desktop/src/app/accounts/settings.component.ts
+++ b/apps/desktop/src/app/accounts/settings.component.ts
@@ -837,22 +837,6 @@ export class SettingsComponent implements OnInit, OnDestroy {
ipc.platform.allowBrowserintegrationOverride || ipc.platform.isDev;
if (!skipSupportedPlatformCheck) {
- if (
- ipc.platform.deviceType === DeviceType.MacOsDesktop &&
- !this.platformUtilsService.isMacAppStore()
- ) {
- await this.dialogService.openSimpleDialog({
- title: { key: "browserIntegrationUnsupportedTitle" },
- content: { key: "browserIntegrationMasOnlyDesc" },
- acceptButtonText: { key: "ok" },
- cancelButtonText: null,
- type: "warning",
- });
-
- this.form.controls.enableBrowserIntegration.setValue(false);
- return;
- }
-
if (ipc.platform.isWindowsStore) {
await this.dialogService.openSimpleDialog({
title: { key: "browserIntegrationUnsupportedTitle" },
diff --git a/apps/desktop/src/locales/en/messages.json b/apps/desktop/src/locales/en/messages.json
index 981066d9612..6bef882d970 100644
--- a/apps/desktop/src/locales/en/messages.json
+++ b/apps/desktop/src/locales/en/messages.json
@@ -2150,9 +2150,6 @@
"browserIntegrationErrorDesc": {
"message": "An error has occurred while enabling browser integration."
},
- "browserIntegrationMasOnlyDesc": {
- "message": "Unfortunately browser integration is only supported in the Mac App Store version for now."
- },
"browserIntegrationWindowsStoreDesc": {
"message": "Unfortunately browser integration is currently not supported in the Microsoft Store version."
},
diff --git a/apps/desktop/src/utils.ts b/apps/desktop/src/utils.ts
index 552bc136392..0f186060aae 100644
--- a/apps/desktop/src/utils.ts
+++ b/apps/desktop/src/utils.ts
@@ -70,8 +70,7 @@ export function isWindowsPortable() {
}
/**
- * We block the browser integration on some unsupported platforms, which also
- * blocks partially supported platforms (mac .dmg in dev builds) / prevents
+ * We block the browser integration on some unsupported platforms prevents
* experimenting with the feature for QA. So this env var allows overriding
* the block.
*/
From 1cc1a79e0918a34eaa65cdf64e4c385c6b87a783 Mon Sep 17 00:00:00 2001
From: Mick Letofsky
Date: Wed, 12 Nov 2025 17:05:13 +0100
Subject: [PATCH 03/14] Refactor the review code prompt to precisely target our
clients repo (#17329)
* Refactor the review code prompt to precisely target our clients repo
* Implement wording refactoring away from "migration" terminology
---
.claude/prompts/review-code.md | 68 +++++++++++++++++++++++++---------
1 file changed, 50 insertions(+), 18 deletions(-)
diff --git a/.claude/prompts/review-code.md b/.claude/prompts/review-code.md
index 4e5f40b2743..1888b7cd503 100644
--- a/.claude/prompts/review-code.md
+++ b/.claude/prompts/review-code.md
@@ -1,25 +1,57 @@
-Please review this pull request with a focus on:
+# Bitwarden Clients Repo Code Review - Careful Consideration Required
-- Code quality and best practices
-- Potential bugs or issues
-- Security implications
-- Performance considerations
+## Think Twice Before Recommending
-Note: The PR branch is already checked out in the current working directory.
+Angular has multiple valid patterns. Before suggesting changes:
-Provide a comprehensive review including:
+- **Consider the context** - Is this code part of an active modernization effort?
+- **Check for established patterns** - Look for similar implementations in the codebase
+- **Avoid premature optimization** - Don't suggest refactoring stable, working code without clear benefit
+- **Respect incremental progress** - Teams may be modernizing gradually with feature flags
-- Summary of changes since last review
-- Critical issues found (be thorough)
-- Suggested improvements (be thorough)
-- Good practices observed (be concise - list only the most notable items without elaboration)
-- Action items for the author
-- Leverage collapsible sections where appropriate for lengthy explanations or code snippets to enhance human readability
+## Angular Modernization - Handle with Care
-When reviewing subsequent commits:
+**Control Flow Syntax (@if, @for, @switch):**
-- Track status of previously identified issues (fixed/unfixed/reopened)
-- Identify NEW problems introduced since last review
-- Note if fixes introduced new issues
+- When you see legacy structural directives (*ngIf, *ngFor), consider whether modernization is in scope
+- Do not mandate changes to stable code unless part of the PR's objective
+- If suggesting modernization, acknowledge it's optional unless required by PR goals
-IMPORTANT: Be comprehensive about issues and improvements. For good practices, be brief - just note what was done well without explaining why or praising excessively.
+**Standalone Components:**
+
+- New components should be standalone whenever feasible, but do not flag existing NgModule components as issues
+- Legacy patterns exist for valid reasons - consider modernization effort vs benefit
+
+**Typed Forms:**
+
+- Recommend typed forms for NEW form code
+- Don't suggest rewriting working untyped forms unless they're being modified
+
+## Tailwind CSS - Critical Pattern
+
+**tw- prefix is mandatory** - This is non-negotiable and should be flagged as ❌ major finding:
+
+- Missing tw- prefix breaks styling completely
+- Check ALL Tailwind classes in modified files
+
+## Rust SDK Adoption - Tread Carefully
+
+When reviewing cipher operations:
+
+- Look for breaking changes in the TypeScript → Rust boundary
+- Verify error handling matches established patterns
+- Don't suggest alternative SDK patterns without strong justification
+
+## Component Library First
+
+Before suggesting custom implementations:
+
+- Check if Bitwarden's component library already provides the functionality
+- Prefer existing components over custom Tailwind styling
+- Don't add UI complexity that the component library already solves
+
+## When in Doubt
+
+- **Ask questions** (💭) rather than making definitive recommendations
+- **Flag for human review** (⚠️) if you're uncertain
+- **Acknowledge alternatives** exist when suggesting improvements
From 338ea955354bcd8ccb12b95abad0a3247287ad26 Mon Sep 17 00:00:00 2001
From: Github Actions
Date: Wed, 12 Nov 2025 16:18:17 +0000
Subject: [PATCH 04/14] Bumped client version(s)
---
apps/web/package.json | 2 +-
package-lock.json | 2 +-
2 files changed, 2 insertions(+), 2 deletions(-)
diff --git a/apps/web/package.json b/apps/web/package.json
index ddcf1576743..14a028b0b18 100644
--- a/apps/web/package.json
+++ b/apps/web/package.json
@@ -1,6 +1,6 @@
{
"name": "@bitwarden/web-vault",
- "version": "2025.11.0",
+ "version": "2025.11.1",
"scripts": {
"build:oss": "webpack",
"build:bit": "webpack -c ../../bitwarden_license/bit-web/webpack.config.js",
diff --git a/package-lock.json b/package-lock.json
index f0c3f2ace93..06d1d8d75a1 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -294,7 +294,7 @@
},
"apps/web": {
"name": "@bitwarden/web-vault",
- "version": "2025.11.0"
+ "version": "2025.11.1"
},
"libs/admin-console": {
"name": "@bitwarden/admin-console",
From 9852027e98deb0b761772df149050af89016ce0d Mon Sep 17 00:00:00 2001
From: Github Actions
Date: Wed, 12 Nov 2025 16:45:12 +0000
Subject: [PATCH 05/14] Bumped client version(s)
---
apps/web/package.json | 2 +-
package-lock.json | 2 +-
2 files changed, 2 insertions(+), 2 deletions(-)
diff --git a/apps/web/package.json b/apps/web/package.json
index 14a028b0b18..b95d3e6aba5 100644
--- a/apps/web/package.json
+++ b/apps/web/package.json
@@ -1,6 +1,6 @@
{
"name": "@bitwarden/web-vault",
- "version": "2025.11.1",
+ "version": "2025.11.2",
"scripts": {
"build:oss": "webpack",
"build:bit": "webpack -c ../../bitwarden_license/bit-web/webpack.config.js",
diff --git a/package-lock.json b/package-lock.json
index 06d1d8d75a1..30565bc6ab8 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -294,7 +294,7 @@
},
"apps/web": {
"name": "@bitwarden/web-vault",
- "version": "2025.11.1"
+ "version": "2025.11.2"
},
"libs/admin-console": {
"name": "@bitwarden/admin-console",
From 9786594df34d23335a00c0aee5a5980ae72d1cbd Mon Sep 17 00:00:00 2001
From: "renovate[bot]" <29139614+renovate[bot]@users.noreply.github.com>
Date: Wed, 12 Nov 2025 13:18:42 -0500
Subject: [PATCH 06/14] [deps]: Update Minor github-actions updates (#14923)
Co-authored-by: renovate[bot] <29139614+renovate[bot]@users.noreply.github.com>
---
.github/workflows/build-browser.yml | 2 +-
.github/workflows/build-desktop.yml | 38 +++++++++----------
.github/workflows/build-web.yml | 14 +++----
.github/workflows/chromatic.yml | 4 +-
.github/workflows/crowdin-pull.yml | 2 +-
.github/workflows/lint-crowdin-config.yml | 2 +-
.github/workflows/publish-desktop.yml | 4 +-
.github/workflows/release-browser.yml | 2 +-
.github/workflows/release-cli.yml | 2 +-
.github/workflows/release-desktop.yml | 2 +-
.github/workflows/release-web.yml | 2 +-
.github/workflows/repository-management.yml | 4 +-
.../workflows/sdk-breaking-change-check.yml | 2 +-
.../workflows/test-browser-interactions.yml | 2 +-
.github/workflows/test.yml | 6 +--
.github/workflows/version-auto-bump.yml | 2 +-
16 files changed, 45 insertions(+), 45 deletions(-)
diff --git a/.github/workflows/build-browser.yml b/.github/workflows/build-browser.yml
index 4378b6de786..83e6c2d696e 100644
--- a/.github/workflows/build-browser.yml
+++ b/.github/workflows/build-browser.yml
@@ -548,7 +548,7 @@ jobs:
uses: bitwarden/gh-actions/azure-logout@main
- name: Upload Sources
- uses: crowdin/github-action@f214c8723025f41fc55b2ad26e67b60b80b1885d # v2.7.1
+ uses: crowdin/github-action@08713f00a50548bfe39b37e8f44afb53e7a802d4 # v2.12.0
env:
GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }}
CROWDIN_API_TOKEN: ${{ steps.retrieve-secrets.outputs.crowdin-api-token }}
diff --git a/.github/workflows/build-desktop.yml b/.github/workflows/build-desktop.yml
index 68fa2ac255e..b29f0dcad76 100644
--- a/.github/workflows/build-desktop.yml
+++ b/.github/workflows/build-desktop.yml
@@ -225,7 +225,7 @@ jobs:
npm link ../sdk-internal
- name: Cache Native Module
- uses: actions/cache@1bd1e32a3bdc45362d1e726936510720a7c30a57 # v4.2.0
+ uses: actions/cache@0057852bfaa89a56745cba8c7296529d2fc39830 # v4.3.0
id: cache
with:
path: |
@@ -381,7 +381,7 @@ jobs:
npm link ../sdk-internal
- name: Cache Native Module
- uses: actions/cache@1bd1e32a3bdc45362d1e726936510720a7c30a57 # v4.2.0
+ uses: actions/cache@0057852bfaa89a56745cba8c7296529d2fc39830 # v4.3.0
id: cache
with:
path: |
@@ -426,7 +426,7 @@ jobs:
if-no-files-found: error
- name: Upload tar.gz artifact
- uses: actions/upload-artifact@6f51ac03b9356f520e9adb1b1b7802705f340c2b # v4.5.0
+ uses: actions/upload-artifact@ea165f8d65b6e75b540449e92b4886f43607fa02 # v4.6.2
with:
name: bitwarden_${{ env._PACKAGE_VERSION }}_arm64.tar.gz
path: apps/desktop/dist/bitwarden_desktop_arm64.tar.gz
@@ -537,7 +537,7 @@ jobs:
npm link ../sdk-internal
- name: Cache Native Module
- uses: actions/cache@1bd1e32a3bdc45362d1e726936510720a7c30a57 # v4.2.0
+ uses: actions/cache@0057852bfaa89a56745cba8c7296529d2fc39830 # v4.3.0
id: cache
with:
path: |
@@ -793,7 +793,7 @@ jobs:
npm link ../sdk-internal
- name: Cache Native Module
- uses: actions/cache@1bd1e32a3bdc45362d1e726936510720a7c30a57 # v4.2.0
+ uses: actions/cache@0057852bfaa89a56745cba8c7296529d2fc39830 # v4.3.0
id: cache
with:
path: |
@@ -971,7 +971,7 @@ jobs:
- name: Set up Python
uses: actions/setup-python@e797f83bcb11b83ae66e0230d6156d7c80228e7c # v6.0.0
with:
- python-version: '3.12'
+ python-version: '3.14'
- name: Set up Node-gyp
run: python3 -m pip install setuptools
@@ -986,14 +986,14 @@ jobs:
- name: Cache Build
id: build-cache
- uses: actions/cache@1bd1e32a3bdc45362d1e726936510720a7c30a57 # v4.2.0
+ uses: actions/cache@0057852bfaa89a56745cba8c7296529d2fc39830 # v4.3.0
with:
path: apps/desktop/build
key: ${{ runner.os }}-${{ github.run_id }}-build
- name: Cache Safari
id: safari-cache
- uses: actions/cache@1bd1e32a3bdc45362d1e726936510720a7c30a57 # v4.2.0
+ uses: actions/cache@0057852bfaa89a56745cba8c7296529d2fc39830 # v4.3.0
with:
path: apps/browser/dist/Safari
key: ${{ runner.os }}-${{ github.run_id }}-safari-extension
@@ -1139,7 +1139,7 @@ jobs:
npm link ../sdk-internal
- name: Cache Native Module
- uses: actions/cache@1bd1e32a3bdc45362d1e726936510720a7c30a57 # v4.2.0
+ uses: actions/cache@0057852bfaa89a56745cba8c7296529d2fc39830 # v4.3.0
id: cache
with:
path: |
@@ -1201,7 +1201,7 @@ jobs:
- name: Set up Python
uses: actions/setup-python@e797f83bcb11b83ae66e0230d6156d7c80228e7c # v6.0.0
with:
- python-version: '3.12'
+ python-version: '3.14'
- name: Set up Node-gyp
run: python3 -m pip install setuptools
@@ -1216,14 +1216,14 @@ jobs:
- name: Get Build Cache
id: build-cache
- uses: actions/cache@1bd1e32a3bdc45362d1e726936510720a7c30a57 # v4.2.0
+ uses: actions/cache@0057852bfaa89a56745cba8c7296529d2fc39830 # v4.3.0
with:
path: apps/desktop/build
key: ${{ runner.os }}-${{ github.run_id }}-build
- name: Setup Safari Cache
id: safari-cache
- uses: actions/cache@1bd1e32a3bdc45362d1e726936510720a7c30a57 # v4.2.0
+ uses: actions/cache@0057852bfaa89a56745cba8c7296529d2fc39830 # v4.3.0
with:
path: apps/browser/dist/Safari
key: ${{ runner.os }}-${{ github.run_id }}-safari-extension
@@ -1353,7 +1353,7 @@ jobs:
npm link ../sdk-internal
- name: Cache Native Module
- uses: actions/cache@1bd1e32a3bdc45362d1e726936510720a7c30a57 # v4.2.0
+ uses: actions/cache@0057852bfaa89a56745cba8c7296529d2fc39830 # v4.3.0
id: cache
with:
path: |
@@ -1466,7 +1466,7 @@ jobs:
- name: Set up Python
uses: actions/setup-python@e797f83bcb11b83ae66e0230d6156d7c80228e7c # v6.0.0
with:
- python-version: '3.12'
+ python-version: '3.14'
- name: Set up Node-gyp
run: python3 -m pip install setuptools
@@ -1481,14 +1481,14 @@ jobs:
- name: Get Build Cache
id: build-cache
- uses: actions/cache@1bd1e32a3bdc45362d1e726936510720a7c30a57 # v4.2.0
+ uses: actions/cache@0057852bfaa89a56745cba8c7296529d2fc39830 # v4.3.0
with:
path: apps/desktop/build
key: ${{ runner.os }}-${{ github.run_id }}-build
- name: Setup Safari Cache
id: safari-cache
- uses: actions/cache@1bd1e32a3bdc45362d1e726936510720a7c30a57 # v4.2.0
+ uses: actions/cache@0057852bfaa89a56745cba8c7296529d2fc39830 # v4.3.0
with:
path: apps/browser/dist/Safari
key: ${{ runner.os }}-${{ github.run_id }}-safari-extension
@@ -1626,7 +1626,7 @@ jobs:
npm link ../sdk-internal
- name: Cache Native Module
- uses: actions/cache@1bd1e32a3bdc45362d1e726936510720a7c30a57 # v4.2.0
+ uses: actions/cache@0057852bfaa89a56745cba8c7296529d2fc39830 # v4.3.0
id: cache
with:
path: |
@@ -1747,7 +1747,7 @@ jobs:
if: |
github.event_name != 'pull_request_target'
&& (github.ref == 'refs/heads/main' || github.ref == 'refs/heads/rc' || github.ref == 'refs/heads/hotfix-rc-desktop')
- uses: slackapi/slack-github-action@485a9d42d3a73031f12ec201c457e2162c45d02d # v2.0.0
+ uses: slackapi/slack-github-action@91efab103c0de0a537f72a35f6b8cda0ee76bf0a # v2.1.1
with:
channel-id: C074F5UESQ0
method: chat.postMessage
@@ -1805,7 +1805,7 @@ jobs:
uses: bitwarden/gh-actions/azure-logout@main
- name: Upload Sources
- uses: crowdin/github-action@f214c8723025f41fc55b2ad26e67b60b80b1885d # v2.7.1
+ uses: crowdin/github-action@08713f00a50548bfe39b37e8f44afb53e7a802d4 # v2.12.0
env:
GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }}
CROWDIN_API_TOKEN: ${{ steps.retrieve-secrets.outputs.crowdin-api-token }}
diff --git a/.github/workflows/build-web.yml b/.github/workflows/build-web.yml
index 0ea3ad7af78..497da803686 100644
--- a/.github/workflows/build-web.yml
+++ b/.github/workflows/build-web.yml
@@ -204,7 +204,7 @@ jobs:
########## Set up Docker ##########
- name: Set up Docker
- uses: docker/setup-docker-action@b60f85385d03ac8acfca6d9996982511d8620a19 # v4.3.0
+ uses: docker/setup-docker-action@efe9e3891a4f7307e689f2100b33a155b900a608 # v4.5.0
with:
daemon-config: |
{
@@ -215,10 +215,10 @@ jobs:
}
- name: Set up QEMU emulators
- uses: docker/setup-qemu-action@29109295f81e9208d7d86ff1c6c12d2833863392 # v3.6.0
+ uses: docker/setup-qemu-action@c7c53464625b32c7a7e944ae62b3e17d2b600130 # v3.7.0
- name: Set up Docker Buildx
- uses: docker/setup-buildx-action@f95db51fddba0c2d1ec667646a06c2ce06100226 # v3.0.0
+ uses: docker/setup-buildx-action@e468171a9de216ec08956ac3ada2f0791b6bd435 # v3.11.1
########## ACRs ##########
- name: Log in to Azure
@@ -273,7 +273,7 @@ jobs:
- name: Build Docker image
id: build-container
- uses: docker/build-push-action@67a2d409c0a876cbe6b11854e3e25193efe4e62d # v6.12.0
+ uses: docker/build-push-action@263435318d21b8e681c14492fe198d362a7d2c83 # v6.18.0
with:
build-args: |
NODE_VERSION=${{ env._NODE_VERSION }}
@@ -315,7 +315,7 @@ jobs:
- name: Install Cosign
if: github.event_name != 'pull_request_target' && github.ref == 'refs/heads/main'
- uses: sigstore/cosign-installer@3454372f43399081ed03b604cb2d021dabca52bb # v3.8.2
+ uses: sigstore/cosign-installer@7e8b541eb2e61bf99390e1afd4be13a184e9ebc5 # v3.10.1
- name: Sign image with Cosign
if: github.event_name != 'pull_request_target' && github.ref == 'refs/heads/main'
@@ -334,7 +334,7 @@ jobs:
- name: Scan Docker image
if: ${{ needs.setup.outputs.has_secrets == 'true' }}
id: container-scan
- uses: anchore/scan-action@2c901ab7378897c01b8efaa2d0c9bf519cc64b9e # v6.2.0
+ uses: anchore/scan-action@1638637db639e0ade3258b51db49a9a137574c3e # v6.5.1
with:
image: ${{ steps.image-name.outputs.name }}
fail-build: false
@@ -390,7 +390,7 @@ jobs:
uses: bitwarden/gh-actions/azure-logout@main
- name: Upload Sources
- uses: crowdin/github-action@f214c8723025f41fc55b2ad26e67b60b80b1885d # v2.7.1
+ uses: crowdin/github-action@08713f00a50548bfe39b37e8f44afb53e7a802d4 # v2.12.0
env:
GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }}
CROWDIN_API_TOKEN: ${{ steps.retrieve-secrets.outputs.crowdin-api-token }}
diff --git a/.github/workflows/chromatic.yml b/.github/workflows/chromatic.yml
index ccac9cb32bb..aa0183ac16f 100644
--- a/.github/workflows/chromatic.yml
+++ b/.github/workflows/chromatic.yml
@@ -65,7 +65,7 @@ jobs:
- name: Cache NPM
id: npm-cache
- uses: actions/cache@1bd1e32a3bdc45362d1e726936510720a7c30a57 # v4.2.0
+ uses: actions/cache@0057852bfaa89a56745cba8c7296529d2fc39830 # v4.3.0
with:
path: "~/.npm"
key: ${{ runner.os }}-npm-chromatic-${{ hashFiles('**/package-lock.json') }}
@@ -98,7 +98,7 @@ jobs:
uses: bitwarden/gh-actions/azure-logout@main
- name: Publish to Chromatic
- uses: chromaui/action@d0795df816d05c4a89c80295303970fddd247cce # v13.1.4
+ uses: chromaui/action@ac86f2ff0a458ffbce7b40698abd44c0fa34d4b6 # v13.3.3
with:
token: ${{ secrets.GITHUB_TOKEN }}
projectToken: ${{ steps.get-kv-secrets.outputs.CHROMATIC-PROJECT-TOKEN }}
diff --git a/.github/workflows/crowdin-pull.yml b/.github/workflows/crowdin-pull.yml
index f195afa86da..19532493071 100644
--- a/.github/workflows/crowdin-pull.yml
+++ b/.github/workflows/crowdin-pull.yml
@@ -49,7 +49,7 @@ jobs:
uses: bitwarden/gh-actions/azure-logout@main
- name: Generate GH App token
- uses: actions/create-github-app-token@30bf6253fa41bdc8d1501d202ad15287582246b4 # v2.0.3
+ uses: actions/create-github-app-token@67018539274d69449ef7c02e8e71183d1719ab42 # v2.1.4
id: app-token
with:
app-id: ${{ steps.get-kv-secrets.outputs.BW-GHAPP-ID }}
diff --git a/.github/workflows/lint-crowdin-config.yml b/.github/workflows/lint-crowdin-config.yml
index ee22a03963c..8d6bf254906 100644
--- a/.github/workflows/lint-crowdin-config.yml
+++ b/.github/workflows/lint-crowdin-config.yml
@@ -45,7 +45,7 @@ jobs:
uses: bitwarden/gh-actions/azure-logout@main
- name: Lint ${{ matrix.app.name }} config
- uses: crowdin/github-action@f214c8723025f41fc55b2ad26e67b60b80b1885d # v2.7.1
+ uses: crowdin/github-action@08713f00a50548bfe39b37e8f44afb53e7a802d4 # v2.12.0
env:
GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }}
CROWDIN_PROJECT_ID: ${{ matrix.app.project_id }}
diff --git a/.github/workflows/publish-desktop.yml b/.github/workflows/publish-desktop.yml
index 2e9ba635e7a..15a0ec77d5b 100644
--- a/.github/workflows/publish-desktop.yml
+++ b/.github/workflows/publish-desktop.yml
@@ -348,9 +348,9 @@ jobs:
run: wget "https://github.com/bitwarden/clients/releases/download/$_RELEASE_TAG/macos-build-number.json"
- name: Setup Ruby and Install Fastlane
- uses: ruby/setup-ruby@ca041f971d66735f3e5ff1e21cc13e2d51e7e535 # v1.233.0
+ uses: ruby/setup-ruby@d5126b9b3579e429dd52e51e68624dda2e05be25 # v1.267.0
with:
- ruby-version: '3.0'
+ ruby-version: '3.4.7'
bundler-cache: false
working-directory: apps/desktop
diff --git a/.github/workflows/release-browser.yml b/.github/workflows/release-browser.yml
index 39f54a6e2db..c7faefb2ce9 100644
--- a/.github/workflows/release-browser.yml
+++ b/.github/workflows/release-browser.yml
@@ -140,7 +140,7 @@ jobs:
- name: Create release
if: ${{ github.event.inputs.release_type != 'Dry Run' }}
- uses: ncipollo/release-action@cdcc88a9acf3ca41c16c37bb7d21b9ad48560d87 # v1.15.0
+ uses: ncipollo/release-action@b7eabc95ff50cbeeedec83973935c8f306dfcd0b # v1.20.0
with:
artifacts: 'browser-source-${{ needs.setup.outputs.release_version }}.zip,
dist-chrome-${{ needs.setup.outputs.release_version }}.zip,
diff --git a/.github/workflows/release-cli.yml b/.github/workflows/release-cli.yml
index d5013770476..4b94939b9dc 100644
--- a/.github/workflows/release-cli.yml
+++ b/.github/workflows/release-cli.yml
@@ -80,7 +80,7 @@ jobs:
- name: Create release
if: ${{ inputs.release_type != 'Dry Run' }}
- uses: ncipollo/release-action@cdcc88a9acf3ca41c16c37bb7d21b9ad48560d87 # v1.15.0
+ uses: ncipollo/release-action@b7eabc95ff50cbeeedec83973935c8f306dfcd0b # v1.20.0
env:
PKG_VERSION: ${{ needs.setup.outputs.release_version }}
with:
diff --git a/.github/workflows/release-desktop.yml b/.github/workflows/release-desktop.yml
index c7bebe86d51..35fc8bed8a9 100644
--- a/.github/workflows/release-desktop.yml
+++ b/.github/workflows/release-desktop.yml
@@ -99,7 +99,7 @@ jobs:
run: mv "Bitwarden-$PKG_VERSION-universal.pkg" "Bitwarden-$PKG_VERSION-universal.pkg.archive"
- name: Create Release
- uses: ncipollo/release-action@cdcc88a9acf3ca41c16c37bb7d21b9ad48560d87 # v1.15.0
+ uses: ncipollo/release-action@b7eabc95ff50cbeeedec83973935c8f306dfcd0b # v1.20.0
if: ${{ steps.release_channel.outputs.channel == 'latest' && github.event.inputs.release_type != 'Dry Run' }}
env:
PKG_VERSION: ${{ steps.version.outputs.version }}
diff --git a/.github/workflows/release-web.yml b/.github/workflows/release-web.yml
index 8c8f8ed86af..59022657398 100644
--- a/.github/workflows/release-web.yml
+++ b/.github/workflows/release-web.yml
@@ -89,7 +89,7 @@ jobs:
- name: Create release
if: ${{ github.event.inputs.release_type != 'Dry Run' }}
- uses: ncipollo/release-action@cdcc88a9acf3ca41c16c37bb7d21b9ad48560d87 # v1.15.0
+ uses: ncipollo/release-action@b7eabc95ff50cbeeedec83973935c8f306dfcd0b # v1.20.0
with:
name: "Web v${{ needs.setup.outputs.release_version }}"
commit: ${{ github.sha }}
diff --git a/.github/workflows/repository-management.yml b/.github/workflows/repository-management.yml
index ce9b70118b2..2a58e2fa828 100644
--- a/.github/workflows/repository-management.yml
+++ b/.github/workflows/repository-management.yml
@@ -97,7 +97,7 @@ jobs:
uses: bitwarden/gh-actions/azure-logout@main
- name: Generate GH App token
- uses: actions/create-github-app-token@30bf6253fa41bdc8d1501d202ad15287582246b4 # v2.0.3
+ uses: actions/create-github-app-token@67018539274d69449ef7c02e8e71183d1719ab42 # v2.1.4
id: app-token
with:
app-id: ${{ steps.get-kv-secrets.outputs.BW-GHAPP-ID }}
@@ -462,7 +462,7 @@ jobs:
uses: bitwarden/gh-actions/azure-logout@main
- name: Generate GH App token
- uses: actions/create-github-app-token@30bf6253fa41bdc8d1501d202ad15287582246b4 # v2.0.3
+ uses: actions/create-github-app-token@67018539274d69449ef7c02e8e71183d1719ab42 # v2.1.4
id: app-token
with:
app-id: ${{ steps.get-kv-secrets.outputs.BW-GHAPP-ID }}
diff --git a/.github/workflows/sdk-breaking-change-check.yml b/.github/workflows/sdk-breaking-change-check.yml
index 29a25181b75..759f2292d2a 100644
--- a/.github/workflows/sdk-breaking-change-check.yml
+++ b/.github/workflows/sdk-breaking-change-check.yml
@@ -53,7 +53,7 @@ jobs:
secrets: "BW-GHAPP-ID,BW-GHAPP-KEY"
- name: Generate GH App token
- uses: actions/create-github-app-token@30bf6253fa41bdc8d1501d202ad15287582246b4 # v2.0.3
+ uses: actions/create-github-app-token@67018539274d69449ef7c02e8e71183d1719ab42 # v2.1.4
id: app-token
with:
app-id: ${{ steps.get-kv-secrets.outputs.BW-GHAPP-ID }}
diff --git a/.github/workflows/test-browser-interactions.yml b/.github/workflows/test-browser-interactions.yml
index fb31a93d51f..6aca75fa859 100644
--- a/.github/workflows/test-browser-interactions.yml
+++ b/.github/workflows/test-browser-interactions.yml
@@ -49,7 +49,7 @@ jobs:
uses: bitwarden/gh-actions/azure-logout@main
- name: Generate GH App token
- uses: actions/create-github-app-token@30bf6253fa41bdc8d1501d202ad15287582246b4 # v2.0.3
+ uses: actions/create-github-app-token@67018539274d69449ef7c02e8e71183d1719ab42 # v2.1.4
id: app-token
with:
app-id: ${{ steps.get-kv-secrets.outputs.BW-GHAPP-ID }}
diff --git a/.github/workflows/test.yml b/.github/workflows/test.yml
index d468ca74ed6..71f8e7c9155 100644
--- a/.github/workflows/test.yml
+++ b/.github/workflows/test.yml
@@ -62,7 +62,7 @@ jobs:
run: npm test -- --coverage --maxWorkers=3
- name: Report test results
- uses: dorny/test-reporter@6e6a65b7a0bd2c9197df7d0ae36ac5cee784230c # v2.0.0
+ uses: dorny/test-reporter@dc3a92680fcc15842eef52e8c4606ea7ce6bd3f3 # v2.1.1
if: ${{ github.event.pull_request.head.repo.full_name == github.repository && !cancelled() }}
with:
name: Test Results
@@ -148,7 +148,7 @@ jobs:
components: llvm-tools
- name: Cache cargo registry
- uses: Swatinem/rust-cache@82a92a6e8fbeee089604da2575dc567ae9ddeaab # v2.7.5
+ uses: Swatinem/rust-cache@f13886b937689c021905a6b90929199931d60db1 # v2.8.1
with:
workspaces: "apps/desktop/desktop_native -> target"
@@ -190,7 +190,7 @@ jobs:
path: ./apps/desktop/desktop_native
- name: Upload coverage to codecov.io
- uses: codecov/codecov-action@ad3126e916f78f00edff4ed0317cf185271ccc2d # v5.4.2
+ uses: codecov/codecov-action@5a1091511ad55cbe89839c7260b706298ca349f7 # v5.5.1
with:
files: |
./lcov.info
diff --git a/.github/workflows/version-auto-bump.yml b/.github/workflows/version-auto-bump.yml
index fee34d14e83..9ff252d2fe8 100644
--- a/.github/workflows/version-auto-bump.yml
+++ b/.github/workflows/version-auto-bump.yml
@@ -31,7 +31,7 @@ jobs:
uses: bitwarden/gh-actions/azure-logout@main
- name: Generate GH App token
- uses: actions/create-github-app-token@30bf6253fa41bdc8d1501d202ad15287582246b4 # v2.0.3
+ uses: actions/create-github-app-token@67018539274d69449ef7c02e8e71183d1719ab42 # v2.1.4
id: app-token
with:
app-id: ${{ steps.get-kv-secrets.outputs.BW-GHAPP-ID }}
From 7989ad7b7c05656cd0bb630eca64561b771cee88 Mon Sep 17 00:00:00 2001
From: cyprain-okeke <108260115+cyprain-okeke@users.noreply.github.com>
Date: Wed, 12 Nov 2025 20:38:13 +0100
Subject: [PATCH 07/14] [PM-26682] [Milestone 2d] Display discount on
subscription page (#17229)
* The discount badge implementation
* Use existing flag
* Added the top spaces as requested
* refactor: move discount-badge to pricing library and consolidate discount classes
* fix: add CommonModule import to discount-badge component and simplify discounted amount calculation
- Add CommonModule import to discount-badge component for *ngIf directive
- Simplify discountedSubscriptionAmount to use upcomingInvoice.amount from server instead of manual calculation
* Fix the lint errors
* Story update
---------
Co-authored-by: Alex Morask
---
.../user-subscription.component.html | 133 ++++++++++--------
.../individual/user-subscription.component.ts | 42 ++++++
.../billing/shared/billing-shared.module.ts | 3 +
apps/web/src/locales/en/messages.json | 9 ++
.../organization-subscription.response.ts | 4 +-
.../models/response/subscription.response.ts | 6 +
libs/common/src/enums/feature-flag.enum.ts | 2 +
.../discount-badge.component.html | 10 ++
.../discount-badge.component.mdx | 67 +++++++++
.../discount-badge.component.spec.ts | 108 ++++++++++++++
.../discount-badge.component.stories.ts | 123 ++++++++++++++++
.../discount-badge.component.ts | 70 +++++++++
libs/pricing/src/index.ts | 1 +
13 files changed, 522 insertions(+), 56 deletions(-)
create mode 100644 libs/pricing/src/components/discount-badge/discount-badge.component.html
create mode 100644 libs/pricing/src/components/discount-badge/discount-badge.component.mdx
create mode 100644 libs/pricing/src/components/discount-badge/discount-badge.component.spec.ts
create mode 100644 libs/pricing/src/components/discount-badge/discount-badge.component.stories.ts
create mode 100644 libs/pricing/src/components/discount-badge/discount-badge.component.ts
diff --git a/apps/web/src/app/billing/individual/user-subscription.component.html b/apps/web/src/app/billing/individual/user-subscription.component.html
index e801237467a..b7e490cdf2e 100644
--- a/apps/web/src/app/billing/individual/user-subscription.component.html
+++ b/apps/web/src/app/billing/individual/user-subscription.component.html
@@ -37,41 +37,63 @@
{{ sub.expiration | date: "mediumDate" }}
{{ "neverExpires" | i18n }}
-
-
-
- - {{ "status" | i18n }}
- -
+
+
+
+
{{ "plan" | i18n }}
+
{{ "premiumMembership" | i18n }}
+
+
+
{{ "status" | i18n }}
+
{{ (subscription && subscriptionStatus) || "-" }}
- {{
- "pendingCancellation" | i18n
- }}
-
-
- {{ "nextCharge" | i18n }}
- -
- {{
- nextInvoice
- ? (sub.subscription.periodEndDate | date: "mediumDate") +
- ", " +
- (nextInvoice.amount | currency: "$")
- : "-"
- }}
-
-
-
-
- {{ "details" | i18n }}
-
-
-
- |
- {{ i.name }} {{ i.quantity > 1 ? "×" + i.quantity : "" }} @
- {{ i.amount | currency: "$" }}
- |
- {{ i.quantity * i.amount | currency: "$" }} /{{ i.interval | i18n }} |
-
-
-
+ {{ "pendingCancellation" | i18n }}
+
+
+
+
{{ "nextChargeHeader" | i18n }}
+
+
+
+
+
+ {{
+ (sub.subscription.periodEndDate | date: "MMM d, y") +
+ ", " +
+ (discountedSubscriptionAmount | currency: "$")
+ }}
+
+
+
+
+
+
+
+ {{
+ (sub.subscription.periodEndDate | date: "MMM d, y") +
+ ", " +
+ (subscriptionAmount | currency: "$")
+ }}
+
+
+
+
+
-
+
+
@@ -90,8 +112,27 @@
-
-
+
+
{{ "storage" | i18n }}
+
+ {{ "subscriptionStorage" | i18n: sub.maxStorageGb || 0 : sub.storageName || "0 MB" }}
+
+
+
+
+
+
+
+
+
+
+
{{ "additionalOptions" | i18n }}
+
{{ "additionalOptionsDesc" | i18n }}
+
-
{{ "storage" | i18n }}
-
- {{ "subscriptionStorage" | i18n: sub.maxStorageGb || 0 : sub.storageName || "0 MB" }}
-
-
-
-
-
-
-
-
-
-
-
+
diff --git a/apps/web/src/app/billing/individual/user-subscription.component.ts b/apps/web/src/app/billing/individual/user-subscription.component.ts
index 19db9ec8e61..c39b5d153b1 100644
--- a/apps/web/src/app/billing/individual/user-subscription.component.ts
+++ b/apps/web/src/app/billing/individual/user-subscription.component.ts
@@ -7,13 +7,17 @@ import { firstValueFrom, lastValueFrom } from "rxjs";
import { ApiService } from "@bitwarden/common/abstractions/api.service";
import { AccountService } from "@bitwarden/common/auth/abstractions/account.service";
import { BillingAccountProfileStateService } from "@bitwarden/common/billing/abstractions/account/billing-account-profile-state.service";
+import { BillingCustomerDiscount } from "@bitwarden/common/billing/models/response/organization-subscription.response";
import { SubscriptionResponse } from "@bitwarden/common/billing/models/response/subscription.response";
+import { FeatureFlag } from "@bitwarden/common/enums/feature-flag.enum";
+import { ConfigService } from "@bitwarden/common/platform/abstractions/config/config.service";
import { EnvironmentService } from "@bitwarden/common/platform/abstractions/environment.service";
import { FileDownloadService } from "@bitwarden/common/platform/abstractions/file-download/file-download.service";
import { I18nService } from "@bitwarden/common/platform/abstractions/i18n.service";
import { LogService } from "@bitwarden/common/platform/abstractions/log.service";
import { PlatformUtilsService } from "@bitwarden/common/platform/abstractions/platform-utils.service";
import { DialogService, ToastService } from "@bitwarden/components";
+import { DiscountInfo } from "@bitwarden/pricing";
import {
AdjustStorageDialogComponent,
@@ -42,6 +46,10 @@ export class UserSubscriptionComponent implements OnInit {
cancelPromise: Promise
;
reinstatePromise: Promise;
+ protected enableDiscountDisplay$ = this.configService.getFeatureFlag$(
+ FeatureFlag.PM23341_Milestone_2,
+ );
+
constructor(
private apiService: ApiService,
private platformUtilsService: PlatformUtilsService,
@@ -54,6 +62,7 @@ export class UserSubscriptionComponent implements OnInit {
private billingAccountProfileStateService: BillingAccountProfileStateService,
private toastService: ToastService,
private accountService: AccountService,
+ private configService: ConfigService,
) {
this.selfHosted = this.platformUtilsService.isSelfHost();
}
@@ -187,6 +196,28 @@ export class UserSubscriptionComponent implements OnInit {
return this.sub != null ? this.sub.upcomingInvoice : null;
}
+ get subscriptionAmount(): number {
+ if (!this.subscription?.items || this.subscription.items.length === 0) {
+ return 0;
+ }
+
+ return this.subscription.items.reduce(
+ (sum, item) => sum + (item.amount || 0) * (item.quantity || 0),
+ 0,
+ );
+ }
+
+ get discountedSubscriptionAmount(): number {
+ // Use the upcoming invoice amount from the server as it already includes discounts,
+ // taxes, prorations, and all other adjustments. Fall back to subscription amount
+ // if upcoming invoice is not available.
+ if (this.nextInvoice?.amount != null) {
+ return this.nextInvoice.amount;
+ }
+
+ return this.subscriptionAmount;
+ }
+
get storagePercentage() {
return this.sub != null && this.sub.maxStorageGb
? +(100 * (this.sub.storageGb / this.sub.maxStorageGb)).toFixed(2)
@@ -217,4 +248,15 @@ export class UserSubscriptionComponent implements OnInit {
return this.subscription.status;
}
}
+
+ getDiscountInfo(discount: BillingCustomerDiscount | null): DiscountInfo | null {
+ if (!discount) {
+ return null;
+ }
+ return {
+ active: discount.active,
+ percentOff: discount.percentOff,
+ amountOff: discount.amountOff,
+ };
+ }
}
diff --git a/apps/web/src/app/billing/shared/billing-shared.module.ts b/apps/web/src/app/billing/shared/billing-shared.module.ts
index fb593b39328..12792cd781a 100644
--- a/apps/web/src/app/billing/shared/billing-shared.module.ts
+++ b/apps/web/src/app/billing/shared/billing-shared.module.ts
@@ -1,6 +1,7 @@
import { NgModule } from "@angular/core";
import { BannerModule } from "@bitwarden/components";
+import { DiscountBadgeComponent } from "@bitwarden/pricing";
import {
EnterBillingAddressComponent,
EnterPaymentMethodComponent,
@@ -28,6 +29,7 @@ import { UpdateLicenseComponent } from "./update-license.component";
BannerModule,
EnterPaymentMethodComponent,
EnterBillingAddressComponent,
+ DiscountBadgeComponent,
],
declarations: [
BillingHistoryComponent,
@@ -51,6 +53,7 @@ import { UpdateLicenseComponent } from "./update-license.component";
OffboardingSurveyComponent,
IndividualSelfHostingLicenseUploaderComponent,
OrganizationSelfHostingLicenseUploaderComponent,
+ DiscountBadgeComponent,
],
})
export class BillingSharedModule {}
diff --git a/apps/web/src/locales/en/messages.json b/apps/web/src/locales/en/messages.json
index 49e29f00748..27faf6f4063 100644
--- a/apps/web/src/locales/en/messages.json
+++ b/apps/web/src/locales/en/messages.json
@@ -3250,9 +3250,18 @@
"nextCharge": {
"message": "Next charge"
},
+ "nextChargeHeader": {
+ "message": "Next Charge"
+ },
+ "plan": {
+ "message": "Plan"
+ },
"details": {
"message": "Details"
},
+ "discount": {
+ "message": "discount"
+ },
"downloadLicense": {
"message": "Download license"
},
diff --git a/libs/common/src/billing/models/response/organization-subscription.response.ts b/libs/common/src/billing/models/response/organization-subscription.response.ts
index 6e56eda68c6..f5fdaaba9b2 100644
--- a/libs/common/src/billing/models/response/organization-subscription.response.ts
+++ b/libs/common/src/billing/models/response/organization-subscription.response.ts
@@ -40,6 +40,7 @@ export class BillingCustomerDiscount extends BaseResponse {
id: string;
active: boolean;
percentOff?: number;
+ amountOff?: number;
appliesTo: string[];
constructor(response: any) {
@@ -47,6 +48,7 @@ export class BillingCustomerDiscount extends BaseResponse {
this.id = this.getResponseProperty("Id");
this.active = this.getResponseProperty("Active");
this.percentOff = this.getResponseProperty("PercentOff");
- this.appliesTo = this.getResponseProperty("AppliesTo");
+ this.amountOff = this.getResponseProperty("AmountOff");
+ this.appliesTo = this.getResponseProperty("AppliesTo") || [];
}
}
diff --git a/libs/common/src/billing/models/response/subscription.response.ts b/libs/common/src/billing/models/response/subscription.response.ts
index 3bc7d42651c..01ace1ef10a 100644
--- a/libs/common/src/billing/models/response/subscription.response.ts
+++ b/libs/common/src/billing/models/response/subscription.response.ts
@@ -2,12 +2,15 @@
// @ts-strict-ignore
import { BaseResponse } from "../../../models/response/base.response";
+import { BillingCustomerDiscount } from "./organization-subscription.response";
+
export class SubscriptionResponse extends BaseResponse {
storageName: string;
storageGb: number;
maxStorageGb: number;
subscription: BillingSubscriptionResponse;
upcomingInvoice: BillingSubscriptionUpcomingInvoiceResponse;
+ customerDiscount: BillingCustomerDiscount;
license: any;
expiration: string;
@@ -20,11 +23,14 @@ export class SubscriptionResponse extends BaseResponse {
this.expiration = this.getResponseProperty("Expiration");
const subscription = this.getResponseProperty("Subscription");
const upcomingInvoice = this.getResponseProperty("UpcomingInvoice");
+ const customerDiscount = this.getResponseProperty("CustomerDiscount");
this.subscription = subscription == null ? null : new BillingSubscriptionResponse(subscription);
this.upcomingInvoice =
upcomingInvoice == null
? null
: new BillingSubscriptionUpcomingInvoiceResponse(upcomingInvoice);
+ this.customerDiscount =
+ customerDiscount == null ? null : new BillingCustomerDiscount(customerDiscount);
}
}
diff --git a/libs/common/src/enums/feature-flag.enum.ts b/libs/common/src/enums/feature-flag.enum.ts
index 2d071259aba..7d2d831bfb3 100644
--- a/libs/common/src/enums/feature-flag.enum.ts
+++ b/libs/common/src/enums/feature-flag.enum.ts
@@ -33,6 +33,7 @@ export enum FeatureFlag {
PM26793_FetchPremiumPriceFromPricingService = "pm-26793-fetch-premium-price-from-pricing-service",
PM23713_PremiumBadgeOpensNewPremiumUpgradeDialog = "pm-23713-premium-badge-opens-new-premium-upgrade-dialog",
PM26462_Milestone_3 = "pm-26462-milestone-3",
+ PM23341_Milestone_2 = "pm-23341-milestone-2",
/* Key Management */
PrivateKeyRegeneration = "pm-12241-private-key-regeneration",
@@ -129,6 +130,7 @@ export const DefaultFeatureFlagValue = {
[FeatureFlag.PM26793_FetchPremiumPriceFromPricingService]: FALSE,
[FeatureFlag.PM23713_PremiumBadgeOpensNewPremiumUpgradeDialog]: FALSE,
[FeatureFlag.PM26462_Milestone_3]: FALSE,
+ [FeatureFlag.PM23341_Milestone_2]: FALSE,
/* Key Management */
[FeatureFlag.PrivateKeyRegeneration]: FALSE,
diff --git a/libs/pricing/src/components/discount-badge/discount-badge.component.html b/libs/pricing/src/components/discount-badge/discount-badge.component.html
new file mode 100644
index 00000000000..e79fbabf355
--- /dev/null
+++ b/libs/pricing/src/components/discount-badge/discount-badge.component.html
@@ -0,0 +1,10 @@
+
+ {{ getDiscountText() }}
+
diff --git a/libs/pricing/src/components/discount-badge/discount-badge.component.mdx b/libs/pricing/src/components/discount-badge/discount-badge.component.mdx
new file mode 100644
index 00000000000..d3df2dcf0f6
--- /dev/null
+++ b/libs/pricing/src/components/discount-badge/discount-badge.component.mdx
@@ -0,0 +1,67 @@
+import { Meta, Story, Canvas } from "@storybook/addon-docs";
+import * as DiscountBadgeStories from "./discount-badge.component.stories";
+
+
+
+# Discount Badge
+
+A reusable UI component for displaying discount information (percentage or fixed amount) in a badge
+format.
+
+
+
+## Usage
+
+The discount badge component is designed to be used in billing and subscription interfaces to
+display discount information.
+
+```ts
+import { DiscountBadgeComponent, DiscountInfo } from "@bitwarden/pricing";
+```
+
+```html
+
+```
+
+## API
+
+### Inputs
+
+| Input | Type | Description |
+| ---------- | ---------------------- | -------------------------------------------------------------------------------- |
+| `discount` | `DiscountInfo \| null` | **Optional.** Discount information object. If null or inactive, badge is hidden. |
+
+### DiscountInfo Interface
+
+```ts
+interface DiscountInfo {
+ /** Whether the discount is currently active */
+ active: boolean;
+ /** Percentage discount (0-100 or 0-1 scale) */
+ percentOff?: number;
+ /** Fixed amount discount in the base currency */
+ amountOff?: number;
+}
+```
+
+## Behavior
+
+- The badge is only displayed when `discount` is provided, `active` is `true`, and either
+ `percentOff` or `amountOff` is greater than 0.
+- If both `percentOff` and `amountOff` are provided, `percentOff` takes precedence.
+- Percentage values can be provided as 0-100 (e.g., `20` for 20%) or 0-1 (e.g., `0.2` for 20%).
+- Amount values are formatted as currency (USD) with 2 decimal places.
+
+## Examples
+
+### Percentage Discount
+
+
+
+### Amount Discount
+
+
+
+### Inactive Discount
+
+
diff --git a/libs/pricing/src/components/discount-badge/discount-badge.component.spec.ts b/libs/pricing/src/components/discount-badge/discount-badge.component.spec.ts
new file mode 100644
index 00000000000..8ccfc5e5d8b
--- /dev/null
+++ b/libs/pricing/src/components/discount-badge/discount-badge.component.spec.ts
@@ -0,0 +1,108 @@
+import { ComponentFixture, TestBed } from "@angular/core/testing";
+
+import { I18nService } from "@bitwarden/common/platform/abstractions/i18n.service";
+
+import { DiscountBadgeComponent } from "./discount-badge.component";
+
+describe("DiscountBadgeComponent", () => {
+ let component: DiscountBadgeComponent;
+ let fixture: ComponentFixture;
+
+ beforeEach(async () => {
+ await TestBed.configureTestingModule({
+ imports: [DiscountBadgeComponent],
+ providers: [
+ {
+ provide: I18nService,
+ useValue: {
+ t: (key: string) => key,
+ },
+ },
+ ],
+ }).compileComponents();
+
+ fixture = TestBed.createComponent(DiscountBadgeComponent);
+ component = fixture.componentInstance;
+ });
+
+ it("should create", () => {
+ expect(component).toBeTruthy();
+ });
+
+ describe("hasDiscount", () => {
+ it("should return false when discount is null", () => {
+ fixture.componentRef.setInput("discount", null);
+ fixture.detectChanges();
+ expect(component.hasDiscount()).toBe(false);
+ });
+
+ it("should return false when discount is inactive", () => {
+ fixture.componentRef.setInput("discount", { active: false, percentOff: 20 });
+ fixture.detectChanges();
+ expect(component.hasDiscount()).toBe(false);
+ });
+
+ it("should return true when discount is active with percentOff", () => {
+ fixture.componentRef.setInput("discount", { active: true, percentOff: 20 });
+ fixture.detectChanges();
+ expect(component.hasDiscount()).toBe(true);
+ });
+
+ it("should return true when discount is active with amountOff", () => {
+ fixture.componentRef.setInput("discount", { active: true, amountOff: 10.99 });
+ fixture.detectChanges();
+ expect(component.hasDiscount()).toBe(true);
+ });
+
+ it("should return false when percentOff is 0", () => {
+ fixture.componentRef.setInput("discount", { active: true, percentOff: 0 });
+ fixture.detectChanges();
+ expect(component.hasDiscount()).toBe(false);
+ });
+
+ it("should return false when amountOff is 0", () => {
+ fixture.componentRef.setInput("discount", { active: true, amountOff: 0 });
+ fixture.detectChanges();
+ expect(component.hasDiscount()).toBe(false);
+ });
+ });
+
+ describe("getDiscountText", () => {
+ it("should return null when discount is null", () => {
+ fixture.componentRef.setInput("discount", null);
+ fixture.detectChanges();
+ expect(component.getDiscountText()).toBeNull();
+ });
+
+ it("should return percentage text when percentOff is provided", () => {
+ fixture.componentRef.setInput("discount", { active: true, percentOff: 20 });
+ fixture.detectChanges();
+ const text = component.getDiscountText();
+ expect(text).toContain("20%");
+ expect(text).toContain("discount");
+ });
+
+ it("should convert decimal percentOff to percentage", () => {
+ fixture.componentRef.setInput("discount", { active: true, percentOff: 0.15 });
+ fixture.detectChanges();
+ const text = component.getDiscountText();
+ expect(text).toContain("15%");
+ });
+
+ it("should return amount text when amountOff is provided", () => {
+ fixture.componentRef.setInput("discount", { active: true, amountOff: 10.99 });
+ fixture.detectChanges();
+ const text = component.getDiscountText();
+ expect(text).toContain("$10.99");
+ expect(text).toContain("discount");
+ });
+
+ it("should prefer percentOff over amountOff", () => {
+ fixture.componentRef.setInput("discount", { active: true, percentOff: 25, amountOff: 10.99 });
+ fixture.detectChanges();
+ const text = component.getDiscountText();
+ expect(text).toContain("25%");
+ expect(text).not.toContain("$10.99");
+ });
+ });
+});
diff --git a/libs/pricing/src/components/discount-badge/discount-badge.component.stories.ts b/libs/pricing/src/components/discount-badge/discount-badge.component.stories.ts
new file mode 100644
index 00000000000..02631a6b940
--- /dev/null
+++ b/libs/pricing/src/components/discount-badge/discount-badge.component.stories.ts
@@ -0,0 +1,123 @@
+import { Meta, moduleMetadata, StoryObj } from "@storybook/angular";
+
+import { I18nService } from "@bitwarden/common/platform/abstractions/i18n.service";
+import { BadgeModule } from "@bitwarden/components";
+
+import { DiscountBadgeComponent, DiscountInfo } from "./discount-badge.component";
+
+export default {
+ title: "Billing/Discount Badge",
+ component: DiscountBadgeComponent,
+ description: "A badge component that displays discount information (percentage or fixed amount).",
+ decorators: [
+ moduleMetadata({
+ imports: [BadgeModule],
+ providers: [
+ {
+ provide: I18nService,
+ useValue: {
+ t: (key: string) => {
+ switch (key) {
+ case "discount":
+ return "discount";
+ default:
+ return key;
+ }
+ },
+ },
+ },
+ ],
+ }),
+ ],
+} as Meta;
+
+type Story = StoryObj;
+
+export const PercentDiscount: Story = {
+ render: (args) => ({
+ props: args,
+ template: ``,
+ }),
+ args: {
+ discount: {
+ active: true,
+ percentOff: 20,
+ } as DiscountInfo,
+ },
+};
+
+export const PercentDiscountDecimal: Story = {
+ render: (args) => ({
+ props: args,
+ template: ``,
+ }),
+ args: {
+ discount: {
+ active: true,
+ percentOff: 0.15, // 15% in decimal format
+ } as DiscountInfo,
+ },
+};
+
+export const AmountDiscount: Story = {
+ render: (args) => ({
+ props: args,
+ template: ``,
+ }),
+ args: {
+ discount: {
+ active: true,
+ amountOff: 10.99,
+ } as DiscountInfo,
+ },
+};
+
+export const LargeAmountDiscount: Story = {
+ render: (args) => ({
+ props: args,
+ template: ``,
+ }),
+ args: {
+ discount: {
+ active: true,
+ amountOff: 99.99,
+ } as DiscountInfo,
+ },
+};
+
+export const InactiveDiscount: Story = {
+ render: (args) => ({
+ props: args,
+ template: ``,
+ }),
+ args: {
+ discount: {
+ active: false,
+ percentOff: 20,
+ } as DiscountInfo,
+ },
+};
+
+export const NoDiscount: Story = {
+ render: (args) => ({
+ props: args,
+ template: ``,
+ }),
+ args: {
+ discount: null,
+ },
+};
+
+export const PercentAndAmountPreferPercent: Story = {
+ render: (args) => ({
+ props: args,
+ template: ``,
+ }),
+ args: {
+ discount: {
+ active: true,
+ percentOff: 25,
+ amountOff: 10.99,
+ } as DiscountInfo,
+ },
+};
diff --git a/libs/pricing/src/components/discount-badge/discount-badge.component.ts b/libs/pricing/src/components/discount-badge/discount-badge.component.ts
new file mode 100644
index 00000000000..6057a4573e9
--- /dev/null
+++ b/libs/pricing/src/components/discount-badge/discount-badge.component.ts
@@ -0,0 +1,70 @@
+import { CommonModule } from "@angular/common";
+import { ChangeDetectionStrategy, Component, inject, input } from "@angular/core";
+
+import { I18nService } from "@bitwarden/common/platform/abstractions/i18n.service";
+import { BadgeModule } from "@bitwarden/components";
+
+/**
+ * Interface for discount information that can be displayed in the discount badge.
+ * This is abstracted from the response class to avoid tight coupling.
+ */
+export interface DiscountInfo {
+ /** Whether the discount is currently active */
+ active: boolean;
+ /** Percentage discount (0-100 or 0-1 scale) */
+ percentOff?: number;
+ /** Fixed amount discount in the base currency */
+ amountOff?: number;
+}
+
+@Component({
+ selector: "billing-discount-badge",
+ templateUrl: "./discount-badge.component.html",
+ standalone: true,
+ imports: [CommonModule, BadgeModule],
+ changeDetection: ChangeDetectionStrategy.OnPush,
+})
+export class DiscountBadgeComponent {
+ readonly discount = input(null);
+
+ private i18nService = inject(I18nService);
+
+ getDiscountText(): string | null {
+ const discount = this.discount();
+ if (!discount) {
+ return null;
+ }
+
+ if (discount.percentOff != null && discount.percentOff > 0) {
+ const percentValue =
+ discount.percentOff < 1 ? discount.percentOff * 100 : discount.percentOff;
+ return `${Math.round(percentValue)}% ${this.i18nService.t("discount")}`;
+ }
+
+ if (discount.amountOff != null && discount.amountOff > 0) {
+ const formattedAmount = new Intl.NumberFormat("en-US", {
+ style: "currency",
+ currency: "USD",
+ minimumFractionDigits: 2,
+ maximumFractionDigits: 2,
+ }).format(discount.amountOff);
+ return `${formattedAmount} ${this.i18nService.t("discount")}`;
+ }
+
+ return null;
+ }
+
+ hasDiscount(): boolean {
+ const discount = this.discount();
+ if (!discount) {
+ return false;
+ }
+ if (!discount.active) {
+ return false;
+ }
+ return (
+ (discount.percentOff != null && discount.percentOff > 0) ||
+ (discount.amountOff != null && discount.amountOff > 0)
+ );
+ }
+}
diff --git a/libs/pricing/src/index.ts b/libs/pricing/src/index.ts
index d7c7772bfcb..3405044529e 100644
--- a/libs/pricing/src/index.ts
+++ b/libs/pricing/src/index.ts
@@ -1,3 +1,4 @@
// Components
export * from "./components/pricing-card/pricing-card.component";
export * from "./components/cart-summary/cart-summary.component";
+export * from "./components/discount-badge/discount-badge.component";
From 828fdbd169334208ba3f01a4b5ee18c3d3331c40 Mon Sep 17 00:00:00 2001
From: Oscar Hinton
Date: Wed, 12 Nov 2025 21:27:14 +0100
Subject: [PATCH 08/14] [CL-905] Migrate CL/Badge to OnPush (#16959)
---
.../src/badge-list/badge-list.component.html | 8 +-
.../src/badge-list/badge-list.component.ts | 52 +++++++---
libs/components/src/badge/badge.component.ts | 98 +++++++++++--------
3 files changed, 97 insertions(+), 61 deletions(-)
diff --git a/libs/components/src/badge-list/badge-list.component.html b/libs/components/src/badge-list/badge-list.component.html
index 18365cba268..d976b2d2cc4 100644
--- a/libs/components/src/badge-list/badge-list.component.html
+++ b/libs/components/src/badge-list/badge-list.component.html
@@ -1,15 +1,15 @@
- @for (item of filteredItems; track item; let last = $last) {
+ @for (item of filteredItems(); track item; let last = $last) {
{{ item }}
- @if (!last || isFiltered) {
+ @if (!last || isFiltered()) {
,
}
}
- @if (isFiltered) {
+ @if (isFiltered()) {
- {{ "plusNMore" | i18n: (items().length - filteredItems.length).toString() }}
+ {{ "plusNMore" | i18n: (items().length - filteredItems().length).toString() }}
}
diff --git a/libs/components/src/badge-list/badge-list.component.ts b/libs/components/src/badge-list/badge-list.component.ts
index e3d1403be43..a5b306c12fc 100644
--- a/libs/components/src/badge-list/badge-list.component.ts
+++ b/libs/components/src/badge-list/badge-list.component.ts
@@ -1,38 +1,60 @@
-import { Component, OnChanges, input } from "@angular/core";
+import { ChangeDetectionStrategy, Component, computed, input } from "@angular/core";
import { I18nPipe } from "@bitwarden/ui-common";
import { BadgeModule, BadgeVariant } from "../badge";
function transformMaxItems(value: number | undefined) {
- return value == undefined ? undefined : Math.max(1, value);
+ return value == null ? undefined : Math.max(1, value);
}
-// FIXME(https://bitwarden.atlassian.net/browse/CL-764): Migrate to OnPush
-// eslint-disable-next-line @angular-eslint/prefer-on-push-component-change-detection
+/**
+ * Displays a collection of badges in a horizontal, wrapping layout.
+ *
+ * The component automatically handles overflow by showing a limited number of badges
+ * followed by a "+N more" badge when `maxItems` is specified and exceeded.
+ *
+ * Each badge inherits the `variant` and `truncate` settings, ensuring visual consistency
+ * across the list. Badges are separated by commas for screen readers to improve accessibility.
+ */
@Component({
selector: "bit-badge-list",
templateUrl: "badge-list.component.html",
imports: [BadgeModule, I18nPipe],
+ changeDetection: ChangeDetectionStrategy.OnPush,
})
-export class BadgeListComponent implements OnChanges {
- protected filteredItems: string[] = [];
- protected isFiltered = false;
-
+export class BadgeListComponent {
+ /**
+ * The visual variant to apply to all badges in the list.
+ */
readonly variant = input("primary");
+
+ /**
+ * Items to display as badges.
+ */
readonly items = input([]);
+
+ /**
+ * Whether to truncate long badge text with ellipsis.
+ */
readonly truncate = input(true);
+ /**
+ * Maximum number of badges to display before showing a "+N more" badge.
+ */
readonly maxItems = input(undefined, { transform: transformMaxItems });
- ngOnChanges() {
+ protected readonly filteredItems = computed(() => {
const maxItems = this.maxItems();
+ const items = this.items();
- if (maxItems == undefined || this.items().length <= maxItems) {
- this.filteredItems = this.items();
- } else {
- this.filteredItems = this.items().slice(0, maxItems - 1);
+ if (maxItems == null || items.length <= maxItems) {
+ return items;
}
- this.isFiltered = this.items().length > this.filteredItems.length;
- }
+ return items.slice(0, maxItems - 1);
+ });
+
+ protected readonly isFiltered = computed(() => {
+ return this.items().length > this.filteredItems().length;
+ });
}
diff --git a/libs/components/src/badge/badge.component.ts b/libs/components/src/badge/badge.component.ts
index 8a953b30226..55d7b719ccd 100644
--- a/libs/components/src/badge/badge.component.ts
+++ b/libs/components/src/badge/badge.component.ts
@@ -1,5 +1,12 @@
import { CommonModule } from "@angular/common";
-import { Component, ElementRef, HostBinding, input } from "@angular/core";
+import {
+ ChangeDetectionStrategy,
+ Component,
+ computed,
+ ElementRef,
+ inject,
+ input,
+} from "@angular/core";
import { FocusableElement } from "../shared/focusable-element";
@@ -44,27 +51,56 @@ const hoverStyles: Record = {
],
};
/**
- * Badges are primarily used as labels, counters, and small buttons.
-
- * Typically Badges are only used with text set to `text-xs`. If additional sizes are needed, the component configurations may be reviewed and adjusted.
-
- * The Badge directive can be used on a `` (non clickable events), or an `` or `