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>
2022-03-05 19:45:55 +00:00 · 2022-03-05 19:45:55 +00:00 · 4e3b6fc043
parent edfe657b54
commit 4e3b6fc043
13 changed files with 22257 additions and 33148 deletions
--- a/web/ui/package-lock.json
+++ b/web/ui/package-lock.json
--- a/web/ui/react-app/package.json
+++ b/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/free-solid-svg-icons": "^5.7.2",
-    "@fortawesome/react-fontawesome": "^0.1.16",
+    "@fortawesome/fontawesome-svg-core": "1.3.0",
+    "@fortawesome/free-solid-svg-icons": "6.0.0",
+    "@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-react-app": "^6.0.0",
+    "eslint-config-prettier": "^8.5.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"
  },
--- a/web/ui/react-app/src/App.test.tsx
+++ b/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);
--- a/web/ui/react-app/src/Navbar.test.tsx
+++ b/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>
--- a/web/ui/react-app/src/components/CustomInfiniteScroll.tsx
+++ b/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);
--- a/web/ui/react-app/src/pages/flags/snapshots/Flags.test.tsx.snap
+++ b/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",
--- a/web/ui/react-app/src/pages/graph/ExpressionInput.tsx
+++ b/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();

--- a/web/ui/react-app/src/pages/graph/GraphControls.test.tsx
+++ b/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();
--- a/web/ui/react-app/src/pages/graph/GraphHelpers.test.ts
+++ b/web/ui/react-app/src/pages/graph/GraphHelpers.test.ts
@ -65,11 +65,7 @@ describe('GraphHelpers', () => {
      });
    });
    it('should throw error if no match', () => {
-      try {
-        formatValue(undefined as any);
-      } catch (error) {
-        expect(error.message).toEqual("couldn't format a value, this is a bug");
-      }
+      expect(() => formatValue(undefined as any)).toThrowError("couldn't format a value, this is a bug");
    });
  });
  describe('parseValue', () => {
--- a/web/ui/react-app/src/pages/graph/Panel.test.tsx
+++ b/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);
--- a/web/ui/react-app/src/pages/graph/TimeInput.test.tsx
+++ b/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"', () => {
--- a/web/ui/react-app/src/pages/targets/Targets.test.tsx
+++ b/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 = {
-    pathPrefix: '..',
-  };
-  const targets = shallow(<Targets {...defaultProps} />);
+  const targets = shallow(<Targets />);
  describe('Header', () => {
    const h2 = targets.find('h2');
    it('renders a header', () => {
--- a/web/ui/react-app/src/pages/targets/testdata/testdata.ts
+++ b/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[],
  },
 });