[PM-24722][PM-27695] - add persistent callout in settings for non-premium users #17246

jaasen-livefront · 2025-11-05T23:47:59Z

🎟️ Tracking

https://bitwarden.atlassian.net/browse/PM-24722
https://bitwarden.atlassian.net/browse/PM-27695

📔 Objective

This PR does the following:

introduces a new callout at the top of the browser extension settings for non-premium users with a link to upgrade to premium
removes premium upgrade link from the "More from Bitwarden" page
adds missing specs for the settings-v2.compoent

📸 Screenshots

Screen.Recording.2025-11-06.at.1.08.33.PM.mov

⏰ Reminders before review

Contributor guidelines followed
All formatters and local linters executed and passed
Written new unit and / or integration tests where applicable
Protected functional changes with optionality (feature flags)
Used internationalization (i18n) for all UI strings
CI builds passed
Communicated to DevOps any deployment requirements
Updated any necessary documentation (Confluence, contributing docs) or informed the documentation team

🦮 Reviewer guidelines

👍 (:+1:) or similar for great changes
📝 (:memo:) or ℹ️ (:information_source:) for notes or general info
❓ (:question:) for questions
🤔 (:thinking:) or 💭 (:thought_balloon:) for more open inquiry that's not quite a confirmed issue and could potentially benefit from discussion
🎨 (:art:) for suggestions / improvements
❌ (:x:) or ⚠️ (:warning:) for more significant problems or concerns needing attention
🌱 (:seedling:) or ♻️ (:recycle:) for future improvements or indications of technical debt
⛏ (:pick:) for minor or nitpick changes

github-actions · 2025-11-05T23:57:53Z

Checkmarx One – Scan Summary & Details – 292c2754-ad18-44ab-a8c2-2397d34bce58

New Issues (2)

Checkmarx found the following issues in this Pull Request

Severity	Issue	Source File / Package	Checkmarx Insight
	CVE-2025-62595	Npm-koa-2.16.1	details Recommended version: 2.16.3 Description: Koa is expressive middleware for Node.js using ES2017 async functions. A bypass to CVE-2025-8129 was discovered in the "Koa.js" framework, affectin... Attack Vector: NETWORK Attack Complexity: LOW `ID: EoO%2Fqyhpcjo1V0NpZPuVQWMeXvY8FM%2BdJGrqWkOrn38%3D` Vulnerable Package
	CVE-2025-8129	Npm-koa-2.16.1	details Recommended version: 2.16.3 Description: A vulnerability, which was classified as problematic, was found in KoaJS Koa versions through 2.16.1 and versions 3.0.0-alpha0 through 3.0.0. Affec... Attack Vector: NETWORK Attack Complexity: LOW `ID: wHQXKcaCnpYjnt%2Bkw%2BjeO66bllnR%2FQ8RiSlkqZuC%2B8Y%3D` Vulnerable Package

codecov · 2025-11-05T23:58:44Z

Codecov Report

✅ All modified and coverable lines are covered by tests.
✅ Project coverage is 40.82%. Comparing base (4bf90b0) to head (9b554ec).
⚠️ Report is 65 commits behind head on main.
✅ All tests successful. No failed tests found.

Additional details and impacted files

@@            Coverage Diff             @@
##             main   #17246      +/-   ##
==========================================
+ Coverage   40.51%   40.82%   +0.31%     
==========================================
  Files        3531     3542      +11     
  Lines      100931   101492     +561     
  Branches    15092    15219     +127     
==========================================
+ Hits        40897    41439     +542     
+ Misses      58314    58302      -12     
- Partials     1720     1751      +31

☔ View full report in Codecov by Sentry.
📢 Have feedback on the report? Share it here.

🚀 New features to boost your workflow:

📦 JS Bundle Analysis: Save yourself from yourself by tracking and limiting bundle sizes in JS merges.

reneelund08 · 2025-11-06T19:17:27Z

This looks good to me!

theMickster · 2025-11-07T10:04:21Z

@claude: Review this PR

libs/angular/src/vault/components/spotlight/spotlight.component.ts

gbubemismith · 2025-11-07T16:55:08Z

libs/angular/src/vault/components/spotlight/spotlight.component.ts

  selector: "bit-spotlight",
  templateUrl: "spotlight.component.html",
  imports: [ButtonModule, CommonModule, IconButtonModule, I18nPipe, TypographyModule],
+  changeDetection: ChangeDetectionStrategy.OnPush,


❓ did you notice any weirdness in the browser extension after making this change?

@gbubemismith Seems to be working as expected.

gbubemismith · 2025-11-07T16:55:50Z

Looks like to have some conflicts

claude · 2025-11-07T18:52:24Z

Claude encountered an error —— View job

I'll analyze this and get back to you.

libs/angular/src/vault/components/spotlight/spotlight.component.ts

libs/angular/src/vault/components/spotlight/spotlight.component.html

cyprain-okeke · 2025-11-10T11:10:38Z

apps/browser/src/billing/popup/settings/premium-v2.component.ts

What was the rationale for removing the separate premium component in favor of the inline spotlight callout?
Are there any other components or services that depend on or reference premium-v2.component?
Just want to make sure we're not missing any cleanup or migration steps for this component removal.

@cyprain-okeke Thanks for pointing this out. Looks like we have plans to remove this but it's still behind a feature flag. I've re-implemented the premium component for now.
b68cd34

apps/browser/src/tools/popup/settings/settings-v2.component.ts

apps/browser/src/tools/popup/settings/settings-v2.component.html

cyprain-okeke

Approved

Hinton · 2025-11-13T10:39:59Z

apps/browser/src/tools/popup/settings/settings-v2.component.html

+    <span class="tw-text-xs"
+      >{{ "unlockFeaturesWithPremium" | i18n }}
+      <button
+        bitLink
+        buttonType="primary"
+        class="!tw-no-underline tw-text-xs !tw-font-semibold"
+        type="button"
+        (click)="openUpgradeDialog()"
+        [title]="'upgradeNow' | i18n"
+      >
+        {{ "upgradeNow" | i18n }}
+      </button></span
+    >


Suggested change

<span class="tw-text-xs"

>{{ "unlockFeaturesWithPremium" | i18n }}

<button

bitLink

buttonType="primary"

class="!tw-no-underline tw-text-xs !tw-font-semibold"

type="button"

(click)="openUpgradeDialog()"

[title]="'upgradeNow' | i18n"

>

{{ "upgradeNow" | i18n }}

</button></span

>

<span class="tw-text-xs">

{{ "unlockFeaturesWithPremium" | i18n }}

<button

bitLink

buttonType="primary"

class="!tw-no-underline tw-text-xs !tw-font-semibold"

type="button"

(click)="openUpgradeDialog()"

[title]="'upgradeNow' | i18n"

>

{{ "upgradeNow" | i18n }}

</button>

</span>

fixed 8e02693

Hinton · 2025-11-13T10:42:57Z

libs/angular/src/vault/components/spotlight/spotlight.component.ts

-  @Input() persistent = false;
+  readonly buttonText = input<string | null>(null);
+  // Whether the component can be dismissed, if true, the component will not show a close button
+  readonly persistent = input(false);


suggestion: If you use input(false, { transform: booleanAttribute }); it works similar to the native disabled attribute, i.e. rather than having to do <bit-spotlight [persistent]="true" you can just write <bit-spotlight persistent.

@Hinton Ah yes ofc, thanks!. Fixed 8e02693

libs/angular/src/vault/components/spotlight/spotlight.component.ts

cyprain-okeke

No billing file was changes

Hinton

Approved, but consider resolving the comments since they introduce tech debt.

Hinton · 2025-11-20T10:28:24Z

libs/angular/src/vault/components/spotlight/spotlight.component.ts

-  // FIXME(https://bitwarden.atlassian.net/browse/CL-903): Migrate to Signals
-  // eslint-disable-next-line @angular-eslint/prefer-signals
-  @Input({ required: true }) title: string | null = null;
+  readonly title = input<string | null>(null);


Just an FYI, but this title is now string | null | undefined. Do you actually use the null case, or could all of these be simplified to input<string> which is string | undefined.

Yeah I think we can remove null for all these inputs. c861772

Hinton · 2025-11-20T10:30:48Z

apps/browser/src/vault/popup/settings/more-from-bitwarden-page-v2.component.html

suggestion: We can clean up the canAccessPremium$ from the ts file, which also lets you cleanup billingAccountProfileStateService.

Nice catch! Fixed c861772

Hinton · 2025-11-20T10:35:32Z

apps/browser/src/tools/popup/settings/settings-v2.component.ts

+    return await this.autofillBrowserSettingsService.isBrowserAutofillSettingOverridden(
+      BrowserApi.getBrowserClientVendor(window),
+    );
+  }).pipe(shareReplay({ bufferSize: 1, refCount: true }));


question: What's up with defer and shareReplay({ bufferSize: 1, refCount: true })?

I don't think defer gains us anything here over from, and this observable should only be subscribed once in the template.

Agreed this is probably overkill. Fixed c861772

Hinton · 2025-11-20T10:49:33Z

apps/browser/src/tools/popup/settings/settings-v2.component.ts

-      await this.autofillBrowserSettingsService.isBrowserAutofillSettingOverridden(
-        BrowserApi.getBrowserClientVendor(window),
-      );
+  openUpgradeDialog() {


I would have preferred that this be protected, but I assume it's public for test reasons?

It does make testing simpler but we can easily just call component["openUpgradeDialog"]();. Fixed c861772

add persistent callout in settings for non-premium users

d206832

jaasen-livefront changed the title ~~[PM-24722] - add persistent callout in settings for non-premium users~~ [PM-24722][PM-27695] - add persistent callout in settings for non-premium users Nov 6, 2025

jaasen-livefront marked this pull request as ready for review November 6, 2025 21:09

jaasen-livefront requested review from a team as code owners November 6, 2025 21:09

jaasen-livefront requested a review from gbubemismith November 6, 2025 21:09

remove premium v2 component

cf980cd

jaasen-livefront requested a review from a team as a code owner November 6, 2025 21:09

jaasen-livefront requested a review from cyprain-okeke November 6, 2025 21:09

add spec

0608582

bitwarden deleted a comment from claude bot Nov 7, 2025

gbubemismith previously approved these changes Nov 7, 2025

View reviewed changes

gbubemismith self-requested a review November 7, 2025 16:55

Merge branch 'main' into PM-24722

61bd90a

jaasen-livefront dismissed gbubemismith’s stale review via 61bd90a November 7, 2025 18:50

remove premium-v2.component.html

77b8bed

claude bot reviewed Nov 7, 2025

View reviewed changes

libs/angular/src/vault/components/spotlight/spotlight.component.ts Outdated Show resolved Hide resolved

claude bot reviewed Nov 7, 2025

View reviewed changes

libs/angular/src/vault/components/spotlight/spotlight.component.ts Outdated Show resolved Hide resolved

jaasen-livefront added 2 commits November 7, 2025 10:58

fix title

9f5ab21

fix typo

cbf40c1

claude bot reviewed Nov 7, 2025

View reviewed changes

libs/angular/src/vault/components/spotlight/spotlight.component.html Outdated Show resolved Hide resolved

conditionally render h2

ba7767a

cyprain-okeke reviewed Nov 10, 2025

View reviewed changes

Hinton requested changes Nov 10, 2025

View reviewed changes

apps/browser/src/tools/popup/settings/settings-v2.component.ts Show resolved Hide resolved

apps/browser/src/tools/popup/settings/settings-v2.component.html Outdated Show resolved Hide resolved

jaasen-livefront added 2 commits November 10, 2025 14:57

re-add pemiumv2component. change class prop to observable

b68cd34

change from bold to semibold

362c615

jaasen-livefront requested review from Hinton and cyprain-okeke November 11, 2025 17:33

cyprain-okeke previously approved these changes Nov 13, 2025

View reviewed changes

Hinton reviewed Nov 13, 2025

View reviewed changes

remove unecessary tw classes. use transform: booleanAttribute

8e02693

jaasen-livefront dismissed cyprain-okeke’s stale review via 8e02693 November 13, 2025 17:50

jaasen-livefront requested a review from Hinton November 13, 2025 17:50

claude bot reviewed Nov 13, 2025

View reviewed changes

libs/angular/src/vault/components/spotlight/spotlight.component.ts Show resolved Hide resolved

add spotlight specs

9b554ec

jaasen-livefront requested review from cyprain-okeke and vleague2 November 17, 2025 20:08

vleague2 previously approved these changes Nov 18, 2025

View reviewed changes

cyprain-okeke reviewed Nov 19, 2025

View reviewed changes

gbubemismith previously approved these changes Nov 19, 2025

View reviewed changes

Hinton previously approved these changes Nov 20, 2025

View reviewed changes

code cleanup

c861772

jaasen-livefront dismissed stale reviews from Hinton, gbubemismith, and vleague2 via c861772 November 21, 2025 20:34

jaasen-livefront requested review from Hinton, cyprain-okeke, gbubemismith and vleague2 November 21, 2025 20:36

[PM-24722][PM-27695] - add persistent callout in settings for non-premium users #17246

Are you sure you want to change the base?

[PM-24722][PM-27695] - add persistent callout in settings for non-premium users #17246

Conversation

jaasen-livefront commented Nov 5, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

🎟️ Tracking

📔 Objective

📸 Screenshots

⏰ Reminders before review

🦮 Reviewer guidelines

Uh oh!

github-actions bot commented Nov 5, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

codecov bot commented Nov 5, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Codecov Report

Uh oh!

reneelund08 commented Nov 6, 2025

Uh oh!

theMickster commented Nov 7, 2025

Uh oh!

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

gbubemismith commented Nov 7, 2025

Uh oh!

claude bot commented Nov 7, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Uh oh!

Uh oh!

cyprain-okeke left a comment

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Hinton Nov 13, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Uh oh!

cyprain-okeke left a comment

Choose a reason for hiding this comment

Uh oh!

Hinton left a comment

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Reviewers

Assignees

jaasen-livefront commented Nov 5, 2025 •

edited

Loading

github-actions bot commented Nov 5, 2025 •

edited

Loading

codecov bot commented Nov 5, 2025 •

edited

Loading

claude bot commented Nov 7, 2025 •

edited

Loading

Hinton Nov 13, 2025 •

edited

Loading