display users and groups as text

dbraquart · dbraquart · commit 4880091d5685 · 2025-04-30T17:58:30.000+02:00
Signed-off-by: David BRAQUART &lt;david.braquart@rte-france.com&gt;
diff --git a/src/pages/common/multi-chips-renderer-component.tsx b/src/pages/common/multi-chips-renderer-component.tsx
diff --git a/src/pages/common/multi-select-editor-component.tsx b/src/pages/common/multi-select-editor-component.tsx
diff --git a/src/pages/common/table-selection.tsx b/src/pages/common/table-selection.tsx
@@ -46,6 +46,7 @@ const TableSelection: FunctionComponent<TableSelectionProps> = (props) => {
                 filter: true,
                 sortable: true,
                 minWidth: 80,
+                tooltipField: 'id',
             },
         ],
         []
diff --git a/src/pages/groups/groups-table.tsx b/src/pages/groups/groups-table.tsx
@@ -10,11 +10,17 @@ import { useIntl } from 'react-intl';
 import { GroupAdd } from '@mui/icons-material';
 import { GridButton, GridButtonDelete, GridTable, GridTableRef } from '../../components/Grid';
 import { GroupInfos, UserAdminSrv, UserInfos } from '../../services';
-import { ColDef, GetRowIdParams, RowClickedEvent, SelectionChangedEvent, TextFilterParams } from 'ag-grid-community';
+import {
+    ColDef,
+    GetRowIdParams,
+    ITooltipParams,
+    RowClickedEvent,
+    SelectionChangedEvent,
+    TextFilterParams
+} from 'ag-grid-community';
 import { useSnackMessage } from '@gridsuite/commons-ui';
 import DeleteConfirmationDialog from '../common/delete-confirmation-dialog';
 import { defaultColDef, defaultRowSelection } from '../common/table-config';
-import MultiChipsRendererComponent from '../common/multi-chips-renderer-component';
 
 export interface GroupsTableProps {
     gridRef: RefObject<GridTableRef<GroupInfos>>;
@@ -65,7 +71,7 @@ const GroupsTable: FunctionComponent<GroupsTableProps> = (props) => {
             {
                 field: 'name',
                 cellDataType: 'text',
-                flex: 3,
+                flex: 2,
                 lockVisible: true,
                 filter: true,
                 headerName: intl.formatMessage({ id: 'groups.table.id' }),
@@ -81,7 +87,7 @@ const GroupsTable: FunctionComponent<GroupsTableProps> = (props) => {
             {
                 field: 'users',
                 cellDataType: 'text',
-                flex: 1,
+                flex: 3,
                 filter: true,
                 headerName: intl.formatMessage({
                     id: 'groups.table.users',
@@ -93,7 +99,19 @@ const GroupsTable: FunctionComponent<GroupsTableProps> = (props) => {
                     caseSensitive: false,
                     trimInput: true,
                 } as TextFilterParams<UserInfos>,
-                cellRenderer: MultiChipsRendererComponent,
+                tooltipValueGetter: (p: ITooltipParams) => {
+                    const items = p.value as string[];
+                    if (items == null || items.length === 0) {
+                        return '';
+                    }
+                    let userWord = intl.formatMessage({
+                        id: 'form.delete.dialog.user',
+                    });
+                    if (items.length > 1) {
+                        userWord = userWord.concat('s');
+                    }
+                    return `${items.length} ${userWord}`;
+                },
             },
         ],
         [intl]
@@ -106,6 +124,7 @@ const GroupsTable: FunctionComponent<GroupsTableProps> = (props) => {
                 dataLoader={UserAdminSrv.fetchGroups}
                 columnDefs={columns}
                 defaultColDef={defaultColDef}
+                tooltipShowDelay={1000}
                 gridId="table-groups"
                 getRowId={getRowId}
                 rowSelection={defaultRowSelection}
diff --git a/src/pages/profiles/profiles-page.tsx b/src/pages/profiles/profiles-page.tsx
@@ -43,18 +43,18 @@ const ProfilesPage: FunctionComponent = () => {
     return (
         <Grid item container direction="column" spacing={2} component="section">
             <Grid item container xs sx={{ width: 1 }}>
-                <ProfileModificationDialog
-                    profileId={editingProfileId}
-                    open={openProfileModificationDialog}
-                    onClose={handleCloseProfileModificationDialog}
-                    onUpdate={handleUpdateProfileModificationDialog}
-                />
                 <ProfilesTable
                     gridRef={gridRef}
                     onRowClicked={onRowClicked}
                     setOpenAddProfileDialog={setOpenAddProfileDialog}
                 />
                 <AddProfileDialog gridRef={gridRef} open={openAddProfileDialog} setOpen={setOpenAddProfileDialog} />
+                <ProfileModificationDialog
+                    profileId={editingProfileId}
+                    open={openProfileModificationDialog}
+                    onClose={handleCloseProfileModificationDialog}
+                    onUpdate={handleUpdateProfileModificationDialog}
+                />
             </Grid>
         </Grid>
     );
diff --git a/src/pages/profiles/profiles-table.tsx b/src/pages/profiles/profiles-table.tsx
@@ -75,7 +75,6 @@ const ProfilesTable: FunctionComponent<ProfilesTableProps> = (props) => {
                     caseSensitive: false,
                     trimInput: true,
                 } as TextFilterParams<UserProfile>,
-                editable: false,
             },
             {
                 field: 'allLinksValid',
@@ -85,13 +84,13 @@ const ProfilesTable: FunctionComponent<ProfilesTableProps> = (props) => {
                     alignItems: 'center',
                 }),
                 cellRenderer: (params: any) => {
-                    return params.value == null ? (
-                        <RadioButtonUnchecked fontSize="small" />
-                    ) : params.value ? (
-                        <CheckCircle fontSize="small" color="success" />
-                    ) : (
-                        <Cancel fontSize="small" color="error" />
-                    );
+                    if (params.value == null) {
+                        return <RadioButtonUnchecked fontSize="small" />;
+                    } else if (params.value) {
+                        return <CheckCircle fontSize="small" color="success" />;
+                    } else {
+                        return <Cancel fontSize="small" color="error" />;
+                    }
                 },
                 flex: 1,
                 headerName: intl.formatMessage({
diff --git a/src/pages/users/users-table.tsx b/src/pages/users/users-table.tsx
@@ -5,25 +5,23 @@
  * file, You can obtain one at http://mozilla.org/MPL/2.0/.
  */
 
-import { FunctionComponent, RefObject, useCallback, useEffect, useMemo, useState } from 'react';
+import { FunctionComponent, RefObject, useCallback, useMemo, useState } from 'react';
 import { useIntl } from 'react-intl';
 import { PersonAdd } from '@mui/icons-material';
 import { GridButton, GridButtonDelete, GridTable, GridTableRef } from '../../components/Grid';
-import { GroupInfos, UpdateUserInfos, UserAdminSrv, UserInfos } from '../../services';
+import { GroupInfos, UserAdminSrv, UserInfos } from '../../services';
 import {
     ColDef,
     GetRowIdParams,
-    ICellEditorParams,
     ICheckboxCellRendererParams,
+    ITooltipParams,
     RowClickedEvent,
     SelectionChangedEvent,
     TextFilterParams,
 } from 'ag-grid-community';
 import { useSnackMessage } from '@gridsuite/commons-ui';
 import DeleteConfirmationDialog from '../common/delete-confirmation-dialog';
 import { defaultColDef, defaultRowSelection } from '../common/table-config';
-import MultiChipsRendererComponent from '../common/multi-chips-renderer-component';
-import MultiSelectEditorComponent from '../common/multi-select-editor-component';
 
 export interface UsersTableProps {
     gridRef: RefObject<GridTableRef<UserInfos>>;
@@ -37,23 +35,6 @@ const UsersTable: FunctionComponent<UsersTableProps> = (props) => {
 
     const [rowsSelection, setRowsSelection] = useState<UserInfos[]>([]);
     const [showDeletionDialog, setShowDeletionDialog] = useState(false);
-    const [groupsOptions, setGroupsOptions] = useState<string[]>([]);
-
-    useEffect(() => {
-        // fetch available groups
-        UserAdminSrv.fetchGroups()
-            .then((allGroups: GroupInfos[]) => {
-                let groups: string[] = [];
-                allGroups?.forEach((g) => groups.push(g.name));
-                setGroupsOptions(groups);
-            })
-            .catch((error) =>
-                snackError({
-                    messageTxt: error.message,
-                    headerId: 'users.table.error.groups',
-                })
-            );
-    }, [intl, snackError]);
 
     function getRowId(params: GetRowIdParams<UserInfos>): string {
         return params.data.sub ?? '';
@@ -80,32 +61,12 @@ const UsersTable: FunctionComponent<UsersTableProps> = (props) => {
 
     const deleteUsersDisabled = useMemo(() => rowsSelection.length <= 0, [rowsSelection.length]);
 
-    const updateUserCallback = useCallback(
-        (sub: string, profileName: string | undefined, isAdmin: boolean | undefined, groups: string[]) => {
-            const newData: UpdateUserInfos = {
-                sub: sub,
-                profileName: profileName,
-                isAdmin: isAdmin,
-                groups: groups,
-            };
-            UserAdminSrv.udpateUser(newData)
-                .catch((error) =>
-                    snackError({
-                        messageTxt: error.message,
-                        headerId: 'users.table.error.update',
-                    })
-                )
-                .then(() => props.gridRef?.current?.context?.refresh?.());
-        },
-        [props.gridRef, snackError]
-    );
-
     const columns = useMemo(
         (): ColDef<UserInfos>[] => [
             {
                 field: 'sub',
                 cellDataType: 'text',
-                flex: 3,
+                flex: 2,
                 lockVisible: true,
                 filter: true,
                 headerName: intl.formatMessage({ id: 'users.table.id' }),
@@ -121,7 +82,7 @@ const UsersTable: FunctionComponent<UsersTableProps> = (props) => {
             {
                 field: 'profileName',
                 cellDataType: 'text',
-                flex: 1,
+                flex: 2,
                 filter: true,
                 headerName: intl.formatMessage({
                     id: 'users.table.profileName',
@@ -134,26 +95,10 @@ const UsersTable: FunctionComponent<UsersTableProps> = (props) => {
                     trimInput: true,
                 } as TextFilterParams<UserInfos>,
             },
-            {
-                field: 'isAdmin',
-                cellDataType: 'boolean',
-                //detected as cellRenderer: 'agCheckboxCellRenderer',
-                cellRendererParams: {
-                    disabled: true,
-                } as ICheckboxCellRendererParams<UserInfos, {}>,
-                flex: 1,
-                headerName: intl.formatMessage({
-                    id: 'users.table.isAdmin',
-                }),
-                headerTooltip: intl.formatMessage({
-                    id: 'users.table.isAdmin.description',
-                }),
-                filter: true,
-            },
             {
                 field: 'groups',
                 cellDataType: 'text',
-                flex: 1,
+                flex: 3,
                 filter: true,
                 headerName: intl.formatMessage({
                     id: 'users.table.groups',
@@ -165,20 +110,38 @@ const UsersTable: FunctionComponent<UsersTableProps> = (props) => {
                     caseSensitive: false,
                     trimInput: true,
                 } as TextFilterParams<GroupInfos>,
-                editable: true,
-                cellRenderer: MultiChipsRendererComponent,
-                cellEditor: MultiSelectEditorComponent,
-                cellEditorParams: (params: ICellEditorParams<UserInfos>) => ({
-                    options: groupsOptions,
-                    setValue: (values: string[]) => {
-                        if (params.data?.sub) {
-                            updateUserCallback(params.data.sub, params.data.profileName, params.data.isAdmin, values);
-                        }
-                    },
+                tooltipValueGetter: (p: ITooltipParams) => {
+                    const items = p.value as string[];
+                    if (items == null || items.length === 0) {
+                        return '';
+                    }
+                    let groupWord = intl.formatMessage({
+                        id: 'form.delete.dialog.group',
+                    });
+                    if (items.length > 1) {
+                        groupWord = groupWord.concat('s');
+                    }
+                    return `${items.length} ${groupWord}`;
+                },
+            },
+            {
+                field: 'isAdmin',
+                cellDataType: 'boolean',
+                //detected as cellRenderer: 'agCheckboxCellRenderer',
+                cellRendererParams: {
+                    disabled: true,
+                } as ICheckboxCellRendererParams<UserInfos, {}>,
+                flex: 1,
+                headerName: intl.formatMessage({
+                    id: 'users.table.isAdmin',
                 }),
+                headerTooltip: intl.formatMessage({
+                    id: 'users.table.isAdmin.description',
+                }),
+                filter: true,
             },
         ],
-        [groupsOptions, intl, updateUserCallback]
+        [intl]
     );
 
     return (
@@ -193,6 +156,7 @@ const UsersTable: FunctionComponent<UsersTableProps> = (props) => {
                 rowSelection={defaultRowSelection}
                 onRowClicked={props.onRowClicked}
                 onSelectionChanged={onSelectionChanged}
+                tooltipShowDelay={1000}
             >
                 <GridButton
                     labelId="users.table.toolbar.add.label"
