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

This updates React, TypeScript, and some other node packages (but not
everything).

A couple of notes:

- `enzyme-adapter-react-16` does not have a React 17 equivalent yet, so I
  switched to the fork `@wojtekmaj/enzyme-adapter-react-17`
- A bunch of tests are still failing because I think in the enzyme testing
  environment, a browser API (`ResizeObserver`) is missing, and maybe for other
  reasons. This needs to be explored + fixed.
- The TypeScript update introduced more stringent rules, which required fixing
  up a bunch of pieces of code a bit.
- The `use-media` package doesn't work with React 17 yet, so I just built our
  own minimal `useMedia` hook instead (just a couple of lines).
- I commented out part of the code in `withStartingIndicator.tsx` because it
  fails the now-stricter lint checks. It needs to be fixed (and not commented
  out).

Signed-off-by: Julius Volz <julius.volz@gmail.com>

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,25 +63,25 @@
     "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",
+    "canvas": "^2.8.0",
+    "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",
@@ -91,7 +89,7 @@
     "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);
+  }, []);
+
+  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());
   });
+
+  // fix coming from 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;
+    jest.restoreAllMocks();
+  });
   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,5 +1,5 @@
 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';