Upgrade create-react-app to v5 (#10396)

* Upgrade create-react-app to v5

Some other dependencies needs to be upgraded as well, plus some typescript errors fixed.

Signed-off-by: Łukasz Mierzwa <l.mierzwa@gmail.com>

* Use ESM imports for codemirror-promql

Signed-off-by: Łukasz Mierzwa <l.mierzwa@gmail.com>

* Update FontAwesome to v6

Signed-off-by: Łukasz Mierzwa <l.mierzwa@gmail.com>

web/ui/react-app/package.json

@@ -16,9 +16,9 @@
     "@codemirror/state": "^0.19.6",
     "@codemirror/view": "^0.19.27",
     "@forevolve/bootstrap-dark": "^1.0.0",
-    "@fortawesome/fontawesome-svg-core": "^1.2.36",
+    "@fortawesome/fontawesome-svg-core": "1.3.0",
-    "@fortawesome/free-solid-svg-icons": "^5.7.2",
+    "@fortawesome/free-solid-svg-icons": "6.0.0",
-    "@fortawesome/react-fontawesome": "^0.1.16",
+    "@fortawesome/react-fontawesome": "0.1.17",
     "@nexucis/fuzzy": "^0.3.0",
     "@nexucis/kvsearch": "^0.5.0",
     "bootstrap": "^4.6.1",
@@ -82,14 +82,14 @@
     "@wojtekmaj/enzyme-adapter-react-17": "^0.6.6",
     "enzyme": "^3.11.0",
     "enzyme-to-json": "^3.6.2",
-    "eslint-config-prettier": "^8.3.0",
+    "eslint-config-prettier": "^8.5.0",
-    "eslint-config-react-app": "^6.0.0",
+    "eslint-config-react-app": "^7.0.0",
     "eslint-plugin-prettier": "^4.0.0",
     "jest-canvas-mock": "^2.3.1",
     "jest-fetch-mock": "^3.0.3",
     "mutationobserver-shim": "^0.3.7",
     "prettier": "^2.5.1",
-    "react-scripts": "4.0.3",
+    "react-scripts": "5.0.0",
     "sinon": "^12.0.1",
     "typescript": "^4.5.2"
   },

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

@@ -18,7 +18,7 @@ import {
 } from './pages';
 
 describe('App', () => {
-  const app = shallow(<App />);
+  const app = shallow(<App consolesLink={null} agentMode={false} />);
 
   it('navigates', () => {
     expect(app.find(Navigation)).toHaveLength(1);

web/ui/react-app/src/Navbar.test.tsx

@@ -5,7 +5,7 @@ import { NavItem, NavLink } from 'reactstrap';
 
 describe('Navbar should contain console Link', () => {
   it('with non-empty consoleslink', () => {
-    const app = shallow(<Navigation pathPrefix="/path/prefix" consolesLink="/path/consoles" />);
+    const app = shallow(<Navigation consolesLink="/path/consoles" agentMode={false} />);
     expect(
       app.contains(
         <NavItem>
@@ -18,7 +18,7 @@ describe('Navbar should contain console Link', () => {
 
 describe('Navbar should not contain consoles link', () => {
   it('with empty string in consolesLink', () => {
-    const app = shallow(<Navigation pathPrefix="/path/prefix" consolesLink={null} />);
+    const app = shallow(<Navigation consolesLink={null} agentMode={false} />);
     expect(
       app.contains(
         <NavItem>

web/ui/react-app/src/components/CustomInfiniteScroll.tsx

@@ -13,7 +13,7 @@ interface CustomInfiniteScrollProps<T> {
 }
 
 // eslint-disable-next-line @typescript-eslint/explicit-module-boundary-types
-const CustomInfiniteScroll = <T extends unknown>({ allItems, child }: CustomInfiniteScrollProps<T>) => {
+const CustomInfiniteScroll = <T,>({ allItems, child }: CustomInfiniteScrollProps<T>) => {
   const [items, setItems] = useState<T[]>(allItems.slice(0, 50));
   const [index, setIndex] = useState<number>(initialNumberOfItemsDisplayed);
   const [hasMore, setHasMore] = useState<boolean>(allItems.length > initialNumberOfItemsDisplayed);

web/ui/react-app/src/pages/flags/__snapshots__/Flags.test.tsx.snap

@@ -52,9 +52,11 @@ exports[`Flags should match snapshot 1`] = `
                 "icon": Array [
                   320,
                   512,
-                  Array [],
+                  Array [
+                    "sort-desc",
+                  ],
                   "f0dd",
-                  "M41 288h238c21.4 0 32.1 25.9 17 41L177 448c-9.4 9.4-24.6 9.4-33.9 0L24 329c-15.1-15.1-4.4-41 17-41z",
+                  "M311.9 335.1l-132.4 136.8C174.1 477.3 167.1 480 160 480c-7.055 0-14.12-2.702-19.47-8.109l-132.4-136.8C-9.229 317.8 3.055 288 27.66 288h264.7C316.9 288 329.2 317.8 311.9 335.1z",
                 ],
                 "iconName": "sort-down",
                 "prefix": "fas",
@@ -99,9 +101,11 @@ exports[`Flags should match snapshot 1`] = `
                 "icon": Array [
                   320,
                   512,
-                  Array [],
+                  Array [
+                    "unsorted",
+                  ],
                   "f0dc",
-                  "M41 288h238c21.4 0 32.1 25.9 17 41L177 448c-9.4 9.4-24.6 9.4-33.9 0L24 329c-15.1-15.1-4.4-41 17-41zm255-105L177 64c-9.4-9.4-24.6-9.4-33.9 0L24 183c-15.1 15.1-4.4 41 17 41h238c21.4 0 32.1-25.9 17-41z",
+                  "M27.66 224h264.7c24.6 0 36.89-29.78 19.54-47.12l-132.3-136.8c-5.406-5.406-12.47-8.107-19.53-8.107c-7.055 0-14.09 2.701-19.45 8.107L8.119 176.9C-9.229 194.2 3.055 224 27.66 224zM292.3 288H27.66c-24.6 0-36.89 29.77-19.54 47.12l132.5 136.8C145.9 477.3 152.1 480 160 480c7.053 0 14.12-2.703 19.53-8.109l132.3-136.8C329.2 317.8 316.9 288 292.3 288z",
                 ],
                 "iconName": "sort",
                 "prefix": "fas",

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

@@ -20,7 +20,7 @@ import MetricsExplorer from './MetricsExplorer';
 import { usePathPrefix } from '../../contexts/PathPrefixContext';
 import { useTheme } from '../../contexts/ThemeContext';
 import { CompleteStrategy, PromQLExtension } from 'codemirror-promql';
-import { newCompleteStrategy } from 'codemirror-promql/dist/cjs/complete';
+import { newCompleteStrategy } from 'codemirror-promql/dist/esm/complete';
 
 const promqlExtension = new PromQLExtension();
 

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

@@ -9,6 +9,7 @@ import TimeInput from './TimeInput';
 const defaultGraphControlProps = {
   range: 60 * 60 * 24 * 1000,
   endTime: 1572100217898,
+  useLocalTime: false,
   resolution: 10,
   stacked: false,
   showExemplars: false,
@@ -170,7 +171,7 @@ describe('GraphControls', () => {
       const btn = group.find(Button).filterWhere((btn) => btn.prop('title') === testCase.title);
       const onClick = btn.prop('onClick');
       if (onClick) {
-        onClick({} as React.MouseEvent);
+        btn.simulate('click');
         expect(results).toHaveLength(1);
         expect(results[0]).toBe(!testCase.active);
         results.pop();

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

@@ -65,11 +65,7 @@ describe('GraphHelpers', () => {
       });
     });
     it('should throw error if no match', () => {
-      try {
+      expect(() => formatValue(undefined as any)).toThrowError("couldn't format a value, this is a bug");
-        formatValue(undefined as any);
-      } catch (error) {
-        expect(error.message).toEqual("couldn't format a value, this is a bug");
-      }
     });
   });
   describe('parseValue', () => {

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

@@ -15,10 +15,12 @@ const defaultProps = {
     endTime: 1572100217898,
     resolution: 28,
     stacked: false,
+    showExemplars: true,
   },
   onOptionsChanged: (): void => {
     // Do nothing.
   },
+  useLocalTime: false,
   pastQueries: [],
   metricNames: [
     'prometheus_engine_queries',
@@ -31,7 +33,11 @@ const defaultProps = {
   onExecuteQuery: (): void => {
     // Do nothing.
   },
+  pathPrefix: '/',
   enableAutocomplete: true,
+  enableHighlighting: true,
+  enableLinter: true,
+  id: 'panel',
 };
 
 describe('Panel', () => {
@@ -79,6 +85,7 @@ describe('Panel', () => {
       endTime: 1572100217898,
       resolution: 28,
       stacked: false,
+      showExemplars: true,
     };
     const graphPanel = mount(<Panel {...defaultProps} options={options} />);
     const controls = graphPanel.find(GraphControls);

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

@@ -14,6 +14,7 @@ describe('TimeInput', () => {
     onChangeTime: (): void => {
       // Do nothing.
     },
+    useLocalTime: false,
   };
   const timeInput = shallow(<TimeInput {...timeInputProps} />);
   it('renders the string "scalar"', () => {

web/ui/react-app/src/pages/targets/Targets.test.tsx

@@ -4,10 +4,7 @@ import Targets from './Targets';
 import ScrapePoolList from './ScrapePoolList';
 
 describe('Targets', () => {
-  const defaultProps = {
+  const targets = shallow(<Targets />);
-    pathPrefix: '..',
-  };
-  const targets = shallow(<Targets {...defaultProps} />);
   describe('Header', () => {
     const h2 = targets.find('h2');
     it('renders a header', () => {

web/ui/react-app/src/pages/targets/__testdata__/testdata.ts

@@ -1,4 +1,4 @@
-import { ScrapePools } from '../target';
+import { ScrapePools, Target } from '../target';
 
 export const targetGroups: ScrapePools = Object.freeze({
   blackbox: {
@@ -70,7 +70,7 @@ export const targetGroups: ScrapePools = Object.freeze({
         scrapeInterval: '15s',
         scrapeTimeout: '500ms',
       },
-    ],
+    ] as Target[],
   },
   node_exporter: {
     upCount: 1,
@@ -96,7 +96,7 @@ export const targetGroups: ScrapePools = Object.freeze({
         scrapeInterval: '15s',
         scrapeTimeout: '500ms',
       },
-    ],
+    ] as Target[],
   },
   prometheus: {
     upCount: 1,
@@ -122,7 +122,7 @@ export const targetGroups: ScrapePools = Object.freeze({
         scrapeInterval: '15s',
         scrapeTimeout: '500ms',
       },
-    ],
+    ] as Target[],
   },
 });
 
@@ -148,6 +148,9 @@ export const sampleApiResponse = Object.freeze({
         lastScrape: '2019-11-04T11:52:14.759299-07:00',
         lastScrapeDuration: 36560147,
         health: 'up',
+        globalUrl: 'http://localhost.localdomain:9000/metrics',
+        scrapeInterval: '15s',
+        scrapeTimeout: '500ms',
       },
       {
         discoveredLabels: {
@@ -167,6 +170,9 @@ export const sampleApiResponse = Object.freeze({
         lastScrape: '2019-11-04T11:52:24.731096-07:00',
         lastScrapeDuration: 49448763,
         health: 'up',
+        globalUrl: 'http://localhost.localdomain:9000/metrics',
+        scrapeInterval: '15s',
+        scrapeTimeout: '500ms',
       },
       {
         discoveredLabels: {
@@ -186,6 +192,9 @@ export const sampleApiResponse = Object.freeze({
         lastScrape: '2019-11-04T11:52:13.516654-07:00',
         lastScrapeDuration: 120916592,
         health: 'up',
+        globalUrl: 'http://localhost.localdomain:9000/metrics',
+        scrapeInterval: '15s',
+        scrapeTimeout: '500ms',
       },
       {
         discoveredLabels: {
@@ -204,6 +213,9 @@ export const sampleApiResponse = Object.freeze({
         lastScrape: '2019-11-04T11:52:14.145703-07:00',
         lastScrapeDuration: 3842307,
         health: 'up',
+        globalUrl: 'http://localhost.localdomain:9000/metrics',
+        scrapeInterval: '15s',
+        scrapeTimeout: '500ms',
       },
       {
         discoveredLabels: {
@@ -222,7 +234,10 @@ export const sampleApiResponse = Object.freeze({
         lastScrape: '2019-11-04T11:52:18.479731-07:00',
         lastScrapeDuration: 4050976,
         health: 'up',
+        globalUrl: 'http://localhost.localdomain:9000/metrics',
+        scrapeInterval: '15s',
+        scrapeTimeout: '500ms',
       },
-    ],
+    ] as Target[],
   },
 });