Update react 15.6.1 (#13672)

.gitignore

@@ -37,3 +37,4 @@ ui_framework/doc_site/build
 !ui_framework/doc_site/build/index.html
 yarn.lock
 .yo-rc.json
+/.vscode

package.json

@@ -165,12 +165,13 @@
     "pui-react-tooltip": "7.5.4",
     "querystring-browser": "1.0.4",
     "raw-loader": "0.5.1",
-    "react": "15.4.2",
+    "react": "15.6.1",
     "react-ace": "3.7.0",
-    "react-addons-test-utils": "15.4.2",
+    "react-test-renderer": "15.6.1",
+    "react-addons-test-utils": "15.6.0",
     "react-anything-sortable": "1.6.1",
-    "react-color": "2.11.1",
-    "react-dom": "15.4.2",
+    "react-color": "2.11.7",
+    "react-dom": "15.6.1",
     "react-input-autosize": "1.1.0",
     "react-markdown": "2.4.2",
     "react-redux": "4.4.5",
@@ -216,7 +217,7 @@
     "chokidar": "1.6.0",
     "chromedriver": "2.29.0",
     "classnames": "2.2.5",
-    "enzyme": "2.7.0",
+    "enzyme": "2.9.1",
     "enzyme-to-json": "1.4.5",
     "eslint": "3.19.0",
     "eslint-plugin-babel": "4.1.1",

src/core_plugins/metrics/public/components/add_delete_buttons.js

@@ -1,4 +1,5 @@
-import React, { PropTypes } from 'react';
+import PropTypes from 'prop-types';
+import React from 'react';
 import Tooltip from './tooltip';
 
 function AddDeleteButtons(props) {

src/core_plugins/metrics/public/components/aggs/agg.js

@@ -1,4 +1,5 @@
-import React, { PropTypes } from 'react';
+import PropTypes from 'prop-types';
+import React from 'react';
 import StdAgg from './std_agg';
 import aggToComponent from '../lib/agg_to_component';
 import { sortable } from 'react-anything-sortable';

src/core_plugins/metrics/public/components/aggs/agg_row.js

@@ -1,4 +1,5 @@
-import React, { PropTypes } from 'react';
+import PropTypes from 'prop-types';
+import React from 'react';
 import _ from 'lodash';
 import AddDeleteButtons from '../add_delete_buttons';
 import Tooltip from '../tooltip';

src/core_plugins/metrics/public/components/aggs/agg_select.js

@@ -1,4 +1,5 @@
-import React, { PropTypes, Component } from 'react';
+import PropTypes from 'prop-types';
+import React, { Component } from 'react';
 import Select from 'react-select';
 
 const metricAggs = [

src/core_plugins/metrics/public/components/aggs/calculation.js

@@ -1,4 +1,5 @@
-import React, { Component, PropTypes } from 'react';
+import PropTypes from 'prop-types';
+import React, { Component } from 'react';
 import _ from 'lodash';
 import uuid from 'uuid';
 import AggRow from './agg_row';

src/core_plugins/metrics/public/components/aggs/cumulative_sum.js

@@ -1,4 +1,5 @@
-import React, { PropTypes } from 'react';
+import PropTypes from 'prop-types';
+import React from 'react';
 import AggRow from './agg_row';
 import AggSelect from './agg_select';
 import MetricSelect from './metric_select';

src/core_plugins/metrics/public/components/aggs/derivative.js

@@ -1,4 +1,5 @@
-import React, { PropTypes } from 'react';
+import PropTypes from 'prop-types';
+import React from 'react';
 import AggSelect from './agg_select';
 import MetricSelect from './metric_select';
 import AggRow from './agg_row';

src/core_plugins/metrics/public/components/aggs/field_select.js

@@ -1,4 +1,5 @@
-import React, { PropTypes } from 'react';
+import PropTypes from 'prop-types';
+import React from 'react';
 import Select from 'react-select';
 import generateByTypeFilter from '../lib/generate_by_type_filter';
 

src/core_plugins/metrics/public/components/aggs/filter_ratio.js

@@ -1,4 +1,5 @@
-import React, { PropTypes } from 'react';
+import PropTypes from 'prop-types';
+import React from 'react';
 import AggSelect from './agg_select';
 import FieldSelect from './field_select';
 import AggRow from './agg_row';

src/core_plugins/metrics/public/components/aggs/metric_select.js

@@ -1,4 +1,5 @@
-import React, { PropTypes } from 'react';
+import PropTypes from 'prop-types';
+import React from 'react';
 import _ from 'lodash';
 import Select from 'react-select';
 import calculateSiblings from '../lib/calculate_siblings';

src/core_plugins/metrics/public/components/aggs/moving_average.js

@@ -1,4 +1,5 @@
-import React, { PropTypes } from 'react';
+import PropTypes from 'prop-types';
+import React from 'react';
 import AggRow from './agg_row';
 import AggSelect from './agg_select';
 import MetricSelect from './metric_select';

src/core_plugins/metrics/public/components/aggs/percentile.js

@@ -1,4 +1,5 @@
-import React, { Component, PropTypes } from 'react';
+import PropTypes from 'prop-types';
+import React, { Component } from 'react';
 import _ from 'lodash';
 import AggSelect from './agg_select';
 import FieldSelect from './field_select';

src/core_plugins/metrics/public/components/aggs/percentile_rank.js

@@ -1,4 +1,5 @@
-import React, { PropTypes } from 'react';
+import PropTypes from 'prop-types';
+import React from 'react';
 import AggSelect from './agg_select';
 import FieldSelect from './field_select';
 import AggRow from './agg_row';

src/core_plugins/metrics/public/components/aggs/positive_only.js

@@ -1,4 +1,5 @@
-import React, { PropTypes } from 'react';
+import PropTypes from 'prop-types';
+import React from 'react';
 import AggSelect from './agg_select';
 import MetricSelect from './metric_select';
 import AggRow from './agg_row';

src/core_plugins/metrics/public/components/aggs/serial_diff.js

@@ -1,4 +1,5 @@
-import React, { PropTypes } from 'react';
+import PropTypes from 'prop-types';
+import React from 'react';
 import AggSelect from './agg_select';
 import MetricSelect from './metric_select';
 import AggRow from './agg_row';

src/core_plugins/metrics/public/components/aggs/series_agg.js

@@ -1,4 +1,5 @@
-import React, { PropTypes } from 'react';
+import PropTypes from 'prop-types';
+import React from 'react';
 import AggSelect from './agg_select';
 import Select from 'react-select';
 import AggRow from './agg_row';

src/core_plugins/metrics/public/components/aggs/static.js

@@ -1,4 +1,5 @@
-import React, { PropTypes } from 'react';
+import PropTypes from 'prop-types';
+import React from 'react';
 import AggSelect from './agg_select';
 import AggRow from './agg_row';
 import createChangeHandler from '../lib/create_change_handler';

src/core_plugins/metrics/public/components/aggs/std_agg.js

@@ -1,4 +1,5 @@
-import React, { PropTypes } from 'react';
+import PropTypes from 'prop-types';
+import React from 'react';
 import AggSelect from './agg_select';
 import FieldSelect from './field_select';
 import AggRow from './agg_row';

src/core_plugins/metrics/public/components/aggs/std_deviation.js

@@ -1,4 +1,5 @@
-import React, { PropTypes } from 'react';
+import PropTypes from 'prop-types';
+import React from 'react';
 import AggSelect from './agg_select';
 import FieldSelect from './field_select';
 import AggRow from './agg_row';

src/core_plugins/metrics/public/components/aggs/std_sibling.js

@@ -1,4 +1,5 @@
-import React, { PropTypes } from 'react';
+import PropTypes from 'prop-types';
+import React from 'react';
 import AggRow from './agg_row';
 import MetricSelect from './metric_select';
 import AggSelect from './agg_select';

src/core_plugins/metrics/public/components/aggs/vars.js

@@ -1,4 +1,5 @@
-import React, { Component, PropTypes } from 'react';
+import PropTypes from 'prop-types';
+import React, { Component } from 'react';
 import _ from 'lodash';
 import AddDeleteButtons from '../add_delete_buttons';
 import * as collectionActions from '../lib/collection_actions';

src/core_plugins/metrics/public/components/annotations_editor.js

@@ -1,4 +1,5 @@
-import React, { Component, PropTypes } from 'react';
+import PropTypes from 'prop-types';
+import React, { Component } from 'react';
 import _ from 'lodash';
 import * as collectionActions from './lib/collection_actions';
 import AddDeleteButtons from './add_delete_buttons';

src/core_plugins/metrics/public/components/color_picker.js

@@ -1,4 +1,5 @@
-import React, { Component, PropTypes } from 'react';
+import PropTypes from 'prop-types';
+import React, { Component } from 'react';
 import Tooltip from './tooltip';
 import Picker from './custom_color_picker';
 

src/core_plugins/metrics/public/components/color_rules.js

@@ -1,4 +1,5 @@
-import React, { Component, PropTypes } from 'react';
+import PropTypes from 'prop-types';
+import React, { Component } from 'react';
 import _ from 'lodash';
 import AddDeleteButtons from './add_delete_buttons';
 import Select from 'react-select';

src/core_plugins/metrics/public/components/custom_color_picker.js

@@ -1,4 +1,5 @@
-import React, { Component, PropTypes } from 'react';
+import PropTypes from 'prop-types';
+import React, { Component } from 'react';
 
 import { ColorWrap as colorWrap, Saturation, Hue, Alpha, Checkboard } from 'react-color/lib/components/common';
 import ChromeFields from 'react-color/lib/components/chrome/ChromeFields';

src/core_plugins/metrics/public/components/data_format_picker.js

@@ -1,4 +1,5 @@
-import React, { Component, PropTypes } from 'react';
+import PropTypes from 'prop-types';
+import React, { Component } from 'react';
 import _ from 'lodash';
 import Select from 'react-select';
 import { durationOutputOptions, durationInputOptions } from './lib/durations';

src/core_plugins/metrics/public/components/error.js

@@ -1,4 +1,5 @@
-import React, { PropTypes } from 'react';
+import PropTypes from 'prop-types';
+import React from 'react';
 import _ from 'lodash';
 
 function ErrorComponent(props) {

src/core_plugins/metrics/public/components/icon_select.js

@@ -1,4 +1,5 @@
-import React, { Component, PropTypes } from 'react';
+import PropTypes from 'prop-types';
+import React, { Component } from 'react';
 import Select from 'react-select';
 
 class IconOption extends Component {

src/core_plugins/metrics/public/components/index_pattern.js

@@ -1,4 +1,5 @@
-import React, { PropTypes } from 'react';
+import PropTypes from 'prop-types';
+import React from 'react';
 import FieldSelect from './aggs/field_select';
 import createSelectHandler from './lib/create_select_handler';
 import createTextHandler from './lib/create_text_handler';

src/core_plugins/metrics/public/components/markdown_editor.js

@@ -1,5 +1,7 @@
 /* eslint max-len:0 */
-import React, { Component, PropTypes } from 'react';
+import PropTypes from 'prop-types';
+
+import React, { Component } from 'react';
 import tickFormatter from './lib/tick_formatter';
 import convertSeriesToVars from './lib/convert_series_to_vars';
 import AceEditor from 'react-ace';

src/core_plugins/metrics/public/components/panel_config.js

@@ -1,4 +1,5 @@
-import React, { PropTypes } from 'react';
+import PropTypes from 'prop-types';
+import React from 'react';
 import timeseries from './panel_config/timeseries';
 import metric from './panel_config/metric';
 import topN from './panel_config/top_n';

src/core_plugins/metrics/public/components/panel_config/gauge.js

@@ -1,4 +1,5 @@
-import React, { Component, PropTypes } from 'react';
+import PropTypes from 'prop-types';
+import React, { Component } from 'react';
 import SeriesEditor from '../series_editor';
 import { IndexPattern } from '../index_pattern';
 import Select from 'react-select';

src/core_plugins/metrics/public/components/panel_config/markdown.js

@@ -1,4 +1,5 @@
-import React, { Component, PropTypes } from 'react';
+import PropTypes from 'prop-types';
+import React, { Component } from 'react';
 import SeriesEditor from '../series_editor';
 import { IndexPattern } from '../index_pattern';
 import AceEditor from 'react-ace';

src/core_plugins/metrics/public/components/panel_config/metric.js

@@ -1,4 +1,5 @@
-import React, { Component, PropTypes } from 'react';
+import PropTypes from 'prop-types';
+import React, { Component } from 'react';
 import SeriesEditor from '../series_editor';
 import { IndexPattern } from '../index_pattern';
 import createTextHandler from '../lib/create_text_handler';

src/core_plugins/metrics/public/components/panel_config/timeseries.js

@@ -1,4 +1,5 @@
-import React, { Component, PropTypes } from 'react';
+import PropTypes from 'prop-types';
+import React, { Component } from 'react';
 import SeriesEditor from '../series_editor';
 import AnnotationsEditor from '../annotations_editor';
 import { IndexPattern } from '../index_pattern';

src/core_plugins/metrics/public/components/panel_config/top_n.js

@@ -1,4 +1,5 @@
-import React, { Component, PropTypes } from 'react';
+import PropTypes from 'prop-types';
+import React, { Component } from 'react';
 import SeriesEditor from '../series_editor';
 import { IndexPattern } from '../index_pattern';
 import createTextHandler from '../lib/create_text_handler';

src/core_plugins/metrics/public/components/series.js

@@ -1,4 +1,5 @@
-import React, { Component, PropTypes } from 'react';
+import PropTypes from 'prop-types';
+import React, { Component } from 'react';
 import _ from 'lodash';
 
 import timeseries from './vis_types/timeseries/series';

src/core_plugins/metrics/public/components/series_config.js

@@ -1,4 +1,5 @@
-import React, { PropTypes } from 'react';
+import PropTypes from 'prop-types';
+import React from 'react';
 import DataFormatPicker from './data_format_picker';
 import createSelectHandler from './lib/create_select_handler';
 import createTextHandler from './lib/create_text_handler';

src/core_plugins/metrics/public/components/series_editor.js

@@ -1,4 +1,5 @@
-import React, { Component, PropTypes } from 'react';
+import PropTypes from 'prop-types';
+import React, { Component } from 'react';
 import reIdSeries from './lib/re_id_series';
 import Series from './series';
 import {

src/core_plugins/metrics/public/components/split.js

@@ -1,4 +1,5 @@
-import React, { Component, PropTypes } from 'react';
+import PropTypes from 'prop-types';
+import React, { Component } from 'react';
 import uuid from 'uuid';
 
 import { SplitByTerms } from './splits/terms';

src/core_plugins/metrics/public/components/splits/everything.js

@@ -1,6 +1,7 @@
 import createSelectHandler from '../lib/create_select_handler';
 import GroupBySelect from './group_by_select';
-import React, { PropTypes } from 'react';
+import PropTypes from 'prop-types';
+import React from 'react';
 
 function SplitByEverything(props) {
   const { onChange, model } = props;

src/core_plugins/metrics/public/components/splits/filter.js

@@ -1,7 +1,8 @@
 import createTextHandler from '../lib/create_text_handler';
 import createSelectHandler from '../lib/create_select_handler';
 import GroupBySelect from './group_by_select';
-import React, { PropTypes } from 'react';
+import PropTypes from 'prop-types';
+import React from 'react';
 
 export const SplitByFilter = props => {
   const { onChange } = props;

src/core_plugins/metrics/public/components/splits/filter_items.js

@@ -1,4 +1,5 @@
-import React, { Component, PropTypes } from 'react';
+import PropTypes from 'prop-types';
+import React, { Component } from 'react';
 import _ from 'lodash';
 import * as collectionActions from '../lib/collection_actions';
 import AddDeleteButtons from '../add_delete_buttons';

src/core_plugins/metrics/public/components/splits/filters.js

@@ -1,7 +1,8 @@
 import createSelectHandler from '../lib/create_select_handler';
 import GroupBySelect from './group_by_select';
 import FilterItems from './filter_items';
-import React, { PropTypes } from 'react';
+import PropTypes from 'prop-types';
+import React from 'react';
 function SplitByFilters(props) {
   const { onChange, model } = props;
   const handleSelectChange = createSelectHandler(onChange);

src/core_plugins/metrics/public/components/splits/group_by_select.js

@@ -1,4 +1,5 @@
-import React, { PropTypes } from 'react';
+import PropTypes from 'prop-types';
+import React from 'react';
 import Select from 'react-select';
 function GroupBySelect(props) {
   const modeOptions = [

src/core_plugins/metrics/public/components/splits/terms.js

@@ -1,4 +1,5 @@
-import React, { PropTypes } from 'react';
+import PropTypes from 'prop-types';
+import React from 'react';
 import GroupBySelect from './group_by_select';
 import createTextHandler from '../lib/create_text_handler';
 import createSelectHandler from '../lib/create_select_handler';

src/core_plugins/metrics/public/components/tooltip.js

@@ -1,5 +1,6 @@
-import React, { PropTypes } from 'react';
+import React from 'react';
 import { Tooltip } from 'pui-react-tooltip';
+import PropTypes from 'prop-types';
 import { OverlayTrigger } from 'pui-react-overlay-trigger';
 
 function TooltipComponent(props) {

src/core_plugins/metrics/public/components/vis_editor.js

@@ -1,4 +1,5 @@
-import React, { Component, PropTypes } from 'react';
+import PropTypes from 'prop-types';
+import React, { Component } from 'react';
 import VisEditorVisualization from './vis_editor_visualization';
 import Visualization from './visualization';
 import VisPicker from './vis_picker';

src/core_plugins/metrics/public/components/vis_editor_visualization.js

@@ -1,4 +1,5 @@
-import React, { Component, PropTypes } from 'react';
+import PropTypes from 'prop-types';
+import React, { Component } from 'react';
 import { findDOMNode } from 'react-dom';
 import Visualization from './visualization';
 import Toggle from 'react-toggle';

src/core_plugins/metrics/public/components/vis_picker.js

@@ -1,4 +1,5 @@
-import React, { PropTypes } from 'react';
+import PropTypes from 'prop-types';
+import React from 'react';
 
 function VisPickerItem(props) {
   const { label, icon, type } = props;

src/core_plugins/metrics/public/components/vis_types/gauge/series.js

@@ -1,4 +1,5 @@
-import React, { PropTypes } from 'react';
+import PropTypes from 'prop-types';
+import React from 'react';
 import ColorPicker from '../../color_picker';
 import AddDeleteButtons from '../../add_delete_buttons';
 import { SeriesConfig } from '../../series_config';

src/core_plugins/metrics/public/components/vis_types/gauge/vis.js

@@ -1,4 +1,5 @@
-import React, { PropTypes } from 'react';
+import PropTypes from 'prop-types';
+import React from 'react';
 import tickFormatter from '../../lib/tick_formatter';
 import _ from 'lodash';
 import Gauge from 'plugins/metrics/visualizations/components/gauge';

src/core_plugins/metrics/public/components/vis_types/markdown/series.js

@@ -1,4 +1,5 @@
-import React, { PropTypes } from 'react';
+import PropTypes from 'prop-types';
+import React from 'react';
 import AddDeleteButtons from '../../add_delete_buttons';
 import { SeriesConfig } from '../../series_config';
 import Sortable from 'react-anything-sortable';

src/core_plugins/metrics/public/components/vis_types/markdown/vis.js

@@ -1,4 +1,5 @@
-import React, { PropTypes } from 'react';
+import PropTypes from 'prop-types';
+import React from 'react';
 import _ from 'lodash';
 import color from 'color';
 import Markdown from 'react-markdown';

src/core_plugins/metrics/public/components/vis_types/metric/series.js

@@ -1,4 +1,5 @@
-import React, { PropTypes } from 'react';
+import PropTypes from 'prop-types';
+import React from 'react';
 import ColorPicker from '../../color_picker';
 import AddDeleteButtons from '../../add_delete_buttons';
 import { SeriesConfig } from '../../series_config';

src/core_plugins/metrics/public/components/vis_types/metric/vis.js

@@ -1,4 +1,5 @@
-import React, { PropTypes } from 'react';
+import PropTypes from 'prop-types';
+import React from 'react';
 import tickFormatter from '../../lib/tick_formatter';
 import _ from 'lodash';
 import Metric from 'plugins/metrics/visualizations/components/metric';

src/core_plugins/metrics/public/components/vis_types/timeseries/config.js

@@ -1,4 +1,5 @@
-import React, { PropTypes } from 'react';
+import PropTypes from 'prop-types';
+import React from 'react';
 import Select from 'react-select';
 import DataFormatPicker from '../../data_format_picker';
 import createSelectHandler from '../../lib/create_select_handler';

src/core_plugins/metrics/public/components/vis_types/timeseries/series.js

@@ -1,4 +1,5 @@
-import React, { PropTypes } from 'react';
+import PropTypes from 'prop-types';
+import React from 'react';
 import ColorPicker from '../../color_picker';
 import AddDeleteButtons from '../../add_delete_buttons';
 import SeriesConfig from './config';

src/core_plugins/metrics/public/components/vis_types/timeseries/vis.js

@@ -1,4 +1,5 @@
-import React, { PropTypes } from 'react';
+import PropTypes from 'prop-types';
+import React from 'react';
 import tickFormatter from '../../lib/tick_formatter';
 import _ from 'lodash';
 import Timeseries from 'plugins/metrics/visualizations/components/timeseries';

src/core_plugins/metrics/public/components/vis_types/top_n/series.js

@@ -1,4 +1,5 @@
-import React, { PropTypes } from 'react';
+import PropTypes from 'prop-types';
+import React from 'react';
 import ColorPicker from '../../color_picker';
 import AddDeleteButtons from '../../add_delete_buttons';
 import { SeriesConfig } from '../../series_config';

src/core_plugins/metrics/public/components/vis_types/top_n/vis.js

@@ -6,7 +6,9 @@ import getLastValue from 'plugins/metrics/visualizations/lib/get_last_value';
 import color from 'color';
 import replaceVars from '../../lib/replace_vars';
 
-import React, { PropTypes } from 'react';
+import PropTypes from 'prop-types';
+
+import React from 'react';
 function TopNVisualization(props) {
   const { backgroundColor, model, visData } = props;
 

src/core_plugins/metrics/public/components/visualization.js

@@ -1,4 +1,5 @@
-import React, { PropTypes } from 'react';
+import PropTypes from 'prop-types';
+import React from 'react';
 import _ from 'lodash';
 
 import timeseries from './vis_types/timeseries/vis';

src/core_plugins/metrics/public/components/yes_no.js

@@ -1,4 +1,5 @@
-import React, { PropTypes } from 'react';
+import PropTypes from 'prop-types';
+import React from 'react';
 import _ from 'lodash';
 
 function YesNo(props) {

src/core_plugins/metrics/public/visualizations/components/annotation.js

@@ -1,4 +1,5 @@
-import React, { Component, PropTypes } from 'react';
+import PropTypes from 'prop-types';
+import React, { Component } from 'react';
 import moment from 'moment';
 import reactcss from 'reactcss';
 class Annotation extends Component {

src/core_plugins/metrics/public/visualizations/components/flot_chart.js

@@ -1,4 +1,5 @@
-import React, { Component, PropTypes } from 'react';
+import PropTypes from 'prop-types';
+import React, { Component } from 'react';
 import { findDOMNode } from 'react-dom';
 import _ from 'lodash';
 import $ from '../lib/flot';

src/core_plugins/metrics/public/visualizations/components/gauge.js

@@ -1,5 +1,6 @@
 import _ from 'lodash';
-import React, { Component, PropTypes } from 'react';
+import PropTypes from 'prop-types';
+import React, { Component } from 'react';
 import getLastValue from '../lib/get_last_value';
 import getValueBy from '../lib/get_value_by';
 import GaugeVis from './gauge_vis';

src/core_plugins/metrics/public/visualizations/components/gauge_vis.js

@@ -1,4 +1,5 @@
-import React, { Component, PropTypes } from 'react';
+import PropTypes from 'prop-types';
+import React, { Component } from 'react';
 import _ from 'lodash';
 import reactcss from 'reactcss';
 import calculateCorrdinates from '../lib/calculate_corrdinates';

src/core_plugins/metrics/public/visualizations/components/horizontal_legend.js

@@ -1,4 +1,5 @@
-import React, { PropTypes } from 'react';
+import PropTypes from 'prop-types';
+import React from 'react';
 import createLegendSeries from '../lib/create_legend_series';
 import reactcss from 'reactcss';
 

src/core_plugins/metrics/public/visualizations/components/legend.js

@@ -1,4 +1,5 @@
-import React, { PropTypes } from 'react';
+import PropTypes from 'prop-types';
+import React from 'react';
 import VerticalLegend from './vertical_legend';
 import HorizontalLegend from './horizontal_legend';
 

src/core_plugins/metrics/public/visualizations/components/metric.js

@@ -1,4 +1,5 @@
-import React, { Component, PropTypes } from 'react';
+import PropTypes from 'prop-types';
+import React, { Component } from 'react';
 import _ from 'lodash';
 import getLastValue from '../lib/get_last_value';
 import reactcss from 'reactcss';

src/core_plugins/metrics/public/visualizations/components/resize.js

@@ -1,4 +1,5 @@
-import React, { Component, PropTypes } from 'react';
+import PropTypes from 'prop-types';
+import React, { Component } from 'react';
 import { findDOMNode } from 'react-dom';
 class Resize extends Component {
 

src/core_plugins/metrics/public/visualizations/components/timeseries.js

@@ -1,4 +1,5 @@
-import React, { Component, PropTypes } from 'react';
+import PropTypes from 'prop-types';
+import React, { Component } from 'react';
 import _ from 'lodash';
 import getLastValue from '../lib/get_last_value';
 import TimeseriesChart from './timeseries_chart';

src/core_plugins/metrics/public/visualizations/components/timeseries_chart.js

@@ -1,4 +1,5 @@
-import React, { Component, PropTypes } from 'react';
+import PropTypes from 'prop-types';
+import React, { Component } from 'react';
 import moment from 'moment';
 import reactcss from 'reactcss';
 import FlotChart from './flot_chart';

src/core_plugins/metrics/public/visualizations/components/top_n.js

@@ -1,4 +1,5 @@
-import React, { Component, PropTypes } from 'react';
+import PropTypes from 'prop-types';
+import React, { Component } from 'react';
 import _ from 'lodash';
 import getLastValue from '../lib/get_last_value';
 import reactcss from 'reactcss';

src/core_plugins/metrics/public/visualizations/components/vertical_legend.js

@@ -1,4 +1,5 @@
-import React, { PropTypes } from 'react';
+import PropTypes from 'prop-types';
+import React from 'react';
 import createLegendSeries from '../lib/create_legend_series';
 import reactcss from 'reactcss';
 

ui_framework/doc_site/src/components/guide_code_viewer/guide_code_viewer.js

@@ -1,7 +1,5 @@
-import React, {
-  Component,
-  PropTypes,
-} from 'react';
+import PropTypes from 'prop-types';
+import React, { Component } from 'react';
 
 import classNames from 'classnames';
 import hljs from 'highlight.js';

ui_framework/doc_site/src/components/guide_demo/guide_demo.js

@@ -1,7 +1,5 @@
-import React, {
-  Component,
-  PropTypes,
-} from 'react';
+import PropTypes from 'prop-types';
+import React, { Component } from 'react';
 
 import classNames from 'classnames';
 

ui_framework/doc_site/src/components/guide_nav/guide_nav.js

@@ -1,7 +1,5 @@
-import React, {
-  Component,
-  PropTypes,
-} from 'react';
+import PropTypes from 'prop-types';
+import React, { Component } from 'react';
 
 import {
   Link,

ui_framework/doc_site/src/components/guide_page/guide_page.js

@@ -1,7 +1,5 @@
-import React, {
-  Component,
-  PropTypes,
-} from 'react';
+import PropTypes from 'prop-types';
+import React, { Component } from 'react';
 
 import {
   GuidePageSideNav,

ui_framework/doc_site/src/components/guide_page_side_nav/guide_page_side_nav.js

@@ -1,6 +1,5 @@
-import React, {
-  PropTypes,
-} from 'react';
+import PropTypes from 'prop-types';
+import React from 'react';
 
 export const GuidePageSideNav = props =>  {
   return (

ui_framework/doc_site/src/components/guide_page_side_nav/guide_page_side_nav_item.js

@@ -1,7 +1,5 @@
-import React, {
-  Component,
-  PropTypes,
-} from 'react';
+import PropTypes from 'prop-types';
+import React, { Component } from 'react';
 
 export class GuidePageSideNavItem extends Component {
 

ui_framework/doc_site/src/components/guide_sandbox/guide_sandbox_code_toggle.js

@@ -1,7 +1,5 @@
-import React, {
-  Component,
-  PropTypes,
-} from 'react';
+import PropTypes from 'prop-types';
+import React, { Component } from 'react';
 
 export class GuideSandboxCodeToggle extends Component {
   constructor(props) {

ui_framework/doc_site/src/components/guide_section/guide_section.js

@@ -1,7 +1,5 @@
-import React, {
-  Component,
-  PropTypes,
-} from 'react';
+import PropTypes from 'prop-types';
+import React, { Component } from 'react';
 
 import Slugify from '../../services/string/slugify';
 

ui_framework/doc_site/src/views/app_view.js

@@ -1,7 +1,5 @@
-import React, {
-  Component,
-  PropTypes,
-} from 'react';
+import PropTypes from 'prop-types';
+import React, { Component } from 'react';
 
 import classNames from 'classnames';
 

ui_framework/src/components/accessibility/screen_reader.js

@@ -1,7 +1,5 @@
-import {
-  cloneElement,
-  PropTypes,
-} from 'react';
+import PropTypes from 'prop-types';
+import { cloneElement } from 'react';
 import classNames from 'classnames';
 
 

ui_framework/src/components/action_item/action_item.js

@@ -1,6 +1,5 @@
-import React, {
-  PropTypes,
-} from 'react';
+import PropTypes from 'prop-types';
+import React from 'react';
 import classNames from 'classnames';
 
 export const KuiActionItem = ({ children, className, ...rest }) => {

ui_framework/src/components/button/button.js

@@ -1,6 +1,5 @@
-import React, {
-  PropTypes,
-} from 'react';
+import PropTypes from 'prop-types';
+import React from 'react';
 import classNames from 'classnames';
 
 import { KuiButtonIcon } from './button_icon/button_icon';

ui_framework/src/components/button/button_group/button_group.js

@@ -1,6 +1,5 @@
-import React, {
-  PropTypes,
-} from 'react';
+import PropTypes from 'prop-types';
+import React from 'react';
 
 import classNames from 'classnames';
 

ui_framework/src/components/button/button_icon/button_icon.js

@@ -1,6 +1,5 @@
-import React, {
-  PropTypes,
-} from 'react';
+import PropTypes from 'prop-types';
+import React from 'react';
 
 import classNames from 'classnames';
 

ui_framework/src/components/card/card.js

@@ -1,6 +1,5 @@
-import React, {
-  PropTypes,
-} from 'react';
+import PropTypes from 'prop-types';
+import React from 'react';
 import classNames from 'classnames';
 
 export const KuiCard = ({ children, className, ...rest }) => {

ui_framework/src/components/card/card_description.js

@@ -1,6 +1,5 @@
-import React, {
-  PropTypes,
-} from 'react';
+import PropTypes from 'prop-types';
+import React from 'react';
 import classNames from 'classnames';
 
 export const KuiCardDescription = ({ children, className, ...rest }) => {

ui_framework/src/components/card/card_description_text.js

@@ -1,6 +1,5 @@
-import React, {
-  PropTypes,
-} from 'react';
+import PropTypes from 'prop-types';
+import React from 'react';
 import classNames from 'classnames';
 
 export const KuiCardDescriptionText = ({ children, className, ...rest }) => {

ui_framework/src/components/card/card_description_title.js

@@ -1,6 +1,5 @@
-import React, {
-  PropTypes,
-} from 'react';
+import PropTypes from 'prop-types';
+import React from 'react';
 import classNames from 'classnames';
 
 export const KuiCardDescriptionTitle = ({ children, className, ...rest }) => {

ui_framework/src/components/card/card_footer.js

@@ -1,6 +1,5 @@
-import React, {
-  PropTypes,
-} from 'react';
+import PropTypes from 'prop-types';
+import React from 'react';
 import classNames from 'classnames';
 
 export const KuiCardFooter = ({ children, className, ...rest }) => {

ui_framework/src/components/card/card_group.js

@@ -1,6 +1,5 @@
-import React, {
-  PropTypes,
-} from 'react';
+import PropTypes from 'prop-types';
+import React from 'react';
 import classNames from 'classnames';
 
 export const KuiCardGroup = ({ children, className, isUnited, ...rest }) => {

ui_framework/src/components/collapse_button/collapse_button.js

@@ -1,6 +1,5 @@
-import React, {
-  PropTypes,
-} from 'react';
+import PropTypes from 'prop-types';
+import React from 'react';
 import classNames from 'classnames';
 
 const DIRECTIONS = [

ui_framework/src/components/empty_table_prompt/empty_table_prompt.js

@@ -1,3 +1,4 @@
+import PropTypes from 'prop-types';
 import React from 'react';
 import classnames from 'classnames';
 
@@ -19,7 +20,7 @@ export function KuiEmptyTablePrompt({ actions, message, className, ...rest }) {
 }
 
 KuiEmptyTablePrompt.propTypes = {
-  message: React.PropTypes.string.isRequired,
-  actions: React.PropTypes.node,
-  className: React.PropTypes.string,
+  message: PropTypes.string.isRequired,
+  actions: PropTypes.node,
+  className: PropTypes.string,
 };

ui_framework/src/components/empty_table_prompt/empty_table_prompt_actions.js

@@ -1,3 +1,4 @@
+import PropTypes from 'prop-types';
 import React from 'react';
 import classNames from 'classnames';
 
@@ -6,6 +7,6 @@ export const KuiEmptyTablePromptActions = ({ children, className, ...rest }) =>
   return <div className={classes} {...rest}>{children}</div>;
 };
 KuiEmptyTablePromptActions.propTypes = {
-  children: React.PropTypes.node,
-  className: React.PropTypes.string
+  children: PropTypes.node,
+  className: PropTypes.string
 };