[PM-24032] - adds a new upgrade plan button to side nav

[kdenney]

🎟️ Tracking

https://bitwarden.atlassian.net/browse/PM-24032

📔 Objective

Adds a new upgrade plan button to the side nav of web vault. The button opens the new upgrade dialog. The upgrade dialog includes new customization including a new title for this flow as well as an info message on the payment screen if the user chose the families plan but has a free org already.

This PR also includes a change requested by design/product to not show the product switcher in the left nav if the user only has access to one product.

Finally, this required adding a new icon to the icon font so those changes are included and team UIF are attached to this PR to review.

📸 Screenshots

Here are several screenshots showing different states of the side nav, depending on who is logged in. Refer to the figma here to compare designs to the screenshots and see all of the tested scenarios available.

Free user with no org:

Free user with free org:

Free user with free org dark mode:

Member of paid org with secrets manager access:

Member of paid org without secrets manager access:

Owner of paid org with secrets manager:

Premium user with no org:

Screenshot of the edge case families with free org info message:

Here is a video showing the hover and focus states:
https://github.com/user-attachments/assets/aa782f03-d1ac-4d39-bc75-e6183ca4d1f4

Here is a video showing the process of signing up for premium:
https://github.com/user-attachments/assets/0dec99d1-b94e-4553-bbcc-f461371e7eb2

⏰ 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]

Checkmarx One – Scan Summary & Details – 278c45c4-2b06-4a08-9845-a4cb3530dbff

Great job! No new security vulnerabilities introduced in this pull request

[codecov]

Codecov Report

❌ Patch coverage is 61.53846% with 30 lines in your changes missing coverage. Please review.
✅ Project coverage is 38.97%. Comparing base (8a76b28) to head (1c1b50e).
⚠️ Report is 11 commits behind head on main.

Files with missing lines	Patch %	Lines
...n/upgrade-nav-button/upgrade-nav-button.stories.ts	0.00%	11 Missing ⚠️
...upgrade-nav-button/upgrade-nav-button.component.ts	46.66%	8 Missing ⚠️
...navigation-switcher/navigation-switcher.stories.ts	0.00%	4 Missing ⚠️
...youts/product-switcher/product-switcher.stories.ts	0.00%	4 Missing ⚠️
...grade/upgrade-payment/upgrade-payment.component.ts	0.00%	2 Missing ⚠️
.../src/app/vault/individual-vault/vault.component.ts	0.00%	1 Missing ⚠️

Additional details and impacted files

@@            Coverage Diff             @@
##             main   #16687      +/-   ##
==========================================
+ Coverage   38.94%   38.97%   +0.02%     
==========================================
  Files        3437     3439       +2     
  Lines       97510    97585      +75     
  Branches    14666    14671       +5     
==========================================
+ Hits        37977    38033      +56     
- Misses      57874    57893      +19     
  Partials     1659     1659              

☔ 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.

[amorask-bitwarden]

Looks great, awesome work.

[gbubemismith]

LGTM! Vault changes are minimal

[vleague2]

Couple of thoughts! Looking at the Chromatic diffs, I see that the Navigation Product Switcher: Only PM story has a diff that looks unexpected to me.

[danielleflinn]

I see that the Navigation Product Switcher: Only PM story has a diff that looks unexpected to me.

@vleague2 I think you are referring to the fact the "PM" product is not showing any more in the switcher. I can confirm this is expected so I approved the Chromatic PR. (We removed it since it is duplicative of the logo when it is on its own. This will also allow the "Upgrade" button to stand out a bit more).

[sonarqubecloud]

Quality Gate passed

Issues
0 New issues
0 Accepted issues

Measures
0 Security Hotspots
0.0% Coverage on New Code
8.1% Duplication on New Code

See analysis details on SonarQube Cloud