[PM-9853] - Add SendListItemsContainer component (#10193)

* send list items container

* update send list items container

* finalize send list container

* remove unecessary file

* undo change to config

* prefer use of takeUntilDestroyed

* add specss

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

@@ -2090,6 +2090,9 @@
   "passwordProtected": {
     "message": "Password protected"
   },
+  "copyLink": {
+    "message": "Copy link"
+  },
   "copySendLink": {
     "message": "Copy Send link",
     "description": "'Send' is a noun and the name of a feature called 'Bitwarden Send'. It should not be translated."

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

@@ -8,14 +8,12 @@
     </ng-container>
   </popup-header>
 
-  <div
-    *ngIf="sendsListState === SendsListStateEnum.Empty"
-    class="tw-flex tw-flex-col tw-h-full tw-justify-center"
-  >
+  <div *ngIf="sends.length === 0" class="tw-flex tw-flex-col tw-h-full tw-justify-center">
     <bit-no-items [icon]="noItemIcon" class="tw-text-main">
       <ng-container slot="title">{{ "sendsNoItemsTitle" | i18n }}</ng-container>
       <ng-container slot="description">{{ "sendsNoItemsMessage" | i18n }}</ng-container>
       <tools-new-send-dropdown slot="button"></tools-new-send-dropdown>
     </bit-no-items>
   </div>
+  <app-send-list-items-container [sends]="sends" />
 </popup-page>

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

@@ -0,0 +1,101 @@
+import { CommonModule } from "@angular/common";
+import { ComponentFixture, TestBed } from "@angular/core/testing";
+import { RouterLink } from "@angular/router";
+import { RouterTestingModule } from "@angular/router/testing";
+import { mock } from "jest-mock-extended";
+import { Observable, of } from "rxjs";
+
+import { JslibModule } from "@bitwarden/angular/jslib.module";
+import { AccountService } from "@bitwarden/common/auth/abstractions/account.service";
+import { AuthService } from "@bitwarden/common/auth/abstractions/auth.service";
+import { AvatarService } from "@bitwarden/common/auth/abstractions/avatar.service";
+import { BillingAccountProfileStateService } from "@bitwarden/common/billing/abstractions";
+import { ConfigService } from "@bitwarden/common/platform/abstractions/config/config.service";
+import { EnvironmentService } from "@bitwarden/common/platform/abstractions/environment.service";
+import { I18nService } from "@bitwarden/common/platform/abstractions/i18n.service";
+import { LogService } from "@bitwarden/common/platform/abstractions/log.service";
+import { PlatformUtilsService } from "@bitwarden/common/platform/abstractions/platform-utils.service";
+import { SendView } from "@bitwarden/common/tools/send/models/view/send.view";
+import { SendApiService } from "@bitwarden/common/tools/send/services/send-api.service.abstraction";
+import { SendService } from "@bitwarden/common/tools/send/services/send.service.abstraction";
+import { ButtonModule, NoItemsModule } from "@bitwarden/components";
+import {
+  NewSendDropdownComponent,
+  SendListItemsContainerComponent,
+  SendListFiltersComponent,
+} from "@bitwarden/send-ui";
+
+import { CurrentAccountComponent } from "../../../auth/popup/account-switching/current-account.component";
+import { PopOutComponent } from "../../../platform/popup/components/pop-out.component";
+import { PopupHeaderComponent } from "../../../platform/popup/layout/popup-header.component";
+import { PopupPageComponent } from "../../../platform/popup/layout/popup-page.component";
+
+import { SendV2Component } from "./send-v2.component";
+
+describe("SendV2Component", () => {
+  let component: SendV2Component;
+  let fixture: ComponentFixture<SendV2Component>;
+  let sendViews$: Observable<SendView[]>;
+
+  beforeEach(async () => {
+    sendViews$ = of([
+      { id: "1", name: "Send A" },
+      { id: "2", name: "Send B" },
+    ] as SendView[]);
+
+    await TestBed.configureTestingModule({
+      imports: [
+        CommonModule,
+        RouterTestingModule,
+        JslibModule,
+        NoItemsModule,
+        ButtonModule,
+        NoItemsModule,
+        RouterLink,
+        NewSendDropdownComponent,
+        SendListItemsContainerComponent,
+        SendListFiltersComponent,
+        PopupPageComponent,
+        PopupHeaderComponent,
+        PopOutComponent,
+        CurrentAccountComponent,
+      ],
+      providers: [
+        { provide: AccountService, useValue: mock<AccountService>() },
+        { provide: AuthService, useValue: mock<AuthService>() },
+        { provide: AvatarService, useValue: mock<AvatarService>() },
+        {
+          provide: BillingAccountProfileStateService,
+          useValue: mock<BillingAccountProfileStateService>(),
+        },
+        { provide: ConfigService, useValue: mock<ConfigService>() },
+        { provide: EnvironmentService, useValue: mock<EnvironmentService>() },
+        { provide: LogService, useValue: mock<LogService>() },
+        { provide: PlatformUtilsService, useValue: mock<PlatformUtilsService>() },
+        { provide: SendApiService, useValue: mock<SendApiService>() },
+        { provide: SendService, useValue: { sendViews$ } },
+        { provide: I18nService, useValue: { t: (key: string) => key } },
+      ],
+    }).compileComponents();
+
+    fixture = TestBed.createComponent(SendV2Component);
+    component = fixture.componentInstance;
+
+    fixture.detectChanges();
+  });
+
+  it("should create", () => {
+    expect(component).toBeTruthy();
+  });
+
+  it("should sort sends by name on initialization", async () => {
+    const sortedSends = [
+      { id: "1", name: "Send A" },
+      { id: "2", name: "Send B" },
+    ] as SendView[];
+
+    await component.ngOnInit();
+
+    expect(component.sends).toEqual(sortedSends);
+  });
+});

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

@@ -1,13 +1,17 @@
 import { CommonModule } from "@angular/common";
 import { Component, OnDestroy, OnInit } from "@angular/core";
 import { RouterLink } from "@angular/router";
+import { mergeMap, Subject, takeUntil } from "rxjs";
 
 import { JslibModule } from "@bitwarden/angular/jslib.module";
 import { SendType } from "@bitwarden/common/tools/send/enums/send-type";
+import { SendView } from "@bitwarden/common/tools/send/models/view/send.view";
+import { SendService } from "@bitwarden/common/tools/send/services/send.service.abstraction";
 import { ButtonModule, NoItemsModule } from "@bitwarden/components";
 import {
   NoSendsIcon,
   NewSendDropdownComponent,
+  SendListItemsContainerComponent,
   SendListFiltersComponent,
 } from "@bitwarden/send-ui";
 
@@ -16,10 +20,6 @@ import { PopOutComponent } from "../../../platform/popup/components/pop-out.comp
 import { PopupHeaderComponent } from "../../../platform/popup/layout/popup-header.component";
 import { PopupPageComponent } from "../../../platform/popup/layout/popup-page.component";
 
-enum SendsListState {
-  Empty,
-}
-
 @Component({
   templateUrl: "send-v2.component.html",
   standalone: true,
@@ -34,24 +34,31 @@ enum SendsListState {
     ButtonModule,
     RouterLink,
     NewSendDropdownComponent,
+    SendListItemsContainerComponent,
     SendListFiltersComponent,
   ],
 })
 export class SendV2Component implements OnInit, OnDestroy {
   sendType = SendType;
 
-  /** Visual state of the Sends list */
-  protected sendsListState: SendsListState | null = null;
+  private destroy$ = new Subject<void>();
+
+  sends: SendView[] = [];
 
   protected noItemIcon = NoSendsIcon;
 
-  protected SendsListStateEnum = SendsListState;
+  constructor(protected sendService: SendService) {}
 
-  constructor() {
-    this.sendsListState = SendsListState.Empty;
+  async ngOnInit() {
+    this.sendService.sendViews$
+      .pipe(
+        mergeMap(async (sends) => {
+          this.sends = sends.sort((a, b) => a.name.localeCompare(b.name));
+        }),
+        takeUntil(this.destroy$),
+      )
+      .subscribe();
   }
 
-  ngOnInit(): void {}
-
   ngOnDestroy(): void {}
 }

apps/web/src/locales/en/messages.json

@@ -4386,6 +4386,9 @@
     "message": "Send link",
     "description": "'Send' is a noun and the name of a feature called 'Bitwarden Send'. It should not be translated."
   },
+  "copyLink": {
+    "message": "Copy link"
+  },
   "copySendLink": {
     "message": "Copy Send link",
     "description": "'Send' is a noun and the name of a feature called 'Bitwarden Send'. It should not be translated."

libs/tools/send/send-ui/src/index.ts

@@ -1,4 +1,5 @@
 export * from "./icons";
 export * from "./send-form";
 export { NewSendDropdownComponent } from "./new-send-dropdown/new-send-dropdown.component";
+export { SendListItemsContainerComponent } from "./send-list-items-container/send-list-items-container.component";
 export { SendListFiltersComponent } from "./send-list-filters/send-list-filters.component";

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

@@ -0,0 +1,54 @@
+<bit-section *ngIf="sends?.length > 0">
+  <bit-section-header>
+    <h2 class="tw-font-bold" bitTypography="h5">
+      {{ "allSends" | i18n }}
+    </h2>
+    <span bitTypography="body1" slot="end">{{ sends.length }}</span>
+  </bit-section-header>
+  <bit-item-group>
+    <bit-item *ngFor="let send of sends">
+      <button
+        bit-item-content
+        appA11yTitle="{{ 'edit' | i18n }} - {{ send.name }}"
+        appStopClick
+        type="button"
+        class="tw-pb-1"
+      >
+        <i
+          slot="start"
+          *ngIf="send.type === sendType.Text"
+          class="bwi bwi-file-text tw-text-2xl text-muted"
+        ></i>
+        <i
+          slot="start"
+          *ngIf="send.type === sendType.File"
+          class="bwi bwi-file tw-text-2xl text-muted"
+        ></i>
+        {{ send.name }}
+        <span slot="secondary">
+          {{ "deletionDate" | i18n }}:&nbsp;{{ send.deletionDate | date: "mediumDate" }}
+        </span>
+        <ng-container slot="end">
+          <bit-item-action>
+            <button
+              type="button"
+              (click)="copySendLink(send)"
+              appA11yTitle="{{ 'copyLink' | i18n }} - {{ send.name }}"
+            >
+              <i class="bwi tw-text-lg bwi-clone"></i>
+            </button>
+          </bit-item-action>
+          <bit-item-action>
+            <button
+              type="button"
+              (click)="deleteSend(send)"
+              appA11yTitle="{{ 'delete' | i18n }} - {{ send.name }}"
+            >
+              <i class="bwi tw-text-lg bwi-trash"></i>
+            </button>
+          </bit-item-action>
+        </ng-container>
+      </button>
+    </bit-item>
+  </bit-item-group>
+</bit-section>

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

@@ -0,0 +1,126 @@
+import { CommonModule } from "@angular/common";
+import { ComponentFixture, TestBed } from "@angular/core/testing";
+import { RouterTestingModule } from "@angular/router/testing";
+import { MockProxy, mock } from "jest-mock-extended";
+import { of } from "rxjs";
+
+import { JslibModule } from "@bitwarden/angular/jslib.module";
+import { EnvironmentService } from "@bitwarden/common/platform/abstractions/environment.service";
+import { I18nService } from "@bitwarden/common/platform/abstractions/i18n.service";
+import { LogService } from "@bitwarden/common/platform/abstractions/log.service";
+import { PlatformUtilsService } from "@bitwarden/common/platform/abstractions/platform-utils.service";
+import { SelfHostedEnvironment } from "@bitwarden/common/platform/services/default-environment.service";
+import { SendView } from "@bitwarden/common/tools/send/models/view/send.view";
+import { SendApiService } from "@bitwarden/common/tools/send/services/send-api.service.abstraction";
+import {
+  ButtonModule,
+  BadgeModule,
+  DialogService,
+  IconButtonModule,
+  ItemModule,
+  SectionComponent,
+  SectionHeaderComponent,
+  ToastService,
+  TypographyModule,
+} from "@bitwarden/components";
+
+import { SendListItemsContainerComponent } from "./send-list-items-container.component";
+
+describe("SendListItemsContainerComponent", () => {
+  let component: SendListItemsContainerComponent;
+  let fixture: ComponentFixture<SendListItemsContainerComponent>;
+  let environmentService: MockProxy<EnvironmentService>;
+
+  const openSimpleDialog = jest.fn();
+  const showToast = jest.fn();
+  const copyToClipboard = jest.fn().mockImplementation(() => {});
+  const deleteFn = jest.fn().mockResolvedValue(undefined);
+
+  beforeEach(async () => {
+    await TestBed.configureTestingModule({
+      imports: [
+        CommonModule,
+        RouterTestingModule,
+        JslibModule,
+        ItemModule,
+        ButtonModule,
+        BadgeModule,
+        IconButtonModule,
+        SectionComponent,
+        SectionHeaderComponent,
+        TypographyModule,
+      ],
+      providers: [
+        { provide: EnvironmentService, useValue: environmentService },
+        { provide: I18nService, useValue: { t: (key: string) => key } },
+        { provide: LogService, useValue: mock<LogService>() },
+        { provide: PlatformUtilsService, useValue: { copyToClipboard } },
+        { provide: SendApiService, useValue: { delete: deleteFn } },
+        { provide: ToastService, useValue: { showToast } },
+      ],
+    })
+      .overrideProvider(DialogService, {
+        useValue: {
+          openSimpleDialog,
+        },
+      })
+      .compileComponents();
+
+    environmentService = mock<EnvironmentService>();
+    Object.defineProperty(environmentService, "environment$", {
+      configurable: true,
+      get: () => of(new SelfHostedEnvironment({ webVault: "https://example.com" })),
+    });
+
+    deleteFn.mockClear();
+    showToast.mockClear();
+    openSimpleDialog.mockClear();
+    copyToClipboard.mockClear();
+
+    fixture = TestBed.createComponent(SendListItemsContainerComponent);
+    component = fixture.componentInstance;
+  });
+
+  it("should create", () => {
+    expect(component).toBeTruthy();
+  });
+
+  it("should delete a send", async () => {
+    openSimpleDialog.mockResolvedValue(true);
+    const send = { id: "123", accessId: "abc", urlB64Key: "xyz" } as SendView;
+
+    await component.deleteSend(send);
+
+    expect(openSimpleDialog).toHaveBeenCalled();
+    expect(deleteFn).toHaveBeenCalledWith(send.id);
+    expect(showToast).toHaveBeenCalledWith({
+      variant: "success",
+      title: null,
+      message: "deletedSend",
+    });
+  });
+
+  it("should handle delete send cancellation", async () => {
+    const send = { id: "123", accessId: "abc", urlB64Key: "xyz" } as SendView;
+    openSimpleDialog.mockResolvedValue(false);
+
+    await component.deleteSend(send);
+
+    expect(openSimpleDialog).toHaveBeenCalled();
+    expect(deleteFn).not.toHaveBeenCalled();
+    expect(showToast).not.toHaveBeenCalled();
+  });
+
+  it("should copy send link", async () => {
+    const send = { id: "123", accessId: "abc", urlB64Key: "xyz" } as SendView;
+
+    await component.copySendLink(send);
+
+    expect(copyToClipboard).toHaveBeenCalledWith("https://example.com/#/send/abc/xyz");
+    expect(showToast).toHaveBeenCalledWith({
+      variant: "success",
+      title: null,
+      message: "valueCopied",
+    });
+  });
+});

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

@@ -0,0 +1,95 @@
+import { CommonModule } from "@angular/common";
+import { Component, Input } from "@angular/core";
+import { RouterLink } from "@angular/router";
+import { firstValueFrom } from "rxjs";
+
+import { JslibModule } from "@bitwarden/angular/jslib.module";
+import { EnvironmentService } from "@bitwarden/common/platform/abstractions/environment.service";
+import { I18nService } from "@bitwarden/common/platform/abstractions/i18n.service";
+import { LogService } from "@bitwarden/common/platform/abstractions/log.service";
+import { PlatformUtilsService } from "@bitwarden/common/platform/abstractions/platform-utils.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 {
+  BadgeModule,
+  ButtonModule,
+  DialogService,
+  IconButtonModule,
+  ItemModule,
+  SectionComponent,
+  SectionHeaderComponent,
+  ToastService,
+  TypographyModule,
+} from "@bitwarden/components";
+
+@Component({
+  imports: [
+    CommonModule,
+    ItemModule,
+    ButtonModule,
+    BadgeModule,
+    IconButtonModule,
+    SectionComponent,
+    TypographyModule,
+    JslibModule,
+    SectionHeaderComponent,
+    RouterLink,
+  ],
+  selector: "app-send-list-items-container",
+  templateUrl: "send-list-items-container.component.html",
+  standalone: true,
+})
+export class SendListItemsContainerComponent {
+  sendType = SendType;
+  /**
+   * The list of sends to display.
+   */
+  @Input()
+  sends: SendView[] = [];
+
+  constructor(
+    protected dialogService: DialogService,
+    protected environmentService: EnvironmentService,
+    protected i18nService: I18nService,
+    protected logService: LogService,
+    protected platformUtilsService: PlatformUtilsService,
+    protected sendApiService: SendApiService,
+    protected toastService: ToastService,
+  ) {}
+
+  async deleteSend(s: SendView): Promise<boolean> {
+    const confirmed = await this.dialogService.openSimpleDialog({
+      title: { key: "deleteSend" },
+      content: { key: "deleteSendConfirmation" },
+      type: "warning",
+    });
+
+    if (!confirmed) {
+      return false;
+    }
+
+    await this.sendApiService.delete(s.id);
+
+    try {
+      this.toastService.showToast({
+        variant: "success",
+        title: null,
+        message: this.i18nService.t("deletedSend"),
+      });
+    } catch (e) {
+      this.logService.error(e);
+    }
+  }
+
+  async copySendLink(s: SendView) {
+    const env = await firstValueFrom(this.environmentService.environment$);
+    const link = env.getSendUrl() + s.accessId + "/" + s.urlB64Key;
+    this.platformUtilsService.copyToClipboard(link);
+    this.toastService.showToast({
+      variant: "success",
+      title: null,
+      message: this.i18nService.t("valueCopied", this.i18nService.t("sendLink")),
+    });
+  }
+}