[fix] Expose observable without write access to callers

1. Extend the BaseVaultFiltersService to manage an observable for collapsed nodes that can be modified from outside the VaultFiltersComponent
2. Subscribe to the new observable in VaultFiltersComponent.ngOnInit() to update the collapsed state of filters when changed from outside the VaultFiltersComponent
3. Add a helper method to VaultFiltersService for expanding vault filters if they are collapsed that sends a new value through the subscription
4. Wire everything up in the IndividualVaultComponent so applying a not null organization filter expanded the vault filters

.github/workflows/release.yml

@@ -19,8 +19,8 @@ jobs:
     name: Setup
     runs-on: ubuntu-20.04
     outputs:
-      release_version: ${{ steps.version.outputs.version }}
-      tag_version: ${{ steps.version.outputs.version }}
+      release_version: ${{ steps.version.outputs.package }}
+      tag_version: ${{ steps.version.outputs.tag }}
       branch_name: ${{ steps.branch.outputs.branch_name }}
     steps:
       - name: Branch check
@@ -38,11 +38,20 @@ jobs:
 
       - name: Check Release Version
         id: version
-        uses: bitwarden/gh-actions/release-version-check@ea9fab01d76940267b4147cc1c4542431246b9f6
-        with:
-          release-type: ${{ github.event.inputs.release_type }}
-          project-type: ts
-          file: package.json
+        run: |
+          version=$( jq -r ".version" package.json)
+          previous_release_tag_version=$(
+            curl -sL https://api.github.com/repos/$GITHUB_REPOSITORY/releases/latest | jq -r ".tag_name"
+          )
+
+          if [ "v$version" == "$previous_release_tag_version" ] && \
+          [ "${{ github.event.inputs.release_type }}" == "Initial Release" ]; then
+            echo "[!] Already released v$version. Please bump version to continue"
+            exit 1
+          fi
+
+          echo "::set-output name=package::$version"
+          echo "::set-output name=tag::v$version"
 
       - name: Get branch name
         id: branch

package-lock.json

@@ -1,12 +1,12 @@
 {
   "name": "@bitwarden/web-vault",
-  "version": "2022.5.2",
+  "version": "2.28.1",
   "lockfileVersion": 2,
   "requires": true,
   "packages": {
     "": {
       "name": "@bitwarden/web-vault",
-      "version": "2022.5.2",
+      "version": "2.28.1",
       "hasInstallScript": true,
       "license": "GPL-3.0",
       "dependencies": {

package.json

@@ -1,6 +1,6 @@
 {
   "name": "@bitwarden/web-vault",
-  "version": "2022.5.2",
+  "version": "2.28.1",
   "license": "GPL-3.0",
   "repository": "https://github.com/bitwarden/web",
   "scripts": {

src/app/common/base.events.component.ts

@@ -122,20 +122,17 @@ export abstract class BaseEventsComponent {
         const userId = r.actingUserId == null ? r.userId : r.actingUserId;
         const eventInfo = await this.eventService.getEventInfo(r);
         const user = this.getUserName(r, userId);
-        const userName = user != null ? user.name : this.i18nService.t("unknown");
-
         return new EventView({
           message: eventInfo.message,
           humanReadableMessage: eventInfo.humanReadableMessage,
           appIcon: eventInfo.appIcon,
           appName: eventInfo.appName,
           userId: userId,
-          userName: r.installationId != null ? `Installation: ${r.installationId}` : userName,
+          userName: user != null ? user.name : this.i18nService.t("unknown"),
           userEmail: user != null ? user.email : "",
           date: r.date,
           ip: r.ipAddress,
           type: r.type,
-          installationId: r.installationId,
         });
       })
     );

src/app/modules/loose-components.module.ts

@@ -35,7 +35,6 @@ import { BulkStatusComponent as OrgBulkStatusComponent } from "../organizations/
 import { CollectionAddEditComponent as OrgCollectionAddEditComponent } from "../organizations/manage/collection-add-edit.component";
 import { CollectionsComponent as OrgManageCollectionsComponent } from "../organizations/manage/collections.component";
 import { EntityEventsComponent as OrgEntityEventsComponent } from "../organizations/manage/entity-events.component";
-import { EntityUsersComponent as OrgEntityUsersComponent } from "../organizations/manage/entity-users.component";
 import { EventsComponent as OrgEventsComponent } from "../organizations/manage/events.component";
 import { GroupAddEditComponent as OrgGroupAddEditComponent } from "../organizations/manage/group-add-edit.component";
 import { GroupsComponent as OrgGroupsComponent } from "../organizations/manage/groups.component";
@@ -115,6 +114,7 @@ import { EmergencyAccessTakeoverComponent } from "../settings/emergency-access-t
 import { EmergencyAccessViewComponent } from "../settings/emergency-access-view.component";
 import { EmergencyAccessComponent } from "../settings/emergency-access.component";
 import { EmergencyAddEditComponent } from "../settings/emergency-add-edit.component";
+import { LinkSsoComponent } from "../settings/link-sso.component";
 import { OrganizationPlansComponent } from "../settings/organization-plans.component";
 import { PaymentMethodComponent } from "../settings/payment-method.component";
 import { PaymentComponent } from "../settings/payment.component";
@@ -223,6 +223,7 @@ import { OrganizationBadgeModule } from "./vault/modules/organization-badge/orga
     HintComponent,
     ImportComponent,
     InactiveTwoFactorReportComponent,
+    LinkSsoComponent,
     LockComponent,
     LoginComponent,
     MasterPasswordPolicyComponent,
@@ -243,7 +244,6 @@ import { OrganizationBadgeModule } from "./vault/modules/organization-badge/orga
     OrgCollectionAddEditComponent,
     OrgCollectionsComponent,
     OrgEntityEventsComponent,
-    OrgEntityUsersComponent,
     OrgEventsComponent,
     OrgExportComponent,
     OrgExposedPasswordsReportComponent,
@@ -383,6 +383,7 @@ import { OrganizationBadgeModule } from "./vault/modules/organization-badge/orga
     HintComponent,
     ImportComponent,
     InactiveTwoFactorReportComponent,
+    LinkSsoComponent,
     LockComponent,
     LoginComponent,
     MasterPasswordPolicyComponent,
@@ -403,7 +404,6 @@ import { OrganizationBadgeModule } from "./vault/modules/organization-badge/orga
     OrgCollectionAddEditComponent,
     OrgCollectionsComponent,
     OrgEntityEventsComponent,
-    OrgEntityUsersComponent,
     OrgEventsComponent,
     OrgExportComponent,
     OrgExposedPasswordsReportComponent,

src/app/modules/organizations/manage/entity-users.component.html

@@ -29,52 +29,52 @@
         ></i>
         <span class="sr-only">{{ "loading" | i18n }}</span>
       </div>
-      <div
-        class="modal-body"
-        *ngIf="
-          !loading && users && (users | search: searchText:'name':'email':'id') as searchedUsers
-        "
+      <cdk-virtual-scroll-viewport
+        itemSize="46"
+        minBufferPx="600"
+        maxBufferPx="1200"
+        [style]="scrollViewportStyle"
       >
-        <div class="d-flex">
-          <div class="mr-3">
-            <label class="sr-only" for="search">{{ "search" | i18n }}</label>
-            <input
-              type="search"
-              class="form-control form-control-sm"
-              id="search"
-              placeholder="{{ 'search' | i18n }}"
-              name="SearchText"
-              [(ngModel)]="searchText"
-            />
+        <div class="modal-body" *ngIf="!loading && users && searchedUsers">
+          <div class="d-flex">
+            <div class="mr-3">
+              <label class="sr-only" for="search">{{ "search" | i18n }}</label>
+              <input
+                type="search"
+                class="form-control form-control-sm"
+                id="search"
+                placeholder="{{ 'search' | i18n }}"
+                name="SearchText"
+                [(ngModel)]="searchText"
+              />
+            </div>
+            <div class="btn-group btn-group-sm" role="group">
+              <button
+                type="button"
+                class="btn btn-outline-secondary"
+                [ngClass]="{ active: !showSelected }"
+                (click)="filterSelected(false)"
+              >
+                {{ "all" | i18n }}
+              </button>
+              <button
+                type="button"
+                class="btn btn-outline-secondary"
+                [ngClass]="{ active: showSelected }"
+                (click)="filterSelected(true)"
+              >
+                {{ "selected" | i18n }}
+                <span class="badge badge-pill badge-info" *ngIf="selectedCount">{{
+                  selectedCount
+                }}</span>
+              </button>
+            </div>
           </div>
-          <div class="btn-group btn-group-sm" role="group">
-            <button
-              type="button"
-              class="btn btn-outline-secondary"
-              [ngClass]="{ active: !showSelected }"
-              (click)="filterSelected(false)"
-            >
-              {{ "all" | i18n }}
-            </button>
-            <button
-              type="button"
-              class="btn btn-outline-secondary"
-              [ngClass]="{ active: showSelected }"
-              (click)="filterSelected(true)"
-            >
-              {{ "selected" | i18n }}
-              <span class="badge badge-pill badge-info" *ngIf="selectedCount">{{
-                selectedCount
-              }}</span>
-            </button>
-          </div>
-        </div>
-        <ng-container *ngIf="!searchedUsers.length">
-          <hr />
-          {{ "noUsersInList" | i18n }}
-        </ng-container>
-        <ng-container *ngIf="searchedUsers.length">
-          <table class="table table-hover table-list mb-0">
+          <ng-container *ngIf="!searchedUsers.length">
+            <hr />
+            {{ "noUsersInList" | i18n }}
+          </ng-container>
+          <table class="table table-hover table-list mb-0" [hidden]="!searchedUsers.length">
             <thead>
               <tr>
                 <th>&nbsp;</th>
@@ -91,7 +91,7 @@
               </tr>
             </thead>
             <tbody>
-              <tr *ngFor="let u of searchedUsers">
+              <tr *cdkVirtualFor="let u of searchedUsers" class="">
                 <td class="table-list-checkbox" (click)="check(u)">
                   <input
                     type="checkbox"
@@ -164,8 +164,8 @@
               </tr>
             </tbody>
           </table>
-        </ng-container>
-      </div>
+        </div>
+      </cdk-virtual-scroll-viewport>
       <div class="modal-footer">
         <button type="submit" class="btn btn-primary btn-submit" [disabled]="form.loading">
           <i class="bwi bwi-spinner bwi-spin" title="{{ 'loading' | i18n }}" aria-hidden="true"></i>

src/app/modules/organizations/manage/entity-users.component.ts

@@ -1,5 +1,6 @@
 import { Component, EventEmitter, Input, OnInit, Output } from "@angular/core";
 
+import { SearchPipe } from "jslib-angular/pipes/search.pipe";
 import { ApiService } from "jslib-common/abstractions/api.service";
 import { I18nService } from "jslib-common/abstractions/i18n.service";
 import { LogService } from "jslib-common/abstractions/log.service";
@@ -13,6 +14,7 @@ import { OrganizationUserUserDetailsResponse } from "jslib-common/models/respons
 @Component({
   selector: "app-entity-users",
   templateUrl: "entity-users.component.html",
+  providers: [SearchPipe],
 })
 export class EntityUsersComponent implements OnInit {
   @Input() entity: "group" | "collection";
@@ -33,6 +35,7 @@ export class EntityUsersComponent implements OnInit {
   private allUsers: OrganizationUserUserDetailsResponse[] = [];
 
   constructor(
+    private search: SearchPipe,
     private apiService: ApiService,
     private i18nService: I18nService,
     private platformUtilsService: PlatformUtilsService,
@@ -52,6 +55,14 @@ export class EntityUsersComponent implements OnInit {
     }
   }
 
+  get searchedUsers() {
+    return this.search.transform(this.users, this.searchText, "name", "email", "id");
+  }
+
+  get scrollViewportStyle() {
+    return `min-height: 120px; height: ${120 + this.searchedUsers.length * 46}px`;
+  }
+
   async loadUsers() {
     const users = await this.apiService.getOrganizationUsers(this.organizationId);
     this.allUsers = users.data.map((r) => r).sort(Utils.getSortFunction(this.i18nService, "email"));

src/app/modules/organizations/manage/organization-manage.module.ts

@@ -0,0 +1,13 @@
+import { ScrollingModule } from "@angular/cdk/scrolling";
+import { NgModule } from "@angular/core";
+
+import { SharedModule } from "../../shared.module";
+
+import { EntityUsersComponent } from "./entity-users.component";
+
+@NgModule({
+  imports: [SharedModule, ScrollingModule],
+  declarations: [EntityUsersComponent],
+  exports: [EntityUsersComponent],
+})
+export class OrganizationManageModule {}

src/app/modules/vault-filter/components/collection-filter.component.html

@@ -16,7 +16,7 @@
         aria-hidden="true"
       ></i>
     </button>
-    <h3 class="filter-title">&nbsp;{{ collectionsGrouping.name | i18n }}</h3>
+    <h3 class="filter-title">{{ collectionsGrouping.name | i18n }}</h3>
   </div>
   <ul id="collection-filters" *ngIf="!isCollapsed(collectionsGrouping)" class="filter-options">
     <ng-template #recursiveCollections let-collections>
@@ -31,7 +31,7 @@
           <button
             class="toggle-button"
             *ngIf="c.children.length"
-            (click)="toggleCollapse(c.node)"
+            (click)="collapse(c.node)"
             title="{{ 'toggleCollapse' | i18n }}"
             [attr.aria-expanded]="!isCollapsed(c.node)"
             [attr.aria-controls]="c.node.name + '_children'"
@@ -51,7 +51,7 @@
               class="bwi bwi-collection bwi-fw"
               aria-hidden="true"
             ></i
-            >&nbsp;{{ c.node.name }}
+            >{{ c.node.name }}
           </button>
         </span>
         <ul

src/app/modules/vault-filter/components/folder-filter.component.html

@@ -16,7 +16,9 @@
         }"
       ></i>
     </button>
-    <h3 class="filter-title">&nbsp;{{ "folders" | i18n }}</h3>
+    <h3 class="filter-title">
+      {{ "folders" | i18n }}
+    </h3>
     <button
       class="text-muted ml-auto add-button"
       (click)="addFolder()"
@@ -54,7 +56,7 @@
           </button>
           <button class="filter-button" (click)="applyFilter(f.node)">
             <i *ngIf="f.children.length === 0" class="bwi bwi-fw bwi-folder" aria-hidden="true"></i
-            >&nbsp;{{ f.node.name }}
+            >{{ f.node.name }}
           </button>
           <button
             class="edit-button"

src/app/modules/vault-filter/components/organization-filter.component.html

@@ -14,7 +14,7 @@
           <span class="filter-buttons">
             <a href="#" routerLink="/create-organization" class="filter-button">
               <i class="bwi bwi-plus bwi-fw" aria-hidden="true"></i>
-              &nbsp;{{ "newOrganization" | i18n }}
+              {{ "newOrganization" | i18n }}
             </a>
           </span>
         </li>
@@ -45,6 +45,14 @@
         >
           &nbsp;{{ organizationGrouping.name | i18n }}
         </button>
+        <a
+          href="#"
+          routerLink="/create-organization"
+          class="text-muted ml-auto create-organization-link"
+          appA11yTitle="{{ 'newOrganization' | i18n }}"
+        >
+          <i class="bwi bwi-plus bwi-fw" aria-hidden="true"></i>
+        </a>
       </div>
       <ul id="organization-filters" *ngIf="!isCollapsed" class="filter-options">
         <li
@@ -67,14 +75,6 @@
             </ng-container>
           </span>
         </li>
-        <li class="filter-option">
-          <span class="filter-buttons">
-            <a href="#" routerLink="/create-organization" class="filter-button">
-              <i class="bwi bwi-plus bwi-fw" aria-hidden="true"></i>
-              &nbsp;{{ "newOrganization" | i18n }}
-            </a>
-          </span>
-        </li>
       </ul>
     </ng-container>
     <ng-container *ngSwitchCase="'singleOrganizationAndPersonalOwnershipPolicies'">
@@ -110,6 +110,15 @@
         >
           &nbsp;{{ organizationGrouping.name | i18n }}
         </button>
+        <a
+          href="#"
+          routerLink="/create-organization"
+          class="text-muted ml-auto create-organization-link"
+          appA11yTitle="{{ 'newOrganization' | i18n }}"
+          *ngIf="!(displayMode === 'singleOrganizationPolicy')"
+        >
+          <i class="bwi bwi-plus bwi-fw" aria-hidden="true"></i>
+        </a>
       </div>
       <ul id="organization-filters" *ngIf="!isCollapsed" class="filter-options">
         <li class="filter-option" [ngClass]="{ active: activeFilter.myVaultOnly }">
@@ -140,14 +149,6 @@
             </ng-container>
           </span>
         </li>
-        <li class="filter-option" *ngIf="!(displayMode === 'singleOrganizationPolicy')">
-          <span class="filter-buttons">
-            <a href="#" routerLink="/create-organization" class="filter-button">
-              <i class="bwi bwi-plus bwi-fw" aria-hidden="true"></i>
-              &nbsp;{{ "newOrganization" | i18n }}
-            </a>
-          </span>
-        </li>
       </ul>
     </ng-container>
   </ng-container>

src/app/modules/vault-filter/components/type-filter.component.html

@@ -15,7 +15,9 @@
       }"
     ></i>
   </button>
-  <h3>&nbsp;{{ "types" | i18n }}</h3>
+  <h3>
+    {{ "types" | i18n }}
+  </h3>
 </div>
 <ul id="type-filters" *ngIf="!isCollapsed" class="filter-options">
   <li
@@ -24,14 +26,14 @@
   >
     <span class="filter-buttons">
       <button class="filter-button" (click)="applyFilter(cipherTypeEnum.Login)">
-        <i class="bwi bwi-fw bwi-globe" aria-hidden="true"></i>&nbsp;{{ "typeLogin" | i18n }}
+        <i class="bwi bwi-fw bwi-globe" aria-hidden="true"></i>{{ "typeLogin" | i18n }}
       </button>
     </span>
   </li>
   <li class="filter-option" [ngClass]="{ active: activeFilter.cipherType === cipherTypeEnum.Card }">
     <span class="filter-buttons">
       <button class="filter-button" (click)="applyFilter(cipherTypeEnum.Card)">
-        <i class="bwi bwi-fw bwi-credit-card" aria-hidden="true"></i>&nbsp;{{ "typeCard" | i18n }}
+        <i class="bwi bwi-fw bwi-credit-card" aria-hidden="true"></i>{{ "typeCard" | i18n }}
       </button>
     </span>
   </li>
@@ -41,7 +43,7 @@
   >
     <span class="filter-buttons">
       <button class="filter-button" (click)="applyFilter(cipherTypeEnum.Identity)">
-        <i class="bwi bwi-fw bwi-id-card" aria-hidden="true"></i>&nbsp;{{ "typeIdentity" | i18n }}
+        <i class="bwi bwi-fw bwi-id-card" aria-hidden="true"></i>{{ "typeIdentity" | i18n }}
       </button>
     </span>
   </li>
@@ -51,9 +53,7 @@
   >
     <span class="filter-buttons">
       <button class="filter-button" (click)="applyFilter(cipherTypeEnum.SecureNote)">
-        <i class="bwi bwi-fw bwi-sticky-note" aria-hidden="true"></i>&nbsp;{{
-          "typeSecureNote" | i18n
-        }}
+        <i class="bwi bwi-fw bwi-sticky-note" aria-hidden="true"></i>{{ "typeSecureNote" | i18n }}
       </button>
     </span>
   </li>

src/app/modules/vault-filter/organization-vault-filter.component.ts

@@ -1,28 +0,0 @@
-import { Component, Input } from "@angular/core";
-
-import { Organization } from "jslib-common/models/domain/organization";
-
-import { VaultFilterComponent } from "./vault-filter.component";
-
-@Component({
-  selector: "app-organization-vault-filter",
-  templateUrl: "vault-filter.component.html",
-})
-export class OrganizationVaultFilterComponent extends VaultFilterComponent {
-  hideOrganizations = true;
-  hideFavorites = true;
-  hideFolders = true;
-
-  organization: Organization;
-
-  async initCollections() {
-    if (this.organization.canEditAnyCollection) {
-      return await this.vaultFilterService.buildAdminCollections(this.organization.id);
-    }
-    return await this.vaultFilterService.buildCollections(this.organization.id);
-  }
-
-  async reloadCollectionsAndFolders() {
-    this.collections = await this.initCollections();
-  }
-}

src/app/modules/vault-filter/vault-filter.component.html

@@ -27,6 +27,7 @@
         appAutofocus
       />
       <app-organization-filter
+        *ngIf="showOrgFilter"
         [hide]="hideOrganizations"
         [activeFilter]="activeFilter"
         [collapsedFilterNodes]="collapsedFilterNodes"
@@ -38,7 +39,7 @@
       ></app-organization-filter>
       <div class="filter">
         <app-status-filter
-          [hideFavorites]="hideFavorites"
+          [hideFavorites]="!showFavorites"
           [hideTrash]="hideTrash"
           [activeFilter]="activeFilter"
           (onFilterChange)="applyFilter($event)"
@@ -54,7 +55,7 @@
       </div>
       <div class="filter">
         <app-folder-filter
-          [hide]="hideFolders"
+          [hide]="!showFolders"
           [activeFilter]="activeFilter"
           [collapsedFilterNodes]="collapsedFilterNodes"
           [folderNodes]="folders"

src/app/modules/vault-filter/vault-filter.component.ts

@@ -1,6 +1,7 @@
-import { Component, EventEmitter, Output } from "@angular/core";
+import { Component, EventEmitter, Input, Output } from "@angular/core";
 
 import { VaultFilterComponent as BaseVaultFilterComponent } from "jslib-angular/modules/vault-filter/vault-filter.component";
+import { Organization } from "jslib-common/models/domain/organization";
 
 import { VaultFilterService } from "./vault-filter.service";
 
@@ -9,17 +10,28 @@ import { VaultFilterService } from "./vault-filter.service";
   templateUrl: "vault-filter.component.html",
 })
 export class VaultFilterComponent extends BaseVaultFilterComponent {
+  @Input() showOrgFilter = true;
+  @Input() showFolders = true;
+  @Input() showFavorites = true;
+
   @Output() onSearchTextChanged = new EventEmitter<string>();
 
   searchPlaceholder: string;
   searchText = "";
 
+  organization: Organization;
+
   constructor(protected vaultFilterService: VaultFilterService) {
-    // This empty constructor is required to provide the web vaultFilterService subclass to super()
-    // TODO: refactor this to use proper dependency injection
     super(vaultFilterService);
   }
 
+  async ngOnInit() {
+    await super.ngOnInit();
+    this.vaultFilterService.collapsedFilterNodes$.subscribe((nodes) => {
+      this.collapsedFilterNodes = nodes;
+    });
+  }
+
   searchTextChanged() {
     this.onSearchTextChanged.emit(this.searchText);
   }
@@ -33,4 +45,8 @@ export class VaultFilterComponent extends BaseVaultFilterComponent {
     this.activeSingleOrganizationPolicy =
       await this.vaultFilterService.checkForSingleOrganizationPolicy();
   }
+
+  async initCollections() {
+    return await this.vaultFilterService.buildCollections(this.organization?.id);
+  }
 }

src/app/modules/vault-filter/vault-filter.module.ts

@@ -1,15 +1,20 @@
 import { NgModule } from "@angular/core";
 
+import { CipherService } from "jslib-common/abstractions/cipher.service";
+import { CollectionService } from "jslib-common/abstractions/collection.service";
+import { FolderService } from "jslib-common/abstractions/folder.service";
+import { OrganizationService } from "jslib-common/abstractions/organization.service";
+import { PolicyService } from "jslib-common/abstractions/policy.service";
+import { StateService } from "jslib-common/abstractions/state.service";
+
 import { SharedModule } from "../shared.module";
 
 import { CollectionFilterComponent } from "./components/collection-filter.component";
 import { FolderFilterComponent } from "./components/folder-filter.component";
-import { LinkSsoComponent } from "./components/link-sso.component";
 import { OrganizationFilterComponent } from "./components/organization-filter.component";
 import { OrganizationOptionsComponent } from "./components/organization-options.component";
 import { StatusFilterComponent } from "./components/status-filter.component";
 import { TypeFilterComponent } from "./components/type-filter.component";
-import { OrganizationVaultFilterComponent } from "./organization-vault-filter.component";
 import { VaultFilterComponent } from "./vault-filter.component";
 import { VaultFilterService } from "./vault-filter.service";
 
@@ -23,10 +28,21 @@ import { VaultFilterService } from "./vault-filter.service";
     OrganizationOptionsComponent,
     StatusFilterComponent,
     TypeFilterComponent,
-    OrganizationVaultFilterComponent,
-    LinkSsoComponent,
   ],
-  exports: [VaultFilterComponent, OrganizationVaultFilterComponent],
-  providers: [VaultFilterService],
+  exports: [VaultFilterComponent],
+  providers: [
+    {
+      provide: VaultFilterService,
+      useClass: VaultFilterService,
+      deps: [
+        StateService,
+        OrganizationService,
+        FolderService,
+        CipherService,
+        CollectionService,
+        PolicyService,
+      ],
+    },
+  ],
 })
 export class VaultFilterModule {}

src/app/modules/vault-filter/vault-filter.service.ts

@@ -1,54 +1,28 @@
-import { Injectable } from "@angular/core";
+import { BehaviorSubject, Observable } from "rxjs";
 
-import { DynamicTreeNode } from "jslib-angular/modules/vault-filter/models/dynamic-tree-node.model";
 import { VaultFilterService as BaseVaultFilterService } from "jslib-angular/modules/vault-filter/vault-filter.service";
-import { ApiService } from "jslib-common/abstractions/api.service";
-import { CipherService } from "jslib-common/abstractions/cipher.service";
-import { CollectionService } from "jslib-common/abstractions/collection.service";
-import { FolderService } from "jslib-common/abstractions/folder.service";
-import { OrganizationService } from "jslib-common/abstractions/organization.service";
-import { PolicyService } from "jslib-common/abstractions/policy.service";
-import { StateService } from "jslib-common/abstractions/state.service";
-import { CollectionData } from "jslib-common/models/data/collectionData";
-import { Collection } from "jslib-common/models/domain/collection";
-import { CollectionDetailsResponse } from "jslib-common/models/response/collectionResponse";
-import { CollectionView } from "jslib-common/models/view/collectionView";
 
-@Injectable()
 export class VaultFilterService extends BaseVaultFilterService {
-  constructor(
-    stateService: StateService,
-    organizationService: OrganizationService,
-    folderService: FolderService,
-    cipherService: CipherService,
-    collectionService: CollectionService,
-    policyService: PolicyService,
-    protected apiService: ApiService
-  ) {
-    super(
-      stateService,
-      organizationService,
-      folderService,
-      cipherService,
-      collectionService,
-      policyService
-    );
+  private _collapsedFilterNodes = new BehaviorSubject<Set<string>>(null);
+  collapsedFilterNodes$: Observable<Set<string>> = this._collapsedFilterNodes.asObservable();
+
+  async buildCollapsedFilterNodes(): Promise<Set<string>> {
+    const nodes = await super.buildCollapsedFilterNodes();
+    this._collapsedFilterNodes.next(nodes);
+    return nodes;
   }
 
-  async buildAdminCollections(organizationId: string) {
-    let result: CollectionView[] = [];
-    const collectionResponse = await this.apiService.getCollections(organizationId);
-    if (collectionResponse?.data != null && collectionResponse.data.length) {
-      const collectionDomains = collectionResponse.data.map(
-        (r: CollectionDetailsResponse) => new Collection(new CollectionData(r))
-      );
-      result = await this.collectionService.decryptMany(collectionDomains);
-    }
+  async storeCollapsedFilterNodes(collapsedFilterNodes: Set<string>): Promise<void> {
+    await super.storeCollapsedFilterNodes(collapsedFilterNodes);
+    this._collapsedFilterNodes.next(collapsedFilterNodes);
+  }
 
-    const nestedCollections = await this.collectionService.getAllNested(result);
-    return new DynamicTreeNode<CollectionView>({
-      fullList: result,
-      nestedList: nestedCollections,
-    });
+  async ensureVaultFiltersAreExpanded() {
+    const collapsedFilterNodes = await super.buildCollapsedFilterNodes();
+    if (!collapsedFilterNodes.has("vaults")) {
+      return;
+    }
+    collapsedFilterNodes.delete("vaults");
+    await this.storeCollapsedFilterNodes(collapsedFilterNodes);
   }
 }

src/app/modules/vault/modules/individual-vault/individual-vault.component.ts

@@ -34,6 +34,7 @@ import { CollectionsComponent } from "../../../../vault/collections.component";
 import { FolderAddEditComponent } from "../../../../vault/folder-add-edit.component";
 import { ShareComponent } from "../../../../vault/share.component";
 import { VaultFilterComponent } from "../../../vault-filter/vault-filter.component";
+import { VaultFilterService } from "../../../vault-filter/vault-filter.service";
 import { VaultService } from "../../vault.service";
 
 const BroadcasterSubscriptionId = "VaultComponent";
@@ -88,7 +89,8 @@ export class IndividualVaultComponent implements OnInit, OnDestroy {
     private organizationService: OrganizationService,
     private vaultService: VaultService,
     private cipherService: CipherService,
-    private passwordRepromptService: PasswordRepromptService
+    private passwordRepromptService: PasswordRepromptService,
+    private vaultFilterService: VaultFilterService
   ) {}
 
   async ngOnInit() {
@@ -187,6 +189,7 @@ export class IndividualVaultComponent implements OnInit, OnDestroy {
       this.activeFilter.myVaultOnly = true;
     } else {
       this.activeFilter.selectedOrganizationId = orgId;
+      await this.vaultFilterService.ensureVaultFiltersAreExpanded();
     }
     await this.applyVaultFilter(this.activeFilter);
   }

src/app/modules/vault/modules/organization-vault/organization-vault.component.html

@@ -4,12 +4,15 @@
       <div class="groupings">
         <div class="content">
           <div class="inner-content">
-            <app-organization-vault-filter
+            <app-vault-filter
               #vaultFilter
+              [showFolders]="false"
+              [showFavorites]="false"
               [activeFilter]="activeFilter"
+              [showOrgFilter]="false"
               (onFilterChange)="applyVaultFilter($event)"
               (onSearchTextChanged)="filterSearchText($event)"
-            ></app-organization-vault-filter>
+            ></app-vault-filter>
           </div>
         </div>
       </div>

src/app/modules/vault/modules/organization-vault/organization-vault.component.ts

@@ -29,7 +29,7 @@ import { AddEditComponent } from "../../../../organizations/vault/add-edit.compo
 import { AttachmentsComponent } from "../../../../organizations/vault/attachments.component";
 import { CiphersComponent } from "../../../../organizations/vault/ciphers.component";
 import { CollectionsComponent } from "../../../../organizations/vault/collections.component";
-import { OrganizationVaultFilterComponent } from "../../../vault-filter/organization-vault-filter.component";
+import { VaultFilterComponent } from "../../../vault-filter/vault-filter.component";
 import { VaultService } from "../../vault.service";
 
 const BroadcasterSubscriptionId = "OrgVaultComponent";
@@ -39,8 +39,7 @@ const BroadcasterSubscriptionId = "OrgVaultComponent";
   templateUrl: "organization-vault.component.html",
 })
 export class OrganizationVaultComponent implements OnInit, OnDestroy {
-  @ViewChild("vaultFilter", { static: true })
-  vaultFilterComponent: OrganizationVaultFilterComponent;
+  @ViewChild("vaultFilter", { static: true }) vaultFilterComponent: VaultFilterComponent;
   @ViewChild(CiphersComponent, { static: true }) ciphersComponent: CiphersComponent;
   @ViewChild("attachments", { read: ViewContainerRef, static: true })
   attachmentsModalRef: ViewContainerRef;
@@ -58,11 +57,6 @@ export class OrganizationVaultComponent implements OnInit, OnDestroy {
   trashCleanupWarning: string = null;
   activeFilter: VaultFilter = new VaultFilter();
 
-  // This is a hack to avoid redundant api calls that fetch OrganizationVaultFilterComponent collections
-  // When it makes sense to do so we should leverage some other communication method for change events that isn't directly tied to the query param for organizationId
-  // i.e. exposing the VaultFiltersService to the OrganizationSwitcherComponent to make relevant updates from a change event instead of just depending on the router
-  firstLoaded = true;
-
   constructor(
     private route: ActivatedRoute,
     private organizationService: OrganizationService,
@@ -101,7 +95,11 @@ export class OrganizationVaultComponent implements OnInit, OnDestroy {
                 case "syncCompleted":
                   if (message.successfully) {
                     await Promise.all([
-                      this.vaultFilterComponent.reloadCollectionsAndFolders(),
+                      this.vaultFilterComponent.reloadCollectionsAndFolders(
+                        new VaultFilter({
+                          selectedOrganizationId: this.organization.id,
+                        } as Partial<VaultFilter>)
+                      ),
                       this.ciphersComponent.refresh(),
                     ]);
                     this.changeDetectorRef.detectChanges();
@@ -111,12 +109,9 @@ export class OrganizationVaultComponent implements OnInit, OnDestroy {
             });
           });
         }
-
-        if (!this.firstLoaded) {
-          await this.vaultFilterComponent.reloadCollectionsAndFolders();
-        }
-        this.firstLoaded = false;
-
+        await this.vaultFilterComponent.reloadCollectionsAndFolders(
+          new VaultFilter({ selectedOrganizationId: this.organization.id } as Partial<VaultFilter>)
+        );
         await this.ciphersComponent.reload();
 
         if (qParams.viewEvents != null) {

src/app/organizations/guards/permissions.guard.ts

@@ -1,5 +1,5 @@
 import { Injectable } from "@angular/core";
-import { ActivatedRouteSnapshot, CanActivate, Router, RouterStateSnapshot } from "@angular/router";
+import { ActivatedRouteSnapshot, CanActivate, Router } from "@angular/router";
 
 import { I18nService } from "jslib-common/abstractions/i18n.service";
 import { OrganizationService } from "jslib-common/abstractions/organization.service";
@@ -17,7 +17,7 @@ export class PermissionsGuard implements CanActivate {
     private syncService: SyncService
   ) {}
 
-  async canActivate(route: ActivatedRouteSnapshot, state: RouterStateSnapshot) {
+  async canActivate(route: ActivatedRouteSnapshot) {
     // TODO: We need to fix this issue once and for all.
     if ((await this.syncService.getLastSync()) == null) {
       await this.syncService.fullSync(false);
@@ -39,16 +39,6 @@ export class PermissionsGuard implements CanActivate {
 
     const permissions = route.data == null ? [] : (route.data.permissions as Permissions[]);
     if (permissions != null && !org.hasAnyPermission(permissions)) {
-      // Handle linkable ciphers for organizations the user only has view access to
-      // https://bitwarden.atlassian.net/browse/EC-203
-      if (state.root.queryParamMap.has("cipherId")) {
-        return this.router.createUrlTree(["/vault"], {
-          queryParams: {
-            cipherId: state.root.queryParamMap.get("cipherId"),
-          },
-        });
-      }
-
       this.platformUtilsService.showToast("error", null, this.i18nService.t("accessDenied"));
       return this.router.createUrlTree(["/"]);
     }

src/app/organizations/manage/collections.component.ts

@@ -20,8 +20,9 @@ import {
 import { ListResponse } from "jslib-common/models/response/listResponse";
 import { CollectionView } from "jslib-common/models/view/collectionView";
 
+import { EntityUsersComponent } from "../../modules/organizations/manage/entity-users.component";
+
 import { CollectionAddEditComponent } from "./collection-add-edit.component";
-import { EntityUsersComponent } from "./entity-users.component";
 
 @Component({
   selector: "app-org-manage-collections",

src/app/organizations/manage/groups.component.ts

@@ -12,7 +12,8 @@ import { SearchService } from "jslib-common/abstractions/search.service";
 import { Utils } from "jslib-common/misc/utils";
 import { GroupResponse } from "jslib-common/models/response/groupResponse";
 
-import { EntityUsersComponent } from "./entity-users.component";
+import { EntityUsersComponent } from "../../modules/organizations/manage/entity-users.component";
+
 import { GroupAddEditComponent } from "./group-add-edit.component";
 
 @Component({

src/app/oss.module.ts

@@ -1,6 +1,7 @@
 import { NgModule } from "@angular/core";
 
 import { LooseComponentsModule } from "./modules/loose-components.module";
+import { OrganizationManageModule } from "./modules/organizations/manage/organization-manage.module";
 import { PipesModule } from "./modules/pipes/pipes.module";
 import { SharedModule } from "./modules/shared.module";
 import { VaultFilterModule } from "./modules/vault-filter/vault-filter.module";
@@ -13,6 +14,7 @@ import { OrganizationBadgeModule } from "./modules/vault/modules/organization-ba
     VaultFilterModule,
     OrganizationBadgeModule,
     PipesModule,
+    OrganizationManageModule,
   ],
   exports: [LooseComponentsModule, VaultFilterModule, OrganizationBadgeModule, PipesModule],
   bootstrap: [],

src/app/services/event.service.ts

@@ -307,9 +307,6 @@ export class EventService {
       case EventType.Organization_DisabledKeyConnector:
         msg = humanReadableMsg = this.i18nService.t("disabledKeyConnector");
         break;
-      case EventType.Organization_SponsorshipsSynced:
-        msg = humanReadableMsg = this.i18nService.t("sponsorshipsSynced");
-        break;
       // Policies
       case EventType.Policy_Updated: {
         msg = this.i18nService.t("modifiedPolicyId", this.formatPolicyId(ev));

src/app/tools/generator.component.ts

@@ -40,13 +40,11 @@ export class GeneratorComponent extends BaseGeneratorComponent {
       route,
       window
     );
-    if (platformUtilsService.isSelfHost()) {
-      // Cannot use Firefox Relay on self hosted web vaults due to CORS issues with Firefox Relay API
-      this.forwardOptions.splice(
-        this.forwardOptions.findIndex((o) => o.value === "firefoxrelay"),
-        1
-      );
-    }
+    // Cannot use Firefox Relay on the web vault yet due to CORS issues with Firefox Relay API
+    this.forwardOptions.splice(
+      this.forwardOptions.findIndex((o) => o.value === "firefoxrelay"),
+      1
+    );
   }
 
   async history() {

src/locales/en/messages.json

@@ -4674,8 +4674,8 @@
   "removeSponsorshipSuccess": {
     "message": "Sponsorship Removed"
   },
-  "ssoKeyConnectorError": {
-    "message": "Key Connector error: make sure Key Connector is available and working correctly."
+  "ssoKeyConnectorUnavailable": {
+    "message": "Unable to reach the Key Connector, try again later."
   },
   "keyConnectorUrl": {
     "message": "Key Connector URL"
@@ -5005,7 +5005,7 @@
     "message": "Service"
   },
   "unknownCipher": {
-    "message": "Unknown Item, you may need to request permission to access this item."
+    "message": "Unknown Item, you may need to login with another account to access this item."
   },
   "cannotSponsorSelf": {
     "message": "You cannot redeem for the active account. Enter a different email."
@@ -5041,9 +5041,6 @@
     "message": "Last Sync",
     "Description": "Used as a prefix to indicate the last time a sync occured. Example \"Last sync 1968-11-16 00:00:00\""
   },
-  "sponsorshipsSynced": {
-    "message": "Self-hosted sponsorships synced."
-  },
   "billingManagedByProvider": {
     "message": "Managed by $PROVIDER$",
     "placeholders": {

src/scss/vault-filters.scss

@@ -14,6 +14,14 @@
     font-size: $font-size-base;
   }
 
+  a.create-organization-link {
+    &:hover {
+      @include themify($themes) {
+        color: themed("iconHover") !important;
+      }
+    }
+  }
+
   button {
     @extend .no-btn;
   }

webpack.config.js

@@ -204,8 +204,60 @@ const devServer =
             return [
               {
                 key: "Content-Security-Policy",
-                value:
-                  "default-src 'self'; script-src 'self' 'sha256-ryoU+5+IUZTuUyTElqkrQGBJXr1brEv6r2CA62WUw8w=' https://js.stripe.com https://js.braintreegateway.com https://www.paypalobjects.com; style-src 'self' https://assets.braintreegateway.com https://*.paypal.com 'sha256-47DEQpj8HBSa+/TImW+5JCeuQeRkm5NMpJWZG3hSuFU=' 'sha256-JVRXyYPueLWdwGwY9m/7u4QlZ1xeQdqUj2t8OVIzZE4='; img-src 'self' data: https://icons.bitwarden.net https://*.paypal.com https://www.paypalobjects.com https://q.stripe.com https://haveibeenpwned.com https://www.gravatar.com; child-src 'self' https://js.stripe.com https://assets.braintreegateway.com https://*.paypal.com https://*.duosecurity.com; frame-src 'self' https://js.stripe.com https://assets.braintreegateway.com https://*.paypal.com https://*.duosecurity.com; connect-src 'self' wss://notifications.bitwarden.com https://notifications.bitwarden.com https://cdn.bitwarden.net https://api.pwnedpasswords.com https://2fa.directory/api/v3/totp.json https://api.stripe.com https://www.paypal.com https://api.braintreegateway.com https://client-analytics.braintreegateway.com https://*.braintree-api.com https://*.blob.core.windows.net https://app.simplelogin.io/api/alias/random/new https://app.anonaddy.com/api/v1/aliases; object-src 'self' blob:;",
+                value: `
+                  default-src 'self'; 
+                  script-src 
+                    'self'
+                    'sha256-ryoU+5+IUZTuUyTElqkrQGBJXr1brEv6r2CA62WUw8w='
+                    https://js.stripe.com
+                    https://js.braintreegateway.com
+                    https://www.paypalobjects.com;
+                  style-src
+                    'self'
+                    https://assets.braintreegateway.com
+                    https://*.paypal.com
+                    'sha256-47DEQpj8HBSa+/TImW+5JCeuQeRkm5NMpJWZG3hSuFU='
+                    'sha256-JVRXyYPueLWdwGwY9m/7u4QlZ1xeQdqUj2t8OVIzZE4=';
+                    'sha256-0xHKHIT3+e2Gknxsm/cpErSprhL+o254L/y5bljg74U='
+                  img-src
+                    'self'
+                    data:
+                      https://icons.bitwarden.net
+                      https://*.paypal.com
+                      https://www.paypalobjects.com
+                      https://q.stripe.com
+                      https://haveibeenpwned.com
+                      https://www.gravatar.com;
+                  child-src
+                    'self'
+                    https://js.stripe.com
+                    https://assets.braintreegateway.com
+                    https://*.paypal.com
+                    https://*.duosecurity.com;
+                  frame-src
+                    'self'
+                    https://js.stripe.com
+                    https://assets.braintreegateway.com
+                    https://*.paypal.com
+                    https://*.duosecurity.com;
+                  connect-src
+                    'self'
+                    wss://notifications.bitwarden.com
+                    https://notifications.bitwarden.com
+                    https://cdn.bitwarden.net
+                    https://api.pwnedpasswords.com
+                    https://2fa.directory/api/v3/totp.json
+                    https://api.stripe.com
+                    https://www.paypal.com
+                    https://api.braintreegateway.com
+                    https://client-analytics.braintreegateway.com
+                    https://*.braintree-api.com
+                    https://*.blob.core.windows.net
+                    https://app.simplelogin.io/api/alias/random/new
+                    https://app.anonaddy.com/api/v1/aliases;
+                  object-src 
+                    'self'
+                    blob:;`,
               },
             ];
           }