(frontend)[AGE-1417]: Reduce effect of AgGrid on the initial bundle size

agenta-web/package.json

@@ -21,6 +21,10 @@
         "types:watch": "tsc -w"
     },
     "dependencies": {
+        "@ag-grid-community/core": "^31.3.4",
+        "@ag-grid-community/react": "^31.3.4",
+        "@ag-grid-community/client-side-row-model": "^31.3.4",
+        "@ag-grid-community/styles": "^31.3.4",
         "@ant-design/colors": "^7.0.0",
         "@ant-design/icons": "^5.3.7",
         "@dnd-kit/core": "^6.1.0",
@@ -52,8 +56,6 @@
         "@types/react-resizable": "^3.0.7",
         "@types/react-syntax-highlighter": "^15.5.7",
         "@types/uuid": "^9.0.7",
-        "ag-grid-community": "^31.3.4",
-        "ag-grid-react": "^31.3.4",
         "antd": "^5.20.6",
         "autoprefixer": "10.4.14",
         "axios": "^1.7.7",

agenta-web/src/components/TestSetTable/EditRowModal.tsx

@@ -1,11 +1,12 @@
 import {capitalize} from "@/lib/helpers/utils"
-import {AgGridReact} from "ag-grid-react"
 import {Input, Modal} from "antd"
 import React, {forwardRef, useCallback, useImperativeHandle, useMemo, useState} from "react"
 import {useAppTheme} from "../Layout/ThemeContextProvider"
 import useResizeObserver from "@/hooks/useResizeObserver"
 import {createUseStyles} from "react-jss"
 
+import AgGridReact from "@/lib/helpers/agGrid"
+
 const useStyles = createUseStyles({
     cellContainer: {
         lineHeight: "22px",

agenta-web/src/components/TestSetTable/TableCellsRenderer.tsx

@@ -1,7 +1,7 @@
 import {Tooltip} from "antd"
 import {createUseStyles} from "react-jss"
 import {EditOutlined} from "@ant-design/icons"
-import {ICellRendererParams} from "ag-grid-community"
+import {type ICellRendererParams} from "@ag-grid-community/core"
 
 const useStylesCell = createUseStyles({
     cellContainer: {