[AC-2483] Added new Add Access UI to the collection dialog for AC (#9090)

* added new Add Access UI to the collection dialog for AC

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

@@ -69,6 +69,13 @@
               <span>{{ "readOnlyCollectionAccess" | i18n }}</span>
             </ng-container>
             <ng-container *ngIf="!dialogReadonly">
+              <bit-callout
+                title="{{ 'grantAddAccessCollectionWarningTitle' | i18n }}"
+                type="warning"
+                *ngIf="showAddAccessWarning"
+              >
+                {{ "grantAddAccessCollectionWarning" | i18n }}
+              </bit-callout>
               <span *ngIf="organization.useGroups">{{ "grantCollectionAccess" | i18n }}</span>
               <span *ngIf="!organization.useGroups">{{
                 "grantCollectionAccessMembersOnly" | i18n
@@ -84,7 +91,10 @@
           </div>
           <div
             class="tw-mb-3 tw-text-danger"
-            *ngIf="formGroup.controls.access.hasError('managePermissionRequired')"
+            *ngIf="
+              formGroup.controls.access.hasError('managePermissionRequired') &&
+              !showAddAccessWarning
+            "
           >
             <i class="bwi bwi-error"></i> {{ "managePermissionRequired" | i18n }}
           </div>

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

@@ -59,6 +59,7 @@ export interface CollectionDialogParams {
    */
   limitNestedCollections?: boolean;
   readonly?: boolean;
+  isAddAccessCollection?: boolean;
 }
 
 export interface CollectionDialogResult {
@@ -100,6 +101,7 @@ export class CollectionDialogComponent implements OnInit, OnDestroy {
   });
   protected PermissionMode = PermissionMode;
   protected showDeleteButton = false;
+  protected showAddAccessWarning = false;
 
   constructor(
     @Inject(DIALOG_DATA) private params: CollectionDialogParams,
@@ -251,6 +253,7 @@ export class CollectionDialogComponent implements OnInit, OnDestroy {
           this.handleFormGroupReadonly(this.dialogReadonly);
 
           this.loading = false;
+          this.showAddAccessWarning = this.handleAddAccessWarning(flexibleCollectionsV1);
         },
       );
   }
@@ -362,6 +365,18 @@ export class CollectionDialogComponent implements OnInit, OnDestroy {
     this.destroy$.complete();
   }
 
+  private handleAddAccessWarning(flexibleCollectionsV1: boolean): boolean {
+    if (
+      flexibleCollectionsV1 &&
+      !this.organization?.allowAdminAccessToAllCollectionItems &&
+      this.params.isAddAccessCollection
+    ) {
+      return true;
+    }
+
+    return false;
+  }
+
   private handleFormGroupReadonly(readonly: boolean) {
     if (readonly) {
       this.formGroup.controls.name.disable();

apps/web/src/app/vault/org-vault/vault.component.ts

@@ -1222,6 +1222,7 @@ export class VaultComponent implements OnInit, OnDestroy {
         organizationId: this.organization?.id,
         initialTab: tab,
         readonly: readonly,
+        isAddAccessCollection: c.addAccess,
         limitNestedCollections: !this.organization.canEditAnyCollection(
           this.flexibleCollectionsV1Enabled,
         ),

apps/web/src/locales/en/messages.json

@@ -7635,6 +7635,12 @@
   "readOnlyCollectionAccess": {
     "message": "You do not have access to manage this collection."
   },
+  "grantAddAccessCollectionWarningTitle": {
+    "message": "Missing Can Manage Permissions"
+  },
+  "grantAddAccessCollectionWarning": {
+    "message": "Grant Can manage permissions to allow full collection management including deletion of collection."
+  },
   "grantCollectionAccess": {
     "message": "Grant groups or members access to this collection."
   },