use chips in table display

Signed-off-by: David BRAQUART <[email protected]>

Author: dbraquart

src/pages/common/multi-chip-cell-renderer.tsx

@@ -0,0 +1,58 @@
+/**
+ * Copyright (c) 2025, 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/.
+ */
+
+import { Chip, Grid } from '@mui/material';
+import { mergeSx } from '@gridsuite/commons-ui';
+
+const CHIP_LIMIT_NUMBER: number = 5;
+
+const chipStyles = {
+    default: {
+        marginTop: '16px',
+        marginLeft: '8px',
+        maxWidth: '50%',
+    },
+    withCounter: {
+        '&.MuiChip-root': {
+            fontWeight: 'bold',
+        },
+    },
+};
+
+export interface MultiChipCellRendererProps {
+    value: string[];
+}
+
+const MultiChipCellRenderer = (props: MultiChipCellRendererProps) => {
+    const values: string[] = props.value || [];
+
+    const customChip = (label: string, index: number, chipsNumber: number) => {
+        if (index < CHIP_LIMIT_NUMBER) {
+            return <Chip key={label} label={label} size={'small'} sx={chipStyles.default} />;
+        } else if (index === CHIP_LIMIT_NUMBER) {
+            return (
+                <Chip
+                    size="small"
+                    label={`+${chipsNumber - CHIP_LIMIT_NUMBER}`}
+                    key={label}
+                    sx={mergeSx(chipStyles.default, chipStyles.withCounter)}
+                />
+            );
+        }
+        return undefined;
+    };
+
+    return (
+        <Grid container direction="row" spacing={1} wrap="nowrap" sx={{ overflow: 'auto hidden' }}>
+            {values.map((label: string, index: number) => {
+                return customChip(label, index, values.length);
+            })}
+        </Grid>
+    );
+};
+
+export default MultiChipCellRenderer;

src/pages/groups/groups-table.tsx

@@ -21,6 +21,7 @@ import {
 import { useSnackMessage } from '@gridsuite/commons-ui';
 import DeleteConfirmationDialog from '../common/delete-confirmation-dialog';
 import { defaultColDef, defaultRowSelection } from '../common/table-config';
+import MultiChipCellRenderer from '../common/multi-chip-cell-renderer';
 
 export interface GroupsTableProps {
     gridRef: RefObject<GridTableRef<GroupInfos>>;
@@ -83,6 +84,7 @@ const GroupsTable: FunctionComponent<GroupsTableProps> = (props) => {
                     trimInput: true,
                 } as TextFilterParams<GroupInfos>,
                 initialSort: 'asc',
+                tooltipField: 'name',
             },
             {
                 field: 'users',
@@ -99,6 +101,7 @@ const GroupsTable: FunctionComponent<GroupsTableProps> = (props) => {
                     caseSensitive: false,
                     trimInput: true,
                 } as TextFilterParams<UserInfos>,
+                cellRenderer: MultiChipCellRenderer,
                 tooltipValueGetter: (p: ITooltipParams) => {
                     const items = p.value as string[];
                     if (items == null || items.length === 0) {

src/pages/users/users-table.tsx

@@ -22,6 +22,7 @@ import {
 import { useSnackMessage } from '@gridsuite/commons-ui';
 import DeleteConfirmationDialog from '../common/delete-confirmation-dialog';
 import { defaultColDef, defaultRowSelection } from '../common/table-config';
+import MultiChipCellRenderer from 'pages/common/multi-chip-cell-renderer';
 
 export interface UsersTableProps {
     gridRef: RefObject<GridTableRef<UserInfos>>;
@@ -66,7 +67,7 @@ const UsersTable: FunctionComponent<UsersTableProps> = (props) => {
             {
                 field: 'sub',
                 cellDataType: 'text',
-                flex: 2,
+                flex: 1,
                 lockVisible: true,
                 filter: true,
                 headerName: intl.formatMessage({ id: 'users.table.id' }),
@@ -78,6 +79,7 @@ const UsersTable: FunctionComponent<UsersTableProps> = (props) => {
                     trimInput: true,
                 } as TextFilterParams<UserInfos>,
                 initialSort: 'asc',
+                tooltipField: 'sub',
             },
             {
                 field: 'profileName',
@@ -94,11 +96,12 @@ const UsersTable: FunctionComponent<UsersTableProps> = (props) => {
                     caseSensitive: false,
                     trimInput: true,
                 } as TextFilterParams<UserInfos>,
+                tooltipField: 'profileName',
             },
             {
                 field: 'groups',
                 cellDataType: 'text',
-                flex: 3,
+                flex: 4,
                 filter: true,
                 headerName: intl.formatMessage({
                     id: 'users.table.groups',
@@ -110,6 +113,7 @@ const UsersTable: FunctionComponent<UsersTableProps> = (props) => {
                     caseSensitive: false,
                     trimInput: true,
                 } as TextFilterParams<GroupInfos>,
+                cellRenderer: MultiChipCellRenderer,
                 tooltipValueGetter: (p: ITooltipParams) => {
                     const items = p.value as string[];
                     if (items == null || items.length === 0) {