Update ui npm deps to latest

Signed-off-by: Saswata Mukherjee <saswataminsta@yahoo.com>

pkg/ui/react-app/package.json

@@ -3,49 +3,49 @@
   "version": "0.1.0",
   "private": true,
   "dependencies": {
-    "@fortawesome/fontawesome-svg-core": "^1.2.14",
-    "@fortawesome/free-solid-svg-icons": "^5.7.1",
-    "@fortawesome/react-fontawesome": "^0.1.4",
-    "@reach/router": "^1.2.1",
-    "@testing-library/react-hooks": "^3.1.1",
-    "@types/jest": "^24.0.20",
-    "@types/jquery": "^3.5.1",
-    "@types/node": "^12.11.1",
-    "@types/reach__router": "^1.2.6",
-    "@types/react": "^16.8.2",
-    "@types/react-copy-to-clipboard": "^4.3.0",
-    "@types/react-dom": "^16.8.0",
-    "@types/react-resize-detector": "^4.0.2",
-    "@types/react-select": "^3.0.20",
-    "@types/sanitize-html": "^1.20.2",
-    "bootstrap": "^4.2.1",
+    "@fortawesome/fontawesome-svg-core": "^1.2.34",
+    "@fortawesome/free-solid-svg-icons": "^5.15.2",
+    "@fortawesome/react-fontawesome": "^0.1.14",
+    "@reach/router": "^1.3.4",
+    "@testing-library/react-hooks": "^5.0.3",
+    "@types/jest": "^26.0.20",
+    "@types/jquery": "^3.5.5",
+    "@types/node": "^14.14.30",
+    "@types/reach__router": "^1.3.7",
+    "@types/react": "^17.0.2",
+    "@types/react-copy-to-clipboard": "^5.0.0",
+    "@types/react-dom": "^17.0.1",
+    "@types/react-resize-detector": "^5.0.0",
+    "@types/react-select": "^4.0.13",
+    "@types/sanitize-html": "^1.27.1",
+    "bootstrap": "^4.6.0",
     "css.escape": "^1.5.1",
-    "downshift": "^3.2.2",
-    "enzyme-to-json": "^3.4.3",
+    "downshift": "^6.1.0",
+    "enzyme-to-json": "^3.6.1",
     "fuzzy": "^0.1.3",
     "i": "^0.3.6",
-    "jest-fetch-mock": "^2.1.2",
+    "jest-fetch-mock": "^3.0.3",
     "jquery": "^3.5.1",
     "jquery.flot.tooltip": "^0.9.0",
-    "jsdom": "^15.2.0",
-    "moment": "^2.24.0",
-    "moment-timezone": "^0.5.23",
-    "popper.js": "^1.14.3",
-    "query-string": "^6.13.1",
-    "rc-slider": "^9.3.1",
-    "react": "^16.7.0",
-    "react-copy-to-clipboard": "^5.0.1",
-    "react-dom": "^16.7.0",
-    "react-resize-detector": "^4.2.1",
-    "react-scripts": "^3.4.0",
-    "react-select": "^3.1.0",
-    "react-test-renderer": "^16.9.0",
-    "reactstrap": "^8.0.1",
-    "sanitize-html": "^1.20.1",
-    "tempusdominus-bootstrap-4": "^5.1.2",
-    "tempusdominus-core": "^5.0.3",
-    "typescript": "^3.3.3",
-    "use-query-params": "^1.1.6"
+    "jsdom": "^16.4.0",
+    "moment": "^2.29.1",
+    "moment-timezone": "^0.5.33",
+    "popper.js": "^1.16.1",
+    "query-string": "^6.14.0",
+    "rc-slider": "^9.7.1",
+    "react": "^16.14.0",
+    "react-copy-to-clipboard": "^5.0.3",
+    "react-dom": "^16.14.0",
+    "react-resize-detector": "^6.6.0",
+    "react-scripts": "^3.4.4",
+    "react-select": "^4.1.0",
+    "react-test-renderer": "^16.14.0",
+    "reactstrap": "^8.9.0",
+    "sanitize-html": "^2.3.2",
+    "tempusdominus-bootstrap-4": "^5.39.0",
+    "tempusdominus-core": "^5.19.0",
+    "typescript": "^4.1.5",
+    "use-query-params": "^1.1.9"
   },
   "scripts": {
     "start": "react-scripts start",
@@ -68,29 +68,29 @@
     "not op_mini all"
   ],
   "devDependencies": {
-    "@types/enzyme": "^3.10.3",
-    "@types/enzyme-adapter-react-16": "^1.0.5",
-    "@types/flot": "0.0.31",
-    "@types/moment-timezone": "^0.5.10",
-    "@types/reactstrap": "^8.0.5",
-    "@types/sinon": "^7.5.0",
-    "@typescript-eslint/eslint-plugin": "2.x",
-    "@typescript-eslint/parser": "2.x",
+    "@types/enzyme": "^3.10.8",
+    "@types/enzyme-adapter-react-16": "^1.0.6",
+    "@types/flot": "^0.0.31",
+    "@types/moment-timezone": "^0.5.30",
+    "@types/reactstrap": "^8.7.2",
+    "@types/sinon": "^9.0.10",
+    "@typescript-eslint/eslint-plugin": "^4.15.1",
+    "@typescript-eslint/parser": "^4.15.1",
     "babel-eslint": "10.x",
-    "enzyme": "^3.10.0",
-    "enzyme-adapter-react-16": "^1.15.1",
+    "enzyme": "^3.11.0",
+    "enzyme-adapter-react-16": "^1.15.6",
     "eslint": "6.x",
-    "eslint-config-prettier": "^6.4.0",
-    "eslint-config-react-app": "^5.0.2",
-    "eslint-plugin-flowtype": "3.x",
-    "eslint-plugin-import": "2.x",
-    "eslint-plugin-jsx-a11y": "6.x",
-    "eslint-plugin-prettier": "^3.1.1",
-    "eslint-plugin-react": "7.x",
-    "eslint-plugin-react-hooks": "1.x",
+    "eslint-config-prettier": "^7.2.0",
+    "eslint-config-react-app": "^6.0.0",
+    "eslint-plugin-flowtype": "^5.2.2",
+    "eslint-plugin-import": "^2.22.1",
+    "eslint-plugin-jsx-a11y": "^6.4.1",
+    "eslint-plugin-prettier": "^3.3.1",
+    "eslint-plugin-react": "^7.22.0",
+    "eslint-plugin-react-hooks": "^4.2.0",
     "jest-fetch-mock": "^2.1.2",
-    "prettier": "^1.18.2",
-    "sinon": "^7.5.0"
+    "prettier": "^2.2.1",
+    "sinon": "^9.2.4"
   },
   "proxy": "http://localhost:10902",
   "jest": {

pkg/ui/react-app/src/pages/graph/ExpressionInput.tsx

@@ -45,9 +45,9 @@ class ExpressionInput extends Component<ExpressionInputProps, ExpressionInputSta
     this.setValue(this.exprInputRef.current!.value);
   };
 
-  setValue = (value: string) => {
+  setValue = (value: string | null) => {
     const { onExpressionChange } = this.props;
-    onExpressionChange(value);
+    onExpressionChange(value as string);
     this.setState({ height: 'auto' }, this.setHeight);
   };
 
@@ -130,7 +130,7 @@ class ExpressionInput extends Component<ExpressionInputProps, ExpressionInputSta
     const { height } = this.state;
     return (
       <Downshift onSelect={this.setValue}>
-        {downshift => (
+        {(downshift) => (
           <div>
             <InputGroup className="expression-input">
               <InputGroupAddon addonType="prepend">

pkg/ui/react-app/src/pages/graph/GraphHelpers.test.ts

@@ -1,5 +1,5 @@
 import { formatValue, getColors, parseValue, getOptions } from './GraphHelpers';
-import moment from 'moment';
+import moment from 'moment-timezone';
 require('../../vendor/flot/jquery.flot'); // need for $.colors
 
 describe('GraphHelpers', () => {
@@ -60,7 +60,7 @@ describe('GraphHelpers', () => {
         { input: 2e-24, output: '2.00y' },
         { input: 2e-25, output: '0.20y' },
         { input: 2e-26, output: '0.02y' },
-      ].map(t => {
+      ].map((t) => {
         expect(formatValue(t.input)).toBe(t.output);
       });
     });
@@ -80,7 +80,7 @@ describe('GraphHelpers', () => {
       };
       expect(
         getColors(data)
-          .map(c => c.toString())
+          .map((c) => c.toString())
           .join(',')
       ).toEqual(
         'rgb(237,194,64),rgb(175,216,248),rgb(203,75,75),rgb(77,167,77),rgb(148,64,237),rgb(189,155,51),rgb(140,172,198)'

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

@@ -148,6 +148,7 @@ class Panel extends Component<PanelProps & PathPrefixProps, PanelState> {
     });
 
     // Add storeMatches to query params.
+    // eslint-disable-next-line @typescript-eslint/no-unused-expressions
     this.props.options.storeMatches?.forEach((store: Store) =>
       params.append('storeMatch[]', `{__address__="${store.name}"}`)
     );
@@ -175,8 +176,8 @@ class Panel extends Component<PanelProps & PathPrefixProps, PanelState> {
       credentials: 'same-origin',
       signal: abortController.signal,
     })
-      .then(resp => resp.json())
-      .then(json => {
+      .then((resp) => resp.json())
+      .then((json) => {
         if (json.status !== 'success') {
           throw new Error(json.error || 'invalid response JSON');
         }
@@ -208,7 +209,7 @@ class Panel extends Component<PanelProps & PathPrefixProps, PanelState> {
         });
         this.abortInFlightFetch = null;
       })
-      .catch(error => {
+      .catch((error) => {
         if (error.name === 'AbortError') {
           // Aborts are expected, don't show an error for them.
           return;