Upgrade to React 16 and latest node.js version

.travis.yml

@@ -21,7 +21,7 @@ env:
     - COMPOSER_ROOT_VERSION=1.4.x-dev
     - DISPLAY=":99"
     - XVFBARGS=":99 -ac -screen 0 1024x768x16"
-    - TRAVIS_NODE_VERSION="6"
+    - TRAVIS_NODE_VERSION="10"
     - SS_BASE_URL="http://localhost:8080/"
     - SS_ENVIRONMENT_TYPE="dev"
 

client/src/boot/index.js

@@ -1,5 +1,4 @@
 /* global document */
-import { withRouter } from 'react-router';
 import ConfigHelpers from 'lib/Config';
 import Injector from 'lib/Injector';
 import reactRouteRegister from 'lib/ReactRouteRegister';
@@ -10,11 +9,11 @@ import applyConditionals from 'boot/applyConditionals';
 document.addEventListener('DOMContentLoaded', () => {
   const sectionConfig = ConfigHelpers.getSection('SilverStripe\\CampaignAdmin\\CampaignAdmin');
   reactRouteRegister.add({
-    path: sectionConfig.url,
-    component: withRouter(CampaignAdmin),
-    childRoutes: [
-      { path: ':type/:id/:view', component: CampaignAdmin },
-      { path: 'set/:id/:view', component: CampaignAdmin },
+    path: '/',
+    routes: [
+      { path: `/${sectionConfig.url}/set/:id/:view`, component: CampaignAdmin },
+      { path: `/${sectionConfig.url}/:type/:id/:view`, component: CampaignAdmin },
+      { path: `/${sectionConfig.url}`, component: CampaignAdmin },
     ],
   });
 

client/src/components/IntroScreen/IntroScreen.js

@@ -29,13 +29,13 @@ class IntroScreen extends Component {
         </p>
         <div className="campaign-info__links">
           {links.map((item) => (
-            <a key={item.text} href={item.link} target="_blank">{item.text}</a>
+            <a key={item.text} href={item.link} target="_blank" rel="noopener noreferrer">{item.text}</a>
           ))
           }
         </div>
         <div className="campaign-info__content-buttons">
           {button &&
-          <a className="btn btn-outline-secondary" href={button.link} target="_blank">
+          <a className="btn btn-outline-secondary" href={button.link} target="_blank" rel="noopener noreferrer">
             {button.text}
           </a>
           }

client/src/containers/CampaignAdmin/CampaignAdmin.js

@@ -4,7 +4,7 @@ import PropTypes from 'prop-types';
 import { connect } from 'react-redux';
 import { formValueSelector } from 'redux-form';
 import { bindActionCreators } from 'redux';
-import { withRouter } from 'react-router';
+import { withRouter } from 'react-router-dom';
 import getFormState from 'lib/getFormState';
 import backend from 'lib/Backend';
 import * as campaignActions from 'state/campaign/CampaignActions';
@@ -62,17 +62,17 @@ class CampaignAdmin extends Component {
 
   componentWillMount() {
     // Ensure default breadcrumbs are setup
-    const { breadcrumbs, title, params: { view, id } } = this.props;
+    const { breadcrumbs, title, match: { params: { id, view } } } = this.props;
     if (breadcrumbs.length === 0) {
       this.setBreadcrumbs(view, id, title);
     }
   }
 
   componentWillReceiveProps(props) {
-    const { title, params: { id, view } } = props;
+    const { title, match: { params: { id, view } } } = props;
     const hasChangedRoute = (
-      this.props.params.id !== id ||
-      this.props.params.view !== view ||
+      this.props.match.params.id !== id ||
+      this.props.match.params.view !== view ||
       this.props.title !== title
     );
     if (hasChangedRoute) {
@@ -119,7 +119,7 @@ class CampaignAdmin extends Component {
    * @return {String}
    */
   getActionRoute(id, view) {
-    return `${this.props.sectionConfig.url}/set/${id}/${view}`;
+    return `/${this.props.sectionConfig.url}/set/${id}/${view}`;
   }
 
   handleBackButtonClick(event) {
@@ -128,7 +128,7 @@ class CampaignAdmin extends Component {
       const last = this.props.breadcrumbs[this.props.breadcrumbs.length - 2];
       if (last && last.href) {
         event.preventDefault();
-        this.props.router.push(last.href);
+        this.props.history.push(last.href);
       }
     }
   }
@@ -155,7 +155,7 @@ class CampaignAdmin extends Component {
           const sectionUrl = this.props.sectionConfig.url;
           const id = response.record.id;
           this.props.campaignActions.setNewItem(id);
-          this.props.router.push(`${sectionUrl}/set/${id}/show`);
+          this.props.history.push(`/${sectionUrl}/set/${id}/show`);
         }
 
         return response;
@@ -167,7 +167,7 @@ class CampaignAdmin extends Component {
     // intercept the Add to Campaign submit and open the modal dialog instead
     if (name === 'action_cancel') {
       const url = this.props.sectionConfig.url;
-      this.props.router.push(url);
+      this.props.history.push(`/${url}`);
       event.preventDefault();
     }
   }
@@ -255,14 +255,14 @@ By removing this item all linked items will be removed unless used elsewhere.`;
    * @return {Object} - Instanciated React component
    */
   campaignEditCreateFn(Custom, props) {
-    const url = this.props.sectionConfig.url;
+    const url = `/${this.props.sectionConfig.url}`;
 
     // Route to the Campaigns index view when 'Cancel' is clicked.
     if (props.name === 'action_cancel') {
       const extendedProps = Object.assign({}, props, {
         onClick: (event) => {
           event.preventDefault();
-          this.props.router.push(url);
+          this.props.history.push(url);
         },
       });
 
@@ -282,14 +282,14 @@ By removing this item all linked items will be removed unless used elsewhere.`;
    * @return {Object} - Instanciated React component
    */
   campaignAddCreateFn(Custom, props) {
-    const url = this.props.sectionConfig.url;
+    const url = `/${this.props.sectionConfig.url}`;
 
     // Route to the Campaigns index view when 'Cancel' is clicked.
     if (props.name === 'action_cancel') {
       const extendedProps = Object.assign({}, props, {
         onClick: (event) => {
           event.preventDefault();
-          this.props.router.push(url);
+          this.props.history.push(url);
         },
       });
 
@@ -309,17 +309,17 @@ By removing this item all linked items will be removed unless used elsewhere.`;
    * @return object - Instanciated React component
    */
   campaignListCreateFn(Custom, props) {
-    const sectionUrl = this.props.sectionConfig.url;
+    const sectionUrl = `/${this.props.sectionConfig.url}`;
     const typeUrlParam = 'set';
 
     if (props.schemaComponent === 'GridField') {
       const extendedProps = Object.assign({}, props, {
         data: Object.assign({}, props.data, {
           onDrillDown: (event, record) => {
-            this.props.router.push(`${sectionUrl}/${typeUrlParam}/${record.ID}/show`);
+            this.props.history.push(`${sectionUrl}/${typeUrlParam}/${record.ID}/show`);
           },
           onEditRecord: (event, id) => {
-            this.props.router.push(`${sectionUrl}/${typeUrlParam}/${id}/edit`);
+            this.props.history.push(`${sectionUrl}/${typeUrlParam}/${id}/edit`);
           },
         }),
       });
@@ -332,18 +332,18 @@ By removing this item all linked items will be removed unless used elsewhere.`;
 
   addCampaign() {
     const path = this.getActionRoute(0, 'create');
-    this.props.router.push(path);
+    this.props.history.push(path);
   }
 
   /**
    * Renders the Detail Edit Form for a Campaign.
    */
   renderDetailEditView() {
-    if (this.props.params.id <= 0) {
+    if (this.props.match.params.id <= 0) {
       return this.renderCreateView();
     }
     const baseSchemaUrl = this.props.sectionConfig.form.campaignEditForm.schemaUrl;
-    const schemaUrl = `${baseSchemaUrl}/${this.props.params.id}`;
+    const schemaUrl = `${baseSchemaUrl}/${this.props.match.params.id}`;
 
     return (
       <div className="fill-height">
@@ -440,7 +440,7 @@ By removing this item all linked items will be removed unless used elsewhere.`;
   renderItemListView() {
     const props = {
       sectionConfig: this.props.sectionConfig,
-      campaignId: this.props.params.id,
+      campaignId: this.props.match.params.id,
       itemListViewEndpoint: this.props.sectionConfig.itemListViewEndpoint,
       publishApi: this.publishApi,
       onBackButtonClick: this.handleBackButtonClick,
@@ -459,7 +459,7 @@ By removing this item all linked items will be removed unless used elsewhere.`;
   render() {
     let view = null;
 
-    switch (this.props.params.view) {
+    switch (this.props.match.params.view) {
       case 'show':
         view = this.renderItemListView();
         break;
@@ -522,8 +522,8 @@ function mapStateToProps(state, ownProps) {
   ));
   const viewMode = state.viewMode;
 
-  if (ownProps.params.id > 0) {
-    const schemaUrl = `${sectionConfig.form.campaignEditForm.schemaUrl}/${ownProps.params.id}`;
+  if (ownProps.match.params.id > 0) {
+    const schemaUrl = `${sectionConfig.form.campaignEditForm.schemaUrl}/${ownProps.match.params.id}`;
     const schema = state.form.formSchemas[schemaUrl];
     const schemaName = schema && schema.name;
     const selector = schemaName && formValueSelector(schema.name, getFormState);

client/src/containers/CampaignAdmin/tests/CampaignAdmin-test.js

@@ -4,7 +4,7 @@ jest.mock('components/Breadcrumb/Breadcrumb');
 jest.mock('containers/FormBuilderLoader/FormBuilderLoader', () => () => null);
 
 import React from 'react';
-import ReactTestUtils from 'react-addons-test-utils';
+import ReactTestUtils from 'react-dom/test-utils';
 import { Component as CampaignAdmin } from '../CampaignAdmin';
 
 describe('CampaignAdminItem', () => {
@@ -29,7 +29,12 @@ describe('CampaignAdminItem', () => {
         },
         securityId: 'secured',
         onResize: jest.fn(),
-
+        match: {
+          params: {
+            id: null,
+            view: null
+          }
+        }
       };
       admin = ReactTestUtils.renderIntoDocument(<CampaignAdmin {...props} />);
     });

client/src/containers/CampaignAdmin/tests/CampaignAdminItem-test.js

@@ -3,7 +3,7 @@
 jest.mock('reactstrap');
 
 import React from 'react';
-import ReactTestUtils from 'react-addons-test-utils';
+import ReactTestUtils from 'react-dom/test-utils';
 import CampaignAdminItem from '../CampaignAdminItem';
 
 describe('CampaignAdminItem', () => {

client/src/containers/CampaignAdmin/tests/CampaignAdminList-test.js

@@ -7,7 +7,7 @@ jest.mock('components/ActionMenu/ActionMenu');
 import React from 'react';
 import { Component as CampaignAdminList } from '../CampaignAdminList';
 import Enzyme, { shallow } from 'enzyme';
-import Adapter from 'enzyme-adapter-react-15.4';
+import Adapter from 'enzyme-adapter-react-16';
 
 Enzyme.configure({ adapter: new Adapter() });
 

package.json

@@ -6,7 +6,7 @@
     "test": "tests"
   },
   "engines": {
-    "node": "^6.x"
+    "node": "^10.x"
   },
   "scripts": {
     "build": "yarn && yarn lint && yarn test && NODE_ENV=production webpack -p --bail --progress",
@@ -31,33 +31,36 @@
   },
   "homepage": "https://github.com/silverstripe/silverstripe-campaign-admin",
   "dependencies": {
-    "bootstrap": "4.1.2",
+    "bootstrap": "^4.1.3",
     "classnames": "^2.2.5",
     "deep-freeze-strict": "^1.1.1",
-    "enzyme": "^3.3.0",
-    "enzyme-adapter-react-15.4": "^1.0.5",
     "es6-promise": "^3.1.2",
+    "jquery": "^3.3.1",
+    "popper.js": "^1.14.4",
     "prop-types": "^15.6.2",
-    "react": "15.3.1",
-    "react-addons-test-utils": "15.3.1",
-    "react-dom": "15.3.1",
-    "react-redux": "^4.4.1",
+    "react": "^16.6.1",
+    "react-dom": "^16.6.1",
+    "react-redux": "^5.0.7",
     "react-resize-aware": "^2.7.0",
-    "react-router": "^2.4.1",
-    "react-router-redux": "^4.0.5",
-    "reactstrap": "5.0.0-beta",
-    "redux": "https://registry.npmjs.org/redux/-/redux-3.0.5.tgz",
-    "redux-form": "^6.0.2",
+    "react-router-dom": "^4.4.0-beta.6",
+    "reactstrap": "^6.4.0",
+    "redux": "^4.0.0",
+    "redux-form": "^7.4.2",
     "redux-mock-store": "^1.2.3",
     "redux-thunk": "^2.2.0"
   },
   "devDependencies": {
     "@silverstripe/eslint-config": "^0.0.5",
-    "@silverstripe/webpack-config": "^0.12.0",
-    "babel-jest": "^19.0.0",
-    "jest-cli": "^19.0.2",
+    "@silverstripe/webpack-config": "^1.0.0",
+    "babel-core": "^6.26.3",
+    "babel-jest": "^23.6.0",
+    "babel-loader": "^6.0.0",
+    "enzyme": "^3.6.0",
+    "enzyme-adapter-react-16": "^1.5.0",
+    "jest-cli": "^23.6.0",
     "toposort": "^1.0.3",
-    "validator": "^6.1.0"
+    "validator": "^6.1.0",
+    "webpack": "^2.0.0"
   },
   "jest": {
     "roots": [