[PM-7076] Create settings-v2.component #9213

djsmith85 · 2024-05-16T15:54:35Z

Type of change

- [ ] Bug fix
- [X] New feature development
- [ ] Tech debt (refactoring, code cleanup, dependency upgrades, etc)
- [ ] Build/deploy pipeline (DevOps)
- [ ] Other

Objective

Create new settings page using popup-page & popup-header and bit-item for the extension UI refresh.

Code changes

apps/browser/src/tools/popup/settings/settings-v2.component.html:
and apps/browser/src/tools/popup/settings/settings-v2.component.ts: Create new settings page
apps/browser/src/popup/app-routing.module.ts: Add routing based on extension refresh flag

Screenshots

Before

After

The underlines seen on the screenshot are a styling issue which will be resolved with [CL-289] fix text decoration in CL button and item-content #9219 and unrelated to these code-changes.

Before you submit

Please add unit tests where it makes sense to do so (encouraged but not required)
If this change requires a documentation update - notify the documentation team
If this change has particular deployment requirements - notify the DevOps team
Ensure that all UI additions follow WCAG AA requirements

Create new settings page Add routing based on extension refresh flag

codecov · 2024-05-16T16:01:13Z

Codecov Report

Attention: Patch coverage is 0% with 11 lines in your changes are missing coverage. Please review.

Project coverage is 28.09%. Comparing base (9db2495) to head (cfc4efa).

Files	Patch %	Lines
.../src/tools/popup/settings/settings-v2.component.ts	0.00%	10 Missing ⚠️
apps/browser/src/popup/app-routing.module.ts	0.00%	1 Missing ⚠️

Additional details and impacted files

@@            Coverage Diff             @@
##             main    #9213      +/-   ##
==========================================
- Coverage   28.09%   28.09%   -0.01%     
==========================================
  Files        2435     2436       +1     
  Lines       70504    70515      +11     
  Branches    13135    13135              
==========================================
  Hits        19811    19811              
- Misses      49154    49165      +11     
  Partials     1539     1539

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

github-actions · 2024-05-16T16:18:23Z

Checkmarx One – Scan Summary & Details – c73611fb-090e-42f7-8c18-24bfc19db711

Fixed Issues

Severity	Issue	Source File / Package
	Client_DOM_Code_Injection	/apps/web/src/connectors/common.ts: 2
	Client_DOM_Code_Injection	/apps/browser/src/autofill/services/collect-autofill-content.service.ts: 1054
	Client_DOM_Stored_XSS	/apps/web/src/connectors/sso.ts: 33
	Client_DOM_XSS	/apps/browser/src/auth/scripts/duo.js: 285
	Client_DOM_XSS	/apps/browser/src/auth/scripts/duo.js: 285
	Client_DOM_XSS	/apps/desktop/src/auth/scripts/duo.js: 285
	Client_DOM_XSS	/apps/desktop/src/auth/scripts/duo.js: 285
	Client_DOM_XSS	/apps/web/src/connectors/common.ts: 2
	Client_DOM_XSS	/apps/web/src/connectors/common.ts: 2
	Client_DOM_XSS	/apps/web/src/connectors/common.ts: 2
	Client_DOM_XSS	/apps/web/src/connectors/common.ts: 2
	Client_DOM_XSS	/apps/web/src/connectors/sso.ts: 21
	Client_DOM_XSS	/apps/web/src/connectors/sso.ts: 19
	Client_DOM_XSS	/apps/web/src/connectors/sso.ts: 15
	Absolute_Path_Traversal	/apps/cli/src/commands/serve.command.ts: 347
	Absolute_Path_Traversal	/apps/cli/src/commands/serve.command.ts: 315
	Absolute_Path_Traversal	/apps/cli/src/commands/serve.command.ts: 347
	Absolute_Path_Traversal	/apps/cli/src/commands/serve.command.ts: 315
	Angular_Improper_Type_Pipe_Usage	/apps/browser/src/vault/popup/components/fido2/fido2-use-browser-link.component.html: 1
	Client_Privacy_Violation	/apps/browser/src/background/runtime.background.ts: 308
	Client_Privacy_Violation	/apps/web/src/app/tools/reports/pages/breach-report.component.html: 14
	Client_Privacy_Violation	/apps/browser/src/auth/popup/account-switching/account.component.ts: 12
	Client_Privacy_Violation	/apps/browser/src/auth/popup/account-switching/account.component.ts: 12
	Client_Privacy_Violation	/apps/browser/src/auth/popup/account-switching/account.component.ts: 12
	Client_Privacy_Violation	/libs/components/src/color-password/color-password.component.ts: 25
	Client_Privacy_Violation	/libs/components/src/color-password/color-password.component.ts: 26
	Client_Privacy_Violation	/apps/desktop/src/auth/lock.component.html: 32
	Client_Privacy_Violation	/apps/web/src/app/auth/lock.component.html: 18
	Client_Privacy_Violation	/apps/web/src/app/billing/shared/add-credit.component.ts: 30
	Client_Privacy_Violation	/apps/web/src/app/billing/shared/add-credit.component.ts: 70
	Client_Privacy_Violation	/apps/web/src/app/billing/shared/add-credit.component.ts: 80
	Client_Privacy_Violation	/apps/web/src/app/billing/shared/add-credit.component.ts: 149
	Client_Privacy_Violation	/apps/web/src/app/billing/shared/add-credit.component.ts: 138
	Client_Privacy_Violation	/apps/desktop/src/auth/lock.component.html: 32
	Client_Privacy_Violation	/apps/web/src/app/auth/recover-two-factor.component.html: 37
	Client_Privacy_Violation	/apps/web/src/app/billing/shared/add-credit.component.html: 46
	Client_Privacy_Violation	/apps/desktop/src/vault/app/vault/view.component.html: 534
	Client_Privacy_Violation	/apps/web/src/connectors/webauthn-fallback.ts: 116
	Client_Privacy_Violation	/bitwarden_license/bit-web/src/app/auth/sso/sso.component.ts: 161
	Client_Privacy_Violation	/bitwarden_license/bit-web/src/app/auth/sso/sso.component.ts: 161
	Client_Privacy_Violation	/apps/web/src/app/auth/lock.component.html: 18
	Client_Privacy_Violation	/libs/components/src/color-password/color-password.component.ts: 14
	Client_Privacy_Violation	/apps/desktop/src/vault/app/vault/view.component.html: 60
	Client_Privacy_Violation	/apps/desktop/src/vault/app/vault/view.component.html: 56
	Client_Privacy_Violation	/apps/browser/src/tools/popup/generator/password-generator-history.component.html: 26
	Client_Privacy_Violation	/apps/browser/src/vault/popup/components/vault/password-history.component.html: 18
	Client_Privacy_Violation	/apps/desktop/src/app/tools/password-generator-history.component.html: 15
	Client_Privacy_Violation	/apps/desktop/src/vault/app/vault/password-history.component.html: 12
	Client_Privacy_Violation	/apps/desktop/src/vault/app/vault/view.component.html: 50
	Client_Privacy_Violation	/libs/components/src/color-password/color-password.component.ts: 14
	Client_Privacy_Violation	/apps/browser/src/tools/popup/generator/password-generator-history.component.html: 26
	Client_Privacy_Violation	/apps/browser/src/vault/popup/components/vault/password-history.component.html: 18
	Client_Privacy_Violation	/apps/desktop/src/app/tools/password-generator-history.component.html: 15
	Client_Privacy_Violation	/apps/desktop/src/vault/app/vault/password-history.component.html: 12
	Missing_HSTS_Header	/apps/cli/src/auth/commands/login.command.ts: 707
	SSRF	/libs/importer/src/importers/lastpass/access/services/rest-client.ts: 69
	SSRF	/libs/importer/src/importers/lastpass/access/services/rest-client.ts: 69
	Angular_Usage_of_Unsafe_DOM_Sanitizer	/libs/components/src/avatar/avatar.component.ts: 80
	Angular_Usage_of_Unsafe_DOM_Sanitizer	/apps/desktop/src/app/components/avatar.component.ts: 75
	Angular_Usage_of_Unsafe_DOM_Sanitizer	/libs/components/src/icon/icon.component.ts: 18
	Angular_Usage_of_Unsafe_DOM_Sanitizer	/libs/components/src/icon/icon.component.ts: 18
	Client_DOM_Open_Redirect	/apps/browser/src/platform/popup/layout/popup-header.component.ts: 29
	Client_DOM_Open_Redirect	/apps/desktop/src/auth/accessibility-cookie.component.html: 18
	Client_DOM_Open_Redirect	/apps/web/src/connectors/common.ts: 2
	Client_DOM_Open_Redirect	/apps/web/src/connectors/common.ts: 2
	Client_DOM_Open_Redirect	/apps/web/src/connectors/common.ts: 2
	Client_DOM_Open_Redirect	/apps/web/src/connectors/sso.ts: 21
	Client_DOM_Open_Redirect	/apps/web/src/connectors/common.ts: 2
	Client_DOM_Open_Redirect	/apps/web/src/connectors/sso.ts: 19
	Client_DOM_Open_Redirect	/apps/web/src/connectors/common.ts: 2
	Client_DOM_Open_Redirect	/apps/web/src/connectors/sso.ts: 15
	Client_DOM_Open_Redirect	/apps/browser/src/tools/popup/generator/password-generator-history.component.ts: 18
	Client_DOM_Open_Redirect	/apps/desktop/src/auth/login/login-via-auth-request.component.ts: 60
	Client_DOM_Open_Redirect	/apps/browser/src/auth/popup/account-switching/current-account.component.ts: 31
	Client_DOM_Open_Redirect	/apps/browser/src/auth/popup/login-via-auth-request.component.ts: 52
	Client_DOM_Open_Redirect	/apps/desktop/src/auth/login/login-via-auth-request.component.ts: 60
	Client_DOM_Open_Redirect	/apps/browser/src/auth/popup/login-via-auth-request.component.ts: 52
	Client_DOM_Open_Redirect	/apps/browser/src/auth/popup/account-switching/account.component.ts: 24
	Client_DOM_Open_Redirect	/apps/browser/src/vault/popup/components/vault/password-history.component.ts: 21
	Client_DOM_Open_Redirect	/apps/browser/src/billing/popup/settings/premium.component.ts: 27
	Client_DOM_Open_Redirect	/apps/browser/src/vault/popup/components/vault/attachments.component.ts: 32
	Client_DOM_Open_Redirect	/libs/common/src/auth/iframe-component.ts: 49
	Client_DOM_Open_Redirect	/apps/browser/src/auth/scripts/duo.js: 277
	Client_DOM_Open_Redirect	/apps/browser/src/auth/scripts/duo.js: 277
	Client_DOM_Open_Redirect	/apps/desktop/src/auth/scripts/duo.js: 277
	Client_DOM_Open_Redirect	/apps/desktop/src/auth/scripts/duo.js: 277
	Client_DOM_Open_Redirect	/libs/common/src/auth/webauthn-iframe.ts: 25
	Client_DOM_Open_Redirect	/apps/desktop/src/auth/scripts/duo.js: 277
	Client_DOM_Open_Redirect	/apps/desktop/src/auth/scripts/duo.js: 277
	Client_DOM_Open_Redirect	/apps/browser/src/auth/scripts/duo.js: 277
	Client_DOM_Open_Redirect	/apps/browser/src/auth/scripts/duo.js: 277
	Client_DOM_Open_Redirect	/apps/desktop/src/auth/scripts/duo.js: 277
	Client_DOM_Open_Redirect	/apps/desktop/src/auth/scripts/duo.js: 277
	Client_DOM_Open_Redirect	/apps/browser/src/auth/scripts/duo.js: 277
	Client_DOM_Open_Redirect	/apps/browser/src/auth/scripts/duo.js: 277
	Client_DOM_Open_Redirect	/libs/common/src/auth/webauthn-iframe.ts: 25
	Client_DOM_Open_Redirect	/apps/desktop/src/auth/scripts/duo.js: 277
	Client_DOM_Open_Redirect	/apps/desktop/src/auth/scripts/duo.js: 277
	Client_DOM_Open_Redirect	/apps/browser/src/auth/scripts/duo.js: 277
	Client_DOM_Open_Redirect	/apps/browser/src/auth/scripts/duo.js: 277
	Client_Hardcoded_Domain	/apps/web/src/app/billing/shared/payment.component.ts: 56
	Client_Hardcoded_Domain	/apps/web/src/app/billing/shared/payment.component.ts: 56
	Client_Hardcoded_Domain	/apps/web/src/connectors/captcha.ts: 57
	Client_JQuery_Deprecated_Symbols	/apps/cli/src/auth/commands/login.command.ts: 575
	Client_JQuery_Deprecated_Symbols	/libs/angular/src/auth/components/update-temp-password.component.ts: 132
	Client_JQuery_Deprecated_Symbols	/libs/angular/src/auth/components/change-password.component.ts: 91
	Client_JQuery_Deprecated_Symbols	/apps/cli/src/program.ts: 615
	Client_Use_Of_Iframe_Without_Sandbox	/apps/browser/src/autofill/content/notification-bar.ts: 868
	Client_Use_Of_Iframe_Without_Sandbox	/apps/browser/src/autofill/overlay/iframe-content/autofill-overlay-iframe.service.ts: 90
	Client_Use_Of_Iframe_Without_Sandbox	/apps/web/src/connectors/duo.ts: 8
	Client_Use_Of_Iframe_Without_Sandbox	/apps/web/src/connectors/duo.ts: 8
	Client_Weak_Cryptographic_Hash	/libs/common/src/platform/services/web-crypto-function.service.ts: 142
	Client_Weak_Cryptographic_Hash	/apps/desktop/src/proxy/ipc.ts: 24
	Missing_CSP_Header	/apps/cli/src/auth/commands/login.command.ts: 707
	Unprotected_Cookie	/apps/web/src/app/auth/two-factor.component.ts: 143
	Unprotected_Cookie	/apps/web/src/connectors/duo-redirect.ts: 57
	Unprotected_Cookie	/apps/web/src/connectors/duo-redirect.ts: 112
	Unprotected_Cookie	/apps/web/src/connectors/sso.ts: 33
	Unprotected_Cookie	/apps/web/src/app/auth/sso.component.ts: 137
	Unsafe_Use_Of_Target_blank	/apps/web/src/app/auth/settings/two-factor-recovery.component.ts: 25
	Use_of_Broken_or_Risky_Cryptographic_Algorithm	/apps/browser/src/auth/background/service-factories/pin-service.factory.ts: 64
	Use_of_Broken_or_Risky_Cryptographic_Algorithm	/apps/browser/src/auth/background/service-factories/device-trust-service.factory.ts: 83
	Use_of_Broken_or_Risky_Cryptographic_Algorithm	/apps/browser/src/auth/background/service-factories/device-trust-service.factory.ts: 82
	Use_of_Broken_or_Risky_Cryptographic_Algorithm	/apps/browser/src/auth/background/service-factories/auth-request-service.factory.ts: 54
	Use_of_Broken_or_Risky_Cryptographic_Algorithm	/apps/browser/src/auth/background/service-factories/login-strategy-service.factory.ts: 130
	Use_of_Broken_or_Risky_Cryptographic_Algorithm	/apps/browser/src/tools/background/service_factories/import-service.factory.ts: 63
	Use_of_Broken_or_Risky_Cryptographic_Algorithm	/apps/browser/src/platform/background/service-factories/key-generation-service.factory.ts: 23
	Use_of_Broken_or_Risky_Cryptographic_Algorithm	/apps/browser/src/auth/background/service-factories/user-verification-service.factory.ts: 77
	Use_of_Broken_or_Risky_Cryptographic_Algorithm	/apps/browser/src/vault/background/service_factories/collection-service.factory.ts: 37
	Use_of_Broken_or_Risky_Cryptographic_Algorithm	/apps/browser/src/vault/background/service_factories/totp-service.factory.ts: 34
	Use_of_Broken_or_Risky_Cryptographic_Algorithm	/apps/cli/src/vault/create.command.ts: 68
	Use_of_Broken_or_Risky_Cryptographic_Algorithm	/apps/browser/src/auth/background/service-factories/auth-service.factory.ts: 51
	Use_of_Broken_or_Risky_Cryptographic_Algorithm	/apps/browser/src/auth/background/service-factories/key-connector-service.factory.ts: 70
	Use_of_Broken_or_Risky_Cryptographic_Algorithm	/apps/browser/src/background/service-factories/send-service.factory.ts: 50
	Use_of_Broken_or_Risky_Cryptographic_Algorithm	/apps/browser/src/background/service-factories/vault-timeout-settings-service.factory.ts: 73
	Use_of_Broken_or_Risky_Cryptographic_Algorithm	/apps/browser/src/platform/background/service-factories/crypto-service.factory.ts: 78
	Use_of_Broken_or_Risky_Cryptographic_Algorithm	/apps/browser/src/vault/background/service_factories/cipher-service.factory.ts: 75
	Use_of_Broken_or_Risky_Cryptographic_Algorithm	/apps/browser/src/vault/background/service_factories/folder-service.factory.ts: 42
	Use_of_Broken_or_Risky_Cryptographic_Algorithm	/apps/browser/src/tools/background/service_factories/password-generation-service.factory.ts: 41
	Use_of_Broken_or_Risky_Cryptographic_Algorithm	/apps/browser/src/tools/background/service_factories/password-generation-service.factory.ts: 41
	Use_of_Broken_or_Risky_Cryptographic_Algorithm	/apps/browser/src/platform/background/service-factories/encrypt-service.factory.ts: 34
	Use_of_Broken_or_Risky_Cryptographic_Algorithm	/apps/browser/src/background/service-factories/password-generation-service.factory.ts: 41

More results are available on AST platform

…s/pm-7076/settings-page-ui-refresh

* Create settings-v2.component Create new settings page Add routing based on extension refresh flag * Wrap anchors around the icons * Add account-switcher to settings page --------- Co-authored-by: Daniel James Smith <djsmith85@users.noreply.github.com>

… Switching Tabs (#9300) * [PM-8322] Firefox Inline Autofill Menu Not Propagation Correctly When Switching Tabs * [PM-8322] Firefox Inline Autofill Menu Not Propagation Correctly When Switching Tabs * Add missing RouterModule to the CurrentAccountComponent (#9295) Co-authored-by: Daniel James Smith <djsmith85@users.noreply.github.com> * [PM-6825] Browser Refresh - Initial List Items (#9199) * [PM-6825] Add temporary vault page header * [PM-6825] Expose cipherViews$ observable * [PM-6825] Refactor getAllDecryptedForUrl to expose filter functionality for reuse * [PM-6825] Introduce VaultPopupItemsService * [PM-6825] Introduce initial VaultListItem and VaultListItemsContainer components * [PM-6825] Add VaultListItems to VaultV2 component * [PM-6825] Introduce autofill-vault-list-items.component to encapsulate autofill logic * [PM-6825] Add temporary Vault icon * [PM-6825] Add empty and no results states to Vault tab * [PM-6825] Add unit tests for vault popup items service * [PM-6825] Negate noFilteredResults placeholder * [PM-6825] Cleanup new Vault components * [PM-6825] Move new components into its own module * [PM-6825] Fix missing button type * [PM-6825] Add booleanAttribute to showAutofill input * [PM-6825] Replace empty refresh BehaviorSubject with Subject * [PM-6825] Combine *ngIfs for vault list items container * [PM-6825] Use popup-section-header component * [PM-6825] Use small variant for icon buttons * [PM-6825] Use anchor tag for vault items * [PM-6825] Consolidate vault-list-items-container to include list item component functionality directly * [PM-6825] Add Tailwind classes to new Vault icon * [PM-6825] Remove temporary header comment * [PM-6825] Fix auto fill suggestion font size and padding * [PM-6825] Use tailwind for vault icon styling * [PM-6825] Add libs/angular to tailwind.config content * [PM-6825] Cleanup missing i18n * [PM-6825] Make VaultV2 standalone and cleanup Browser App module * [PM-6825] Use explicit type annotation * [PM-6825] Use property binding instead of interpolation * [PM-7076] Create settings-v2.component (#9213) * Create settings-v2.component Create new settings page Add routing based on extension refresh flag * Wrap anchors around the icons * Add account-switcher to settings page --------- Co-authored-by: Daniel James Smith <djsmith85@users.noreply.github.com> * [PM-8289] Inline menu content script does not update when user updates setting (#9279) * [PM-8289] Inline menu content script does not update whne user updates setting * [PM-8289] Fixing issue present within Jest tests * [PM-8289] Triggering a reload of autofill scripts when a user logs into their account --------- Co-authored-by: Daniel James Smith <2670567+djsmith85@users.noreply.github.com> Co-authored-by: Daniel James Smith <djsmith85@users.noreply.github.com> Co-authored-by: Shane Melton <smelton@bitwarden.com>

Create settings-v2.component

be1b402

Create new settings page Add routing based on extension refresh flag

github-actions bot added the needs-qa Marks a PR as requiring QA approval label May 16, 2024

djsmith85 mentioned this pull request May 16, 2024

[CL-287] Make app-current-account a standalone component #9215

Merged

djsmith85 added 4 commits May 16, 2024 20:42

Merge branch 'main' of https://github.com/bitwarden/clients into tool…

f210a30

…s/pm-7076/settings-page-ui-refresh

Wrap anchors around the icons

edcf5f7

Merge branch 'main' of https://github.com/bitwarden/clients into tool…

16e2a81

…s/pm-7076/settings-page-ui-refresh

Add account-switcher to settings page

cfc4efa

djsmith85 marked this pull request as ready for review May 17, 2024 11:19

djsmith85 requested a review from a team as a code owner May 17, 2024 11:19

audrey-jensen approved these changes May 20, 2024

View reviewed changes

djsmith85 removed the needs-qa Marks a PR as requiring QA approval label May 21, 2024

djsmith85 merged commit 10ab556 into main May 21, 2024
25 of 27 checks passed

djsmith85 deleted the tools/pm-7076/settings-page-ui-refresh branch May 21, 2024 21:32

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

[PM-7076] Create settings-v2.component #9213

[PM-7076] Create settings-v2.component #9213

djsmith85 commented May 16, 2024 •

edited

codecov bot commented May 16, 2024 •

edited

github-actions bot commented May 16, 2024 •

edited

[PM-7076] Create settings-v2.component #9213

[PM-7076] Create settings-v2.component #9213

Conversation

djsmith85 commented May 16, 2024 • edited

Type of change

Objective

Code changes

Screenshots

Before

After

Before you submit

codecov bot commented May 16, 2024 • edited

Codecov Report

github-actions bot commented May 16, 2024 • edited

Fixed Issues

djsmith85 commented May 16, 2024 •

edited

codecov bot commented May 16, 2024 •

edited

github-actions bot commented May 16, 2024 •

edited