mirror of
https://github.com/bitwarden/browser
synced 2025-12-15 07:43:35 +00:00
[PM-6826] Vault filter refresh (#9365)
* add initial type filter - use `bit-select` while the chip component is being developed * get cipherTypes$ from service - integrate with user settings * initial add of folder selection * initial add of vault selection * initial add of collections filter * update `VaultPopupListFilterService` to `VaultPopupListFiltersService` * integrate hasFilterApplied$ * intermediate commit of integration to the filters component * do not return the tree when the value is null * return null when the updated option is null * update vault-popup-list to conform to the chip select structure * integration of bit-chip-select * move "no folder" option to the end of the list * show danger icon for deactivated organizations * show deactivated warning when the filtered org is disabled * update documentation * use pascal case for constants * store filter values as full objects rather than just id - This allows secondary logic to be applied when filters are selected * move filter form into service to be the source of truth * fix tests after adding "jest-preset-angular/setup-jest" * remove logic to have dynamic cipher type filters * use ProductType enum * invert conditional for less nesting * prefer `decryptedCollections$` over getAllDecrypted * update comments * use a `filterFunction$` observable rather than having to pass filters back to the service * fix children testing * remove check for no folder * reset filter form when filter component is destroyed * add takeUntilDestroyed for organization valueChanges * allow takeUntilDestroyed to use internal destroy ref - The associated unit tests needed to be configured with TestBed rather than just `new Service()` for this to work * use controls object for type safety
This commit is contained in:
Nick Krantz
GitHub
@@ -224,7 +224,7 @@
|
||||
},
|
||||
"continueToAuthenticatorPageDesc": {
|
||||
"message": "Bitwarden Authenticator allows you to store authenticator keys and generate TOTP codes for 2-step verification flows. Learn more on the bitwarden.com website"
|
||||
},
|
||||
},
|
||||
"bitwardenSecretsManager": {
|
||||
"message": "Bitwarden Secrets Manager"
|
||||
},
|
||||
@@ -3333,5 +3333,14 @@
|
||||
"example": "Work"
|
||||
}
|
||||
}
|
||||
},
|
||||
"itemsWithNoFolder": {
|
||||
"message": "Items with no folder"
|
||||
},
|
||||
"organizationIsDeactivated": {
|
||||
"message": "Organization is deactivated"
|
||||
},
|
||||
"contactYourOrgAdmin": {
|
||||
"message": "Items in deactivated organizations cannot be accessed. Contact your organization owner for assistance."
|
||||
}
|
||||
}
|
||||
|
||||
@@ -0,0 +1,39 @@
|
||||
<form [formGroup]="filterForm" class="tw-flex tw-flex-wrap tw-gap-2 tw-mb-6 tw-mt-2">
|
||||
<ng-container *ngIf="organizations$ | async as organizations">
|
||||
<bit-chip-select
|
||||
*ngIf="organizations.length"
|
||||
formControlName="organization"
|
||||
placeholderIcon="bwi-vault"
|
||||
[placeholderText]="'vault' | i18n"
|
||||
[options]="organizations"
|
||||
>
|
||||
</bit-chip-select>
|
||||
</ng-container>
|
||||
<ng-container *ngIf="collections$ | async as collections">
|
||||
<bit-chip-select
|
||||
*ngIf="collections.length"
|
||||
formControlName="collection"
|
||||
placeholderIcon="bwi-collection"
|
||||
[placeholderText]="'collections' | i18n"
|
||||
[options]="collections"
|
||||
>
|
||||
</bit-chip-select>
|
||||
</ng-container>
|
||||
<ng-container *ngIf="folders$ | async as folders">
|
||||
<bit-chip-select
|
||||
*ngIf="folders.length"
|
||||
placeholderIcon="bwi-folder"
|
||||
formControlName="folder"
|
||||
[placeholderText]="'folder' | i18n"
|
||||
[options]="folders"
|
||||
>
|
||||
</bit-chip-select>
|
||||
</ng-container>
|
||||
<bit-chip-select
|
||||
formControlName="cipherType"
|
||||
placeholderIcon="bwi-list"
|
||||
[placeholderText]="'types' | i18n"
|
||||
[options]="cipherTypes"
|
||||
>
|
||||
</bit-chip-select>
|
||||
</form>
|
||||
@@ -0,0 +1,28 @@
|
||||
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 { VaultPopupListFiltersService } from "../../../services/vault-popup-list-filters.service";
|
||||
|
||||
@Component({
|
||||
standalone: true,
|
||||
selector: "app-vault-list-filters",
|
||||
templateUrl: "./vault-list-filters.component.html",
|
||||
imports: [CommonModule, JslibModule, ChipSelectComponent, ReactiveFormsModule],
|
||||
})
|
||||
export class VaultListFiltersComponent implements OnDestroy {
|
||||
protected filterForm = this.vaultPopupListFiltersService.filterForm;
|
||||
protected organizations$ = this.vaultPopupListFiltersService.organizations$;
|
||||
protected collections$ = this.vaultPopupListFiltersService.collections$;
|
||||
protected folders$ = this.vaultPopupListFiltersService.folders$;
|
||||
protected cipherTypes = this.vaultPopupListFiltersService.cipherTypes;
|
||||
|
||||
constructor(private vaultPopupListFiltersService: VaultPopupListFiltersService) {}
|
||||
|
||||
ngOnDestroy(): void {
|
||||
this.vaultPopupListFiltersService.resetFilterForm();
|
||||
}
|
||||
}
|
||||
@@ -22,13 +22,13 @@
|
||||
</div>
|
||||
|
||||
<ng-container *ngIf="!(showEmptyState$ | async)">
|
||||
<!-- TODO: Filter/search Section in PM-6824 and PM-6826.-->
|
||||
|
||||
<app-vault-v2-search (searchTextChanged)="handleSearchTextChange($event)">
|
||||
</app-vault-v2-search>
|
||||
|
||||
<app-vault-list-filters></app-vault-list-filters>
|
||||
|
||||
<div
|
||||
*ngIf="showNoResultsState$ | async"
|
||||
*ngIf="(showNoResultsState$ | async) && !(showDeactivatedOrg$ | async)"
|
||||
class="tw-flex tw-flex-col tw-h-full tw-justify-center"
|
||||
>
|
||||
<bit-no-items>
|
||||
@@ -37,7 +37,17 @@
|
||||
</bit-no-items>
|
||||
</div>
|
||||
|
||||
<ng-container *ngIf="!(showNoResultsState$ | async)">
|
||||
<div
|
||||
*ngIf="showDeactivatedOrg$ | async"
|
||||
class="tw-flex tw-flex-col tw-h-full tw-justify-center"
|
||||
>
|
||||
<bit-no-items [icon]="deactivatedIcon">
|
||||
<ng-container slot="title">{{ "organizationIsDeactivated" | i18n }}</ng-container>
|
||||
<ng-container slot="description">{{ "contactYourOrgAdmin" | i18n }}</ng-container>
|
||||
</bit-no-items>
|
||||
</div>
|
||||
|
||||
<ng-container *ngIf="!(showNoResultsState$ | async) && !(showDeactivatedOrg$ | async)">
|
||||
<app-autofill-vault-list-items></app-autofill-vault-list-items>
|
||||
<app-vault-list-items-container
|
||||
[title]="'favorites' | i18n"
|
||||
|
||||
@@ -11,6 +11,7 @@ import { PopupHeaderComponent } from "../../../../platform/popup/layout/popup-he
|
||||
import { PopupPageComponent } from "../../../../platform/popup/layout/popup-page.component";
|
||||
import { VaultPopupItemsService } from "../../services/vault-popup-items.service";
|
||||
import { AutofillVaultListItemsComponent, VaultListItemsContainerComponent } from "../vault-v2";
|
||||
import { VaultListFiltersComponent } from "../vault-v2/vault-list-filters/vault-list-filters.component";
|
||||
import { VaultV2SearchComponent } from "../vault-v2/vault-search/vault-v2-search.component";
|
||||
|
||||
@Component({
|
||||
@@ -27,6 +28,7 @@ import { VaultV2SearchComponent } from "../vault-v2/vault-search/vault-v2-search
|
||||
CommonModule,
|
||||
AutofillVaultListItemsComponent,
|
||||
VaultListItemsContainerComponent,
|
||||
VaultListFiltersComponent,
|
||||
ButtonModule,
|
||||
RouterLink,
|
||||
VaultV2SearchComponent,
|
||||
@@ -38,8 +40,10 @@ export class VaultV2Component implements OnInit, OnDestroy {
|
||||
|
||||
protected showEmptyState$ = this.vaultPopupItemsService.emptyVault$;
|
||||
protected showNoResultsState$ = this.vaultPopupItemsService.noFilteredResults$;
|
||||
protected showDeactivatedOrg$ = this.vaultPopupItemsService.showDeactivatedOrg$;
|
||||
|
||||
protected vaultIcon = Icons.Vault;
|
||||
protected deactivatedIcon = Icons.DeactivatedOrg;
|
||||
|
||||
constructor(
|
||||
private vaultPopupItemsService: VaultPopupItemsService,
|
||||
|
||||
@@ -2,6 +2,7 @@ import { mock } from "jest-mock-extended";
|
||||
import { BehaviorSubject } from "rxjs";
|
||||
|
||||
import { SearchService } from "@bitwarden/common/abstractions/search.service";
|
||||
import { OrganizationService } from "@bitwarden/common/admin-console/abstractions/organization/organization.service.abstraction";
|
||||
import { CipherId } from "@bitwarden/common/types/guid";
|
||||
import { CipherService } from "@bitwarden/common/vault/abstractions/cipher.service";
|
||||
import { VaultSettingsService } from "@bitwarden/common/vault/abstractions/vault-settings/vault-settings.service";
|
||||
@@ -12,6 +13,7 @@ import { BrowserApi } from "../../../platform/browser/browser-api";
|
||||
import BrowserPopupUtils from "../../../platform/popup/browser-popup-utils";
|
||||
|
||||
import { VaultPopupItemsService } from "./vault-popup-items.service";
|
||||
import { VaultPopupListFiltersService } from "./vault-popup-list-filters.service";
|
||||
|
||||
describe("VaultPopupItemsService", () => {
|
||||
let service: VaultPopupItemsService;
|
||||
@@ -20,6 +22,8 @@ describe("VaultPopupItemsService", () => {
|
||||
|
||||
const cipherServiceMock = mock<CipherService>();
|
||||
const vaultSettingsServiceMock = mock<VaultSettingsService>();
|
||||
const organizationServiceMock = mock<OrganizationService>();
|
||||
const vaultPopupListFiltersServiceMock = mock<VaultPopupListFiltersService>();
|
||||
const searchService = mock<SearchService>();
|
||||
|
||||
beforeEach(() => {
|
||||
@@ -40,6 +44,18 @@ describe("VaultPopupItemsService", () => {
|
||||
cipherServiceMock.filterCiphersForUrl.mockImplementation(async () => autoFillCiphers);
|
||||
vaultSettingsServiceMock.showCardsCurrentTab$ = new BehaviorSubject(false).asObservable();
|
||||
vaultSettingsServiceMock.showIdentitiesCurrentTab$ = new BehaviorSubject(false).asObservable();
|
||||
|
||||
vaultPopupListFiltersServiceMock.filters$ = new BehaviorSubject({
|
||||
organization: null,
|
||||
collection: null,
|
||||
cipherType: null,
|
||||
folder: null,
|
||||
});
|
||||
// Return all ciphers, `filterFunction$` will be tested in `VaultPopupListFiltersService`
|
||||
vaultPopupListFiltersServiceMock.filterFunction$ = new BehaviorSubject(
|
||||
(ciphers: CipherView[]) => ciphers,
|
||||
);
|
||||
|
||||
jest.spyOn(BrowserPopupUtils, "inPopout").mockReturnValue(false);
|
||||
jest
|
||||
.spyOn(BrowserApi, "getTabFromCurrentWindow")
|
||||
@@ -47,6 +63,8 @@ describe("VaultPopupItemsService", () => {
|
||||
service = new VaultPopupItemsService(
|
||||
cipherServiceMock,
|
||||
vaultSettingsServiceMock,
|
||||
vaultPopupListFiltersServiceMock,
|
||||
organizationServiceMock,
|
||||
searchService,
|
||||
);
|
||||
});
|
||||
@@ -55,6 +73,8 @@ describe("VaultPopupItemsService", () => {
|
||||
service = new VaultPopupItemsService(
|
||||
cipherServiceMock,
|
||||
vaultSettingsServiceMock,
|
||||
vaultPopupListFiltersServiceMock,
|
||||
organizationServiceMock,
|
||||
searchService,
|
||||
);
|
||||
expect(service).toBeTruthy();
|
||||
@@ -87,6 +107,8 @@ describe("VaultPopupItemsService", () => {
|
||||
service = new VaultPopupItemsService(
|
||||
cipherServiceMock,
|
||||
vaultSettingsServiceMock,
|
||||
vaultPopupListFiltersServiceMock,
|
||||
organizationServiceMock,
|
||||
searchService,
|
||||
);
|
||||
|
||||
@@ -117,6 +139,8 @@ describe("VaultPopupItemsService", () => {
|
||||
service = new VaultPopupItemsService(
|
||||
cipherServiceMock,
|
||||
vaultSettingsServiceMock,
|
||||
vaultPopupListFiltersServiceMock,
|
||||
organizationServiceMock,
|
||||
searchService,
|
||||
);
|
||||
|
||||
@@ -228,6 +252,8 @@ describe("VaultPopupItemsService", () => {
|
||||
service = new VaultPopupItemsService(
|
||||
cipherServiceMock,
|
||||
vaultSettingsServiceMock,
|
||||
vaultPopupListFiltersServiceMock,
|
||||
organizationServiceMock,
|
||||
searchService,
|
||||
);
|
||||
service.emptyVault$.subscribe((empty) => {
|
||||
|
||||
@@ -2,6 +2,8 @@ import { Injectable } from "@angular/core";
|
||||
import {
|
||||
BehaviorSubject,
|
||||
combineLatest,
|
||||
distinctUntilKeyChanged,
|
||||
from,
|
||||
map,
|
||||
Observable,
|
||||
of,
|
||||
@@ -12,6 +14,7 @@ import {
|
||||
} from "rxjs";
|
||||
|
||||
import { SearchService } from "@bitwarden/common/abstractions/search.service";
|
||||
import { OrganizationService } from "@bitwarden/common/admin-console/abstractions/organization/organization.service.abstraction";
|
||||
import { CipherService } from "@bitwarden/common/vault/abstractions/cipher.service";
|
||||
import { VaultSettingsService } from "@bitwarden/common/vault/abstractions/vault-settings/vault-settings.service";
|
||||
import { CipherType } from "@bitwarden/common/vault/enums";
|
||||
@@ -20,6 +23,8 @@ import { CipherView } from "@bitwarden/common/vault/models/view/cipher.view";
|
||||
import { BrowserApi } from "../../../platform/browser/browser-api";
|
||||
import BrowserPopupUtils from "../../../platform/popup/browser-popup-utils";
|
||||
|
||||
import { MY_VAULT_ID, VaultPopupListFiltersService } from "./vault-popup-list-filters.service";
|
||||
|
||||
/**
|
||||
* Service for managing the various item lists on the new Vault tab in the browser popup.
|
||||
*/
|
||||
@@ -72,7 +77,15 @@ export class VaultPopupItemsService {
|
||||
shareReplay({ refCount: false, bufferSize: 1 }),
|
||||
);
|
||||
|
||||
private _filteredCipherList$ = combineLatest([this._cipherList$, this.searchText$]).pipe(
|
||||
private _filteredCipherList$: Observable<CipherView[]> = combineLatest([
|
||||
this._cipherList$,
|
||||
this.searchText$,
|
||||
this.vaultPopupListFiltersService.filterFunction$,
|
||||
]).pipe(
|
||||
map(([ciphers, searchText, filterFunction]): [CipherView[], string] => [
|
||||
filterFunction(ciphers),
|
||||
searchText,
|
||||
]),
|
||||
switchMap(([ciphers, searchText]) =>
|
||||
this.searchService.searchCiphers(searchText, null, ciphers),
|
||||
),
|
||||
@@ -137,10 +150,19 @@ export class VaultPopupItemsService {
|
||||
|
||||
/**
|
||||
* Observable that indicates whether a filter is currently applied to the ciphers.
|
||||
* @todo Implement filter/search functionality in PM-6824 and PM-6826.
|
||||
*/
|
||||
hasFilterApplied$: Observable<boolean> = this.searchText$.pipe(
|
||||
switchMap((text) => this.searchService.isSearchable(text)),
|
||||
hasFilterApplied$ = combineLatest([
|
||||
this.searchText$,
|
||||
this.vaultPopupListFiltersService.filters$,
|
||||
]).pipe(
|
||||
switchMap(([searchText, filters]) => {
|
||||
return from(this.searchService.isSearchable(searchText)).pipe(
|
||||
map(
|
||||
(isSearchable) =>
|
||||
isSearchable || Object.values(filters).some((filter) => filter !== null),
|
||||
),
|
||||
);
|
||||
}),
|
||||
);
|
||||
|
||||
/**
|
||||
@@ -156,15 +178,31 @@ export class VaultPopupItemsService {
|
||||
|
||||
/**
|
||||
* Observable that indicates whether there are no ciphers to show with the current filter.
|
||||
* @todo Implement filter/search functionality in PM-6824 and PM-6826.
|
||||
*/
|
||||
noFilteredResults$: Observable<boolean> = this._filteredCipherList$.pipe(
|
||||
map((ciphers) => !ciphers.length),
|
||||
);
|
||||
|
||||
/** Observable that indicates when the user should see the deactivated org state */
|
||||
showDeactivatedOrg$: Observable<boolean> = combineLatest([
|
||||
this.vaultPopupListFiltersService.filters$.pipe(distinctUntilKeyChanged("organization")),
|
||||
this.organizationService.organizations$,
|
||||
]).pipe(
|
||||
map(([filters, orgs]) => {
|
||||
if (!filters.organization || filters.organization.id === MY_VAULT_ID) {
|
||||
return false;
|
||||
}
|
||||
|
||||
const org = orgs.find((o) => o.id === filters.organization.id);
|
||||
return org ? !org.enabled : false;
|
||||
}),
|
||||
);
|
||||
|
||||
constructor(
|
||||
private cipherService: CipherService,
|
||||
private vaultSettingsService: VaultSettingsService,
|
||||
private vaultPopupListFiltersService: VaultPopupListFiltersService,
|
||||
private organizationService: OrganizationService,
|
||||
private searchService: SearchService,
|
||||
) {}
|
||||
|
||||
|
||||
@@ -0,0 +1,298 @@
|
||||
import { TestBed } from "@angular/core/testing";
|
||||
import { FormBuilder } from "@angular/forms";
|
||||
import { BehaviorSubject, skipWhile } from "rxjs";
|
||||
|
||||
import { OrganizationService } from "@bitwarden/common/admin-console/abstractions/organization/organization.service.abstraction";
|
||||
import { Organization } from "@bitwarden/common/admin-console/models/domain/organization";
|
||||
import { I18nService } from "@bitwarden/common/platform/abstractions/i18n.service";
|
||||
import { CipherService } from "@bitwarden/common/vault/abstractions/cipher.service";
|
||||
import { CollectionService } from "@bitwarden/common/vault/abstractions/collection.service";
|
||||
import { FolderService } from "@bitwarden/common/vault/abstractions/folder/folder.service.abstraction";
|
||||
import { CipherType } from "@bitwarden/common/vault/enums";
|
||||
import { Collection } from "@bitwarden/common/vault/models/domain/collection";
|
||||
import { CipherView } from "@bitwarden/common/vault/models/view/cipher.view";
|
||||
import { CollectionView } from "@bitwarden/common/vault/models/view/collection.view";
|
||||
import { FolderView } from "@bitwarden/common/vault/models/view/folder.view";
|
||||
|
||||
import { MY_VAULT_ID, VaultPopupListFiltersService } from "./vault-popup-list-filters.service";
|
||||
|
||||
describe("VaultPopupListFiltersService", () => {
|
||||
let service: VaultPopupListFiltersService;
|
||||
const memberOrganizations$ = new BehaviorSubject<{ name: string; id: string }[]>([]);
|
||||
const folderViews$ = new BehaviorSubject([]);
|
||||
const cipherViews$ = new BehaviorSubject({});
|
||||
const decryptedCollections$ = new BehaviorSubject<CollectionView[]>([]);
|
||||
|
||||
const collectionService = {
|
||||
decryptedCollections$,
|
||||
getAllNested: () => Promise.resolve([]),
|
||||
} as unknown as CollectionService;
|
||||
|
||||
const folderService = {
|
||||
folderViews$,
|
||||
} as unknown as FolderService;
|
||||
|
||||
const cipherService = {
|
||||
cipherViews$,
|
||||
} as unknown as CipherService;
|
||||
|
||||
const organizationService = {
|
||||
memberOrganizations$,
|
||||
} as unknown as OrganizationService;
|
||||
|
||||
const i18nService = {
|
||||
t: (key: string) => key,
|
||||
} as I18nService;
|
||||
|
||||
beforeEach(() => {
|
||||
memberOrganizations$.next([]);
|
||||
decryptedCollections$.next([]);
|
||||
|
||||
collectionService.getAllNested = () => Promise.resolve([]);
|
||||
TestBed.configureTestingModule({
|
||||
providers: [
|
||||
{
|
||||
provide: FolderService,
|
||||
useValue: folderService,
|
||||
},
|
||||
{
|
||||
provide: CipherService,
|
||||
useValue: cipherService,
|
||||
},
|
||||
{
|
||||
provide: OrganizationService,
|
||||
useValue: organizationService,
|
||||
},
|
||||
{
|
||||
provide: I18nService,
|
||||
useValue: i18nService,
|
||||
},
|
||||
{
|
||||
provide: CollectionService,
|
||||
useValue: collectionService,
|
||||
},
|
||||
{ provide: FormBuilder, useClass: FormBuilder },
|
||||
],
|
||||
});
|
||||
|
||||
service = TestBed.inject(VaultPopupListFiltersService);
|
||||
});
|
||||
|
||||
describe("cipherTypes", () => {
|
||||
it("returns all cipher types", () => {
|
||||
expect(service.cipherTypes.map((c) => c.value)).toEqual([
|
||||
CipherType.Login,
|
||||
CipherType.Card,
|
||||
CipherType.Identity,
|
||||
CipherType.SecureNote,
|
||||
]);
|
||||
});
|
||||
});
|
||||
|
||||
describe("organizations$", () => {
|
||||
it('does not add "myVault" to the list of organizations when there are no organizations', (done) => {
|
||||
memberOrganizations$.next([]);
|
||||
|
||||
service.organizations$.subscribe((organizations) => {
|
||||
expect(organizations.map((o) => o.label)).toEqual([]);
|
||||
done();
|
||||
});
|
||||
});
|
||||
|
||||
it('adds "myVault" to the list of organizations when there are other organizations', (done) => {
|
||||
memberOrganizations$.next([{ name: "bobby's org", id: "1234-3323-23223" }]);
|
||||
|
||||
service.organizations$.subscribe((organizations) => {
|
||||
expect(organizations.map((o) => o.label)).toEqual(["myVault", "bobby's org"]);
|
||||
done();
|
||||
});
|
||||
});
|
||||
|
||||
it("sorts organizations by name", (done) => {
|
||||
memberOrganizations$.next([
|
||||
{ name: "bobby's org", id: "1234-3323-23223" },
|
||||
{ name: "alice's org", id: "2223-4343-99888" },
|
||||
]);
|
||||
|
||||
service.organizations$.subscribe((organizations) => {
|
||||
expect(organizations.map((o) => o.label)).toEqual([
|
||||
"myVault",
|
||||
"alice's org",
|
||||
"bobby's org",
|
||||
]);
|
||||
done();
|
||||
});
|
||||
});
|
||||
});
|
||||
|
||||
describe("collections$", () => {
|
||||
const testCollection = {
|
||||
id: "14cbf8e9-7a2a-4105-9bf6-b15c01203cef",
|
||||
name: "Test collection",
|
||||
organizationId: "3f860945-b237-40bc-a51e-b15c01203ccf",
|
||||
} as CollectionView;
|
||||
|
||||
const testCollection2 = {
|
||||
id: "b15c0120-7a2a-4105-9bf6-b15c01203ceg",
|
||||
name: "Test collection 2",
|
||||
organizationId: "1203ccf-2432-123-acdd-b15c01203ccf",
|
||||
} as CollectionView;
|
||||
|
||||
const testCollections = [testCollection, testCollection2];
|
||||
|
||||
beforeEach(() => {
|
||||
decryptedCollections$.next(testCollections);
|
||||
|
||||
collectionService.getAllNested = () =>
|
||||
Promise.resolve(
|
||||
testCollections.map((c) => ({
|
||||
children: [],
|
||||
node: c,
|
||||
parent: null,
|
||||
})),
|
||||
);
|
||||
});
|
||||
|
||||
it("returns all collections", (done) => {
|
||||
service.collections$.subscribe((collections) => {
|
||||
expect(collections.map((c) => c.label)).toEqual(["Test collection", "Test collection 2"]);
|
||||
done();
|
||||
});
|
||||
});
|
||||
|
||||
it("filters out collections that do not belong to an organization", () => {
|
||||
service.filterForm.patchValue({
|
||||
organization: { id: testCollection2.organizationId } as Organization,
|
||||
});
|
||||
|
||||
service.collections$.subscribe((collections) => {
|
||||
expect(collections.map((c) => c.label)).toEqual(["Test collection 2"]);
|
||||
});
|
||||
});
|
||||
});
|
||||
|
||||
describe("folders$", () => {
|
||||
it('returns no folders when "No Folder" is the only option', (done) => {
|
||||
folderViews$.next([{ id: null, name: "No Folder" }]);
|
||||
|
||||
service.folders$.subscribe((folders) => {
|
||||
expect(folders).toEqual([]);
|
||||
done();
|
||||
});
|
||||
});
|
||||
|
||||
it('moves "No Folder" to the end of the list', (done) => {
|
||||
folderViews$.next([
|
||||
{ id: null, name: "No Folder" },
|
||||
{ id: "2345", name: "Folder 2" },
|
||||
{ id: "1234", name: "Folder 1" },
|
||||
]);
|
||||
|
||||
service.folders$.subscribe((folders) => {
|
||||
expect(folders.map((f) => f.label)).toEqual(["Folder 1", "Folder 2", "itemsWithNoFolder"]);
|
||||
done();
|
||||
});
|
||||
});
|
||||
|
||||
it("returns all folders when MyVault is selected", (done) => {
|
||||
service.filterForm.patchValue({
|
||||
organization: { id: MY_VAULT_ID } as Organization,
|
||||
});
|
||||
|
||||
folderViews$.next([
|
||||
{ id: "1234", name: "Folder 1" },
|
||||
{ id: "2345", name: "Folder 2" },
|
||||
]);
|
||||
|
||||
service.folders$.subscribe((folders) => {
|
||||
expect(folders.map((f) => f.label)).toEqual(["Folder 1", "Folder 2"]);
|
||||
done();
|
||||
});
|
||||
});
|
||||
|
||||
it("returns folders that have ciphers within the selected organization", (done) => {
|
||||
service.folders$.pipe(skipWhile((folders) => folders.length === 2)).subscribe((folders) => {
|
||||
expect(folders.map((f) => f.label)).toEqual(["Folder 1"]);
|
||||
done();
|
||||
});
|
||||
|
||||
service.filterForm.patchValue({
|
||||
organization: { id: "1234" } as Organization,
|
||||
});
|
||||
|
||||
folderViews$.next([
|
||||
{ id: "1234", name: "Folder 1" },
|
||||
{ id: "2345", name: "Folder 2" },
|
||||
]);
|
||||
|
||||
cipherViews$.next({
|
||||
"1": { folderId: "1234", organizationId: "1234" },
|
||||
"2": { folderId: "2345", organizationId: "56789" },
|
||||
});
|
||||
});
|
||||
});
|
||||
|
||||
describe("filterFunction$", () => {
|
||||
const ciphers = [
|
||||
{ type: CipherType.Login, collectionIds: [], organizationId: null },
|
||||
{ type: CipherType.Card, collectionIds: ["1234"], organizationId: "8978" },
|
||||
{ type: CipherType.Identity, collectionIds: [], folderId: "5432", organizationId: null },
|
||||
{ type: CipherType.SecureNote, collectionIds: [], organizationId: null },
|
||||
] as CipherView[];
|
||||
|
||||
it("filters by cipherType", (done) => {
|
||||
service.filterFunction$.subscribe((filterFunction) => {
|
||||
expect(filterFunction(ciphers)).toEqual([ciphers[0]]);
|
||||
done();
|
||||
});
|
||||
|
||||
service.filterForm.patchValue({ cipherType: CipherType.Login });
|
||||
});
|
||||
|
||||
it("filters by collection", (done) => {
|
||||
const collection = { id: "1234" } as Collection;
|
||||
|
||||
service.filterFunction$.subscribe((filterFunction) => {
|
||||
expect(filterFunction(ciphers)).toEqual([ciphers[1]]);
|
||||
done();
|
||||
});
|
||||
|
||||
service.filterForm.patchValue({ collection });
|
||||
});
|
||||
|
||||
it("filters by folder", (done) => {
|
||||
const folder = { id: "5432" } as FolderView;
|
||||
|
||||
service.filterFunction$.subscribe((filterFunction) => {
|
||||
expect(filterFunction(ciphers)).toEqual([ciphers[2]]);
|
||||
done();
|
||||
});
|
||||
|
||||
service.filterForm.patchValue({ folder });
|
||||
});
|
||||
|
||||
describe("organizationId", () => {
|
||||
it("filters out ciphers that belong to an organization when MyVault is selected", (done) => {
|
||||
const organization = { id: MY_VAULT_ID } as Organization;
|
||||
|
||||
service.filterFunction$.subscribe((filterFunction) => {
|
||||
expect(filterFunction(ciphers)).toEqual([ciphers[0], ciphers[2], ciphers[3]]);
|
||||
done();
|
||||
});
|
||||
|
||||
service.filterForm.patchValue({ organization });
|
||||
});
|
||||
|
||||
it("filters out ciphers that do not belong to the selected organization", (done) => {
|
||||
const organization = { id: "8978" } as Organization;
|
||||
|
||||
service.filterFunction$.subscribe((filterFunction) => {
|
||||
expect(filterFunction(ciphers)).toEqual([ciphers[1]]);
|
||||
done();
|
||||
});
|
||||
|
||||
service.filterForm.patchValue({ organization });
|
||||
});
|
||||
});
|
||||
});
|
||||
});
|
||||
@@ -0,0 +1,371 @@
|
||||
import { Injectable } from "@angular/core";
|
||||
import { takeUntilDestroyed } from "@angular/core/rxjs-interop";
|
||||
import { FormBuilder } from "@angular/forms";
|
||||
import {
|
||||
Observable,
|
||||
combineLatest,
|
||||
distinctUntilChanged,
|
||||
map,
|
||||
startWith,
|
||||
switchMap,
|
||||
tap,
|
||||
} from "rxjs";
|
||||
|
||||
import { DynamicTreeNode } from "@bitwarden/angular/vault/vault-filter/models/dynamic-tree-node.model";
|
||||
import { OrganizationService } from "@bitwarden/common/admin-console/abstractions/organization/organization.service.abstraction";
|
||||
import { Organization } from "@bitwarden/common/admin-console/models/domain/organization";
|
||||
import { ProductType } from "@bitwarden/common/enums";
|
||||
import { I18nService } from "@bitwarden/common/platform/abstractions/i18n.service";
|
||||
import { Utils } from "@bitwarden/common/platform/misc/utils";
|
||||
import { CipherService } from "@bitwarden/common/vault/abstractions/cipher.service";
|
||||
import { CollectionService } from "@bitwarden/common/vault/abstractions/collection.service";
|
||||
import { FolderService } from "@bitwarden/common/vault/abstractions/folder/folder.service.abstraction";
|
||||
import { CipherType } from "@bitwarden/common/vault/enums";
|
||||
import { Collection } from "@bitwarden/common/vault/models/domain/collection";
|
||||
import { ITreeNodeObject, TreeNode } from "@bitwarden/common/vault/models/domain/tree-node";
|
||||
import { CipherView } from "@bitwarden/common/vault/models/view/cipher.view";
|
||||
import { CollectionView } from "@bitwarden/common/vault/models/view/collection.view";
|
||||
import { FolderView } from "@bitwarden/common/vault/models/view/folder.view";
|
||||
import { ServiceUtils } from "@bitwarden/common/vault/service-utils";
|
||||
import { ChipSelectOption } from "@bitwarden/components";
|
||||
|
||||
/** All available cipher filters */
|
||||
export type PopupListFilter = {
|
||||
organization: Organization | null;
|
||||
collection: Collection | null;
|
||||
folder: FolderView | null;
|
||||
cipherType: CipherType | null;
|
||||
};
|
||||
|
||||
/** Delimiter that denotes a level of nesting */
|
||||
const NESTING_DELIMITER = "/";
|
||||
|
||||
/** Id assigned to the "My vault" organization */
|
||||
export const MY_VAULT_ID = "MyVault";
|
||||
|
||||
const INITIAL_FILTERS: PopupListFilter = {
|
||||
organization: null,
|
||||
collection: null,
|
||||
folder: null,
|
||||
cipherType: null,
|
||||
};
|
||||
|
||||
@Injectable({
|
||||
providedIn: "root",
|
||||
})
|
||||
export class VaultPopupListFiltersService {
|
||||
/**
|
||||
* UI form for all filters
|
||||
*/
|
||||
filterForm = this.formBuilder.group<PopupListFilter>(INITIAL_FILTERS);
|
||||
|
||||
/**
|
||||
* Observable for `filterForm` value
|
||||
*/
|
||||
filters$ = this.filterForm.valueChanges.pipe(
|
||||
startWith(INITIAL_FILTERS),
|
||||
) as Observable<PopupListFilter>;
|
||||
|
||||
/**
|
||||
* Static list of ciphers views used in synchronous context
|
||||
*/
|
||||
private cipherViews: CipherView[] = [];
|
||||
|
||||
/**
|
||||
* Observable of cipher views
|
||||
*/
|
||||
private cipherViews$: Observable<CipherView[]> = this.cipherService.cipherViews$.pipe(
|
||||
tap((cipherViews) => {
|
||||
this.cipherViews = Object.values(cipherViews);
|
||||
}),
|
||||
map((ciphers) => Object.values(ciphers)),
|
||||
);
|
||||
|
||||
constructor(
|
||||
private folderService: FolderService,
|
||||
private cipherService: CipherService,
|
||||
private organizationService: OrganizationService,
|
||||
private i18nService: I18nService,
|
||||
private collectionService: CollectionService,
|
||||
private formBuilder: FormBuilder,
|
||||
) {
|
||||
this.filterForm.controls.organization.valueChanges
|
||||
.pipe(takeUntilDestroyed())
|
||||
.subscribe(this.validateOrganizationChange.bind(this));
|
||||
}
|
||||
|
||||
/**
|
||||
* Observable whose value is a function that filters an array of `CipherView` objects based on the current filters
|
||||
*/
|
||||
filterFunction$: Observable<(ciphers: CipherView[]) => CipherView[]> = this.filters$.pipe(
|
||||
map(
|
||||
(filters) => (ciphers: CipherView[]) =>
|
||||
ciphers.filter((cipher) => {
|
||||
if (filters.cipherType !== null && cipher.type !== filters.cipherType) {
|
||||
return false;
|
||||
}
|
||||
|
||||
if (
|
||||
filters.collection !== null &&
|
||||
!cipher.collectionIds.includes(filters.collection.id)
|
||||
) {
|
||||
return false;
|
||||
}
|
||||
|
||||
if (filters.folder !== null && cipher.folderId !== filters.folder.id) {
|
||||
return false;
|
||||
}
|
||||
|
||||
const isMyVault = filters.organization?.id === MY_VAULT_ID;
|
||||
|
||||
if (isMyVault) {
|
||||
if (cipher.organizationId !== null) {
|
||||
return false;
|
||||
}
|
||||
} else if (filters.organization !== null) {
|
||||
if (cipher.organizationId !== filters.organization.id) {
|
||||
return false;
|
||||
}
|
||||
}
|
||||
|
||||
return true;
|
||||
}),
|
||||
),
|
||||
);
|
||||
|
||||
/**
|
||||
* All available cipher types
|
||||
*/
|
||||
readonly cipherTypes: ChipSelectOption<CipherType>[] = [
|
||||
{
|
||||
value: CipherType.Login,
|
||||
label: this.i18nService.t("logins"),
|
||||
icon: "bwi-globe",
|
||||
},
|
||||
{
|
||||
value: CipherType.Card,
|
||||
label: this.i18nService.t("cards"),
|
||||
icon: "bwi-credit-card",
|
||||
},
|
||||
{
|
||||
value: CipherType.Identity,
|
||||
label: this.i18nService.t("identities"),
|
||||
icon: "bwi-id-card",
|
||||
},
|
||||
{
|
||||
value: CipherType.SecureNote,
|
||||
label: this.i18nService.t("notes"),
|
||||
icon: "bwi-sticky-note",
|
||||
},
|
||||
];
|
||||
|
||||
/** Resets `filterForm` to the original state */
|
||||
resetFilterForm(): void {
|
||||
this.filterForm.reset(INITIAL_FILTERS);
|
||||
}
|
||||
|
||||
/**
|
||||
* Organization array structured to be directly passed to `ChipSelectComponent`
|
||||
*/
|
||||
organizations$: Observable<ChipSelectOption<Organization>[]> =
|
||||
this.organizationService.memberOrganizations$.pipe(
|
||||
map((orgs) => orgs.sort(Utils.getSortFunction(this.i18nService, "name"))),
|
||||
map((orgs) => {
|
||||
if (!orgs.length) {
|
||||
return [];
|
||||
}
|
||||
|
||||
return [
|
||||
// When the user is a member of an organization, make the "My Vault" option available
|
||||
{
|
||||
value: { id: MY_VAULT_ID } as Organization,
|
||||
label: this.i18nService.t("myVault"),
|
||||
icon: "bwi-user",
|
||||
},
|
||||
...orgs.map((org) => {
|
||||
let icon = "bwi-business";
|
||||
|
||||
if (!org.enabled) {
|
||||
// Show a warning icon if the organization is deactivated
|
||||
icon = "bwi-exclamation-triangle tw-text-danger";
|
||||
} else if (org.planProductType === ProductType.Families) {
|
||||
// Show a family icon if the organization is a family org
|
||||
icon = "bwi-family";
|
||||
}
|
||||
|
||||
return {
|
||||
value: org,
|
||||
label: org.name,
|
||||
icon,
|
||||
};
|
||||
}),
|
||||
];
|
||||
}),
|
||||
);
|
||||
|
||||
/**
|
||||
* Folder array structured to be directly passed to `ChipSelectComponent`
|
||||
*/
|
||||
folders$: Observable<ChipSelectOption<string>[]> = combineLatest([
|
||||
this.filters$.pipe(
|
||||
distinctUntilChanged(
|
||||
(previousFilter, currentFilter) =>
|
||||
// Only update the collections when the organizationId filter changes
|
||||
previousFilter.organization?.id === currentFilter.organization?.id,
|
||||
),
|
||||
),
|
||||
this.folderService.folderViews$,
|
||||
this.cipherViews$,
|
||||
]).pipe(
|
||||
map(([filters, folders, cipherViews]): [PopupListFilter, FolderView[], CipherView[]] => {
|
||||
if (folders.length === 1 && folders[0].id === null) {
|
||||
// Do not display folder selections when only the "no folder" option is available.
|
||||
return [filters, [], cipherViews];
|
||||
}
|
||||
|
||||
// Sort folders by alphabetic name
|
||||
folders.sort(Utils.getSortFunction(this.i18nService, "name"));
|
||||
let arrangedFolders = folders;
|
||||
|
||||
const noFolder = folders.find((f) => f.id === null);
|
||||
|
||||
if (noFolder) {
|
||||
// Update `name` of the "no folder" option to "Items with no folder"
|
||||
noFolder.name = this.i18nService.t("itemsWithNoFolder");
|
||||
|
||||
// Move the "no folder" option to the end of the list
|
||||
arrangedFolders = [...folders.filter((f) => f.id !== null), noFolder];
|
||||
}
|
||||
return [filters, arrangedFolders, cipherViews];
|
||||
}),
|
||||
map(([filters, folders, cipherViews]) => {
|
||||
const organizationId = filters.organization?.id ?? null;
|
||||
|
||||
// When no org or "My vault" is selected, return all folders
|
||||
if (organizationId === null || organizationId === MY_VAULT_ID) {
|
||||
return folders;
|
||||
}
|
||||
|
||||
const orgCiphers = cipherViews.filter((c) => c.organizationId === organizationId);
|
||||
|
||||
// Return only the folders that have ciphers within the filtered organization
|
||||
return folders.filter((f) => orgCiphers.some((oc) => oc.folderId === f.id));
|
||||
}),
|
||||
map((folders) => {
|
||||
const nestedFolders = this.getAllFoldersNested(folders);
|
||||
return new DynamicTreeNode<FolderView>({
|
||||
fullList: folders,
|
||||
nestedList: nestedFolders,
|
||||
});
|
||||
}),
|
||||
map((folders) => folders.nestedList.map(this.convertToChipSelectOption.bind(this))),
|
||||
);
|
||||
|
||||
/**
|
||||
* Collection array structured to be directly passed to `ChipSelectComponent`
|
||||
*/
|
||||
collections$: Observable<ChipSelectOption<string>[]> = combineLatest([
|
||||
this.filters$.pipe(
|
||||
distinctUntilChanged(
|
||||
(previousFilter, currentFilter) =>
|
||||
// Only update the collections when the organizationId filter changes
|
||||
previousFilter.organization?.id === currentFilter.organization?.id,
|
||||
),
|
||||
),
|
||||
this.collectionService.decryptedCollections$,
|
||||
]).pipe(
|
||||
map(([filters, allCollections]) => {
|
||||
const organizationId = filters.organization?.id ?? null;
|
||||
// When the organization filter is selected, filter out collections that do not belong to the selected organization
|
||||
const collections =
|
||||
organizationId === null
|
||||
? allCollections
|
||||
: allCollections.filter((c) => c.organizationId === organizationId);
|
||||
|
||||
return collections;
|
||||
}),
|
||||
switchMap(async (collections) => {
|
||||
const nestedCollections = await this.collectionService.getAllNested(collections);
|
||||
|
||||
return new DynamicTreeNode<CollectionView>({
|
||||
fullList: collections,
|
||||
nestedList: nestedCollections,
|
||||
});
|
||||
}),
|
||||
map((collections) => collections.nestedList.map(this.convertToChipSelectOption.bind(this))),
|
||||
);
|
||||
|
||||
/**
|
||||
* Converts the given item into the `ChipSelectOption` structure
|
||||
*/
|
||||
private convertToChipSelectOption<T extends ITreeNodeObject>(
|
||||
item: TreeNode<T>,
|
||||
): ChipSelectOption<T> {
|
||||
return {
|
||||
value: item.node,
|
||||
label: item.node.name,
|
||||
icon: "bwi-folder", // Organization & Folder icons are the same
|
||||
children: item.children
|
||||
? item.children.map(this.convertToChipSelectOption.bind(this))
|
||||
: undefined,
|
||||
};
|
||||
}
|
||||
|
||||
/**
|
||||
* Returns a nested folder structure based on the input FolderView array
|
||||
*/
|
||||
private getAllFoldersNested(folders: FolderView[]): TreeNode<FolderView>[] {
|
||||
const nodes: TreeNode<FolderView>[] = [];
|
||||
|
||||
folders.forEach((f) => {
|
||||
const folderCopy = new FolderView();
|
||||
folderCopy.id = f.id;
|
||||
folderCopy.revisionDate = f.revisionDate;
|
||||
|
||||
// Remove "/" from beginning and end of the folder name
|
||||
// then split the folder name by the delimiter
|
||||
const parts = f.name != null ? f.name.replace(/^\/+|\/+$/g, "").split(NESTING_DELIMITER) : [];
|
||||
ServiceUtils.nestedTraverse(nodes, 0, parts, folderCopy, null, NESTING_DELIMITER);
|
||||
});
|
||||
|
||||
return nodes;
|
||||
}
|
||||
|
||||
/**
|
||||
* Validate collection & folder filters when the organization filter changes
|
||||
*/
|
||||
private validateOrganizationChange(organization: Organization | null): void {
|
||||
if (!organization) {
|
||||
return;
|
||||
}
|
||||
|
||||
const currentFilters = this.filterForm.getRawValue();
|
||||
|
||||
// When the organization filter changes and a collection is already selected,
|
||||
// reset the collection filter if the collection does not belong to the new organization filter
|
||||
if (currentFilters.collection && currentFilters.collection.organizationId !== organization.id) {
|
||||
this.filterForm.get("collection").setValue(null);
|
||||
}
|
||||
|
||||
// When the organization filter changes and a folder is already selected,
|
||||
// reset the folder filter if the folder does not belong to the new organization filter
|
||||
if (
|
||||
currentFilters.folder &&
|
||||
currentFilters.folder.id !== null &&
|
||||
organization.id !== MY_VAULT_ID
|
||||
) {
|
||||
// Get all ciphers that belong to the new organization
|
||||
const orgCiphers = this.cipherViews.filter((c) => c.organizationId === organization.id);
|
||||
|
||||
// Find any ciphers within the organization that belong to the current folder
|
||||
const newOrgContainsFolder = orgCiphers.some(
|
||||
(oc) => oc.folderId === currentFilters.folder.id,
|
||||
);
|
||||
|
||||
// If the new organization does not contain the current folder, reset the folder filter
|
||||
if (!newOrgContainsFolder) {
|
||||
this.filterForm.get("folder").setValue(null);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
Reference in New Issue
Block a user