Merge remote-tracking branch 'origin/main' into add_announcement_page

Author: Tristan-WorkGH

.github/workflows/build.yml

@@ -8,7 +8,7 @@ on:
 
 jobs:
   build:
-    uses: powsybl/github-ci/.github/workflows/build-frontend-app-generic.yml@8197c006b729cfd664ffa3f3fe4bb603fb574c69
+    uses: powsybl/github-ci/.github/workflows/build-frontend-app-generic.yml@69b162754c0728d9aeb2ea568eaf47f28f60fafb
     with:
       dockerImage: gridsuite/gridadmin-app
       dockerUsername: gridsuiteci

.github/workflows/patch.yml

@@ -10,7 +10,7 @@ on:
 
 jobs:
   run-patch:
-    uses: powsybl/github-ci/.github/workflows/patch-frontend-app-generic.yml@8197c006b729cfd664ffa3f3fe4bb603fb574c69
+    uses: powsybl/github-ci/.github/workflows/patch-frontend-app-generic.yml@69b162754c0728d9aeb2ea568eaf47f28f60fafb
     with:
       releaseVersion: ${{ github.event.inputs.releaseVersion }}
       dockerImage: docker.io/gridsuite/gridadmin-app

.github/workflows/release.yml

@@ -14,7 +14,7 @@ on:
 
 jobs:
   run-release:
-    uses: powsybl/github-ci/.github/workflows/release-frontend-app-generic.yml@8197c006b729cfd664ffa3f3fe4bb603fb574c69
+    uses: powsybl/github-ci/.github/workflows/release-frontend-app-generic.yml@69b162754c0728d9aeb2ea568eaf47f28f60fafb
     with:
       releaseVersion: ${{ github.event.inputs.releaseVersion }}
       commitSha: ${{ github.event.inputs.gitReference }}

package-lock.json

@@ -1,6 +1,6 @@
 {
     "name": "gridadmin-app",
-    "version": "2.17.0-SNAPSHOT",
+    "version": "2.18.0-SNAPSHOT",
     "license": "MPL-2.0",
     "private": true,
     "type": "module",

package.json

@@ -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
@@ -105,6 +105,7 @@ export const GridTable: GridTableWithRef = forwardRef(function AgGridToolbar<TDa
                     rowData={data}
                     alwaysShowVerticalScroll={true}
                     onGridReady={loadDataAndSave}
+                    accentedSort={true}
                     context={useMemo(
                         () =>
                             ({

src/components/Grid/GridTable.tsx

@@ -0,0 +1,94 @@
+/**
+ * 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 React, { useRef, useState, useEffect } from 'react';
+import { Chip, Grid, Tooltip } from '@mui/material';
+import { mergeSx } from '@gridsuite/commons-ui';
+
+const maxChipWidth = 100;
+const counterChipWidth = 25;
+
+const chipStyles = {
+    default: {
+        marginTop: 2,
+        marginLeft: 1,
+        maxWidth: maxChipWidth,
+    },
+    withCounter: {
+        '&.MuiChip-root': {
+            fontWeight: 'bold',
+        },
+    },
+};
+
+export interface MultiChipCellRendererProps {
+    value: string[];
+}
+
+const MultiChipCellRenderer = (props: MultiChipCellRendererProps) => {
+    const values: string[] = props.value ? [...props.value].sort((a: string, b: string) => a.localeCompare(b)) : [];
+    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 < 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 (
+                <Tooltip title={tooltipContent} key="tooltip-counter">
+                    <Chip
+                        size="small"
+                        label={`+${chipsNumber - chipLimit}`}
+                        key="chip-counter"
+                        sx={mergeSx(chipStyles.default, chipStyles.withCounter)}
+                    />
+                </Tooltip>
+            );
+        }
+        return null;
+    };
+
+    return (
+        <Grid container direction="row" spacing={1} wrap="nowrap" ref={containerRef}>
+            {values.map((label: string, index: number) => customChip(label, index, values.length))}
+        </Grid>
+    );
+};
+
+export default MultiChipCellRenderer;

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

@@ -0,0 +1,24 @@
+/**
+ * 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 { ColDef, RowSelectionOptions } from 'ag-grid-community';
+
+export const defaultColDef: ColDef = {
+    editable: false,
+    resizable: true,
+    minWidth: 50,
+    rowDrag: false,
+    sortable: true,
+};
+
+export const defaultRowSelection: RowSelectionOptions = {
+    mode: 'multiRow',
+    enableClickSelection: false,
+    checkboxes: true,
+    headerCheckbox: true,
+    hideDisabledCheckboxes: false,
+};