From 5d2fe9403b17791338a400c84ae69e875ea1b90c Mon Sep 17 00:00:00 2001 From: Jordan Aasen <166539328+jaasen-livefront@users.noreply.github.com> Date: Tue, 23 Jul 2024 11:48:20 -0700 Subject: [PATCH] [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 9f65ded13f1dfd38c80da6e0ce4f1d0c48eb8b59, reversing changes made to 63f95600e847afa28ef0e200543c3dd90d5ac233. * fix icons and class name * fix names. add export * add more coverage --- .../tools/popup/send-v2/send-v2.component.ts | 7 +- libs/tools/send/send-ui/jest.config.js | 6 +- libs/tools/send/send-ui/src/index.ts | 1 + .../send-list-filters.component.html | 11 +++ .../send-list-filters.component.ts | 25 +++++ .../send-list-filters.service.spec.ts | 78 +++++++++++++++ .../src/services/send-list-filters.service.ts | 98 +++++++++++++++++++ libs/tools/send/send-ui/test.setup.ts | 1 + libs/tools/send/send-ui/tsconfig.spec.json | 5 +- 9 files changed, 227 insertions(+), 5 deletions(-) create mode 100644 libs/tools/send/send-ui/src/send-list-filters/send-list-filters.component.html create mode 100644 libs/tools/send/send-ui/src/send-list-filters/send-list-filters.component.ts create mode 100644 libs/tools/send/send-ui/src/services/send-list-filters.service.spec.ts create mode 100644 libs/tools/send/send-ui/src/services/send-list-filters.service.ts create mode 100644 libs/tools/send/send-ui/test.setup.ts diff --git a/apps/browser/src/tools/popup/send-v2/send-v2.component.ts b/apps/browser/src/tools/popup/send-v2/send-v2.component.ts index fba14b762b1..ebb014e4fcf 100644 --- a/apps/browser/src/tools/popup/send-v2/send-v2.component.ts +++ b/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 { diff --git a/libs/tools/send/send-ui/jest.config.js b/libs/tools/send/send-ui/jest.config.js index 100075fc7a7..b68bda8d5ca 100644 --- a/libs/tools/send/send-ui/jest.config.js +++ b/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: ["/test.setup.ts"], moduleNameMapper: pathsToModuleNameMapper(compilerOptions?.paths || {}, { - prefix: "/../../../", + prefix: "/../../", }), }; diff --git a/libs/tools/send/send-ui/src/index.ts b/libs/tools/send/send-ui/src/index.ts index 7e3b3d7b32f..c85d646bbd1 100644 --- a/libs/tools/send/send-ui/src/index.ts +++ b/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"; diff --git a/libs/tools/send/send-ui/src/send-list-filters/send-list-filters.component.html b/libs/tools/send/send-ui/src/send-list-filters/send-list-filters.component.html new file mode 100644 index 00000000000..e74e2f05627 --- /dev/null +++ b/libs/tools/send/send-ui/src/send-list-filters/send-list-filters.component.html @@ -0,0 +1,11 @@ +
+
+ + +
+
diff --git a/libs/tools/send/send-ui/src/send-list-filters/send-list-filters.component.ts b/libs/tools/send/send-ui/src/send-list-filters/send-list-filters.component.ts new file mode 100644 index 00000000000..ccdaa293241 --- /dev/null +++ b/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(); + } +} diff --git a/libs/tools/send/send-ui/src/services/send-list-filters.service.spec.ts b/libs/tools/send/send-ui/src/services/send-list-filters.service.spec.ts new file mode 100644 index 00000000000..023d0e32145 --- /dev/null +++ b/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(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 }); + }); +}); diff --git a/libs/tools/send/send-ui/src/services/send-list-filters.service.ts b/libs/tools/send/send-ui/src/services/send-list-filters.service.ts new file mode 100644 index 00000000000..0d2763b880d --- /dev/null +++ b/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(INITIAL_FILTERS); + + /** + * Observable for `filterForm` value + */ + filters$ = this.filterForm.valueChanges.pipe( + startWith(INITIAL_FILTERS), + ) as Observable; + + 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[] = [ + { + 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( + item: TreeNode, + icon: string, + ): ChipSelectOption { + return { + value: item.node, + label: item.node.name, + icon, + children: item.children + ? item.children.map((i) => this.convertToChipSelectOption(i, icon)) + : undefined, + }; + } +} diff --git a/libs/tools/send/send-ui/test.setup.ts b/libs/tools/send/send-ui/test.setup.ts new file mode 100644 index 00000000000..a702c633967 --- /dev/null +++ b/libs/tools/send/send-ui/test.setup.ts @@ -0,0 +1 @@ +import "jest-preset-angular/setup-jest"; diff --git a/libs/tools/send/send-ui/tsconfig.spec.json b/libs/tools/send/send-ui/tsconfig.spec.json index fc8520e7376..919530506de 100644 --- a/libs/tools/send/send-ui/tsconfig.spec.json +++ b/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"] }