[AC-2487] [AC-2486] Changes to restricted access view (#9118)

* [AC-2487] Hide edit/view collection button in restricted access view

* [AC-2486] Update button icon and text in restricted access view

apps/web/src/app/vault/org-vault/collection-access-restricted.component.ts

@@ -3,6 +3,7 @@ import { Component, EventEmitter, Input, Output } from "@angular/core";
 import { ButtonModule, NoItemsModule, svgIcon } from "@bitwarden/components";
 
 import { SharedModule } from "../../shared";
+import { CollectionDialogTabType } from "../components/collection-dialog";
 
 const icon = svgIcon`<svg xmlns="http://www.w3.org/2000/svg" width="120" height="120" viewBox="10 -10 120 140" fill="none">
   <rect class="tw-stroke-secondary-600" width="134" height="86" x="3" y="31.485" stroke-width="6" rx="11"/>
@@ -16,24 +17,36 @@ const icon = svgIcon`<svg xmlns="http://www.w3.org/2000/svg" width="120" height=
   template: `<bit-no-items [icon]="icon" class="tw-mt-2 tw-block">
     <span slot="title" class="tw-mt-4 tw-block">{{ "collectionAccessRestricted" | i18n }}</span>
     <button
+      *ngIf="canEditCollection"
       slot="button"
       bitButton
-      (click)="viewCollectionClicked.emit()"
+      (click)="viewCollectionClicked.emit({ readonly: false, tab: collectionDialogTabType.Info })"
       buttonType="secondary"
       type="button"
     >
-      <i aria-hidden="true" class="bwi bwi-pencil-square"></i> {{ buttonText | i18n }}
+      <i aria-hidden="true" class="bwi bwi-pencil-square"></i> {{ "editCollection" | i18n }}
+    </button>
+    <button
+      *ngIf="!canEditCollection && canViewCollectionInfo"
+      slot="button"
+      bitButton
+      (click)="viewCollectionClicked.emit({ readonly: true, tab: collectionDialogTabType.Access })"
+      buttonType="secondary"
+      type="button"
+    >
+      <i aria-hidden="true" class="bwi bwi-users"></i> {{ "viewAccess" | i18n }}
     </button>
   </bit-no-items>`,
 })
 export class CollectionAccessRestrictedComponent {
   protected icon = icon;
+  protected collectionDialogTabType = CollectionDialogTabType;
 
   @Input() canEditCollection = false;
+  @Input() canViewCollectionInfo = false;
 
-  @Output() viewCollectionClicked = new EventEmitter<void>();
-
-  get buttonText() {
-    return this.canEditCollection ? "editCollection" : "viewCollection";
-  }
+  @Output() viewCollectionClicked = new EventEmitter<{
+    readonly: boolean;
+    tab: CollectionDialogTabType;
+  }>();
 }

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

@@ -116,13 +116,14 @@
       </bit-no-items>
       <collection-access-restricted
         *ngIf="showCollectionAccessRestricted"
-        [canEditCollection]="organization.isProviderUser"
+        [canEditCollection]="
+          selectedCollection.node?.canEdit(organization, flexibleCollectionsV1Enabled)
+        "
+        [canViewCollectionInfo]="
+          selectedCollection.node?.canViewCollectionInfo(organization, flexibleCollectionsV1Enabled)
+        "
         (viewCollectionClicked)="
-          editCollection(
-            selectedCollection.node,
-            CollectionDialogTabType.Info,
-            !organization.isProviderUser
-          )
+          editCollection(selectedCollection.node, $event.tab, $event.readonly)
         "
       >
       </collection-access-restricted>

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

@@ -7740,9 +7740,6 @@
   "success": {
     "message": "Success"
   },
-  "viewCollection": {
-    "message": "View collection"
-  },
   "restrictedGroupAccess": {
     "message": "You cannot add yourself to groups."
   },