Merge pull request #2929 from weaveworks/react-16

Upgrade to React 16

client/app/scripts/components/__tests__/node-details-test.js

@@ -1,6 +1,6 @@
 import React from 'react';
 import Immutable from 'immutable';
-import TestUtils from 'react-dom/lib/ReactTestUtils';
+import TestUtils from 'react-dom/test-utils';
 import { Provider } from 'react-redux';
 import configureStore from '../../stores/configureStore';
 

client/app/scripts/components/debug-toolbar.js

@@ -1,6 +1,5 @@
 /* eslint react/jsx-no-bind: "off" */
 import React from 'react';
-import Perf from 'react-addons-perf';
 import { connect } from 'react-redux';
 import { sampleSize, sample, random, range, flattenDeep, times } from 'lodash';
 import { fromJS, Set as makeSet } from 'immutable';
@@ -100,21 +99,6 @@ function addAllMetricVariants(availableMetrics) {
   };
 }
 
-
-function stopPerf() {
-  Perf.stop();
-  const measurements = Perf.getLastMeasurements();
-  Perf.printInclusive(measurements);
-  Perf.printWasted(measurements);
-}
-
-
-function startPerf(delay) {
-  Perf.start();
-  setTimeout(stopPerf, delay * 1000);
-}
-
-
 export function showingDebugToolbar() {
   return (('debugToolbar' in localStorage && JSON.parse(localStorage.debugToolbar))
     || window.location.pathname.indexOf('debug') > -1);
@@ -365,13 +349,6 @@ class DebugToolbar extends React.Component {
           <button onClick={() => this.setShortLived()}>Toggle short-lived nodes</button>
           <button onClick={() => this.setIntermittent()}>Toggle intermittent nodes</button>
         </div>
-
-        <div>
-          <strong>Measure React perf for </strong>
-          <button onClick={() => startPerf(2)}>2s</button>
-          <button onClick={() => startPerf(5)}>5s</button>
-          <button onClick={() => startPerf(10)}>10s</button>
-        </div>
       </div>
     );
   }

client/app/scripts/components/dev-tools.js

@@ -1,13 +0,0 @@
-import React from 'react';
-import { createDevTools } from 'redux-devtools';
-import LogMonitor from 'redux-devtools-log-monitor';
-import DockMonitor from 'redux-devtools-dock-monitor';
-
-export default createDevTools((
-  <DockMonitor
-    defaultIsVisible={false}
-    toggleVisibilityKey="ctrl-h"
-    changePositionKey="ctrl-w">
-    <LogMonitor />
-  </DockMonitor>
-));

client/app/scripts/components/node-details/__tests__/node-details-table-test.js

@@ -1,5 +1,5 @@
 import React from 'react';
-import TestUtils from 'react-dom/lib/ReactTestUtils';
+import TestUtils from 'react-dom/test-utils';
 import { Provider } from 'react-redux';
 import configureStore from '../../../stores/configureStore';
 

client/app/scripts/components/sparkline.js

@@ -105,7 +105,7 @@ export default class Sparkline extends React.Component {
       ? this.props.hoverColor
       : this.props.strokeColor;
     const strokeWidth = this.props.strokeWidth * (this.props.hovered ? HOVER_STROKE_MULTIPLY : 1);
-    const strokeDasharray = hasData || `${dash}, ${dash}`;
+    const strokeDasharray = hasData ? undefined : `${dash}, ${dash}`;
     const radius = this.props.circleRadius * (this.props.hovered ? HOVER_RADIUS_MULTIPLY : 1);
     const fillOpacity = this.props.hovered ? 1 : 0.6;
     const circleColor = hasData && this.props.hovered ? strokeColor : strokeColor;

client/app/scripts/components/view-mode-selector.js

@@ -42,7 +42,7 @@ class ViewModeSelector extends React.Component {
       <div
         className={className}
         disabled={!isEnabled}
-        onClick={isEnabled && onClick}
+        onClick={isEnabled ? onClick : undefined}
         title={`View ${label.toLowerCase()}`}>
         <span className={icons} style={{ fontSize: 12 }} />
         <span className="label">{label}</span>

client/app/scripts/main.dev.js

@@ -2,15 +2,11 @@ import 'babel-polyfill';
 import React from 'react';
 import ReactDOM from 'react-dom';
 import { Provider } from 'react-redux';
-import Immutable from 'immutable';
-import installDevTools from 'immutable-devtools';
 
 import '../styles/main.scss';
 import '../images/favicon.ico';
 import configureStore from './stores/configureStore.dev';
-import DevTools from './components/dev-tools';
 
-installDevTools(Immutable);
 const store = configureStore();
 
 function renderApp() {
@@ -19,7 +15,6 @@ function renderApp() {
     (
       <Provider store={store}>
         <App />
-        <DevTools />
       </Provider>
     ), document.getElementById('app')
   );

client/app/scripts/stores/configureStore.dev.js

@@ -1,18 +1,16 @@
 import { createStore, applyMiddleware, compose } from 'redux';
 import thunkMiddleware from 'redux-thunk';
 
-import DevTools from '../components/dev-tools';
 import { initialState, rootReducer } from '../reducers/root';
 
 export default function configureStore() {
+  /* eslint-disable no-underscore-dangle */
+  const composeEnhancers = window.__REDUX_DEVTOOLS_EXTENSION_COMPOSE__ || compose;
+  /* eslint-enable */
   const store = createStore(
     rootReducer,
     initialState,
-    compose(
-      // applyMiddleware(thunkMiddleware, createLogger()),
-      applyMiddleware(thunkMiddleware),
-      DevTools.instrument()
-    )
+    composeEnhancers(applyMiddleware(thunkMiddleware)),
   );
 
   if (module.hot) {