PMM-13235 Grafana 11 (#1615)

* PMM-13159 Remove collection details dashboard (#1607) (#1611) * PMM-13159 Remove collection details dashboard * PMM-13159 Trigger checks * PMM-13235 Update packages & fix CVEs * PMM-13235 Fix lint config * PMM-13235 Handle enzyme for react 18 * PMM-13235 Update eslint config * PMM-13235 Bump grafana packages * PMM-13235 Update to 11.1.5 and bump packages --------- Co-authored-by: Yash Sartanpara <[email protected]>
percona · Sep 18, 2024 · 6434a83 · 6434a83
1 parent 7d10faa
commit 6434a83
Show file tree

Hide file tree

Showing 7 changed files with 1,518 additions and 1,533 deletions.
diff --git a/pmm-app/.config/.eslintrc b/pmm-app/.config/.eslintrc
@@ -4,7 +4,7 @@
  * In order to extend the configuration follow the steps in
  * https://grafana.com/developers/plugin-tools/create-a-plugin/extend-a-plugin/extend-configurations#extend-the-eslint-config
  */
-{
+ {
   "extends": ["@grafana/eslint-config"],
   "root": true,
   "rules": {

diff --git a/pmm-app/.eslintrc b/pmm-app/.eslintrc
@@ -1,5 +1,5 @@
 {
-  "extends": ["@grafana/eslint-config", "plugin:react/recommended", "airbnb"],
+  "extends": ["./.config/.eslintrc", "plugin:react/recommended", "airbnb"],
   "env": {
     "jest/globals": true,
     "browser": true

diff --git a/pmm-app/config/jest-setup.ts b/pmm-app/config/jest-setup.ts
@@ -1,6 +1,9 @@
 import { configure } from 'enzyme';
-import Adapter from '@wojtekmaj/enzyme-adapter-react-17';
-// eslint-disable-next-line import/no-extraneous-dependencies
+import Adapter from '@cfaester/enzyme-adapter-react-18';
+import { TextEncoder, TextDecoder } from 'util';
 import 'jest-canvas-mock';
 
 configure({ adapter: new Adapter() });
+
+// Missing in jsdom 
+Object.assign(global, { TextDecoder, TextEncoder });
diff --git a/pmm-app/jest.config.js b/pmm-app/jest.config.js
@@ -1,11 +1,12 @@
 // force timezone to UTC to allow tests to work regardless of local timezone
 // generally used by snapshots, but can affect specific tests
+const baseConfig = require('./.config/jest.config');
 
 process.env.TZ = 'GMT';
 
 module.exports = {
   // Jest configuration provided by Grafana scaffolding
-  ...require('./.config/jest.config'),
+  ...baseConfig,
   snapshotSerializers: ['enzyme-to-json/serializer'],
   verbose: true,
   collectCoverage: true,
@@ -17,4 +18,8 @@ module.exports = {
     '!**/*module.{ts,tsx}',
     '!**/*types.ts',
   ],
+  moduleNameMapper: {
+    ...baseConfig.moduleNameMapper,
+    d3: '<rootDir>/node_modules/d3/dist/d3.min.js',
+  },
 };
diff --git a/pmm-app/package.json b/pmm-app/package.json
@@ -35,33 +35,34 @@
     "grafana"
   ],
   "dependencies": {
-    "@ant-design/compatible": "^5.1.2",
+    "@ant-design/compatible": "^5.1.3",
+    "@ant-design/cssinjs": "^1.21.0",
     "@ant-design/icons": "^5.3.5",
     "@emotion/css": "11.10.6",
-    "@grafana/data": "10.4.2",
-    "@grafana/runtime": "10.4.2",
-    "@grafana/schema": "10.4.2",
-    "@grafana/ui": "10.4.2",
+    "@grafana/data": "^11.1.5",
+    "@grafana/runtime": "^11.1.5",
+    "@grafana/schema": "^11.1.5",
+    "@grafana/ui": "^11.1.5",
     "@tippyjs/react": "^4.2.6",
-    "antd": "^5.15.4",
-    "axios": "^0.26.0",
+    "antd": "^5.19.2",
+    "axios": "^1.7.7",
     "chart.js": "^3.7.0",
     "chartjs-plugin-datalabels": "^2.0.0",
-    "d3": "^5.16.0",
+    "d3": "^7.9.0",
     "exponential-backoff": "^3.1.0",
     "final-form": "^4.20.2",
     "highlight.js": "^11.4.0",
     "history": "^4.10.1",
     "lodash": "^4.17.20",
     "moment": "^2.29.4",
     "numeral": "^2.0.6",
-    "react": "17.0.2",
+    "react": "18.2.0",
     "react-chartjs-2": "^4.0.1",
-    "react-dom": "17.0.2",
+    "react-dom": "18.2.0",
     "react-final-form": "^6.5.3",
     "react-horizontal-stacked-bar-chart": "^8.15.2",
     "react-json-view": "^1.19.1",
-    "react-router-dom": "^5.2.0",
+    "react-router-dom": "^6.22.0",
     "react-split-pane": "^0.1.91",
     "react-table": "^7.6.2",
     "react-viewport-list": "^7.1.1",
@@ -76,28 +77,29 @@
   "devDependencies": {
     "@babel/core": "^7.21.4",
     "@babel/preset-env": "^7.21.4",
-    "@grafana/eslint-config": "^6.0.0",
+    "@cfaester/enzyme-adapter-react-18": "^0.8.0",
+    "@grafana/eslint-config": "^7.0.0",
     "@grafana/tsconfig": "^1.2.0-rc1",
     "@swc/core": "^1.3.90",
     "@swc/helpers": "^0.5.0",
-    "@swc/jest": "^0.2.26",
-    "@testing-library/jest-dom": "5.11.5",
-    "@testing-library/react": "11.1.2",
+    "@swc/jest": "^0.2.36",
+    "@testing-library/jest-dom": "6.4.6",
+    "@testing-library/react": "14.0.0",
     "@testing-library/react-hooks": "^3.2.1",
     "@testing-library/user-event": "^12.1.3",
+    "@types/d3": "^7.4.3",
     "@types/enzyme": "^3.10.5",
-    "@types/enzyme-adapter-react-16": "^1.0.6",
     "@types/grafana": "https://[email protected]/CorpGlory/types-grafana.git",
-    "@types/jest": "^29.5.11",
+    "@types/jest": "^29.5.0",
     "@types/lodash": "^4.14.194",
     "@types/mocha": "^8.0.3",
     "@types/node": "^20.8.7",
     "@types/react": "^16.9.34",
     "@types/react-dom": "^16.9.9",
     "@types/react-router-dom": "^5.1.5",
     "@types/react-scrollbar": "^0.5.1",
+    "@types/testing-library__jest-dom": "5.14.8",
     "@typescript-eslint/eslint-plugin": "^4.28.0",
-    "@wojtekmaj/enzyme-adapter-react-17": "0.3.1",
     "codecov": "^3.6.5",
     "copy-webpack-plugin": "^11.0.0",
     "css-loader": "^6.7.3",
@@ -115,14 +117,14 @@
     "eslint-plugin-prettier": "^3.3.1",
     "eslint-plugin-react": "^7.22.0",
     "eslint-plugin-react-hooks": "^4.2.0",
-    "eslint-webpack-plugin": "^4.0.1",
+    "eslint-webpack-plugin": "^4.2.0",
     "fork-ts-checker-webpack-plugin": "^8.0.0",
     "glob": "^10.2.7",
     "identity-obj-proxy": "3.0.0",
     "influx": "^5.5.2",
     "jest": "^29.5.0",
     "jest-canvas-mock": "^2.5.2",
-    "jest-environment-jsdom": "^29.5.0",
+    "jest-environment-jsdom": "^29.7.0",
     "less": "^4.2.0",
     "less-loader": "^11.1.3",
     "mockdate": "^3.0.2",
@@ -136,15 +138,16 @@
     "ts-node": "^10.9.1",
     "tsconfig-paths": "^4.2.0",
     "typescript": "4.8.4",
-    "webpack": "^5.86.0",
+    "webpack": "^5.94.0",
     "webpack-cli": "^5.1.4",
     "webpack-livereload-plugin": "^3.0.2"
   },
   "resolutions": {
-    "react": "17.0.2",
-    "react-dom": "17.0.2",
-    "@types/react-dom": "17.0.2",
-    "wrap-ansi": "7.0.0"
+    "braces": "^3.0.3",
+    "inline-style-prefixer": "7.0.1",
+    "wrap-ansi": "7.0.0",
+    "ws": "8.18.0",
+    "micromatch": ""
   },
   "engines": {
     "node": ">=18"

diff --git a/pmm-app/src/shared/components/helpers/__snapshots__/Helpers.test.tsx.snap b/pmm-app/src/shared/components/helpers/__snapshots__/Helpers.test.tsx.snap
@@ -268,7 +268,9 @@ exports[`PluginTooltip Renders with right props 1`] = `
       mouseLeaveDelay={0.1}
       onVisibleChange={[Function]}
       overlay={
-        <NoCompactStyle>
+        <ContextIsolator
+          space={true}
+        >
           <React.Fragment>
             test tooltip text
              
@@ -290,9 +292,9 @@ exports[`PluginTooltip Renders with right props 1`] = `
               <br />
             </div>
           </React.Fragment>
-        </NoCompactStyle>
+        </ContextIsolator>
       }
-      overlayClassName="css-dev-only-do-not-override-42nv3w"
+      overlayClassName="css-dev-only-do-not-override-p8b6i"
       overlayInnerStyle={{}}
       overlayStyle={{}}
       placement="topLeft"
@@ -549,7 +551,7 @@ exports[`PluginTooltip Renders with right props 1`] = `
         onPopupVisibleChange={[Function]}
         popup={[Function]}
         popupAlign={{}}
-        popupClassName="css-dev-only-do-not-override-42nv3w"
+        popupClassName="css-dev-only-do-not-override-p8b6i"
         popupMotion={
           {
             "motionDeadline": 1000,
@@ -732,7 +734,7 @@ exports[`PluginTooltip Renders with right props 1`] = `
             }
           }
           autoDestroy={false}
-          className="css-dev-only-do-not-override-42nv3w ant-tooltip-placement-topLeft"
+          className="css-dev-only-do-not-override-p8b6i ant-tooltip-placement-topLeft"
           keepDom={false}
           maskMotion={null}
           motion={