[CL-18] toast component and service #6490

willmartian · 2023-10-03T15:30:02Z

Type of change

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

Objective

Adds a toast component and service to the CL. Remove direct client references to ngx-toastr

Code changes

apps
- Removed toast css from all clients and consolidated in CL
- Replaced ToastrService with ToastService in app components
- messages.json: Added variant name so SR can announce it upon opening
libs/components
- toast.component: Presentational component
- toastr.component: ngx-toastr wrapper for bit-toast
- toast.service: Facade over ToastrService
  - removed functionality to use custom HTML in toasts
libs/common
- deprecated PlatfromUtilsService.showToast

Screenshots

See new stories in Storybook.

Screen.Recording.2024-02-25.at.11.15.07.AM.mov

Screen.Recording.2024-02-25.at.11.16.27.AM.mov

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

bitwarden-bot · 2023-10-03T16:29:16Z

Checkmarx One – Scan Summary & Details – 0d9765b0-74c0-41d3-8e07-468ff8b09f4f

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: 343
	Absolute_Path_Traversal	/apps/cli/src/commands/serve.command.ts: 343
	Absolute_Path_Traversal	/apps/cli/src/commands/serve.command.ts: 311
	Absolute_Path_Traversal	/apps/cli/src/commands/serve.command.ts: 311
	Angular_Improper_Type_Pipe_Usage	/apps/browser/src/vault/popup/components/fido2/fido2-use-browser-link.component.html: 1
	Angular_Improper_Type_Pipe_Usage	/apps/web/src/app/billing/organizations/adjust-subscription.component.html: 54
	Angular_Improper_Type_Pipe_Usage	/apps/web/src/app/billing/organizations/adjust-subscription.component.html: 18
	Client_Privacy_Violation	/apps/browser/src/background/runtime.background.ts: 279
	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	/apps/web/src/app/auth/settings/two-factor-verify.component.html: 3
	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: 135
	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: 146
	Client_Privacy_Violation	/apps/web/src/app/auth/lock.component.html: 18
	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	/libs/components/src/color-password/color-password.component.ts: 14
	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	/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: 705
	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/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/browser/src/auth/popup/login-via-auth-request.component.ts: 54
	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: 54
	Client_DOM_Open_Redirect	/apps/desktop/src/auth/login/login-via-auth-request.component.ts: 62
	Client_DOM_Open_Redirect	/apps/browser/src/auth/popup/account-switching/account.component.ts: 25
	Client_DOM_Open_Redirect	/apps/desktop/src/auth/login/login-via-auth-request.component.ts: 62
	Client_DOM_Open_Redirect	/apps/browser/src/vault/popup/components/vault/password-history.component.ts: 21
	Client_DOM_Open_Redirect	/apps/browser/src/vault/popup/components/vault/attachments.component.ts: 32
	Client_DOM_Open_Redirect	/apps/browser/src/popup/settings/premium.component.ts: 27
	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_Password_In_Comment	/libs/angular/src/vault/components/add-edit.component.ts: 663
	Client_Password_In_Comment	/apps/web/src/app/vault/org-vault/add-edit.component.ts: 108
	Client_Password_In_Comment	/apps/web/src/app/vault/org-vault/collections.component.ts: 59
	Client_Password_In_Comment	/libs/angular/src/platform/utils/safe-provider.ts: 108
	Client_Password_In_Comment	/libs/common/src/state-migrations/migrations/30-move-policy-state-to-state-provider.ts: 13
	Client_Password_In_Comment	/apps/browser/src/autofill/background/notification.background.ts: 566
	Client_Password_In_Comment	/libs/common/src/services/event/event-collection.service.ts: 93
	Client_Password_In_Comment	/libs/common/src/services/event/event-collection.service.ts: 88
	Client_Password_In_Comment	/libs/common/src/platform/biometrics/biometric-state.service.ts: 62
	Client_Password_In_Comment	/libs/common/src/platform/biometrics/biometric-state.service.ts: 30
	Client_Password_In_Comment	/apps/web/src/app/auth/key-rotation/user-key-rotation.service.ts: 46
	Client_Password_In_Comment	/apps/browser/src/autofill/overlay/pages/list/autofill-overlay-list.ts: 274
	Client_Password_In_Comment	/apps/browser/src/autofill/overlay/pages/list/autofill-overlay-list.ts: 224
	Client_Password_In_Comment	/apps/browser/src/autofill/background/overlay.background.ts: 516
	Client_Password_In_Comment	/apps/browser/src/autofill/background/overlay.background.ts: 516
	Client_Password_In_Comment	/apps/browser/src/autofill/background/overlay.background.ts: 227
	Client_Password_In_Comment	/apps/browser/src/autofill/background/overlay.background.ts: 227
	Client_Password_In_Comment	/apps/browser/src/autofill/overlay/pages/list/autofill-overlay-list.ts: 455
	Client_Password_In_Comment	/apps/browser/src/autofill/overlay/pages/list/autofill-overlay-list.ts: 437
	Client_Password_In_Comment	/apps/browser/src/autofill/overlay/pages/list/autofill-overlay-list.ts: 416
	Client_Password_In_Comment	/apps/browser/src/autofill/overlay/pages/list/autofill-overlay-list.ts: 387
	Client_Password_In_Comment	/apps/browser/src/autofill/overlay/pages/list/autofill-overlay-list.ts: 340
	Client_Password_In_Comment	/apps/browser/src/autofill/overlay/pages/list/autofill-overlay-list.ts: 340
	Client_Password_In_Comment	/apps/browser/src/autofill/overlay/pages/list/autofill-overlay-list.ts: 319
	Client_Password_In_Comment	/apps/browser/src/autofill/overlay/pages/list/autofill-overlay-list.ts: 319
	Client_Password_In_Comment	/apps/browser/src/autofill/overlay/pages/list/autofill-overlay-list.ts: 246
	Client_Password_In_Comment	/libs/angular/src/auth/components/sso.component.ts: 225
	Client_Password_In_Comment	/apps/browser/src/autofill/services/autofill.service.ts: 446
	Client_Password_In_Comment	/apps/web/src/app/vault/org-vault/vault.component.ts: 785
	Client_Password_In_Comment	/apps/web/src/app/vault/org-vault/vault.component.ts: 785
	Client_Password_In_Comment	/apps/web/src/app/vault/individual-vault/vault.component.ts: 603
	Client_Password_In_Comment	/apps/web/src/app/vault/individual-vault/vault.component.ts: 603
	Client_Password_In_Comment	/libs/angular/src/auth/components/sso.component.ts: 254
	Client_Password_In_Comment	/libs/angular/src/auth/components/two-factor.component.ts: 321
	Client_Password_In_Comment	/libs/tools/export/vault-export/vault-export-core/src/types/bitwarden-json-export-types.ts: 40
	Client_Password_In_Comment	/apps/web/src/app/auth/settings/emergency-access/attachments/emergency-access-attachments.component.ts: 52
	Client_Password_In_Comment	/apps/web/src/app/vault/individual-vault/add-edit.component.ts: 129
	Client_Password_In_Comment	/libs/angular/src/vault/components/add-edit.component.ts: 258
	Client_Password_In_Comment	/libs/auth/src/common/login-strategies/password-login.strategy.ts: 160
	Client_Password_In_Comment	/libs/common/src/auth/services/user-verification/user-verification.service.ts: 100
	Client_Password_In_Comment	/libs/importer/src/importers/bitwarden/bitwarden-password-protected-importer.ts: 51

More results are available on AST platform

codecov · 2024-02-19T16:31:12Z

Codecov Report

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

Project coverage is 27.63%. Comparing base (9277465) to head (b4e59a1).

Files	Patch %	Lines
libs/components/src/toast/toast.stories.ts	0.00%	21 Missing ⚠️
libs/components/src/toast/toast.component.ts	0.00%	11 Missing ⚠️
libs/components/src/toast/toast.service.ts	0.00%	10 Missing ⚠️
libs/components/src/toast/toast.module.ts	0.00%	9 Missing ⚠️
apps/browser/src/popup/app.component.ts	0.00%	6 Missing ⚠️
apps/web/src/app/app.component.ts	0.00%	4 Missing ⚠️
libs/components/src/toast/toastr.component.ts	0.00%	4 Missing ⚠️
apps/desktop/src/app/app.component.ts	0.00%	3 Missing ⚠️
...latform-utils/foreground-platform-utils.service.ts	0.00%	2 Missing ⚠️
libs/components/src/toast/index.ts	0.00%	2 Missing ⚠️
... and 4 more

Additional details and impacted files

@@           Coverage Diff           @@
##             main    #6490   +/-   ##
=======================================
  Coverage   27.62%   27.63%           
=======================================
  Files        2356     2362    +6     
  Lines       68972    68971    -1     
  Branches    12924    12913   -11     
=======================================
+ Hits        19055    19059    +4     
+ Misses      48488    48483    -5     
  Partials     1429     1429

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

…n/clients into ps/CL-18/migrate-toasts

libs/angular/src/components/toastr.component.ts

willmartian · 2024-03-11T22:50:04Z

I wasn't properly passing the title from the service to the component, fixed in 2e30155.

willmartian · 2024-03-13T14:24:36Z

Latest commits fix the conflicts with #8211 and removes the calls to ngx-toastr that were added to the ForegroundPlatformUtilsService (cc @MGibson1)

willmartian · 2024-04-16T14:23:28Z

Added test ids at QA's request: ef6be25
Fixed a bug on desktop where hovering the toast didn't pause it: b83d668
Updated colors to align with recent palette changes: 2a52e6b

libs/components/src/toast/toast.component.html

create bit-toast component; wip

d581a01

github-actions bot added the needs-qa Marks a PR as requiring QA approval label Oct 3, 2023

Merge branch 'main' into ps/CL-18/migrate-toasts

f809840

willmartian added 17 commits February 19, 2024 14:09

centralize toastr css in CL

5f95ca5

move toastr deps to CL

7c7ee51

tidy up variable names and comments

bc94cc3

update toast styles

7de9791

remove title option

f6458fb

tidy up

eef1127

add deprecation comment to PlatformUtilsService

8cf51d4

Merge branch 'main' into ps/CL-18/migrate-toasts

07ae70c

add title option; update stories

74d26d9

Merge branch 'ps/CL-18/migrate-toasts' of https://github.com/bitwarde…

bf8bc88

…n/clients into ps/CL-18/migrate-toasts

remove HTML message feature

ab3e7d1

add ToastService stories

4fdd12a

fix progress bar

f57cee4

wip

b7f079e

update styles and a11y

139df3c

announce toats variant to SR

98e846c

update comments

07c5a51

willmartian changed the title ~~[CL-18] feat: bit-toast~~ [CL-18] toast component and service Feb 25, 2024

willmartian marked this pull request as ready for review February 25, 2024 16:30

willmartian requested review from a team as code owners February 25, 2024 16:30

willmartian requested review from justindbaur, a team and Hinton February 25, 2024 16:30

willmartian commented Feb 26, 2024

View reviewed changes

libs/angular/src/components/toastr.component.ts Show resolved Hide resolved

willmartian dismissed stale reviews from justindbaur and vleague2 via 2e30155 March 11, 2024 22:48

willmartian requested a review from vleague2 March 11, 2024 22:49

vleague2 previously approved these changes Mar 12, 2024

View reviewed changes

willmartian added 2 commits March 13, 2024 09:48

resolve merge conflict

dfab470

remove toastr from foreground-platfrom-utils

29f86f8

willmartian dismissed vleague2’s stale review via 29f86f8 March 13, 2024 14:18

resolve merge conflict

8d60da1

willmartian requested a review from vleague2 March 13, 2024 16:43

vleague2 previously approved these changes Mar 13, 2024

View reviewed changes

resolve merge conflicts

9d88fc9

willmartian dismissed vleague2’s stale review via 9d88fc9 April 16, 2024 13:16

willmartian added 3 commits April 16, 2024 09:23

update to use -600 colors

2a52e6b

add desktop css fix

b83d668

add test ids

ef6be25

willmartian requested a review from vleague2 April 16, 2024 14:24

vleague2 reviewed Apr 16, 2024

View reviewed changes

libs/components/src/toast/toast.component.html Show resolved Hide resolved

willmartian requested a review from vleague2 April 16, 2024 18:31

vleague2 previously approved these changes Apr 16, 2024

View reviewed changes

resolve merge conflict

b4e59a1

willmartian dismissed vleague2’s stale review via b4e59a1 April 18, 2024 16:45

willmartian requested a review from vleague2 April 18, 2024 16:45

willmartian removed the needs-qa Marks a PR as requiring QA approval label Apr 18, 2024

vleague2 approved these changes Apr 18, 2024

View reviewed changes

willmartian merged commit d5f503a into main Apr 18, 2024
61 of 63 checks passed

willmartian deleted the ps/CL-18/migrate-toasts branch April 18, 2024 17:23

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

[CL-18] toast component and service #6490

[CL-18] toast component and service #6490

willmartian commented Oct 3, 2023 •

edited

Loading

bitwarden-bot commented Oct 3, 2023 •

edited by github-actions bot

Loading

codecov bot commented Feb 19, 2024 •

edited

Loading

willmartian commented Mar 11, 2024

willmartian commented Mar 13, 2024 •

edited

Loading

willmartian commented Apr 16, 2024

[CL-18] toast component and service #6490

[CL-18] toast component and service #6490

Conversation

willmartian commented Oct 3, 2023 • edited Loading

Type of change

Objective

Code changes

Screenshots

Before you submit

bitwarden-bot commented Oct 3, 2023 • edited by github-actions bot Loading

Fixed Issues

codecov bot commented Feb 19, 2024 • edited Loading

Codecov Report

willmartian commented Mar 11, 2024

willmartian commented Mar 13, 2024 • edited Loading

willmartian commented Apr 16, 2024

willmartian commented Oct 3, 2023 •

edited

Loading

bitwarden-bot commented Oct 3, 2023 •

edited by github-actions bot

Loading

codecov bot commented Feb 19, 2024 •

edited

Loading

willmartian commented Mar 13, 2024 •

edited

Loading