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/vault/components/vault-items/vault-cipher-row.component.html

@@ -65,6 +65,7 @@
   ></app-collection-badge>
 </td>
 <td bitCell [ngClass]="RowHeightClass" *ngIf="showGroups"></td>
+<td bitCell [ngClass]="RowHeightClass" *ngIf="!showCollections"></td>
 <td bitCell [ngClass]="RowHeightClass" class="tw-text-right">
   <button
     [disabled]="disabled"

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

@@ -47,6 +47,11 @@
     [allGroups]="groups"
   ></app-group-badge>
 </td>
+<td bitCell [ngClass]="RowHeightClass" *ngIf="showPermissionsColumn">
+  <p class="tw-mb-0 tw-text-muted">
+    {{ permissionText }}
+  </p>
+</td>
 <td bitCell [ngClass]="RowHeightClass" class="tw-text-right">
   <button
     *ngIf="canEditCollection || canDeleteCollection"

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

@@ -1,12 +1,26 @@
-import { Component, EventEmitter, HostBinding, HostListener, Input, Output } from "@angular/core";
-import { ActivatedRoute, Router } from "@angular/router";
+import {
+  Component,
+  EventEmitter,
+  HostBinding,
+  HostListener,
+  Input,
+  OnInit,
+  Output,
+} from "@angular/core";
+import { Router } from "@angular/router";
 
 import { Organization } from "@bitwarden/common/admin-console/models/domain/organization";
+import { I18nService } from "@bitwarden/common/platform/abstractions/i18n.service";
 import { CollectionView } from "@bitwarden/common/vault/models/view/collection.view";
 
 import { GroupView } from "../../../admin-console/organizations/core";
 import { CollectionAdminView } from "../../core/views/collection-admin.view";
 
+import {
+  convertToPermission,
+  getPermissionList,
+  Permission,
+} from "./../../../admin-console/organizations/shared/components/access-selector/access-selector.models";
 import { VaultItemEvent } from "./vault-item-event";
 import { RowHeightClass } from "./vault-items.component";
 
@@ -14,7 +28,7 @@ import { RowHeightClass } from "./vault-items.component";
   selector: "tr[appVaultCollectionRow]",
   templateUrl: "vault-collection-row.component.html",
 })
-export class VaultCollectionRowComponent {
+export class VaultCollectionRowComponent implements OnInit {
   protected RowHeightClass = RowHeightClass;
 
   @Input() disabled: boolean;
@@ -26,17 +40,25 @@ export class VaultCollectionRowComponent {
   @Input() canDeleteCollection: boolean;
   @Input() organizations: Organization[];
   @Input() groups: GroupView[];
+  @Input() showPermissionsColumn: boolean;
+  @Input() flexibleCollectionsEnabled: boolean;
 
   @Output() onEvent = new EventEmitter<VaultItemEvent>();
 
   @Input() checked: boolean;
   @Output() checkedToggled = new EventEmitter<void>();
 
+  private permissionList: Permission[];
+
   constructor(
     private router: Router,
-    private activatedRoute: ActivatedRoute,
+    private i18nService: I18nService,
   ) {}
 
+  ngOnInit() {
+    this.permissionList = getPermissionList(this.flexibleCollectionsEnabled);
+  }
+
   @HostBinding("class")
   get classes() {
     return [].concat(this.disabled ? [] : ["tw-cursor-pointer"]);
@@ -54,6 +76,16 @@ export class VaultCollectionRowComponent {
     return this.organizations.find((o) => o.id === this.collection.organizationId);
   }
 
+  get permissionText() {
+    if (!(this.collection as CollectionAdminView).assigned) {
+      return "-";
+    } else {
+      return this.i18nService.t(
+        this.permissionList.find((p) => p.perm === convertToPermission(this.collection))?.labelId,
+      );
+    }
+  }
+
   @HostListener("click")
   protected click() {
     this.router.navigate([], {

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

@@ -20,6 +20,9 @@
         <th bitCell class="tw-w-2/5" *ngIf="showOwner">{{ "owner" | i18n }}</th>
         <th bitCell class="tw-w-2/5" *ngIf="showCollections">{{ "collections" | i18n }}</th>
         <th bitCell class="tw-w-2/5" *ngIf="showGroups">{{ "groups" | i18n }}</th>
+        <th bitCell class="tw-w-2/5" *ngIf="showPermissionsColumn">
+          {{ "permission" | i18n }}
+        </th>
         <th bitCell class="tw-w-12 tw-text-right">
           <button
             [disabled]="disabled || isEmpty"
@@ -79,10 +82,12 @@
           [showCollections]="showCollections"
           [showGroups]="showGroups"
           [organizations]="allOrganizations"
+          [showPermissionsColumn]="showPermissionsColumn"
           [groups]="allGroups"
           [canDeleteCollection]="canDeleteCollection(item.collection)"
           [canEditCollection]="canEditCollection(item.collection)"
           [checked]="selection.isSelected(item)"
+          [flexibleCollectionsEnabled]="flexibleCollectionsEnabled"
           (checkedToggled)="selection.toggle(item)"
           (onEvent)="event($event)"
         ></tr>

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

@@ -29,7 +29,7 @@ const MaxSelectionCount = 500;
 export class VaultItemsComponent {
   protected RowHeight = RowHeight;
 
-  private flexibleCollectionsEnabled: boolean;
+  protected flexibleCollectionsEnabled: boolean;
 
   @Input() disabled: boolean;
   @Input() showOwner: boolean;
@@ -46,6 +46,7 @@ export class VaultItemsComponent {
   @Input() allCollections: CollectionView[] = [];
   @Input() allGroups: GroupView[] = [];
   @Input() showBulkEditCollectionAccess = false;
+  @Input() showPermissionsColumn = false;
 
   private _ciphers?: CipherView[] = [];
   @Input() get ciphers(): CipherView[] {