[PM-9854] - Send Search Component (#10278)

* 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 send items service * and send list filters and service * undo changes to jest config * add specs for send list filters * Revert "Merge branch 'PM-9853' into PM-9852" This reverts commit 9f65ded13f, reversing changes made to 63f95600e8. * add send items service * Revert "Revert "Merge branch 'PM-9853' into PM-9852"" This reverts commit 81e9860c25. * finish send search * fix formControlName * add specs * finalize send search * layout and copy fixes * cleanup * Remove unneeded empty file * Remove the erroneous addition of send-list-filters to vault-export tsconfig * update tests * hide send list filters for non-premium users * fix and add specss * Fix small typo * Re-add missing tests * Remove unused NgZone * Rename selector for send-search --------- Co-authored-by: Daniel James Smith <djsmith85@users.noreply.github.com> Co-authored-by: Daniel James Smith <2670567+djsmith85@users.noreply.github.com>
2025-12-15 07:43:35 +00:00 · 2024-08-07 05:34:03 -07:00
parent 5b47ca1011
commit af14c3fe6d
18 changed files with 514 additions and 53 deletions
--- a/apps/browser/src/_locales/en/messages.json
+++ b/apps/browser/src/_locales/en/messages.json
@@ -4097,6 +4097,12 @@
  "itemLocation": {
    "message": "Item Location"
  },
+  "fileSends": {
+    "message": "File Sends"
+  },
+  "textSends": {
+    "message": "Text Sends"
+  },
  "bitwardenNewLook": {
    "message": "Bitwarden has a new look!"
  },
--- a/apps/browser/src/tools/popup/send-v2/send-v2.component.html
+++ b/apps/browser/src/tools/popup/send-v2/send-v2.component.html
@@ -8,12 +8,32 @@
    </ng-container>
  </popup-header>

-  <div *ngIf="sends.length === 0" class="tw-flex tw-flex-col tw-h-full tw-justify-center">
+  <div
+    *ngIf="listState === sendState.Empty"
+    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" />
+
+  <ng-container *ngIf="listState !== sendState.Empty">
+    <div
+      *ngIf="listState === sendState.NoResults"
+      class="tw-flex tw-flex-col tw-justify-center tw-h-auto tw-pt-12"
+    >
+      <bit-no-items [icon]="noResultsIcon">
+        <ng-container slot="title">{{ "noItemsMatchSearch" | i18n }}</ng-container>
+        <ng-container slot="description">{{ "clearFiltersOrTryAnother" | i18n }}</ng-container>
+      </bit-no-items>
+    </div>
+    <app-send-list-items-container [headerText]="title | i18n" [sends]="sends$ | async" />
+  </ng-container>
+
+  <div slot="above-scroll-area" class="tw-p-4" *ngIf="listState !== sendState.Empty">
+    <tools-send-search></tools-send-search>
+    <app-send-list-filters></app-send-list-filters>
+  </div>
 </popup-page>
--- a/apps/browser/src/tools/popup/send-v2/send-v2.component.spec.ts
+++ b/apps/browser/src/tools/popup/send-v2/send-v2.component.spec.ts
@@ -1,11 +1,12 @@
 import { CommonModule } from "@angular/common";
 import { ComponentFixture, TestBed } from "@angular/core/testing";
-import { RouterLink } from "@angular/router";
+import { FormBuilder, ReactiveFormsModule } from "@angular/forms";
 import { RouterTestingModule } from "@angular/router/testing";
-import { mock } from "jest-mock-extended";
-import { Observable, of } from "rxjs";
+import { MockProxy, mock } from "jest-mock-extended";
+import { of, BehaviorSubject } from "rxjs";

 import { JslibModule } from "@bitwarden/angular/jslib.module";
+import { SearchService } from "@bitwarden/common/abstractions/search.service";
 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";
@@ -15,6 +16,7 @@ import { EnvironmentService } from "@bitwarden/common/platform/abstractions/envi
 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 { SendService } from "@bitwarden/common/tools/send/services/send.service.abstraction";
@@ -22,7 +24,10 @@ import { ButtonModule, NoItemsModule } from "@bitwarden/components";
 import {
  NewSendDropdownComponent,
  SendListItemsContainerComponent,
+  SendItemsService,
+  SendSearchComponent,
  SendListFiltersComponent,
+  SendListFiltersService,
 } from "@bitwarden/send-ui";

 import { CurrentAccountComponent } from "../../../auth/popup/account-switching/current-account.component";
@@ -30,31 +35,49 @@ 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";

-import { SendV2Component } from "./send-v2.component";
+import { SendV2Component, SendState } from "./send-v2.component";

 describe("SendV2Component", () => {
  let component: SendV2Component;
  let fixture: ComponentFixture<SendV2Component>;
-  let sendViews$: Observable<SendView[]>;
+  let sendItemsService: MockProxy<SendItemsService>;
+  let sendListFiltersService: SendListFiltersService;
+  let sendListFiltersServiceFilters$: BehaviorSubject<{ sendType: SendType | null }>;
+  let sendItemsServiceEmptyList$: BehaviorSubject<boolean>;
+  let sendItemsServiceNoFilteredResults$: BehaviorSubject<boolean>;

  beforeEach(async () => {
-    sendViews$ = of([
-      { id: "1", name: "Send A" },
-      { id: "2", name: "Send B" },
-    ] as SendView[]);
+    sendListFiltersServiceFilters$ = new BehaviorSubject({ sendType: null });
+    sendItemsServiceEmptyList$ = new BehaviorSubject(false);
+    sendItemsServiceNoFilteredResults$ = new BehaviorSubject(false);
+
+    sendItemsService = mock<SendItemsService>({
+      filteredAndSortedSends$: of([
+        { id: "1", name: "Send A" },
+        { id: "2", name: "Send B" },
+      ] as SendView[]),
+      latestSearchText$: of(""),
+    });
+
+    sendListFiltersService = new SendListFiltersService(mock(), new FormBuilder());
+
+    sendListFiltersService.filters$ = sendListFiltersServiceFilters$;
+    sendItemsService.emptyList$ = sendItemsServiceEmptyList$;
+    sendItemsService.noFilteredResults$ = sendItemsServiceNoFilteredResults$;

    await TestBed.configureTestingModule({
      imports: [
        CommonModule,
        RouterTestingModule,
        JslibModule,
-        NoItemsModule,
+        ReactiveFormsModule,
        ButtonModule,
        NoItemsModule,
-        RouterLink,
        NewSendDropdownComponent,
        SendListItemsContainerComponent,
        SendListFiltersComponent,
+        SendSearchComponent,
+        SendV2Component,
        PopupPageComponent,
        PopupHeaderComponent,
        PopOutComponent,
@@ -66,21 +89,24 @@ describe("SendV2Component", () => {
        { provide: AvatarService, useValue: mock<AvatarService>() },
        {
          provide: BillingAccountProfileStateService,
-          useValue: mock<BillingAccountProfileStateService>(),
+          useValue: { hasPremiumFromAnySource$: of(false) },
        },
        { 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: SendItemsService, useValue: mock<SendItemsService>() },
+        { provide: SearchService, useValue: mock<SearchService>() },
+        { provide: SendService, useValue: { sendViews$: new BehaviorSubject<SendView[]>([]) } },
+        { provide: SendItemsService, useValue: sendItemsService },
        { provide: I18nService, useValue: { t: (key: string) => key } },
+        { provide: SendListFiltersService, useValue: sendListFiltersService },
      ],
    }).compileComponents();

    fixture = TestBed.createComponent(SendV2Component);
    component = fixture.componentInstance;
-
    fixture.detectChanges();
  });

@@ -88,14 +114,21 @@ describe("SendV2Component", () => {
    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[];
+  it("should update the title based on the current filter", () => {
+    sendListFiltersServiceFilters$.next({ sendType: SendType.File });
+    fixture.detectChanges();
+    expect(component["title"]).toBe("fileSends");
+  });

-    await component.ngOnInit();
+  it("should set listState to Empty when emptyList$ emits true", () => {
+    sendItemsServiceEmptyList$.next(true);
+    fixture.detectChanges();
+    expect(component["listState"]).toBe(SendState.Empty);
+  });

-    expect(component.sends).toEqual(sortedSends);
+  it("should set listState to NoResults when noFilteredResults$ emits true", () => {
+    sendItemsServiceNoFilteredResults$.next(true);
+    fixture.detectChanges();
+    expect(component["listState"]).toBe(SendState.NoResults);
  });
 });
--- a/apps/browser/src/tools/popup/send-v2/send-v2.component.ts
+++ b/apps/browser/src/tools/popup/send-v2/send-v2.component.ts
@@ -1,18 +1,20 @@
 import { CommonModule } from "@angular/common";
 import { Component, OnDestroy, OnInit } from "@angular/core";
+import { takeUntilDestroyed } from "@angular/core/rxjs-interop";
 import { RouterLink } from "@angular/router";
-import { mergeMap, Subject, takeUntil } from "rxjs";
+import { combineLatest } 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 { ButtonModule, Icons, NoItemsModule } from "@bitwarden/components";
 import {
  NoSendsIcon,
  NewSendDropdownComponent,
  SendListItemsContainerComponent,
+  SendItemsService,
+  SendSearchComponent,
  SendListFiltersComponent,
+  SendListFiltersService,
 } from "@bitwarden/send-ui";

 import { CurrentAccountComponent } from "../../../auth/popup/account-switching/current-account.component";
@@ -20,6 +22,11 @@ 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";

+export enum SendState {
+  Empty,
+  NoResults,
+}
+
@Component({
  templateUrl: "send-v2.component.html",
  standalone: true,
@@ -36,29 +43,56 @@ import { PopupPageComponent } from "../../../platform/popup/layout/popup-page.co
    NewSendDropdownComponent,
    SendListItemsContainerComponent,
    SendListFiltersComponent,
+    SendSearchComponent,
  ],
 })
 export class SendV2Component implements OnInit, OnDestroy {
  sendType = SendType;

-  private destroy$ = new Subject<void>();
+  sendState = SendState;

-  sends: SendView[] = [];
+  protected listState: SendState | null = null;
+
+  protected sends$ = this.sendItemsService.filteredAndSortedSends$;
+
+  protected title: string = "allSends";

  protected noItemIcon = NoSendsIcon;

-  constructor(protected sendService: SendService) {}
+  protected noResultsIcon = Icons.NoResults;

-  async ngOnInit() {
-    this.sendService.sendViews$
-      .pipe(
-        mergeMap(async (sends) => {
-          this.sends = sends.sort((a, b) => a.name.localeCompare(b.name));
-        }),
-        takeUntil(this.destroy$),
-      )
-      .subscribe();
+  constructor(
+    protected sendItemsService: SendItemsService,
+    protected sendListFiltersService: SendListFiltersService,
+  ) {
+    combineLatest([
+      this.sendItemsService.emptyList$,
+      this.sendItemsService.noFilteredResults$,
+      this.sendListFiltersService.filters$,
+    ])
+      .pipe(takeUntilDestroyed())
+      .subscribe(([emptyList, noFilteredResults, currentFilter]) => {
+        if (currentFilter?.sendType !== null) {
+          this.title = `${this.sendType[currentFilter.sendType].toLowerCase()}Sends`;
+        } else {
+          this.title = "allSends";
+        }
+
+        if (emptyList) {
+          this.listState = SendState.Empty;
+          return;
+        }
+
+        if (noFilteredResults) {
+          this.listState = SendState.NoResults;
+          return;
+        }
+
+        this.listState = null;
+      });
  }

+  ngOnInit(): void {}
+
  ngOnDestroy(): void {}
 }
--- a/apps/desktop/src/locales/en/messages.json
+++ b/apps/desktop/src/locales/en/messages.json
@@ -3043,5 +3043,11 @@
  },
  "data": {
    "message": "Data"
+  },
+  "fileSends": {
+    "message": "File Sends"
+  },
+  "textSends": {
+    "message": "Text Sends"
  }
 }
--- a/apps/web/src/locales/en/messages.json
+++ b/apps/web/src/locales/en/messages.json
@@ -8795,6 +8795,12 @@
  "purchasedSeatsRemoved": {
    "message": "purchased seats removed"
  },
+  "fileSends": {
+    "message": "File Sends"
+  },
+  "textSends": {
+    "message": "Text Sends"
+  },
  "includesXMembers": {
    "message": "for $COUNT$ member",
    "placeholders": {