Update ui npm dependencies to latest versions

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

@@ -6,7 +6,7 @@
     "plugin:prettier/recommended"
   ],
   "rules": {
-    "@typescript-eslint/camelcase": "warn",
+    "camelcase": 0,
     "eol-last": [
       "error",
       "always"

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",
+    "@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": "^4.0.2",
-    "@types/react-select": "^3.0.20",
-    "@types/sanitize-html": "^1.20.2",
-    "bootstrap": "^4.2.1",
+    "@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",
+    "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": "^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"
+    "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/App.test.tsx

@@ -13,7 +13,7 @@ describe('App', () => {
     expect(app.find(Navigation)).toHaveLength(1);
   });
   it('routes', () => {
-    [Alerts, Config, Flags, Rules, ServiceDiscovery, Status, Targets, TSDBStatus, PanelList].forEach(component => {
+    [Alerts, Config, Flags, Rules, ServiceDiscovery, Status, Targets, TSDBStatus, PanelList].forEach((component) => {
       const c = app.find(component);
       expect(c).toHaveLength(1);
       expect(c.prop('pathPrefix')).toBe('/path/prefix');

pkg/ui/react-app/src/components/Checkbox.test.tsx

@@ -8,7 +8,7 @@ const MockCmp: React.FC = () => <div className="mock" />;
 describe('Checkbox', () => {
   it('renders with subcomponents', () => {
     const checkBox = shallow(<Checkbox />);
-    [FormGroup, Input, Label].forEach(component => expect(checkBox.find(component)).toHaveLength(1));
+    [FormGroup, Input, Label].forEach((component) => expect(checkBox.find(component)).toHaveLength(1));
   });
 
   it('passes down the correct FormGroup props', () => {

pkg/ui/react-app/src/components/ToggleMoreLess.test.tsx

@@ -23,11 +23,6 @@ describe('ToggleMoreLess', () => {
 
   it('renders a show less btn if clicked', () => {
     tggleBtn.find(Button).simulate('click');
-    expect(
-      tggleBtn
-        .find(Button)
-        .render()
-        .text()
-    ).toEqual('show less');
+    expect(tggleBtn.find(Button).render().text()).toEqual('show less');
   });
 });

pkg/ui/react-app/src/components/withStatusIndicator.tsx

@@ -10,7 +10,7 @@ interface StatusIndicatorProps {
   componentTitle?: string;
 }
 
-export const withStatusIndicator = <T extends {}>(Component: ComponentType<T>): FC<StatusIndicatorProps & T> => ({
+export const withStatusIndicator = <T extends any>(Component: ComponentType<T>): FC<StatusIndicatorProps & T> => ({
   error,
   isLoading,
   customErrorMsg,

pkg/ui/react-app/src/hooks/useFetch.ts

@@ -8,7 +8,7 @@ export interface FetchState<T> {
   isLoading: boolean;
 }
 
-export const useFetch = <T extends {}>(url: string, options?: RequestInit): FetchState<T> => {
+export const useFetch = <T extends any>(url: string, options?: RequestInit): FetchState<T> => {
   const [response, setResponse] = useState<APIResponse<T>>({ status: 'start fetching' } as any);
   const [error, setError] = useState<Error>();
   const [isLoading, setIsLoading] = useState<boolean>(true);

pkg/ui/react-app/src/pages/alerts/AlertContents.tsx

@@ -81,7 +81,7 @@ const AlertsContent: FC<AlertsProps> = ({ groups = [], statsCount }) => {
         </Checkbox>
       </div>
       {groups.map((group, i) => {
-        const hasFilterOn = group.rules.some(rule => filter[rule.state]);
+        const hasFilterOn = group.rules.some((rule) => filter[rule.state]);
         return hasFilterOn ? (
           <Fragment key={i}>
             <GroupInfo rules={group.rules}>

pkg/ui/react-app/src/pages/alerts/Alerts.tsx

@@ -17,7 +17,7 @@ const Alerts: FC<RouteComponentProps & PathPrefixProps> = ({ pathPrefix = '' })
   };
 
   if (response.data && response.data.groups) {
-    response.data.groups.forEach(el => el.rules.forEach(r => ruleStatsCount[r.state]++));
+    response.data.groups.forEach((el) => el.rules.forEach((r) => ruleStatsCount[r.state]++));
   }
 
   return <AlertsWithStatusIndicator {...response.data} statsCount={ruleStatsCount} error={error} isLoading={isLoading} />;

pkg/ui/react-app/src/pages/flags/Flags.tsx

@@ -19,7 +19,7 @@ export const FlagsContent: FC<FlagsProps> = ({ data = {} }) => {
       <h2>Command-Line Flags</h2>
       <Table bordered size="sm" striped>
         <tbody>
-          {Object.keys(data).map(key => (
+          {Object.keys(data).map((key) => (
             <tr key={key}>
               <th>{key}</th>
               <td>{data[key]}</td>

pkg/ui/react-app/src/pages/graph/DataTable.test.tsx

@@ -69,12 +69,7 @@ describe('DataTable', () => {
       const table = dataTable.find(Table);
       table.find('tr').forEach((row, idx) => {
         expect(row.find(SeriesName)).toHaveLength(1);
-        expect(
-          row
-            .find('td')
-            .at(1)
-            .text()
-        ).toEqual(`${idx}`);
+        expect(row.find('td').at(1).text()).toEqual(`${idx}`);
       });
     });
   });
@@ -83,7 +78,7 @@ describe('DataTable', () => {
     const dataTableProps: QueryResult = {
       data: {
         resultType: 'vector',
-        result: Array.from(Array(10001).keys()).map(i => {
+        result: Array.from(Array(10001).keys()).map((i) => {
           return {
             metric: {
               __name__: `metric_name_${i}`,
@@ -104,20 +99,15 @@ describe('DataTable', () => {
 
     it('renders a warning', () => {
       const alerts = dataTable.find(UncontrolledAlert);
-      expect(
-        alerts
-          .first()
-          .render()
-          .text()
-      ).toContain('Warning: Fetched 10001 metrics, only displaying first 10000.');
+      expect(alerts.first().render().text()).toContain('Warning: Fetched 10001 metrics, only displaying first 10000.');
     });
   });
 
   describe('when resultType is vector and size is more than maximum limit of formatting', () => {
     const dataTableProps: QueryResult = {
       data: {
         resultType: 'vector',
-        result: Array.from(Array(1001).keys()).map(i => {
+        result: Array.from(Array(1001).keys()).map((i) => {
           return {
             metric: {
               __name__: `metric_name_${i}`,
@@ -133,12 +123,9 @@ describe('DataTable', () => {
 
     it('renders a warning', () => {
       const alerts = dataTable.find(UncontrolledAlert);
-      expect(
-        alerts
-          .first()
-          .render()
-          .text()
-      ).toContain('Notice: Showing more than 1000 series, turning off label formatting for performance reasons.');
+      expect(alerts.first().render().text()).toContain(
+        'Notice: Showing more than 1000 series, turning off label formatting for performance reasons.'
+      );
     });
   });
 

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

@@ -79,7 +79,7 @@ const DataTable: FC<QueryResult> = ({ data }) => {
     case 'matrix':
       rows = (limitSeries(data.result) as RangeSamples[]).map((s, index) => {
         const valueText = s.values
-          .map(v => {
+          .map((v) => {
             return v[1] + ' @' + v[0];
           })
           .join('\n');

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

@@ -49,14 +49,14 @@ describe('ExpressionInput', () => {
   });
 
   it('renders a search icon when it is not loading', () => {
-    const addon = expressionInput.find(InputGroupAddon).filterWhere(addon => addon.prop('addonType') === 'prepend');
+    const addon = expressionInput.find(InputGroupAddon).filterWhere((addon) => addon.prop('addonType') === 'prepend');
     const icon = addon.find(FontAwesomeIcon);
     expect(icon.prop('icon')).toEqual(faSearch);
   });
 
   it('renders a loading icon when it is loading', () => {
     const expressionInput = mount(<ExpressionInput {...expressionInputProps} loading={true} />);
-    const addon = expressionInput.find(InputGroupAddon).filterWhere(addon => addon.prop('addonType') === 'prepend');
+    const addon = expressionInput.find(InputGroupAddon).filterWhere((addon) => addon.prop('addonType') === 'prepend');
     const icon = addon.find(FontAwesomeIcon);
     expect(icon.prop('icon')).toEqual(faSpinner);
     expect(icon.prop('spin')).toBe(true);
@@ -77,7 +77,7 @@ describe('ExpressionInput', () => {
       const downshift = expressionInput.find(Downshift);
       const input = downshift.find(Input);
       downshift.setState({ isOpen: false });
-      ['Home', 'End', 'ArrowUp', 'ArrowDown'].forEach(key => {
+      ['Home', 'End', 'ArrowUp', 'ArrowDown'].forEach((key) => {
         const event = getKeyEvent(key);
         input.simulate('keydown', event);
         const nativeEvent = event.nativeEvent as any;
@@ -124,7 +124,7 @@ describe('ExpressionInput', () => {
       const spyExecuteQuery = jest.fn();
       const props = { ...expressionInputProps, executeQuery: spyExecuteQuery };
       const wrapper = mount(<ExpressionInput {...props} />);
-      const btn = wrapper.find(Button).filterWhere(btn => btn.hasClass('execute-btn'));
+      const btn = wrapper.find(Button).filterWhere((btn) => btn.hasClass('execute-btn'));
       btn.simulate('click');
       expect(spyExecuteQuery).toHaveBeenCalledTimes(1);
     });
@@ -233,7 +233,7 @@ describe('ExpressionInput', () => {
       const downshift = expressionInput.find(Downshift);
       const input = downshift.find(Input);
       downshift.setState({ isOpen: true });
-      ['ArrowUp', 'ArrowDown'].forEach(key => {
+      ['ArrowUp', 'ArrowDown'].forEach((key) => {
         const event = getKeyEvent(key);
         input.simulate('keydown', event);
         const nativeEvent = event.nativeEvent as any;
@@ -255,15 +255,15 @@ describe('ExpressionInput', () => {
         const ul = downshift.find('ul');
         expect(ul.prop('className')).toEqual('card list-group');
         const items = ul.find('li');
-        expect(items.map(item => item.text()).join(', ')).toEqual(
+        expect(items.map((item) => item.text()).join(', ')).toEqual(
           'node_cpu_guest_seconds_total, node_cpu_seconds_total, instance:node_cpu_utilisation:rate1m'
         );
       });
     });
   });
 
   it('renders an execute Button', () => {
-    const addon = expressionInput.find(InputGroupAddon).filterWhere(addon => addon.prop('addonType') === 'append');
+    const addon = expressionInput.find(InputGroupAddon).filterWhere((addon) => addon.prop('addonType') === 'append');
     const button = addon.find(Button);
     expect(button.prop('className')).toEqual('execute-btn');
     expect(button.prop('color')).toEqual('primary');

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/Graph.test.tsx

@@ -58,9 +58,9 @@ describe('Graph', () => {
     };
     it('renders a graph with props', () => {
       const graph = shallow(<Graph {...props} />);
-      const div = graph.find('div').filterWhere(elem => elem.prop('className') === 'graph');
+      const div = graph.find('div').filterWhere((elem) => elem.prop('className') === 'graph');
       const resize = div.find(ReactResizeDetector);
-      const innerdiv = div.find('div').filterWhere(elem => elem.prop('className') === 'graph-chart');
+      const innerdiv = div.find('div').filterWhere((elem) => elem.prop('className') === 'graph-chart');
       expect(resize.prop('handleWidth')).toBe(true);
       expect(div).toHaveLength(1);
       expect(innerdiv).toHaveLength(1);
@@ -236,10 +236,7 @@ describe('Graph', () => {
       );
       (graph.instance() as any).plot(); // create chart
       const spyPlotSetAndDraw = jest.spyOn(graph.instance() as any, 'plotSetAndDraw');
-      graph
-        .find('.legend-item')
-        .at(0)
-        .simulate('mouseover');
+      graph.find('.legend-item').at(0).simulate('mouseover');
       expect(spyPlotSetAndDraw).toHaveBeenCalledTimes(1);
     });
     it('should call spyPlotSetAndDraw with chartDate from state as default value', () => {