[PM-9884] Create empty send add/edit page for browser (#10155)

* Move SendV2component into send-v2 subFolder

* Create SendFormContainer and related services

* Add initial SendFormComponent which uses the SendFormContainer

* Remove AdditionalOptionsSectionComponent which will be added with a future PR

* Add libs/tools/send to root tsconfig

* Register libs/tools/send/send-ui with root jest.config.js

* Register libs/tools/send/send-ui with root tailwind.config.js

* Create empty Send add edit page

- Introduces conditional routing based on extension refresh feature flag
- After selecting a Send type via the New button navigate to the new send-add-edit page and build a SendFormConfig

* Fix service injection on DefaultSendFormService

* Rename setHeader into getHeaderText, make it private and add documentation

* Set radix/base to 10 for parseInt

* Add documentation

* Rename local variable

* Removed unneeded loading state

* Remove unused originalSendId

* Run prettier

* Add link to edit an existing send

---------

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

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

@@ -59,6 +59,7 @@ import { PasswordGeneratorHistoryComponent } from "../tools/popup/generator/pass
 import { SendAddEditComponent } from "../tools/popup/send/send-add-edit.component";
 import { SendGroupingsComponent } from "../tools/popup/send/send-groupings.component";
 import { SendTypeComponent } from "../tools/popup/send/send-type.component";
+import { SendAddEditComponent as SendAddEditV2Component } from "../tools/popup/send-v2/add-edit/send-add-edit.component";
 import { SendCreatedComponent } from "../tools/popup/send-v2/send-created/send-created.component";
 import { SendV2Component } from "../tools/popup/send-v2/send-v2.component";
 import { AboutPageV2Component } from "../tools/popup/settings/about-page/about-page-v2.component";
@@ -362,18 +363,16 @@ const routes: Routes = [
     canActivate: [authGuard],
     data: { state: "send-type" },
   },
-  {
+  ...extensionRefreshSwap(SendAddEditComponent, SendAddEditV2Component, {
     path: "add-send",
-    component: SendAddEditComponent,
     canActivate: [authGuard],
     data: { state: "add-send" },
-  },
+  }),
-  {
+  ...extensionRefreshSwap(SendAddEditComponent, SendAddEditV2Component, {
     path: "edit-send",
-    component: SendAddEditComponent,
     canActivate: [authGuard],
     data: { state: "edit-send" },
-  },
+  }),
   {
     path: "send-created",
     component: SendCreatedComponent,

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

@@ -0,0 +1,17 @@
+<popup-page>
+  <popup-header slot="header" [pageTitle]="headerText" showBackButton></popup-header>
+
+  <tools-send-form
+    formId="sendForm"
+    [config]="config"
+    (sendSaved)="onSendSaved()"
+    [submitBtn]="submitBtn"
+  >
+  </tools-send-form>
+
+  <popup-footer slot="footer">
+    <button bitButton type="submit" form="sendForm" buttonType="primary" #submitBtn>
+      {{ "save" | i18n }}
+    </button>
+  </popup-footer>
+</popup-page>

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

@@ -0,0 +1,141 @@
+import { CommonModule, Location } from "@angular/common";
+import { Component } from "@angular/core";
+import { takeUntilDestroyed } from "@angular/core/rxjs-interop";
+import { FormsModule } from "@angular/forms";
+import { ActivatedRoute, Params } from "@angular/router";
+import { map, switchMap } from "rxjs";
+
+import { JslibModule } from "@bitwarden/angular/jslib.module";
+import { I18nService } from "@bitwarden/common/platform/abstractions/i18n.service";
+import { SendType } from "@bitwarden/common/tools/send/enums/send-type";
+import { SendId } from "@bitwarden/common/types/guid";
+import { AsyncActionsModule, ButtonModule, SearchModule } from "@bitwarden/components";
+import {
+  DefaultSendFormConfigService,
+  SendFormConfig,
+  SendFormConfigService,
+  SendFormMode,
+} from "@bitwarden/send-ui";
+
+import { SendFormModule } from "../../../../../../../libs/tools/send/send-ui/src/send-form/send-form.module";
+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";
+
+/**
+ * Helper class to parse query parameters for the AddEdit route.
+ */
+class QueryParams {
+  constructor(params: Params) {
+    this.sendId = params.sendId;
+    this.type = parseInt(params.type, 10);
+  }
+
+  /**
+   * The ID of the send to edit, empty when it's a new Send
+   */
+  sendId?: SendId;
+
+  /**
+   * The type of send to create.
+   */
+  type: SendType;
+}
+
+export type AddEditQueryParams = Partial<Record<keyof QueryParams, string>>;
+
+/**
+ * Component for adding or editing a send item.
+ */
+@Component({
+  selector: "tools-send-add-edit",
+  templateUrl: "send-add-edit.component.html",
+  standalone: true,
+  providers: [{ provide: SendFormConfigService, useClass: DefaultSendFormConfigService }],
+  imports: [
+    CommonModule,
+    SearchModule,
+    JslibModule,
+    FormsModule,
+    ButtonModule,
+    PopupPageComponent,
+    PopupHeaderComponent,
+    PopupFooterComponent,
+    SendFormModule,
+    AsyncActionsModule,
+  ],
+})
+export class SendAddEditComponent {
+  /**
+   * The header text for the component.
+   */
+  headerText: string;
+
+  /**
+   * The configuration for the send form.
+   */
+  config: SendFormConfig;
+
+  constructor(
+    private route: ActivatedRoute,
+    private location: Location,
+    private i18nService: I18nService,
+    private addEditFormConfigService: SendFormConfigService,
+  ) {
+    this.subscribeToParams();
+  }
+
+  /**
+   * Handles the event when the send is saved.
+   */
+  onSendSaved() {
+    this.location.back();
+  }
+
+  /**
+   * Subscribes to the route query parameters and builds the configuration based on the parameters.
+   */
+  subscribeToParams(): void {
+    this.route.queryParams
+      .pipe(
+        takeUntilDestroyed(),
+        map((params) => new QueryParams(params)),
+        switchMap(async (params) => {
+          let mode: SendFormMode;
+          if (params.sendId == null) {
+            mode = "add";
+          } else {
+            mode = "edit";
+          }
+          const config = await this.addEditFormConfigService.buildConfig(
+            mode,
+            params.sendId,
+            params.type,
+          );
+          return config;
+        }),
+      )
+      .subscribe((config) => {
+        this.config = config;
+        this.headerText = this.getHeaderText(config.mode, config.sendType);
+      });
+  }
+
+  /**
+   * Gets the header text based on the mode and type.
+   * @param mode The mode of the send form.
+   * @param type The type of the send form.
+   * @returns The header text.
+   */
+  private getHeaderText(mode: SendFormMode, type: SendType) {
+    const headerKey =
+      mode === "edit" || mode === "partial-edit" ? "editItemHeader" : "newItemHeader";
+
+    switch (type) {
+      case SendType.Text:
+        return this.i18nService.t(headerKey, this.i18nService.t("sendTypeText"));
+      case SendType.File:
+        return this.i18nService.t(headerKey, this.i18nService.t("sendTypeFile"));
+    }
+  }
+}

libs/tools/send/send-ui/src/send-list-items-container/send-list-items-container.component.html

@@ -10,6 +10,8 @@
       <button
         bit-item-content
         appA11yTitle="{{ 'edit' | i18n }} - {{ send.name }}"
+        routerLink="/edit-send"
+        [queryParams]="{ sendId: send.id, type: send.type }"
         appStopClick
         type="button"
         class="tw-pb-1"