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 `