Chore: Revert React 16.9.0 bump (#18634)

Since React and other dependencies bump caused some troubles with building packages that @kaydelaney and me tried to debug without any success, we decided to revert React 16.9.0 bump.

.circleci/config.yml

@@ -660,6 +660,19 @@ jobs:
               echo "-- no changes to docs files --"
             fi
 
+  build-grafana-packages:
+    docker:
+      - image: circleci/node:10
+    steps:
+      - checkout
+      - run:
+          name: Boostrap lerna
+          command: 'npx lerna bootstrap'
+      - run:
+          name: Build packages
+          command: yarn packages:build
+
+
   release-next-packages:
     docker:
       - image: circleci/node:10
@@ -835,6 +848,8 @@ workflows:
             filters: *filter-not-release-or-master
         - build-fast-frontend:
             filters: *filter-not-release-or-master
+        - build-grafana-packages:
+            filters: *filter-not-release-or-master
         - build-fast-package:
             filters: *filter-not-release-or-master
             requires:

package.json

@@ -16,27 +16,42 @@
     "@babel/preset-typescript": "7.3.3",
     "@emotion/core": "10.0.10",
     "@rtsao/plugin-proposal-class-properties": "7.0.1-patch.1",
-    "@types/angular": "1.6.55",
+    "@types/angular": "1.6.56",
+    "@types/angular-route": "1.7.0",
     "@types/classnames": "2.2.7",
     "@types/clipboard": "2.0.1",
     "@types/d3": "4.13.1",
+    "@types/d3-scale-chromatic": "1.3.1",
     "@types/enzyme": "3.9.0",
+    "@types/enzyme-adapter-react-16": "1.0.5",
     "@types/expect-puppeteer": "3.3.1",
+    "@types/file-saver": "2.0.1",
     "@types/jest": "24.0.13",
     "@types/jquery": "1.10.35",
     "@types/lodash": "4.14.123",
+    "@types/marked": "0.6.5",
+    "@types/mousetrap": "1.6.3",
     "@types/node": "11.13.4",
     "@types/papaparse": "4.5.9",
     "@types/pixelmatch": "4.0.0",
     "@types/pngjs": "3.3.2",
+    "@types/prismjs": "1.16.0",
     "@types/puppeteer-core": "1.9.0",
-    "@types/react": "16.9.1",
+    "@types/react": "16.8.16",
-    "@types/react-dom": "16.8.5",
+    "@types/react-dom": "16.8.4",
     "@types/react-grid-layout": "0.16.7",
+    "@types/react-redux": "7.0.8",
     "@types/react-select": "2.0.15",
-    "@types/react-transition-group": "4.2.2",
+    "@types/react-table": "6.8.5",
-    "@types/react-virtualized": "9.21.4",
+    "@types/react-test-renderer": "16.8.2",
-    "@types/react-window": "1.8.1",
+    "@types/react-transition-group": "2.0.16",
+    "@types/react-virtualized": "9.18.12",
+    "@types/react-window": "1.7.0",
+    "@types/redux-logger": "3.0.7",
+    "@types/redux-mock-store": "1.0.1",
+    "@types/reselect": "2.2.0",
+    "@types/slate": "0.44.11",
+    "@types/tinycolor2": "1.4.2",
     "angular-mocks": "1.6.6",
     "autoprefixer": "9.5.0",
     "axios": "0.19.0",
@@ -98,8 +113,9 @@
     "postcss-reporter": "6.0.1",
     "prettier": "1.16.4",
     "puppeteer-core": "1.15.0",
+    "react-hooks-testing-library": "0.3.7",
     "react-hot-loader": "4.8.0",
-    "react-test-renderer": "16.9.0",
+    "react-test-renderer": "16.8.4",
     "redux-mock-store": "1.5.3",
     "regexp-replace-loader": "1.0.1",
     "rimraf": "2.6.3",
@@ -170,23 +186,7 @@
   },
   "dependencies": {
     "@babel/polyfill": "7.2.5",
-    "@testing-library/react-hooks": "2.0.1",
     "@torkelo/react-select": "2.4.1",
-    "@types/angular-route": "1.7.0",
-    "@types/d3-scale-chromatic": "1.3.1",
-    "@types/enzyme-adapter-react-16": "1.0.5",
-    "@types/file-saver": "2.0.1",
-    "@types/marked": "0.6.5",
-    "@types/mousetrap": "1.6.3",
-    "@types/prismjs": "1.16.0",
-    "@types/react-redux": "7.1.1",
-    "@types/react-table": "6.8.5",
-    "@types/react-test-renderer": "16.9.0",
-    "@types/redux-logger": "3.0.7",
-    "@types/redux-mock-store": "1.0.1",
-    "@types/reselect": "2.2.0",
-    "@types/slate": "0.44.11",
-    "@types/tinycolor2": "1.4.2",
     "angular": "1.6.6",
     "angular-bindonce": "0.3.1",
     "angular-native-dragdrop": "1.2.2",
@@ -214,19 +214,19 @@
     "prismjs": "1.16.0",
     "prop-types": "15.7.2",
     "rc-cascader": "0.14.0",
-    "react": "16.9.0",
+    "react": "16.8.6",
-    "react-dom": "16.9.0",
+    "react-dom": "16.8.6",
     "react-grid-layout": "0.16.6",
-    "react-highlight-words": "0.16.0",
+    "react-highlight-words": "0.11.0",
-    "react-popper": "1.3.4",
+    "react-popper": "1.3.3",
-    "react-redux": "7.1.0",
+    "react-redux": "5.1.1",
-    "react-sizeme": "2.6.7",
+    "react-sizeme": "2.5.2",
-    "react-table": "6.10.0",
+    "react-table": "6.9.2",
-    "react-transition-group": "4.2.2",
+    "react-transition-group": "2.6.1",
-    "react-use": "10.5.0",
+    "react-use": "9.0.0",
-    "react-virtualized": "9.21.1",
+    "react-virtualized": "9.21.0",
-    "react-window": "1.8.5",
+    "react-window": "1.7.1",
-    "redux": "4.0.4",
+    "redux": "4.0.1",
     "redux-logger": "3.0.6",
     "redux-observable": "1.1.0",
     "redux-thunk": "2.3.0",

packages/grafana-data/package.json

@@ -26,7 +26,7 @@
     "@types/node": "10.14.1",
     "@types/papaparse": "4.5.9",
     "@types/pretty-format": "20.0.1",
-    "@types/react": "16.9.1",
+    "@types/react": "16.8.16",
     "@types/sinon": "^7.0.11",
     "awesome-typescript-loader": "^5.2.1",
     "lodash": "^4.17.10",

packages/grafana-ui/package.json

@@ -34,11 +34,11 @@
     "lodash": "4.17.14",
     "moment": "2.24.0",
     "papaparse": "4.6.3",
-    "react": "16.9.0",
+    "react": "16.8.6",
     "react-calendar": "2.18.1",
     "react-color": "2.17.0",
     "react-custom-scrollbars": "4.2.1",
-    "react-dom": "16.9.0",
+    "react-dom": "16.8.6",
     "react-highlight-words": "0.11.0",
     "react-popper": "1.3.3",
     "react-storybook-addon-props-combinations": "1.1.0",
@@ -60,10 +60,9 @@
     "@types/node": "10.14.1",
     "@types/papaparse": "4.5.9",
     "@types/pretty-format": "20.0.1",
-    "@types/react": "16.9.1",
+    "@types/react": "16.8.16",
     "@types/react-custom-scrollbars": "4.0.5",
-    "@types/react-dom": "16.8.5",
+    "@types/react-test-renderer": "16.8.1",
-    "@types/react-test-renderer": "16.9.0",
     "@types/react-transition-group": "2.0.16",
     "@types/storybook__addon-actions": "3.4.2",
     "@types/storybook__addon-info": "4.1.1",
@@ -74,7 +73,7 @@
     "pretty-format": "24.5.0",
     "react-docgen-typescript-loader": "3.0.1",
     "react-docgen-typescript-webpack-plugin": "1.1.0",
-    "react-test-renderer": "16.9.0",
+    "react-test-renderer": "16.8.4",
     "rollup": "1.6.0",
     "rollup-plugin-commonjs": "9.2.1",
     "rollup-plugin-node-resolve": "4.0.1",

public/app/features/dashboard/containers/__snapshots__/DashboardPage.test.tsx.snap

@@ -4,7 +4,7 @@ exports[`DashboardPage Dashboard init completed  Should render dashboard grid 1`
 <div
   className=""
 >
-  <Component
+  <Connect(DashNav)
     $injector={Object {}}
     dashboard={
       DashboardModel {
@@ -241,7 +241,7 @@ exports[`DashboardPage When dashboard has editview url state should render setti
 <div
   className="dashboard-page--settings-opening"
 >
-  <Component
+  <Connect(DashNav)
     $injector={Object {}}
     dashboard={
       DashboardModel {

public/app/features/dashboard/dashgrid/DashboardGrid.tsx

@@ -3,7 +3,8 @@ import React, { PureComponent } from 'react';
 import { hot } from 'react-hot-loader';
 import ReactGridLayout, { ItemCallback } from 'react-grid-layout';
 import classNames from 'classnames';
-import { withSize } from 'react-sizeme';
+// @ts-ignore
+import sizeMe from 'react-sizeme';
 
 // Types
 import { GRID_CELL_HEIGHT, GRID_CELL_VMARGIN, GRID_COLUMN_COUNT } from 'app/core/constants';
@@ -77,7 +78,7 @@ function GridWrapper({
   );
 }
 
-const SizedReactLayoutGrid = withSize({ monitorWidth: true })(GridWrapper);
+const SizedReactLayoutGrid = sizeMe({ monitorWidth: true })(GridWrapper);
 
 export interface Props {
   dashboard: DashboardModel;

public/app/features/teams/__snapshots__/TeamMembers.test.tsx.snap

@@ -177,7 +177,7 @@ exports[`Render should render team members 1`] = `
         </tr>
       </thead>
       <tbody>
-        <Component
+        <Connect(TeamMemberRow)
           editorsCanAdmin={false}
           key="1"
           member={
@@ -197,7 +197,7 @@ exports[`Render should render team members 1`] = `
           signedInUserIsTeamAdmin={true}
           syncEnabled={false}
         />
-        <Component
+        <Connect(TeamMemberRow)
           editorsCanAdmin={false}
           key="2"
           member={
@@ -217,7 +217,7 @@ exports[`Render should render team members 1`] = `
           signedInUserIsTeamAdmin={true}
           syncEnabled={false}
         />
-        <Component
+        <Connect(TeamMemberRow)
           editorsCanAdmin={false}
           key="3"
           member={
@@ -237,7 +237,7 @@ exports[`Render should render team members 1`] = `
           signedInUserIsTeamAdmin={true}
           syncEnabled={false}
         />
-        <Component
+        <Connect(TeamMemberRow)
           editorsCanAdmin={false}
           key="4"
           member={
@@ -257,7 +257,7 @@ exports[`Render should render team members 1`] = `
           signedInUserIsTeamAdmin={true}
           syncEnabled={false}
         />
-        <Component
+        <Connect(TeamMemberRow)
           editorsCanAdmin={false}
           key="5"
           member={

public/app/features/teams/__snapshots__/TeamPages.test.tsx.snap

@@ -17,7 +17,7 @@ exports[`Render should render group sync page 1`] = `
   <PageContents
     isLoading={true}
   >
-    <Component />
+    <Connect(TeamGroupSync) />
   </PageContents>
 </Page>
 `;
@@ -29,7 +29,7 @@ exports[`Render should render member page if team not empty 1`] = `
   <PageContents
     isLoading={true}
   >
-    <Component
+    <Connect(TeamMembers)
       members={Array []}
       syncEnabled={true}
     />
@@ -44,7 +44,7 @@ exports[`Render should render settings and preferences page 1`] = `
   <PageContents
     isLoading={true}
   >
-    <Component />
+    <Connect(TeamSettings) />
   </PageContents>
 </Page>
 `;
@@ -66,7 +66,7 @@ exports[`Render when feature toggle editorsCanAdmin is turned on should render s
   <PageContents
     isLoading={true}
   >
-    <Component />
+    <Connect(TeamSettings) />
   </PageContents>
 </Page>
 `;

public/app/features/users/__snapshots__/InviteesTable.test.tsx.snap

@@ -49,7 +49,7 @@ exports[`Render should render invitees 1`] = `
     </tr>
   </thead>
   <tbody>
-    <Component
+    <Connect(InviteeRow)
       invitee={
         Object {
           "code": "asdfasdfsadf-0",
@@ -70,7 +70,7 @@ exports[`Render should render invitees 1`] = `
       }
       key="0-0"
     />
-    <Component
+    <Connect(InviteeRow)
       invitee={
         Object {
           "code": "asdfasdfsadf-1",
@@ -91,7 +91,7 @@ exports[`Render should render invitees 1`] = `
       }
       key="1-1"
     />
-    <Component
+    <Connect(InviteeRow)
       invitee={
         Object {
           "code": "asdfasdfsadf-2",
@@ -112,7 +112,7 @@ exports[`Render should render invitees 1`] = `
       }
       key="2-2"
     />
-    <Component
+    <Connect(InviteeRow)
       invitee={
         Object {
           "code": "asdfasdfsadf-3",
@@ -133,7 +133,7 @@ exports[`Render should render invitees 1`] = `
       }
       key="3-3"
     />
-    <Component
+    <Connect(InviteeRow)
       invitee={
         Object {
           "code": "asdfasdfsadf-4",
@@ -154,7 +154,7 @@ exports[`Render should render invitees 1`] = `
       }
       key="4-4"
     />
-    <Component
+    <Connect(InviteeRow)
       invitee={
         Object {
           "code": "asdfasdfsadf-5",

public/app/features/users/__snapshots__/UsersListPage.test.tsx.snap

@@ -16,7 +16,7 @@ exports[`Render should render List page 1`] = `
   <PageContents
     isLoading={false}
   >
-    <Component
+    <Connect(UsersActionBar)
       onShowInvites={[Function]}
       showInvites={false}
     />
@@ -45,7 +45,7 @@ exports[`Render should render component 1`] = `
   <PageContents
     isLoading={true}
   >
-    <Component
+    <Connect(UsersActionBar)
       onShowInvites={[Function]}
       showInvites={false}
     />

public/app/plugins/datasource/loki/components/useLokiLabels.test.ts

@@ -1,4 +1,4 @@
-import { renderHook, act } from '@testing-library/react-hooks';
+import { renderHook, act } from 'react-hooks-testing-library';
 import LanguageProvider from 'app/plugins/datasource/loki/language_provider';
 import { useLokiLabels } from './useLokiLabels';
 import { DataSourceStatus } from '@grafana/ui/src/types/datasource';

public/app/plugins/datasource/loki/components/useLokiSyntax.test.ts

@@ -1,4 +1,4 @@
-import { renderHook, act } from '@testing-library/react-hooks';
+import { renderHook, act } from 'react-hooks-testing-library';
 import { DataSourceStatus } from '@grafana/ui/src/types/datasource';
 import { AbsoluteTimeRange } from '@grafana/data';