Workspace users dialog update (#1399)

Co-authored-by: João Vilaça <[email protected]>

Author: ActiveChooN

web_ui/packages/ui/index.ts

@@ -101,6 +101,7 @@ export {
     type DimensionValue,
     type SpectrumRangeCalendarProps,
     type CellProps,
+    type SpectrumTooltipProps,
 } from '@adobe/react-spectrum';
 
 export { dimensionValue, useStyleProps, useUnwrapDOMRef, useMediaQuery } from '@react-spectrum/utils';

web_ui/src/pages/user-management/users/actions/remove-user-dialog.component.tsx

@@ -38,8 +38,6 @@ export const RemoveUserDialog = ({ organizationId, user, activeUser, onDeleting
         } catch (_error: unknown) {}
     };
 
-    const email = user.email;
-
     return (
         <AlertDialog
             title='Delete'
@@ -50,10 +48,10 @@ export const RemoveUserDialog = ({ organizationId, user, activeUser, onDeleting
         >
             <Flex direction={'column'} gap={'size-150'}>
                 <Text>
-                    This user account of {email} will be permanently deleted from your Geti™ organization. After
+                    This user account of {user.email} will be permanently deleted from your Geti™ organization. After
                     deleting the account, the user will not be able to log in again with this account.
                 </Text>
-                <Text>Are you sure you want to delete {email}?</Text>
+                <Text>Are you sure you want to delete {user.email}?</Text>
             </Flex>
         </AlertDialog>
     );

web_ui/src/pages/user-management/users/users-table/users-table.component.tsx

@@ -16,6 +16,7 @@ import { NotFound } from '../../../../shared/components/not-found/not-found.comp
 import { CasualCell } from '../../../../shared/components/table/components/casual-cell/casual-cell.component';
 import { StatusCell } from '../../../../shared/components/table/status-cell/status-cell.component';
 import { TableCellProps } from '../../../../shared/components/table/table.interface';
+import { WorkspaceRoleTooltipContent } from '../../../../shared/components/tooltips/workspace-role-tooltip';
 import { SpectrumTableLoadingState } from '../../../../shared/utils';
 import { LastLoginCell } from './last-login-cell.component';
 import { ProjectRoleCell } from './project-role-cell.component';
@@ -116,10 +117,18 @@ export const UsersTable = ({
                 dataKey: USERS_TABLE_COLUMNS.ROLES,
                 width: 150,
                 isSortable: false,
+                tooltip: <WorkspaceRoleTooltipContent />,
                 component: (data: TableCellProps) => {
                     if (overrideRoleColumn) {
                         return overrideRoleColumn(data);
                     }
+                    // Organization-level view (no specific workspace selected)
+                    if (isEmpty(resourceId)) {
+                        const isOrgAdminUser = isOrganizationAdmin(data.rowData, organizationId);
+                        if (isOrgAdminUser) {
+                            return <CasualCell {...data} cellData='N/A' />;
+                        }
+                    }
                     return isProjectUsersTable ? (
                         <ProjectRoleCell {...data} roles={data.rowData.roles} projectId={resourceId as string} />
                     ) : (

web_ui/src/pages/user-management/users/users-table/workspaces-role-cell.component.tsx

@@ -3,10 +3,11 @@
 
 import { RESOURCE_TYPE, Role } from '@geti/core/src/users/users.interface';
 import { Workspace } from '@geti/core/src/workspaces/services/workspaces.interface';
-import { isEmpty } from 'lodash-es';
+import { capitalize, isEmpty } from 'lodash-es';
 
 import { CasualCell } from '../../../../shared/components/table/components/casual-cell/casual-cell.component';
 import { TableCellProps } from '../../../../shared/components/table/table.interface';
+import { WorkspaceRoleTooltipContent } from '../../../../shared/components/tooltips/workspace-role-tooltip';
 
 interface WorkspacesRoleCellProps extends Omit<TableCellProps, 'cellData'> {
     workspaceId: string | undefined;
@@ -16,13 +17,25 @@ interface WorkspacesRoleCellProps extends Omit<TableCellProps, 'cellData'> {
 
 export const WorkspacesRoleCell = ({ cellData, workspaceId, workspaces, ...rest }: WorkspacesRoleCellProps) => {
     const workspaceRoles = cellData.filter((role) => role.resourceType === RESOURCE_TYPE.WORKSPACE);
-    const workspaceRole = workspaceRoles.find((role) => role.resourceId === workspaceId)?.role;
-    const selectedWorkspaceRole = workspaceRole ? `Workspace ${workspaceRole}` : '';
+
+    const selectedWorkspaceRole = capitalize(
+        workspaceRoles.find((role) => role.resourceId === workspaceId)?.role ?? ''
+    );
     const availableWorkspaces = workspaceRoles
         .map((role) => workspaces.find((workspace) => workspace.id === role.resourceId)?.name ?? role.resourceId)
         .join(', ');
 
     const rolesWorkspacesCellData = !isEmpty(workspaceId) ? selectedWorkspaceRole : availableWorkspaces;
 
-    return <CasualCell {...rest} cellData={rolesWorkspacesCellData} />;
+    return (
+        <CasualCell
+            {...rest}
+            cellData={rolesWorkspacesCellData}
+            tooltip={<WorkspaceRoleTooltipContent />}
+            tooltipProps={{
+                // Calc is needed to account for paddings
+                width: 'calc(size-4600 + size-100)',
+            }}
+        />
+    );
 };