Update React vendoring (#6855)

* Update React vendoring

Update webpack-scripts to 3.4.0
* Fix security warning for `serialize-javascript`.

Signed-off-by: Ben Kochie <superq@gmail.com>

* Fix eslint errors.

Signed-off-by: Ben Kochie <superq@gmail.com>

* Update test snapshot.

Signed-off-by: Ben Kochie <superq@gmail.com>

web/ui/react-app/package.json

@@ -34,7 +34,7 @@
     "react-copy-to-clipboard": "^5.0.1",
     "react-dom": "^16.7.0",
     "react-resize-detector": "^4.2.1",
-    "react-scripts": "^3.2.0",
+    "react-scripts": "^3.4.0",
     "react-test-renderer": "^16.9.0",
     "reactstrap": "^8.0.1",
     "sanitize-html": "^1.20.1",

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

@@ -10,7 +10,9 @@ const getKeyEvent = (key: string): React.KeyboardEvent<HTMLInputElement> =>
   ({
     key,
     nativeEvent: {},
-    preventDefault: () => {},
+    preventDefault: () => {
+      // Do nothing.
+    },
   } as React.KeyboardEvent<HTMLInputElement>);
 
 describe('ExpressionInput', () => {
@@ -21,8 +23,12 @@ describe('ExpressionInput', () => {
       'Query History': [],
       'Metric Names': metricNames,
     },
-    executeQuery: (): void => {},
+    executeQuery: (): void => {
-    onExpressionChange: (): void => {},
+      // Do nothing.
+    },
+    onExpressionChange: (): void => {
+      // Do nothing.
+    },
     loading: false,
   };
 

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

@@ -77,39 +77,36 @@ class ExpressionInput extends Component<ExpressionInputProps, ExpressionInputSta
     const { autocompleteSections } = this.props;
     let index = 0;
     const sections = inputValue!.length
-      ? Object.entries(autocompleteSections).reduce(
+      ? Object.entries(autocompleteSections).reduce((acc, [title, items]) => {
-          (acc, [title, items]) => {
+          const matches = this.getSearchMatches(inputValue!, items);
-            const matches = this.getSearchMatches(inputValue!, items);
+          return !matches.length
-            return !matches.length
+            ? acc
-              ? acc
+            : [
-              : [
+                ...acc,
-                  ...acc,
+                <ul className="autosuggest-dropdown-list" key={title}>
-                  <ul className="autosuggest-dropdown-list" key={title}>
+                  <li className="autosuggest-dropdown-header">{title}</li>
-                    <li className="autosuggest-dropdown-header">{title}</li>
+                  {matches
-                    {matches
+                    .slice(0, 100) // Limit DOM rendering to 100 results, as DOM rendering is sloooow.
-                      .slice(0, 100) // Limit DOM rendering to 100 results, as DOM rendering is sloooow.
+                    .map(({ original, string: text }) => {
-                      .map(({ original, string: text }) => {
+                      const itemProps = downshift.getItemProps({
-                        const itemProps = downshift.getItemProps({
+                        key: original,
-                          key: original,
+                        index,
-                          index,
+                        item: original,
-                          item: original,
+                        style: {
-                          style: {
+                          backgroundColor: highlightedIndex === index++ ? 'lightgray' : 'white',
-                            backgroundColor: highlightedIndex === index++ ? 'lightgray' : 'white',
+                        },
-                          },
+                      });
-                        });
+                      return (
-                        return (
+                        <li
-                          <li
+                          key={title}
-                            key={title}
+                          {...itemProps}
-                            {...itemProps}
+                          dangerouslySetInnerHTML={{ __html: sanitizeHTML(text, { allowedTags: ['strong'] }) }}
-                            dangerouslySetInnerHTML={{ __html: sanitizeHTML(text, { allowedTags: ['strong'] }) }}
+                        />
-                          />
+                      );
-                        );
+                    })}
-                      })}
+                </ul>,
-                  </ul>,
+              ];
-                ];
+        }, [] as JSX.Element[])
-          },
-          [] as JSX.Element[]
-        )
       : [];
 
     if (!sections.length) {

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

@@ -225,7 +225,12 @@ describe('Graph', () => {
               endTime: 1572128598,
               resolution: 28,
             },
-            data: { result: [{ values: [], metric: {} }, { values: [], metric: {} }] },
+            data: {
+              result: [
+                { values: [], metric: {} },
+                { values: [], metric: {} },
+              ],
+            },
           } as any)}
         />
       );
@@ -251,7 +256,12 @@ describe('Graph', () => {
               endTime: 1572128598,
               resolution: 28,
             },
-            data: { result: [{ values: [], metric: {} }, { values: [], metric: {} }] },
+            data: {
+              result: [
+                { values: [], metric: {} },
+                { values: [], metric: {} },
+              ],
+            },
           } as any)}
         />
       );

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

@@ -12,10 +12,18 @@ const defaultGraphControlProps = {
   resolution: 10,
   stacked: false,
 
-  onChangeRange: (): void => {},
+  onChangeRange: (): void => {
-  onChangeEndTime: (): void => {},
+    // Do nothing.
-  onChangeResolution: (): void => {},
+  },
-  onChangeStacking: (): void => {},
+  onChangeEndTime: (): void => {
+    // Do nothing.
+  },
+  onChangeResolution: (): void => {
+    // Do nothing.
+  },
+  onChangeStacking: (): void => {
+    // Do nothing.
+  },
 };
 
 describe('GraphControls', () => {

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

@@ -17,15 +17,21 @@ const defaultProps = {
     resolution: 28,
     stacked: false,
   },
-  onOptionsChanged: (): void => {},
+  onOptionsChanged: (): void => {
+    // Do nothing.
+  },
   pastQueries: [],
   metricNames: [
     'prometheus_engine_queries',
     'prometheus_engine_queries_concurrent_max',
     'prometheus_engine_query_duration_seconds',
   ],
-  removePanel: (): void => {},
+  removePanel: (): void => {
-  onExecuteQuery: (): void => {},
+    // Do nothing.
+  },
+  onExecuteQuery: (): void => {
+    // Do nothing.
+  },
 };
 
 describe('Panel', () => {
@@ -51,17 +57,18 @@ describe('Panel', () => {
     };
     const panel = shallow(<Panel {...defaultProps} onOptionsChanged={onOptionsChanged} />);
     const links = panel.find(NavLink);
-    [{ panelType: 'Table', active: true }, { panelType: 'Graph', active: false }].forEach(
+    [
-      (tc: { panelType: string; active: boolean }, i: number) => {
+      { panelType: 'Table', active: true },
-        const link = links.at(i);
+      { panelType: 'Graph', active: false },
-        const className = tc.active ? 'active' : '';
+    ].forEach((tc: { panelType: string; active: boolean }, i: number) => {
-        expect(link.prop('className')).toEqual(className);
+      const link = links.at(i);
-        link.simulate('click');
+      const className = tc.active ? 'active' : '';
-        expect(results).toHaveLength(1);
+      expect(link.prop('className')).toEqual(className);
-        expect(results[0].type).toEqual(tc.panelType.toLowerCase());
+      link.simulate('click');
-        results.pop();
+      expect(results).toHaveLength(1);
-      }
+      expect(results[0].type).toEqual(tc.panelType.toLowerCase());
-    );
+      results.pop();
+    });
   });
 
   it('renders a TabPane with a TimeInput and a DataTable when in table mode', () => {
@@ -94,22 +101,23 @@ describe('Panel', () => {
   });
 
   describe('when switching between modes', () => {
-    [{ from: PanelType.Table, to: PanelType.Graph }, { from: PanelType.Graph, to: PanelType.Table }].forEach(
+    [
-      ({ from, to }: { from: PanelType; to: PanelType }) => {
+      { from: PanelType.Table, to: PanelType.Graph },
-        it(`${from} -> ${to} nulls out data`, () => {
+      { from: PanelType.Graph, to: PanelType.Table },
-          const props = {
+    ].forEach(({ from, to }: { from: PanelType; to: PanelType }) => {
-            ...defaultProps,
+      it(`${from} -> ${to} nulls out data`, () => {
-            options: { ...defaultProps.options, type: from },
+        const props = {
-          };
+          ...defaultProps,
-          const panel = shallow(<Panel {...props} />);
+          options: { ...defaultProps.options, type: from },
-          const instance: any = panel.instance();
+        };
-          panel.setState({ data: 'somedata' });
+        const panel = shallow(<Panel {...props} />);
-          expect(panel.state('data')).toEqual('somedata');
+        const instance: any = panel.instance();
-          instance.handleChangeType(to);
+        panel.setState({ data: 'somedata' });
-          expect(panel.state('data')).toBeNull();
+        expect(panel.state('data')).toEqual('somedata');
-        });
+        instance.handleChangeType(to);
-      }
+        expect(panel.state('data')).toBeNull();
-    );
+      });
+    });
   });
 
   describe('when changing query then time', () => {

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

@@ -60,7 +60,10 @@ export const PanelListContent: FC<PanelListProps> = ({
   };
 
   const addPanel = () => {
-    callAll(setPanels, updateURL)([
+    callAll(
+      setPanels,
+      updateURL
+    )([
       ...panels,
       {
         id: generateID(),
@@ -81,7 +84,10 @@ export const PanelListContent: FC<PanelListProps> = ({
             callAll(setPanels, updateURL)(panels.map(p => (id === p.id ? { ...p, options: opts } : p)))
           }
           removePanel={() =>
-            callAll(setPanels, updateURL)(
+            callAll(
+              setPanels,
+              updateURL
+            )(
               panels.reduce<PanelMeta[]>(
                 (acc, panel) => (panel.id !== id ? [...acc, { ...panel, key: `${acc.length}` }] : acc),
                 []

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

@@ -11,7 +11,9 @@ describe('TimeInput', () => {
     time: 1572102237932,
     range: 60 * 60 * 7,
     placeholder: 'time input',
-    onChangeTime: (): void => {},
+    onChangeTime: (): void => {
+      // Do nothing.
+    },
   };
   const timeInput = shallow(<TimeInput {...timeInputProps} />);
   it('renders the string "scalar"', () => {

web/ui/react-app/src/pages/targets/__snapshots__/TargetLabels.test.tsx.snap

@@ -47,7 +47,7 @@ exports[`targetLabels renders discovered labels 1`] = `
     }
     target="series-labels-cortex\\\\/node-exporter_group\\\\/0-1"
     toggle={[Function]}
-    trigger="click hover focus"
+    trigger="hover focus"
   >
     <b>
       Before relabeling: