Merge pull request #229 from Osmose/devtools

Add Redux DevTools

.eslintrc

@@ -3,6 +3,9 @@ parser: babel-eslint
 plugins:
   - jasmine
   - babel
+globals:
+  PRODUCTION: false
+  DEVELOPMENT: false
 rules:
   arrow-parens: [off]
   no-console: [off]

client/control/components/ControlApp.js

@@ -1,10 +1,12 @@
 import React, { PropTypes as pt } from 'react';
 import Header from './Header.js';
 import Notifications from './Notifications.js';
+import DevTools from './DevTools.js';
 
 export default function ControlApp({ children, location, routes, params }) {
   return (
     <div>
+      {DEVELOPMENT && <DevTools />}
       <Notifications />
       <Header
         pageType={children.props.route}

client/control/components/DevTools.js

@@ -0,0 +1,16 @@
+import React from 'react';
+import { createDevTools } from 'redux-devtools';
+import LogMonitor from 'redux-devtools-log-monitor';
+import DockMonitor from 'redux-devtools-dock-monitor';
+
+const DevTools = createDevTools(
+  <DockMonitor
+    toggleVisibilityKey="ctrl-h"
+    changePositionKey="ctrl-q"
+    defaultIsVisible={false}
+  >
+    <LogMonitor theme="tomorrow" />
+  </DockMonitor>
+);
+
+export default DevTools;

client/control/sass/partials/_common.scss

@@ -199,23 +199,6 @@ tbody {
   }
 }
 
-
-/* Unordered List */
-li {
-  list-style-type: none;
-  padding: 25px;
-
-  &:nth-child(even) {
-    background: rgba($cream, 0.5);
-  }
-
-  &:hover {
-    background: rgba(26, 183, 218, 0.1);
-    cursor: pointer;
-  }
-}
-
-
 /* Icons */
 i {
   &.pre { margin-right: 5px; }

client/control/stores/ControlStore.js

@@ -1,13 +1,24 @@
-import { createStore, applyMiddleware, combineReducers } from 'redux';
+import { compose, createStore, applyMiddleware, combineReducers } from 'redux';
 import { browserHistory } from 'react-router';
 import { routerReducer, routerMiddleware } from 'react-router-redux';
 import thunk from 'redux-thunk';
 import { reducer as formReducer } from 'redux-form';
+import DevTools from '../components/DevTools.js';
 
 import controlAppReducer from '../reducers/ControlAppReducer.js';
 
 const reduxRouterMiddleware = routerMiddleware(browserHistory);
 
+const enhancer = compose(
+  applyMiddleware(
+    reduxRouterMiddleware,
+    thunk
+  ),
+
+  // Only include DevTools in development mode
+  DEVELOPMENT ? DevTools.instrument() : x => x,
+);
+
 export default function controlStore() {
   return createStore(
     combineReducers({
@@ -24,9 +35,6 @@ export default function controlStore() {
         notifications: [],
       },
     },
-    applyMiddleware(
-      reduxRouterMiddleware,
-      thunk
-    )
+    enhancer,
   );
 }

docs/dev/workflow.rst

@@ -163,3 +163,12 @@ To add a new action:
 
 To update an existing action, follow steps 4 and 5 above after making your
 changes.
+
+Redux DevTools
+--------------
+The control interface includes the `Redux DevTools`_ in development mode to help
+debug issues. To toggle the DevTools, hit ``Ctrl-H``. You can change the side of
+the screen the tools are docked on using ``Ctrl-Q``, and can resize the tools by
+dragging the edge of the bar.
+
+.. _Redux DevTools: https://github.com/gaearon/redux-devtools

karma.conf.js

@@ -1,6 +1,8 @@
 /* eslint-env node */
 /* eslint-disable no-var, func-names, prefer-arrow-callback, prefer-template */
 // Karma configuration
+const WEBPACK_CONFIG = require('./webpack.config.js');
+
 module.exports = function (config) {
   var karmaConfig = {
     // base path that will be used to resolve all patterns (eg. files, exclude)
@@ -28,22 +30,9 @@ module.exports = function (config) {
       'client/actions/tests/index.js': ['webpack', 'sourcemap'],
     },
 
-    webpack: {
-      module: {
-        loaders: [
-          {
-            test: /\.js$/,
-            exclude: /node_modules/,
-            loader: 'babel',
-          },
-          {
-            test: /(\.|\/)(json)$/,
-            loader: 'json',
-          },
-        ],
-      },
-      devtool: 'inline-source-map',
-    },
+    // The first config is for the control interface. It is only coincidence
+    // that this config works for the action code/tests as well.
+    webpack: WEBPACK_CONFIG[0],
 
     webpackServer: {
       quiet: true, // Suppress *all* webpack messages, including errors

package.json

@@ -20,7 +20,6 @@
     "classnames": "2.2.5",
     "cssmin": "0.4.3",
     "font-awesome": "4.6.3",
-    "isomorphic-fetch": "2.2.1",
     "jexl": "1.1.4",
     "jquery": "3.1.0",
     "json-editor": "0.7.28",
@@ -78,6 +77,9 @@
     "postcss-loader": "0.11.1",
     "react-addons-test-utils": "15.2.1",
     "react-tools": "0.13.3",
+    "redux-devtools": "^3.3.1",
+    "redux-devtools-dock-monitor": "^1.1.1",
+    "redux-devtools-log-monitor": "^1.0.11",
     "redux-mock-store": "1.1.4",
     "sass-loader": "4.0.1",
     "style-loader": "0.13.1",

webpack.config.js

@@ -15,9 +15,6 @@ var plugins = [
   new BundleTracker({ filename: './webpack-stats.json' }),
   new webpack.optimize.OccurrenceOrderPlugin(true),
   new ExtractTextPlugin('[name]-[hash].css'),
-  new webpack.ProvidePlugin({
-    fetch: 'exports?self.fetch!isomorphic-fetch',
-  }),
   new webpack.DefinePlugin({
     PRODUCTION: production,
     DEVELOPMENT: !production,
@@ -47,6 +44,7 @@ if (production) {
 module.exports = [
   {
     context: __dirname,
+    devtool: production ? undefined : 'eval-source-map',
 
     entry: {
       selfrepair: [
@@ -66,6 +64,11 @@ module.exports = [
       filename: '[name]-[hash].js',
       chunkFilename: '[id].bundle.js',
     },
+    externals: {
+      'react/lib/ExecutionEnvironment': true,
+      'react/lib/ReactContext': true,
+      'react/addons': true,
+    },
 
     plugins,
 
@@ -76,6 +79,10 @@ module.exports = [
           exclude: /node_modules/,
           loader: 'babel',
         },
+        {
+          test: /\.json$/,
+          loader: 'json-loader',
+        },
         {
           test: /\.scss$/,
           loader: ExtractTextPlugin.extract('style', 'css?sourceMap!postcss!sass?sourceMap'),