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 => {},
-    onExpressionChange: (): void => {},
+    executeQuery: (): void => {
+      // Do nothing.
+    },
+    onExpressionChange: (): void => {
+      // Do nothing.
+    },
     loading: false,
   };
 

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

@@ -77,8 +77,7 @@ class ExpressionInput extends Component<ExpressionInputProps, ExpressionInputSta
     const { autocompleteSections } = this.props;
     let index = 0;
     const sections = inputValue!.length
-      ? Object.entries(autocompleteSections).reduce(
-          (acc, [title, items]) => {
+      ? Object.entries(autocompleteSections).reduce((acc, [title, items]) => {
           const matches = this.getSearchMatches(inputValue!, items);
           return !matches.length
             ? acc
@@ -107,9 +106,7 @@ class ExpressionInput extends Component<ExpressionInputProps, ExpressionInputSta
                     })}
                 </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 => {},
-  onChangeEndTime: (): void => {},
-  onChangeResolution: (): void => {},
-  onChangeStacking: (): void => {},
+  onChangeRange: (): void => {
+    // Do nothing.
+  },
+  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 => {},
-  onExecuteQuery: (): void => {},
+  removePanel: (): void => {
+    // Do nothing.
+  },
+  onExecuteQuery: (): void => {
+    // Do nothing.
+  },
 };
 
 describe('Panel', () => {
@@ -51,8 +57,10 @@ 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 },
+      { panelType: 'Graph', active: false },
+    ].forEach((tc: { panelType: string; active: boolean }, i: number) => {
       const link = links.at(i);
       const className = tc.active ? 'active' : '';
       expect(link.prop('className')).toEqual(className);
@@ -60,8 +68,7 @@ describe('Panel', () => {
       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,8 +101,10 @@ 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 },
+      { from: PanelType.Graph, to: PanelType.Table },
+    ].forEach(({ from, to }: { from: PanelType; to: PanelType }) => {
       it(`${from} -> ${to} nulls out data`, () => {
         const props = {
           ...defaultProps,
@@ -108,8 +117,7 @@ describe('Panel', () => {
         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: