[PM-4306] Extract file-popout-callout component used within Send on browser (#6564)

* Extract callout in send-add-edit into separate component

- Created new file-popout-callout.component
- Register component within app.module
- Replaced usage within send-add-edit.component

* Override popup header style to fix bit-callout

* [PM-4375] Reuse show file selector callout logic (#6606)

* Added FilePopoutUtilsService with the logic of showing/hiding the popout callout and file selector button

* Added documentation to FilePopoutUtilsService

* Added documentation for class and constructor on FilePopoutUtilsService

---------

Co-authored-by: Daniel James Smith <djsmith85@users.noreply.github.com>
Co-authored-by: aj-rosado <109146700+aj-rosado@users.noreply.github.com>

apps/browser/src/popup/app.module.ts

@@ -31,6 +31,7 @@ import { SsoComponent } from "../auth/popup/sso.component";
 import { TwoFactorOptionsComponent } from "../auth/popup/two-factor-options.component";
 import { TwoFactorComponent } from "../auth/popup/two-factor.component";
 import { UpdateTempPasswordComponent } from "../auth/popup/update-temp-password.component";
+import { FilePopoutCalloutComponent } from "../tools/popup/components/file-popout-callout.component";
 import { GeneratorComponent } from "../tools/popup/generator/generator.component";
 import { PasswordGeneratorHistoryComponent } from "../tools/popup/generator/password-generator-history.component";
 import { SendListComponent } from "../tools/popup/send/components/send-list.component";
@@ -98,6 +99,7 @@ import "../platform/popup/locales";
     ScrollingModule,
     ServicesModule,
     DialogModule,
+    FilePopoutCalloutComponent,
   ],
   declarations: [
     ActionButtonsComponent,

apps/browser/src/popup/services/services.module.ts

@@ -104,6 +104,7 @@ import BrowserMessagingService from "../../platform/services/browser-messaging.s
 import { BrowserStateService } from "../../platform/services/browser-state.service";
 import { BrowserSendService } from "../../services/browser-send.service";
 import { BrowserSettingsService } from "../../services/browser-settings.service";
+import { FilePopoutUtilsService } from "../../tools/popup/services/file-popout-utils.service";
 import { BrowserFolderService } from "../../vault/services/browser-folder.service";
 import { VaultFilterService } from "../../vault/services/vault-filter.service";
 
@@ -520,6 +521,16 @@ function getBgService<T>(service: keyof MainBackground) {
         LogService,
       ],
     },
+    {
+      provide: FilePopoutUtilsService,
+      useFactory: (
+        platformUtilsService: PlatformUtilsService,
+        popupUtilsService: PopupUtilsService
+      ) => {
+        return new FilePopoutUtilsService(platformUtilsService, popupUtilsService);
+      },
+      deps: [PlatformUtilsService, PopupUtilsService],
+    },
   ],
 })
 export class ServicesModule {}

apps/browser/src/tools/popup/components/file-popout-callout.component.html

@@ -0,0 +1,11 @@
+<bit-callout
+  type="warning"
+  icon="bwi-external-link bwi-rotate-270 bwi-fw"
+  title="{{ 'sendFileCalloutHeader' | i18n }}"
+  (click)="popOutWindow()"
+  *ngIf="showFilePopoutMessage"
+>
+  <div *ngIf="showChromiumFileWarning">{{ "sendLinuxChromiumFileWarning" | i18n }}</div>
+  <div *ngIf="showFirefoxFileWarning">{{ "sendFirefoxFileWarning" | i18n }}</div>
+  <div *ngIf="showSafariFileWarning">{{ "sendSafariFileWarning" | i18n }}</div>
+</bit-callout>

apps/browser/src/tools/popup/components/file-popout-callout.component.ts

@@ -0,0 +1,37 @@
+import { CommonModule } from "@angular/common";
+import { Component, OnInit } from "@angular/core";
+
+import { JslibModule } from "@bitwarden/angular/jslib.module";
+import { CalloutModule } from "@bitwarden/components";
+
+import { PopupUtilsService } from "../../../popup/services/popup-utils.service";
+import { FilePopoutUtilsService } from "../services/file-popout-utils.service";
+
+@Component({
+  selector: "tools-file-popout-callout",
+  templateUrl: "file-popout-callout.component.html",
+  standalone: true,
+  imports: [CommonModule, JslibModule, CalloutModule],
+})
+export class FilePopoutCalloutComponent implements OnInit {
+  protected showFilePopoutMessage: boolean;
+  protected showFirefoxFileWarning: boolean;
+  protected showSafariFileWarning: boolean;
+  protected showChromiumFileWarning: boolean;
+
+  constructor(
+    private popupUtilsService: PopupUtilsService,
+    private filePopoutUtilsService: FilePopoutUtilsService
+  ) {}
+
+  ngOnInit() {
+    this.showFilePopoutMessage = this.filePopoutUtilsService.showFilePopoutMessage(window);
+    this.showFirefoxFileWarning = this.filePopoutUtilsService.showFirefoxFileWarning(window);
+    this.showSafariFileWarning = this.filePopoutUtilsService.showSafariFileWarning(window);
+    this.showChromiumFileWarning = this.filePopoutUtilsService.showChromiumFileWarning(window);
+  }
+
+  popOutWindow() {
+    this.popupUtilsService.popOut(window);
+  }
+}

apps/browser/src/tools/popup/send/send-add-edit.component.html

@@ -22,18 +22,7 @@
       {{ "sendOptionsPolicyInEffect" | i18n }}
     </app-callout>
     <!-- File Warning -->
-    <app-callout
+    <tools-file-popout-callout *ngIf="type === sendType.File && !disableSend" />
-      type="warning"
-      icon="bwi-external-link bwi-rotate-270 bwi-fw"
-      [clickable]="true"
-      title="{{ 'sendFileCalloutHeader' | i18n }}"
-      *ngIf="showFilePopoutMessage && type === sendType.File && !disableSend"
-      (click)="popOutWindow()"
-    >
-      <div *ngIf="showChromiumFileWarning">{{ "sendLinuxChromiumFileWarning" | i18n }}</div>
-      <div *ngIf="showFirefoxFileWarning">{{ "sendFirefoxFileWarning" | i18n }}</div>
-      <div *ngIf="showSafariFileWarning">{{ "sendSafariFileWarning" | i18n }}</div>
-    </app-callout>
     <!-- Name -->
     <div class="box">
       <div class="box-content">

apps/browser/src/tools/popup/send/send-add-edit.component.ts

@@ -17,6 +17,7 @@ import { DialogService } from "@bitwarden/components";
 
 import { BrowserStateService } from "../../../platform/services/abstractions/browser-state.service";
 import { PopupUtilsService } from "../../../popup/services/popup-utils.service";
+import { FilePopoutUtilsService } from "../services/file-popout-utils.service";
 
 @Component({
   selector: "app-send-add-edit",
@@ -29,9 +30,7 @@ export class SendAddEditComponent extends BaseAddEditComponent {
   // File visibility
   isFirefox = false;
   inPopout = false;
-  inSidebar = false;
+  showFileSelector = false;
-  isLinux = false;
-  isUnsupportedMac = false;
 
   constructor(
     i18nService: I18nService,
@@ -49,7 +48,8 @@ export class SendAddEditComponent extends BaseAddEditComponent {
     logService: LogService,
     sendApiService: SendApiService,
     dialogService: DialogService,
-    formBuilder: FormBuilder
+    formBuilder: FormBuilder,
+    private filePopoutUtilsService: FilePopoutUtilsService
   ) {
     super(
       i18nService,
@@ -67,46 +67,16 @@ export class SendAddEditComponent extends BaseAddEditComponent {
     );
   }
 
-  get showFileSelector(): boolean {
-    return !(this.editMode || this.showFilePopoutMessage);
-  }
-
-  get showFilePopoutMessage(): boolean {
-    return (
-      !this.editMode &&
-      (this.showFirefoxFileWarning || this.showSafariFileWarning || this.showChromiumFileWarning)
-    );
-  }
-
-  get showFirefoxFileWarning(): boolean {
-    return this.isFirefox && !(this.inSidebar || this.inPopout);
-  }
-
-  get showSafariFileWarning(): boolean {
-    return this.isSafari && !this.inPopout;
-  }
-
-  // Only show this for Chromium based browsers in Linux and Mac > Big Sur
-  get showChromiumFileWarning(): boolean {
-    return (
-      (this.isLinux || this.isUnsupportedMac) &&
-      !this.isFirefox &&
-      !(this.inSidebar || this.inPopout)
-    );
-  }
-
   popOutWindow() {
     this.popupUtilsService.popOut(window);
   }
 
   async ngOnInit() {
     // File visibility
-    this.isFirefox = this.platformUtilsService.isFirefox();
+    this.showFileSelector =
+      !this.editMode && !this.filePopoutUtilsService.showFilePopoutMessage(window);
     this.inPopout = this.popupUtilsService.inPopout(window);
-    this.inSidebar = this.popupUtilsService.inSidebar(window);
+    this.isFirefox = this.platformUtilsService.isFirefox();
-    this.isLinux = window?.navigator?.userAgent.indexOf("Linux") !== -1;
-    this.isUnsupportedMac =
-      this.platformUtilsService.isChrome() && window?.navigator?.appVersion.includes("Mac OS X 11");
 
     // eslint-disable-next-line rxjs-angular/prefer-takeuntil, rxjs/no-async-subscribe
     this.route.queryParams.pipe(first()).subscribe(async (params) => {

apps/browser/src/tools/popup/services/file-popout-utils.service.ts

@@ -0,0 +1,76 @@
+import { Injectable } from "@angular/core";
+
+import { PlatformUtilsService } from "@bitwarden/common/platform/abstractions/platform-utils.service";
+
+import { PopupUtilsService } from "../../../popup/services/popup-utils.service";
+
+/**
+ * Service for determining whether to display file popout callout messages.
+ */
+@Injectable()
+export class FilePopoutUtilsService {
+  /**
+   * Creates an instance of FilePopoutUtilsService.
+   */
+  constructor(
+    private platformUtilsService: PlatformUtilsService,
+    private popupUtilsService: PopupUtilsService
+  ) {}
+
+  /**
+   * Determines whether to show any file popout callout message in the current browser.
+   * @param win - The window context in which the check should be performed.
+   * @returns True if a file popout callout message should be displayed; otherwise, false.
+   */
+  showFilePopoutMessage(win: Window): boolean {
+    return (
+      this.showFirefoxFileWarning(win) ||
+      this.showSafariFileWarning(win) ||
+      this.showChromiumFileWarning(win)
+    );
+  }
+
+  /**
+   * Determines whether to show a file popout callout message for the Firefox browser
+   * @param win - The window context in which the check should be performed.
+   * @returns True if the extension is not in a sidebar or popout; otherwise, false.
+   */
+  showFirefoxFileWarning(win: Window): boolean {
+    return (
+      this.platformUtilsService.isFirefox() &&
+      !(this.popupUtilsService.inSidebar(win) || this.popupUtilsService.inPopout(win))
+    );
+  }
+
+  /**
+   * Determines whether to show a file popout message for the Safari browser
+   * @param win - The window context in which the check should be performed.
+   * @returns True if the extension is not in a popout; otherwise, false.
+   */
+  showSafariFileWarning(win: Window): boolean {
+    return this.platformUtilsService.isSafari() && !this.popupUtilsService.inPopout(win);
+  }
+
+  /**
+   * Determines whether to show a file popout callout message for Chromium-based browsers in Linux and Mac OS X Big Sur
+   * @param win - The window context in which the check should be performed.
+   * @returns True if the extension is not in a sidebar or popout; otherwise, false.
+   */
+  showChromiumFileWarning(win: Window): boolean {
+    return (
+      (this.isLinux(win) || this.isUnsupportedMac(win)) &&
+      !this.platformUtilsService.isFirefox() &&
+      !(this.popupUtilsService.inSidebar(win) || this.popupUtilsService.inPopout(win))
+    );
+  }
+
+  private isLinux(win: Window): boolean {
+    return win?.navigator?.userAgent.indexOf("Linux") !== -1;
+  }
+
+  private isUnsupportedMac(win: Window): boolean {
+    return (
+      this.platformUtilsService.isChrome() && win?.navigator?.appVersion.includes("Mac OS X 11")
+    );
+  }
+}