[7.x] [Dependencies]: upgrade react to latest v16.12.0 (#51145)

package.json

@@ -77,17 +77,16 @@
   },
   "resolutions": {
     "**/@types/node": "10.12.27",
-    "**/@types/react": "16.8.3",
+    "**/@types/react": "^16.9.13",
     "**/@types/hapi": "^17.0.18",
     "**/@types/angular": "^1.6.56",
     "**/typescript": "3.7.2",
     "**/graphql-toolkit/lodash": "^4.17.13",
     "**/isomorphic-git/**/base64-js": "^1.2.1",
     "**/image-diff/gm/debug": "^2.6.9",
-    "**/deepmerge": "^4.2.2",
-    "**/react": "16.8.6",
-    "**/react-dom": "16.8.6",
-    "**/react-test-renderer": "16.8.6"
+    "**/react-dom": "^16.12.0",
+    "**/react-test-renderer": "^16.12.0",
+    "**/deepmerge": "^4.2.2"
   },
   "workspaces": {
     "packages": [
@@ -214,15 +213,13 @@
     "pug": "^2.0.3",
     "querystring-browser": "1.0.4",
     "raw-loader": "3.1.0",
-    "react": "^16.8.6",
-    "react-addons-shallow-compare": "15.6.2",
+    "react": "^16.12.0",
     "react-color": "^2.13.8",
-    "react-dom": "^16.8.6",
+    "react-dom": "^16.12.0",
     "react-grid-layout": "^0.16.2",
-    "react-hooks-testing-library": "^0.5.0",
     "react-input-range": "^1.3.0",
     "react-markdown": "^3.4.1",
-    "react-redux": "^5.1.1",
+    "react-redux": "^5.1.2",
     "react-router-dom": "^4.3.1",
     "react-sizeme": "^2.3.6",
     "reactcss": "1.2.3",
@@ -283,6 +280,8 @@
     "@microsoft/api-documenter": "7.4.3",
     "@microsoft/api-extractor": "7.4.2",
     "@percy/agent": "^0.11.0",
+    "@testing-library/react": "^9.3.2",
+    "@testing-library/react-hooks": "^3.2.1",
     "@types/angular": "^1.6.56",
     "@types/angular-mocks": "^1.7.0",
     "@types/babel__core": "^7.1.2",
@@ -308,7 +307,7 @@
     "@types/has-ansi": "^3.0.0",
     "@types/history": "^4.7.3",
     "@types/hoek": "^4.1.3",
-    "@types/jest": "^24.0.18",
+    "@types/jest": "24.0.19",
     "@types/joi": "^13.4.2",
     "@types/jquery": "^3.3.31",
     "@types/js-yaml": "^3.11.1",
@@ -328,8 +327,8 @@
     "@types/podium": "^1.0.0",
     "@types/prop-types": "^15.5.3",
     "@types/reach__router": "^1.2.6",
-    "@types/react": "^16.8.0",
-    "@types/react-dom": "^16.8.0",
+    "@types/react": "^16.9.11",
+    "@types/react-dom": "^16.9.4",
     "@types/react-redux": "^6.0.6",
     "@types/react-router-dom": "^4.3.1",
     "@types/react-virtualized": "^9.18.7",
@@ -343,6 +342,8 @@
     "@types/styled-components": "^4.4.0",
     "@types/supertest": "^2.0.5",
     "@types/supertest-as-promised": "^2.0.38",
+    "@types/testing-library__react": "^9.1.2",
+    "@types/testing-library__react-hooks": "^3.1.0",
     "@types/type-detect": "^4.0.1",
     "@types/uuid": "^3.4.4",
     "@types/vinyl-fs": "^2.4.11",
@@ -405,7 +406,6 @@
     "istanbul-instrumenter-loader": "3.0.1",
     "jest": "^24.9.0",
     "jest-cli": "^24.9.0",
-    "jest-dom": "^3.5.0",
     "jest-raw-loader": "^1.0.1",
     "jimp": "0.8.4",
     "json5": "^1.0.1",

packages/eslint-config-kibana/javascript.js

@@ -41,7 +41,7 @@ module.exports = {
 
       rules: {
         'block-scoped-var': 'error',
-        camelcase: [ 'error', { properties: 'never' } ],
+        camelcase: [ 'error', { properties: 'never', allow: ['^UNSAFE_'] } ],
         'comma-dangle': 'off',
         'comma-spacing': ['error', { before: false, after: true }],
         'comma-style': [ 'error', 'last' ],

packages/eslint-config-kibana/jest.js

@@ -16,7 +16,7 @@ module.exports = {
       rules: {
         'jest/no-focused-tests': 'error',
         'jest/no-identical-title': 'error',
-        'import/order': 'off'
+        'import/order': 'off',
       },
     }
   ]

packages/eslint-config-kibana/typescript.js

@@ -95,7 +95,7 @@ module.exports = {
           '@typescript-eslint/camelcase': ['error', {
             'properties': 'never',
             'ignoreDestructuring': true,
-            'allow': ['^[A-Z0-9_]+$']
+            'allow': ['^[A-Z0-9_]+$', '^UNSAFE_']
           }],
           '@typescript-eslint/class-name-casing': 'error',
           '@typescript-eslint/explicit-member-accessibility': ['error',

packages/kbn-i18n/package.json

@@ -28,7 +28,7 @@
     "intl-messageformat": "^2.2.0",
     "intl-relativeformat": "^2.1.0",
     "prop-types": "^15.6.2",
-    "react": "^16.8.6",
+    "react": "^16.12.0",
     "react-intl": "^2.8.0"
   }
 }

packages/kbn-ui-framework/doc_site/src/components/guide_nav/guide_nav.js

@@ -47,7 +47,7 @@ export class GuideNav extends Component {
     });
   }
 
-  componentWillReceiveProps(nextProps) {
+  UNSAFE_componentWillReceiveProps(nextProps) {
     const currentRoute = nextProps.routes[1];
     const nextRoute = this.props.getNextRoute(currentRoute.name);
     const previousRoute = this.props.getPreviousRoute(currentRoute.name);

packages/kbn-ui-framework/doc_site/src/components/guide_sandbox/guide_sandbox.js

@@ -49,7 +49,7 @@ function mapDispatchToProps(dispatch) {
 }
 
 class GuideSandboxComponent extends Component {
-  componentWillMount() {
+  UNSAFE_componentWillMount() {
     this.props.openSandbox();
   }
 

packages/kbn-ui-framework/doc_site/src/components/guide_section/guide_section.js

@@ -36,7 +36,7 @@ export class GuideSection extends Component {
     this.props.openCodeViewer(this.props.source, this.props.title);
   }
 
-  componentWillMount() {
+  UNSAFE_componentWillMount() {
     this.props.registerSection(this.getId(), this.props.title);
   }
 

packages/kbn-ui-framework/doc_site/src/views/app_view.js

@@ -81,7 +81,7 @@ export class AppView extends Component {
     });
   }
 
-  componentWillReceiveProps(nextProps) {
+  UNSAFE_componentWillReceiveProps(nextProps) {
     // Only force the chrome to be hidden if we're navigating from a non-sandbox to a sandbox.
     if (!this.props.isSandbox && nextProps.isSandbox) {
       this.setState({

packages/kbn-ui-framework/package.json

@@ -19,7 +19,7 @@
     "focus-trap-react": "^3.1.1",
     "lodash": "npm:@elastic/[email protected]",
     "prop-types": "15.6.0",
-    "react": "^16.8.6",
+    "react": "^16.12.0",
     "react-ace": "^5.9.0",
     "react-color": "^2.13.8",
     "tabbable": "1.1.3",
@@ -57,8 +57,8 @@
     "postcss": "^7.0.5",
     "postcss-loader": "^3.0.0",
     "raw-loader": "^3.1.0",
-    "react-dom": "^16.8.6",
-    "react-redux": "^5.0.6",
+    "react-dom": "^16.12.0",
+    "react-redux": "^5.1.2",
     "react-router": "^3.2.0",
     "react-router-redux": "^4.0.8",
     "redux": "3.7.2",

src/legacy/core_plugins/input_control_vis/public/components/editor/field_select.js

@@ -49,7 +49,7 @@ class FieldSelectUi extends Component {
     this.loadFields(this.state.indexPatternId);
   }
 
-  componentWillReceiveProps(nextProps) {
+  UNSAFE_componentWillReceiveProps(nextProps) {
     if (this.props.indexPatternId !== nextProps.indexPatternId) {
       this.loadFields(nextProps.indexPatternId);
     }

src/legacy/core_plugins/kibana/public/discover/doc/doc.test.tsx

@@ -45,16 +45,6 @@ beforeEach(() => {
   jest.clearAllMocks();
 });
 
-// Suppress warnings about "act" until we use React 16.9
-/* eslint-disable no-console */
-const originalError = console.error;
-beforeAll(() => {
-  console.error = jest.fn();
-});
-afterAll(() => {
-  console.error = originalError;
-});
-
 export const waitForPromises = () => new Promise(resolve => setTimeout(resolve, 0));
 
 /**

src/legacy/core_plugins/kibana/public/discover/doc/use_es_doc_search.test.tsx

@@ -16,20 +16,10 @@
  * specific language governing permissions and limitations
  * under the License.
  */
-import { renderHook, act } from 'react-hooks-testing-library';
+import { renderHook, act } from '@testing-library/react-hooks';
 import { buildSearchBody, useEsDocSearch, ElasticRequestState } from './use_es_doc_search';
 import { DocProps } from './doc';
 
-// Suppress warnings about "act" until we use React 16.9
-/* eslint-disable no-console */
-const originalError = console.error;
-beforeAll(() => {
-  console.error = jest.fn();
-});
-afterAll(() => {
-  console.error = originalError;
-});
-
 describe('Test of <Doc /> helper / hook', () => {
   test('buildSearchBody', () => {
     const indexPattern = {

src/legacy/core_plugins/kibana/public/home/components/tutorial/tutorial.js

@@ -67,7 +67,7 @@ class TutorialUi extends React.Component {
     }
   }
 
-  componentWillMount() {
+  UNSAFE_componentWillMount() {
     this._isMounted = true;
   }
 

src/legacy/core_plugins/kibana/public/management/sections/index_patterns/create_index_pattern_wizard/components/step_index_pattern/components/indices_list/indices_list.js

@@ -61,7 +61,7 @@ export class IndicesList extends Component {
     this.pager = new Pager(props.indices.length, this.state.perPage, this.state.page);
   }
 
-  componentWillReceiveProps(nextProps) {
+  UNSAFE_componentWillReceiveProps(nextProps) {
     if (nextProps.indices.length !== this.props.indices.length) {
       this.pager.setTotalItems(nextProps.indices.length);
       this.resetPageTo0();

src/legacy/core_plugins/kibana/public/management/sections/index_patterns/create_index_pattern_wizard/components/step_index_pattern/step_index_pattern.js

@@ -75,7 +75,7 @@ export class StepIndexPattern extends Component {
     this.lastQuery = null;
   }
 
-  async componentWillMount() {
+  async UNSAFE_componentWillMount() {
     this.fetchExistingIndexPatterns();
     if (this.state.query) {
       this.lastQuery = this.state.query;

src/legacy/core_plugins/kibana/public/management/sections/index_patterns/create_index_pattern_wizard/create_index_pattern_wizard.js

@@ -65,7 +65,7 @@ export class CreateIndexPatternWizard extends Component {
     };
   }
 
-  async componentWillMount() {
+  async UNSAFE_componentWillMount() {
     this.fetchData();
   }
 

src/legacy/core_plugins/kibana/public/management/sections/index_patterns/edit_index_pattern/indexed_fields_table/indexed_fields_table.js

@@ -47,7 +47,7 @@ export class IndexedFieldsTable extends Component {
     };
   }
 
-  componentWillReceiveProps(nextProps) {
+  UNSAFE_componentWillReceiveProps(nextProps) {
     if (nextProps.fields !== this.props.fields) {
       this.setState({
         fields: this.mapFields(nextProps.fields)

src/legacy/core_plugins/kibana/public/management/sections/index_patterns/edit_index_pattern/scripted_fields_table/scripted_fields_table.js

@@ -59,7 +59,7 @@ export class ScriptedFieldsTable extends Component {
     };
   }
 
-  componentWillMount() {
+  UNSAFE_componentWillMount() {
     this.fetchFields();
   }
 

src/legacy/core_plugins/kibana/public/management/sections/index_patterns/edit_index_pattern/source_filters_table/source_filters_table.js

@@ -58,7 +58,7 @@ export class SourceFiltersTable extends Component {
     };
   }
 
-  componentWillMount() {
+  UNSAFE_componentWillMount() {
     this.updateFilters();
   }
 

src/legacy/core_plugins/kibana/public/management/sections/objects/components/objects_table/components/relationships/relationships.js

@@ -58,11 +58,11 @@ export class Relationships extends Component {
     };
   }
 
-  componentWillMount() {
+  UNSAFE_componentWillMount() {
     this.getRelationshipData();
   }
 
-  componentWillReceiveProps(nextProps) {
+  UNSAFE_componentWillReceiveProps(nextProps) {
     if (nextProps.savedObject.id !== this.props.savedObject.id) {
       this.getRelationshipData();
     }

src/legacy/core_plugins/kibana/public/management/sections/settings/advanced_settings.js

@@ -81,7 +81,7 @@ export class AdvancedSettings extends Component {
     }, {});
   }
 
-  componentWillReceiveProps(nextProps) {
+  UNSAFE_componentWillReceiveProps(nextProps) {
     const { config } = nextProps;
     const { query } = this.state;
 

src/legacy/core_plugins/kibana/public/management/sections/settings/components/field/field.js

@@ -76,7 +76,7 @@ export class Field extends PureComponent {
     this.changeImageForm = null;
   }
 
-  componentWillReceiveProps(nextProps) {
+  UNSAFE_componentWillReceiveProps(nextProps) {
     const { unsavedValue } = this.state;
     const { type, value, defVal } = nextProps.setting;
     const editableValue = this.getEditableValue(type, value, defVal);

src/legacy/core_plugins/telemetry/public/components/telemetry_form.js

@@ -52,7 +52,7 @@ export class TelemetryForm extends Component {
     queryMatches: null,
   }
 
-  componentWillReceiveProps(nextProps) {
+  UNSAFE_componentWillReceiveProps(nextProps) {
     const {
       query
     } = nextProps;

src/legacy/core_plugins/vis_type_timeseries/public/components/aggs/calculation.js

@@ -42,7 +42,7 @@ import {
 } from '@elastic/eui';
 
 export class CalculationAgg extends Component {
-  componentWillMount() {
+  UNSAFE_componentWillMount() {
     if (!this.props.model.variables) {
       this.props.onChange(
         _.assign({}, this.props.model, {

src/legacy/core_plugins/vis_type_timeseries/public/components/aggs/math.js

@@ -42,7 +42,7 @@ import {
 import { FormattedMessage } from '@kbn/i18n/react';
 
 export class MathAgg extends Component {
-  componentWillMount() {
+  UNSAFE_componentWillMount() {
     if (!this.props.model.variables) {
       this.props.onChange(
         _.assign({}, this.props.model, {

src/legacy/core_plugins/vis_type_timeseries/public/components/aggs/percentile.js

@@ -42,7 +42,7 @@ const RESTRICT_FIELDS = [KBN_FIELD_TYPES.NUMBER];
 export class PercentileAgg extends Component {
   // eslint-disable-line react/no-multi-comp
 
-  componentWillMount() {
+  UNSAFE_componentWillMount() {
     if (!this.props.model.percentiles) {
       this.props.onChange(
         _.assign({}, this.props.model, {

src/legacy/core_plugins/vis_type_timeseries/public/components/custom_color_picker.js

@@ -18,7 +18,7 @@
  */
 
 import PropTypes from 'prop-types';
-import React, { Component } from 'react';
+import React, { PureComponent } from 'react';
 
 import {
   ColorWrap as colorWrap,
@@ -32,18 +32,13 @@ import ChromePointer from 'react-color/lib/components/chrome/ChromePointer';
 import ChromePointerCircle from 'react-color/lib/components/chrome/ChromePointerCircle';
 import CompactColor from 'react-color/lib/components/compact/CompactColor';
 import color from 'react-color/lib/helpers/color';
-import shallowCompare from 'react-addons-shallow-compare';
 
-class CustomColorPickerUI extends Component {
+class CustomColorPickerUI extends PureComponent {
   constructor(props) {
     super(props);
     this.handleChange = this.handleChange.bind(this);
   }
 
-  shouldComponentUpdate(nextProps, nextState) {
-    return shallowCompare(nextProps, nextState);
-  }
-
   handleChange(data) {
     this.props.onChange(data);
   }

src/legacy/core_plugins/vis_type_timeseries/public/components/panel_config/gauge.js

@@ -52,7 +52,7 @@ class GaugePanelConfigUi extends Component {
     this.state = { selectedTab: 'data' };
   }
 
-  componentWillMount() {
+  UNSAFE_componentWillMount() {
     const { model } = this.props;
     const parts = {};
     if (