open attachments page in new popout window based on browser (#10036)

apps/browser/src/vault/popup/components/vault-v2/attachments/open-attachments/open-attachments.component.spec.ts

@@ -15,6 +15,7 @@ import { CipherView } from "@bitwarden/common/vault/models/view/cipher.view";
 import { ToastService } from "@bitwarden/components";
 
 import BrowserPopupUtils from "../../../../../../platform/popup/browser-popup-utils";
+import { FilePopoutUtilsService } from "../../../../../../tools/popup/services/file-popout-utils.service";
 
 import { OpenAttachmentsComponent } from "./open-attachments.component";
 
@@ -48,12 +49,14 @@ describe("OpenAttachmentsComponent", () => {
 
   const getCipher = jest.fn().mockResolvedValue(cipherDomain);
   const getOrganization = jest.fn().mockResolvedValue(org);
+  const showFilePopoutMessage = jest.fn().mockReturnValue(false);
 
   beforeEach(async () => {
     openCurrentPagePopout.mockClear();
     getCipher.mockClear();
     showToast.mockClear();
     getOrganization.mockClear();
+    showFilePopoutMessage.mockClear();
 
     await TestBed.configureTestingModule({
       imports: [OpenAttachmentsComponent, RouterTestingModule],
@@ -75,6 +78,10 @@ describe("OpenAttachmentsComponent", () => {
           provide: OrganizationService,
           useValue: { get: getOrganization },
         },
+        {
+          provide: FilePopoutUtilsService,
+          useValue: { showFilePopoutMessage },
+        },
       ],
     }).compileComponents();
   });
@@ -89,7 +96,9 @@ describe("OpenAttachmentsComponent", () => {
   });
 
   it("opens attachments in new popout", async () => {
-    component.openAttachmentsInPopout = true;
+    showFilePopoutMessage.mockReturnValue(true);
+
+    await component.ngOnInit();
 
     await component.openAttachments();
 
@@ -101,7 +110,9 @@ describe("OpenAttachmentsComponent", () => {
   });
 
   it("opens attachments in same window", async () => {
-    component.openAttachmentsInPopout = false;
+    showFilePopoutMessage.mockReturnValue(false);
+
+    await component.ngOnInit();
 
     await component.openAttachments();
 

apps/browser/src/vault/popup/components/vault-v2/attachments/open-attachments/open-attachments.component.ts

@@ -19,6 +19,7 @@ import {
 } from "@bitwarden/components";
 
 import BrowserPopupUtils from "../../../../../../platform/popup/browser-popup-utils";
+import { FilePopoutUtilsService } from "../../../../../../tools/popup/services/file-popout-utils.service";
 
 @Component({
   standalone: true,
@@ -31,7 +32,7 @@ export class OpenAttachmentsComponent implements OnInit {
   @Input({ required: true }) cipherId: CipherId;
 
   /** True when the attachments window should be opened in a popout */
-  openAttachmentsInPopout = BrowserPopupUtils.inPopup(window);
+  openAttachmentsInPopout: boolean;
 
   /** True when the user has access to premium or h  */
   canAccessAttachments: boolean;
@@ -46,6 +47,7 @@ export class OpenAttachmentsComponent implements OnInit {
     private organizationService: OrganizationService,
     private toastService: ToastService,
     private i18nService: I18nService,
+    private filePopoutUtilsService: FilePopoutUtilsService,
   ) {
     this.billingAccountProfileStateService.hasPremiumFromAnySource$
       .pipe(takeUntilDestroyed())
@@ -55,9 +57,12 @@ export class OpenAttachmentsComponent implements OnInit {
   }
 
   async ngOnInit(): Promise<void> {
+    this.openAttachmentsInPopout = this.filePopoutUtilsService.showFilePopoutMessage(window);
+
     if (!this.cipherId) {
       return;
     }
+
     const cipherDomain = await this.cipherService.get(this.cipherId);
     const cipher = await cipherDomain.decrypt(
       await this.cipherService.getKeyForCipherKeyDecryption(cipherDomain),