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/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) {

client/package.json

@@ -31,9 +31,8 @@
     "page": "1.7.1",
     "prop-types": "15.6.0",
     "rc-slider": "8.3.2",
-    "react": "15.6.1",
-    "react-addons-perf": "15.4.2",
-    "react-dom": "15.6.1",
+    "react": "16.1.0",
+    "react-dom": "16.1.0",
     "react-motion": "0.5.2",
     "react-redux": "5.0.6",
     "redux": "3.7.2",
@@ -44,7 +43,7 @@
     "reselect": "3.0.1",
     "reselect-map": "1.0.3",
     "styled-components": "^2.2.1",
-    "weaveworks-ui-components": "git+https://github.com/weaveworks/ui-components.git#v0.1.52",
+    "weaveworks-ui-components": "git+https://github.com/weaveworks/ui-components.git#v0.2.1",
     "whatwg-fetch": "2.0.3",
     "xterm": "2.9.2"
   },
@@ -73,17 +72,12 @@
     "html-webpack-plugin": "2.30.1",
     "http-proxy": "1.16.2",
     "http-proxy-rules": "1.1.1",
-    "immutable-devtools": "0.0.7",
     "jest": "21.2.1",
     "jest-cli": "21.2.1",
     "json-loader": "0.5.7",
     "mockdate": "2.0.2",
     "node-sass": "^4.6.0",
     "postcss-loader": "1.3.3",
-    "react-addons-perf": "15.4.2",
-    "redux-devtools": "3.4.0",
-    "redux-devtools-dock-monitor": "1.1.2",
-    "redux-devtools-log-monitor": "1.3.0",
     "sass-loader": "6.0.6",
     "style-loader": "0.19.0",
     "url": "0.11.0",
@@ -112,6 +106,7 @@
       ".*": "<rootDir>/node_modules/babel-jest"
     },
     "setupFiles": [
+      "<rootDir>/test/support/raf.js",
       "<rootDir>/test/support/localStorage.js"
     ],
     "roots": [

client/test/support/raf.js

@@ -0,0 +1,4 @@
+// https://github.com/facebook/jest/issues/4545#issuecomment-332762365
+global.requestAnimationFrame = (callback) => {
+  setTimeout(callback, 0);
+};