+
+
+ {{ "organizationIsDeactivated" | i18n }}
+ {{ "contactYourOrgAdmin" | i18n }}
+
+
+
+
{
let service: VaultPopupItemsService;
@@ -20,6 +22,8 @@ describe("VaultPopupItemsService", () => {
const cipherServiceMock = mock();
const vaultSettingsServiceMock = mock();
+ const organizationServiceMock = mock();
+ const vaultPopupListFiltersServiceMock = mock();
const searchService = mock();
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) => {
diff --git a/apps/browser/src/vault/popup/services/vault-popup-items.service.ts b/apps/browser/src/vault/popup/services/vault-popup-items.service.ts
index 9a66ada08c..f9c37f6f7d 100644
--- a/apps/browser/src/vault/popup/services/vault-popup-items.service.ts
+++ b/apps/browser/src/vault/popup/services/vault-popup-items.service.ts
@@ -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 = 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 = 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 = this._filteredCipherList$.pipe(
map((ciphers) => !ciphers.length),
);
+ /** Observable that indicates when the user should see the deactivated org state */
+ showDeactivatedOrg$: Observable = 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,
) {}
diff --git a/apps/browser/src/vault/popup/services/vault-popup-list-filters.service.spec.ts b/apps/browser/src/vault/popup/services/vault-popup-list-filters.service.spec.ts
new file mode 100644
index 0000000000..eba8f94f12
--- /dev/null
+++ b/apps/browser/src/vault/popup/services/vault-popup-list-filters.service.spec.ts
@@ -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([]);
+
+ 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 });
+ });
+ });
+ });
+});
diff --git a/apps/browser/src/vault/popup/services/vault-popup-list-filters.service.ts b/apps/browser/src/vault/popup/services/vault-popup-list-filters.service.ts
new file mode 100644
index 0000000000..f3522aa8e3
--- /dev/null
+++ b/apps/browser/src/vault/popup/services/vault-popup-list-filters.service.ts
@@ -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(INITIAL_FILTERS);
+
+ /**
+ * Observable for `filterForm` value
+ */
+ filters$ = this.filterForm.valueChanges.pipe(
+ startWith(INITIAL_FILTERS),
+ ) as Observable;
+
+ /**
+ * Static list of ciphers views used in synchronous context
+ */
+ private cipherViews: CipherView[] = [];
+
+ /**
+ * Observable of cipher views
+ */
+ private cipherViews$: Observable = 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[] = [
+ {
+ 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[]> =
+ 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[]> = 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({
+ fullList: folders,
+ nestedList: nestedFolders,
+ });
+ }),
+ map((folders) => folders.nestedList.map(this.convertToChipSelectOption.bind(this))),
+ );
+
+ /**
+ * Collection array structured to be directly passed to `ChipSelectComponent`
+ */
+ collections$: Observable[]> = 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({
+ fullList: collections,
+ nestedList: nestedCollections,
+ });
+ }),
+ map((collections) => collections.nestedList.map(this.convertToChipSelectOption.bind(this))),
+ );
+
+ /**
+ * Converts the given item into the `ChipSelectOption` structure
+ */
+ private convertToChipSelectOption(
+ item: TreeNode,
+ ): ChipSelectOption {
+ 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[] {
+ const nodes: TreeNode[] = [];
+
+ 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);
+ }
+ }
+ }
+}
diff --git a/libs/components/src/chip-select/chip-select.component.ts b/libs/components/src/chip-select/chip-select.component.ts
index e91ee16f97..ff2282b72a 100644
--- a/libs/components/src/chip-select/chip-select.component.ts
+++ b/libs/components/src/chip-select/chip-select.component.ts
@@ -108,7 +108,7 @@ export class ChipSelectComponent implements ControlValueAccessor {
*/
private findOption(tree: ChipSelectOption, value: T): ChipSelectOption | null {
let result = null;
- if (tree.value === value) {
+ if (tree.value !== null && tree.value === value) {
return tree;
}
@@ -183,7 +183,7 @@ export class ChipSelectComponent implements ControlValueAccessor {
return;
}
- this.notifyOnChange(option?.value);
+ this.notifyOnChange(option?.value ?? null);
}
/** Implemented as part of NG_VALUE_ACCESSOR */
diff --git a/libs/components/src/icon/icons/deactivated-org.ts b/libs/components/src/icon/icons/deactivated-org.ts
new file mode 100644
index 0000000000..9bb9577669
--- /dev/null
+++ b/libs/components/src/icon/icons/deactivated-org.ts
@@ -0,0 +1,32 @@
+import { svgIcon } from "../icon";
+
+export const DeactivatedOrg = svgIcon`
+
+`;
diff --git a/libs/components/src/icon/icons/index.ts b/libs/components/src/icon/icons/index.ts
index 0e0ce4d909..9de81f1991 100644
--- a/libs/components/src/icon/icons/index.ts
+++ b/libs/components/src/icon/icons/index.ts
@@ -1,3 +1,4 @@
+export * from "./deactivated-org";
export * from "./search";
export * from "./no-access";
export * from "./vault";