Chore: Upgrade to react 18 (#64428)

* update react 18 related deps

* fix some types

* make sure we're on react-router-dom >= 5.3.3

* Use new root API

* Remove StrictMode for now - react 18 double rendering causes issues

* fix + ignore some @grafana/ui types

* fix some more types

* use renderHook from @testing-library/react in almost all cases

* fix storybook types

* rewrite useDashboardSave to not use useEffect

* make props optional

* only render if props are provided

* add correct type for useCallback

* make resourcepicker tests more robust

* fix ModalManager rendering

* fix some more unit tests

* store the click coordinates in a ref as setState is NOT synchronous

* fix remaining e2e tests

* rewrite dashboardpage tests to avoid act warnings

* undo lint ignores

* fix ExpanderCell types

* set SymbolCell type correctly

* fix QueryAndExpressionsStep

* looks like the types were actually wrong instead :D

* undo this for now...

* remove spinner waits

* more robust tests

* rewrite errorboundary test to not explicitly count the number of renders

* make urlParam expect async

* increase timeout in waitFor

* revert ExplorePage test changes

* Update public/app/features/dashboard/containers/DashboardPage.test.tsx

Co-authored-by: Alex Khomenko <Clarity-89@users.noreply.github.com>

* Update public/app/features/dashboard/containers/PublicDashboardPage.test.tsx

Co-authored-by: Alex Khomenko <Clarity-89@users.noreply.github.com>

* Update public/app/features/dashboard/containers/PublicDashboardPage.test.tsx

Co-authored-by: Alex Khomenko <Clarity-89@users.noreply.github.com>

* Update public/app/features/dashboard/containers/PublicDashboardPage.test.tsx

Co-authored-by: Alex Khomenko <Clarity-89@users.noreply.github.com>

* skip fakeTimer test, ignore table types for now + other review comments

* update package peerDeps

* small tweak to resourcepicker test

* update lockfile...

* increase timeout in sharepublicdashboard tests

* ensure ExplorePaneContainer passes correct queries to initializeExplore

* fix LokiContextUI test

* fix unit tests

* make importDashboard flow more consistent

* wait for dashboard name before continuing

* more test fixes

* readd dashboard name to variable e2e tests

* wait for switches to be enabled before clicking

* fix modal rendering

* don't use @testing-library/dom directly

* quick fix for rendering of panels in firefox

* make PromQueryField test more robust

* don't wait for chartData - in react 18 this can happen before the wait code even gets executed

---------

Co-authored-by: kay delaney <kay@grafana.com>
Co-authored-by: Alex Khomenko <Clarity-89@users.noreply.github.com>

.github/renovate.json5

@@ -22,16 +22,6 @@
     "@sentry/browser",
     "@sentry/types",
     "@sentry/utils",
-
-    // dep updates blocked by React 18
-    "@testing-library/dom",
-    "@testing-library/react",
-    "@types/react",
-    "@types/react-dom",
-    "@types/react-test-renderer",
-    "react",
-    "react-dom",
-    "react-test-renderer"
   ],
   "includePaths": ["package.json", "packages/**"],
   "ignorePaths": ["packages/grafana-toolkit/package.json", "emails/**", "plugins-bundled/**", "**/mocks/**"],

.yarn/patches/@storybook-addon-docs-npm-6.5.16-56ecbd77e7.patch

@@ -0,0 +1,14 @@
+diff --git a/dist/ts3.9/blocks/DocsContainer.d.ts b/dist/ts3.9/blocks/DocsContainer.d.ts
+index be330e44bebb02eaf2c92d365d4e7dc1da452465..6c8b1d42bea2e184456e2757eb2ee20076ba43b3 100644
+--- a/dist/ts3.9/blocks/DocsContainer.d.ts
++++ b/dist/ts3.9/blocks/DocsContainer.d.ts
+@@ -1,7 +1,8 @@
+-import { FunctionComponent } from 'react';
++import { FunctionComponent, ReactNode } from 'react';
+ import { AnyFramework } from '@storybook/csf';
+ import { DocsContextProps } from './DocsContext';
+ export interface DocsContainerProps<TFramework extends AnyFramework = AnyFramework> {
+     context: DocsContextProps<TFramework>;
++    children?: ReactNode;
+ }
+ export declare const DocsContainer: FunctionComponent<DocsContainerProps>;

.yarn/patches/react-split-pane-npm-0.1.92-93dbf51dff.patch

@@ -0,0 +1,12 @@
+diff --git a/index.d.ts b/index.d.ts
+index d116f54d6da12d24b48e24ff3636c9066059aa58..93290945d8b1818cab893d6466179b33869a47b9 100644
+--- a/index.d.ts
++++ b/index.d.ts
+@@ -25,6 +25,7 @@ export type SplitPaneProps = {
+   pane2Style?: React.CSSProperties;
+   resizerClassName?: string;
+   step?: number;
++  children?: React.ReactNode;
+ };
+
+ export type SplitPaneState = {

e2e/dashboards-suite/Repeating_a_row_with_a_non_repeating_panel.spec.ts

@@ -1,5 +1,6 @@
 import { e2e } from '@grafana/e2e';
 const PAGE_UNDER_TEST = 'k3PEoCpnk/repeating-a-row-with-a-non-repeating-panel-and-horizontal-repeating-panel';
+const DASHBOARD_NAME = 'Repeating a row with a non-repeating panel and horizontal repeating panel';
 
 describe('Repeating a row with repeated panels and a non-repeating panel', () => {
   beforeEach(() => {
@@ -8,6 +9,7 @@ describe('Repeating a row with repeated panels and a non-repeating panel', () =>
 
   it('should be able to collapse and expand a repeated row without losing panels', () => {
     e2e.flows.openDashboard({ uid: PAGE_UNDER_TEST });
+    e2e().contains(DASHBOARD_NAME).should('be.visible');
 
     const panelsToCheck = [
       'Row 2 non-repeating panel',

e2e/dashboards-suite/new-constant-variable.spec.ts

@@ -2,11 +2,13 @@ import { e2e } from '@grafana/e2e';
 import { GrafanaBootConfig } from '@grafana/runtime';
 
 const PAGE_UNDER_TEST = 'kVi2Gex7z/test-variable-output';
+const DASHBOARD_NAME = 'Test variable output';
 
 describe('Variables - Constant', () => {
   it('can add a new constant variable', () => {
     e2e.flows.login('admin', 'admin');
     e2e.flows.openDashboard({ uid: `${PAGE_UNDER_TEST}?orgId=1&editview=templating` });
+    e2e().contains(DASHBOARD_NAME).should('be.visible');
 
     // Create a new "Constant" variable
     e2e.components.CallToActionCard.buttonV2('Add variable').click();
@@ -15,8 +17,8 @@ describe('Variables - Constant', () => {
       e2e().get('input').type('Constant{enter}');
     });
     e2e.pages.Dashboard.Settings.Variables.Edit.General.generalNameInputV2().clear().type('VariableUnderTest').blur();
-    e2e.pages.Dashboard.Settings.Variables.Edit.General.generalLabelInputV2().type('Variable under test').blur();
     e2e.pages.Dashboard.Settings.Variables.Edit.ConstantVariable.constantOptionsQueryInputV2().type('pesto').blur();
+    e2e.pages.Dashboard.Settings.Variables.Edit.General.generalLabelInputV2().type('Variable under test').blur();
 
     e2e.pages.Dashboard.Settings.Variables.Edit.General.previewOfValuesOption().eq(0).should('have.text', 'pesto');
 

e2e/dashboards-suite/new-custom-variable.spec.ts

@@ -2,6 +2,7 @@ import { e2e } from '@grafana/e2e';
 import { GrafanaBootConfig } from '@grafana/runtime';
 
 const PAGE_UNDER_TEST = 'kVi2Gex7z/test-variable-output';
+const DASHBOARD_NAME = 'Test variable output';
 
 function fillInCustomVariable(name: string, label: string, value: string) {
   e2e.pages.Dashboard.Settings.Variables.Edit.General.generalTypeSelectV2().within(() => {
@@ -23,6 +24,7 @@ describe('Variables - Custom', () => {
   it('can add a custom template variable', () => {
     e2e.flows.login('admin', 'admin');
     e2e.flows.openDashboard({ uid: `${PAGE_UNDER_TEST}?orgId=1&editview=templating` });
+    e2e().contains(DASHBOARD_NAME).should('be.visible');
 
     // Create a new "Custom" variable
     e2e.components.CallToActionCard.buttonV2('Add variable').click();
@@ -50,6 +52,7 @@ describe('Variables - Custom', () => {
   it('can add a custom template variable with labels', () => {
     e2e.flows.login('admin', 'admin');
     e2e.flows.openDashboard({ uid: `${PAGE_UNDER_TEST}?orgId=1&editview=templating` });
+    e2e().contains(DASHBOARD_NAME).should('be.visible');
 
     // Create a new "Custom" variable
     e2e.components.CallToActionCard.buttonV2('Add variable').click();

e2e/dashboards-suite/new-datasource-variable.spec.ts

@@ -2,11 +2,13 @@ import { e2e } from '@grafana/e2e';
 import { GrafanaBootConfig } from '@grafana/runtime';
 
 const PAGE_UNDER_TEST = 'kVi2Gex7z/test-variable-output';
+const DASHBOARD_NAME = 'Test variable output';
 
 describe('Variables - Datasource', () => {
   it('can add a new datasource variable', () => {
     e2e.flows.login('admin', 'admin');
     e2e.flows.openDashboard({ uid: `${PAGE_UNDER_TEST}?orgId=1&editview=templating` });
+    e2e().contains(DASHBOARD_NAME).should('be.visible');
 
     // Create a new "Datasource" variable
     e2e.components.CallToActionCard.buttonV2('Add variable').click();

e2e/dashboards-suite/new-interval-variable.spec.ts

@@ -2,6 +2,7 @@ import { e2e } from '@grafana/e2e';
 import { GrafanaBootConfig } from '@grafana/runtime';
 
 const PAGE_UNDER_TEST = 'kVi2Gex7z/test-variable-output';
+const DASHBOARD_NAME = 'Test variable output';
 
 function assertPreviewValues(expectedValues: string[]) {
   for (const expected of expectedValues) {
@@ -14,6 +15,7 @@ describe('Variables - Interval', () => {
   it('can add a new interval variable', () => {
     e2e.flows.login('admin', 'admin');
     e2e.flows.openDashboard({ uid: `${PAGE_UNDER_TEST}?orgId=1&editview=templating` });
+    e2e().contains(DASHBOARD_NAME).should('be.visible');
 
     // Create a new "Interval" variable
     e2e.components.CallToActionCard.buttonV2('Add variable').click();

e2e/dashboards-suite/new-query-variable.spec.ts

@@ -2,11 +2,13 @@ import { e2e } from '@grafana/e2e';
 import { GrafanaBootConfig } from '@grafana/runtime';
 
 const PAGE_UNDER_TEST = '-Y-tnEDWk/templating-nested-template-variables';
+const DASHBOARD_NAME = 'Templating - Nested Template Variables';
 
 describe('Variables - Query - Add variable', () => {
   it('query variable should be default and default fields should be correct', () => {
     e2e.flows.login('admin', 'admin');
     e2e.flows.openDashboard({ uid: `${PAGE_UNDER_TEST}?orgId=1&editview=templating` });
+    e2e().contains(DASHBOARD_NAME).should('be.visible');
 
     e2e.pages.Dashboard.Settings.Variables.List.newButton().should('be.visible').click();
 
@@ -77,6 +79,7 @@ describe('Variables - Query - Add variable', () => {
   it('adding a single value query variable', () => {
     e2e.flows.login('admin', 'admin');
     e2e.flows.openDashboard({ uid: `${PAGE_UNDER_TEST}?orgId=1&editview=templating` });
+    e2e().contains(DASHBOARD_NAME).should('be.visible');
 
     e2e.pages.Dashboard.Settings.Variables.List.newButton().should('be.visible').click();
 
@@ -132,6 +135,7 @@ describe('Variables - Query - Add variable', () => {
   it('adding a multi value query variable', () => {
     e2e.flows.login('admin', 'admin');
     e2e.flows.openDashboard({ uid: `${PAGE_UNDER_TEST}?orgId=1&editview=templating` });
+    e2e().contains(DASHBOARD_NAME).should('be.visible');
 
     e2e.pages.Dashboard.Settings.Variables.List.newButton().should('be.visible').click();
 

e2e/dashboards-suite/new-text-box-variable.spec.ts

@@ -2,11 +2,13 @@ import { e2e } from '@grafana/e2e';
 import { GrafanaBootConfig } from '@grafana/runtime';
 
 const PAGE_UNDER_TEST = 'kVi2Gex7z/test-variable-output';
+const DASHBOARD_NAME = 'Test variable output';
 
 describe('Variables - Text box', () => {
   it('can add a new text box variable', () => {
     e2e.flows.login('admin', 'admin');
     e2e.flows.openDashboard({ uid: `${PAGE_UNDER_TEST}?orgId=1&editview=templating` });
+    e2e().contains(DASHBOARD_NAME).should('be.visible');
 
     // Create a new "text box" variable
     e2e.components.CallToActionCard.buttonV2('Add variable').click();

e2e/various-suite/trace-view-scrolling.spec.ts

@@ -29,7 +29,9 @@ describe('Trace view', () => {
         e2e.pages.Explore.General.scrollView().children('.scrollbar-view').scrollTo('center');
 
         // After scrolling we should load more spans
-        e2e.components.TraceViewer.spanBar().its('length').should('be.gt', oldLength);
+        e2e.components.TraceViewer.spanBar().should(($span) => {
+          expect($span.length).to.be.gt(oldLength);
+        });
       });
   });
 });

package.json

@@ -114,10 +114,9 @@
     "@rtsao/plugin-proposal-class-properties": "7.0.1-patch.1",
     "@swc/core": "1.3.38",
     "@swc/helpers": "0.4.14",
-    "@testing-library/dom": "8.20.0",
+    "@testing-library/dom": "9.0.1",
     "@testing-library/jest-dom": "5.16.5",
-    "@testing-library/react": "12.1.4",
-    "@testing-library/react-hooks": "8.0.1",
+    "@testing-library/react": "14.0.0",
     "@testing-library/user-event": "14.4.3",
     "@types/angular": "1.8.4",
     "@types/angular-route": "1.7.2",
@@ -146,15 +145,15 @@
     "@types/papaparse": "5.3.7",
     "@types/pluralize": "^0.0.29",
     "@types/prismjs": "1.26.0",
-    "@types/react": "17.0.42",
+    "@types/react": "18.0.28",
     "@types/react-beautiful-dnd": "13.1.3",
-    "@types/react-dom": "17.0.14",
+    "@types/react-dom": "18.0.11",
     "@types/react-grid-layout": "1.3.2",
     "@types/react-highlight-words": "0.16.4",
     "@types/react-redux": "7.1.25",
     "@types/react-router-dom": "5.3.3",
     "@types/react-table": "7.7.14",
-    "@types/react-test-renderer": "17.0.1",
+    "@types/react-test-renderer": "18.0.0",
     "@types/react-transition-group": "4.4.5",
     "@types/react-virtualized-auto-sizer": "1.0.1",
     "@types/react-window": "1.8.5",
@@ -226,7 +225,7 @@
     "react-refresh": "0.14.0",
     "react-select-event": "5.5.1",
     "react-simple-compat": "1.2.3",
-    "react-test-renderer": "17.0.2",
+    "react-test-renderer": "18.2.0",
     "redux-mock-store": "1.5.4",
     "rimraf": "4.4.0",
     "rudder-sdk-js": "2.25.0",
@@ -294,6 +293,7 @@
     "@sentry/browser": "6.19.7",
     "@sentry/types": "6.19.7",
     "@sentry/utils": "6.19.7",
+    "@testing-library/react-hooks": "^8.0.1",
     "@types/react-resizable": "3.0.3",
     "@types/webpack-env": "1.18.0",
     "@visx/event": "3.0.1",
@@ -366,11 +366,11 @@
     "rc-time-picker": "3.7.3",
     "rc-tree": "5.7.2",
     "re-resizable": "6.9.9",
-    "react": "17.0.2",
+    "react": "18.2.0",
     "react-awesome-query-builder": "5.4.0",
     "react-beautiful-dnd": "13.1.1",
     "react-diff-viewer": "^3.1.1",
-    "react-dom": "17.0.2",
+    "react-dom": "18.2.0",
     "react-draggable": "4.4.5",
     "react-dropzone": "^14.2.3",
     "react-enable": "^3.1.0",
@@ -385,7 +385,7 @@
     "react-redux": "7.2.6",
     "react-resizable": "3.0.4",
     "react-reverse-portal": "2.1.1",
-    "react-router-dom": "^5.2.0",
+    "react-router-dom": "5.3.3",
     "react-select": "5.7.0",
     "react-split-pane": "0.1.92",
     "react-table": "7.8.0",
@@ -437,7 +437,9 @@
     "@storybook/manager-webpack5/webpack": "5.76.0",
     "ngtemplate-loader/loader-utils": "^2.0.0",
     "trim": "0.0.3",
-    "slate-dev-environment@^0.2.2": "patch:slate-dev-environment@npm:0.2.5#.yarn/patches/slate-dev-environment-npm-0.2.5-9aeb7da7b5.patch"
+    "slate-dev-environment@^0.2.2": "patch:slate-dev-environment@npm:0.2.5#.yarn/patches/slate-dev-environment-npm-0.2.5-9aeb7da7b5.patch",
+    "react-split-pane@0.1.92": "patch:react-split-pane@npm:0.1.92#.yarn/patches/react-split-pane-npm-0.1.92-93dbf51dff.patch",
+    "@storybook/addon-docs@6.5.16": "patch:@storybook/addon-docs@npm:6.5.16#.yarn/patches/@storybook-addon-docs-npm-6.5.16-56ecbd77e7.patch"
   },
   "workspaces": {
     "packages": [

packages/grafana-data/package.json

@@ -63,10 +63,9 @@
     "@rollup/plugin-commonjs": "23.0.2",
     "@rollup/plugin-json": "5.0.1",
     "@rollup/plugin-node-resolve": "15.0.1",
-    "@testing-library/dom": "8.20.0",
+    "@testing-library/dom": "9.0.1",
     "@testing-library/jest-dom": "5.16.5",
-    "@testing-library/react": "12.1.4",
-    "@testing-library/react-hooks": "8.0.1",
+    "@testing-library/react": "14.0.0",
     "@testing-library/user-event": "14.4.3",
     "@types/dompurify": "^2",
     "@types/history": "4.7.11",
@@ -76,15 +75,15 @@
     "@types/marked": "4.0.8",
     "@types/node": "18.14.6",
     "@types/papaparse": "5.3.7",
-    "@types/react": "17.0.42",
-    "@types/react-dom": "17.0.14",
+    "@types/react": "18.0.28",
+    "@types/react-dom": "18.0.11",
     "@types/sinon": "10.0.13",
     "@types/testing-library__jest-dom": "5.14.5",
     "@types/tinycolor2": "1.4.3",
     "esbuild": "0.16.17",
-    "react": "17.0.2",
-    "react-dom": "17.0.2",
-    "react-test-renderer": "17.0.2",
+    "react": "18.2.0",
+    "react-dom": "18.2.0",
+    "react-test-renderer": "18.2.0",
     "rimraf": "4.4.0",
     "rollup": "2.79.1",
     "rollup-plugin-dts": "^5.0.0",
@@ -94,7 +93,7 @@
     "typescript": "4.8.4"
   },
   "peerDependencies": {
-    "react": "^16.8.0 || ^17.0.0",
-    "react-dom": "^16.8.0 || ^17.0.0"
+    "react": "^17.0.0 || ^18.0.0",
+    "react-dom": "^17.0.0 || ^18.0.0"
   }
 }

packages/grafana-e2e/src/flows/configurePanel.ts

@@ -141,7 +141,6 @@ export const configurePanel = (config: PartialAddPanelConfig | PartialEditPanelC
 
     if (queriesForm) {
       queriesForm(fullConfig);
-      e2e().wait('@chartData');
 
       // Wait for a possible complex visualization to render (or something related, as this isn't necessary on the dashboard page)
       // Can't assert that its HTML changed because a new query could produce the same results
@@ -158,8 +157,6 @@ export const configurePanel = (config: PartialAddPanelConfig | PartialEditPanelC
     // Avoid annotations flakiness
     e2e.components.RefreshPicker.runButtonV2().first().click({ force: true });
 
-    e2e().wait('@chartData');
-
     // Wait for RxJS
     e2e().wait(500);
 

packages/grafana-e2e/src/flows/importDashboard.ts

@@ -20,10 +20,9 @@ export const importDashboard = (dashboardToImport: Dashboard, queryTimeout?: num
   e2e().visit(fromBaseUrl('/dashboard/import'));
 
   // Note: normally we'd use 'click' and then 'type' here, but the json object is so big that using 'val' is much faster
-  e2e.components.DashboardImportPage.textarea()
-    .should('be.visible')
-    .click()
-    .invoke('val', JSON.stringify(dashboardToImport));
+  e2e.components.DashboardImportPage.textarea().should('be.visible');
+  e2e.components.DashboardImportPage.textarea().click();
+  e2e.components.DashboardImportPage.textarea().invoke('val', JSON.stringify(dashboardToImport));
   e2e.components.DashboardImportPage.submit().should('be.visible').click();
   e2e.components.ImportDashboardForm.name().should('be.visible').click().clear().type(dashboardToImport.title);
   e2e.components.ImportDashboardForm.submit().should('be.visible').click();

packages/grafana-runtime/package.json

@@ -52,21 +52,20 @@
     "@grafana/tsconfig": "^1.2.0-rc1",
     "@rollup/plugin-commonjs": "23.0.2",
     "@rollup/plugin-node-resolve": "15.0.1",
-    "@testing-library/dom": "8.20.0",
-    "@testing-library/react": "12.1.4",
-    "@testing-library/react-hooks": "8.0.1",
+    "@testing-library/dom": "9.0.1",
+    "@testing-library/react": "14.0.0",
     "@testing-library/user-event": "14.4.3",
     "@types/angular": "1.8.4",
     "@types/history": "4.7.11",
     "@types/jest": "29.2.3",
     "@types/lodash": "4.14.191",
-    "@types/react": "17.0.42",
-    "@types/react-dom": "17.0.14",
+    "@types/react": "18.0.28",
+    "@types/react-dom": "18.0.11",
     "@types/systemjs": "^0.20.6",
     "esbuild": "0.16.17",
     "lodash": "4.17.21",
-    "react": "17.0.2",
-    "react-dom": "17.0.2",
+    "react": "18.2.0",
+    "react-dom": "18.2.0",
     "rimraf": "4.4.0",
     "rollup": "2.79.1",
     "rollup-plugin-dts": "^5.0.0",
@@ -77,7 +76,7 @@
     "typescript": "4.8.4"
   },
   "peerDependencies": {
-    "react": "17.0.2",
-    "react-dom": "17.0.2"
+    "react": "^17.0.0 || ^18.0.0",
+    "react-dom": "^17.0.0 || ^18.0.0"
   }
 }

packages/grafana-runtime/src/analytics/plugins/usePluginInteractionReporter.test.tsx

@@ -1,4 +1,4 @@
-import { renderHook } from '@testing-library/react-hooks';
+import { renderHook } from '@testing-library/react';
 import React from 'react';
 
 import {