[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

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,
+    };
+  }
+}