show names instead of ids in directory content (#512)

* show names instead of ids in directory content

Signed-off-by: Jon HARPER <>
Co-authored-by: sBouzols <[email protected]>

Author: jonenst

src/components/utils/renderers/user-cell-renderer.tsx

@@ -4,32 +4,35 @@
  * License, v. 2.0. If a copy of the MPL was not distributed with this
  * file, You can obtain one at http://mozilla.org/MPL/2.0/.
  */
-import { Box, Chip, Tooltip } from '@mui/material';
+import { Avatar, Box, Theme, Tooltip } from '@mui/material';
 
-const abbreviationFromUserName = (name: string | null) => {
-    if (name === null) {
+function getAbbreviationFromUserName(name: string) {
+    if (name === null || name.trim() === '') {
         return '';
     }
-    const tab = name.split(' ').map((x) => x.charAt(0));
-    if (tab.length === 1) {
-        return tab[0];
+    const splittedName = name.split(' ');
+    if (splittedName.length > 1) {
+        return `${splittedName[0][0]}${splittedName[splittedName.length - 1][0]}`;
     }
-    return tab[0] + tab[tab.length - 1];
-};
+    return `${splittedName[0][0]}`;
+}
 
 const styles = {
-    chip: {
+    avatar: (theme: Theme) => ({
         cursor: 'pointer',
-    },
+        height: '32px',
+        width: '32px',
+        fontSize: theme.typography.fontSize,
+    }),
 };
 
 export type UserCellRendererProps = { value: string };
 
 export function UserCellRenderer({ value }: Readonly<UserCellRendererProps>) {
     return (
-        <Box>
+        <Box sx={{ display: 'inline-flex', verticalAlign: 'middle' }}>
             <Tooltip title={value} placement="right">
-                <Chip sx={styles.chip} label={abbreviationFromUserName(value)} />
+                <Avatar sx={styles.avatar}>{getAbbreviationFromUserName(value)}</Avatar>
             </Tooltip>
         </Box>
     );

src/hooks/useDirectoryContent.ts

@@ -6,11 +6,29 @@
  */
 
 import { useSelector } from 'react-redux';
-import { useCallback, useEffect, useRef, useState } from 'react';
+import { useRef, useEffect, useCallback, useState, useMemo } from 'react';
 import { ElementAttributes, fetchElementsInfos, useSnackMessage } from '@gridsuite/commons-ui';
 import { UUID } from 'crypto';
+import { UsersIdentities, UsersIdentitiesMap } from 'utils/user-identities.type';
+import { fetchUsersIdentities } from '../utils/rest-api';
 import { AppState } from '../redux/types';
 
+const getName = (userId: string, data: UsersIdentitiesMap): string => {
+    const firstName = data?.[userId]?.firstName;
+    const lastName = data?.[userId]?.lastName;
+    if (firstName && lastName) {
+        return `${firstName} ${lastName}`;
+    }
+    if (firstName) {
+        return firstName;
+    }
+    if (lastName) {
+        return lastName;
+    }
+    // fallback to id
+    return userId;
+};
+
 export const useDirectoryContent = () => {
     const currentChildren = useSelector((state: AppState) => state.currentChildren);
     const [childrenMetadata, setChildrenMetadata] = useState<Record<UUID, ElementAttributes>>({});
@@ -40,12 +58,35 @@ export const useDirectoryContent = () => {
 
         const metadata: Record<UUID, ElementAttributes> = {};
         const childrenToFetchElementsInfos = Object.values(currentChildren).map((e) => e.elementUuid);
+
+        const fetchUsersIdentitiesPromise = fetchUsersIdentities(childrenToFetchElementsInfos).catch(() => {
+            // Last resort, server down, error 500, fallback to subs as users Identities
+            // We write this code to have the same behavior as when there are partial results,
+            // (missing users identities), see getName()
+            const fallbackUsersIdentities: UsersIdentities = {
+                data: Object.fromEntries(
+                    [...new Set(currentChildren.flatMap((e) => [e.owner, e.lastModifiedBy]))].map((sub) => [
+                        sub,
+                        { sub, firstName: '', lastName: '' },
+                    ])
+                ),
+                errors: {},
+            };
+
+            return fallbackUsersIdentities;
+        });
+
         if (childrenToFetchElementsInfos.length > 0) {
-            fetchElementsInfos(childrenToFetchElementsInfos)
+            Promise.all([
+                fetchUsersIdentitiesPromise, // TODO cache user identities across elements
+                fetchElementsInfos(childrenToFetchElementsInfos),
+            ])
                 .then((res) => {
                     // discarding request for older directory
                     if (previousData.current === currentChildren) {
-                        res.forEach((e) => {
+                        res[1].forEach((e) => {
+                            e.owner = getName(e.owner, res[0].data);
+                            e.lastModifiedBy = getName(e.lastModifiedBy, res[0].data);
                             metadata[e.elementUuid] = e;
                         });
                         setChildrenMetadata(metadata);
@@ -59,5 +100,17 @@ export const useDirectoryContent = () => {
         }
     }, [handleError, currentChildren]);
 
-    return [currentChildren, childrenMetadata] as const;
+    // TODO remove this when global user identity caching is implemented
+    const currentChildrenWithOwnerNames = useMemo(() => {
+        if (!currentChildren) {
+            return currentChildren;
+        }
+        return currentChildren.map((x) => ({
+            ...x,
+            owner: childrenMetadata?.[x.elementUuid]?.owner,
+            lastModifiedBy: childrenMetadata?.[x.elementUuid]?.lastModifiedBy,
+        }));
+    }, [currentChildren, childrenMetadata]);
+
+    return [currentChildrenWithOwnerNames, childrenMetadata] as const;
 };

src/utils/rest-api.ts

@@ -27,6 +27,7 @@ import { CONTINGENCY_ENDPOINTS } from './constants-endpoints';
 import { AppState } from '../redux/types';
 import { CriteriaBasedData } from '../components/dialogs/contingency-list/contingency-list-utils';
 import { PrepareContingencyListForBackend } from '../components/dialogs/contingency-list-helper';
+import { UsersIdentities } from './user-identities.type';
 
 const PREFIX_USER_ADMIN_SERVER_QUERIES = `${import.meta.env.VITE_API_GATEWAY}/user-admin`;
 const PREFIX_CONFIG_NOTIFICATION_WS = `${import.meta.env.VITE_WS_GATEWAY}/config-notification`;
@@ -183,6 +184,15 @@ export function fetchVersion() {
         });
 }
 
+export function fetchUsersIdentities(elementUuids: string[]) {
+    console.info('fetching users identities for elements : %s', elementUuids);
+    const idsParams = getRequestParamFromList('ids', elementUuids).toString();
+    const fetchParams = `${PREFIX_EXPLORE_SERVER_QUERIES}/v1/explore/elements/users-identities?${idsParams}`;
+    return backendFetchJson(fetchParams, {
+        method: 'get',
+    }) as Promise<UsersIdentities>;
+}
+
 export type ConfigParameter =
     | {
           readonly name: typeof PARAM_LANGUAGE;

src/utils/user-identities.type.ts

@@ -0,0 +1,29 @@
+/**
+ * Copyright (c) 2024, RTE (http://www.rte-france.com)
+ * This Source Code Form is subject to the terms of the Mozilla Public
+ * License, v. 2.0. If a copy of the MPL was not distributed with this
+ * file, You can obtain one at http://mozilla.org/MPL/2.0/.
+ */
+
+export type UserIdentity = {
+    firstName: string;
+    lastName: string;
+};
+
+export type UsersIdentitiesMap = {
+    [sub: string]: UserIdentity;
+};
+
+export type UserIdentityError = {
+    sub: string;
+    code: string;
+};
+
+export type UsersIdentitiesErrorMap = {
+    [sub: string]: UserIdentity;
+};
+
+export type UsersIdentities = {
+    data: UsersIdentitiesMap;
+    errors: UsersIdentitiesErrorMap;
+};