migrate aggrid into v33 (#667)

Signed-off-by: achour94 <[email protected]>
gridsuite · Jan 22, 2025 · 9578077 · 9578077
1 parent 8d17e1e
commit 9578077
Show file tree

Hide file tree

Showing 5 changed files with 41 additions and 42 deletions.
diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -54,8 +54,8 @@
         "@mui/material": "^5.15.14",
         "@mui/system": "^5.15.15",
         "@mui/x-tree-view": "^6.17.0",
-        "ag-grid-community": "^31.0.0",
-        "ag-grid-react": "^31.2.0",
+        "ag-grid-community": "^33.0.3",
+        "ag-grid-react": "^33.0.3",
         "notistack": "^3.0.1",
         "papaparse": "^5.4.1",
         "react": "^18.2.0",
@@ -101,8 +101,8 @@
         "@typescript-eslint/eslint-plugin": "^7.0.0",
         "@typescript-eslint/parser": "^7.0.0",
         "@vitejs/plugin-react": "^4.2.1",
-        "ag-grid-community": "^31.0.0",
-        "ag-grid-react": "^31.2.0",
+        "ag-grid-community": "^33.0.3",
+        "ag-grid-react": "^33.0.3",
         "babel-eslint": "^10.1.0",
         "babel-preset-airbnb": "^5.0.0",
         "babel-preset-vite": "^1.1.3",

diff --git a/src/components/customAGGrid/customAggrid.tsx b/src/components/customAGGrid/customAggrid.tsx
@@ -31,7 +31,7 @@ const onColumnResized = (params: ColumnResizedEvent) => {
     if (column && colDefinedMinWidth && finished) {
         const newWidth = column?.getActualWidth();
         if (newWidth < colDefinedMinWidth) {
-            column?.setActualWidth(colDefinedMinWidth, params.source);
+            params.api.setColumnWidths([{ key: column, newWidth: colDefinedMinWidth }], finished, params.source);
         }
     }
 };
@@ -66,7 +66,6 @@ export const CustomAGGrid = React.forwardRef<AgGridReact, CustomAGGridProps>((pr
             <AgGridReact
                 ref={ref}
                 getLocaleText={getLocaleText}
-                suppressPropertyNamesCheck
                 onColumnResized={onColumnResized}
                 enableCellTextSelection
                 {...agGridReactProps}

diff --git a/src/components/filter/explicitNaming/ExplicitNamingFilterForm.tsx b/src/components/filter/explicitNaming/ExplicitNamingFilterForm.tsx
@@ -13,10 +13,7 @@ import { v4 as uuid4 } from 'uuid';
 import { UUID } from 'crypto';
 import { FieldConstants } from '../../../utils/constants/fieldConstants';
 import yup from '../../../utils/yupConfig';
-import {
-    CustomAgGridTable,
-    ROW_DRAGGING_SELECTION_COLUMN_DEF,
-} from '../../inputs/reactHookForm/agGridTable/CustomAgGridTable';
+import { CustomAgGridTable } from '../../inputs/reactHookForm/agGridTable/CustomAgGridTable';
 import { SelectInput } from '../../inputs/reactHookForm/selectInputs/SelectInput';
 import { Generator, Load } from '../../../utils/types/equipmentTypes';
 import { NumericEditor } from '../../inputs/reactHookForm/agGridTable/cellEditors/numericEditor';
@@ -129,11 +126,11 @@ export function ExplicitNamingFilterForm({ sourceFilterForExplicitNamingConversi
 
     const columnDefs = useMemo(() => {
         const newColumnDefs: any[] = [
-            ...ROW_DRAGGING_SELECTION_COLUMN_DEF,
             {
                 headerName: intl.formatMessage({
                     id: FieldConstants.EQUIPMENT_ID,
                 }),
+                rowDrag: true,
                 field: FieldConstants.EQUIPMENT_ID,
                 editable: true,
                 singleClickEdit: true,
@@ -246,7 +243,12 @@ export function ExplicitNamingFilterForm({ sourceFilterForExplicitNamingConversi
                     makeDefaultRowData={makeDefaultRowData}
                     pagination
                     paginationPageSize={100}
-                    suppressRowClickSelection
+                    rowSelection={{
+                        mode: 'multiRow',
+                        enableClickSelection: false,
+                        checkboxes: true,
+                        headerCheckbox: true,
+                    }}
                     alwaysShowVerticalScroll
                     stopEditingWhenCellsLoseFocus
                     csvProps={{

diff --git a/src/components/inputs/reactHookForm/agGridTable/CustomAgGridTable.tsx b/src/components/inputs/reactHookForm/agGridTable/CustomAgGridTable.tsx
@@ -12,19 +12,10 @@ import 'ag-grid-community/styles/ag-grid.css';
 import 'ag-grid-community/styles/ag-theme-alpine.css';
 import { Box, useTheme } from '@mui/material';
 import { useIntl } from 'react-intl';
-import { CellEditingStoppedEvent, ColumnState, SortChangedEvent } from 'ag-grid-community';
+import { CellEditingStoppedEvent, ColumnState, RowSelectionOptions, SortChangedEvent } from 'ag-grid-community';
 import { BottomRightButtons } from './BottomRightButtons';
 import { FieldConstants } from '../../../../utils/constants/fieldConstants';
 
-export const ROW_DRAGGING_SELECTION_COLUMN_DEF = [
-    {
-        rowDrag: true,
-        headerCheckboxSelection: true,
-        checkboxSelection: true,
-        maxWidth: 50,
-    },
-];
-
 const style = (customProps: any) => ({
     grid: (theme: any) => ({
         width: 'auto',
@@ -92,7 +83,7 @@ export interface CustomAgGridTableProps {
     defaultColDef: unknown;
     pagination: boolean;
     paginationPageSize: number;
-    suppressRowClickSelection: boolean;
+    rowSelection?: RowSelectionOptions | 'single' | 'multiple';
     alwaysShowVerticalScroll: boolean;
     stopEditingWhenCellsLoseFocus: boolean;
 }
@@ -106,11 +97,11 @@ export function CustomAgGridTable({
     defaultColDef,
     pagination,
     paginationPageSize,
-    suppressRowClickSelection,
+    rowSelection,
     alwaysShowVerticalScroll,
     stopEditingWhenCellsLoseFocus,
     ...props
-}: CustomAgGridTableProps) {
+}: Readonly<CustomAgGridTableProps>) {
     // FIXME: right type => Theme -->  not defined there ( gridStudy and gridExplore definition not the same )
     const theme: any = useTheme();
     const [gridApi, setGridApi] = useState<any>(null);
@@ -243,11 +234,10 @@ export function CustomAgGridTable({
                     onGridReady={onGridReady}
                     getLocaleText={getLocaleText}
                     cacheOverflowSize={10}
-                    rowSelection="multiple"
+                    rowSelection={rowSelection || 'multiple'}
                     rowDragEntireRow
                     rowDragManaged
                     onRowDragEnd={(e) => move(getIndex(e.node.data), e.overIndex)}
-                    suppressBrowserResizeObserver
                     columnDefs={columnDefs}
                     detailRowAutoHeight
                     onSelectionChanged={() => {
@@ -259,7 +249,6 @@ export function CustomAgGridTable({
                     getRowId={(row) => row.data[FieldConstants.AG_GRID_ROW_UUID]}
                     pagination={pagination}
                     paginationPageSize={paginationPageSize}
-                    suppressRowClickSelection={suppressRowClickSelection}
                     alwaysShowVerticalScroll={alwaysShowVerticalScroll}
                     stopEditingWhenCellsLoseFocus={stopEditingWhenCellsLoseFocus}
                     {...props}