Update all React app node modules (#6153)

* Update all React app node modules

I ran "yarn upgrade --latest" and then fixed items that caused errors
with new linter settings in the React UI source.

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

* Fix more React UI lint errors that fail CI

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

web/ui/react-app/package.json

@@ -8,26 +8,26 @@
     "@fortawesome/react-fontawesome": "^0.1.4",
     "@types/jest": "^24.0.4",
     "@types/jquery": "^3.3.29",
-    "@types/node": "^11.9.3",
+    "@types/node": "^12.11.1",
     "@types/react": "^16.8.2",
     "@types/react-dom": "^16.8.0",
-    "@types/react-resize-detector": "^3.1.0",
+    "@types/react-resize-detector": "^4.0.2",
     "bootstrap": "^4.2.1",
     "downshift": "^3.2.2",
-    "flot": "^2.1.6",
+    "flot": "^3.2.13",
     "fuzzy": "^0.1.3",
     "i": "^0.3.6",
     "jquery": "^3.3.1",
     "jquery.flot.tooltip": "^0.9.0",
-    "jsdom": "^9.6.0",
+    "jsdom": "^15.2.0",
     "moment": "^2.24.0",
     "moment-timezone": "^0.5.23",
     "popper.js": "^1.14.3",
     "react": "^16.7.0",
     "react-dom": "^16.7.0",
-    "react-resize-detector": "^3.4.0",
+    "react-resize-detector": "^4.2.1",
-    "react-scripts": "^2.1.5",
+    "react-scripts": "^3.2.0",
-    "reactstrap": "^7.1.0",
+    "reactstrap": "^8.0.1",
     "tempusdominus-bootstrap-4": "^5.1.2",
     "tempusdominus-core": "^5.0.3",
     "typescript": "^3.3.3"
@@ -50,7 +50,7 @@
   "devDependencies": {
     "@types/flot": "0.0.31",
     "@types/moment-timezone": "^0.5.10",
-    "@types/reactstrap": "^7.1.3"
+    "@types/reactstrap": "^8.0.5"
   },
   "proxy": "http://localhost:9090"
 }

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

@@ -1,4 +1,4 @@
-import React, { Component, ReactNode } from 'react';
+import React, { Component } from 'react';
 
 import { Container } from 'reactstrap';
 

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

@@ -65,7 +65,7 @@ class DataTable extends PureComponent<QueryResult> {
           .map((s: InstantSample, index: number): ReactNode => {
             return <tr key={index}><td><SeriesName labels={s.metric} format={false}/></td><td>{s.value[1]}</td></tr>;
           });
-        limited = rows.length != data.result.length;
+        limited = rows.length !== data.result.length;
         break;
       case 'matrix':
         rows = (this.limitSeries(data.result) as RangeSamples[])
@@ -75,7 +75,7 @@ class DataTable extends PureComponent<QueryResult> {
             }).join('\n');
             return <tr style={{whiteSpace: 'pre'}} key={index}><td><SeriesName labels={s.metric} format={false}/></td><td>{valueText}</td></tr>;
           });
-        limited = rows.length != data.result.length;
+        limited = rows.length !== data.result.length;
         break;
       case 'scalar':
         rows.push(<tr><td>scalar</td><td>{data.result[1]}</td></tr>);

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

@@ -8,7 +8,7 @@ import {
   Input,
 } from 'reactstrap';
 
-import Downshift, { ChildrenFunction, ControllerStateAndHelpers, DownshiftInterface } from 'downshift';
+import Downshift from 'downshift';
 import fuzzy from 'fuzzy';
 
 import { library } from '@fortawesome/fontawesome-svg-core';

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

@@ -1,9 +1,10 @@
 import $ from 'jquery';
 import React, { PureComponent } from 'react';
 import ReactResizeDetector from 'react-resize-detector';
-
 import { Alert } from 'reactstrap';
 
+import Legend from './Legend';
+
 require('flot');
 require('flot/source/jquery.flot.crosshair');
 require('flot/source/jquery.flot.legend');
@@ -11,8 +12,6 @@ require('flot/source/jquery.flot.time');
 require('flot/source/jquery.canvaswrapper');
 require('jquery.flot.tooltip');
 
-import Legend from './Legend';
-
 var graphID = 0;
 function getGraphID() {
   // TODO: This is ugly.

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

@@ -2,7 +2,7 @@ import React, { Component } from 'react';
 
 import { Alert, Button, Col, Row } from 'reactstrap';
 
-import Panel, { PanelOptions, PanelType, PanelDefaultOptions } from './Panel';
+import Panel, { PanelOptions, PanelDefaultOptions } from './Panel';
 import { decodePanelOptionsFromQueryString, encodePanelOptionsToQueryString } from './utils/urlParams';
 
 interface PanelListState {
@@ -94,7 +94,7 @@ class PanelList extends Component<any, PanelListState> {
 
   updateURL(): void {
     const query = encodePanelOptionsToQueryString(this.state.panels);
-    history.pushState({}, '', query);
+    window.history.pushState({}, '', query);
   }
 
   addPanel = (): void => {