Fix deprecations (#88)

* Fix some optimization bailouts

* Use prop-types package

* Make error comp functional

* Remove unused css transition dep

* Remove unused immutability helper dep

* Align react versions in package.json

frontend/package.json

@@ -39,14 +39,13 @@
   "main": "./index.js",
   "dependencies": {
     "debug": "^2.2.0",
-    "immutability-helper": "^2.0.0",
     "immutable": "^3.8.1",
     "normalize.css": "^5.0.0",
-    "react": "^15.3.1",
-    "react-addons-css-transition-group": "^15.3.1",
+    "prop-types": "^15.5.10",
+    "react": "^15.6.1",
     "react-dnd": "^2.1.4",
     "react-dnd-html5-backend": "^2.1.2",
-    "react-dom": "^15.3.1",
+    "react-dom": "^15.6.1",
     "react-mdl": "^1.9.0",
     "react-modal": "^1.6.4",
     "react-redux": "^4.4.5",
@@ -77,7 +76,7 @@
     "jest": "^20.0.4",
     "node-sass": "^4.5.3",
     "prettier": "^1.6.0",
-    "react-test-renderer": "^15.4.2",
+    "react-test-renderer": "^15.6.1",
     "redux-devtools": "^3.3.1",
     "sass-loader": "^6.0.6",
     "style-loader": "^0.18.2",

frontend/src/component/app.jsx

@@ -1,4 +1,5 @@
-import React, { Component, PropTypes } from 'react';
+import React, { Component } from 'react';
+import PropTypes from 'prop-types';
 import {
     Layout,
     Drawer,
@@ -39,7 +40,7 @@ export default class App extends Component {
     };
 
     static contextTypes = {
-        router: React.PropTypes.object,
+        router: PropTypes.object,
     };
 
     componentWillReceiveProps(nextProps) {

frontend/src/component/client-instance/client-instance-component.js

@@ -1,4 +1,5 @@
-import React, { Component, PropTypes } from 'react';
+import React, { Component } from 'react';
+import PropTypes from 'prop-types';
 import { DataTable, TableHeader } from 'react-mdl';
 
 class ClientStrategies extends Component {

frontend/src/component/common/index.js

@@ -1,7 +1,6 @@
-const React = require('react');
-import styles from './common.scss';
-
-const {
+import React from 'react';
+import { Link } from 'react-router';
+import {
     List,
     ListItem,
     ListItemContent,
@@ -9,8 +8,8 @@ const {
     Icon,
     Switch,
     MenuItem,
-} = require('react-mdl');
-const { Link } = require('react-router');
+} from 'react-mdl';
+import styles from './common.scss';
 
 export { styles };
 

frontend/src/component/error/error-component.jsx

@@ -1,29 +1,28 @@
-import React, { PropTypes } from 'react';
+import React from 'react';
+import PropTypes from 'prop-types';
 
 import { Snackbar, Icon } from 'react-mdl';
 
-class ErrorComponent extends React.Component {
-    static propTypes = {
-        errors: PropTypes.array.isRequired,
-        muteError: PropTypes.func.isRequired,
-    };
+const ErrorComponent = ({ errors, ...props }) => {
+    const showError = errors.length > 0;
+    const error = showError ? errors[0] : undefined;
+    const muteError = () => props.muteError(error);
+    return (
+        <Snackbar
+            action="Dismiss"
+            active={showError}
+            onActionClick={muteError}
+            onTimeout={muteError}
+            timeout={10000}
+        >
+            <Icon name="question_answer" /> {error}
+        </Snackbar>
+    );
+};
 
-    render() {
-        const showError = this.props.errors.length > 0;
-        const error = showError ? this.props.errors[0] : undefined;
-        const muteError = () => this.props.muteError(error);
-        return (
-            <Snackbar
-                action="Dismiss"
-                active={showError}
-                onActionClick={muteError}
-                onTimeout={muteError}
-                timeout={10000}
-            >
-                <Icon name="question_answer" /> {error}
-            </Snackbar>
-        );
-    }
-}
+ErrorComponent.propTypes = {
+    errors: PropTypes.array.isRequired,
+    muteError: PropTypes.func.isRequired,
+};
 
 export default ErrorComponent;

frontend/src/component/feature/feature-list-item-component.jsx

@@ -1,4 +1,5 @@
-import React, { PropTypes } from 'react';
+import React from 'react';
+import PropTypes from 'prop-types';
 import { Link } from 'react-router';
 import { Switch, Chip, ListItem } from 'react-mdl';
 import Progress from './progress';

frontend/src/component/feature/form-add-component.jsx

@@ -1,4 +1,5 @@
-import React, { PropTypes } from 'react';
+import React from 'react';
+import PropTypes from 'prop-types';
 import { Card, CardTitle } from 'react-mdl';
 
 import FormComponent from './form';

frontend/src/component/feature/form/index.jsx

@@ -1,4 +1,5 @@
-import React, { Component, PropTypes } from 'react';
+import React, { Component } from 'react';
+import PropTypes from 'prop-types';
 import { Textfield, Switch } from 'react-mdl';
 import StrategiesSection from './strategies-section-container';
 

frontend/src/component/feature/form/strategies-add.jsx

@@ -1,4 +1,5 @@
-import React, { PropTypes } from 'react';
+import React from 'react';
+import PropTypes from 'prop-types';
 import { Menu, MenuItem, IconButton } from 'react-mdl';
 
 class AddStrategy extends React.Component {

frontend/src/component/feature/form/strategies-list.jsx

@@ -1,4 +1,5 @@
-import React, { PropTypes } from 'react';
+import React from 'react';
+import PropTypes from 'prop-types';
 import ConfigureStrategy from './strategy-configure';
 import { DragDropContext } from 'react-dnd';
 import HTML5Backend from 'react-dnd-html5-backend';

frontend/src/component/feature/form/strategies-section.jsx

@@ -1,4 +1,5 @@
-import React, { PropTypes } from 'react';
+import React from 'react';
+import PropTypes from 'prop-types';
 import { ProgressBar } from 'react-mdl';
 import StrategiesList from './strategies-list';
 import AddStrategy from './strategies-add';

frontend/src/component/feature/form/strategy-configure.jsx

@@ -1,4 +1,5 @@
-import React, { PropTypes } from 'react';
+import React from 'react';
+import PropTypes from 'prop-types';
 import {
     Textfield,
     Button,

frontend/src/component/feature/form/strategy-input-list.jsx

@@ -1,4 +1,5 @@
-import React, { Component, PropTypes } from 'react';
+import React, { Component } from 'react';
+import PropTypes from 'prop-types';
 import { Textfield, IconButton, Chip } from 'react-mdl';
 
 export default class InputList extends Component {

frontend/src/component/feature/list-component.jsx

@@ -1,4 +1,5 @@
-import React, { PropTypes } from 'react';
+import React from 'react';
+import PropTypes from 'prop-types';
 import Feature from './feature-list-item-component';
 import { Link } from 'react-router';
 import {
@@ -26,11 +27,11 @@ export default class FeatureListComponent extends React.PureComponent {
         fetchFeatureToggles: PropTypes.func.isRequired,
         fetchFeatureMetrics: PropTypes.func.isRequired,
         updateSetting: PropTypes.func.isRequired,
-        settings: React.PropTypes.object,
+        settings: PropTypes.object,
     };
 
     static contextTypes = {
-        router: React.PropTypes.object,
+        router: PropTypes.object,
     };
 
     componentDidMount() {

frontend/src/component/feature/metric-component.jsx

@@ -1,4 +1,5 @@
-import React, { PropTypes } from 'react';
+import React from 'react';
+import PropTypes from 'prop-types';
 import { Grid, Cell, Icon, Chip, ChipContact } from 'react-mdl';
 import Progress from './progress';
 import { Link } from 'react-router';

frontend/src/component/feature/progress.jsx

@@ -1,4 +1,5 @@
-import React, { PropTypes, Component } from 'react';
+import React, { Component } from 'react';
+import PropTypes from 'prop-types';
 import styles from './progress-styles.scss';
 
 class Progress extends Component {

frontend/src/component/feature/view-component.jsx

@@ -1,4 +1,5 @@
-import React, { PropTypes } from 'react';
+import React from 'react';
+import PropTypes from 'prop-types';
 import {
     Tabs,
     Tab,

frontend/src/component/history/history-item-diff.jsx

@@ -1,4 +1,5 @@
-import React, { PropTypes, PureComponent } from 'react';
+import React, { PureComponent } from 'react';
+import PropTypes from 'prop-types';
 
 import style from './history.scss';
 

frontend/src/component/history/history-item-json.jsx

@@ -1,4 +1,5 @@
-import React, { PropTypes, PureComponent } from 'react';
+import React, { PureComponent } from 'react';
+import PropTypes from 'prop-types';
 
 import style from './history.scss';
 

frontend/src/component/history/history-list-toggle-component.jsx

@@ -1,4 +1,5 @@
-import React, { Component, PropTypes } from 'react';
+import React, { Component } from 'react';
+import PropTypes from 'prop-types';
 import HistoryList from './history-list-container';
 
 class HistoryListToggle extends Component {

frontend/src/component/strategies/add-strategy.jsx

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

frontend/src/component/strategies/list-component.jsx

@@ -1,4 +1,5 @@
 import React, { Component } from 'react';
+import PropTypes from 'prop-types';
 import { Link } from 'react-router';
 
 import {
@@ -13,7 +14,7 @@ import { HeaderTitle } from '../common';
 
 class StrategiesListComponent extends Component {
     static contextTypes = {
-        router: React.PropTypes.object,
+        router: PropTypes.object,
     };
 
     componentDidMount() {

frontend/src/component/strategies/show-strategy-component.js

@@ -1,4 +1,5 @@
-import React, { PropTypes, PureComponent } from 'react';
+import React, { PureComponent } from 'react';
+import PropTypes from 'prop-types';
 import { Grid, Cell, List, ListItem, ListItemContent } from 'react-mdl';
 import { AppsLinkList, TogglesLinkList } from '../common';
 

frontend/src/component/strategies/strategy-details-component.jsx

@@ -1,4 +1,5 @@
-import React, { PropTypes, Component } from 'react';
+import React, { Component } from 'react';
+import PropTypes from 'prop-types';
 import { hashHistory } from 'react-router';
 import { Tabs, Tab, ProgressBar, Grid, Cell } from 'react-mdl';
 import ShowStrategy from './show-strategy-component';

frontend/src/component/user/show-user-component.jsx

@@ -1,4 +1,5 @@
-import React, { PropTypes } from 'react';
+import React from 'react';
+import PropTypes from 'prop-types';
 import { Icon, Tooltip } from 'react-mdl';
 
 export default class ShowUserComponent extends React.Component {

frontend/src/component/user/user-component.jsx

@@ -1,4 +1,5 @@
-import React, { PropTypes } from 'react';
+import React from 'react';
+import PropTypes from 'prop-types';
 import { Textfield, Button } from 'react-mdl';
 import Modal from 'react-modal';
 

frontend/src/data/feature-metrics-api.js

@@ -1,4 +1,4 @@
-const { throwIfNotSuccess } = require('./helper');
+import { throwIfNotSuccess } from './helper';
 
 const URI = 'api/admin/metrics/feature-toggles';
 

frontend/src/page/applications/view.js

@@ -1,4 +1,5 @@
-import React, { PropTypes } from 'react';
+import React from 'react';
+import PropTypes from 'prop-types';
 import ApplicationEditComponent from '../../component/application/application-edit-container';
 
 const render = ({ params }) => (

frontend/src/page/features/show.js

@@ -1,4 +1,5 @@
-import React, { PureComponent, PropTypes } from 'react';
+import React, { PureComponent } from 'react';
+import PropTypes from 'prop-types';
 import ViewFeatureToggle from '../../component/feature/view-container';
 
 export default class Features extends PureComponent {

frontend/src/page/history/toggle.js

@@ -1,4 +1,5 @@
-import React, { PropTypes } from 'react';
+import React from 'react';
+import PropTypes from 'prop-types';
 import HistoryListToggle from '../../component/history/history-list-toggle-container';
 
 const render = ({ params }) => (

frontend/src/page/strategies/show.js

@@ -1,4 +1,5 @@
-import React, { PropTypes } from 'react';
+import React from 'react';
+import PropTypes from 'prop-types';
 import ShowStrategy from '../../component/strategies/strategy-details-container';
 
 const render = ({ params }) => (

frontend/yarn.lock

@@ -1243,10 +1243,6 @@ center-align@^0.1.1:
     align-text "^0.1.3"
     lazy-cache "^1.0.3"
 
-chain-function@^1.0.0:
-  version "1.0.0"
-  resolved "https://registry.yarnpkg.com/chain-function/-/chain-function-1.0.0.tgz#0d4ab37e7e18ead0bdc47b920764118ce58733dc"
-
 chalk@^1.1.0, chalk@^1.1.1, chalk@^1.1.3:
   version "1.1.3"
   resolved "https://registry.yarnpkg.com/chalk/-/chalk-1.1.3.tgz#a8115c55e4a702fe4d150abd3872822a7e09fc98"
@@ -1829,7 +1825,7 @@ doctrine@^2.0.0:
     esutils "^2.0.2"
     isarray "^1.0.0"
 
-dom-helpers@^3.0.0, dom-helpers@^3.2.0:
+dom-helpers@^3.0.0:
   version "3.2.1"
   resolved "https://registry.yarnpkg.com/dom-helpers/-/dom-helpers-3.2.1.tgz#3203e07fed217bd1f424b019735582fc37b2825a"
 
@@ -2793,12 +2789,6 @@ ignore@^3.3.3:
   version "3.3.3"
   resolved "https://registry.yarnpkg.com/ignore/-/ignore-3.3.3.tgz#432352e57accd87ab3110e82d3fea0e47812156d"
 
-immutability-helper@^2.0.0:
-  version "2.2.3"
-  resolved "https://registry.yarnpkg.com/immutability-helper/-/immutability-helper-2.2.3.tgz#681a0ec9ba2a243b9898564e39623c83d9ce1985"
-  dependencies:
-    invariant "^2.2.0"
-
 immutable@^3.8.1:
   version "3.8.1"
   resolved "https://registry.yarnpkg.com/immutable/-/immutable-3.8.1.tgz#200807f11ab0f72710ea485542de088075f68cd2"
@@ -4615,12 +4605,6 @@ rc@^1.1.7:
     minimist "^1.2.0"
     strip-json-comments "~2.0.1"
 
-react-addons-css-transition-group@^15.3.1:
-  version "15.6.0"
-  resolved "https://registry.yarnpkg.com/react-addons-css-transition-group/-/react-addons-css-transition-group-15.6.0.tgz#69887cf6e4874d25cd66e22a699e29f0d648aba0"
-  dependencies:
-    react-transition-group "^1.2.0"
-
 react-deep-force-update@^1.0.0:
   version "1.0.1"
   resolved "https://registry.yarnpkg.com/react-deep-force-update/-/react-deep-force-update-1.0.1.tgz#f911b5be1d2a6fe387507dd6e9a767aa2924b4c7"
@@ -4646,7 +4630,7 @@ react-dom-factories@^1.0.0:
   version "1.0.0"
   resolved "https://registry.yarnpkg.com/react-dom-factories/-/react-dom-factories-1.0.0.tgz#f43c05e5051b304f33251618d5bc859b29e46b6d"
 
-react-dom@^15.3.1:
+react-dom@^15.6.1:
   version "15.6.1"
   resolved "https://registry.yarnpkg.com/react-dom/-/react-dom-15.6.1.tgz#2cb0ed4191038e53c209eb3a79a23e2a4cf99470"
   dependencies:
@@ -4713,7 +4697,7 @@ react-router@^3.0.0:
     prop-types "^15.5.6"
     warning "^3.0.0"
 
-react-test-renderer@^15.4.2:
+react-test-renderer@^15.6.1:
   version "15.6.1"
   resolved "https://registry.yarnpkg.com/react-test-renderer/-/react-test-renderer-15.6.1.tgz#026f4a5bb5552661fd2cc4bbcd0d4bc8a35ebf7e"
   dependencies:
@@ -4731,17 +4715,7 @@ react-transform-hmr@^1.0.3:
     global "^4.3.0"
     react-proxy "^1.1.7"
 
-react-transition-group@^1.2.0:
-  version "1.2.0"
-  resolved "https://registry.yarnpkg.com/react-transition-group/-/react-transition-group-1.2.0.tgz#b51fc921b0c3835a7ef7c571c79fc82c73e9204f"
-  dependencies:
-    chain-function "^1.0.0"
-    dom-helpers "^3.2.0"
-    loose-envify "^1.3.1"
-    prop-types "^15.5.6"
-    warning "^3.0.0"
-
-react@^15.3.1:
+react@^15.6.1:
   version "15.6.1"
   resolved "https://registry.yarnpkg.com/react/-/react-15.6.1.tgz#baa8434ec6780bde997cdc380b79cd33b96393df"
   dependencies: