make manage the initial permission when clicking the add access badge (#16165)

apps/web/src/app/admin-console/organizations/collections/vault.component.ts

@@ -125,6 +125,7 @@ import { VaultFilter } from "../../../vault/individual-vault/vault-filter/shared
 import { AdminConsoleCipherFormConfigService } from "../../../vault/org-vault/services/admin-console-cipher-form-config.service";
 import { GroupApiService, GroupView } from "../core";
 import { openEntityEventsDialog } from "../manage/entity-events.component";
+import { CollectionPermission } from "../shared/components/access-selector";
 import {
   CollectionDialogAction,
   CollectionDialogTabType,
@@ -879,6 +880,7 @@ export class vNextVaultComponent implements OnInit, OnDestroy {
             event.item as CollectionAdminView,
             CollectionDialogTabType.Access,
             event.readonly,
+            event.initialPermission,
           );
           break;
         case "bulkEditCollectionAccess":
@@ -1372,6 +1374,7 @@ export class vNextVaultComponent implements OnInit, OnDestroy {
     c: CollectionAdminView,
     tab: CollectionDialogTabType,
     readonly: boolean,
+    initialPermission?: CollectionPermission,
   ): Promise<void> {
     const organization = await firstValueFrom(this.organization$);
     const dialog = openCollectionDialog(this.dialogService, {
@@ -1383,6 +1386,7 @@ export class vNextVaultComponent implements OnInit, OnDestroy {
         isAddAccessCollection: c.unmanaged,
         limitNestedCollections: !organization.canEditAnyCollection,
         isAdminConsoleActive: true,
+        initialPermission,
       },
     });
 

apps/web/src/app/admin-console/organizations/shared/components/access-selector/access-selector.component.ts

@@ -126,7 +126,6 @@ export class AccessSelectorComponent implements ControlValueAccessor, OnInit, On
 
   protected itemType = AccessItemType;
   protected permissionList: Permission[];
-  protected initialPermission = CollectionPermission.View;
 
   /**
    * When disabled, the access selector will make the assumption that a readonly state is desired.
@@ -208,6 +207,12 @@ export class AccessSelectorComponent implements ControlValueAccessor, OnInit, On
    */
   @Input() hideMultiSelect = false;
 
+  /**
+   * The initial permission that will be selected in the dialog, defaults to View.
+   */
+  @Input()
+  protected initialPermission: CollectionPermission = CollectionPermission.View;
+
   constructor(
     private readonly formBuilder: FormBuilder,
     private readonly i18nService: I18nService,

apps/web/src/app/admin-console/organizations/shared/components/collection-dialog/collection-dialog.component.html

@@ -103,6 +103,7 @@
             [selectorLabelText]="'selectGroupsAndMembers' | i18n"
             [selectorHelpText]="'userPermissionOverrideHelperDesc' | i18n"
             [emptySelectionText]="'noMembersOrGroupsAdded' | i18n"
+            [initialPermission]="initialPermission"
           ></bit-access-selector>
           <bit-access-selector
             *ngIf="!organization.useGroups"

apps/web/src/app/admin-console/organizations/shared/components/collection-dialog/collection-dialog.component.ts

@@ -92,6 +92,7 @@ export interface CollectionDialogParams {
   initialTab?: CollectionDialogTabType;
   parentCollectionId?: string;
   showOrgSelector?: boolean;
+  initialPermission?: CollectionPermission;
   /**
    * Flag to limit the nested collections to only those the user has explicit CanManage access too.
    */
@@ -142,6 +143,7 @@ export class CollectionDialogComponent implements OnInit, OnDestroy {
   protected showDeleteButton = false;
   protected showAddAccessWarning = false;
   protected buttonDisplayName: ButtonType = ButtonType.Save;
+  protected initialPermission: CollectionPermission;
   private orgExceedingCollectionLimit!: Organization;
 
   constructor(
@@ -161,6 +163,7 @@ export class CollectionDialogComponent implements OnInit, OnDestroy {
     private configService: ConfigService,
   ) {
     this.tabIndex = params.initialTab ?? CollectionDialogTabType.Info;
+    this.initialPermission = params.initialPermission ?? CollectionPermission.View;
   }
 
   async ngOnInit() {

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

@@ -17,23 +17,32 @@
   </div>
 </td>
 <td bitCell [ngClass]="RowHeightClass">
-  <button
+  <div class="tw-flex">
-    bitLink
+    <button
-    [disabled]="disabled"
+      bitLink
-    type="button"
+      [disabled]="disabled"
-    class="tw-flex tw-w-full tw-text-start tw-leading-snug"
+      type="button"
-    linkType="secondary"
+      class="tw-flex tw-text-start tw-leading-snug"
-    title="{{ 'viewCollectionWithName' | i18n: collection.name }}"
+      linkType="secondary"
-    [routerLink]="[]"
+      title="{{ 'viewCollectionWithName' | i18n: collection.name }}"
-    [queryParams]="{ collectionId: collection.id }"
+      [routerLink]="[]"
-    queryParamsHandling="merge"
+      [queryParams]="{ collectionId: collection.id }"
-    appStopProp
+      queryParamsHandling="merge"
-  >
+      appStopProp
-    <span class="tw-truncate tw-mr-1">{{ collection.name }}</span>
+    >
-    <div>
+      <span class="tw-truncate tw-mr-1">{{ collection.name }}</span>
-      <span *ngIf="showAddAccess" bitBadge variant="warning">{{ "addAccess" | i18n }}</span>
+    </button>
-    </div>
+    @if (showAddAccess) {
-  </button>
+      <button
+        bitBadge
+        type="button"
+        (click)="addAccess(CollectionPermission.Manage)"
+        variant="warning"
+      >
+        {{ "addAccess" | i18n }}
+      </button>
+    }
+  </div>
 </td>
 <td bitCell [ngClass]="RowHeightClass" *ngIf="showOwner" class="tw-hidden lg:tw-table-cell">
   <app-org-badge

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

@@ -10,6 +10,7 @@ import { CipherViewLike } from "@bitwarden/common/vault/utils/cipher-view-like-u
 import { GroupView } from "../../../admin-console/organizations/core";
 
 import {
+  CollectionPermission,
   convertToPermission,
   getPermissionList,
 } from "./../../../admin-console/organizations/shared/components/access-selector/access-selector.models";
@@ -24,6 +25,7 @@ import { RowHeightClass } from "./vault-items.component";
 export class VaultCollectionRowComponent<C extends CipherViewLike> {
   protected RowHeightClass = RowHeightClass;
   protected Unassigned = "unassigned";
+  protected CollectionPermission = CollectionPermission;
 
   @Input() disabled: boolean;
   @Input() collection: CollectionView;
@@ -102,6 +104,15 @@ export class VaultCollectionRowComponent<C extends CipherViewLike> {
     this.onEvent.next({ type: "viewCollectionAccess", item: this.collection, readonly: readonly });
   }
 
+  protected addAccess(initialPermission: CollectionPermission) {
+    this.onEvent.next({
+      type: "viewCollectionAccess",
+      item: this.collection,
+      readonly: false,
+      initialPermission,
+    });
+  }
+
   protected deleteCollection() {
     this.onEvent.next({ type: "delete", items: [{ collection: this.collection }] });
   }

apps/web/src/app/vault/components/vault-items/vault-item-event.ts

@@ -1,12 +1,18 @@
 import { CollectionView } from "@bitwarden/admin-console/common";
 import { CipherViewLike } from "@bitwarden/common/vault/utils/cipher-view-like-utils";
+import { CollectionPermission } from "@bitwarden/web-vault/app/admin-console/organizations/shared/components/access-selector";
 
 import { VaultItem } from "./vault-item";
 
 export type VaultItemEvent<C extends CipherViewLike> =
   | { type: "viewAttachments"; item: C }
   | { type: "bulkEditCollectionAccess"; items: CollectionView[] }
-  | { type: "viewCollectionAccess"; item: CollectionView; readonly: boolean }
+  | {
+      type: "viewCollectionAccess";
+      item: CollectionView;
+      readonly: boolean;
+      initialPermission?: CollectionPermission;
+    }
   | { type: "viewEvents"; item: C }
   | { type: "editCollection"; item: CollectionView; readonly: boolean }
   | { type: "clone"; item: C }