diff --git a/apps/web/src/app/vault/components/browser-extension-prompt/browser-extension-prompt.component.spec.ts b/apps/web/src/app/vault/components/browser-extension-prompt/browser-extension-prompt.component.spec.ts index a19606f6d9c..b31759a1fe1 100644 --- a/apps/web/src/app/vault/components/browser-extension-prompt/browser-extension-prompt.component.spec.ts +++ b/apps/web/src/app/vault/components/browser-extension-prompt/browser-extension-prompt.component.spec.ts @@ -166,8 +166,8 @@ describe("BrowserExtensionPromptComponent", () => { it("shows manual open error message", () => { const manualText = fixture.debugElement.query(By.css("p")).nativeElement; - expect(manualText.textContent.trim()).toContain("openExtensionManuallyPart1"); - expect(manualText.textContent.trim()).toContain("openExtensionManuallyPart2"); + expect(manualText.textContent.trim()).toContain("openExtensionFromToolbarPart1"); + expect(manualText.textContent.trim()).toContain("openExtensionFromToolbarPart2"); }); }); }); diff --git a/apps/web/src/app/vault/components/browser-extension-prompt/browser-extension-prompt.component.ts b/apps/web/src/app/vault/components/browser-extension-prompt/browser-extension-prompt.component.ts index cb927d0848c..505a0df5032 100644 --- a/apps/web/src/app/vault/components/browser-extension-prompt/browser-extension-prompt.component.ts +++ b/apps/web/src/app/vault/components/browser-extension-prompt/browser-extension-prompt.component.ts @@ -1,5 +1,5 @@ import { CommonModule, DOCUMENT } from "@angular/common"; -import { Component, Inject, OnDestroy, OnInit } from "@angular/core"; +import { Component, Inject, OnDestroy, OnInit, ChangeDetectionStrategy } from "@angular/core"; import { takeUntilDestroyed } from "@angular/core/rxjs-interop"; import { ActivatedRoute } from "@angular/router"; import { map, Observable, of, tap } from "rxjs"; @@ -14,12 +14,11 @@ import { } from "../../services/browser-extension-prompt.service"; import { ManuallyOpenExtensionComponent } from "../manually-open-extension/manually-open-extension.component"; -// FIXME(https://bitwarden.atlassian.net/browse/CL-764): Migrate to OnPush -// eslint-disable-next-line @angular-eslint/prefer-on-push-component-change-detection @Component({ selector: "vault-browser-extension-prompt", templateUrl: "./browser-extension-prompt.component.html", imports: [CommonModule, I18nPipe, ButtonComponent, IconModule, ManuallyOpenExtensionComponent], + changeDetection: ChangeDetectionStrategy.OnPush, }) export class BrowserExtensionPromptComponent implements OnInit, OnDestroy { protected VaultMessages = VaultMessages; diff --git a/apps/web/src/app/vault/components/manually-open-extension/manually-open-extension.component.html b/apps/web/src/app/vault/components/manually-open-extension/manually-open-extension.component.html index 22c36e51177..d15cdaa712b 100644 --- a/apps/web/src/app/vault/components/manually-open-extension/manually-open-extension.component.html +++ b/apps/web/src/app/vault/components/manually-open-extension/manually-open-extension.component.html @@ -1,8 +1,8 @@ -

- {{ "openExtensionManuallyPart1" | i18n }} +

+ {{ "openExtensionFromToolbarPart1" | i18n }} - {{ "openExtensionManuallyPart2" | i18n }} + {{ "openExtensionFromToolbarPart2" | i18n }}

diff --git a/apps/web/src/app/vault/components/manually-open-extension/manually-open-extension.component.ts b/apps/web/src/app/vault/components/manually-open-extension/manually-open-extension.component.ts index 6105aeacf9c..435e847f6e9 100644 --- a/apps/web/src/app/vault/components/manually-open-extension/manually-open-extension.component.ts +++ b/apps/web/src/app/vault/components/manually-open-extension/manually-open-extension.component.ts @@ -1,12 +1,11 @@ -import { Component } from "@angular/core"; +import { Component, ChangeDetectionStrategy } from "@angular/core"; import { BitwardenIcon } from "@bitwarden/assets/svg"; import { IconModule } from "@bitwarden/components"; import { I18nPipe } from "@bitwarden/ui-common"; -// FIXME(https://bitwarden.atlassian.net/browse/CL-764): Migrate to OnPush -// eslint-disable-next-line @angular-eslint/prefer-on-push-component-change-detection @Component({ + changeDetection: ChangeDetectionStrategy.OnPush, selector: "vault-manually-open-extension", templateUrl: "./manually-open-extension.component.html", imports: [I18nPipe, IconModule], diff --git a/apps/web/src/app/vault/components/setup-extension/setup-extension.component.html b/apps/web/src/app/vault/components/setup-extension/setup-extension.component.html index 038c258d4b6..1976321b4ee 100644 --- a/apps/web/src/app/vault/components/setup-extension/setup-extension.component.html +++ b/apps/web/src/app/vault/components/setup-extension/setup-extension.component.html @@ -29,10 +29,7 @@ -
+
@@ -40,20 +37,15 @@ {{ (state === SetupExtensionState.Success ? "bitwardenExtensionInstalled" - : "openTheBitwardenExtension" + : "bitwardenExtensionIsInstalled" ) | i18n }}

- {{ - (state === SetupExtensionState.Success - ? "openExtensionToAutofill" - : "bitwardenExtensionInstalledOpenExtension" - ) | i18n - }} + {{ "openExtensionToAutofill" | i18n }}

-

+ +

{{ "gettingStartedWithBitwardenPart1" | i18n }} {{ "gettingStartedWithBitwardenPart2" | i18n }} @@ -73,7 +73,3 @@

- -
- -
diff --git a/apps/web/src/app/vault/components/setup-extension/setup-extension.component.spec.ts b/apps/web/src/app/vault/components/setup-extension/setup-extension.component.spec.ts index fbf61f9a277..ef67e072116 100644 --- a/apps/web/src/app/vault/components/setup-extension/setup-extension.component.spec.ts +++ b/apps/web/src/app/vault/components/setup-extension/setup-extension.component.spec.ts @@ -4,7 +4,6 @@ import { Router, RouterModule } from "@angular/router"; import { BehaviorSubject } from "rxjs"; import { SYSTEM_THEME_OBSERVABLE } from "@bitwarden/angular/services/injection-tokens"; -import { BrowserExtensionIcon } from "@bitwarden/assets/svg"; import { AccountService } from "@bitwarden/common/auth/abstractions/account.service"; import { DeviceType } from "@bitwarden/common/enums"; import { I18nService } from "@bitwarden/common/platform/abstractions/i18n.service"; @@ -12,7 +11,6 @@ import { PlatformUtilsService } from "@bitwarden/common/platform/abstractions/pl import { Utils } from "@bitwarden/common/platform/misc/utils"; import { StateProvider } from "@bitwarden/common/platform/state"; import { ThemeStateService } from "@bitwarden/common/platform/theming/theme-state.service"; -import { AnonLayoutWrapperDataService } from "@bitwarden/components"; import { WebBrowserInteractionService } from "../../services/web-browser-interaction.service"; @@ -25,14 +23,12 @@ describe("SetupExtensionComponent", () => { const navigate = jest.fn().mockResolvedValue(true); const openExtension = jest.fn().mockResolvedValue(true); const update = jest.fn().mockResolvedValue(true); - const setAnonLayoutWrapperData = jest.fn(); const extensionInstalled$ = new BehaviorSubject(null); beforeEach(async () => { navigate.mockClear(); openExtension.mockClear(); update.mockClear(); - setAnonLayoutWrapperData.mockClear(); window.matchMedia = jest.fn().mockReturnValue(false); await TestBed.configureTestingModule({ @@ -43,7 +39,6 @@ describe("SetupExtensionComponent", () => { { provide: PlatformUtilsService, useValue: { getDevice: () => DeviceType.UnknownBrowser } }, { provide: SYSTEM_THEME_OBSERVABLE, useValue: new BehaviorSubject("system") }, { provide: ThemeStateService, useValue: { selectedTheme$: new BehaviorSubject("system") } }, - { provide: AnonLayoutWrapperDataService, useValue: { setAnonLayoutWrapperData } }, { provide: AccountService, useValue: { activeAccount$: new BehaviorSubject({ account: { id: "account-id" } }) }, @@ -133,14 +128,6 @@ describe("SetupExtensionComponent", () => { tick(); expect(component["state"]).toBe(SetupExtensionState.ManualOpen); - expect(setAnonLayoutWrapperData).toHaveBeenCalledWith({ - pageTitle: { - key: "somethingWentWrong", - }, - pageIcon: BrowserExtensionIcon, - hideCardWrapper: false, - maxWidth: "md", - }); })); }); }); diff --git a/apps/web/src/app/vault/components/setup-extension/setup-extension.component.ts b/apps/web/src/app/vault/components/setup-extension/setup-extension.component.ts index 974e73bc91e..809e404f5f1 100644 --- a/apps/web/src/app/vault/components/setup-extension/setup-extension.component.ts +++ b/apps/web/src/app/vault/components/setup-extension/setup-extension.component.ts @@ -5,7 +5,7 @@ import { Router, RouterModule } from "@angular/router"; import { firstValueFrom, pairwise, startWith } from "rxjs"; import { JslibModule } from "@bitwarden/angular/jslib.module"; -import { BrowserExtensionIcon, Party } from "@bitwarden/assets/svg"; +import { Party } from "@bitwarden/assets/svg"; import { AccountService } from "@bitwarden/common/auth/abstractions/account.service"; import { getUserId } from "@bitwarden/common/auth/services/account.service"; import { PlatformUtilsService } from "@bitwarden/common/platform/abstractions/platform-utils.service"; @@ -14,7 +14,6 @@ import { StateProvider } from "@bitwarden/common/platform/state"; import { UnionOfValues } from "@bitwarden/common/vault/types/union-of-values"; import { getWebStoreUrl } from "@bitwarden/common/vault/utils/get-web-store-url"; import { - AnonLayoutWrapperDataService, ButtonComponent, CenterPositionStrategy, DialogRef, @@ -68,7 +67,6 @@ export class SetupExtensionComponent implements OnInit, OnDestroy { private stateProvider = inject(StateProvider); private accountService = inject(AccountService); private document = inject(DOCUMENT); - private anonLayoutWrapperDataService = inject(AnonLayoutWrapperDataService); protected SetupExtensionState = SetupExtensionState; protected PartyIcon = Party; @@ -144,6 +142,16 @@ export class SetupExtensionComponent implements OnInit, OnDestroy { } } + get showSuccessUI(): boolean { + const successStates = [ + SetupExtensionState.Success, + SetupExtensionState.AlreadyInstalled, + SetupExtensionState.ManualOpen, + ] as string[]; + + return successStates.includes(this.state); + } + /** Opens the add extension later dialog */ addItLater() { this.dialogRef = this.dialogService.open( @@ -161,16 +169,6 @@ export class SetupExtensionComponent implements OnInit, OnDestroy { async openExtension() { await this.webBrowserExtensionInteractionService.openExtension().catch(() => { this.state = SetupExtensionState.ManualOpen; - - // Update the anon layout data to show the proper error design - this.anonLayoutWrapperDataService.setAnonLayoutWrapperData({ - pageTitle: { - key: "somethingWentWrong", - }, - pageIcon: BrowserExtensionIcon, - hideCardWrapper: false, - maxWidth: "md", - }); }); } diff --git a/apps/web/src/locales/en/messages.json b/apps/web/src/locales/en/messages.json index dccb6d28af5..90468c61d5c 100644 --- a/apps/web/src/locales/en/messages.json +++ b/apps/web/src/locales/en/messages.json @@ -11351,14 +11351,6 @@ "openedExtensionViewAtRiskPasswords": { "message": "Successfully opened the Bitwarden browser extension. You can now review your at-risk passwords." }, - "openExtensionManuallyPart1": { - "message": "We had trouble opening the Bitwarden browser extension. Open the Bitwarden icon", - "description": "This will be used as part of a larger sentence, broken up to include the Bitwarden icon. The full sentence will read 'We had trouble opening the Bitwarden browser extension. Open the Bitwarden icon [Bitwarden Icon] from the toolbar.'" - }, - "openExtensionManuallyPart2": { - "message": "from the toolbar.", - "description": "This will be used as part of a larger sentence, broken up to include the Bitwarden icon. The full sentence will read 'We had trouble opening the Bitwarden browser extension. Open the Bitwarden icon [Bitwarden Icon] from the toolbar.'" - }, "resellerRenewalWarningMsg": { "message": "Your subscription will renew soon. To ensure uninterrupted service, contact $RESELLER$ to confirm your renewal before $RENEWAL_DATE$.", "placeholders": { @@ -11679,11 +11671,8 @@ "bitwardenExtensionInstalled": { "message": "Bitwarden extension installed!" }, - "openTheBitwardenExtension": { - "message": "Open the Bitwarden extension" - }, - "bitwardenExtensionInstalledOpenExtension": { - "message": "The Bitwarden extension is installed! Open the extension to log in and start autofilling." + "bitwardenExtensionIsInstalled": { + "message": "Bitwarden extension is installed!" }, "openExtensionToAutofill": { "message": "Open the extension to log in and start autofilling." @@ -11699,6 +11688,14 @@ "message": "Learning Center", "description": "This will be displayed as part of a larger sentence. The whole sentence reads: 'For tips on getting started with Bitwarden visit the Learning Center and Help Center'" }, + "openExtensionFromToolbarPart1": { + "message": "If the extension didn't open, you may need to open Bitwarden from the icon ", + "description": "This will be used as part of a larger sentence, broken up to include the Bitwarden icon. The full sentence will read 'If the extension didn't open, you may need to open Bitwarden from the icon [Bitwarden Icon] on the toolbar.'" + }, + "openExtensionFromToolbarPart2": { + "message": " on the toolbar.", + "description": "This will be used as part of a larger sentence, broken up to include the Bitwarden icon. The full sentence will read 'If the extension didn't open, you may need to open Bitwarden from the icon [Bitwarden Icon] on the toolbar.'" + }, "gettingStartedWithBitwardenPart3": { "message": "Help Center", "description": "This will be displayed as part of a larger sentence. The whole sentence reads: 'For tips on getting started with Bitwarden visit the Learning Center and Help Center'"