From 31797b23299e1dde89c8eeb6a88b853a50072d38 Mon Sep 17 00:00:00 2001
From: Lisa Knox <lisa.knox@curii.com>
Date: Mon, 30 Sep 2024 14:40:07 -0400
Subject: [PATCH] 21842: formatted perm management names

Arvados-DCO-1.1-Signed-off-by: Lisa Knox <lisa.knox@curii.com>
---
 .../store/sharing-dialog/sharing-dialog-actions.ts   | 11 ++++++++++-
 .../src/store/sharing-dialog/sharing-dialog-types.ts |  2 +-
 .../sharing-management-form-component.tsx            | 12 +++++++-----
 3 files changed, 18 insertions(+), 7 deletions(-)

diff --git a/services/workbench2/src/store/sharing-dialog/sharing-dialog-actions.ts b/services/workbench2/src/store/sharing-dialog/sharing-dialog-actions.ts
index fb34398e8d..40c648f3e6 100644
--- a/services/workbench2/src/store/sharing-dialog/sharing-dialog-actions.ts
+++ b/services/workbench2/src/store/sharing-dialog/sharing-dialog-actions.ts
@@ -33,6 +33,7 @@ import {
 import { resourcesActions } from "store/resources/resources-actions";
 import { getPublicGroupUuid, getAllUsersGroupUuid } from "store/workflow-panel/workflow-panel-actions";
 import { getSharingPublicAccessFormData } from './sharing-dialog-types';
+import { UserResource } from "models/user";
 
 export const openSharingDialog = (resourceUuid: string, refresh?: () => void) =>
     (dispatch: Dispatch) => {
@@ -161,9 +162,16 @@ export const initializeManagementForm = async (dispatch: Dispatch, getState: ()
 
     const getEmail = (tailUuid: string) => {
         const user = users.find(({ uuid }) => uuid === tailUuid);
-        const group = groups.find(({ uuid }) => uuid === tailUuid);
         return user
             ? user.email
+            : null;
+    };
+
+    const getFullname = (tailUuid: string) => {
+        const user = users.find(({ uuid }) => uuid === tailUuid);
+        const group = groups.find(({ uuid }) => uuid === tailUuid);
+        return user
+            ? (user as UserResource & {fullName: string}).fullName
             : group
                 ? group.name
                 : tailUuid;
@@ -172,6 +180,7 @@ export const initializeManagementForm = async (dispatch: Dispatch, getState: ()
     const managementPermissions = permissionLinks
         .map(({ tailUuid, name, uuid }) => ({
             email: getEmail(tailUuid),
+            fullName: getFullname(tailUuid),
             permissions: name as PermissionLevel,
             permissionUuid: uuid,
         }));
diff --git a/services/workbench2/src/store/sharing-dialog/sharing-dialog-types.ts b/services/workbench2/src/store/sharing-dialog/sharing-dialog-types.ts
index 58ce3f0fbb..a889a0f3d5 100644
--- a/services/workbench2/src/store/sharing-dialog/sharing-dialog-types.ts
+++ b/services/workbench2/src/store/sharing-dialog/sharing-dialog-types.ts
@@ -30,7 +30,7 @@ export interface SharingManagementFormData {
 }
 
 export interface SharingManagementFormDataRow {
-    email: string;
+    email: string | null;
     permissions: PermissionLevel;
     permissionUuid: string;
 }
diff --git a/services/workbench2/src/views-components/sharing-dialog/sharing-management-form-component.tsx b/services/workbench2/src/views-components/sharing-dialog/sharing-management-form-component.tsx
index dff27c13aa..3362433ab5 100644
--- a/services/workbench2/src/views-components/sharing-dialog/sharing-management-form-component.tsx
+++ b/services/workbench2/src/views-components/sharing-dialog/sharing-management-form-component.tsx
@@ -38,23 +38,24 @@ export const SharingManagementFormComponent = withStyles(headerStyles)(
 
 export default SharingManagementFormComponent;
 
-const SharingManagementFieldArray = ({ fields, onSave }: { onSave: () => void } & WrappedFieldArrayProps<{ email: string }>) =>
+const SharingManagementFieldArray = ({ fields, onSave }: { onSave: () => void } & WrappedFieldArrayProps<{ email: string, fullName: string }>) =>
     <div>{fields.map((field, index, fields) =>
         <PermissionManagementRow key={field} {...{ field, index, fields }} onSave={onSave} />)}
     </div>;
 
 const permissionManagementRowStyles: CustomStyleRulesCallback<'root'> = theme => ({
     root: {
-        padding: `${theme.spacing(1)} 0`,
+        padding: `${theme.spacing(0.5)} 0`,
     }
 });
 
 const PermissionManagementRow = withStyles(permissionManagementRowStyles)(
-    ({ field, index, fields, classes, onSave }: { field: string, index: number, fields: FieldArrayFieldsProps<{ email: string }>, onSave: () => void; } & WithStyles<'root'>) =>
-        <>
+    ({ field, index, fields, classes, onSave }: { field: string, index: number, fields: FieldArrayFieldsProps<{ email: string, fullName: string }>, onSave: () => void; } & WithStyles<'root'>) => {
+        const { email, fullName } = fields.get(index);
+        return <>
             <Grid container alignItems='center' spacing={1} wrap='nowrap' className={classes.root}>
                 <Grid item xs={7}>
-                    <Typography noWrap variant='subtitle1'>{fields.get(index).email}</Typography>
+                    <Typography noWrap variant='subtitle1'>{email ? `${fullName} (${email})` : fullName}</Typography>
                 </Grid>
                 <Grid item xs={1} container wrap='nowrap'>
                     <Tooltip title='Remove access'>
@@ -76,6 +77,7 @@ const PermissionManagementRow = withStyles(permissionManagementRowStyles)(
             </Grid>
             <Divider />
         </>
+    }
 );
 
 const PermissionSelectComponent = ({ input }: WrappedFieldProps) =>
-- 
2.30.2