Merge pull request #9284 from prometheus/update-react-and-ts

Update React 16->17, TypeScript, and some other node deps

web/ui/react-app/.eslintrc.json

@@ -25,6 +25,8 @@
       }
     ]
   },
-  "plugins": ["prettier"],
+  "plugins": [
+    "prettier"
+  ],
   "ignorePatterns": ["src/vendor/**"]
 }

web/ui/react-app/package.json

@@ -27,22 +27,20 @@
     "i": "^0.3.6",
     "jquery": "^3.5.1",
     "jquery.flot.tooltip": "^0.9.0",
-    "jsdom": "^16.4.0",
     "moment": "^2.24.0",
     "moment-timezone": "^0.5.23",
     "popper.js": "^1.14.3",
-    "react": "^16.7.0",
-    "react-copy-to-clipboard": "^5.0.1",
-    "react-dom": "^16.7.0",
-    "react-resize-detector": "^5.0.7",
+    "react": "^17.0.2",
+    "react-copy-to-clipboard": "^5.0.4",
+    "react-dom": "^17.0.2",
+    "react-resize-detector": "^6.7.6",
     "react-router-dom": "^5.2.1",
-    "react-test-renderer": "^16.9.0",
+    "react-test-renderer": "^17.0.2",
     "reactstrap": "^8.9.0",
     "sanitize-html": "^2.3.3",
     "sass": "1.39.0",
     "tempusdominus-bootstrap-4": "^5.1.2",
-    "tempusdominus-core": "^5.0.3",
-    "use-media": "^1.4.0"
+    "tempusdominus-core": "^5.0.3"
   },
   "scripts": {
     "start": "react-scripts start",
@@ -65,33 +63,31 @@
     "not op_mini all"
   ],
   "devDependencies": {
-    "@testing-library/react-hooks": "^3.1.1",
-    "@types/enzyme": "^3.10.3",
-    "@types/enzyme-adapter-react-16": "^1.0.5",
-    "@types/flot": "0.0.32",
-    "@types/jest": "^27.0.0",
+    "@testing-library/react-hooks": "^7.0.1",
+    "@types/enzyme": "^3.10.9",
+    "@types/flot": "0.0.31",
+    "@types/jest": "^27.0.1",
     "@types/jquery": "^3.5.1",
-    "@types/moment-timezone": "^0.5.10",
-    "@types/node": "^12.11.1",
-    "@types/react": "^16.8.2",
-    "@types/react-copy-to-clipboard": "^5.0.0",
-    "@types/react-dom": "^16.8.0",
+    "@types/node": "^16.7.6",
+    "@types/react": "^17.0.19",
+    "@types/react-copy-to-clipboard": "^5.0.1",
+    "@types/react-dom": "^17.0.9",
     "@types/react-resize-detector": "^5.0.0",
     "@types/react-router-dom": "^5.1.8",
-    "@types/reactstrap": "^8.7.2",
     "@types/sanitize-html": "^1.20.2",
-    "@types/sinon": "^9.0.4",
-    "enzyme": "^3.10.0",
-    "enzyme-adapter-react-16": "^1.15.1",
-    "enzyme-to-json": "^3.4.3",
+    "@types/sinon": "^10.0.2",
+    "@wojtekmaj/enzyme-adapter-react-17": "^0.6.3",
+    "enzyme": "^3.11.0",
+    "enzyme-to-json": "^3.6.2",
     "eslint-config-prettier": "^8.3.0",
     "eslint-config-react-app": "^6.0.0",
     "eslint-plugin-prettier": "^4.0.0",
+    "jest-canvas-mock": "^2.3.1",
     "jest-fetch-mock": "^3.0.3",
     "mutationobserver-shim": "^0.3.7",
     "prettier": "^2.3.2",
     "react-scripts": "4.0.3",
-    "sinon": "^9.0.3",
+    "sinon": "^11.1.2",
     "typescript": "^4.4.2"
   },
   "proxy": "http://localhost:9090",

web/ui/react-app/src/App.tsx

@@ -3,7 +3,6 @@ import Navigation from './Navbar';
 import { Container } from 'reactstrap';
 
 import { BrowserRouter as Router, Redirect, Switch, Route } from 'react-router-dom';
-import useMedia from 'use-media';
 import {
   AlertsPage,
   ConfigPage,
@@ -19,6 +18,7 @@ import { PathPrefixContext } from './contexts/PathPrefixContext';
 import { ThemeContext, themeName, themeSetting } from './contexts/ThemeContext';
 import { Theme, themeLocalStorageKey } from './Theme';
 import { useLocalStorage } from './hooks/useLocalStorage';
+import useMedia from './hooks/useMedia';
 
 interface AppProps {
   consolesLink: string | null;

web/ui/react-app/src/hooks/useMedia.ts

@@ -0,0 +1,17 @@
+import { useEffect, useState } from 'react';
+
+// A hook to determine whether a CSS media query finds any matches.
+const useMedia = (query: string): boolean => {
+  const mediaQuery = window.matchMedia(query);
+  const [matches, setMatches] = useState(mediaQuery.matches);
+
+  useEffect(() => {
+    const handler = () => setMatches(mediaQuery.matches);
+    mediaQuery.addEventListener('change', handler);
+    return () => mediaQuery.removeEventListener('change', handler);
+  }, [mediaQuery]);
+
+  return matches;
+};
+
+export default useMedia;

web/ui/react-app/src/pages/graph/Graph.test.tsx

@@ -9,6 +9,20 @@ describe('Graph', () => {
   beforeAll(() => {
     jest.spyOn(window, 'requestAnimationFrame').mockImplementation((cb: any) => cb());
   });
+
+  // Source: https://github.com/maslianok/react-resize-detector#testing-with-enzyme-and-jest
+  beforeEach(() => {
+    window.ResizeObserver = jest.fn().mockImplementation(() => ({
+      observe: jest.fn(),
+      unobserve: jest.fn(),
+      disconnect: jest.fn(),
+    }));
+  });
+
+  afterEach(() => {
+    window.ResizeObserver = ResizeObserver;
+  });
+
   describe('data is returned', () => {
     const props: any = {
       queryParams: {

web/ui/react-app/src/pages/graph/Panel.tsx

@@ -213,7 +213,7 @@ class Panel extends Component<PanelProps, PanelState> {
     }
   };
 
-  setOptions(opts: Record<string, unknown>): void {
+  setOptions(opts: Partial<PanelOptions>): void {
     const newOpts = { ...this.props.options, ...opts };
     this.props.onOptionsChanged(newOpts);
   }

web/ui/react-app/src/setupTests.ts

@@ -1,14 +1,31 @@
 import { configure } from 'enzyme';
-import Adapter from 'enzyme-adapter-react-16';
+import Adapter from '@wojtekmaj/enzyme-adapter-react-17';
 import { GlobalWithFetchMock } from 'jest-fetch-mock';
 import 'mutationobserver-shim'; // Needed for CodeMirror.
 import './globals';
+import 'jest-canvas-mock';
 
 configure({ adapter: new Adapter() });
 const customGlobal: GlobalWithFetchMock = global as GlobalWithFetchMock;
 customGlobal.fetch = require('jest-fetch-mock');
 customGlobal.fetchMock = customGlobal.fetch;
 
+// https://stackoverflow.com/questions/39830580/jest-test-fails-typeerror-window-matchmedia-is-not-a-function
+// https://jestjs.io/docs/manual-mocks#mocking-methods-which-are-not-implemented-in-jsdom
+Object.defineProperty(window, 'matchMedia', {
+  writable: true,
+  value: jest.fn().mockImplementation((query) => ({
+    matches: false,
+    media: query,
+    onchange: null,
+    addListener: jest.fn(), // Deprecated
+    removeListener: jest.fn(), // Deprecated
+    addEventListener: jest.fn(),
+    removeEventListener: jest.fn(),
+    dispatchEvent: jest.fn(),
+  })),
+});
+
 // CodeMirror in the expression input requires this DOM API. When we upgrade react-scripts
 // and the associated Jest deps, hopefully this won't be needed anymore.
 document.getSelection = function () {