bitwarden · vincentsalucci · Oct 24, 2023 · Oct 24, 2023
diff --git a/apps/web/src/app/vault/components/vault-items/vault-items.component.html b/apps/web/src/app/vault/components/vault-items/vault-items.component.html
@@ -80,7 +80,7 @@
           [showGroups]="showGroups"
           [organizations]="allOrganizations"
           [groups]="allGroups"
-          [canDeleteCollection]="canDeleteCollection(item.collection) | async"
+          [canDeleteCollection]="canDeleteCollection(item.collection)"
           [canEditCollection]="canEditCollection(item.collection)"
           [checked]="selection.isSelected(item)"
           (checkedToggled)="selection.toggle(item)"

diff --git a/apps/web/src/app/vault/components/vault-items/vault-items.component.ts b/apps/web/src/app/vault/components/vault-items/vault-items.component.ts
@@ -2,6 +2,7 @@ import { SelectionModel } from "@angular/cdk/collections";
 import { Component, EventEmitter, Input, Output } from "@angular/core";
 
 import { Organization } from "@bitwarden/common/admin-console/models/domain/organization";
+import { FeatureFlag } from "@bitwarden/common/enums/feature-flag.enum";
 import { ConfigServiceAbstraction } from "@bitwarden/common/platform/abstractions/config/config.service.abstraction";
 import { CipherView } from "@bitwarden/common/vault/models/view/cipher.view";
 import { CollectionView } from "@bitwarden/common/vault/models/view/collection.view";
@@ -28,6 +29,8 @@ const MaxSelectionCount = 500;
 export class VaultItemsComponent {
   protected RowHeight = RowHeight;
 
+  private flexibleCollectionsEnabled: boolean;
+
   @Input() disabled: boolean;
   @Input() showOwner: boolean;
   @Input() showCollections: boolean;
@@ -70,6 +73,12 @@ export class VaultItemsComponent {
 
   constructor(private configService: ConfigServiceAbstraction) {}
 
+  async ngOnInit() {
+    this.flexibleCollectionsEnabled = await this.configService.getFeatureFlag(
+      FeatureFlag.FlexibleCollections
+    );
+  }
+
   get showExtraColumn() {
     return this.showCollections || this.showGroups || this.showOwner;
   }
@@ -100,14 +109,14 @@ export class VaultItemsComponent {
     return collection.canEdit(organization);
   }
 
-  protected async canDeleteCollection(collection: CollectionView): Promise<boolean> {
+  protected canDeleteCollection(collection: CollectionView): boolean {
     // Only allow allow deletion if collection editing is enabled and not deleting "Unassigned"
     if (collection.id === Unassigned) {
       return false;
     }
 
     const organization = this.allOrganizations.find((o) => o.id === collection.organizationId);
-    return await collection.canDelete(organization, this.configService);
+    return collection.canDelete(organization, this.flexibleCollectionsEnabled);
   }
 
   protected toggleAll() {

diff --git a/apps/web/src/app/vault/core/views/collection-admin.view.ts b/apps/web/src/app/vault/core/views/collection-admin.view.ts
@@ -1,6 +1,4 @@
 import { Organization } from "@bitwarden/common/admin-console/models/domain/organization";
-import { FeatureFlag } from "@bitwarden/common/enums/feature-flag.enum";
-import { ConfigServiceAbstraction } from "@bitwarden/common/platform/abstractions/config/config.service.abstraction";
 import { CollectionAccessDetailsResponse } from "@bitwarden/common/src/vault/models/response/collection.response";
 import { CollectionView } from "@bitwarden/common/vault/models/view/collection.view";
 
@@ -37,11 +35,8 @@ export class CollectionAdminView extends CollectionView {
     return org?.canEditAnyCollection || (org?.canEditAssignedCollections && this.assigned);
   }
 
-  override async canDelete(
-    org: Organization,
-    configService: ConfigServiceAbstraction
-  ): Promise<boolean> {
-    if (await configService.getFeatureFlag(FeatureFlag.FlexibleCollections)) {
+  override canDelete(org: Organization, flexibleCollectionsEnabled: boolean): boolean {
+    if (flexibleCollectionsEnabled) {
       return org?.canDeleteAnyCollection;
     } else {
       return org?.canDeleteAnyCollection || (org?.canDeleteAssignedCollections && this.assigned);

diff --git a/apps/web/src/app/vault/individual-vault/vault-header/vault-header.component.html b/apps/web/src/app/vault/individual-vault/vault-header/vault-header.component.html
@@ -28,9 +28,7 @@ <h1 class="tw-mb-0 tw-mt-1 tw-flex tw-items-center tw-space-x-2">
         aria-hidden="true"
       ></i>
       <span>{{ title }}</span>
-      <ng-container
-        *ngIf="collection !== undefined && (canEditCollection || canDeleteCollection())"
-      >
+      <ng-container *ngIf="collection !== undefined && (canEditCollection || canDeleteCollection)">
         <button
           bitIconButton="bwi-angle-down"
           [bitMenuTriggerFor]="editCollectionMenu"
@@ -59,7 +57,7 @@ <h1 class="tw-mb-0 tw-mt-1 tw-flex tw-items-center tw-space-x-2">
           </button>
           <button
             type="button"
-            *ngIf="canDeleteCollection()"
+            *ngIf="canDeleteCollection"
             bitMenuItem
             (click)="deleteCollection()"
           >

diff --git a/apps/web/src/app/vault/individual-vault/vault-header/vault-header.component.ts b/apps/web/src/app/vault/individual-vault/vault-header/vault-header.component.ts
@@ -1,6 +1,7 @@
 import { ChangeDetectionStrategy, Component, EventEmitter, Input, Output } from "@angular/core";
 
 import { Organization } from "@bitwarden/common/admin-console/models/domain/organization";
+import { FeatureFlag } from "@bitwarden/common/enums/feature-flag.enum";
 import { TreeNode } from "@bitwarden/common/models/domain/tree-node";
 import { ConfigServiceAbstraction } from "@bitwarden/common/platform/abstractions/config/config.service.abstraction";
 import { I18nService } from "@bitwarden/common/platform/abstractions/i18n.service";
@@ -23,6 +24,8 @@ export class VaultHeaderComponent {
   protected All = All;
   protected CollectionDialogTabType = CollectionDialogTabType;
 
+  private flexibleCollectionsEnabled: boolean;
+
   /**
    * Boolean to determine the loading state of the header.
    * Shows a loading spinner if set to true
@@ -58,6 +61,12 @@ export class VaultHeaderComponent {
 
   constructor(private i18nService: I18nService, private configService: ConfigServiceAbstraction) {}
 
+  async ngOnInit() {
+    this.flexibleCollectionsEnabled = await this.configService.getFeatureFlag(
+      FeatureFlag.FlexibleCollections
+    );
+  }
+
   /**
    * The id of the organization that is currently being filtered on.
    * This can come from a collection filter or organization filter, if applied.
@@ -141,7 +150,7 @@ export class VaultHeaderComponent {
     this.onEditCollection.emit({ tab });
   }
 
-  async canDeleteCollection(): Promise<boolean> {
+  get canDeleteCollection(): boolean {
     // Only delete collections if not deleting "Unassigned"
     if (this.collection === undefined) {
       return false;
@@ -152,7 +161,7 @@ export class VaultHeaderComponent {
       (o) => o.id === this.collection?.node.organizationId
     );
 
-    return await this.collection.node.canDelete(organization, this.configService);
+    return this.collection.node.canDelete(organization, this.flexibleCollectionsEnabled);
   }
 
   deleteCollection() {

diff --git a/apps/web/src/app/vault/org-vault/vault-header/vault-header.component.html b/apps/web/src/app/vault/org-vault/vault-header/vault-header.component.html
@@ -27,9 +27,7 @@ <h1 class="tw-mb-0 tw-mt-1 tw-flex tw-items-center tw-space-x-2">
         aria-hidden="true"
       ></i>
       <span>{{ title }}</span>
-      <ng-container
-        *ngIf="collection !== undefined && (canEditCollection || canDeleteCollection())"
-      >
+      <ng-container *ngIf="collection !== undefined && (canEditCollection || canDeleteCollection)">
         <button
           bitIconButton="bwi-angle-down"
           [bitMenuTriggerFor]="editCollectionMenu"
@@ -58,7 +56,7 @@ <h1 class="tw-mb-0 tw-mt-1 tw-flex tw-items-center tw-space-x-2">
           </button>
           <button
             type="button"
-            *ngIf="canDeleteCollection()"
+            *ngIf="canDeleteCollection"
             bitMenuItem
             (click)="deleteCollection()"
           >

diff --git a/apps/web/src/app/vault/org-vault/vault-header/vault-header.component.ts b/apps/web/src/app/vault/org-vault/vault-header/vault-header.component.ts
@@ -5,6 +5,7 @@ import { firstValueFrom } 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 { ProductType } from "@bitwarden/common/enums";
+import { FeatureFlag } from "@bitwarden/common/enums/feature-flag.enum";
 import { TreeNode } from "@bitwarden/common/models/domain/tree-node";
 import { ConfigServiceAbstraction } from "@bitwarden/common/platform/abstractions/config/config.service.abstraction";
 import { I18nService } from "@bitwarden/common/platform/abstractions/i18n.service";
@@ -57,6 +58,8 @@ export class VaultHeaderComponent {
   protected CollectionDialogTabType = CollectionDialogTabType;
   protected organizations$ = this.organizationService.organizations$;
 
+  private flexibleCollectionsEnabled: boolean;
+
   constructor(
     private organizationService: OrganizationService,
     private i18nService: I18nService,
@@ -66,6 +69,12 @@ export class VaultHeaderComponent {
     private configService: ConfigServiceAbstraction
   ) {}
 
+  async ngOnInit() {
+    this.flexibleCollectionsEnabled = await this.configService.getFeatureFlag(
+      FeatureFlag.FlexibleCollections
+    );
+  }
+
   get title() {
     if (this.collection !== undefined) {
       return this.collection.node.name;
@@ -166,14 +175,14 @@ export class VaultHeaderComponent {
     this.onEditCollection.emit({ tab });
   }
 
-  async canDeleteCollection(): Promise<boolean> {
+  get canDeleteCollection(): boolean {
     // Only delete collections if not deleting "Unassigned"
     if (this.collection === undefined) {
       return false;
     }
 
     // Otherwise, check if we can delete the specified collection
-    return await this.collection.node.canDelete(this.organization, this.configService);
+    return this.collection.node.canDelete(this.organization, this.flexibleCollectionsEnabled);
   }
 
   deleteCollection() {

diff --git a/libs/common/src/vault/models/view/collection.view.ts b/libs/common/src/vault/models/view/collection.view.ts
@@ -1,8 +1,6 @@
 import { Organization } from "../../../admin-console/models/domain/organization";
-import { FeatureFlag } from "../../../enums/feature-flag.enum";
 import { ITreeNodeObject } from "../../../models/domain/tree-node";
 import { View } from "../../../models/view/view";
-import { ConfigServiceAbstraction } from "../../../platform/abstractions/config/config.service.abstraction";
 import { Collection } from "../domain/collection";
 import { CollectionAccessDetailsResponse } from "../response/collection.response";
 
@@ -44,14 +42,14 @@ export class CollectionView implements View, ITreeNodeObject {
   }
 
   // For deleting a collection, not the items within it.
-  async canDelete(org: Organization, configService: ConfigServiceAbstraction): Promise<boolean> {
+  canDelete(org: Organization, flexibleCollectionsEnabled: boolean): boolean {
     if (org.id !== this.organizationId) {
       throw new Error(
         "Id of the organization provided does not match the org id of the collection."
       );
     }
 
-    if (await configService.getFeatureFlag(FeatureFlag.FlexibleCollections)) {
+    if (flexibleCollectionsEnabled) {
       return org?.canDeleteAnyCollection || (!org?.limitCollectionCreationDeletion && this.manage);
     } else {
       return org?.canDeleteAnyCollection || org?.canDeleteAssignedCollections;