+
+
+
diff --git a/apps/browser/src/vault/popup/components/vault/vault-v2.component.html b/apps/browser/src/vault/popup/components/vault/vault-v2.component.html
index 9eba5f8f906..4798ddf4dfb 100644
--- a/apps/browser/src/vault/popup/components/vault/vault-v2.component.html
+++ b/apps/browser/src/vault/popup/components/vault/vault-v2.component.html
@@ -27,8 +27,7 @@
slot="above-scroll-area"
*ngIf="vaultState !== VaultStateEnum.Empty && !(loading$ | async)"
>
-
-
+
diff --git a/apps/browser/src/vault/popup/components/vault/vault-v2.component.ts b/apps/browser/src/vault/popup/components/vault/vault-v2.component.ts
index 21c71332997..68aa40cbf62 100644
--- a/apps/browser/src/vault/popup/components/vault/vault-v2.component.ts
+++ b/apps/browser/src/vault/popup/components/vault/vault-v2.component.ts
@@ -23,8 +23,7 @@ import {
NewItemDropdownV2Component,
NewItemInitialValues,
} from "../vault-v2/new-item-dropdown/new-item-dropdown-v2.component";
-import { VaultListFiltersComponent } from "../vault-v2/vault-list-filters/vault-list-filters.component";
-import { VaultV2SearchComponent } from "../vault-v2/vault-search/vault-v2-search.component";
+import { VaultHeaderV2Component } from "../vault-v2/vault-header/vault-header-v2.component";
enum VaultState {
Empty,
@@ -46,12 +45,11 @@ enum VaultState {
CommonModule,
AutofillVaultListItemsComponent,
VaultListItemsContainerComponent,
- VaultListFiltersComponent,
ButtonModule,
RouterLink,
- VaultV2SearchComponent,
NewItemDropdownV2Component,
ScrollingModule,
+ VaultHeaderV2Component,
],
providers: [VaultUiOnboardingService],
})
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
index 02ad7375f6a..580514de610 100644
--- 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
@@ -9,6 +9,7 @@ import { PolicyType } from "@bitwarden/common/admin-console/enums";
import { Organization } from "@bitwarden/common/admin-console/models/domain/organization";
import { ProductTierType } from "@bitwarden/common/billing/enums";
import { I18nService } from "@bitwarden/common/platform/abstractions/i18n.service";
+import { StateProvider } from "@bitwarden/common/platform/state";
import { CipherService } from "@bitwarden/common/vault/abstractions/cipher.service";
import { FolderService } from "@bitwarden/common/vault/abstractions/folder/folder.service.abstraction";
import { CipherType } from "@bitwarden/common/vault/enums";
@@ -50,6 +51,9 @@ describe("VaultPopupListFiltersService", () => {
policyAppliesToActiveUser$: jest.fn(() => policyAppliesToActiveUser$),
};
+ const state$ = new BehaviorSubject(false);
+ const update = jest.fn().mockResolvedValue(undefined);
+
beforeEach(() => {
memberOrganizations$.next([]);
decryptedCollections$.next([]);
@@ -83,6 +87,10 @@ describe("VaultPopupListFiltersService", () => {
provide: PolicyService,
useValue: policyService,
},
+ {
+ provide: StateProvider,
+ useValue: { getGlobal: () => ({ state$, update }) },
+ },
{ provide: FormBuilder, useClass: FormBuilder },
],
});
@@ -102,6 +110,20 @@ describe("VaultPopupListFiltersService", () => {
});
});
+ describe("numberOfAppliedFilters$", () => {
+ it("updates as the form value changes", (done) => {
+ service.numberOfAppliedFilters$.subscribe((number) => {
+ expect(number).toBe(2);
+ done();
+ });
+
+ service.filterForm.patchValue({
+ organization: { id: "1234" } as Organization,
+ folder: { id: "folder11" } as FolderView,
+ });
+ });
+ });
+
describe("organizations$", () => {
it('does not add "myVault" to the list of organizations when there are no organizations', (done) => {
memberOrganizations$.next([]);
@@ -451,4 +473,24 @@ describe("VaultPopupListFiltersService", () => {
});
});
});
+
+ describe("filterVisibilityState", () => {
+ it("exposes stored state through filterVisibilityState$", (done) => {
+ state$.next(true);
+
+ service.filterVisibilityState$.subscribe((filterVisibility) => {
+ expect(filterVisibility).toBeTrue();
+ done();
+ });
+ });
+
+ it("updates stored filter state", async () => {
+ await service.updateFilterVisibility(false);
+
+ expect(update).toHaveBeenCalledOnce();
+ // Get callback passed to `update`
+ const updateCallback = update.mock.calls[0][0];
+ expect(updateCallback()).toBe(false);
+ });
+ });
});
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
index 590807cff60..32eaeb27d4e 100644
--- 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
@@ -6,6 +6,7 @@ import {
distinctUntilChanged,
map,
Observable,
+ shareReplay,
startWith,
switchMap,
tap,
@@ -20,6 +21,11 @@ import { Organization } from "@bitwarden/common/admin-console/models/domain/orga
import { ProductTierType } from "@bitwarden/common/billing/enums";
import { I18nService } from "@bitwarden/common/platform/abstractions/i18n.service";
import { Utils } from "@bitwarden/common/platform/misc/utils";
+import {
+ KeyDefinition,
+ StateProvider,
+ VAULT_SETTINGS_DISK,
+} from "@bitwarden/common/platform/state";
import { CipherService } from "@bitwarden/common/vault/abstractions/cipher.service";
import { FolderService } from "@bitwarden/common/vault/abstractions/folder/folder.service.abstraction";
import { CipherType } from "@bitwarden/common/vault/enums";
@@ -29,6 +35,10 @@ import { FolderView } from "@bitwarden/common/vault/models/view/folder.view";
import { ServiceUtils } from "@bitwarden/common/vault/service-utils";
import { ChipSelectOption } from "@bitwarden/components";
+const FILTER_VISIBILITY_KEY = new KeyDefinition(VAULT_SETTINGS_DISK, "filterVisibility", {
+ deserializer: (obj) => obj,
+});
+
/** All available cipher filters */
export type PopupListFilter = {
organization: Organization | null;
@@ -66,6 +76,15 @@ export class VaultPopupListFiltersService {
startWith(INITIAL_FILTERS),
) as Observable;
+ /** Emits the number of applied filters. */
+ numberOfAppliedFilters$ = this.filters$.pipe(
+ map((filters) => Object.values(filters).filter((filter) => Boolean(filter)).length),
+ shareReplay({ refCount: true, bufferSize: 1 }),
+ );
+
+ /** Stored state for the visibility of the filters. */
+ private filterVisibilityState = this.stateProvider.getGlobal(FILTER_VISIBILITY_KEY);
+
/**
* Static list of ciphers views used in synchronous context
*/
@@ -89,12 +108,16 @@ export class VaultPopupListFiltersService {
private collectionService: CollectionService,
private formBuilder: FormBuilder,
private policyService: PolicyService,
+ private stateProvider: StateProvider,
) {
this.filterForm.controls.organization.valueChanges
.pipe(takeUntilDestroyed())
.subscribe(this.validateOrganizationChange.bind(this));
}
+ /** Stored state for the visibility of the filters. */
+ filterVisibilityState$ = this.filterVisibilityState.state$;
+
/**
* Observable whose value is a function that filters an array of `CipherView` objects based on the current filters
*/
@@ -332,6 +355,11 @@ export class VaultPopupListFiltersService {
),
);
+ /** Updates the stored state for filter visibility. */
+ async updateFilterVisibility(isVisible: boolean): Promise {
+ await this.filterVisibilityState.update(() => isVisible);
+ }
+
/**
* Converts the given item into the `ChipSelectOption` structure
*/
diff --git a/libs/components/src/disclosure/disclosure.component.ts b/libs/components/src/disclosure/disclosure.component.ts
index 58c67ad0f0e..518bf5f279d 100644
--- a/libs/components/src/disclosure/disclosure.component.ts
+++ b/libs/components/src/disclosure/disclosure.component.ts
@@ -1,4 +1,11 @@
-import { Component, HostBinding, Input, booleanAttribute } from "@angular/core";
+import {
+ Component,
+ EventEmitter,
+ HostBinding,
+ Input,
+ Output,
+ booleanAttribute,
+} from "@angular/core";
let nextId = 0;
@@ -8,14 +15,26 @@ let nextId = 0;
template: ``,
})
export class DisclosureComponent {
+ private _open: boolean;
+
+ /** Emits the visibility of the disclosure content */
+ @Output() openChange = new EventEmitter();
+
/**
* Optionally init the disclosure in its opened state
*/
- @Input({ transform: booleanAttribute }) open?: boolean = false;
+ @Input({ transform: booleanAttribute }) set open(isOpen: boolean) {
+ this._open = isOpen;
+ this.openChange.emit(isOpen);
+ }
@HostBinding("class") get classList() {
return this.open ? "" : "tw-hidden";
}
@HostBinding("id") id = `bit-disclosure-${nextId++}`;
+
+ get open(): boolean {
+ return this._open;
+ }
}