[PM-18919] Browser Prompt - Show manual error state (#13776)

* show manual open error state if opening via button doesn't work

* shorten manual error timeout

* remove commented line

apps/web/src/app/vault/components/browser-extension-prompt/browser-extension-prompt.component.spec.ts

@@ -15,12 +15,14 @@ describe("BrowserExtensionPromptComponent", () => {
   let fixture: ComponentFixture<BrowserExtensionPromptComponent>;
   let component: BrowserExtensionPromptComponent;
   const start = jest.fn();
+  const openExtension = jest.fn();
   const pageState$ = new BehaviorSubject(BrowserPromptState.Loading);
   const setAttribute = jest.fn();
   const getAttribute = jest.fn().mockReturnValue("width=1010");
 
   beforeEach(async () => {
     start.mockClear();
+    openExtension.mockClear();
     setAttribute.mockClear();
     getAttribute.mockClear();
 
@@ -39,7 +41,7 @@ describe("BrowserExtensionPromptComponent", () => {
       providers: [
         {
           provide: BrowserExtensionPromptService,
-          useValue: { start, pageState$ },
+          useValue: { start, openExtension, pageState$ },
         },
         {
           provide: I18nService,
@@ -83,6 +85,15 @@ describe("BrowserExtensionPromptComponent", () => {
       const errorText = fixture.debugElement.query(By.css("p")).nativeElement;
       expect(errorText.textContent.trim()).toBe("openingExtensionError");
     });
+
+    it("opens extension on button click", () => {
+      const button = fixture.debugElement.query(By.css("button")).nativeElement;
+
+      button.click();
+
+      expect(openExtension).toHaveBeenCalledTimes(1);
+      expect(openExtension).toHaveBeenCalledWith(true);
+    });
   });
 
   describe("success state", () => {

apps/web/src/app/vault/components/browser-extension-prompt/browser-extension-prompt.component.ts

@@ -61,6 +61,6 @@ export class BrowserExtensionPromptComponent implements OnInit, OnDestroy {
   }
 
   openExtension(): void {
-    this.browserExtensionPromptService.openExtension();
+    this.browserExtensionPromptService.openExtension(true);
   }
 }

apps/web/src/app/vault/services/browser-extension-prompt.service.spec.ts

@@ -169,5 +169,32 @@ describe("BrowserExtensionPromptService", () => {
         pageTitle: { key: "somethingWentWrong" },
       });
     });
+
+    it("sets manual open state when open extension is called", (done) => {
+      service.openExtension(true);
+
+      jest.advanceTimersByTime(1000);
+
+      service.pageState$.subscribe((state) => {
+        expect(state).toBe(BrowserPromptState.ManualOpen);
+        done();
+      });
+    });
+
+    it("shows success state when extension auto opens", (done) => {
+      service.openExtension(true);
+
+      jest.advanceTimersByTime(500); // don't let timeout occur
+
+      window.dispatchEvent(
+        new MessageEvent("message", { data: { command: VaultMessages.PopupOpened } }),
+      );
+
+      service.pageState$.subscribe((state) => {
+        expect(state).toBe(BrowserPromptState.Success);
+        expect(service["extensionCheckTimeout"]).toBeUndefined();
+        done();
+      });
+    });
   });
 });

apps/web/src/app/vault/services/browser-extension-prompt.service.ts

@@ -54,8 +54,18 @@ export class BrowserExtensionPromptService {
   }
 
   /** Post a message to the extension to open */
-  openExtension() {
+  openExtension(setManualErrorTimeout = false) {
     window.postMessage({ command: VaultMessages.OpenPopup });
+
+    // Optionally, configure timeout to show the manual open error state if
+    // the extension does not open within one second.
+    if (setManualErrorTimeout) {
+      this.clearExtensionCheckTimeout();
+
+      this.extensionCheckTimeout = window.setTimeout(() => {
+        this.setErrorState(BrowserPromptState.ManualOpen);
+      }, 750);
+    }
   }
 
   /** Send message checking for the browser extension */