Merge pull request #5957 from gooddata/IMJ-STL-1137

chore: update ag-grid to latest version
gooddata · Mar 10, 2025 · 1b839ca · 1b839ca
2 parents ee9de6f + 55e65d1
commit 1b839ca
Show file tree

Hide file tree

Showing 263 changed files with 508 additions and 671 deletions.
diff --git a/common/changes/@gooddata/sdk-ui-all/IMJ-STL-1137_2025-03-06-10-46.json b/common/changes/@gooddata/sdk-ui-all/IMJ-STL-1137_2025-03-06-10-46.json
@@ -0,0 +1,10 @@
+{
+    "changes": [
+        {
+            "packageName": "@gooddata/sdk-ui-all",
+            "comment": "Update ag-grid-community and ag-grid-react library to latest version",
+            "type": "none"
+        }
+    ],
+    "packageName": "@gooddata/sdk-ui-all"
+}
diff --git a/common/config/rush/browser-approved-packages.json b/common/config/rush/browser-approved-packages.json
@@ -6,18 +6,6 @@
       "name": "@aaronhayes/react-use-hubspot-form",
       "allowedCategories": [ "production" ]
     },
-    {
-      "name": "@ag-grid-community/all-modules",
-      "allowedCategories": [ "production" ]
-    },
-    {
-      "name": "@ag-grid-community/core",
-      "allowedCategories": [ "production" ]
-    },
-    {
-      "name": "@ag-grid-community/react",
-      "allowedCategories": [ "production" ]
-    },
     {
       "name": "@babel/cli",
       "allowedCategories": [ "examples", "production", "tools" ]
@@ -494,6 +482,14 @@
       "name": "@welldone-software/why-did-you-render",
       "allowedCategories": [ "examples" ]
     },
+    {
+      "name": "ag-grid-community",
+      "allowedCategories": [ "production" ]
+    },
+    {
+      "name": "ag-grid-react",
+      "allowedCategories": [ "production" ]
+    },
     {
       "name": "async",
       "allowedCategories": [ "production" ]

diff --git a/common/config/rush/pnpm-lock.yaml b/common/config/rush/pnpm-lock.yaml
diff --git a/libs/sdk-ui-charts/package.json b/libs/sdk-ui-charts/package.json
@@ -73,9 +73,8 @@
         "scss": "sass --load-path=node_modules styles/scss:styles/css"
     },
     "dependencies": {
-        "@ag-grid-community/all-modules": "27.3.0",
-        "@ag-grid-community/core": "27.3.0",
-        "@ag-grid-community/react": "27.3.0",
+        "ag-grid-community": "33.1.0",
+        "ag-grid-react": "33.1.0",
         "@gooddata/number-formatter": "^1.0.6",
         "@gooddata/sdk-backend-spi": "workspace:*",
         "@gooddata/sdk-model": "workspace:*",

diff --git a/libs/sdk-ui-charts/src/charts/repeater/columnWidths.ts b/libs/sdk-ui-charts/src/charts/repeater/columnWidths.ts
@@ -1,4 +1,4 @@
-// (C) 2007-2024 GoodData Corporation
+// (C) 2007-2025 GoodData Corporation
 import { Identifier } from "@gooddata/sdk-model";
 
 //
@@ -10,8 +10,8 @@ import { Identifier } from "@gooddata/sdk-model";
  */
 export enum ColumnEventSourceType {
     AUTOSIZE_COLUMNS = "autosizeColumns",
-    UI_DRAGGED = "uiColumnDragged",
     FIT_GROW = "growToFit",
+    UI_RESIZED = "uiColumnResized",
 }
 
 /**

diff --git a/libs/sdk-ui-charts/src/charts/repeater/hooks/useDrilling.ts b/libs/sdk-ui-charts/src/charts/repeater/hooks/useDrilling.ts
@@ -1,7 +1,7 @@
-// (C) 2022-2024 GoodData Corporation
+// (C) 2022-2025 GoodData Corporation
 
 import { useCallback, useEffect, useRef, MutableRefObject } from "react";
-import { ColDef, CellClickedEvent, GridReadyEvent } from "@ag-grid-community/all-modules";
+import { ColDef, CellClickedEvent, GridReadyEvent } from "ag-grid-community";
 import {
     convertDrillableItemsToPredicates,
     isSomeHeaderPredicateMatched,
@@ -44,7 +44,7 @@ export function useDrilling(columnDefs: ColDef[], items: IAttributeOrMeasure[],
             return false;
         }
 
-        const columnIndex = cellEvent.columnApi.getAllColumns().findIndex((col) => col === cellEvent.column);
+        const columnIndex = cellEvent.api.getAllGridColumns().findIndex((col) => col === cellEvent.column);
         const attributeHeaderItem = cellEvent.data[cellEvent.colDef.field];
 
         const intersectionElement: IDrillEventIntersectionElement = {
@@ -66,7 +66,7 @@ export function useDrilling(columnDefs: ColDef[], items: IAttributeOrMeasure[],
 
     const onGridReady = useCallback(
         (readyEvent: GridReadyEvent) => {
-            drillingState.current.columnApi = readyEvent.columnApi;
+            drillingState.current.columnApi = readyEvent.api;
         },
         [drillingState],
     );

diff --git a/libs/sdk-ui-charts/src/charts/repeater/hooks/useRenderWatcher.ts b/libs/sdk-ui-charts/src/charts/repeater/hooks/useRenderWatcher.ts
@@ -1,6 +1,6 @@
 // (C) 2025 GoodData Corporation
 import { useCallback, useEffect, useState } from "react";
-import { GridApi, AgGridEvent } from "@ag-grid-community/all-modules";
+import { GridApi, AgGridEvent } from "ag-grid-community";
 
 const WATCHING_TABLE_RENDERED_INTERVAL = 500;
 export function useRenderWatcher(afterRender: (() => void) | undefined) {

diff --git a/libs/sdk-ui-charts/src/charts/repeater/hooks/useResizing.ts b/libs/sdk-ui-charts/src/charts/repeater/hooks/useResizing.ts
@@ -1,9 +1,8 @@
-// (C) 2024 GoodData Corporation
+// (C) 2024-2025 GoodData Corporation
 
 import { useMemo, useCallback, useRef, MutableRefObject, useEffect } from "react";
 import { IAttributeOrMeasure } from "@gooddata/sdk-model";
-import { ColumnResizedEvent, Column, ColumnApi, ColDef } from "@ag-grid-community/all-modules";
-import { GridReadyEvent } from "@ag-grid-community/core";
+import { GridReadyEvent, ColumnResizedEvent, Column, GridApi, ColDef } from "ag-grid-community";
 
 import { ColumnResizingConfig, ResizingState } from "../internal/privateTypes.js";
 import { IRepeaterChartProps } from "../publicTypes.js";
@@ -88,7 +87,7 @@ export function useResizing(columnDefs: ColDef[], items: IAttributeOrMeasure[],
 
     const onGridReady = useCallback(
         (readyEvent: GridReadyEvent) => {
-            resizingState.current.columnApi = readyEvent.columnApi;
+            resizingState.current.columnApi = readyEvent.api;
             applyColumnSizes(columnDefs, resizingState, resizeSettings);
             growToFit(resizingState, resizeSettings);
         },
@@ -171,7 +170,14 @@ function applyColumnSizes(
     resizingState: MutableRefObject<ResizingState>,
     resizeSettings: ColumnResizingConfig,
 ) {
+    const columnWidthItems: Array<{ key: string; newWidth: number }> = [];
+
     const columnApi = resizingState.current.columnApi;
+
+    if (!columnApi) {
+        return;
+    }
+
     resizeSettings.widths?.forEach((columnWidth) => {
         if (isAttributeColumnWidthItem(columnWidth)) {
             const column = columnDefs.find(
@@ -182,41 +188,57 @@ function applyColumnSizes(
             }
             if (column && columnApi) {
                 const columnDef = columnApi
-                    .getAllColumns()
+                    .getAllGridColumns()
                     .find((col) => col.getColDef().field === column.field);
-                columnApi.setColumnWidth(columnDef, columnWidth.attributeColumnWidthItem.width.value);
+                columnWidthItems.push({
+                    key: columnDef.getColId(),
+                    newWidth: columnWidth.attributeColumnWidthItem.width.value,
+                });
                 if (!getManualResizedColumn(resizingState, columnDef)) {
                     resizingState.current.manuallyResizedColumns.push(columnDef);
                 }
             }
         }
         if (isMeasureColumnWidthItem(columnWidth)) {
             columnWidth.measureColumnWidthItem.locators.forEach((locator) => {
-                applyMeasureColumnSize(
+                const res = applyMeasureColumnSize(
                     columnDefs,
                     resizingState,
                     locator,
                     columnWidth.measureColumnWidthItem.width.value,
                 );
+
+                if (res) {
+                    columnWidthItems.push(res);
+                }
             });
         }
         if (isWeakMeasureColumnWidthItem(columnWidth)) {
-            applyMeasureColumnSize(
+            const res = applyMeasureColumnSize(
                 columnDefs,
                 resizingState,
                 columnWidth.measureColumnWidthItem.locator,
                 columnWidth.measureColumnWidthItem.width.value,
             );
+
+            if (res) {
+                columnWidthItems.push(res);
+            }
         }
     });
+
+    setTimeout(() => {
+        columnApi.setColumnWidths(columnWidthItems.filter((columnWidthItem) => !!columnWidthItem));
+        columnApi.refreshCells();
+    }, 0);
 }
 
 function applyMeasureColumnSize(
     columnDefs: ColDef[],
     resizingState: MutableRefObject<ResizingState>,
     locator: RepeaterColumnLocator,
     width: number | "auto",
-) {
+): { key: string; newWidth: number } | undefined {
     const columnApi = resizingState.current.columnApi;
     if (isMeasureColumnLocator(locator)) {
         const column = columnDefs.find((col) => col.field === locator.measureLocatorItem.measureIdentifier);
@@ -225,17 +247,23 @@ function applyMeasureColumnSize(
             column.suppressSizeToFit = true;
         }
         if (column && columnApi && width !== "auto") {
-            const columnDef = columnApi.getAllColumns().find((col) => col.getColDef().field === column.field);
-            columnApi.setColumnWidth(columnDef, width);
+            const columnDef = columnApi
+                .getAllGridColumns()
+                .find((col) => col.getColDef().field === column.field);
+
             if (!getManualResizedColumn(resizingState, columnDef)) {
                 resizingState.current.manuallyResizedColumns.push(columnDef);
             }
+
+            return { key: columnDef.getColId(), newWidth: width };
         }
         //TODO: Autoresize column, value === "auto
     }
     if (isAttributeColumnLocator(locator)) {
         //TODO: Apply attribute column width
     }
+
+    return undefined;
 }
 
 function afterOnResizeColumns(
@@ -256,12 +284,12 @@ async function sleep(delay: number): Promise<void> {
     });
 }
 
-function setColumnMaxWidth(columnApi: ColumnApi, columnIds: string[], newMaxWidth: number | undefined): void {
+function setColumnMaxWidth(columnApi: GridApi, columnIds: string[], newMaxWidth: number | undefined): void {
     setColumnMaxWidthIf(columnApi, columnIds, newMaxWidth, () => true);
 }
 
 function setColumnMaxWidthIf(
-    columnApi: ColumnApi,
+    columnApi: GridApi,
     columnIds: string[],
     newMaxWidth: number | undefined,
     condition: (column: Column) => boolean,