Fix Delete button not showing in collection modal (#7304)

apps/web/src/app/vault/components/collection-dialog/collection-dialog.component.html

@@ -109,7 +109,7 @@
         {{ "cancel" | i18n }}
       </button>
       <button
-        *ngIf="canDelete$ | async"
+        *ngIf="showDeleteButton"
         type="button"
         bitIconButton="bwi-trash"
         buttonType="danger"

apps/web/src/app/vault/components/collection-dialog/collection-dialog.component.ts

@@ -94,6 +94,7 @@ export class CollectionDialogComponent implements OnInit, OnDestroy {
     selectedOrg: "",
   });
   protected PermissionMode = PermissionMode;
+  protected showDeleteButton = false;
 
   constructor(
     @Inject(DIALOG_DATA) private params: CollectionDialogParams,
@@ -198,6 +199,8 @@ export class CollectionDialogComponent implements OnInit, OnDestroy {
               parent,
               access: accessSelections,
             });
+
+            this.showDeleteButton = this.collection.canDelete(organization, flexibleCollections);
           } else {
             this.nestOptions = collections;
             const parent = collections.find((c) => c.id === this.params.parentCollectionId);
@@ -313,13 +316,6 @@ export class CollectionDialogComponent implements OnInit, OnDestroy {
     this.close(CollectionDialogAction.Deleted, this.collection);
   };
 
-  protected canDelete$ = this.flexibleCollectionsEnabled$.pipe(
-    map(
-      (flexibleCollectionsEnabled) =>
-        this.editMode && this.collection.canDelete(this.organization, flexibleCollectionsEnabled),
-    ),
-  );
-
   ngOnDestroy(): void {
     this.destroy$.next();
     this.destroy$.complete();