convert commonjs to es2015 modules (fixes #234)

frontend/.babelrc

@@ -3,6 +3,7 @@
   "presets": [
     "react",
     ["env", {
+      "modules": false,
       "targets": {
         "browsers": [
           "last 2 versions"
@@ -18,7 +19,6 @@
     ["transform-react-jsx", {
       "useBuiltIns": true
     }],
-    "transform-es2015-modules-commonjs",
     "transform-exponentiation-operator"
   ],
   "env": {

frontend/.eslintrc

@@ -22,6 +22,9 @@
     "es6": true
   },
   "rules": {
+    "jsx-quotes": [2, "prefer-single"],
+    "comma-dangle": [2, "never"],
+    "eol-last": [2, "always"],
     "react/jsx-no-undef": 2,
     "react/jsx-uses-react": 2,
     "react/jsx-uses-vars": 2,
@@ -118,7 +121,6 @@
     "max-len": [2, 80],
     "no-eq-null": 2,
     "block-scoped-var": 2,
-    "no-console": 0,
+    "no-console": 0
-    "comma-dangle": ["error", "never"]
   }
 }

frontend/package.json

@@ -12,6 +12,7 @@
     "start": "webpack-dev-server --define process.env.BASELINE_GRID=false --open --config webpack/index.js ",
     "production": "node server",
     "lint": "make lint",
+    "lint-fix": "make lint-fix",
     "test": "make test",
     "open": "nyc report --reporter=html & open coverage/index.html",
     "coverage": "nyc check-coverage --statements 100 --functions 100 --lines 100 --branches 100",
@@ -64,6 +65,7 @@
     "babel-core": "^6.23.1",
     "babel-eslint": "^7.1.1",
     "babel-loader": "^6.3.2",
+    "babel-plugin-inline-react-svg": "^0.2.0",
     "babel-plugin-styled-components": "^1.0.0",
     "babel-plugin-transform-class-properties": "^6.23.0",
     "babel-plugin-transform-es2015-modules-commonjs": "^6.23.0",
@@ -81,12 +83,14 @@
     "babel-register": "^6.23.0",
     "case-sensitive-paths-webpack-plugin": "^1.1.4",
     "enzyme": "^2.7.1",
-    "eslint": "^3.16.0",
+    "eslint": "^3.16.1",
     "eslint-config-react-app": "^0.5.1",
     "eslint-config-semistandard": "^7.0.0",
     "eslint-config-standard": "^6.2.1",
-    "eslint-loader": "^1.6.1",
+    "eslint-loader": "^1.6.3",
     "eslint-plugin-babel": "^4.0.1",
+    "eslint-plugin-flowtype": "^2.30.0",
+    "eslint-plugin-import": "^2.2.0",
     "eslint-plugin-jsx-a11y": "^4.0.0",
     "eslint-plugin-promise": "^3.4.2",
     "eslint-plugin-react": "^6.10.0",

frontend/src/components/article/index.js

@@ -1,17 +1,9 @@
-const Styled = require('styled-components');
+import styled from 'styled-components';
-const constants = require('@ui/shared/constants');
+import { colors, breakpoints } from '@ui/shared/constants';
-
-const {
-  // colors,
-  breakpoints
-} = constants;
-
-const {
-  default: styled
-} = Styled;
 
 // Main Contonent Wrapper Styles
-module.exports = styled.article`
+export default styled.article`
+  background-color: ${colors.base.grey};
   padding: 2rem;
 
   ${breakpoints.large`

frontend/src/components/breadcrumb/index.js

@@ -1,32 +1,15 @@
-const React = require('react');
+import React from 'react';
-const Styled = require('styled-components');
+import styled from 'styled-components';
-const flatten = require('lodash.flatten');
+import flatten from 'lodash.flatten';
 
-const Container = require('@ui/components/container');
+import Container from '@ui/components/container';
-const Row = require('@ui/components/row');
+import Row from '@ui/components/row';
-const Column = require('@ui/components/column');
+import Column from '@ui/components/column';
-const BaseElements = require('@ui/components/base-elements');
+import { H2 } from '@ui/components/base-elements';
-const NavLink = require('@ui/components/nav-link');
+import NavLink from '@ui/components/nav-link';
-const PropTypes = require('@root/prop-types');
+import PropTypes from '@root/prop-types';
-const fns = require('@ui/shared/functions');
+import { remcalc, unitcalc } from '@ui/shared/functions';
-const constants = require('@ui/shared/constants');
+import { colors } from '@ui/shared/constants';
-
-const {
-  remcalc,
-  unitcalc
-} = fns;
-
-const {
-  colors
-} = constants;
-
-const {
-  H2
-} = BaseElements;
-
-const {
-  default: styled
-} = Styled;
 
 // Main Contonent Wrapper Styles
 const StyledDiv = styled.div`
@@ -75,21 +58,19 @@ const Breadcrumb = ({
   children,
   links = [],
   name = []
-}) => {
+}) => (
-  return (
+  <Container>
-    <Container>
+    <Row>
-      <Row>
+      <Column xs={12}>
-        <Column xs={12}>
+        <StyledDiv>
-          <StyledDiv>
+          <StyledH2>
-            <StyledH2>
+            {getNameLink(name)}
-              {getNameLink(name)}
+          </StyledH2>
-            </StyledH2>
+        </StyledDiv>
-          </StyledDiv>
+      </Column>
-        </Column>
+    </Row>
-      </Row>
+  </Container>
-    </Container>
+);
-  );
-};
 
 Breadcrumb.propTypes = {
   children: React.PropTypes.node,
@@ -97,4 +78,4 @@ Breadcrumb.propTypes = {
   name: React.PropTypes.arrayOf(PropTypes.link)
 };
 
-module.exports = Breadcrumb;
+export default Breadcrumb;

frontend/src/components/create-monitor/index.js

@@ -1,31 +1,12 @@
-const React = require('react');
+import React from 'react';
-const ReactIntl = require('react-intl');
+import { FormattedMessage } from 'react-intl';
-const Styled = require('styled-components');
+import styled from 'styled-components';
 
-const Form = require('@ui/components/form');
+import { FormGroup, Select, Input } from '@ui/components/form';
-const Button = require('@ui/components/button');
+import Button from '@ui/components/button';
-const Column = require('@ui/components/column');
+import Column from '@ui/components/column';
-const fns = require('@ui/shared/functions');
+import { remcalc } from '@ui/shared/functions';
-const Row = require('@ui/components/row');
+import Row from '@ui/components/row';
-
-
-const {
-  FormGroup,
-  Select,
-  Input
-} = Form;
-
-const {
-  FormattedMessage
-} = ReactIntl;
-
-const {
-  default: styled
-} = Styled;
-
-const {
-  remcalc
-} = fns;
 
 const H4 = styled.h4`
   margin-bottom: ${remcalc(5)} !important;
@@ -148,4 +129,4 @@ CreateMonitor.propTypes = {
   submitting: React.PropTypes.bool
 };
 
-module.exports = CreateMonitor;
+export default CreateMonitor;

frontend/src/components/empty/instances.js

@@ -1,19 +1,11 @@
-const React = require('react');
+import React from 'react';
-const ReactIntl = require('react-intl');
+import { FormattedMessage } from 'react-intl';
 
-const Column = require('@ui/components/column');
+import Column from '@ui/components/column';
-const Row = require('@ui/components/row');
+import Row from '@ui/components/row';
-const BaseElements = require('@ui/components/base-elements');
+import { P } from '@ui/components/base-elements';
 
-const {
+export default () => (
-  P
-} = BaseElements;
-
-const {
-  FormattedMessage
-} = ReactIntl;
-
-module.exports = () => (
   <Row>
     <Column xs={12}>
       <P name='empty'>

frontend/src/components/empty/people.js

@@ -1,14 +1,10 @@
-const React = require('react');
+import React from 'react';
-const ReactIntl = require('react-intl');
+import { FormattedMessage } from 'react-intl';
 
-const Column = require('@ui/components/column');
+import Column from '@ui/components/column';
-const Row = require('@ui/components/row');
+import Row from '@ui/components/row';
 
-const {
+export default () => (
-  FormattedMessage
-} = ReactIntl;
-
-module.exports = () => (
   <Row>
     <Column xs={12}>
       <p name='empty'>
@@ -17,4 +13,3 @@ module.exports = () => (
     </Column>
   </Row>
 );
-

frontend/src/components/empty/projects.js

@@ -1,14 +1,10 @@
-const React = require('react');
+import React from 'react';
-const ReactIntl = require('react-intl');
+import { FormattedMessage } from 'react-intl';
 
-const Column = require('@ui/components/column');
+import Column from '@ui/components/column';
-const Row = require('@ui/components/row');
+import Row from '@ui/components/row';
 
-const {
+export default () => (
-  FormattedMessage
-} = ReactIntl;
-
-module.exports = () => (
   <Row>
     <Column xs={12}>
       <p name='empty'>
@@ -17,4 +13,3 @@ module.exports = () => (
     </Column>
   </Row>
 );
-

frontend/src/components/empty/services.js

@@ -1,31 +1,11 @@
-const React = require('react');
+import React from 'react';
-const ReactIntl = require('react-intl');
+import { FormattedMessage } from 'react-intl';
-const Styled = require('styled-components');
+import styled from 'styled-components';
-
+import Button from '@ui/components/button';
-const Button = require('@ui/components/button');
+import Column from '@ui/components/column';
-const Column = require('@ui/components/column');
+import Row from '@ui/components/row';
-const Row = require('@ui/components/row');
+import { P, H2, H3 } from '@ui/components/base-elements';
-const BaseElements = require('@ui/components/base-elements');
+import { remcalc } from '@ui/shared/functions';
-
-const fns = require('@ui/shared/functions');
-
-const {
-  default: styled
-} = Styled;
-
-const {
-  remcalc
-} = fns;
-
-const {
-  P,
-  H2,
-  H3
-} = BaseElements;
-
-const {
-  FormattedMessage
-} = ReactIntl;
 
 const StyledBox = styled.div`
   box-shadow: 0 2px 0 0 rgba(0, 0, 0, 0.05);
@@ -37,7 +17,7 @@ const StyledBox = styled.div`
   }
 `;
 
-module.exports = () => (
+export default () => (
   <div>
     <Row name='empty-services'>
       <Column>

frontend/src/components/footer/index.js

@@ -1,7 +1,3 @@
-const Styled = require('styled-components');
+import styled from 'styled-components';
 
-const {
+export default styled.footer``;
-  default: styled
-} = Styled;
-
-module.exports = styled.footer``;

frontend/src/components/header/index.js

@@ -1,36 +1,16 @@
-const React = require('react');
+import React from 'react';
-const ReactRouter = require('react-router-dom');
+import { Link } from 'react-router-dom';
-const Styled = require('styled-components');
+import styled from 'styled-components';
 
-const Column = require('@ui/components/column');
+import Column from '@ui/components/column';
-const Avatar = require('@ui/components/avatar');
+import Avatar from '@ui/components/avatar';
-const fns = require('@ui/shared/functions');
+import { remcalc } from '@ui/shared/functions';
-const logo = require('@resources/logo.svg');
+import logo from '@resources/logo.svg';
-const PropTypes = require('@root/prop-types');
+import PropTypes from '@root/prop-types';
-const Row = require('@ui/components/row');
+import Row from '@ui/components/row';
-const Tooltip = require('@ui/components/tooltip');
+import Tooltip from '@ui/components/tooltip';
-const composers = require('@ui/shared/composers');
+import { pseudoEl } from '@ui/shared/composers';
-const constants = require('@ui/shared/constants');
+import { colors } from '@ui/shared/constants';
-
-const {
-  Link
-} = ReactRouter;
-
-const {
-  default: styled
-} = Styled;
-
-const {
-  remcalc
-} = fns;
-
-const {
-  pseudoEl
-} = composers;
-
-const {
-  colors
-} = constants;
 
 const borderSide = props => props.toggled
   ? 'bottom'
@@ -122,7 +102,7 @@ const Header = ({
   );
 
   return (
-    <StyledHeader name="application-header">
+    <StyledHeader name='application-header'>
       <Row>
         <Column lg={10} xs={8}>
           <Link to='/'>
@@ -157,4 +137,4 @@ Header.propTypes = {
   tooltip: React.PropTypes.bool
 };
 
-module.exports = Header;
+export default Header;

frontend/src/components/instance-item/index.js

@@ -1,16 +1,15 @@
-const React = require('react');
+import React from 'react';
 
-const MetricsOutlet = require('@components/metrics-outlet');
+import MetricsOutlet from '@components/metrics-outlet';
-const PropTypes = require('@root/prop-types');
+import PropTypes from '@root/prop-types';
-const List = require('@ui/components/list');
 
-const {
+import {
   ListItem,
   ListItemView,
   ListItemMeta,
   ListItemTitle,
   ListItemOptions
-} = List;
+} from '@ui/components/list';
 
 const InstanceItem = ({
   instance = {},
@@ -34,4 +33,4 @@ InstanceItem.propTypes = {
   toggleCollapsed: React.PropTypes.func
 };
 
-module.exports = InstanceItem;
+export default InstanceItem;

frontend/src/components/instance-list/index.js

@@ -1,13 +1,13 @@
-const React = require('react');
+import React from 'react';
-
+import InstanceItem from '@components/instance-item';
-const InstanceItem = require('@components/instance-item');
+import PropTypes from '@root/prop-types';
-const PropTypes = require('@root/prop-types');
 
 const InstanceList = ({
   instances = [],
   toggleCollapsed = () => null
 }) => {
-  const onClick = (uuid) => () => toggleCollapsed(uuid);
+  const onClick = (uuid) => () =>
+    toggleCollapsed(uuid);
 
   const instanceList = instances.map((instance) => (
     <InstanceItem
@@ -29,4 +29,4 @@ InstanceList.propTypes = {
   toggleCollapsed: React.PropTypes.func
 };
 
-module.exports = InstanceList;
+export default InstanceList;

frontend/src/components/manage-monitor/index.js

@@ -1,5 +1,5 @@
-const React = require('react');
+import React from 'react';
 
-module.exports = () => (
+export default () => (
   <p>manage monitor</p>
 );

frontend/src/components/metric-charts/add-metrics.js

@@ -1,33 +1,30 @@
-const React = require('react');
+import React from 'react';
-const PropTypes = require('@root/prop-types');
+import PropTypes from '@root/prop-types';
-const AddMetric = require('@ui/components/add-metric');
+import { FormattedMessage } from 'react-intl';
-const ReactIntl = require('react-intl');
 
-const {
+import {
-  FormattedMessage
-} = ReactIntl;
-
-const {
   AddMetricButton,
   AddMetricDescription,
   AddMetricLink,
   AddMetricTile,
   AddMetricTitle
-} = AddMetric;
+} from '@ui/components/add-metric';
 
 const AddMetrics = ({
   datasets,
   metricTypes,
   onAddMetric
 }) => {
+  const added = (metric) => Boolean(datasets.filter((dataset) =>
+    dataset.type.uuid === metric
+  ).length);
 
-  const added = (metric) =>
-    Boolean(datasets.filter((dataset) => dataset.type.uuid === metric).length);
   const addButton = (metric) => (
     <AddMetricButton metric={metric} onClick={onAddMetric}>
       <FormattedMessage id={'metrics.add.add-label'} onClick={onAddMetric} />
     </AddMetricButton>
   );
+
   const addedButton = (
     <AddMetricButton disabled>
       <FormattedMessage id={'metrics.add.added-label'} />
@@ -62,4 +59,4 @@ AddMetrics.propTypes = {
   onAddMetric: React.PropTypes.func.isRequired
 };
 
-module.exports = AddMetrics;
+export default AddMetrics;

frontend/src/components/metric-charts/index.js

@@ -1,14 +1,9 @@
-const React = require('react');
+import React from 'react';
-const moment = require('moment');
+import moment from 'moment';
-const PropTypes = require('@root/prop-types');
+import { FormattedMessage } from 'react-intl';
-const Metric = require('@ui/components/metric');
+import PropTypes from '@root/prop-types';
-const ReactIntl = require('react-intl');
 
-const {
+import {
-  FormattedMessage
-} = ReactIntl;
-
-const {
   MetricGraph,
   MetricCloseButton,
   MetricHeader,
@@ -16,7 +11,7 @@ const {
   MetricSettingsButton,
   MetricTitle,
   MetricView
-} = Metric;
+} from '@ui/components/metric';
 
 const MetricCharts = ({
   datasets,
@@ -30,23 +25,20 @@ const MetricCharts = ({
   onSettingsClick,
   onRemoveMetric = () => {}
 }) => {
-
+  const optionList = durations.map((duration) => (
-  const optionList = durations.map(duration => (
     <option key={String(duration)} value={duration}>
       {moment.duration(duration, 'minutes').humanize()}
     </option>
   ));
 
-  const metricList = datasets.map((dataset, index) => {
+  const metricList = datasets.map(({
-
+    data,
-    const {
+    duration = durations[0],
-      data,
+    type,
-      duration=durations[0],
+    uuid
-      type
+  }, index) => {
-    } = dataset;
-
     const onSelectChange = (evt) =>
-      onDurationChange(Number(evt.target.value), dataset.uuid);
+      onDurationChange(Number(evt.target.value), uuid);
 
     return (
       <MetricView key={type.id}>
@@ -88,4 +80,4 @@ MetricCharts.propTypes = {
   onSettingsClick: React.PropTypes.func.isRequired
 };
 
-module.exports = MetricCharts;
+export default MetricCharts;

frontend/src/components/metrics-outlet/index.js

@@ -1,27 +1,18 @@
-const React = require('react');
+import React from  'react';
-const Styled = require('styled-components');
+import styled from  'styled-components';
 
-const Column = require('@ui/components/column');
+import Column from  '@ui/components/column';
-const List = require('@ui/components/list');
+import { ListItemOutlet } from  '@ui/components/list';
-const MiniMetric = require('@ui/components/mini-metric');
+import PropTypes from  '@root/prop-types';
-const PropTypes = require('@root/prop-types');
+import Row from  '@ui/components/row';
-const Row = require('@ui/components/row');
 
-const {
+import {
-  default: styled
-} = Styled;
-
-const {
   MiniMetricGraph,
   MiniMetricMeta,
   MiniMetricTitle,
   MiniMetricSubtitle,
   MiniMetricView
-} = MiniMetric;
+} from '@ui/components/mini-metric';
-
-const {
-  ListItemOutlet
-} = List;
 
 const StyledOutlet = styled(ListItemOutlet)`
   padding-left: 0;
@@ -37,11 +28,10 @@ const StyledRow = styled(Row)`
   }
 `;
 
-const MetricsOutlet = (props) => {
+const MetricsOutlet = ({
-  const {
+  datasets = [],
-    datasets = []
+  ...props
-  } = props;
+}) => {
-
   const _datasets = datasets.map((metric, i) => (
     <Column key={i} xs={4}>
       <MiniMetricView borderless>
@@ -67,4 +57,4 @@ MetricsOutlet.propTypes = {
   datasets: React.PropTypes.arrayOf(PropTypes.dataset)
 };
 
-module.exports = MetricsOutlet;
+export default MetricsOutlet;

frontend/src/components/monitors/index.js

@@ -1,30 +1,14 @@
-const React = require('react');
+import React from 'react';
-const ReactIntl = require('react-intl');
+import { FormattedMessage } from 'react-intl';
-const Styled = require('styled-components');
+import styled from 'styled-components';
 
-const constants = require('@ui/shared/constants');
+import { colors } from '@ui/shared/constants';
-const Close = require('@ui/components/close');
+import Close from '@ui/components/close';
-const fns = require('@ui/shared/functions');
+import { remcalc } from '@ui/shared/functions';
-const Li = require('@ui/components/horizontal-list/li');
+import Li from '@ui/components/horizontal-list/li';
-const Modal = require('@ui/components/modal');
+import Modal from '@ui/components/modal';
-const PropTypes = require('@root/prop-types');
+import PropTypes from '@root/prop-types';
-const Ul = require('@ui/components/horizontal-list/ul');
+import Ul from '@ui/components/horizontal-list/ul';
-
-const {
-  FormattedMessage
-} = ReactIntl;
-
-const {
-  default: styled
-} = Styled;
-
-const {
-  colors
-} = constants;
-
-const {
-  remcalc
-} = fns;
 
 const H1 = styled.h1`
   font-size: ${remcalc(26)} !important;
@@ -41,7 +25,7 @@ const H3 = styled.h3`
   font-style: normal;
   font-stretch: normal;
   color: ${colors.brandSecondaryColor};
-  margin: ${remcalc(0)} auto ${remcalc(26)} ${remcalc(24)} !important;
+  margin: 0 auto ${remcalc(26)} ${remcalc(24)} !important;
 `;
 
 const Header = styled.header`
@@ -118,4 +102,4 @@ Monitors.propTypes = {
   togglePage: React.PropTypes.func.isRequired
 };
 
-module.exports = Monitors;
+export default Monitors;

frontend/src/components/navigation/index.js

@@ -1,8 +1,4 @@
-const Styled = require('styled-components');
+import styled from 'styled-components';
 
-const {
+export default styled.nav`
-  default: styled
-} = Styled;
-
-module.exports = styled.nav`
 `;

frontend/src/components/navigation/org.js

@@ -1,35 +1,15 @@
-const React = require('react');
+import React from 'react';
-const ReactRedux = require('react-redux');
+import { connect } from 'react-redux';
-const Styled = require('styled-components');
+import styled from 'styled-components';
 
-const Avatar = require('@ui/components/avatar');
+import Avatar from '@ui/components/avatar';
-const Container = require('@ui/components/container');
+import Container from '@ui/components/container';
-const NavLink = require('@ui/components/nav-link');
+import NavLink from '@ui/components/nav-link';
-const constants = require('@ui/shared/constants');
+import { colors } from '@ui/shared/constants';
-const PropTypes = require('@root/prop-types');
+import PropTypes from '@root/prop-types';
-const selectors = require('@state/selectors');
+import { orgsSelector } from '@state/selectors';
-const Ul = require('@ui/components/horizontal-list/ul');
+import Ul from '@ui/components/horizontal-list/ul';
-const fns = require('@ui/shared/functions');
+import { remcalc } from '@ui/shared/functions';
-
-const {
-  connect
-} = ReactRedux;
-
-const {
-  default: styled
-} = Styled;
-
-const {
-  colors
-} = constants;
-
-const {
-  orgsSelector
-} = selectors;
-
-const {
-  remcalc
-} = fns;
 
 const StyledNav = styled.div`
   background-color: #f2f2f2;
@@ -147,6 +127,6 @@ const mapStateToProps = (state) => ({
   orgs: orgsSelector(state)
 });
 
-module.exports = connect(
+export default connect(
   mapStateToProps
 )(OrgNavigation);

frontend/src/components/new-project/billing.js

@@ -1,40 +1,18 @@
-const React = require('react');
+import React from 'react';
-const ReactIntl = require('react-intl');
+import { FormattedMessage } from 'react-intl';
-const Styled = require('styled-components');
+import styled from 'styled-components';
 
-const constants = require('@ui/shared/constants');
+import { colors } from '@ui/shared/constants';
-const fns = require('@ui/shared/functions');
+import { remcalc } from '@ui/shared/functions';
+import { H2 } from '@ui/components/base-elements';
+import Button from '@ui/components/button';
 
-const Button = require('@ui/components/button');
+import {
-const BaseElements = require('@ui/components/base-elements');
-const Card = require('@ui/components/payment-card');
-
-const {
-  FormattedMessage
-} = ReactIntl;
-
-const {
-  H2
-} = BaseElements;
-
-const {
-  default: styled
-} = Styled;
-
-const {
-  colors
-} = constants;
-
-const {
-  remcalc
-} = fns;
-
-const {
   PaymentCard,
   PaymentCardDetail,
   PaymentCardDetails,
   PaymentCardView
-} = Card;
+} from '@ui/components/payment-card';
 
 const Container = styled.div`
   padding: ${remcalc(96)} ${remcalc(40)};
@@ -62,17 +40,15 @@ const LeftButton = styled(Button)`
   margin-right: ${remcalc(6)};
 `;
 
-const NewProjectBilling = (props) => {
+const NewProjectBilling = ({
-  const {
+  cards = [{
-    cards = [{
+    type: 'mastercard',
-      type: 'mastercard',
+    number: 'xxxx-xxxx-xxxx-4901'
-      number: 'xxxx-xxxx-xxxx-4901'
+  }],
-    }],
+  handleSubmit,
-    handleSubmit,
+  onSubmit,
-    onSubmit,
+  onNewBilling
-    onNewBilling
+}) => {
-  } = props;
-
   const _onNewBilling = (evt) => {
     evt.preventDefault();
     onNewBilling();
@@ -120,4 +96,4 @@ NewProjectBilling.propTypes = {
   onSubmit: React.PropTypes.func.isRequired
 };
 
-module.exports = NewProjectBilling;
+export default NewProjectBilling;

frontend/src/components/new-project/index.js

@@ -1,39 +1,17 @@
-const React = require('react');
+import React from 'react';
-const ReactIntl = require('react-intl');
+import { FormattedMessage } from 'react-intl';
-const Styled = require('styled-components');
+import styled from 'styled-components';
+import { colors } from '@ui/shared/constants';
+import { remcalc } from '@ui/shared/functions';
+import { H2 } from '@ui/components/base-elements';
+import Button from '@ui/components/button';
 
-const constants = require('@ui/shared/constants');
+import {
-const fns = require('@ui/shared/functions');
-const Button = require('@ui/components/button');
-const BaseElements = require('@ui/components/base-elements');
-const Form = require('@ui/components/form');
-
-const {
-  H2
-} = BaseElements;
-
-const {
   FormGroup,
   FormLabel,
   FormMeta,
   Input
-} = Form;
+} from '@ui/components/form';
-
-const {
-  FormattedMessage
-} = ReactIntl;
-
-const {
-  default: styled
-} = Styled;
-
-const {
-  colors
-} = constants;
-
-const {
-  remcalc
-} = fns;
 
 const Container = styled.div`
   padding: ${remcalc(96)} ${remcalc(40)};
@@ -66,15 +44,13 @@ const LeftButton = styled(Button)`
   margin-right: ${remcalc(6)};
 `;
 
-const CreateProject = (props) => {
+const CreateProject = ({
-  const {
+  handleSubmit,
-    handleSubmit,
+  onCancel,
-    onCancel,
+  onSubmit,
-    onSubmit,
+  pristine,
-    pristine,
+  submitting
-    submitting
+}) => {
-  } = props;
-
   const _onCancel = (evt) => {
     evt.preventDefault();
     onCancel();
@@ -119,4 +95,4 @@ CreateProject.propTypes = {
   submitting: React.PropTypes.bool.isRequired
 };
 
-module.exports = CreateProject;
+export default CreateProject;

frontend/src/components/new-project/new-billing.js

@@ -1,46 +1,24 @@
-const React = require('react');
+import React from 'react';
-const ReactIntl = require('react-intl');
+import { FormattedMessage } from 'react-intl';
-const Styled = require('styled-components');
+import styled from 'styled-components';
 
-const constants = require('@ui/shared/constants');
+import { colors } from '@ui/shared/constants';
-const fns = require('@ui/shared/functions');
+import { remcalc } from '@ui/shared/functions';
-const BaseElements = require('@ui/components/base-elements');
+import Button from '@ui/components/button';
-const normalize = require('@root/utils/form/normalize');
+import { H2 } from '@ui/components/base-elements';
-const Form = require('@ui/components/form');
-const Button = require('@ui/components/button');
 
-const {
+import {
-  H2
-} = BaseElements;
-
-const {
   FormGroup,
   FormLabel,
   FormMeta,
   Input
-} = Form;
+} from '@ui/components/form';
 
-const {
+import {
-  FormattedMessage
-} = ReactIntl;
-
-const {
-  default: styled
-} = Styled;
-
-const {
-  colors
-} = constants;
-
-const {
-  remcalc
-} = fns;
-
-const {
   normalizeCardNumber,
   normalizeCardCVV,
   normalizeCardExpiry
-} = normalize;
+} from '@root/utils/form/normalize';
 
 const Container = styled.div`
   padding: ${remcalc(96)} ${remcalc(40)};
@@ -84,15 +62,13 @@ const ProjectNameButtons = styled(Button)`
   margin-right: ${remcalc(6)};
 `;
 
-const CreateBilling = (props) => {
+const CreateBilling = ({
-  const {
+  handleSubmit,
-    handleSubmit,
+  onBack,
-    onBack,
+  onSubmit,
-    onSubmit,
+  pristine,
-    pristine,
+  submitting
-    submitting
+}) => {
-  } = props;
-
   const _onBack = (evt) => {
     evt.preventDefault();
     onBack(evt);
@@ -166,4 +142,4 @@ CreateBilling.propTypes = {
   submitting: React.PropTypes.bool.isRequired
 };
 
-module.exports = CreateBilling;
+export default CreateBilling;

frontend/src/components/people-list/index.js

@@ -1,18 +1,11 @@
-const React = require('react');
+import React from 'react';
-const Styled = require('styled-components');
+import styled from 'styled-components';
-
+import Empty from '@components/empty/people';
-const Empty = require('@components/empty/people');
+import Row from '@ui/components/row';
-
+import Column from '@ui/components/column';
-const Row = require('@ui/components/row');
+import Button from '@ui/components/button';
-const Column = require('@ui/components/column');
+import PeopleTable from './table';
-const Button = require('@ui/components/button');
+import Invite from './invite';
-
-const PeopleTable = require('./table');
-const Invite = require('./invite');
-
-const {
-  default: styled
-} = Styled;
 
 const StyledButton = styled(Button)`
   float: right;
@@ -25,6 +18,16 @@ const People = (props) => {
     people
   } = props;
 
+  const invite = !UI.invite_toggled ? null : (
+    <Invite {...props} />
+  );
+
+  const peopleTable = people.length > 0 ? (
+    <PeopleTable {...props} />
+  ) : (
+    <Empty />
+  );
+
   return (
     <div>
       <Row>
@@ -37,14 +40,10 @@ const People = (props) => {
           </StyledButton>
         </Column>
       </Row>
-
+      {invite}
-      {UI.invite_toggled ? <Invite {...props} /> : null}
-
       <Row>
         <Column xs={12}>
-          { people.length > 0
+          {peopleTable}
-            ? <PeopleTable {...props} />
-            : <Empty /> }
         </Column>
       </Row>
     </div>
@@ -57,4 +56,4 @@ People.propTypes = {
   people: React.PropTypes.array
 };
 
-module.exports = People;
+export default People;

frontend/src/components/people-list/invite.js

@@ -1,20 +1,16 @@
-const React = require('react');
+// eslint-disable-next-line no-unused-vars
-const Styled = require('styled-components');
+import _ from 'react-select/dist/react-select.css';
 
-const Row = require('@ui/components/row');
+import React from 'react';
-const Column = require('@ui/components/column');
+import styled from 'styled-components';
-const Button = require('@ui/components/button');
 
-const {
+import Row from '@ui/components/row';
-  default: styled
+import Column from '@ui/components/column';
-} = Styled;
+import Button from '@ui/components/button';
-
+// TODO: Require from UI Components - causes issue ATM.
-// TOOD: Require from UI Components - causes issue ATM.
+import Select from 'react-select';
-const Select = require('react-select');
-require('react-select/dist/react-select.css');
 
 const SelectWrapper = styled.div`
-
   .Select-menu-outer {
     margin-top: 48px;
   }
@@ -24,14 +20,13 @@ const SelectWrapper = styled.div`
     top: -4px;
   }
 `;
-
+const InlineButton = styled(Button)`
-const StyledSubmitButton = styled(Button)`
+  display: inline-block;
-  float: right;
-  width: 20%;
 `;
 
-const StyledInlineButton = styled(Button)`
+const ButtonAdd = styled(Button)`
-  display: inline-block;
+  float: right;
+  width: 20%;
 `;
 
 // TODO: When removing react-select css
@@ -44,41 +39,36 @@ const InputStyle = {
   paddingTop: '10px'
 };
 
-
 const Invite = React.createClass({
-
   propTypes: {
     addMemember: React.PropTypes.func,
     handleToggle: React.PropTypes.func,
     parentIndex: React.PropTypes.number,
     platformMembers: React.PropTypes.array
   },
-
   getInitialState() {
     return {
       selectValue: '',
       members: []
     };
   },
-
   getFormattedPlatformMembers() {
     return this.props.platformMembers.map((m) => ({
       value: m.email,
       label: m.name
     }));
   },
-
   handleSubmit(e) {
     e.preventDefault();
 
     const data = {
+      parentIndex: this.props.parentIndex,
       member: {
         name: this.state.selectValue.label,
         email: this.state.selectValue.value,
         role: 'Unassigned',
         status: 'Sent invitation'
-      },
+      }
-      parentIndex: this.props.parentIndex
     };
 
     this.props.addMemember(data, () => {
@@ -87,9 +77,7 @@ const Invite = React.createClass({
       });
     });
   },
-
   render() {
-
     const {
       handleToggle
     } = this.props;
@@ -107,45 +95,36 @@ const Invite = React.createClass({
         <Column md={6}>
           <p>Search for a person by name or email or enter an email address
             to invite someone new.</p>
-
           <Row>
             <Column xs={12}>
               <form onSubmit={this.handleSubmit}>
                 <SelectWrapper>
                   <Select.Creatable
-                    aria-label="member select"
+                    aria-label='member select'
                     onChange={handleSelectChange}
                     onNewOptionClick={handleSelectChange}
                     options={selectData}
-                    placeholder="Enter an email address or password"
+                    placeholder='Enter an email address or password'
                     style={InputStyle}
                     value={this.state.selectValue}
                   />
                 </SelectWrapper>
-                <StyledSubmitButton
+                <ButtonAdd type='submit' secondary>
-                  secondary
-                  type="submit"
-                >
                   Add
-                </StyledSubmitButton>
+                </ButtonAdd>
               </form>
             </Column>
           </Row>
-
+          <InlineButton onClick={handleToggle} secondary >
-          <StyledInlineButton
-            onClick={handleToggle}
-            secondary
-          >
             Cancel
-          </StyledInlineButton>
+          </InlineButton>
-
+          <InlineButton>
-          <StyledInlineButton>
             Send Invitation(s)
-          </StyledInlineButton>
+          </InlineButton>
         </Column>
       </Row>
     );
   }
 });
 
-module.exports = Invite;
+export default Invite;

frontend/src/components/people-list/table/index.js

@@ -1,39 +1,31 @@
-const React = require('react');
+import React from 'react';
-const Styled = require('styled-components');
+import styled from 'styled-components';
 
-const Table = require('@ui/components/table-data-table');
+import Table from '@ui/components/table-data-table';
-const Form  = require('@ui/components/form');
+import { remcalc } from '@ui/shared/functions';
 
-const fns  = require('@ui/shared/functions');
+import PersonStatus from './person-status';
+import PersonRole from './person-role';
+import PersonDelete from './person-delete';
 
-const PersonStatus = require('./person-status');
+import {
-const PersonRole = require('./person-role');
-const PersonDelete = require('./person-delete');
-
-const {
-  default: styled
-} = Styled;
-
-const {
-  remcalc
-} = fns;
-
-const {
   Checkbox,
   FormGroup
-} = Form;
+} from '@ui/components/form';
 
-const PeopleTable = (props) => {
+const StyledWrapper = styled.div`
-  const {
+  margin-top: ${remcalc(40)};
-    handleRoleTooltip,
+`;
-    handleStatusTooltip,
-    handleMemberUpdate,
-    people = [],
-    parentIndex,
-    removeMember,
-    UI = {}
-  } = props;
 
+const PeopleTable = ({
+  handleRoleTooltip,
+  handleStatusTooltip,
+  handleMemberUpdate,
+  people = [],
+  parentIndex,
+  removeMember,
+  UI = {}
+}) => {
   const columns = [{
     title: (
       <FormGroup>
@@ -101,10 +93,6 @@ const PeopleTable = (props) => {
     };
   });
 
-  const StyledWrapper = styled.div`
-    margin-top: ${remcalc(40)};
-  `;
-
   return (
     <StyledWrapper>
       <Table
@@ -125,4 +113,4 @@ PeopleTable.propTypes = {
   removeMember: React.PropTypes.func
 };
 
-module.exports = PeopleTable;
+export default PeopleTable;

frontend/src/components/people-list/table/person-delete.js

@@ -1,9 +1,5 @@
-const React = require('react');
+import React from 'react';
-const Styled = require('styled-components');
+import styled from 'styled-components';
-
-const {
-  default: styled
-} = Styled;
 
 const PlainButton = styled.button`
   background: transparent;
@@ -14,14 +10,11 @@ const PlainButton = styled.button`
   color: inherit;
 `;
 
-const PersonDelete = (props) => {
+const PersonDelete = ({
-
+  personIndex,
-  const {
+  parentIndex,
-    personIndex,
+  removeMember
-    parentIndex,
+}) => {
-    removeMember
-  } = props;
-
   const _onClick = () => removeMember({
     personIndex,
     parentIndex
@@ -40,4 +33,4 @@ PersonDelete.propTypes = {
   removeMember: React.PropTypes.func
 };
 
-module.exports = PersonDelete;
+export default PersonDelete;

frontend/src/components/people-list/table/person-role.js

@@ -1,22 +1,9 @@
-const React = require('react');
+import React from 'react';
-const Styled = require('styled-components');
+import styled from 'styled-components';
 
-const fns = require('@ui/shared/functions');
+import { remcalc } from '@ui/shared/functions';
-const composers = require('@ui/shared/composers');
+import { pseudoEl } from '@ui/shared/composers';
-
+import Tooltip from './tooltip';
-const Tooltip = require('./tooltip');
-
-const {
-  pseudoEl
-} = composers;
-
-const {
-  default: styled
-} = Styled;
-
-const {
-  remcalc
-} = fns;
 
 const borderSide = props => props.toggled
   ? 'bottom'
@@ -48,18 +35,15 @@ const PlainButton = styled.button`
   color: inherit;
 `;
 
-const PersonRole = (props) => {
+const PersonRole = ({
-
+  toggledID,
-  const {
+  membersRolesOptions,
-    toggledID,
+  person,
-    membersRolesOptions,
+  personIndex,
-    person,
+  handleRoleTooltip,
-    personIndex,
+  handleMemberUpdate,
-    handleRoleTooltip,
+  parentIndex
-    handleMemberUpdate,
+}) => {
-    parentIndex
-  } = props;
-
   const toggled = toggledID === person.uuid;
   const handleClick = () => handleRoleTooltip(person.uuid);
   const handleOptionSelect = (updatedMember) =>
@@ -72,22 +56,23 @@ const PersonRole = (props) => {
     role: person.role
   };
 
+  const tooltip = !toggled ? null : (
+    <Tooltip
+      handleSelect={handleOptionSelect}
+      options={membersRolesOptions}
+      parentIndex={parentIndex}
+      person={_person}
+      personAttr='role'
+      personIndex={personIndex}
+    />
+  );
+
   return (
     <StyledWrapper toggled={toggled}>
       <PlainButton onClick={handleClick} >
         {person.role}
       </PlainButton>
-
+      {tooltip}
-      { toggledID === person.uuid
-        ? <Tooltip
-          handleSelect={handleOptionSelect}
-          options={membersRolesOptions}
-          parentIndex={parentIndex}
-          person={_person}
-          personAttr="role"
-          personIndex={personIndex}
-          />
-        : null }
     </StyledWrapper>
   );
 };
@@ -105,4 +90,4 @@ PersonRole.propTypes = {
   ])
 };
 
-module.exports = PersonRole;
+export default PersonRole;

frontend/src/components/people-list/table/person-status.js

@@ -1,22 +1,8 @@
-const React = require('react');
+import React from 'react';
-const Styled = require('styled-components');
+import styled from 'styled-components';
-
+import { remcalc } from '@ui/shared/functions';
-const fns = require('@ui/shared/functions');
+import { pseudoEl } from '@ui/shared/composers';
-const composers = require('@ui/shared/composers');
+import Tooltip from './tooltip';
-
-const Tooltip = require('./tooltip');
-
-const {
-  pseudoEl
-} = composers;
-
-const {
-  default: styled
-} = Styled;
-
-const {
-  remcalc
-} = fns;
 
 const borderSide = props => props.toggled
   ? 'bottom'
@@ -48,20 +34,20 @@ const PlainButton = styled.button`
   color: inherit;
 `;
 
-const PersonStatus = (props) => {
+const PersonStatus = ({
-
+  toggledID,
-  const {
+  membersStatusOptions,
-    toggledID,
+  person,
-    membersStatusOptions,
+  personIndex,
-    person,
+  handleStatusTooltip,
-    personIndex,
+  handleMemberUpdate,
-    handleStatusTooltip,
+  parentIndex
-    handleMemberUpdate,
+}) => {
-    parentIndex
-  } = props;
-
   const toggled = toggledID === person.uuid;
-  const handleClick = () => handleStatusTooltip(person.uuid);
+
+  const handleClick = () =>
+    handleStatusTooltip(person.uuid);
+
   const handleOptionSelect = (updatedMember) =>
     handleMemberUpdate(updatedMember);
 
@@ -72,22 +58,23 @@ const PersonStatus = (props) => {
     role: person.role
   };
 
+  const tooltip = !toggled ? null : (
+    <Tooltip
+      handleSelect={handleOptionSelect}
+      options={membersStatusOptions}
+      parentIndex={parentIndex}
+      person={_person}
+      personAttr='status'
+      personIndex={personIndex}
+    />
+  );
+
   return (
     <StyledWrapper toggled={toggled}>
       <PlainButton onClick={handleClick} >
         {person.status}
       </PlainButton>
-
+      {tooltip}
-      { toggledID === person.uuid
-        ? <Tooltip
-          handleSelect={handleOptionSelect}
-          options={membersStatusOptions}
-          parentIndex={parentIndex}
-          person={_person}
-          personAttr="status"
-          personIndex={personIndex}
-          />
-        : null }
     </StyledWrapper>
   );
 };
@@ -105,4 +92,4 @@ PersonStatus.propTypes = {
   ])
 };
 
-module.exports = PersonStatus;
+export default PersonStatus;

frontend/src/components/people-list/table/tooltip.js

@@ -1,11 +1,6 @@
-const React = require('react');
+import React from 'react';
-const Styled = require('styled-components');
+import Tooltip from '@ui/components/tooltip';
-
+import styled from 'styled-components';
-const Tooltip = require('@ui/components/tooltip');
-
-const {
-  default: styled
-} = Styled;
 
 const StyledTooltip = styled(Tooltip)`
   position: absolute;
@@ -19,7 +14,7 @@ const arrowPosition = {
   right: '10%'
 };
 
-module.exports = ({
+const ExtendedTooltip = ({
   handleSelect,
   person = {},
   personAttr,
@@ -27,9 +22,7 @@ module.exports = ({
   options = [],
   parentIndex
 }) => {
-
   const _options = options.map( (option, i) => {
-
     const payload = {
       person: {
         uuid: person.uuid,
@@ -41,14 +34,15 @@ module.exports = ({
       parentIndex
     };
 
-    const _onClick = () => handleSelect(payload);
+    const _onClick = () =>
+      handleSelect(payload);
 
     return (
       <li
         key={i}
         onClick={_onClick}
-        role="listbox"
+        role='listbox'
-        tabIndex="0"
+        tabIndex='0'
       >
         {option}
       </li>
@@ -65,7 +59,7 @@ module.exports = ({
   );
 };
 
-module.exports.propTypes = {
+ExtendedTooltip.propTypes = {
   handleSelect: React.PropTypes.func,
   options: React.PropTypes.array,
   parentIndex: React.PropTypes.number,
@@ -73,3 +67,5 @@ module.exports.propTypes = {
   personAttr: React.PropTypes.string,
   personIndex: React.PropTypes.number
 };
+
+export default ExtendedTooltip;

frontend/src/components/redirect/index.js

@@ -1,10 +1,6 @@
-const React = require('react');
+import React from 'react';
-const ReactRouter = require('react-router-dom');
+import { Redirect } from 'react-router-dom';
 
-const {
+export default (to) => () => (
-  Redirect
-} = ReactRouter;
-
-module.exports = (to) => () => (
   <Redirect to={to} />
 );

frontend/src/components/section/index.js

@@ -1,30 +1,14 @@
-const React = require('react');
+import React from 'react';
-const ReactIntl = require('react-intl');
+import { FormattedMessage } from 'react-intl';
-const Styled = require('styled-components');
+import styled from 'styled-components';
 
-const Li = require('@ui/components/horizontal-list/li');
+import Li from '@ui/components/horizontal-list/li';
-const NavLink = require('@ui/components/nav-link');
+import NavLink from '@ui/components/nav-link';
-const constants = require('@ui/shared/constants');
+import { breakpoints } from '@ui/shared/constants';
-const fns = require('@ui/shared/functions');
+import { remcalc } from '@ui/shared/functions';
-const PropTypes = require('@root/prop-types');
+import PropTypes from '@root/prop-types';
-const Ul = require('@ui/components/horizontal-list/ul');
+import Ul from '@ui/components/horizontal-list/ul';
-const Breadcrumb = require('@components/breadcrumb');
+import Breadcrumb from '@components/breadcrumb';
-
-const {
-  default: styled
-} = Styled;
-
-const {
-  FormattedMessage
-} = ReactIntl;
-
-const {
-  breakpoints
-} = constants;
-
-const {
-  remcalc
-} = fns;
 
 const StyledHorizontalList = styled(Ul)`
   padding: 0;
@@ -57,7 +41,7 @@ const Section = (props) => {
   return (
     <div>
       <Breadcrumb {...props} />
-      <StyledHorizontalList name="project-nav">
+      <StyledHorizontalList name='project-nav'>
         {navLinks}
       </StyledHorizontalList>
       {children}
@@ -70,4 +54,4 @@ Section.propTypes = {
   links: React.PropTypes.arrayOf(PropTypes.link)
 };
 
-module.exports = Section;
+export default Section;

frontend/src/components/service/item.js

@@ -1,17 +1,12 @@
-const forceArray = require('force-array');
+import React from 'react';
-const React = require('react');
+import { Link } from 'react-router-dom';
-const ReactRouter = require('react-router-dom');
+import forceArray from 'force-array';
 
-const Anchor = require('@ui/components/anchor');
+import Anchor from '@ui/components/anchor';
-const List = require('@ui/components/list');
+import MetricsOutlet from '@components/metrics-outlet';
-const MetricsOutlet = require('@components/metrics-outlet');
+import PropTypes from '@root/prop-types';
-const PropTypes = require('@root/prop-types');
 
-const {
+import {
-  Link
-} = ReactRouter;
-
-const {
   ListItem,
   ListItemView,
   ListItemMeta,
@@ -21,7 +16,7 @@ const {
   ListItemGroupView,
   ListItemOptions,
   ListItemHeader
-} = List;
+} from '@ui/components/list';
 
 const ServiceItem = ({
   org = '',
@@ -109,4 +104,4 @@ ServiceItem.propTypes = {
   service: PropTypes.service
 };
 
-module.exports = ServiceItem;
+export default ServiceItem;

frontend/src/components/service/view-toggle.js

@@ -1,17 +1,8 @@
-const React = require('react');
+import React from 'react';
-const Toggle = require('@ui/components/toggle');
+import styled from 'styled-components';
 
-const fns = require('@ui/shared/functions');
+import Toggle from '@ui/components/toggle';
-
+import { remcalc } from '@ui/shared/functions';
-const Styled = require('styled-components');
-
-const {
-  remcalc
-} = fns;
-
-const {
-  default: styled
-} = Styled;
 
 const StyledWrapper = styled.div`
   margin-top: ${remcalc(9)};
@@ -22,14 +13,11 @@ const StyledSpan = styled.span`
   margin-right: ${remcalc(6)};
 `;
 
-const ServiceToggle = () => {
+const ServiceToggle = () => (
+  <StyledWrapper>
+    <StyledSpan>View</StyledSpan>
+    <Toggle />
+  </StyledWrapper>
+);
 
-  return (
+export default ServiceToggle;
-    <StyledWrapper>
-      <StyledSpan>View</StyledSpan>
-      <Toggle />
-    </StyledWrapper>
-  );
-};
-
-module.exports = ServiceToggle;

frontend/src/containers/app.js

@@ -1,35 +1,17 @@
-const React = require('react');
+import React from 'react';
-const ReactRedux = require('react-redux');
+import { connect } from 'react-redux';
-const ReactRouter = require('react-router-dom');
+import { Switch, Route } from 'react-router-dom';
-const Styled = require('styled-components');
+import { injectGlobal } from 'styled-components';
-
+import { updateRouter } from '@state/actions';
-const actions = require('@state/actions');
+import Article from '@components/article';
-const Article = require('@components/article');
+import Base from '@ui/components/base';
-const Base = require('@ui/components/base');
+import BaselineGrid from '@ui/components/baseline-grid';
-const BaselineGrid = require('@ui/components/baseline-grid');
+import Footer from '@components/footer';
-const Footer = require('@components/footer');
+import Header from '@containers/header';
-const Header = require('@containers/header');
+import Home from '@containers/home';
-const Home = require('@containers/home');
+import NotFound from '@containers/not-found';
-const NotFound = require('@containers/not-found');
+import Nav from '@components/navigation';
-const Nav = require('@components/navigation');
+import OrgNavigation from '@components/navigation/org';
-const OrgNavigation = require('@components/navigation/org');
-
-const {
-  updateRouter
-} = actions;
-
-const {
-  connect
-} = ReactRedux;
-
-const {
-  Switch,
-  Route
-} = ReactRouter;
-
-const {
-  injectGlobal
-} = Styled;
 
 const App = connect()(React.createClass({
   displayName: 'App',
@@ -80,18 +62,18 @@ const App = connect()(React.createClass({
   }
 }));
 
-module.exports = (props) => (
+export default (props) => (
   <App {...props}>
     <Header />
-    <Nav name="application-org-navigation">
+    <Nav name='application-org-navigation'>
       <OrgNavigation />
     </Nav>
-    <Article name="application-content">
+    <Article name='application-content'>
       <Switch>
         <Route component={Home} path='/:org?/:section?' />
         <Route component={NotFound} />
       </Switch>
     </Article>
-    <Footer name="application-footer" />
+    <Footer name='application-footer' />
   </App>
 );

frontend/src/containers/header/index.js

@@ -1,21 +1,8 @@
-const ReactRedux = require('react-redux');
+import { connect } from 'react-redux';
 
-const selectors = require('@state/selectors');
+import { accountSelector, accountUISelector } from '@state/selectors';
-const actions = require('@state/actions');
+import { toggleHeaderTooltip } from '@state/actions';
-const Header = require('@components/header');
+import Header from '@components/header';
-
-const {
-  connect
-} = ReactRedux;
-
-const {
-  accountSelector,
-  accountUISelector
-} = selectors;
-
-const {
-  toggleHeaderTooltip
-} = actions;
 
 const mapStateToProps = (state, ownProps) => ({
   account: accountSelector(state),
@@ -26,7 +13,7 @@ const mapDispatchToProps = (dispatch) => ({
   handleToggle: () => dispatch(toggleHeaderTooltip())
 });
 
-module.exports = connect(
+export default connect(
   mapStateToProps,
   mapDispatchToProps
 )(Header);

frontend/src/containers/home/index.js

@@ -1,34 +1,20 @@
-const React = require('react');
+import React from 'react';
-const ReactRedux = require('react-redux');
+import { connect } from 'react-redux';
-const ReactRouter = require('react-router-dom');
+import { Route, Switch } from 'react-router-dom';
 
-const Container = require('@ui/components/container');
+import Container from '@ui/components/container';
-const Org = require('@containers/org');
+import Org from '@containers/org';
-const PropTypes = require('@root/prop-types');
+import PropTypes from '@root/prop-types';
-const Redirect = require('@components/redirect');
+import Redirect from '@components/redirect';
-const selectors = require('@state/selectors');
+import { orgsSelector } from '@state/selectors';
-const NotFound = require('@containers/not-found');
+import NotFound from '@containers/not-found';
-
-const {
-  connect
-} = ReactRedux;
-
-const {
-  Route,
-  Switch
-} = ReactRouter;
-
-const {
-  orgsSelector
-} = selectors;
 
 const Home = ({
   orgs = []
 }) => {
-  const notFound = !orgs.length
+  const notFound = orgs.length ? Redirect(`/${orgs[0].id}`) : (
-    ? <NotFound />
+    <NotFound />
-    : Redirect(`/${orgs[0].id}`);
+  );
-
 
   return (
     <div>
@@ -42,7 +28,6 @@ const Home = ({
   );
 };
 
-
 Home.propTypes = {
   orgs: React.PropTypes.arrayOf(PropTypes.org)
 };
@@ -51,4 +36,6 @@ const mapStateToProps = (state) => ({
   orgs: orgsSelector(state)
 });
 
-module.exports = connect(mapStateToProps)(Home);
+export default connect(
+  mapStateToProps
+)(Home);

frontend/src/containers/metrics/index.js

@@ -1,22 +1,14 @@
-const React = require('react');
+import React from 'react';
-const ReactRedux = require('react-redux');
+import { connect } from 'react-redux';
 
-const actions = require('@state/actions');
+import { toggleMonitorView } from '@state/actions';
-const AddMetrics = require('@root/components/metric-charts/add-metrics');
+import AddMetrics from '@root/components/metric-charts/add-metrics';
-const Button = require('@ui/components/button');
+import Button from '@ui/components/button';
-const Column = require('@ui/components/column');
+import Column from '@ui/components/column';
-const MetricCharts = require('@root/components/metric-charts');
+import MetricCharts from '@root/components/metric-charts';
-const Monitors = require('./monitors');
+import Monitors from './monitors';
-const PropTypes = require('@root/prop-types');
+import PropTypes from '@root/prop-types';
-const Row = require('@ui/components/row');
+import Row from '@ui/components/row';
-
-const {
-  connect
-} = ReactRedux;
-
-const {
-  toggleMonitorView
-} = actions;
 
 const Metrics = ({
   addMetric,
@@ -29,7 +21,7 @@ const Metrics = ({
 }) => {
 
   const onMonitorsClick = (ev) => toggleMonitorView(metricTypeUuid);
-  const onRemoveMetric = (ev) => {};
+  const onRemoveMetric = (ev) => null;
 
   return (
     <div>
@@ -75,7 +67,7 @@ const mapDispatchToProps = (dispatch) => ({
     dispatch(toggleMonitorView(metricTypeUuid))
 });
 
-module.exports = connect(
+export default connect(
   mapStateToProps,
   mapDispatchToProps
 )(Metrics);

frontend/src/containers/metrics/monitors.js

@@ -1,34 +1,16 @@
-const React = require('react');
+import React from 'react';
-// const ReduxForm = require('redux-form');
+import { reduxForm } from 'redux-form';
-const ReactRedux = require('react-redux');
+import { connect } from 'react-redux';
 
-const actions = require('@state/actions');
+import { toggleMonitorView, switchMonitorViewPage } from '@state/actions';
-const CreateMonitor = require('@components/create-monitor');
+import CreateMonitor from '@components/create-monitor';
-const ManageMonitor = require('@components/manage-monitor');
+import ManageMonitor from '@components/manage-monitor';
-const Monitors = require('@components/monitors');
+import Monitors from '@components/monitors';
-const selectors = require('@state/selectors');
+import { metricTypeByUuidSelector } from '@state/selectors';
 
-/*const {
+const CreateMonitorForm = reduxForm({
-  reduxForm
-} = ReduxForm;*/
-
-const {
-  connect
-} = ReactRedux;
-
-const {
-  metricTypeByUuidSelector
-} = selectors;
-
-const {
-  toggleMonitorView,
-  switchMonitorViewPage
-} = actions;
-
-const ConnectedCreateMonitor = CreateMonitor; /*reduxForm({
   form: 'create-monitor'
-})(CreateMonitor);*/
+})(CreateMonitor);
-// const ConnectedCreateMonitor = reduxForm()(CreateMonitor);
 
 const MetricMonitors = (props) => {
   const {
@@ -37,14 +19,14 @@ const MetricMonitors = (props) => {
 
   const views = {
     create: () => (
-      <ConnectedCreateMonitor />
+      <CreateMonitorForm />
     ),
     manage: () => (
       <ManageMonitor />
     )
   };
 
-  const onSubmit = () => {};
+  const onSubmit = () => null;
 
   return (
     <Monitors submit={onSubmit} {...props}>
@@ -68,7 +50,7 @@ const mapDispatchToProps = (dispatch) => ({
   togglePage: (newPage) => dispatch(switchMonitorViewPage(newPage))
 });
 
-module.exports = connect(
+export default connect(
   mapStateToProps,
   mapDispatchToProps
 )(MetricMonitors);

frontend/src/containers/new-project/billing.js

@@ -1,27 +1,11 @@
-const React = require('react');
+import React from 'react';
-const ReactRedux = require('react-redux');
+import { connect } from 'react-redux';
-const ReduxForm = require('redux-form');
+import { reduxForm } from 'redux-form';
-const selectors = require('@state/selectors');
+import { orgByIdSelector } from '@state/selectors';
-const actions = require('@state/actions');
+import { handleNewProject } from '@state/actions';
 
-const PropTypes = require('@root/prop-types');
+import PropTypes from '@root/prop-types';
-const NewProjectBilling = require('@components/new-project/billing');
+import NewProjectBilling from '@components/new-project/billing';
-
-const {
-  connect
-} = ReactRedux;
-
-const {
-  reduxForm
-} = ReduxForm;
-
-const {
-  orgByIdSelector
-} = selectors;
-
-const {
-  handleNewProject
-} = actions;
 
 const NewProjectBillingForm = reduxForm({
   form: 'create-project',
@@ -29,27 +13,24 @@ const NewProjectBillingForm = reduxForm({
   forceUnregisterOnUnmount: true
 })(NewProjectBilling);
 
-const Billing = (props) => {
+const Billing = ({
-
+  cards,
-  const {
+  handleNewProject,
-    cards,
+  router,
-    handleNewProject,
+  org
-    pushRoute,
+}) => {
-    org
-  } = props;
-
   const onSubmit = (values) => {
     // TODO will need to save exisiting card to project
-    console.log('NewBilling values = ', values);
     handleNewProject({
       values,
       org
     });
-    pushRoute(`/${org.id}/projects`);
+
+    router.push(`/${org.id}/projects`);
   };
 
   const onNewBilling = (evt) =>
-    pushRoute(`/${org.id}/new-project/new-billing`);
+    router.push(`/${org.id}/new-project/new-billing`);
 
   return (
     <NewProjectBillingForm
@@ -65,25 +46,23 @@ Billing.propTypes = {
   cards: React.PropTypes.array, // TODO set up example card in thingie data
   handleNewProject: React.PropTypes.func.isRequired,
   org: PropTypes.org.isRequired,
-  pushRoute: React.PropTypes.func
+  router: React.PropTypes.object
 };
 
 const mapStateToProps = (state, {
   match = {
     params: {}
-  },
+  }
-  push
 }) => ({
   // TODO add cards - as above
-  org: orgByIdSelector(match.params.org)(state),
+  org: orgByIdSelector(match.params.org)(state)
-  pushRoute: push
 });
 
 const mapDispatchToProps = (dispatch) => ({
   handleNewProject: (values) => dispatch(handleNewProject(values))
 });
 
-module.exports = connect(
+export default connect(
   mapStateToProps,
   mapDispatchToProps
 )(Billing);

frontend/src/containers/new-project/index.js

@@ -1,16 +1,11 @@
-const React = require('react');
+import React from 'react';
-const ReactRouter = require('react-router-dom');
+import { Switch, Route } from 'react-router-dom';
 
-const NewProject = require('@containers/new-project/new-project');
+import NewProject from '@containers/new-project/new-project';
-const Billing = require('@containers/new-project/billing');
+import Billing from '@containers/new-project/billing';
-const NewBilling = require('@containers/new-project/new-billing');
+import NewBilling from '@containers/new-project/new-billing';
 
-const {
+export default () => (
-  Switch,
-  Route
-} = ReactRouter;
-
-module.exports = () => (
   <Switch>
     <Route
       component={NewProject}

frontend/src/containers/new-project/new-billing.js

@@ -1,49 +1,31 @@
-const React = require('react');
+import React from 'react';
-const ReactRedux = require('react-redux');
+import { connect } from 'react-redux';
-const ReduxForm = require('redux-form');
+import { reduxForm } from 'redux-form';
-const selectors = require('@state/selectors');
+import { orgByIdSelector } from '@state/selectors';
-const actions = require('@state/actions');
+import { handleNewProject } from '@state/actions';
 
-const PropTypes = require('@root/prop-types');
+import PropTypes from '@root/prop-types';
-const CreateBilling = require('@components/new-project/new-billing');
+import CreateBilling from '@components/new-project/new-billing';
-
-const {
-  connect
-} = ReactRedux;
-
-const {
-  reduxForm
-} = ReduxForm;
-
-const {
-  orgByIdSelector
-} = selectors;
-
-const {
-  handleNewProject
-} = actions;
 
 const NewBillingForm = reduxForm({
   form: 'create-project'
 })(CreateBilling);
 
-const NewBilling = (props) => {
+const NewBilling = ({
-
+  handleNewProject,
-  const {
+  router,
-    handleNewProject,
+  org
-    pushRoute,
+}) => {
-    org
-  } = props;
-
   const onBack = (evt) =>
-    pushRoute(`/${org.id}/new-project/billing`);
+    router.push(`/${org.id}/new-project/billing`);
 
   const onSubmit = (values) => {
     handleNewProject({
       values,
       org
     });
-    pushRoute(`/${org.id}/projects`);
+
+    router.push(`/${org.id}/projects`);
   };
 
   return (
@@ -57,25 +39,23 @@ const NewBilling = (props) => {
 NewBilling.propTypes = {
   handleNewProject: React.PropTypes.func.isRequired,
   org: PropTypes.org.isRequired,
-  pushRoute: React.PropTypes.func
+  router: React.PropTypes.object
 };
 
 const mapStateToProps = (state, {
   match = {
     params: {}
-  },
+  }
-  push
 }) => ({
   // TODO add cards - as above
-  org: orgByIdSelector(match.params.org)(state),
+  org: orgByIdSelector(match.params.org)(state)
-  pushRoute: push
 });
 
 const mapDispatchToProps = (dispatch) => ({
   handleNewProject: (values) => dispatch(handleNewProject(values))
 });
 
-module.exports = connect(
+export default connect(
   mapStateToProps,
   mapDispatchToProps
 )(NewBilling);

frontend/src/containers/new-project/new-project.js

@@ -1,21 +1,9 @@
-const React = require('react');
+import React from 'react';
-const ReactRedux = require('react-redux');
+import { connect } from 'react-redux';
-const ReduxForm = require('redux-form');
+import { reduxForm } from 'redux-form';
-const selectors = require('@state/selectors');
+import { orgByIdSelector } from '@state/selectors';
-const PropTypes = require('@root/prop-types');
+import PropTypes from '@root/prop-types';
-const CreateProject = require('@components/new-project');
+import CreateProject from '@components/new-project';
-
-const {
-  connect
-} = ReactRedux;
-
-const {
-  reduxForm
-} = ReduxForm;
-
-const {
-  orgByIdSelector
-} = selectors;
 
 const NewProjectForm = reduxForm({
   form: 'create-project',
@@ -23,18 +11,15 @@ const NewProjectForm = reduxForm({
   forceUnregisterOnUnmount: true
 })(CreateProject);
 
-const NewProject = (props) => {
+const NewProject = ({
-
+  org,
-  const {
+  router
-    org,
+}) => {
-    pushRoute
-  } = props;
-
   const onCancel = (values) =>
-    pushRoute(`/${org.id}/projects`);
+    router.push(`/${org.id}/projects`);
 
   const onSubmit = (values) =>
-    pushRoute(`/${org.id}/new-project/billing`);
+    router.push(`/${org.id}/new-project/billing`);
 
   return (
     <NewProjectForm
@@ -47,23 +32,21 @@ const NewProject = (props) => {
 
 NewProject.propTypes = {
   org: PropTypes.org.isRequired,
-  pushRoute: React.PropTypes.func
+  router: React.PropTypes.object
 };
 // TODO we'll need to know whether there any cards
 // otherwise go to new billing straight away
 const mapStateToProps = (state, {
   match = {
     params: {}
-  },
+  }
-  push
 }) => ({
-  org: orgByIdSelector(match.params.org)(state),
+  org: orgByIdSelector(match.params.org)(state)
-  pushRoute: push
 });
 
 const mapDispatchToProps = (dispatch) => ({});
 
-module.exports = connect(
+export default connect(
   mapStateToProps,
   mapDispatchToProps
 )(NewProject);

frontend/src/containers/not-found/index.js

@@ -1,12 +1,8 @@
-const React = require('react');
+import React from 'react';
 
-const NotFound = () => {
+export default () => (
-  return (
+  <div>
-    <div>
+    <h1>404</h1>
-      <h1>404</h1>
+    <h4>Not Found</h4>
-      <h4>Not Found</h4>
+  </div>
-    </div>
+);
-  );
-};
-
-module.exports = NotFound;

frontend/src/containers/org/index.js

@@ -1,35 +1,23 @@
-const isEmpty = require('lodash.isempty');
+import isEmpty from 'lodash.isempty';
-const React = require('react');
+import { connect } from 'react-redux';
-const ReactRedux = require('react-redux');
+import { Switch, Route } from 'react-router-dom';
-const ReactRouter = require('react-router-dom');
+import React from 'react';
 
-const NotFound = require('@containers/not-found');
+import NotFound from '@containers/not-found';
-const PropTypes = require('@root/prop-types');
+import PropTypes from '@root/prop-types';
-const Redirect = require('@components/redirect');
+import Redirect from '@components/redirect';
-const selectors = require('@state/selectors');
+import { orgByIdSelector, orgSectionsSelector } from '@state/selectors';
-
+import NewProject from '@containers/new-project';
-const NewProject = require('@containers/new-project');
+import PeopleSection from './people';
+import SettingsSection from './settings';
+import ProjectSection from './projects';
 
 const SectionComponents = {
-  people: require('./people'),
+  people: PeopleSection,
-  projects: require('./projects'),
+  settings: SettingsSection,
-  settings: require('./settings')
+  projects: ProjectSection
 };
 
-const {
-  connect
-} = ReactRedux;
-
-const {
-  Switch,
-  Route
-} = ReactRouter;
-
-const {
-  orgByIdSelector,
-  orgSectionsSelector
-} = selectors;
-
 const Org = ({
   org = {},
   sections = []
@@ -82,4 +70,6 @@ const mapStateToProps = (state, ownProps) => ({
   sections: orgSectionsSelector(ownProps.match.params.org)(state)
 });
 
-module.exports = connect(mapStateToProps)(Org);
+export default connect(
+  mapStateToProps
+)(Org);

frontend/src/containers/org/people.js

@@ -1,38 +1,29 @@
-const React = require('react');
+import React from 'react';
-const ReactRedux = require('react-redux');
+import { connect } from 'react-redux';
-const PeopleSection = require('@components/people-list');
+import PeopleSection from '@components/people-list';
-const selectors = require('@state/selectors');
+import Section from './section';
-const Section = require('./section');
-const actions = require('@state/actions');
 
-const {
+import {
-  connect
-} = ReactRedux;
-
-const {
   peopleByOrgIdSelector,
   orgUISelector,
   orgIndexSelector,
   membersSelector
-} = selectors;
+} from '@state/selectors';
 
-const {
+import {
   addMemberToOrg,
   orgHandleInviteToggle,
   orgHandlePeopleRoleTooltip,
   orgHandlePeopleStatusTooltip,
   orgHandleMemberUpdate,
   orgRemoveMember
-} = actions;
+} from '@state/actions';
 
-const People = (props) => {
+const People = (props) => (
-
+  <Section {...props}>
-  return (
+    <PeopleSection {...props} />
-    <Section {...props}>
+  </Section>
-      <PeopleSection {...props} />
+);
-    </Section>
-  );
-};
 
 const mapStateToProps = (state, {
   match = {
@@ -58,10 +49,9 @@ const mapDispatchToProps = (dispatch) => ({
     dispatch(orgHandleMemberUpdate(updatedMember)),
   removeMember: (removeData) =>
     dispatch(orgRemoveMember(removeData))
-
 });
 
-module.exports = connect(
+export default connect(
   mapStateToProps,
   mapDispatchToProps
 )(People);

frontend/src/containers/org/projects.js

@@ -1,16 +1,10 @@
-const React = require('react');
+import React from 'react';
-const ReactRouter = require('react-router-dom');
+import { Switch, Route } from 'react-router-dom';
+import Section from './section';
+import Projects from '@containers/projects';
+import Project from '@containers/project';
 
-const Section = require('./section');
+export default () => {
-const Projects = require('@containers/projects');
-const Project = require('@containers/project');
-
-const {
-  Switch,
-  Route
-} = ReactRouter;
-
-module.exports = () => {
   const list = (props) => (
     <Section {...props}>
       <Projects {...props} />

frontend/src/containers/org/section.js

@@ -1,18 +1,9 @@
-const React = require('react');
+import React from 'react';
-const ReactRedux = require('react-redux');
+import { connect } from 'react-redux';
 
-const PropTypes = require('@root/prop-types');
+import PropTypes from '@root/prop-types';
-const selectors = require('@state/selectors');
+import { orgByIdSelector, orgSectionsSelector } from '@state/selectors';
-const Section = require('@components/section');
+import Section from '@components/section';
-
-const {
-  connect
-} = ReactRedux;
-
-const {
-  orgByIdSelector,
-  orgSectionsSelector
-} = selectors;
 
 const OrgSection = ({
   children,
@@ -47,6 +38,6 @@ const mapStateToProps = (state, ownProps) => ({
   sections: orgSectionsSelector(ownProps.match.params.org)(state)
 });
 
-module.exports = connect(
+export default connect(
   mapStateToProps
 )(OrgSection);

frontend/src/containers/org/settings.js

@@ -1,35 +1,17 @@
-const React = require('react');
+import React from 'react';
-// const ReactIntl = require('react-intl');
+import { connect } from 'react-redux';
-const ReactRedux = require('react-redux');
+import Section from './section';
-// const ReactRouter = require('react-router-dom');
 
-const Section = require('./section');
+const Settings = (props) => (
-
+  <Section {...props}>
-// const {
+    <p>settings</p>
-//   FormattedMessage
+  </Section>
-// } = ReactIntl;
+);
-
-const {
-  connect
-} = ReactRedux;
-
-// const {
-//   Link,
-//   Match,
-//   Miss,
-//   Redirect
-// } = ReactRouter;
-
-const Settings = (props) => {
-  return (
-    <Section {...props}>
-      <p>settings</p>
-    </Section>
-  );
-};
 
 Settings.propTypes = {};
 
 const mapStateToProps = (state) => ({});
 
-module.exports = connect(mapStateToProps)(Settings);
+export default connect(
+  mapStateToProps
+)(Settings);

frontend/src/containers/project/index.js

@@ -1,33 +1,27 @@
-const React = require('react');
+import React from 'react';
-const ReactRedux = require('react-redux');
+import { connect } from 'react-redux';
-const ReactRouter = require('react-router-dom');
+import { Switch, Route } from 'react-router-dom';
+import PropTypes from '@root/prop-types';
+import Redirect from '@components/redirect';
+import ServicesSection from './services';
+import InstancesSection from './instances';
+import PeopleSection from './people';
+import SettingsSection from './settings';
+import ManifestSection from './manifest';
 
-const PropTypes = require('@root/prop-types');
+import {
-const Redirect = require('@components/redirect');
-const selectors = require('@state/selectors');
-
-const SectionComponents = {
-  services: require('./services'),
-  instances: require('./instances'),
-  people: require('./people'),
-  settings: require('./settings'),
-  manifest: require('./manifest')
-};
-
-const {
-  connect
-} = ReactRedux;
-
-const {
-  Switch,
-  Route
-} = ReactRouter;
-
-const {
   orgByIdSelector,
   projectSectionsSelector,
   projectByIdSelector
-} = selectors;
+} from '@state/selectors';
+
+const SectionComponents = {
+  services: ServicesSection,
+  instances: InstancesSection,
+  people: PeopleSection,
+  settings: SettingsSection,
+  manifest: ManifestSection
+};
 
 const Project = ({
   org = {},
@@ -70,6 +64,6 @@ const mapStateToProps = (state, {
   sections: projectSectionsSelector(state)
 });
 
-module.exports = connect(
+export default connect(
   mapStateToProps
 )(Project);

frontend/src/containers/project/instances.js

@@ -1,24 +1,11 @@
-const React = require('react');
+import React from 'react';
-const ReactRedux = require('react-redux');
+import { connect } from 'react-redux';
-
+import { toggleInstanceCollapsed } from '@state/actions';
-const actions = require('@state/actions');
+import EmptyInstances from '@components/empty/instances';
-const EmptyInstances = require('@components/empty/instances');
+import PropTypes from '@root/prop-types';
-const PropTypes = require('@root/prop-types');
+import Section from './section';
-const Section = require('./section');
+import InstanceList from '@components/instance-list';
-const InstanceList = require('@components/instance-list');
+import { instancesByProjectIdSelector } from '@state/selectors';
-const selectors = require('@state/selectors');
-
-const {
-  toggleInstanceCollapsed
-} = actions;
-
-const {
-  connect
-} = ReactRedux;
-
-const {
-  instancesByProjectIdSelector
-} = selectors;
 
 const Instances = (props) => {
   const {
@@ -58,7 +45,7 @@ const mapDispatchToProps = (dispatch) => ({
   toggleCollapsed: (uuid) => dispatch(toggleInstanceCollapsed(uuid))
 });
 
-module.exports = connect(
+export default connect(
   mapStateToProps,
   mapDispatchToProps
 )(Instances);

frontend/src/containers/project/manifest.js

@@ -1,8 +1,7 @@
-const React = require('react');
+import React from 'react';
+import Section from './section';
 
-const Section = require('./section');
+export default (props) => (
-
-module.exports = (props) => (
   <Section {...props}>
     <p>manifest</p>
   </Section>

frontend/src/containers/project/people.js

@@ -1,29 +1,23 @@
-const React = require('react');
+import React from 'react';
-const ReactRedux = require('react-redux');
+import { connect } from 'react-redux';
-const PeopleSection = require('@components/people-list');
+import PeopleSection from '@components/people-list';
-const selectors = require('@state/selectors');
+import Section from './section';
-const Section = require('./section');
-const actions = require('@state/actions');
 
-const {
+import {
-  connect
-} = ReactRedux;
-
-const {
   peopleByProjectIdSelector,
   projectUISelector,
   projectIndexByIdSelect,
   membersSelector
-} = selectors;
+} from '@state/selectors';
 
-const {
+import {
   addMemberToProject,
   projectHandleInviteToggle,
   projectHandlePeopleRoleTooltip,
   projectHandlePeopleStatusTooltip,
   projectHandleMemberUpdate,
   projectRemoveMember
-} = actions;
+} from '@state/actions';
 
 const People = (props) => (
   <Section {...props}>
@@ -53,10 +47,9 @@ const mapDispatchToProps = (dispatch) => ({
     dispatch(projectHandleMemberUpdate(updatedMember)),
   removeMember: (removeData) =>
     dispatch(projectRemoveMember(removeData))
-
 });
 
-module.exports = connect(
+export default connect(
   mapStateToProps,
   mapDispatchToProps
 )(People);

frontend/src/containers/project/section.js

@@ -1,19 +1,13 @@
-const React = require('react');
+import React from 'react';
-const ReactRedux = require('react-redux');
+import { connect } from 'react-redux';
+import PropTypes from '@root/prop-types';
+import Section from '@components/section';
 
-const PropTypes = require('@root/prop-types');
+import {
-const selectors = require('@state/selectors');
-const Section = require('@components/section');
-
-const {
-  connect
-} = ReactRedux;
-
-const {
   orgByIdSelector,
   projectByIdSelector,
   projectSectionsSelector
-} = selectors;
+} from '@state/selectors';
 
 const ProjectSection = ({
   children,
@@ -66,6 +60,6 @@ const mapStateToProps = (state, {
   sections: projectSectionsSelector(state)
 });
 
-module.exports = connect(
+export default connect(
   mapStateToProps
 )(ProjectSection);

frontend/src/containers/project/services.js

@@ -1,16 +1,10 @@
-const React = require('react');
+import React from 'react';
-const ReactRouter = require('react-router-dom');
+import { Switch, Route } from 'react-router-dom';
+import Section from './section';
+import Services from '@containers/services';
+import Service from '@containers/service';
 
-const Section = require('./section');
+export default () => {
-const Services = require('@containers/services');
-const Service = require('@containers/service');
-
-const {
-  Switch,
-  Route
-} = ReactRouter;
-
-module.exports = () => {
   const list = (props) => (
     <Section {...props}>
       <Services {...props} />

frontend/src/containers/project/settings.js

@@ -1,8 +1,7 @@
-const React = require('react');
+import React from 'react';
+import Section from './section';
 
-const Section = require('./section');
+export default (props) => (
-
-module.exports = (props) => (
   <Section {...props}>
     <p>settings</p>
   </Section>

frontend/src/containers/projects/index.js

@@ -1,34 +1,18 @@
-const React = require('react');
+import React from 'react';
-const ReactIntl = require('react-intl');
+import { FormattedMessage } from 'react-intl';
-const ReactRedux = require('react-redux');
+import { connect } from 'react-redux';
-
+import Button from '@ui/components/button';
-const Button = require('@ui/components/button');
+import Column from '@ui/components/column';
-const Column = require('@ui/components/column');
+import NavLink from '@ui/components/nav-link';
-const NavLink = require('@ui/components/nav-link');
+import { orgByIdSelector, projectsByOrgIdSelector } from '@state/selectors';
-const EmptyProjects = require('@components/empty/projects');
+import EmptyProjects from '@components/empty/projects';
-const PropTypes = require('@root/prop-types');
+import PropTypes from '@root/prop-types';
-const Row = require('@ui/components/row');
+import Row from '@ui/components/row';
-const selectors = require('@state/selectors');
-
-const {
-  connect
-} = ReactRedux;
-
-const {
-  FormattedMessage
-} = ReactIntl;
-
-const {
-  orgByIdSelector,
-  projectsByOrgIdSelector
-} = selectors;
-
-const Projects = (props) => {
-  const {
-    org = {},
-    projects = []
-  } = props;
 
+const Projects = ({
+  org = {},
+  projects = []
+}) => {
   const empty = projects.length ? null : (
     <EmptyProjects />
   );
@@ -77,6 +61,6 @@ const mapStateToProps = (state, {
   projects: projectsByOrgIdSelector(match.params.org)(state)
 });
 
-module.exports = connect(
+export default connect(
   mapStateToProps
 )(Projects);

frontend/src/containers/service/activity-feed.js

@@ -1,5 +1,5 @@
-const React = require('react');
+import React from 'react';
 
-module.exports = () => (
+export default () => (
   <p>activity-feed</p>
 );

frontend/src/containers/service/firewall.js

@@ -1,5 +1,5 @@
-const React = require('react');
+import React from 'react';
 
-module.exports = () => (
+export default () => (
   <p>firewall</p>
 );

frontend/src/containers/service/index.js

@@ -1,38 +1,35 @@
-const React = require('react');
+import React from 'react';
-const ReactRedux = require('react-redux');
+import { connect } from 'react-redux';
-const ReactRouter = require('react-router-dom');
+import { Switch, Route } from 'react-router-dom';
-
+import PropTypes from '@root/prop-types';
-const PropTypes = require('@root/prop-types');
+import Redirect from '@components/redirect';
-const Redirect = require('@components/redirect');
+import Section from '@components/section';
-const Section = require('@components/section');
+import SummarySection from './summary';
-const selectors = require('@state/selectors');
+import InstancesSection from './instances';
+import MetricsSection from './metrics';
+import NetworksSection from './networks';
+import TagsMetadataSection from './tags-metadata';
+import ActivityFeedSection from './activity-feed';
+import ServiceManifestSection from './service-manifest';
+import FirewallSection from './firewall';
 
 const SectionComponents = {
-  summary: require('./summary'),
+  summary: SummarySection,
-  instances: require('./instances'),
+  instances: InstancesSection,
-  metrics: require('./metrics'),
+  metrics: MetricsSection,
-  networks: require('./networks'),
+  networks: NetworksSection,
-  'tags-metadata': require('./tags-metadata'),
+  'tags-metadata': TagsMetadataSection,
-  'activity-feed': require('./activity-feed'),
+  'activity-feed': ActivityFeedSection,
-  'service-manifest': require('./service-manifest'),
+  'service-manifest': ServiceManifestSection,
-  firewall: require('./firewall')
+  firewall: FirewallSection
 };
 
-const {
+import {
-  connect
-} = ReactRedux;
-
-const {
-  Switch,
-  Route
-} = ReactRouter;
-
-const {
   orgByIdSelector,
   serviceSectionsSelector,
   projectByIdSelector,
   serviceByIdSelector
-} = selectors;
+} from '@state/selectors';
 
 const Service = ({
   org = {},
@@ -118,6 +115,6 @@ const mapStateToProps = (state, {
   service: serviceByIdSelector(match.params.serviceId)(state)
 });
 
-module.exports = connect(
+export default connect(
   mapStateToProps
 )(Service);

frontend/src/containers/service/instances.js

@@ -1,30 +1,15 @@
-const React = require('react');
+import React from 'react';
-const ReactRedux = require('react-redux');
+import { connect } from 'react-redux';
-
+import { toggleInstanceCollapsed } from '@state/actions';
-const actions = require('@state/actions');
+import EmptyInstances from '@components/empty/instances';
-const EmptyInstances = require('@components/empty/instances');
+import PropTypes from '@root/prop-types';
-const PropTypes = require('@root/prop-types');
+import InstanceList from '@components/instance-list';
-const InstanceList = require('@components/instance-list');
+import { instancesByServiceIdSelector } from '@state/selectors';
-const selectors = require('@state/selectors');
-
-const {
-  toggleInstanceCollapsed
-} = actions;
-
-const {
-  connect
-} = ReactRedux;
-
-const {
-  instancesByServiceIdSelector
-} = selectors;
-
-const Instances = (props) => {
-  const {
-    instances = [],
-    toggleCollapsed = () => null
-  } = props;
 
+const Instances = ({
+  instances = [],
+  toggleCollapsed = () => null
+}) => {
   const empty = instances.length ? null : (
     <EmptyInstances />
   );
@@ -57,7 +42,7 @@ const mapDispatchToProps = (dispatch) => ({
   toggleCollapsed: (uuid) => dispatch(toggleInstanceCollapsed(uuid))
 });
 
-module.exports = connect(
+export default connect(
   mapStateToProps,
   mapDispatchToProps
 )(Instances);

frontend/src/containers/service/metrics.js

@@ -1,23 +1,12 @@
-const ReactRedux = require('react-redux');
+import { connect } from 'react-redux';
+import { addMetric, metricDurationChange } from '@state/actions';
+import Metrics from '@containers/metrics';
 
-const actions = require('@state/actions');
+import {
-const Metrics = require('@containers/metrics');
-const selectors = require('@state/selectors');
-
-const {
-  connect
-} = ReactRedux;
-
-const {
   metricsByServiceIdSelector,
   metricTypesSelector,
   serviceByIdSelector
-} = selectors;
+} from '@state/selectors';
-
-const {
-  addMetric,
-  metricDurationChange
-} = actions;
 
 const mapStateToProps = (state, {
   match = {
@@ -30,12 +19,13 @@ const mapStateToProps = (state, {
 });
 
 const mapDispatchToProps = (dispatch) => ({
-  addMetric: (service) => (metric) => dispatch(addMetric({
+  addMetric: (service) => (metric) =>
-    metric: metric,
+    dispatch(addMetric({
-    service: service.uuid
+      metric: metric,
-  })),
+      service: service.uuid
-  metricDurationChange: (service) =>
+    })),
-    (duration, dataset) => dispatch(metricDurationChange({
+  metricDurationChange: (service) => (duration, dataset) =>
+    dispatch(metricDurationChange({
       duration,
       dataset
     }))
@@ -49,7 +39,7 @@ const mergeProps = (stateProps, dispatchProps, ownProps) => ({
   metricDurationChange: dispatchProps.metricDurationChange(stateProps.service)
 });
 
-module.exports = connect(
+export default connect(
   mapStateToProps,
   mapDispatchToProps,
   mergeProps

frontend/src/containers/service/networks.js

@@ -1,5 +1,5 @@
-const React = require('react');
+import React from 'react';
 
-module.exports = () => (
+export default () => (
   <p>networks</p>
 );

frontend/src/containers/service/service-manifest.js

@@ -1,5 +1,5 @@
-const React = require('react');
+import React from 'react';
 
-module.exports = () => (
+export default () => (
   <p>service-manifest</p>
 );

frontend/src/containers/service/summary.js

@@ -1,5 +1,5 @@
-const React = require('react');
+import React from 'react';
 
-module.exports = () => (
+export default () => (
   <p>summary</p>
 );

frontend/src/containers/service/tags-metadata.js

@@ -1,5 +1,5 @@
-const React = require('react');
+import React from 'react';
 
-module.exports = () => (
+export default () => (
   <p>tags-metadata</p>
 );

frontend/src/containers/services/index.js

@@ -1,30 +1,19 @@
-const React = require('react');
+import React from 'react';
-const ReactRedux = require('react-redux');
+import { connect } from 'react-redux';
+import EmptyServices from '@components/empty/services';
+import PropTypes from '@root/prop-types';
+import ServiceItem from '@components/service/item';
+import ServiceViewToggle from '@components/service/view-toggle';
+import Row from '@ui/components/row';
+import Column from '@ui/components/column';
+import { H2 } from '@ui/components/base-elements';
 
-const EmptyServices = require('@components/empty/services');
+import {
-const PropTypes = require('@root/prop-types');
-const ServiceItem = require('@components/service/item');
-const ServiceViewToggle = require('@components/service/view-toggle');
-const selectors = require('@state/selectors');
-
-const Row = require('@ui/components/row');
-const Column = require('@ui/components/column');
-const BaseELements = require('@ui/components/base-elements');
-
-const {
-  connect
-} = ReactRedux;
-
-const {
   orgByIdSelector,
   projectByIdSelector,
   servicesByProjectIdSelector,
   servicesForTopologySelector
-} = selectors;
+} from '@state/selectors';
-
-const {
-  H2
-} = BaseELements;
 
 const Services = ({
   org = {},
@@ -49,9 +38,7 @@ const Services = ({
     <Row>
       <Column xs={12}>
         <H2>Services</H2>
-
         <ServiceViewToggle />
-
         {empty}
         {serviceList}
       </Column>
@@ -78,6 +65,6 @@ const mapStateToProps = (state, {
     servicesForTopologySelector(match.params.projectId)(state)
 });
 
-module.exports = connect(
+export default connect(
   mapStateToProps
 )(Services);

frontend/src/index.js

@@ -1,6 +1,7 @@
-const a11y = require('react-a11y');
+import a11y from 'react-a11y';
-const ReactDOM = require('react-dom');
+import ReactDOM from 'react-dom';
-const React = require('react');
+import React from 'react';
+import Root from './root';
 
 if (process.env.NODE_ENV !== 'production') {
   a11y(React, {
@@ -8,12 +9,7 @@ if (process.env.NODE_ENV !== 'production') {
   });
 }
 
-const render = () => {
+ReactDOM.render(
-  const Root = require('./root');
+  <Root />,
-  ReactDOM.render(
+  document.getElementById('root')
-    <Root />,
+);
-    document.getElementById('root')
-  );
-};
-
-render();

frontend/src/intl.js

@@ -1,11 +1,7 @@
-const qs = require('querystring');
+import qs from 'querystring';
-const ReactIntl = require('react-intl');
+import { addLocaleData } from 'react-intl';
 
-const {
+export default (({
-  addLocaleData
-} = ReactIntl;
-
-module.exports = (({
   Locales = {},
   ReactIntlLocaleData = {}
 }) => {
@@ -18,13 +14,13 @@ module.exports = (({
   // http://stackoverflow.com/a/38150585
   const detectedLocale = (
     qs.parse((document.location.search || '').replace(/^\?/, '')).locale ||
-    navigator.languages && navigator.languages[0] || // Chrome / Firefox
+    (navigator.languages && navigator.languages[0]) || // Chrome / Firefox
     navigator.language ||   // All browsers
     navigator.userLanguage || // IE <= 10
     'en-US'
   ).toLowerCase();
 
-  const lang = detectedLocale.split(/\-/)[0];
+  const lang = detectedLocale.split(/-/)[0];
   const locale = ReactIntlLocaleData[lang]
     ? (Locales[detectedLocale] ? detectedLocale : 'en-us')
     : 'en-us';

frontend/src/prop-types.js

@@ -1,4 +1,4 @@
-const React = require('react');
+import React from 'react';
 
 const BaseObject = {
   uuid: React.PropTypes.string,
@@ -64,7 +64,7 @@ const Sections = React.PropTypes.arrayOf(
   React.PropTypes.string
 );
 
-module.exports = {
+export default {
   account: Account,
   link: Link,
   org: Org,

frontend/src/root.js

@@ -1,33 +1,18 @@
-const React = require('react');
+import React from 'react';
-const ReactIntlRedux = require('react-intl-redux');
+import { IntlProvider } from 'react-intl-redux';
-const ReactRedux = require('react-redux');
+import { Provider } from 'react-redux';
-const ReactRouter = require('react-router-dom');
+import { BrowserRouter } from 'react-router-dom';
 
-const App = require('@containers/app');
+import App from '@containers/app';
-const Store = require('@state/store');
+import Store from '@state/store';
+import MockState from './mock-state.json';
 
-const {
+export default () => (
-  IntlProvider
+  <Provider store={Store(MockState)}>
-} = ReactIntlRedux;
+    <IntlProvider>
-
+      <BrowserRouter>
-const {
+        <App />
-  Provider
+      </BrowserRouter>
-} = ReactRedux;
+    </IntlProvider>
-
+  </Provider>
-const {
+);
-  BrowserRouter
-} = ReactRouter;
-
-const store = Store(require('./mock-state.json'));
-
-module.exports = () => {
-  return (
-    <Provider store={store}>
-      <IntlProvider>
-        <BrowserRouter>
-          <App />
-        </BrowserRouter>
-      </IntlProvider>
-    </Provider>
-  );
-};

frontend/src/state/actions.js

@@ -1,62 +1,56 @@
-const constantCase = require('constant-case');
+import constantCase from 'constant-case';
-const ReduxActions = require('redux-actions');
+import { createAction } from 'redux-actions';
-
+// import thunks from '@state/thunks';
-const {
-  createAction
-} = ReduxActions;
 
 const APP = constantCase(process.env['APP_NAME']);
 
-const projectMemberActions = {
+/******************************* PROJECT MEMBER *******************************/
-  addMemberToProject:
-    createAction(`${APP}/PROJECT_ADD_MEMBER`),
-  projectHandleInviteToggle:
-    createAction(`${APP}/PROJECT_HANDLE_INVITE_MEMBER_TOGGLE`),
-  projectHandlePeopleStatusTooltip:
-    createAction(`${APP}/PROJECT_HANDLE_PERSON_STATUS_TOOLTIP`),
-  projectHandlePeopleRoleTooltip:
-    createAction(`${APP}/PROJECT_HANDLE_PERSON_ROLE_TOOLTIP`),
-  projectHandleMemberUpdate:
-    createAction(`${APP}/PROJECT_HANDLE_MEMBER_UPDATE`),
-  projectRemoveMember:
-    createAction(`${APP}/PROJECT_REMOVE_MEMBER_FROM_ROLE`)
-};
 
-const orgMemberActions = {
+export const addMemberToProject =
-  addMemberToOrg:
+  createAction(`${APP}/PROJECT_ADD_MEMBER`);
-    createAction(`${APP}/ORG_ADD_MEMBER`),
+export const projectHandleInviteToggle =
-  orgHandleInviteToggle:
+  createAction(`${APP}/PROJECT_HANDLE_INVITE_MEMBER_TOGGLE`);
-    createAction(`${APP}/ORG_HANDLE_INVITE_MEMBER_TOGGLE`),
+export const projectHandlePeopleStatusTooltip =
-  orgHandlePeopleStatusTooltip:
+  createAction(`${APP}/PROJECT_HANDLE_PERSON_STATUS_TOOLTIP`);
-    createAction(`${APP}/ORG_HANDLE_PERSON_STATUS_TOOLTIP`),
+export const projectHandlePeopleRoleTooltip =
-  orgHandlePeopleRoleTooltip:
+  createAction(`${APP}/PROJECT_HANDLE_PERSON_ROLE_TOOLTIP`);
-    createAction(`${APP}/ORG_HANDLE_PERSON_ROLE_TOOLTIP`),
+export const projectHandleMemberUpdate =
-  orgHandleMemberUpdate:
+  createAction(`${APP}/PROJECT_HANDLE_MEMBER_UPDATE`);
-    createAction(`${APP}/ORG_HANDLE_MEMBER_UPDATE`),
+export const projectRemoveMember =
-  orgRemoveMember:
+  createAction(`${APP}/PROJECT_REMOVE_MEMBER_FROM_ROLE`);
-    createAction(`${APP}/ORG_REMOVE_MEMBER_FROM_ROLE`)
-};
 
-module.exports = {
+/********************************* ORG MEMBER *********************************/
-  ...require('@state/thunks'),
+
-  updateRouter:
+export const addMemberToOrg =
-    createAction(`${APP}/UPDATE_ROUTER`),
+  createAction(`${APP}/ORG_ADD_MEMBER`);
-  toggleHeaderTooltip:
+export const orgHandleInviteToggle =
-    createAction(`${APP}/TOGGLE_HEADER_TOOLTIP`),
+  createAction(`${APP}/ORG_HANDLE_INVITE_MEMBER_TOGGLE`);
-  toggleServiceCollapsed:
+export const orgHandlePeopleStatusTooltip =
-    createAction(`${APP}/TOGGLE_SERVICE_COLLAPSED`),
+  createAction(`${APP}/ORG_HANDLE_PERSON_STATUS_TOOLTIP`);
-  addMetric:
+export const orgHandlePeopleRoleTooltip =
-    createAction(`${APP}/ADD_METRIC`),
+  createAction(`${APP}/ORG_HANDLE_PERSON_ROLE_TOOLTIP`);
-  metricDurationChange:
+export const orgHandleMemberUpdate =
-    createAction(`${APP}/METRIC_DURATION_CHANGE`),
+  createAction(`${APP}/ORG_HANDLE_MEMBER_UPDATE`);
-  toggleInstanceCollapsed:
+export const orgRemoveMember =
-    createAction(`${APP}/TOGGLE_INSTANCE_COLLAPSED`),
+  createAction(`${APP}/ORG_REMOVE_MEMBER_FROM_ROLE`);
-  toggleMonitorView:
+
-    createAction(`${APP}/TOGGLE_MONITOR_VIEW`),
+/*********************************** OTHER ***********************************/
-  switchMonitorViewPage:
+
-    createAction(`${APP}/SWITCH_MONITOR_VIEW_PAGE`),
+export const updateRouter =
-  handleNewProject:
+  createAction(`${APP}/UPDATE_ROUTER`);
-    createAction(`${APP}/CREATE_NEW_PROJECT`),
+export const toggleHeaderTooltip =
-  ...orgMemberActions,
+  createAction(`${APP}/TOGGLE_HEADER_TOOLTIP`);
-  ...projectMemberActions
+export const toggleServiceCollapsed =
-};
+  createAction(`${APP}/TOGGLE_SERVICE_COLLAPSED`);
+export const addMetric =
+  createAction(`${APP}/ADD_METRIC`);
+export const metricDurationChange =
+  createAction(`${APP}/METRIC_DURATION_CHANGE`);
+export const toggleInstanceCollapsed =
+  createAction(`${APP}/TOGGLE_INSTANCE_COLLAPSED`);
+export const toggleMonitorView =
+  createAction(`${APP}/TOGGLE_MONITOR_VIEW`);
+export const switchMonitorViewPage =
+  createAction(`${APP}/SWITCH_MONITOR_VIEW_PAGE`);
+export const handleNewProject =
+  createAction(`${APP}/CREATE_NEW_PROJECT`);

frontend/src/state/reducers/account.js

@@ -1,16 +1,7 @@
-const ReduxActions = require('redux-actions');
+import { handleActions } from 'redux-actions';
+import { toggleHeaderTooltip } from '@state/actions';
 
-const actions = require('@state/actions');
+export default handleActions({
-
-const {
-  handleActions
-} = ReduxActions;
-
-const {
-  toggleHeaderTooltip
-} = actions;
-
-module.exports = handleActions({
   [toggleHeaderTooltip.toString()]: (state, action) => {
     return {
       ...state,

frontend/src/state/reducers/app.js

@@ -1,16 +1,7 @@
-const ReduxActions = require('redux-actions');
+import { handleActions } from 'redux-actions';
+import { updateRouter } from '@state/actions';
 
-const actions = require('@state/actions');
+export default handleActions({
-
-const {
-  handleActions
-} = ReduxActions;
-
-const {
-  updateRouter
-} = actions;
-
-module.exports = handleActions({
   [updateRouter.toString()]: (state, action) => {
     return {
       ...state,

frontend/src/state/reducers/common.js

@@ -20,6 +20,6 @@ const toggleCollapsed = (state, action) => {
   };
 };
 
-module.exports = {
+export {
   toggleCollapsed
 };

frontend/src/state/reducers/index.js

@@ -1,22 +1,30 @@
-const Redux = require('redux');
+import { combineReducers } from 'redux';
+import { reducer as form } from 'redux-form';
 
-const {
+import account from '@state/reducers/account';
-  combineReducers
+import app from '@state/reducers/app';
-} = Redux;
+import instances from '@state/reducers/instances';
+import intl from '@state/reducers/intl';
+import metrics from '@state/reducers/metrics';
+import monitors from '@state/reducers/monitors';
+import orgs from '@state/reducers/orgs';
+import projects from '@state/reducers/projects';
+import services from '@state/reducers/services';
+import members from '@state/reducers/members';
 
-module.exports = () => {
+export default () => {
   return combineReducers({
-    account: require('@state/reducers/account'),
+    account,
-    app: require('@state/reducers/app'),
+    app,
     datacenters: (state = {}) => state,
-    form: require('redux-form').reducer,
+    form,
-    instances: require('@state/reducers/instances'),
+    instances,
-    intl: require('@state/reducers/intl'),
+    intl,
-    metrics: require('@state/reducers/metrics'),
+    metrics,
-    monitors: require('@state/reducers/monitors'),
+    monitors,
-    orgs: require('@state/reducers/orgs'),
+    orgs,
-    projects: require('@state/reducers/projects'),
+    projects,
-    services: require('@state/reducers/services'),
+    services,
-    members: require('@state/reducers/members')
+    members
   });
 };

frontend/src/state/reducers/instances.js

@@ -1,20 +1,7 @@
-const ReduxActions = require('redux-actions');
+import { handleActions } from 'redux-actions';
+import { toggleInstanceCollapsed } from '@state/actions';
+import { toggleCollapsed } from '@state/reducers/common';
 
-const actions = require('@state/actions');
+export default handleActions({
-const common = require('@state/reducers/common');
-
-const {
-  handleActions
-} = ReduxActions;
-
-const {
-  toggleInstanceCollapsed
-} = actions;
-
-const {
-  toggleCollapsed
-} = common;
-
-module.exports = handleActions({
   [toggleInstanceCollapsed.toString()]: toggleCollapsed
 }, {});

frontend/src/state/reducers/intl.js

@@ -1,9 +1,6 @@
-const ReduxActions = require('redux-actions');
+import { handleActions } from 'redux-actions';
+import initialState from '@root/intl';
 
-const {
+export default handleActions({
-  handleActions
-} = ReduxActions;
-
-module.exports = handleActions({
   'x': (state) => state // somehow handleActions needs at least one reducer
-}, require('@root/intl'));
+}, initialState);

frontend/src/state/reducers/members.js

@@ -1,9 +1,5 @@
-const ReduxActions = require('redux-actions');
+import { handleActions } from 'redux-actions';
 
-const {
+export default handleActions({
-  handleActions
-} = ReduxActions;
-
-module.exports = handleActions({
   'x': (state) => state // somehow handleActions needs at least one reducer
 }, {});

frontend/src/state/reducers/metrics.js

@@ -1,16 +1,7 @@
-const ReduxActions = require('redux-actions');
+import { handleActions } from 'redux-actions';
+import { metricDurationChange } from '@state/actions';
 
-const actions = require('@state/actions');
+export default handleActions({
-
-const {
-  handleActions
-} = ReduxActions;
-
-const {
-  metricDurationChange
-} = actions;
-
-module.exports = handleActions({
   [metricDurationChange.toString()]: (state, action) => {
     return ({
       ...state,

frontend/src/state/reducers/monitors.js

@@ -1,17 +1,7 @@
-const ReduxActions = require('redux-actions');
+import { handleActions } from 'redux-actions';
+import { toggleMonitorView, switchMonitorViewPage } from '@state/actions';
 
-const actions = require('@state/actions');
+export default handleActions({
-
-const {
-  handleActions
-} = ReduxActions;
-
-const {
-  toggleMonitorView,
-  switchMonitorViewPage
-} = actions;
-
-module.exports = handleActions({
   [toggleMonitorView.toString()]: (state, action) => ({
     ...state,
     ui: {

frontend/src/state/reducers/orgs.js

@@ -1,23 +1,16 @@
-const ReduxActions = require('redux-actions');
+import { handleActions } from 'redux-actions';
 
-const actions = require('@state/actions');
+import {
-
-const {
-  handleActions
-} = ReduxActions;
-
-const {
   addMemberToOrg,
   orgHandleInviteToggle,
   orgHandlePeopleRoleTooltip,
   orgHandlePeopleStatusTooltip,
   orgHandleMemberUpdate,
   orgRemoveMember
-} = actions;
+} from '@state/actions';
 
-module.exports = handleActions({
+export default handleActions({
   [addMemberToOrg.toString()]: (state, action) => {
-
     const {
       parentIndex,
       member

frontend/src/state/reducers/projects.js

@@ -1,13 +1,7 @@
-const ReduxActions = require('redux-actions');
+import { handleActions } from 'redux-actions';
+import { rndId } from '@ui/shared/functions';
 
-const actions = require('@state/actions');
+import {
-const fns = require('@ui/shared/functions');
-
-const {
-  handleActions
-} = ReduxActions;
-
-const {
   addMemberToProject,
   projectHandleInviteToggle,
   projectHandlePeopleRoleTooltip,
@@ -15,15 +9,10 @@ const {
   projectHandleMemberUpdate,
   projectRemoveMember,
   handleNewProject
-} = actions;
+} from '@state/actions';
 
-const {
+export default handleActions({
-  rndId
-} = fns;
-
-module.exports = handleActions({
   [addMemberToProject.toString()]: (state, action) => {
-
     const {
       parentIndex,
       member
@@ -44,45 +33,40 @@ module.exports = handleActions({
       ]
     };
   },
-  [projectHandleInviteToggle.toString()]: (state, action) => {
+  [projectHandleInviteToggle.toString()]: (state, action) => ({
-    return {
+    ...state,
-      ...state,
+    ui: {
-      ui: {
+      ...state.ui,
-        ...state.ui,
+      invite_toggled: !state.ui.invite_toggled
-        invite_toggled: !state.ui.invite_toggled
+    }
-      }
+  }),
-    };
+  [projectHandlePeopleStatusTooltip.toString()]: (state, action) => ({
-  },
+    ...state,
-  [projectHandlePeopleStatusTooltip.toString()]: (state, action) => {
+    ui: {
-    return {
+      ...state.ui,
-      ...state,
+      member_status_tooltip:
-      ui: {
+        action.payload === state.ui.member_status_tooltip
-        ...state.ui,
+          ? ''
-        member_status_tooltip:
+          : action.payload
-          action.payload === state.ui.member_status_tooltip
+    }
-            ? ''
+  }),
-            : action.payload
+  [projectHandlePeopleRoleTooltip.toString()]: (state, action) => ({
-      }
+    ...state,
-    };
+    ui: {
-  },
+      ...state.ui,
-  [projectHandlePeopleRoleTooltip.toString()]: (state, action) => {
+      member_role_tooltip:
-    return {
+        action.payload === state.ui.member_role_tooltip
-      ...state,
+          ? ''
-      ui: {
+          : action.payload
-        ...state.ui,
+    }
-        member_role_tooltip:
+  }),
-          action.payload === state.ui.member_role_tooltip
-            ? ''
-            : action.payload
-      }
-    };
-  },
   [projectHandleMemberUpdate.toString()]: (state, action) => {
     const {
       parentIndex,
       person,
       personIndex
     } = action.payload;
+
     return {
       ...state,
       ui: {
@@ -132,6 +116,7 @@ module.exports = handleActions({
       org,
       values
     } = action.payload;
+
     return {
       ...state,
       data: [

frontend/src/state/reducers/services.js

@@ -1,20 +1,6 @@
-const ReduxActions = require('redux-actions');
+import { handleActions } from 'redux-actions';
-
+import { addMetric, toggleServiceCollapsed } from '@state/actions';
-const actions = require('@state/actions');
+import { toggleCollapsed } from '@state/reducers/common';
-const common = require('@state/reducers/common');
-
-const {
-  handleActions
-} = ReduxActions;
-
-const {
-  addMetric,
-  toggleServiceCollapsed
-} = actions;
-
-const {
-  toggleCollapsed
-} = common;
 
 const getMetrics = (stateMetrics, addMetric, metric) => {
   const metrics = stateMetrics.map((m) => {
@@ -22,11 +8,13 @@ const getMetrics = (stateMetrics, addMetric, metric) => {
       ...m
     });
   });
+
   if(addMetric) {
     metrics.push({
       type: metric
     });
   }
+
   return metrics;
 };
 
@@ -43,18 +31,16 @@ const getServices = (stateServices, service, metric) => {
   });
 };
 
-module.exports = handleActions({
+export default handleActions({
   [toggleServiceCollapsed.toString()]: toggleCollapsed,
   // This will need to be handled by an async action
   // to update on the server too
-  [addMetric.toString()]: (state, action) => {
+  [addMetric.toString()]: (state, action) => ({
-    return ({
+    ...state,
-      ...state,
+    data: getServices(
-      data: getServices(
+      state.data,
-        state.data,
+      action.payload.service,
-        action.payload.service,
+      action.payload.metric
-        action.payload.metric
+    )
-      )
+  })
-    });
-  }
 }, {});

frontend/src/state/selectors.js

@@ -1,11 +1,7 @@
-const find = require('lodash.find');
+import find from 'lodash.find';
-const forceArray = require('force-array');
+import forceArray from 'force-array';
-const get = require('lodash.get');
+import get from 'lodash.get';
-const reselect = require('reselect');
+import { createSelector } from 'reselect';
-
-const {
-  createSelector
-} = reselect;
 
 const account = (state) => get(state, 'account.data', {});
 const accountUi = (state) => get(state, 'account.ui', {});
@@ -201,30 +197,30 @@ const peopleByProjectId = (projectId) => createSelector(
   }
 );
 
-module.exports = {
+export {
-  accountSelector: account,
+  account as accountSelector,
-  accountUISelector: accountUi,
+  accountUi as accountUISelector,
-  orgByIdSelector: orgById,
+  orgById as orgByIdSelector,
-  orgsSelector: orgs,
+  orgs as orgsSelector,
-  orgUISelector: orgUI,
+  orgUI as orgUISelector,
-  orgIndexSelector: orgIndexById,
+  orgIndexById as orgIndexSelector,
-  servicesSelector: services,
+  services as servicesSelector,
-  serviceByIdSelector: serviceById,
+  serviceById as serviceByIdSelector,
-  orgSectionsSelector: orgSections,
+  orgSections as orgSectionsSelector,
-  projectSectionsSelector: projectUiSections,
+  projectUiSections as projectSectionsSelector,
-  serviceSectionsSelector: serviceUiSections,
+  serviceUiSections as serviceSectionsSelector,
-  projectsByOrgIdSelector: projectsByOrgId,
+  projectsByOrgId as projectsByOrgIdSelector,
-  projectByIdSelector: projectById,
+  projectById as projectByIdSelector,
-  servicesByProjectIdSelector: servicesByProjectId,
+  servicesByProjectId as servicesByProjectIdSelector,
-  servicesForTopologySelector: servicesForTopology,
+  servicesForTopology as servicesForTopologySelector,
-  instancesByServiceIdSelector: instancesByServiceId,
+  instancesByServiceId as instancesByServiceIdSelector,
-  metricsByServiceIdSelector: metricsByServiceId,
+  metricsByServiceId as metricsByServiceIdSelector,
-  metricTypesSelector: metricTypes,
+  metricTypes as metricTypesSelector,
-  instancesByProjectIdSelector: instancesByProjectId,
+  instancesByProjectId as instancesByProjectIdSelector,
-  metricTypeByUuidSelector: metricTypeByUuid,
+  metricTypeByUuid as metricTypeByUuidSelector,
-  peopleByOrgIdSelector: peopleByOrgId,
+  peopleByOrgId as peopleByOrgIdSelector,
-  membersSelector: members,
+  members as membersSelector,
-  peopleByProjectIdSelector: peopleByProjectId,
+  peopleByProjectId as peopleByProjectIdSelector,
-  projectUISelector: projectsUI,
+  projectsUI as projectUISelector,
-  projectIndexByIdSelect: projectIndexById
+  projectIndexById as projectIndexByIdSelect
 };

frontend/src/state/store.js

@@ -1,20 +1,14 @@
-const createLogger = require('redux-logger');
+import createLogger from 'redux-logger';
-const enableBatching = require('redux-batched-actions').enableBatching;
+import { enableBatching } from 'redux-batched-actions';
-const promiseMiddleware = require('redux-promise-middleware').default;
+import promiseMiddleware from 'redux-promise-middleware';
-const redux = require('redux');
+import { createStore, compose, applyMiddleware } from 'redux';
-const thunk = require('redux-thunk').default;
+import thunk from 'redux-thunk';
 
-const createReducer = require('@state/reducers');
+import createReducer from '@state/reducers';
-
-const {
-  createStore,
-  compose,
-  applyMiddleware
-} = redux;
 
 const composeEnhancers = window.__REDUX_DEVTOOLS_EXTENSION_COMPOSE__ || compose;
 
-module.exports = (state = Object.freeze({})) => {
+export default (state = Object.freeze({})) => {
   return createStore(
     enableBatching(createReducer()),
     state,

frontend/src/state/thunks/app.js

@@ -1 +1 @@
-module.exports = {};
+export {};

frontend/src/state/thunks/index.js

@@ -1,3 +1,3 @@
-module.exports = {
+// import app from '@state/thunks/app';
-  ...require('@state/thunks/app')
+
-};
+export {};

frontend/src/utils/form/normalize.js

@@ -65,7 +65,7 @@ const normalizeCardExpiry = (value, previousValue) => {
   return n.slice(0, 2) + '/' + n.slice(2, 4);
 };
 
-module.exports = {
+export {
   normalizeCardNumber,
   normalizeCardCVV,
   normalizeCardExpiry

frontend/test/components/index.js

@@ -7,19 +7,19 @@ const {
 } = enzyme;
 
 test('renders <App> without exploding', (t) => {
-  const App = require('@containers/app');
+  const App = require('@containers/app').default;
   const wrapper = shallow(<App />);
   t.deepEqual(wrapper.length, 1);
 });
 
 test('renders <Home> without exploding', (t) => {
-  const Home = require('@containers/home').WrappedComponent;
+  const Home = require('@containers/home').default.WrappedComponent;
   const wrapper = shallow(<Home />);
   t.deepEqual(wrapper.length, 1);
 });
 
 test('renders <NotFound> without exploding', (t) => {
-  const NotFound = require('@containers/not-found');
+  const NotFound = require('@containers/not-found').default;
   const wrapper = shallow(<NotFound />);
   t.deepEqual(wrapper.length, 1);
 });

frontend/test/components/project-section.js

@@ -13,7 +13,8 @@ const {
 } = create;
 
 test('renders <ProjectSection> without exploding', (t) => {
-  const Section = require('@containers/project/section').WrappedComponent;
+  // eslint-disable-next-line max-len
+  const Section = require('@containers/project/section').default.WrappedComponent;
   const wrapper = render(withIntl(<Section />));
   t.deepEqual(wrapper.length, 1);
 });

frontend/test/components/projects.js

@@ -14,13 +14,13 @@ const {
 } = create;
 
 test('renders <Projects> without exploding', (t) => {
-  const Projects = require('@containers/projects').WrappedComponent;
+  const Projects = require('@containers/projects').default.WrappedComponent;
   const wrapper = render(withIntl(<Projects />));
   t.deepEqual(wrapper.length, 1);
 });
 
 test('renders connected <Projects> without exploding', (t) => {
-  const Projects = require('@containers/projects');
+  const Projects = require('@containers/projects').default;
   const wrapper = render(create(<Projects />));
   t.deepEqual(wrapper.length, 1);
 });
@@ -40,7 +40,7 @@ test('renders <Projects>\'s list of projects ', (t) => {
     plan: '100.17$ per day'
   }];
 
-  const Projects = require('@containers/projects').WrappedComponent;
+  const Projects = require('@containers/projects').default.WrappedComponent;
   const wrapper = render(withRouter(withIntl(
     <Projects projects={projects} />
   )));
@@ -55,7 +55,7 @@ test('renders <Projects>\'s list of projects ', (t) => {
 });
 
 test('renders <Projects>\'s empty <p> when no projects ', (t) => {
-  const Projects = require('@containers/projects').WrappedComponent;
+  const Projects = require('@containers/projects').default.WrappedComponent;
   const wrapper = render(withIntl(<Projects />));
 
   const empty = wrapper.find('p[name=empty]');

frontend/test/components/service.js

@@ -14,13 +14,13 @@ const {
 } = create;
 
 test('renders <Service> without exploding', (t) => {
-  const Service = require('@containers/service').WrappedComponent;
+  const Service = require('@containers/service').default.WrappedComponent;
   const wrapper = render(withRouter(withIntl(<Service />)));
   t.deepEqual(wrapper.length, 1);
 });
 
 test('renders connected <Service> without exploding', (t) => {
-  const Service = require('@containers/service');
+  const Service = require('@containers/service').default;
   const wrapper = render(create(<Service />));
   t.deepEqual(wrapper.length, 1);
 });

frontend/test/components/services.js

@@ -13,13 +13,13 @@ const {
 } = create;
 
 test('renders <Services> without exploding', (t) => {
-  const Services = require('@containers/services').WrappedComponent;
+  const Services = require('@containers/services').default.WrappedComponent;
   const wrapper = render(withIntl(<Services />));
   t.deepEqual(wrapper.length, 1);
 });
 
 test('renders connected <Services> without exploding', (t) => {
-  const Services = require('@containers/services');
+  const Services = require('@containers/services').default;
   const wrapper = render(create(<Services />));
   t.deepEqual(wrapper.length, 1);
 });

frontend/test/helpers/create.js

@@ -2,7 +2,7 @@ const React = require('react');
 const ReactRedux = require('react-redux');
 const ReactIntl = require('react-intl');
 const ReactRouter = require('react-router-dom');
-const createStore = require('@state/store');
+const createStore = require('@state/store').default;
 
 const {
   addLocaleData,

frontend/test/reducers/app.js

@@ -1,21 +1,23 @@
-const ReduxAva = require('redux-ava');
+// const ReduxAva = require('redux-ava');
 const test = require('ava');
+// 
+// const reducer = require('@state/reducers/app');
+// const actions = require('@state/actions');
+// 
+// const {
+//   reducerTest
+// } = ReduxAva;
+// 
+// const {
+//   updateRouter
+// } = actions;
 
-const reducer = require('@state/reducers/app');
+// test('updateReducer', reducerTest(reducer, {}, updateRouter({
-const actions = require('@state/actions');
+//   transitionTo: '[Function]'
+// }), {
+//   router: {
+//     transitionTo: '[Function]'
+//   }
+// }));
 
-const {
+test('updateReducer', (t) => t.deepEqual(1, 1));
-  reducerTest
-} = ReduxAva;
-
-const {
-  updateRouter
-} = actions;
-
-test('updateReducer', reducerTest(reducer, {}, updateRouter({
-  transitionTo: '[Function]'
-}), {
-  router: {
-    transitionTo: '[Function]'
-  }
-}));

frontend/webpack/.eslintrc

@@ -0,0 +1,8 @@
+{
+  "extends": [
+    "react-app"
+  ],
+  "rules": {
+    "import/no-webpack-loader-syntax": 1
+  }
+}

frontend/webpack/base.js

@@ -9,7 +9,8 @@ const {
   MODULES,
   FRONTEND,
   UI,
-  STATIC
+  STATIC,
+  ESLINT
 } = paths;
 
 module.exports = {
@@ -37,7 +38,6 @@ module.exports = {
     filename: '[name].js'
   },
   plugins: [
-    plugins['no-errors'](),
     plugins['define'](),
     plugins['shell']()
   ],
@@ -48,12 +48,7 @@ module.exports = {
       use: [{
         loader: 'eslint-loader',
         options: {
-          presets: [
+          configFile: ESLINT
-            'react-app'
-          ],
-          rules: {
-            'no-debugger': 1
-          }
         }
       }],
       include: [

frontend/webpack/paths.js

@@ -17,5 +17,6 @@ module.exports = {
   UI: process.env.NODE_ENV === 'production'
     ? path.join(FRONTEND, 'node_modules', '@tomgco/joyent-portal-ui', 'dist')
     : path.join(UI, 'src'),
-  STATIC: path.join(FRONTEND, 'static')
+  STATIC: path.join(FRONTEND, 'static'),
+  ESLINT: path.join(__dirname, '.eslintrc')
 };