[PM-9852] - Add SendListFilters component (#10192)

* and send list filters and service

* undo changes to jest config

* add specs for send list filters

* send list items container

* update send list items container

* finalize send list container

* Revert "Merge branch 'PM-9853' into PM-9852"

This reverts commit 9f65ded13f, reversing
changes made to 63f95600e8.

* fix icons and class name

* fix names. add export

* add more coverage

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

@@ -5,7 +5,11 @@ import { RouterLink } from "@angular/router";
 import { JslibModule } from "@bitwarden/angular/jslib.module";
 import { SendType } from "@bitwarden/common/tools/send/enums/send-type";
 import { ButtonModule, NoItemsModule } from "@bitwarden/components";
-import { NoSendsIcon, NewSendDropdownComponent } from "@bitwarden/send-ui";
+import {
+  NoSendsIcon,
+  NewSendDropdownComponent,
+  SendListFiltersComponent,
+} from "@bitwarden/send-ui";
 
 import { CurrentAccountComponent } from "../../../auth/popup/account-switching/current-account.component";
 import { PopOutComponent } from "../../../platform/popup/components/pop-out.component";
@@ -30,6 +34,7 @@ enum SendsListState {
     ButtonModule,
     RouterLink,
     NewSendDropdownComponent,
+    SendListFiltersComponent,
   ],
 })
 export class SendV2Component implements OnInit, OnDestroy {

libs/tools/send/send-ui/jest.config.js

@@ -5,9 +5,9 @@ const { compilerOptions } = require("../../../shared/tsconfig.libs");
 /** @type {import('jest').Config} */
 module.exports = {
   testMatch: ["**/+(*.)+(spec).+(ts)"],
-  preset: "ts-jest",
-  testEnvironment: "jsdom",
+  preset: "jest-preset-angular",
+  setupFilesAfterEnv: ["<rootDir>/test.setup.ts"],
   moduleNameMapper: pathsToModuleNameMapper(compilerOptions?.paths || {}, {
-    prefix: "<rootDir>/../../../",
+    prefix: "<rootDir>/../../",
   }),
 };

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

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

libs/tools/send/send-ui/src/send-list-filters/send-list-filters.component.html

@@ -0,0 +1,11 @@
+<div role="toolbar" [ariaLabel]="'filters' | i18n">
+  <form [formGroup]="filterForm" class="tw-flex tw-flex-wrap tw-gap-2 tw-mb-6 tw-mt-2">
+    <bit-chip-select
+      formControlName="sendTypes"
+      placeholderIcon="bwi-list"
+      [placeholderText]="'type' | i18n"
+      [options]="sendTypes"
+    >
+    </bit-chip-select>
+  </form>
+</div>

libs/tools/send/send-ui/src/send-list-filters/send-list-filters.component.ts

@@ -0,0 +1,25 @@
+import { CommonModule } from "@angular/common";
+import { Component, OnDestroy } from "@angular/core";
+import { ReactiveFormsModule } from "@angular/forms";
+
+import { JslibModule } from "@bitwarden/angular/jslib.module";
+import { ChipSelectComponent } from "@bitwarden/components";
+
+import { SendListFiltersService } from "../services/send-list-filters.service";
+
+@Component({
+  standalone: true,
+  selector: "app-send-list-filters",
+  templateUrl: "./send-list-filters.component.html",
+  imports: [CommonModule, JslibModule, ChipSelectComponent, ReactiveFormsModule],
+})
+export class SendListFiltersComponent implements OnDestroy {
+  protected filterForm = this.sendListFiltersService.filterForm;
+  protected sendTypes = this.sendListFiltersService.sendTypes;
+
+  constructor(private sendListFiltersService: SendListFiltersService) {}
+
+  ngOnDestroy(): void {
+    this.sendListFiltersService.resetFilterForm();
+  }
+}

libs/tools/send/send-ui/src/services/send-list-filters.service.spec.ts

@@ -0,0 +1,78 @@
+import { TestBed } from "@angular/core/testing";
+import { FormBuilder } from "@angular/forms";
+import { BehaviorSubject, first } from "rxjs";
+
+import { PolicyService } from "@bitwarden/common/admin-console/abstractions/policy/policy.service.abstraction";
+import { I18nService } from "@bitwarden/common/platform/abstractions/i18n.service";
+import { SendType } from "@bitwarden/common/tools/send/enums/send-type";
+import { Send } from "@bitwarden/common/tools/send/models/domain/send";
+
+import { SendListFiltersService } from "./send-list-filters.service";
+
+describe("SendListFiltersService", () => {
+  let service: SendListFiltersService;
+  const policyAppliesToActiveUser$ = new BehaviorSubject<boolean>(false);
+
+  const i18nService = {
+    t: (key: string) => key,
+  } as I18nService;
+
+  const policyService = {
+    policyAppliesToActiveUser$: jest.fn(() => policyAppliesToActiveUser$),
+  };
+
+  beforeEach(() => {
+    policyAppliesToActiveUser$.next(false);
+    policyService.policyAppliesToActiveUser$.mockClear();
+
+    TestBed.configureTestingModule({
+      providers: [
+        {
+          provide: I18nService,
+          useValue: i18nService,
+        },
+        {
+          provide: PolicyService,
+          useValue: policyService,
+        },
+        { provide: FormBuilder, useClass: FormBuilder },
+      ],
+    });
+
+    service = TestBed.inject(SendListFiltersService);
+  });
+
+  it("returns all send types", () => {
+    expect(service.sendTypes.map((c) => c.value)).toEqual([SendType.File, SendType.Text]);
+  });
+
+  it("filters disabled sends", (done) => {
+    const sends = [{ disabled: true }, { disabled: false }, { disabled: true }] as Send[];
+    service.filterFunction$.pipe(first()).subscribe((filterFunction) => {
+      expect(filterFunction(sends)).toEqual([sends[1]]);
+      done();
+    });
+
+    service.filterForm.patchValue({});
+  });
+
+  it("resets the filter form", () => {
+    service.filterForm.patchValue({ sendType: SendType.Text });
+    service.resetFilterForm();
+    expect(service.filterForm.value).toEqual({ sendType: null });
+  });
+
+  it("filters by sendType", (done) => {
+    const sends = [
+      { type: SendType.File },
+      { type: SendType.Text },
+      { type: SendType.File },
+    ] as Send[];
+    service.filterFunction$.subscribe((filterFunction) => {
+      expect(filterFunction(sends)).toEqual([sends[1]]);
+      done();
+    });
+
+    service.filterForm.patchValue({ sendType: SendType.Text });
+  });
+});

libs/tools/send/send-ui/src/services/send-list-filters.service.ts

@@ -0,0 +1,98 @@
+import { Injectable } from "@angular/core";
+import { FormBuilder } from "@angular/forms";
+import { map, Observable, startWith } from "rxjs";
+
+import { I18nService } from "@bitwarden/common/platform/abstractions/i18n.service";
+import { SendType } from "@bitwarden/common/tools/send/enums/send-type";
+import { Send } from "@bitwarden/common/tools/send/models/domain/send";
+import { ITreeNodeObject, TreeNode } from "@bitwarden/common/vault/models/domain/tree-node";
+import { ChipSelectOption } from "@bitwarden/components";
+
+export type SendListFilter = {
+  sendType: SendType | null;
+};
+
+const INITIAL_FILTERS: SendListFilter = {
+  sendType: null,
+};
+
+@Injectable({
+  providedIn: "root",
+})
+export class SendListFiltersService {
+  /**
+   * UI form for all filters
+   */
+  filterForm = this.formBuilder.group<SendListFilter>(INITIAL_FILTERS);
+
+  /**
+   * Observable for `filterForm` value
+   */
+  filters$ = this.filterForm.valueChanges.pipe(
+    startWith(INITIAL_FILTERS),
+  ) as Observable<SendListFilter>;
+
+  constructor(
+    private i18nService: I18nService,
+    private formBuilder: FormBuilder,
+  ) {}
+
+  /**
+   * Observable whose value is a function that filters an array of `Send` objects based on the current filters
+   */
+  filterFunction$: Observable<(send: Send[]) => Send[]> = this.filters$.pipe(
+    map(
+      (filters) => (sends: Send[]) =>
+        sends.filter((send) => {
+          // do not show disabled sends
+          if (send.disabled) {
+            return false;
+          }
+
+          if (filters.sendType !== null && send.type !== filters.sendType) {
+            return false;
+          }
+
+          return true;
+        }),
+    ),
+  );
+
+  /**
+   * All available send types
+   */
+  readonly sendTypes: ChipSelectOption<SendType>[] = [
+    {
+      value: SendType.File,
+      label: this.i18nService.t("file"),
+      icon: "bwi-file",
+    },
+    {
+      value: SendType.Text,
+      label: this.i18nService.t("text"),
+      icon: "bwi-file-text",
+    },
+  ];
+
+  /** Resets `filterForm` to the original state */
+  resetFilterForm(): void {
+    this.filterForm.reset(INITIAL_FILTERS);
+  }
+
+  /**
+   * Converts the given item into the `ChipSelectOption` structure
+   */
+  private convertToChipSelectOption<T extends ITreeNodeObject>(
+    item: TreeNode<T>,
+    icon: string,
+  ): ChipSelectOption<T> {
+    return {
+      value: item.node,
+      label: item.node.name,
+      icon,
+      children: item.children
+        ? item.children.map((i) => this.convertToChipSelectOption(i, icon))
+        : undefined,
+    };
+  }
+}

libs/tools/send/send-ui/test.setup.ts

@@ -0,0 +1 @@
+import "jest-preset-angular/setup-jest";

libs/tools/send/send-ui/tsconfig.spec.json

@@ -1,3 +1,6 @@
 {
-  "extends": "./tsconfig.json"
+  "extends": "./tsconfig.json",
+  "include": ["src"],
+  "files": ["./test.setup.ts"],
+  "exclude": ["node_modules", "dist"]
 }