diff --git a/client/.babelrc b/client/.babelrc
index 02eef7181..a256f4257 100644
--- a/client/.babelrc
+++ b/client/.babelrc
@@ -1,8 +1,43 @@
{
- "plugins": [
- "lodash",
- "transform-class-properties",
- ["transform-object-rest-spread", { "useBuiltIns": true }]
+ "presets": [
+ [
+ "@babel/preset-env",
+ {
+ "modules": false
+ }
+ ],
+ "@babel/preset-react"
],
- "presets": ["env", "react"]
+ "plugins": [
+ [
+ "@babel/plugin-proposal-object-rest-spread",
+ {
+ "useBuiltIns": true
+ }
+ ],
+ "@babel/plugin-proposal-class-properties",
+ "lodash",
+ ],
+ "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",
+ ]
+ }
+ }
}
diff --git a/client/.nvmrc b/client/.nvmrc
new file mode 100644
index 000000000..a244f6f35
--- /dev/null
+++ b/client/.nvmrc
@@ -0,0 +1 @@
+v8.9.0
diff --git a/client/app/scripts/actions/app-actions.js b/client/app/scripts/actions/app-actions.js
index 880525fe0..48b2aaa61 100644
--- a/client/app/scripts/actions/app-actions.js
+++ b/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,
diff --git a/client/app/scripts/components/app.js b/client/app/scripts/components/app.js
index f32129a8f..0b616cfc6 100644
--- a/client/app/scripts/components/app.js
+++ b/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),
diff --git a/client/app/scripts/contrast-compiler.js b/client/app/scripts/contrast-compiler.js
deleted file mode 100644
index c1b4139fc..000000000
--- a/client/app/scripts/contrast-compiler.js
+++ /dev/null
@@ -1,46 +0,0 @@
-/* eslint-disable class-methods-use-this */
-// Webpack plugin for creating contrast mode stylesheet
-const _ = require('lodash');
-
-function findAsset(collection, name) {
- return _.find(collection, c => _.includes(c, name));
-}
-
-module.exports = class ContrastStyleCompiler {
- apply(compiler) {
- let themeJsChunk;
-
- compiler.plugin('compilation', (compilation) => {
- compilation.plugin('html-webpack-plugin-before-html-processing', (htmlPluginData, callback) => {
- themeJsChunk = findAsset(htmlPluginData.assets.js, 'contrast-theme');
- if (!themeJsChunk) {
- return callback(null, htmlPluginData);
- }
- // Find the name of the contrast stylesheet and save it to a window variable.
- const { css, publicPath } = htmlPluginData.assets;
- const contrast = findAsset(css, 'contrast-theme');
- const normal = findAsset(css, 'style-app');
- // Convert to JSON string so they can be parsed into a window variable
- const themes = JSON.stringify({ contrast, normal, publicPath });
- // Append a script to the end of to evaluate before the other scripts are loaded.
- const script = ``;
- const [head, end] = htmlPluginData.html.split('');
- htmlPluginData.html = head.concat(script).concat('\n ').concat(end);
- // Remove the contrast assets so they don't get added to the HTML.
- _.remove(htmlPluginData.assets.css, i => i === contrast);
- _.remove(htmlPluginData.assets.js, i => i === themeJsChunk);
-
- return callback(null, htmlPluginData);
- });
- });
-
- compiler.plugin('emit', (compilation, callback) => {
- // Remove the contrast-theme.js file, since it doesn't do anything
- const filename = themeJsChunk && themeJsChunk.split('?')[0];
- if (filename) {
- delete compilation.assets[filename];
- }
- callback();
- });
- }
-};
diff --git a/client/app/scripts/contrast-theme.js b/client/app/scripts/contrast-theme.js
deleted file mode 100644
index cc1468866..000000000
--- a/client/app/scripts/contrast-theme.js
+++ /dev/null
@@ -1 +0,0 @@
-import '../styles/contrast.scss';
diff --git a/client/app/scripts/main.dev.js b/client/app/scripts/main.dev.js
index b78890fb0..8f1ff20b1 100644
--- a/client/app/scripts/main.dev.js
+++ b/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';
diff --git a/client/app/scripts/main.js b/client/app/scripts/main.js
index 9b6f32df2..e7a21d0fd 100644
--- a/client/app/scripts/main.js
+++ b/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';
diff --git a/client/app/scripts/terminal-main.js b/client/app/scripts/terminal-main.js
index fb8fd64db..41f647dc4 100644
--- a/client/app/scripts/terminal-main.js
+++ b/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';
diff --git a/client/app/scripts/utils/color-utils.js b/client/app/scripts/utils/color-utils.js
index 2f9b08274..daad50556 100644
--- a/client/app/scripts/utils/color-utils.js
+++ b/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
diff --git a/client/app/scripts/utils/contrast-utils.js b/client/app/scripts/utils/contrast-utils.js
deleted file mode 100644
index a070c67c4..000000000
--- a/client/app/scripts/utils/contrast-utils.js
+++ /dev/null
@@ -1,38 +0,0 @@
-/* eslint-disable no-underscore-dangle */
-import last from 'lodash/last';
-/**
- * Change the Scope UI theme from normal to high-contrast.
- * This will inject a stylesheet into