[PM-11927] - File Send popout dialog (#11138)

* file popout component

* finish file popout dialog

* finalize send popout dialog component

* fix tests

* conditionally provide file popout dialog

* simplify send file popout dialog

* add file popout dialog container

* remove unnecessary modules

apps/browser/src/_locales/en/messages.json

@@ -2504,6 +2504,14 @@
     "message": "Send saved",
     "description": "'Send' is a noun and the name of a feature called 'Bitwarden Send'. It should not be translated."
   },
+  "sendFilePopoutDialogText": {
+    "message": "Pop out extension?",
+    "description": "'Send' is a noun and the name of a feature called 'Bitwarden Send'. It should not be translated."
+  },
+  "sendFilePopoutDialogDesc": {
+    "message": "To create a file Send, you need to pop out te extension to a new window.",
+    "description": "'Send' is a noun and the name of a feature called 'Bitwarden Send'. It should not be translated."
+  },
   "sendLinuxChromiumFileWarning": {
     "message": "In order to choose a file, open the extension in the sidebar (if possible) or pop out to a new window by clicking this banner."
   },
@@ -2513,6 +2521,9 @@
   "sendSafariFileWarning": {
     "message": "In order to choose a file using Safari, pop out to a new window by clicking this banner."
   },
+  "popOut": {
+    "message": "Pop out"
+  },
   "sendFileCalloutHeader": {
     "message": "Before you start"
   },

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

@@ -9,6 +9,8 @@
   >
   </tools-send-form>
 
+  <send-file-popout-dialog-container [config]="config"></send-file-popout-dialog-container>
+
   <popup-footer slot="footer">
     <button bitButton type="submit" form="sendForm" buttonType="primary" #submitBtn>
       {{ "save" | i18n }}

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

@@ -29,6 +29,7 @@ import { SendFormModule } from "../../../../../../../libs/tools/send/send-ui/src
 import { PopupFooterComponent } from "../../../../platform/popup/layout/popup-footer.component";
 import { PopupHeaderComponent } from "../../../../platform/popup/layout/popup-header.component";
 import { PopupPageComponent } from "../../../../platform/popup/layout/popup-page.component";
+import { SendFilePopoutDialogContainerComponent } from "../send-file-popout-dialog/send-file-popout-dialog-container.component";
 
 /**
  * Helper class to parse query parameters for the AddEdit route.
@@ -70,6 +71,7 @@ export type AddEditQueryParams = Partial<Record<keyof QueryParams, string>>;
     PopupPageComponent,
     PopupHeaderComponent,
     PopupFooterComponent,
+    SendFilePopoutDialogContainerComponent,
     SendFormModule,
     AsyncActionsModule,
   ],

apps/browser/src/tools/popup/send-v2/send-file-popout-dialog/send-file-popout-dialog-container.component.ts

@@ -0,0 +1,31 @@
+import { CommonModule } from "@angular/common";
+import { Component, Input, OnInit } from "@angular/core";
+
+import { JslibModule } from "@bitwarden/angular/jslib.module";
+import { DialogService } from "@bitwarden/components";
+import { SendFormConfig } from "@bitwarden/send-ui";
+
+import { FilePopoutUtilsService } from "../../services/file-popout-utils.service";
+
+import { SendFilePopoutDialogComponent } from "./send-file-popout-dialog.component";
+
+@Component({
+  selector: "send-file-popout-dialog-container",
+  templateUrl: "./send-file-popout-dialog-container.component.html",
+  standalone: true,
+  imports: [JslibModule, CommonModule],
+})
+export class SendFilePopoutDialogContainerComponent implements OnInit {
+  @Input() config: SendFormConfig;
+
+  constructor(
+    private dialogService: DialogService,
+    private filePopoutUtilsService: FilePopoutUtilsService,
+  ) {}
+
+  ngOnInit() {
+    if (this.config.mode === "add" && this.filePopoutUtilsService.showFilePopoutMessage(window)) {
+      this.dialogService.open(SendFilePopoutDialogComponent);
+    }
+  }
+}

apps/browser/src/tools/popup/send-v2/send-file-popout-dialog/send-file-popout-dialog.component.html

@@ -0,0 +1,20 @@
+<bit-simple-dialog dialogSize="default">
+  <div bitDialogIcon>
+    <i class="bwi bwi-info-circle bwi-2x tw-text-info" aria-hidden="true"></i>
+  </div>
+  <ng-container bitDialogContent>
+    <div bitTypography="h3">
+      {{ "sendFilePopoutDialogText" | i18n }}
+    </div>
+    <div bitTypography="body1">{{ "sendFilePopoutDialogDesc" | i18n }}</div>
+  </ng-container>
+  <ng-container bitDialogFooter>
+    <button buttonType="primary" bitButton type="button" (click)="popOutWindow()">
+      {{ "popOut" | i18n }}
+      <i class="bwi bwi-popout tw-ml-1" aria-hidden="true"></i>
+    </button>
+    <button bitButton buttonType="secondary" type="button" (click)="close()">
+      {{ "cancel" | i18n }}
+    </button>
+  </ng-container>
+</bit-simple-dialog>

apps/browser/src/tools/popup/send-v2/send-file-popout-dialog/send-file-popout-dialog.component.ts

@@ -0,0 +1,25 @@
+import { CommonModule } from "@angular/common";
+import { Component } from "@angular/core";
+
+import { JslibModule } from "@bitwarden/angular/jslib.module";
+import { ButtonModule, DialogModule, DialogService, TypographyModule } from "@bitwarden/components";
+
+import BrowserPopupUtils from "../../../../platform/popup/browser-popup-utils";
+
+@Component({
+  selector: "send-file-popout-dialog",
+  templateUrl: "./send-file-popout-dialog.component.html",
+  standalone: true,
+  imports: [JslibModule, CommonModule, DialogModule, ButtonModule, TypographyModule],
+})
+export class SendFilePopoutDialogComponent {
+  constructor(private dialogService: DialogService) {}
+
+  async popOutWindow() {
+    await BrowserPopupUtils.openCurrentPagePopout(window);
+  }
+
+  close() {
+    this.dialogService.closeAll();
+  }
+}

apps/browser/src/tools/popup/send-v2/send-v2.component.ts

@@ -51,17 +51,12 @@ export enum SendState {
 })
 export class SendV2Component implements OnInit, OnDestroy {
   sendType = SendType;
-
   sendState = SendState;
 
   protected listState: SendState | null = null;
-
   protected sends$ = this.sendItemsService.filteredAndSortedSends$;
-
   protected title: string = "allSends";
-
   protected noItemIcon = NoSendsIcon;
-
   protected noResultsIcon = Icons.NoResults;
 
   protected sendsDisabled = false;