[AC-2086] Limit admin access - Collection Modal (#8335)

* feat: add view collection string, update button text, refs AC-2086 * feat: remove canEdit from Restricted Collection Access component, refs AC-2086 * feat: add view collection clicked flow, refs AC-2086 * fix: revert accidental svg icon changes, refs AC-2086 * feat: add input for access selector to hide multi select, refs AC-2086 * feat: apply readonly/disabled changes to access dialog, refs AC-2086 * fix: messages file conflict, refs AC-2086 * feat: apply disabled state to access selector, refs AC-2086 * fix: formatting, refs AC-2086 * fix: permission mode read only relocate, refs AC-2086 * fix: conform readonly casing, refs AC-2086
2024-11-21 11:35:34 +01:00 · 2024-04-08 13:24:27 -05:00 · 2024-04-08 13:24:27 -05:00 · 0c291bf79b
commit 0c291bf79b
parent 7064b595da
8 changed files with 145 additions and 37 deletions
--- a/apps/web/src/app/admin-console/organizations/shared/components/access-selector/access-selector.component.html
+++ b/apps/web/src/app/admin-console/organizations/shared/components/access-selector/access-selector.component.html
@ -22,7 +22,7 @@
    </select>
  </bit-form-field>

-  <bit-form-field class="tw-grow">
+  <bit-form-field class="tw-grow" *ngIf="!disabled">
    <bit-label>{{ selectorLabelText }}</bit-label>
    <bit-multi-select
      class="tw-w-full"
@ -120,7 +120,7 @@
          </div>

          <div
-            *ngIf="item.readonly"
+            *ngIf="item.readonly || disabled"
            class="tw-max-w-40 tw-overflow-hidden tw-overflow-ellipsis tw-whitespace-nowrap tw-font-bold tw-text-muted"
            [title]="permissionLabelId(item.readonlyPermission) | i18n"
          >
@ -139,7 +139,7 @@

      <td bitCell class="tw-text-right">
        <button
-          *ngIf="!item.readonly"
+          *ngIf="!disabled && !item.readonly"
          type="button"
          bitIconButton="bwi-close"
          buttonType="muted"
--- a/apps/web/src/app/admin-console/organizations/shared/components/access-selector/access-selector.component.ts
+++ b/apps/web/src/app/admin-console/organizations/shared/components/access-selector/access-selector.component.ts
@ -121,6 +121,13 @@ export class AccessSelectorComponent implements ControlValueAccessor, OnInit, On
  protected permissionList: Permission[];
  protected initialPermission = CollectionPermission.View;

+  /**
+   * When disabled, the access selector will make the assumption that a readonly state is desired.
+   * The PermissionMode will be set to Readonly
+   * The Multi-Select control will be hidden
+   * The delete action on each row item will be hidden
+   * The readonly permission label/property needs to configured on the access item views being passed into the component
+   */
  disabled: boolean;

  /**
@ -225,6 +232,7 @@ export class AccessSelectorComponent implements ControlValueAccessor, OnInit, On

    // Keep the internal FormGroup in sync
    if (this.disabled) {
+      this.permissionMode = PermissionMode.Readonly;
      this.formGroup.disable();
    } else {
      this.formGroup.enable();
--- a/apps/web/src/app/vault/components/collection-dialog/collection-dialog.component.html
+++ b/apps/web/src/app/vault/components/collection-dialog/collection-dialog.component.html
@ -65,17 +65,22 @@
        </bit-tab>
        <bit-tab label="{{ 'access' | i18n }}">
          <div class="tw-mb-3" *ngIf="organization.flexibleCollections">
-            <span *ngIf="organization.useGroups">{{ "grantCollectionAccess" | i18n }}</span>
-            <span *ngIf="!organization.useGroups">{{
-              "grantCollectionAccessMembersOnly" | i18n
-            }}</span>
-            <span
-              *ngIf="
-                (flexibleCollectionsV1Enabled$ | async) &&
-                organization.allowAdminAccessToAllCollectionItems
-              "
-              >{{ " " + ("adminCollectionAccess" | i18n) }}</span
-            >
+            <ng-container *ngIf="dialogReadonly">
+              <span>{{ "readOnlyCollectionAccess" | i18n }}</span>
+            </ng-container>
+            <ng-container *ngIf="!dialogReadonly">
+              <span *ngIf="organization.useGroups">{{ "grantCollectionAccess" | i18n }}</span>
+              <span *ngIf="!organization.useGroups">{{
+                "grantCollectionAccessMembersOnly" | i18n
+              }}</span>
+              <span
+                *ngIf="
+                  (flexibleCollectionsV1Enabled$ | async) &&
+                  organization.allowAdminAccessToAllCollectionItems
+                "
+                >{{ " " + ("adminCollectionAccess" | i18n) }}</span
+              >
+            </ng-container>
          </div>
          <div
            class="tw-mb-3 tw-text-danger"
@ -85,7 +90,7 @@
          </div>
          <bit-access-selector
            *ngIf="organization.useGroups"
-            [permissionMode]="PermissionMode.Edit"
+            [permissionMode]="dialogReadonly ? PermissionMode.Readonly : PermissionMode.Edit"
            formControlName="access"
            [items]="accessItems"
            [columnHeader]="'groupSlashMemberColumnHeader' | i18n"
@ -96,7 +101,7 @@
          ></bit-access-selector>
          <bit-access-selector
            *ngIf="!organization.useGroups"
-            [permissionMode]="PermissionMode.Edit"
+            [permissionMode]="dialogReadonly ? PermissionMode.Readonly : PermissionMode.Edit"
            formControlName="access"
            [items]="accessItems"
            [columnHeader]="'memberColumnHeader' | i18n"
@ -108,7 +113,13 @@
      </bit-tab-group>
    </div>
    <ng-container bitDialogFooter>
-      <button type="submit" bitButton bitFormButton buttonType="primary" [disabled]="loading">
+      <button
+        type="submit"
+        bitButton
+        bitFormButton
+        buttonType="primary"
+        [disabled]="loading || dialogReadonly"
+      >
        {{ "save" | i18n }}
      </button>
      <button
--- a/apps/web/src/app/vault/components/collection-dialog/collection-dialog.component.ts
+++ b/apps/web/src/app/vault/components/collection-dialog/collection-dialog.component.ts
@ -16,6 +16,7 @@ import { first } from "rxjs/operators";

 import { OrganizationService } from "@bitwarden/common/admin-console/abstractions/organization/organization.service.abstraction";
 import { OrganizationUserService } from "@bitwarden/common/admin-console/abstractions/organization-user/organization-user.service";
+import { OrganizationUserUserDetailsResponse } from "@bitwarden/common/admin-console/abstractions/organization-user/responses/organization-user.response";
 import { Organization } from "@bitwarden/common/admin-console/models/domain/organization";
 import { FeatureFlag } from "@bitwarden/common/enums/feature-flag.enum";
 import { ConfigService } from "@bitwarden/common/platform/abstractions/config/config.service";
@ -27,7 +28,11 @@ import { CollectionResponse } from "@bitwarden/common/vault/models/response/coll
 import { CollectionView } from "@bitwarden/common/vault/models/view/collection.view";
 import { BitValidators, DialogService } from "@bitwarden/components";

-import { GroupService, GroupView } from "../../../admin-console/organizations/core";
+import {
+  GroupService,
+  GroupView,
+  CollectionAccessSelectionView,
+} from "../../../admin-console/organizations/core";
 import { PermissionMode } from "../../../admin-console/organizations/shared/components/access-selector/access-selector.component";
 import {
  AccessItemType,
@ -36,8 +41,6 @@ import {
  CollectionPermission,
  convertToPermission,
  convertToSelectionView,
-  mapGroupToAccessItemView,
-  mapUserToAccessItemView,
 } from "../../../admin-console/organizations/shared/components/access-selector/access-selector.models";
 import { CollectionAdminService } from "../../core/collection-admin.service";
 import { CollectionAdminView } from "../../core/views/collection-admin.view";
@ -54,6 +57,7 @@ export interface CollectionDialogParams {
  parentCollectionId?: string;
  showOrgSelector?: boolean;
  collectionIds?: string[];
+  readonly?: boolean;
 }

 export interface CollectionDialogResult {
@ -158,7 +162,8 @@ export class CollectionDialogComponent implements OnInit, OnDestroy {
        ? from(this.collectionAdminService.get(orgId, this.params.collectionId))
        : of(null),
      groups: groups$,
-      users: this.organizationUserService.getAllUsers(orgId),
+      // Collection(s) needed to map readonlypermission for (potential) access selector disabled state
+      users: this.organizationUserService.getAllUsers(orgId, { includeCollections: true }),
      collection: this.params.collectionId
        ? this.collectionService.get(this.params.collectionId)
        : of(null),
@ -177,8 +182,8 @@ export class CollectionDialogComponent implements OnInit, OnDestroy {
        }) => {
          this.organization = organization;
          this.accessItems = [].concat(
-            groups.map(mapGroupToAccessItemView),
-            users.data.map(mapUserToAccessItemView),
+            groups.map((group) => mapGroupToAccessItemView(group, this.collectionId)),
+            users.data.map((user) => mapUserToAccessItemView(user, this.collectionId)),
          );

          // Force change detection to update the access selector's items
@ -209,7 +214,7 @@ export class CollectionDialogComponent implements OnInit, OnDestroy {
              access: accessSelections,
            });
            this.collection.manage = collection?.manage ?? false; // Get manage flag from sync data collection
-            this.showDeleteButton = this.collection.canDelete(organization);
+            this.showDeleteButton = !this.dialogReadonly && this.collection.canDelete(organization);
          } else {
            this.nestOptions = collections;
            const parent = collections.find((c) => c.id === this.params.parentCollectionId);
@ -244,6 +249,8 @@ export class CollectionDialogComponent implements OnInit, OnDestroy {
          }
          this.formGroup.controls.access.updateValueAndValidity();

+          this.handleFormGroupReadonly(this.dialogReadonly);
+
          this.loading = false;
        },
      );
@ -257,11 +264,20 @@ export class CollectionDialogComponent implements OnInit, OnDestroy {
    return this.params.collectionId != undefined;
  }

+  protected get dialogReadonly() {
+    return this.params.readonly === true;
+  }
+
  protected async cancel() {
    this.close(CollectionDialogAction.Canceled);
  }

  protected submit = async () => {
+    // Saving a collection is prohibited while in read only mode
+    if (this.dialogReadonly) {
+      return;
+    }
+
    this.formGroup.markAllAsTouched();

    if (this.formGroup.invalid) {
@ -316,6 +332,11 @@ export class CollectionDialogComponent implements OnInit, OnDestroy {
  };

  protected delete = async () => {
+    // Deleting a collection is prohibited while in read only mode
+    if (this.dialogReadonly) {
+      return;
+    }
+
    const confirmed = await this.dialogService.openSimpleDialog({
      title: this.collection?.name,
      content: { key: "deleteCollectionConfirmation" },
@ -342,6 +363,20 @@ export class CollectionDialogComponent implements OnInit, OnDestroy {
    this.destroy$.complete();
  }

+  private handleFormGroupReadonly(readonly: boolean) {
+    if (readonly) {
+      this.formGroup.controls.name.disable();
+      this.formGroup.controls.externalId.disable();
+      this.formGroup.controls.parent.disable();
+      this.formGroup.controls.access.disable();
+    } else {
+      this.formGroup.controls.name.enable();
+      this.formGroup.controls.externalId.enable();
+      this.formGroup.controls.parent.enable();
+      this.formGroup.controls.access.enable();
+    }
+  }
+
  private close(action: CollectionDialogAction, collection?: CollectionResponse | CollectionView) {
    this.dialogRef.close({ action, collection } as CollectionDialogResult);
  }
@ -383,6 +418,50 @@ function validateCanManagePermission(control: AbstractControl) {
  return hasManagePermission ? null : { managePermissionRequired: true };
 }

+/**
+ *
+ * @param group Current group being used to translate object into AccessItemView
+ * @param collectionId Current collection being viewed/edited
+ * @returns AccessItemView customized to set a readonlyPermission to be displayed if the access selector is in a disabled state
+ */
+function mapGroupToAccessItemView(group: GroupView, collectionId: string): AccessItemView {
+  return {
+    id: group.id,
+    type: AccessItemType.Group,
+    listName: group.name,
+    labelName: group.name,
+    accessAllItems: group.accessAll,
+    readonly: group.accessAll,
+    readonlyPermission: convertToPermission(group.collections.find((gc) => gc.id == collectionId)),
+  };
+}
+
+/**
+ *
+ * @param user Current user being used to translate object into AccessItemView
+ * @param collectionId Current collection being viewed/edited
+ * @returns AccessItemView customized to set a readonlyPermission to be displayed if the access selector is in a disabled state
+ */
+function mapUserToAccessItemView(
+  user: OrganizationUserUserDetailsResponse,
+  collectionId: string,
+): AccessItemView {
+  return {
+    id: user.id,
+    type: AccessItemType.Member,
+    email: user.email,
+    role: user.type,
+    listName: user.name?.length > 0 ? `${user.name} (${user.email})` : user.email,
+    labelName: user.name ?? user.email,
+    status: user.status,
+    accessAllItems: user.accessAll,
+    readonly: user.accessAll,
+    readonlyPermission: convertToPermission(
+      new CollectionAccessSelectionView(user.collections.find((uc) => uc.id == collectionId)),
+    ),
+  };
+}
+
 /**
 * Strongly typed helper to open a CollectionDialog
 * @param dialogService Instance of the dialog service that will be used to open the dialog
--- a/apps/web/src/app/vault/org-vault/collection-access-restricted.component.ts
+++ b/apps/web/src/app/vault/org-vault/collection-access-restricted.component.ts
@ -1,4 +1,4 @@
-import { Component, EventEmitter, Input, Output } from "@angular/core";
+import { Component, EventEmitter, Output } from "@angular/core";

 import { ButtonModule, NoItemsModule, svgIcon } from "@bitwarden/components";

@ -16,21 +16,18 @@ 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="canEdit"
      slot="button"
      bitButton
-      (click)="editInfoClicked.emit()"
+      (click)="viewCollectionClicked.emit()"
      buttonType="secondary"
      type="button"
    >
-      <i aria-hidden="true" class="bwi bwi-pencil-square"></i> {{ "editInfo" | i18n }}
+      <i aria-hidden="true" class="bwi bwi-pencil-square"></i> {{ "viewCollection" | i18n }}
    </button>
  </bit-no-items>`,
 })
 export class CollectionAccessRestrictedComponent {
  protected icon = icon;

-  @Input() canEdit = false;
-
-  @Output() editInfoClicked = new EventEmitter<void>();
+  @Output() viewCollectionClicked = new EventEmitter<void>();
 }
--- a/apps/web/src/app/vault/org-vault/vault.component.html
+++ b/apps/web/src/app/vault/org-vault/vault.component.html
@ -99,11 +99,9 @@
      </bit-no-items>
      <collection-access-restricted
        *ngIf="showCollectionAccessRestricted"
-        [canEdit]="
-          selectedCollection != null &&
-          selectedCollection.node.canEdit(organization, flexibleCollectionsV1Enabled)
+        (viewCollectionClicked)="
+          editCollection(selectedCollection.node, CollectionDialogTabType.Info, true)
        "
-        (editInfoClicked)="editCollection(selectedCollection.node, CollectionDialogTabType.Info)"
      >
      </collection-access-restricted>
    </ng-container>
--- a/apps/web/src/app/vault/org-vault/vault.component.ts
+++ b/apps/web/src/app/vault/org-vault/vault.component.ts
@ -1058,9 +1058,18 @@ export class VaultComponent implements OnInit, OnDestroy {
    }
  }

-  async editCollection(c: CollectionView, tab: CollectionDialogTabType): Promise<void> {
+  async editCollection(
+    c: CollectionView,
+    tab: CollectionDialogTabType,
+    readonly: boolean = false,
+  ): Promise<void> {
    const dialog = openCollectionDialog(this.dialogService, {
-      data: { collectionId: c?.id, organizationId: this.organization?.id, initialTab: tab },
+      data: {
+        collectionId: c?.id,
+        organizationId: this.organization?.id,
+        initialTab: tab,
+        readonly: readonly,
+      },
    });

    const result = await lastValueFrom(dialog.closed);
--- a/apps/web/src/locales/en/messages.json
+++ b/apps/web/src/locales/en/messages.json
@ -7501,6 +7501,9 @@
  "collectionAccessRestricted": {
    "message": "Collection access is restricted"
  },
+  "readOnlyCollectionAccess": {
+    "message": "You do not have access to manage this collection."
+  },
  "grantCollectionAccess": {
    "message": "Grant groups or members access to this collection."
  },
@ -7603,6 +7606,9 @@
  "providerPortal": {
    "message": "Provider Portal"
  },
+  "viewCollection": {
+    "message": "View collection"
+  },
  "restrictedGroupAccess": {
    "message": "You cannot add yourself to groups."
  },