fix: Upgrade react and ag grid version

package.json

@@ -39,41 +39,40 @@
     ]
   },
   "dependencies": {
-    "@ag-grid-community/client-side-row-model": "~28.1.1",
-    "@ag-grid-community/core": "~28.1.1",
-    "@ag-grid-community/csv-export": "~28.1.1",
-    "@ag-grid-community/react": "~28.1.1",
-    "@ag-grid-community/styles": "~28.1.1",
-    "@ag-grid-enterprise/clipboard": "~28.1.1",
-    "@ag-grid-enterprise/column-tool-panel": "~28.1.1",
-    "@ag-grid-enterprise/core": "~28.1.1",
-    "@ag-grid-enterprise/excel-export": "~28.1.1",
-    "@ag-grid-enterprise/filter-tool-panel": "~28.1.1",
-    "@ag-grid-enterprise/menu": "~28.1.1",
-    "@ag-grid-enterprise/multi-filter": "~28.1.1",
-    "@ag-grid-enterprise/range-selection": "~28.1.1",
-    "@ag-grid-enterprise/set-filter": "~28.1.1",
+    "@ag-grid-community/client-side-row-model": "~30.0.5",
+    "@ag-grid-community/core": "~30.0.5",
+    "@ag-grid-community/csv-export": "~30.0.5",
+    "@ag-grid-community/react": "~30.0.5",
+    "@ag-grid-community/styles": "~30.0.5",
+    "@ag-grid-enterprise/clipboard": "~30.0.5",
+    "@ag-grid-enterprise/column-tool-panel": "~30.0.5",
+    "@ag-grid-enterprise/core": "~30.0.5",
+    "@ag-grid-enterprise/excel-export": "~30.0.5",
+    "@ag-grid-enterprise/filter-tool-panel": "~30.0.5",
+    "@ag-grid-enterprise/menu": "~30.0.5",
+    "@ag-grid-enterprise/multi-filter": "~30.0.5",
+    "@ag-grid-enterprise/range-selection": "~30.0.5",
+    "@ag-grid-enterprise/set-filter": "~30.0.5",
     "@emotion/css": "^11.11.0",
     "@emotion/react": "^11.11.0",
     "@emotion/styled": "^11.11.0",
     "@equinor/eds-core-react": "^0.31.1",
     "@equinor/eds-icons": "^0.17.0",
     "@equinor/eds-tokens": "^0.9.0",
     "@equinor/eds-utils": "^0.7.0",
-    "@equinor/fusion": "^3.4.9",
-    "@equinor/fusion-components": "2.10.6",
+    "@equinor/fusion": "^3.4.10",
     "@equinor/fusion-framework-app": "^7.0.16",
-    "@equinor/fusion-framework-module-ag-grid": "^4.0.0",
+    "@equinor/fusion-framework-module-ag-grid": "^29.3.3",
     "@equinor/fusion-framework-module-context": "^4.0.10",
     "@equinor/fusion-framework-module-msal": "^3.0.1",
-    "@equinor/fusion-framework-module-navigation": "^2.1.1",
-    "@equinor/fusion-framework-react": "^5.1.2",
+    "@equinor/fusion-framework-module-navigation": "^2.1.2",
+    "@equinor/fusion-framework-react": "^5.1.3",
     "@equinor/fusion-framework-react-app": "^4.0.14",
     "@equinor/fusion-framework-react-module": "^3.0.1",
-    "@equinor/fusion-framework-react-module-context": "^6.0.6",
+    "@equinor/fusion-framework-react-module-context": "^6.0.8",
     "@equinor/fusion-observable": "^7.0.3",
     "@equinor/fusion-query": "^2.0.7",
-    "@equinor/fusion-react-ag-grid-addons": "^0.4.0",
+    "@equinor/fusion-react-ag-grid-styles": "^29.3.7",
     "@equinor/fusion-react-side-sheet": "^0.1.0",
     "@floating-ui/react-dom": "^1.3.0",
     "@floating-ui/react-dom-interactions": "^0.13.3",
@@ -83,12 +82,12 @@
     "@tippyjs/react": "^4.2.6",
     "ag-charts-community": "^7.3.0",
     "ag-charts-react": "^7.3.0",
-    "ag-grid-community": "^30.0.5",
     "axios": "^1.3.4",
+    "core-js": "^3.31.1",
     "downshift": "^7.6.0",
     "re-resizable": "^6.9.9",
-    "react": "^17.0.2",
-    "react-dom": "^17.0.2",
+    "react": "^18.2.0",
+    "react-dom": "^18.2.0",
     "react-modal": "^3.16.1",
     "react-popper": "^2.3.0",
     "react-router": "^6.6.2",
@@ -97,15 +96,16 @@
     "uuid": "^9.0.0"
   },
   "devDependencies": {
-    "@equinor/fusion-cli": "3.0.0-beta.39",
-    "@types/react": "^17.0.38",
+    "@equinor/fusion-cli": "3.0.3",
+    "@types/react": "^18.2.0",
+    "@types/react-dom": "^18.2.0",
     "@types/react-modal": "^3.13.1",
     "@types/react-router-dom": "^5.3.3",
     "@types/styled-components": "^5.1.26",
     "@types/uuid": "^9.0.0",
     "@typescript-eslint/eslint-plugin": "^4.33.0",
     "@typescript-eslint/parser": "^4.33.0",
-    "babel-loader": "^9.1.2",
+    "babel-loader": "^9.1.3",
     "dtsgenerator": "^3.18.0",
     "eslint": "^7.32.0",
     "eslint-config-airbnb": "^19.0.4",
@@ -126,7 +126,7 @@
     "tslib": "^2.4.1",
     "tslint": "^6.1.3",
     "tslint-config-prettier": "^1.18.0",
-    "typescript": "^4.9.4",
+    "typescript": "^5.1.6",
     "webpack-hot-middleware": "^2.25.4"
   }
-}
+}

src/AppComponent.tsx

@@ -5,7 +5,6 @@ import { ModuleRegistry } from "@ag-grid-community/core"
 import { ClientSideRowModelModule } from "@ag-grid-community/client-side-row-model"
 import { ColumnsToolPanelModule } from "@ag-grid-enterprise/column-tool-panel"
 import { FiltersToolPanelModule } from "@ag-grid-enterprise/filter-tool-panel"
-import { useAgGridStyles } from "@equinor/fusion-react-ag-grid-addons"
 import { RangeSelectionModule } from "@ag-grid-enterprise/range-selection"
 import { ClipboardModule } from "@ag-grid-enterprise/clipboard"
 import { MultiFilterModule } from "@ag-grid-enterprise/multi-filter"
@@ -28,8 +27,6 @@ ModuleRegistry.registerModules([
 ])
 
 const AppComponent: FC = () => {
-    useAgGridStyles()
-
     const fusionEnvironment = useFusionEnvironment()
     const basename = fusionEnvironment.env === "dev" ? "/" : "/apps/spinedatasheet"
 
@@ -44,6 +41,19 @@ const AppComponent: FC = () => {
     buildConfig(config.REACT_APP_API_BASE_URL)
     StoreAppScope(config.BACKEND_APP_SCOPE[0])
 
+    const suppressConsoleError = (shouldBeHidden: (message: string) => boolean) => {
+        const err = console.error
+        console.error = (message?: any, ...optionalParams: any[]) => {
+            if (typeof message === "string" && shouldBeHidden(message)) {
+                return
+            }
+            err(message, ...optionalParams)
+        }
+    }
+
+    suppressConsoleError((m) => m.startsWith("Warning: Invalid aria prop"))
+    suppressConsoleError((m) => m.startsWith("*"))
+
     return (
         <ViewContextProvider>
             <BrowserRouter basename={basename}>

src/Components/EquipmentListView/EquipmentListReviewRenderer.tsx

@@ -1,5 +1,5 @@
 import React, { Dispatch, SetStateAction } from "react"
-import { ICellRendererParams } from "ag-grid-community"
+import { ICellRendererParams } from "@ag-grid-community/core"
 
 export default (
     params: ICellRendererParams,

src/Components/EquipmentListView/EquipmentListTable.tsx

@@ -1,5 +1,6 @@
 import React, { Dispatch, SetStateAction, useMemo } from "react"
 import { AgGridReact } from "@ag-grid-community/react"
+import useStyles from "@equinor/fusion-react-ag-grid-styles"
 import { tokens } from "@equinor/eds-tokens"
 import { Icon } from "@equinor/eds-core-react"
 import { block, done, tag } from "@equinor/eds-icons"
@@ -29,6 +30,7 @@ function EquipmentListTable({
     setRevisionInReview,
 }: Props) {
     const location = useLocation()
+    const styles = useStyles()
 
     const defaultColDef = useMemo<ColDef>(
         () => ({
@@ -55,17 +57,13 @@ function EquipmentListTable({
         if (lastChar === "/") {
             const result = {
                 ...location,
-                pathname: `${location.pathname}${typeOfJIP33(params)}/${
-                    params.data.id
-                }`,
+                pathname: `${location.pathname}${typeOfJIP33(params)}/${params.data.id}`,
             }
             return result
         }
         const result = {
             ...location,
-            pathname: `${location.pathname}/${typeOfJIP33(params)}/${
-                params.data.id
-            }`,
+            pathname: `${location.pathname}/${typeOfJIP33(params)}/${params.data.id}`,
         }
         return result
     }
@@ -177,11 +175,11 @@ function EquipmentListTable({
                     field: "",
                     headerName: "Review",
                     cellRenderer: (params: any) => EquipmentListReviewRenderer(
-                            params,
-                            setReviewModalOpen,
-                            setTagInReview,
-                            setRevisionInReview,
-                        ),
+                        params,
+                        setReviewModalOpen,
+                        setTagInReview,
+                        setRevisionInReview,
+                    ),
                 },
                 {
                     field: "revisionContainer.revisionContainerReview.status",
@@ -211,24 +209,26 @@ function EquipmentListTable({
     ]
 
     return (
-        <div
-            className="ag-theme-alpine ag-theme-datasheetTable"
-            style={{ flex: "1 1 auto", width: "100%" }}
-        >
-            <AgGridReact
-                rowData={tags}
-                columnDefs={columns}
-                defaultColDef={defaultColDef}
-                animateRows
-                domLayout="autoHeight"
-                enableCellChangeFlash
-                rowSelection="multiple"
-                suppressMovableColumns
-                headerHeight={48}
-                rowHeight={35}
-                enableRangeSelection
-                suppressCopySingleCellRanges
-            />
+        <div className={styles.root}>
+            <div
+                className="ag-theme-alpine ag-theme-datasheetTable"
+                style={{ flex: "1 1 auto", width: "100%" }}
+            >
+                <AgGridReact
+                    rowData={tags}
+                    columnDefs={columns}
+                    defaultColDef={defaultColDef}
+                    animateRows
+                    domLayout="autoHeight"
+                    enableCellChangeFlash
+                    rowSelection="multiple"
+                    suppressMovableColumns
+                    headerHeight={48}
+                    rowHeight={35}
+                    enableRangeSelection
+                    suppressCopySingleCellRanges
+                />
+            </div>
         </div>
     )
 }

src/Components/JIP33Table/JIP33LegendModal.tsx

@@ -1,11 +1,11 @@
 import React, { useMemo } from "react"
-import { useAgGridStyles } from "@equinor/fusion-react-ag-grid-addons"
+import useStyles from "@equinor/fusion-react-ag-grid-styles"
 import { ColDef } from "@ag-grid-community/core"
 import { AgGridReact } from "@ag-grid-community/react"
 import { ColorLegendEnum } from "./JIP33ColorLegendEnums"
 
-function JIP33LegendModal({}) {
-    useAgGridStyles()
+function JIP33LegendModal({ }) {
+    const styles = useStyles()
 
     const red = "white" // "#e6b8b7"
     const lightBlue = "white" // "#b7dee8"
@@ -147,23 +147,25 @@ function JIP33LegendModal({}) {
     ]
 
     return (
-        <div
-            className="ag-theme-alpine ag-theme-datasheetTable"
-            style={{ flex: "1 1 auto", width: "100%" }}
-        >
-            <AgGridReact
-                rowData={rowData}
-                columnDefs={columns}
-                defaultColDef={defaultColDef}
-                animateRows
-                domLayout="autoHeight"
-                enableCellChangeFlash
-                rowSelection="multiple"
-                suppressMovableColumns
-                suppressHorizontalScroll
-                headerHeight={48}
-                rowHeight={35}
-            />
+        <div className={styles.root}>
+            <div
+                className="ag-theme-alpine ag-theme-datasheetTable"
+                style={{ flex: "1 1 auto", width: "100%" }}
+            >
+                <AgGridReact
+                    rowData={rowData}
+                    columnDefs={columns}
+                    defaultColDef={defaultColDef}
+                    animateRows
+                    domLayout="autoHeight"
+                    enableCellChangeFlash
+                    rowSelection="multiple"
+                    suppressMovableColumns
+                    suppressHorizontalScroll
+                    headerHeight={48}
+                    rowHeight={35}
+                />
+            </div>
         </div>
     )
 }

src/Components/JIP33Table/JIP33Table.tsx

@@ -1,7 +1,7 @@
 import React, { Dispatch, SetStateAction, useMemo } from "react"
-import { useAgGridStyles } from "@equinor/fusion-react-ag-grid-addons"
 import { ColDef } from "@ag-grid-community/core"
 import { AgGridReact } from "@ag-grid-community/react"
+import useStyles from "@equinor/fusion-react-ag-grid-styles"
 import { Icon } from "@equinor/eds-core-react"
 import { comment, comment_chat } from "@equinor/eds-icons"
 import { ReviewComment } from "../../Models/ReviewComment"
@@ -24,7 +24,7 @@ function JIP33Table({
     setWidth,
     width,
 }: Props) {
-    useAgGridStyles()
+    const styles = useStyles()
 
     const red = "white" // "#e6b8b7"
     const lightBlue = "white" // "#b7dee8"
@@ -175,24 +175,26 @@ function JIP33Table({
     ]
 
     return (
-        <div
-            className="ag-theme-alpine ag-theme-datasheetTable"
-            style={{ flex: "1 1 auto", width: "100%", height: "100%" }}
-        >
-            <AgGridReact
-                rowData={rowData}
-                columnDefs={columns}
-                defaultColDef={defaultColDef}
-                animateRows
-                domLayout="normal"
-                enableCellChangeFlash
-                rowSelection="multiple"
-                suppressMovableColumns
-                headerHeight={48}
-                rowHeight={35}
-                enableRangeSelection
-                suppressCopySingleCellRanges
-            />
+        <div className={styles.root} style={{ height: "100%" }}>
+            <div
+                className="ag-theme-alpine ag-theme-datasheetTable"
+                style={{ flex: "1 1 auto", width: "100%", height: "100%" }}
+            >
+                <AgGridReact
+                    rowData={rowData}
+                    columnDefs={columns}
+                    defaultColDef={defaultColDef}
+                    animateRows
+                    domLayout="normal"
+                    enableCellChangeFlash
+                    rowSelection="multiple"
+                    suppressMovableColumns
+                    headerHeight={48}
+                    rowHeight={35}
+                    enableRangeSelection
+                    suppressCopySingleCellRanges
+                />
+            </div>
         </div>
     )
 }

src/Components/SideSheet/Card.tsx

@@ -9,6 +9,10 @@ const CardContainer = styled.div`
     margin-bottom: 15px;
 `
 
-const Card: FC = ({ children }) => <CardContainer>{children}</CardContainer>
+type Props = {
+    children?: React.ReactNode
+}
+
+const Card: FC<Props> = ({ children }) => <CardContainer>{children}</CardContainer>
 
 export default Card

src/Components/SideSheet/Equipment/TabsTitle.tsx

@@ -2,11 +2,15 @@ import React, { FC } from "react"
 import styled from "styled-components"
 import { Typography } from "@equinor/eds-core-react"
 
+type Props = {
+    children?: React.ReactNode
+}
+
 const Title = styled(Typography)`
     margin-bottom: 15px !important;
 `
 
-const TabsTitle: FC = ({ children }) => (
+const TabsTitle: FC<Props> = ({ children }) => (
     <Title variant="h4">{children}</Title>
 )