Upgrade to Webpack 4

client/.babelrc

@@ -1,8 +1,43 @@
 {
+  "presets": [
+    [
+      "@babel/preset-env",
+      {
+        "modules": false
+      }
+    ],
+    "@babel/preset-react"
+  ],
   "plugins": [
+    [
+      "@babel/plugin-proposal-object-rest-spread",
+      {
+        "useBuiltIns": true
+      }
+    ],
+    "@babel/plugin-proposal-class-properties",
     "lodash",
-    "transform-class-properties",
-    ["transform-object-rest-spread", { "useBuiltIns": true }]
   ],
-  "presets": ["env", "react"]
+  "env": {
+    "test": {
+      "presets": [
+        [
+          "@babel/preset-env",
+          {
+            "modules": "commonjs"
+          }
+        ],
+        "@babel/preset-react"
+      ],
+      "plugins": [
+        [
+          "@babel/plugin-proposal-object-rest-spread",
+          {
+            "useBuiltIns": true
+          }
+        ],
+        "@babel/plugin-proposal-class-properties",
+      ]
+    }
+  }
 }

client/.nvmrc

@@ -0,0 +1 @@
+v8.9.0

client/app/scripts/actions/app-actions.js

@@ -15,7 +15,6 @@ import {
   teardownWebsockets,
   getNodes,
 } from '../utils/web-api-utils';
-import { loadTheme } from '../utils/contrast-utils';
 import { isPausedSelector } from '../selectors/time-travel';
 import {
   availableMetricTypesSelector,
@@ -701,7 +700,6 @@ export function receiveNotFound(nodeId, requestTimestamp) {
 
 export function setContrastMode(enabled) {
   return (dispatch) => {
-    loadTheme(enabled ? 'contrast' : 'normal');
     dispatch({
       enabled,
       type: ActionTypes.TOGGLE_CONTRAST_MODE,

client/app/scripts/components/app.js

@@ -192,10 +192,13 @@ class App extends React.Component {
     const {
       isTableViewMode, isGraphViewMode, isResourceViewMode, showingDetails,
       showingHelp, showingNetworkSelector, showingTroubleshootingMenu,
-      timeTravelTransitioning, timeTravelSupported
+      timeTravelTransitioning, timeTravelSupported, contrastMode,
     } = this.props;
 
-    const className = classNames('scope-app', { 'time-travel-open': timeTravelSupported });
+    const className = classNames('scope-app', {
+      'contrast-mode': contrastMode,
+      'time-travel-open': timeTravelSupported,
+    });
     const isIframe = window !== window.top;
 
     return (
@@ -248,6 +251,7 @@ class App extends React.Component {
 
 function mapStateToProps(state) {
   return {
+    contrastMode: state.get('contrastMode'),
     currentTopology: state.get('currentTopology'),
     isGraphViewMode: isGraphViewModeSelector(state),
     isResourceViewMode: isResourceViewModeSelector(state),

client/app/scripts/main.dev.js

@@ -1,4 +1,4 @@
-import 'babel-polyfill';
+import '@babel/polyfill';
 import React from 'react';
 import ReactDOM from 'react-dom';
 import { Provider } from 'react-redux';

client/app/scripts/main.js

@@ -1,4 +1,4 @@
-import 'babel-polyfill';
+import '@babel/polyfill';
 import React from 'react';
 import ReactDOM from 'react-dom';
 import { Provider } from 'react-redux';

client/app/scripts/terminal-main.js

@@ -1,4 +1,4 @@
-import 'babel-polyfill';
+import '@babel/polyfill';
 import React from 'react';
 import ReactDOM from 'react-dom';
 import { Provider } from 'react-redux';

client/app/scripts/utils/color-utils.js

@@ -1,5 +1,6 @@
 import { hsl } from 'd3-color';
-import { scaleLinear, scaleOrdinal, schemeCategory10 } from 'd3-scale';
+import { scaleLinear, scaleOrdinal } from 'd3-scale';
+import { schemeCategory10 } from 'd3-scale-chromatic';
 
 const PSEUDO_COLOR = '#b1b1cb';
 const hueRange = [20, 330]; // exclude red

client/app/scripts/utils/feature-utils.js

@@ -14,7 +14,12 @@ const getKey = key => `${STORAGE_KEY_PREFIX}${key}`;
  * @return {Boolean}         True if feature is enabled
  */
 export function featureIsEnabled(feature) {
-  return storageGet(getKey(feature));
+  let enabled = storageGet(getKey(feature));
+  if (typeof enabled === 'string') {
+    // Convert back to boolean if stored as a string.
+    enabled = JSON.parse(enabled);
+  }
+  return enabled;
 }
 
 /**

client/app/styles/_contrast-overrides.scss → client/app/styles/_contrast-theme.scss

@@ -1,4 +1,4 @@
-@import "variables";
+@import "default-theme";
 
 $background-color: $color-white;
 $background-lighter-color: $color-white;

client/app/styles/_variables.scss → client/app/styles/_default-theme.scss

@@ -45,3 +45,4 @@ $timeline-height: 55px;
 /* specific elements */
 $body-background-color: $color-purple-25;
 $label-background-color: transparentize($color-purple-25, 0.3);
+

client/app/styles/main.scss

@@ -1,3 +1,15 @@
-@import "variables";
-@import "terminal";
+// Load the default theme initially to apply it on the global html level.
+@import "default-theme";
 @import "base";
+@import "terminal";
+
+.scope-app.contrast-mode {
+    // Load the contrast theme and reload all the CSS in the scope-app container.
+    @import "contrast-theme";
+    @import "base";
+}
+.scope-app:not(.contrast-mode) {
+    // Load the default theme and reload all the CSS in the scope-app container.
+    @import "default-theme";
+    @import "base";
+}

client/package.json

@@ -7,14 +7,15 @@
   "private": true,
   "main": "index.js",
   "dependencies": {
-    "babel-plugin-lodash": "3.2.11",
-    "babel-polyfill": "6.26.0",
+    "@babel/polyfill": "^7.0.0",
+    "babel-plugin-lodash": "3.3.2",
     "classnames": "2.2.5",
     "d3-array": "1.2.1",
     "d3-color": "1.0.3",
     "d3-drag": "1.2.3",
     "d3-format": "1.3.2",
     "d3-scale": "2.1.2",
+    "d3-scale-chromatic": "1.3.3",
     "d3-selection": "1.3.2",
     "d3-shape": "1.2.2",
     "d3-time-format": "2.1.0",
@@ -48,42 +49,43 @@
     "xterm": "3.10.1"
   },
   "devDependencies": {
+    "@babel/cli": "^7.2.3",
+    "@babel/core": "^7.0.0",
+    "@babel/plugin-proposal-class-properties": "^7.0.0",
+    "@babel/plugin-proposal-object-rest-spread": "^7.0.0",
+    "@babel/preset-env": "^7.0.0",
+    "@babel/preset-react": "^7.0.0",
     "@fortawesome/fontawesome-free": "^5.5.0",
     "autoprefixer": "7.1.5",
-    "babel-cli": "6.26.0",
-    "babel-core": "6.26.0",
-    "babel-eslint": "8.0.1",
-    "babel-jest": "21.2.0",
-    "babel-loader": "6.4.1",
+    "babel-eslint": "8.2.1",
+    "babel-jest": "24.5.0",
+    "babel-loader": "^8.0.0",
     "babel-plugin-transform-class-properties": "6.24.1",
     "babel-plugin-transform-object-rest-spread": "6.26.0",
-    "babel-preset-env": "1.6.1",
-    "babel-preset-react": "6.24.1",
     "clean-webpack-plugin": "0.1.17",
     "css-loader": "0.28.11",
-    "eslint": "4.9.0",
+    "eslint": "4.17.0",
     "eslint-config-airbnb": "16.1.0",
-    "eslint-loader": "1.9.0",
-    "eslint-plugin-import": "2.7.0",
-    "eslint-plugin-jsx-a11y": "6.0.2",
-    "eslint-plugin-react": "7.4.0",
+    "eslint-loader": "2.0.0",
+    "eslint-plugin-import": "2.12.0",
+    "eslint-plugin-jsx-a11y": "6.0.3",
+    "eslint-plugin-react": "7.6.1",
     "express": "4.16.4",
-    "extract-text-webpack-plugin": "2.1.0",
-    "file-loader": "1.1.5",
-    "html-webpack-plugin": "2.30.1",
+    "file-loader": "1.1.11",
+    "html-webpack-plugin": "3.2.0",
     "http-proxy": "1.16.2",
     "http-proxy-rules": "1.1.1",
-    "jest": "21.2.1",
-    "jest-cli": "21.2.1",
+    "jest": "24.5.0",
+    "jest-cli": "24.5.0",
     "json-loader": "0.5.7",
     "mockdate": "2.0.2",
     "node-sass": "^4.6.0",
-    "postcss-loader": "1.3.3",
+    "postcss-loader": "2.1.4",
     "react-router": "3.2.0",
     "sass-lint": "^1.12.1",
-    "sass-loader": "6.0.6",
-    "sasslint-webpack-plugin": "^1.0.4",
-    "style-loader": "0.19.0",
+    "sass-lint-webpack": "1.0.0",
+    "sass-loader": "7.0.1",
+    "style-loader": "0.21.0",
     "stylelint": "9.10.1",
     "stylelint-config-recommended": "2.1.0",
     "stylelint-config-styled-components": "0.1.1",
@@ -92,9 +94,10 @@
     "stylelint-processor-styled-components": "1.5.2",
     "url": "0.11.0",
     "url-loader": "0.6.2",
-    "webpack": "2.4.1",
-    "webpack-dev-middleware": "1.10.2",
-    "webpack-hot-middleware": "2.18.0"
+    "webpack": "4.6.0",
+    "webpack-cli": "^3.3.0",
+    "webpack-dev-middleware": "3.1.3",
+    "webpack-hot-middleware": "2.22.2"
   },
   "scripts": {
     "build": "webpack --config webpack.production.config.js",
@@ -128,6 +131,6 @@
     ]
   },
   "engines": {
-    "node": "^8.4.0"
+    "node": "^8.9.0"
   }
 }