dynamically adjust chip limit

Signed-off-by: Ayoub LABIDI <[email protected]>

Author: ayolab

src/components/Grid/GridTable.tsx

@@ -76,7 +76,7 @@ export const GridTable: GridTableWithRef = forwardRef(function AgGridToolbar<TDa
     );
 
     return (
-        <Grid container direction="column" justifyContent="flex-start" alignItems="stretch">
+        <Grid container direction="column" justifyContent="flex-start" alignItems="stretch" width={'100%'}>
             <Grid item xs="auto">
                 <AppBar position="static" color="default">
                     <Toolbar

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

@@ -5,16 +5,18 @@
  * file, You can obtain one at http://mozilla.org/MPL/2.0/.
  */
 
-import { Chip, Grid } from '@mui/material';
+import React, { useRef, useState, useEffect } from 'react';
+import { Chip, Grid, Tooltip } from '@mui/material';
 import { mergeSx } from '@gridsuite/commons-ui';
 
-const CHIP_LIMIT_NUMBER: number = 5;
+const maxChipWidth = 100;
+const counterChipWidth = 25;
 
 const chipStyles = {
     default: {
-        marginTop: '16px',
-        marginLeft: '8px',
-        maxWidth: '50%',
+        marginTop: 2,
+        marginLeft: 1,
+        maxWidth: maxChipWidth,
     },
     withCounter: {
         '&.MuiChip-root': {
@@ -29,28 +31,62 @@ export interface MultiChipCellRendererProps {
 
 const MultiChipCellRenderer = (props: MultiChipCellRendererProps) => {
     const values: string[] = props.value || [];
+    const containerRef = useRef<HTMLDivElement>(null);
+    const [chipLimit, setChipLimit] = useState<number>(5);
+
+    useEffect(() => {
+        const updateChipLimit = () => {
+            if (!containerRef.current) {
+                return;
+            }
+            const zoomLevel = window.devicePixelRatio;
+            const adjustedContainerWidth = containerRef.current.clientWidth / zoomLevel;
+            const maxChips = Math.max(1, Math.floor(adjustedContainerWidth / (maxChipWidth + counterChipWidth)));
+            setChipLimit(maxChips);
+        };
+
+        updateChipLimit();
+        const resizeObserver = new ResizeObserver(updateChipLimit);
+        if (containerRef.current) {
+            resizeObserver.observe(containerRef.current);
+        }
+        return () => resizeObserver.disconnect();
+    }, [values.length]);
 
     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) {
+        if (index < chipLimit) {
+            return (
+                <Tooltip title={label} key={`tooltip-${label}`}>
+                    <Chip key={label} label={label} size="small" sx={chipStyles.default} />
+                </Tooltip>
+            );
+        } else if (index === chipLimit) {
+            const hiddenLabels = values.slice(chipLimit);
+            const tooltipContent = (
+                <>
+                    {hiddenLabels.map((hiddenLabel) => (
+                        <div key={`hidden-label-${hiddenLabel}`}>{'- ' + hiddenLabel}</div>
+                    ))}
+                </>
+            );
+
             return (
-                <Chip
-                    size="small"
-                    label={`+${chipsNumber - CHIP_LIMIT_NUMBER}`}
-                    key={label}
-                    sx={mergeSx(chipStyles.default, chipStyles.withCounter)}
-                />
+                <Tooltip title={tooltipContent} key="tooltip-counter">
+                    <Chip
+                        size="small"
+                        label={`+${chipsNumber - chipLimit}`}
+                        key="chip-counter"
+                        sx={mergeSx(chipStyles.default, chipStyles.withCounter)}
+                    />
+                </Tooltip>
             );
         }
-        return undefined;
+        return null;
     };
 
     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 container direction="row" spacing={1} wrap="nowrap" ref={containerRef}>
+            {values.map((label: string, index: number) => customChip(label, index, values.length))}
         </Grid>
     );
 };

src/pages/groups/groups-table.tsx

@@ -10,14 +10,7 @@ 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,
-    ITooltipParams,
-    RowClickedEvent,
-    SelectionChangedEvent,
-    TextFilterParams,
-} from 'ag-grid-community';
+import { ColDef, GetRowIdParams, 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';
@@ -88,6 +81,7 @@ const GroupsTable: FunctionComponent<GroupsTableProps> = (props) => {
             },
             {
                 field: 'users',
+                minWidth: 200,
                 cellDataType: 'text',
                 flex: 3,
                 filter: true,
@@ -102,19 +96,6 @@ const GroupsTable: FunctionComponent<GroupsTableProps> = (props) => {
                     trimInput: true,
                 } as TextFilterParams<UserInfos>,
                 cellRenderer: MultiChipCellRenderer,
-                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]

src/pages/users/users-table.tsx

@@ -14,7 +14,6 @@ import {
     ColDef,
     GetRowIdParams,
     ICheckboxCellRendererParams,
-    ITooltipParams,
     RowClickedEvent,
     SelectionChangedEvent,
     TextFilterParams,
@@ -100,6 +99,7 @@ const UsersTable: FunctionComponent<UsersTableProps> = (props) => {
             },
             {
                 field: 'groups',
+                minWidth: 200,
                 cellDataType: 'text',
                 flex: 4,
                 filter: true,
@@ -114,19 +114,6 @@ const UsersTable: FunctionComponent<UsersTableProps> = (props) => {
                     trimInput: true,
                 } as TextFilterParams<GroupInfos>,
                 cellRenderer: MultiChipCellRenderer,
-                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',