[PM-11926] - send created redirect (#11140)

* send created redirect

* fix test

* fix test

* fix send form save

* return SendData from saveSend

* When saving a Send, bubble up a SendView which can be passed to the SendCreated component

* Use events to initiate navigation and move actual navigation into client-specific component

---------

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

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

@@ -4,7 +4,8 @@
   <tools-send-form
     formId="sendForm"
     [config]="config"
-    (sendSaved)="onSendSaved()"
+    (onSendCreated)="onSendCreated($event)"
+    (onSendUpdated)="onSendUpdated($event)"
     [submitBtn]="submitBtn"
   >
   </tools-send-form>

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

@@ -2,12 +2,13 @@ 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 { ActivatedRoute, Params, Router } 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 { SendView } from "@bitwarden/common/tools/send/models/view/send.view";
 import { SendApiService } from "@bitwarden/common/tools/send/services/send-api.service.abstraction";
 import { SendId } from "@bitwarden/common/types/guid";
 import {
@@ -95,14 +96,25 @@ export class SendAddEditComponent {
     private sendApiService: SendApiService,
     private toastService: ToastService,
     private dialogService: DialogService,
+    private router: Router,
   ) {
     this.subscribeToParams();
   }
 
   /**
-   * Handles the event when the send is saved.
+   * Handles the event when the send is created.
    */
-  onSendSaved() {
+  async onSendCreated(send: SendView) {
+    await this.router.navigate(["/send-created"], {
+      queryParams: { sendId: send.id },
+    });
+    return;
+  }
+
+  /**
+   * Handles the event when the send is updated.
+   */
+  onSendUpdated(send: SendView) {
     this.location.back();
   }
 

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

@@ -1,6 +1,11 @@
 <main class="tw-top-0">
   <popup-page>
-    <popup-header slot="header" [pageTitle]="'createdSend' | i18n" showBackButton>
+    <popup-header
+      slot="header"
+      [pageTitle]="'createdSend' | i18n"
+      showBackButton
+      [backAction]="close.bind(this)"
+    >
       <ng-container slot="end">
         <app-pop-out></app-pop-out>
       </ng-container>

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

@@ -1,6 +1,6 @@
 import { CommonModule, Location } from "@angular/common";
 import { ComponentFixture, TestBed } from "@angular/core/testing";
-import { ActivatedRoute, RouterLink } from "@angular/router";
+import { ActivatedRoute, Router, RouterLink } from "@angular/router";
 import { RouterTestingModule } from "@angular/router/testing";
 import { MockProxy, mock } from "jest-mock-extended";
 import { of } from "rxjs";
@@ -33,6 +33,7 @@ describe("SendCreatedComponent", () => {
   let location: MockProxy<Location>;
   let activatedRoute: MockProxy<ActivatedRoute>;
   let environmentService: MockProxy<EnvironmentService>;
+  let router: MockProxy<Router>;
 
   const sendId = "test-send-id";
   const deletionDate = new Date();
@@ -52,6 +53,7 @@ describe("SendCreatedComponent", () => {
     location = mock<Location>();
     activatedRoute = mock<ActivatedRoute>();
     environmentService = mock<EnvironmentService>();
+    router = mock<Router>();
     Object.defineProperty(environmentService, "environment$", {
       configurable: true,
       get: () => of(new SelfHostedEnvironment({ webVault: "https://example.com" })),
@@ -89,6 +91,7 @@ describe("SendCreatedComponent", () => {
         { provide: ConfigService, useValue: mock<ConfigService>() },
         { provide: EnvironmentService, useValue: environmentService },
         { provide: PopupRouterCacheService, useValue: mock<PopupRouterCacheService>() },
+        { provide: Router, useValue: router },
       ],
     }).compileComponents();
   });
@@ -109,10 +112,10 @@ describe("SendCreatedComponent", () => {
     expect(component["daysAvailable"]).toBe(7);
   });
 
-  it("should navigate back on close", () => {
+  it("should navigate back to send list on close", async () => {
     fixture.detectChanges();
-    component.close();
-    expect(location.back).toHaveBeenCalled();
+    await component.close();
+    expect(router.navigate).toHaveBeenCalledWith(["/tabs/send"]);
   });
 
   describe("getDaysAvailable", () => {

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

@@ -1,7 +1,7 @@
-import { CommonModule, Location } from "@angular/common";
+import { CommonModule } from "@angular/common";
 import { Component } from "@angular/core";
 import { takeUntilDestroyed } from "@angular/core/rxjs-interop";
-import { ActivatedRoute, RouterLink } from "@angular/router";
+import { ActivatedRoute, Router, RouterLink, RouterModule } from "@angular/router";
 import { firstValueFrom } from "rxjs";
 
 import { JslibModule } from "@bitwarden/angular/jslib.module";
@@ -30,6 +30,7 @@ import { PopupPageComponent } from "../../../../platform/popup/layout/popup-page
     PopupHeaderComponent,
     PopupPageComponent,
     RouterLink,
+    RouterModule,
     PopupFooterComponent,
     IconModule,
   ],
@@ -45,10 +46,11 @@ export class SendCreatedComponent {
     private sendService: SendService,
     private route: ActivatedRoute,
     private toastService: ToastService,
-    private location: Location,
+    private router: Router,
     private environmentService: EnvironmentService,
   ) {
     const sendId = this.route.snapshot.queryParamMap.get("sendId");
+
     this.sendService.sendViews$.pipe(takeUntilDestroyed()).subscribe((sendViews) => {
       this.send = sendViews.find((s) => s.id === sendId);
       if (this.send) {
@@ -62,8 +64,8 @@ export class SendCreatedComponent {
     return Math.max(0, Math.ceil((send.deletionDate.getTime() - now) / (1000 * 60 * 60 * 24)));
   }
 
-  close() {
-    this.location.back();
+  async close() {
+    await this.router.navigate(["/tabs/send"]);
   }
 
   async copyLink() {