AC-1115 Modify AC Vault/Collections (#6789)

* Permissions Column added to Org Vault. Other updates to filter section and Can Manage Permission added and put behind feature flag

---------

Co-authored-by: Thomas Rittson <trittson@bitwarden.com>
Co-authored-by: Vincent Salucci <26154748+vincentsalucci@users.noreply.github.com>

apps/web/src/app/admin-console/organizations/layouts/organization-layout.component.html

@@ -7,9 +7,19 @@
         [activeOrganization]="organization"
       ></app-organization-switcher>
       <bit-tab-nav-bar class="-tw-mb-px">
-        <bit-tab-link *ngIf="canShowVaultTab(organization)" route="vault">{{
-          "vault" | i18n
-        }}</bit-tab-link>
+        <bit-tab-link
+          *ngIf="
+            canShowVaultTab(organization) && (flexibleCollectionsEnabled$ | async);
+            else vaultTab
+          "
+          route="vault"
+          >{{ "collections" | i18n }}</bit-tab-link
+        >
+        <ng-template #vaultTab>
+          <bit-tab-link *ngIf="canShowVaultTab(organization)" route="vault">{{
+            "vault" | i18n
+          }}</bit-tab-link>
+        </ng-template>
         <bit-tab-link *ngIf="canShowMembersTab(organization)" route="members">{{
           "members" | i18n
         }}</bit-tab-link>

apps/web/src/app/admin-console/organizations/layouts/organization-layout.component.ts

@@ -13,6 +13,8 @@ import {
   OrganizationService,
 } from "@bitwarden/common/admin-console/abstractions/organization/organization.service.abstraction";
 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";
 
 @Component({
   selector: "app-organization-layout",
@@ -23,12 +25,18 @@ export class OrganizationLayoutComponent implements OnInit, OnDestroy {
 
   private _destroy = new Subject<void>();
 
+  protected flexibleCollectionsEnabled$ = this.configService.getFeatureFlag$(
+    FeatureFlag.FlexibleCollections,
+    false,
+  );
+
   constructor(
     private route: ActivatedRoute,
     private organizationService: OrganizationService,
+    private configService: ConfigServiceAbstraction,
   ) {}
 
-  ngOnInit() {
+  async ngOnInit() {
     document.body.classList.remove("layout_frontend");
 
     this.organization$ = this.route.params

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

@@ -18,6 +18,8 @@ import {
   AccessItemValue,
   AccessItemView,
   CollectionPermission,
+  getPermissionList,
+  Permission,
 } from "./access-selector.models";
 
 export enum PermissionMode {
@@ -116,16 +118,7 @@ export class AccessSelectorComponent implements ControlValueAccessor, OnInit, On
   });
 
   protected itemType = AccessItemType;
-  protected permissionList = [
-    { perm: CollectionPermission.View, labelId: "canView" },
-    { perm: CollectionPermission.ViewExceptPass, labelId: "canViewExceptPass" },
-    { perm: CollectionPermission.Edit, labelId: "canEdit" },
-    { perm: CollectionPermission.EditExceptPass, labelId: "canEditExceptPass" },
-  ];
-  private canManagePermissionListItem = {
-    perm: CollectionPermission.Manage,
-    labelId: "canManage",
-  };
+  protected permissionList: Permission[];
   protected initialPermission = CollectionPermission.View;
 
   disabled: boolean;
@@ -264,6 +257,7 @@ export class AccessSelectorComponent implements ControlValueAccessor, OnInit, On
   }
 
   async ngOnInit() {
+    this.permissionList = getPermissionList(this.flexibleCollectionsEnabled);
     // Watch the internal formArray for changes and propagate them
     this.selectionList.formArray.valueChanges.pipe(takeUntil(this.destroy$)).subscribe((v) => {
       if (!this.notifyOnChange || this.pauseChangeNotification) {
@@ -277,10 +271,6 @@ export class AccessSelectorComponent implements ControlValueAccessor, OnInit, On
       }
       this.notifyOnChange(v);
     });
-
-    if (this.flexibleCollectionsEnabled) {
-      this.permissionList.push(this.canManagePermissionListItem);
-    }
   }
 
   ngOnDestroy() {

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

@@ -77,6 +77,25 @@ export type AccessItemValue = {
   type: AccessItemType;
 };
 
+export type Permission = {
+  perm: CollectionPermission;
+  labelId: string;
+};
+
+export const getPermissionList = (flexibleCollectionsEnabled: boolean): Permission[] => {
+  const permissions = [
+    { perm: CollectionPermission.View, labelId: "canView" },
+    { perm: CollectionPermission.ViewExceptPass, labelId: "canViewExceptPass" },
+    { perm: CollectionPermission.Edit, labelId: "canEdit" },
+    { perm: CollectionPermission.EditExceptPass, labelId: "canEditExceptPass" },
+  ];
+  if (flexibleCollectionsEnabled) {
+    permissions.push({ perm: CollectionPermission.Manage, labelId: "canManage" });
+  }
+
+  return permissions;
+};
+
 /**
  * Converts the CollectionAccessSelectionView interface to one of the new CollectionPermission values
  * for the dropdown in the AccessSelectorComponent