[PM-1504] Migrate Dialogs to DialogService #5013

Hinton · 2023-03-16T18:40:26Z

Type of change

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

Objective

We need to migrate all the dialogs to the new simple dialog system on web.

This PR introduces a generic DialogService which can be used by all the clients. This allows us to decouple dialogs from the PlatformUtilsHelper.

The DialogService provides a new method, openSimpleDialog which is the new interface for that type of dialogs.

This gives us 3 different implementations:

Web: DialogService modern dialogs
Browser: SweetAlert
Desktop: Native electron based

Review notes

Check that each dialog that previously had await still has await.
Verify title and content hasn't accidentally flipped places. Confusingly the platformUtilsService had content first and title second.

Screenshots

Old:

New:

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

Hinton · 2023-03-17T13:35:18Z

apps/browser/src/background/nativeMessaging.background.ts

-      title: this.i18nService.t("desktopSyncVerificationTitle"),
-      confirmText: this.i18nService.t("ok"),
-      type: "warning",
+    this.messagingService.send("showNativeMessagingFinterprintDialog", {


Not a huge fan of this approach, but since the new dialogs doesn't support html, this seemed like the way to get around it for now. I envision us writing a popup service companion to this background service in the future that would handle all the dialogs.

apps/browser/src/popup/settings/settings.component.ts

apps/desktop/src/app/app.component.ts

apps/web/src/app/app.component.ts

apps/web/src/app/vault/individual-vault/vault-items.component.ts

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

# Conflicts: # libs/angular/src/auth/components/change-password.component.ts

# Conflicts: # apps/web/src/app/admin-console/organizations/manage/collections.component.ts # apps/web/src/app/admin-console/organizations/manage/groups.component.ts # apps/web/src/app/admin-console/organizations/members/components/member-dialog/member-dialog.component.ts # apps/web/src/app/admin-console/organizations/shared/components/collection-dialog/collection-dialog.component.ts # apps/web/src/app/vault/individual-vault/bulk-action-dialogs/bulk-share-dialog/bulk-share-dialog.component.ts # apps/web/src/app/vault/org-vault/vault-header/vault-header.component.ts # bitwarden_license/bit-web/src/app/secrets-manager/overview/overview.component.ts # bitwarden_license/bit-web/src/app/secrets-manager/settings/porting/sm-import.component.ts

libs/angular/src/services/dialog/dialog.service.abstraction.ts

apps/web/src/app/app.component.ts

JaredSnider-Bitwarden

Looks great - just a few minor questions.

Thank you for the great work on this! It is so much cleaner than what we had before!

# Conflicts: # apps/browser/src/auth/popup/lock.component.ts # apps/browser/src/auth/popup/update-temp-password.component.ts # apps/browser/src/popup/settings/settings.component.ts # apps/browser/src/tools/popup/send/send-add-edit.component.ts # apps/browser/src/tools/popup/send/send-groupings.component.ts # apps/browser/src/tools/popup/send/send-type.component.ts # apps/browser/src/tools/popup/settings/export.component.ts # apps/browser/src/vault/popup/components/vault/add-edit.component.ts # apps/desktop/src/app/accounts/settings.component.ts # apps/desktop/src/app/services/services.module.ts # apps/desktop/src/app/tools/export/export.component.ts # apps/desktop/src/app/tools/send/add-edit.component.ts # apps/desktop/src/app/tools/send/send.component.ts # apps/desktop/src/auth/lock.component.ts # apps/desktop/src/auth/update-temp-password.component.ts # apps/desktop/src/vault/app/vault/add-edit.component.ts # apps/web/src/app/admin-console/organizations/manage/collections.component.ts # apps/web/src/app/admin-console/organizations/tools/import-export/org-import.component.ts # apps/web/src/app/settings/change-kdf/change-kdf.component.ts # apps/web/src/app/settings/preferences.component.ts # apps/web/src/app/tools/import-export/export.component.ts # apps/web/src/app/tools/send/add-edit.component.ts # apps/web/src/app/tools/send/send.component.ts # apps/web/src/app/vault/individual-vault/add-edit.component.ts # apps/web/src/app/vault/individual-vault/vault-items.component.ts # apps/web/src/app/vault/org-vault/add-edit.component.ts # apps/web/src/app/vault/org-vault/vault-header/vault-header.component.ts # apps/web/src/app/vault/org-vault/vault-items.component.ts # apps/web/src/app/vault/org-vault/vault.component.ts # apps/web/src/auth/lock.component.ts # apps/web/src/auth/settings/emergency-access/emergency-add-edit.component.ts # apps/web/src/auth/settings/two-factor-base.component.ts # apps/web/src/auth/update-temp-password.component.ts # bitwarden_license/bit-web/src/app/secrets-manager/secrets/dialog/secret-dialog.component.ts # libs/angular/src/auth/components/lock.component.ts # libs/angular/src/auth/components/update-temp-password.component.ts # libs/angular/src/tools/send/add-edit.component.ts # libs/angular/src/tools/send/send.component.ts # libs/angular/src/vault/components/add-edit.component.ts

JaredSnider-Bitwarden

LGTM! Great work on this! 👍

# Conflicts: # apps/browser/src/services/browserPlatformUtils.service.ts # apps/desktop/src/app/app.component.ts # apps/web/src/app/app.component.ts # bitwarden_license/bit-web/src/app/secrets-manager/projects/project/project.component.ts

djsmith85

Very nice! Approving files owned by team-tools-dev

JaredSnider-Bitwarden

LGTM!

# Conflicts: # apps/desktop/src/app/accounts/settings.component.ts # apps/web/src/app/settings/preferences.component.ts # bitwarden_license/bit-web/src/app/secrets-manager/secrets/dialog/secret-dialog.component.ts

Thomas-Avery

Looks good for SM owned files

Hinton added 2 commits March 16, 2023 18:53

Extract dialog service abstraction to angular

610786d

Wire up electron and migrate vault add-edit

aa17b8d

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

Hinton added 4 commits March 17, 2023 10:33

Migrade everything to use the new dialog service

9f3f3e3

Add support for browser dialogs

402049a

Fix storybook

afb687b

Remove the resolver service

efcfec8

Hinton commented Mar 17, 2023

View reviewed changes

Hinton added 2 commits March 17, 2023 15:12

Minor cleanup

1bfb046

Fix story

1f10c6c