Spearhead/joyent-portal
1
0
Fork 0
Code Issues Pull Requests Releases Wiki Activity

convert commonjs to es2015 modules (fixes #234)

Browse Source
This commit is contained in:
Sérgio Ramos 2017-02-20 16:15:36 +00:00 committed by Judit Greskovits
parent d8b485e0de
commit 520b685e28
284 changed files with 3818 additions and 6788 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
frontend/.babelrc
View File

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

6
frontend/.eslintrc
View File

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

8
frontend/package.json
View File

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

16
frontend/src/components/article/index.js
View File

@ -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 // Main Contonent Wrapper Styles
module.exports = styled.article` export default styled.article`
background-color: ${colors.base.grey};
padding: 2rem; padding: 2rem;
${breakpoints.large` ${breakpoints.large`

69
frontend/src/components/breadcrumb/index.js
View File

@ -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 // Main Contonent Wrapper Styles
const StyledDiv = styled.div` const StyledDiv = styled.div`
@ -75,21 +58,19 @@ const Breadcrumb = ({
children, children,
links = [], links = [],
name = [] 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 = { Breadcrumb.propTypes = {
children: React.PropTypes.node, children: React.PropTypes.node,
@ -97,4 +78,4 @@ Breadcrumb.propTypes = {
name: React.PropTypes.arrayOf(PropTypes.link) name: React.PropTypes.arrayOf(PropTypes.link)
}; };
module.exports = Breadcrumb; export default Breadcrumb;

37
frontend/src/components/create-monitor/index.js
View File

@ -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` const H4 = styled.h4`
margin-bottom: ${remcalc(5)} !important; margin-bottom: ${remcalc(5)} !important;
@ -148,4 +129,4 @@ CreateMonitor.propTypes = {
submitting: React.PropTypes.bool submitting: React.PropTypes.bool
}; };
module.exports = CreateMonitor; export default CreateMonitor;

20
frontend/src/components/empty/instances.js
View File

@ -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> <Row>
<Column xs={12}> <Column xs={12}>
<P name='empty'> <P name='empty'>

15
frontend/src/components/empty/people.js
View File

@ -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> <Row>
<Column xs={12}> <Column xs={12}>
<p name='empty'> <p name='empty'>
@ -17,4 +13,3 @@ module.exports = () => (
</Column> </Column>
</Row> </Row>
); );

15
frontend/src/components/empty/projects.js
View File

@ -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> <Row>
<Column xs={12}> <Column xs={12}>
<p name='empty'> <p name='empty'>
@ -17,4 +13,3 @@ module.exports = () => (
</Column> </Column>
</Row> </Row>
); );

40
frontend/src/components/empty/services.js
View File

@ -1,43 +1,23 @@
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` const StyledBox = styled.div`
box-shadow: 0 2px 0 0 rgba(0, 0, 0, 0.05); box-shadow: 0 2px 0 0 rgba(0, 0, 0, 0.05);
border: solid 1px #d8d8d8; border: solid 1px #d8d8d8;
padding: ${remcalc('6 18 24')}; padding: ${remcalc('6 18 24')};
& + & { & + & {
margin-top: ${remcalc(24)}; margin-top: ${remcalc(24)};
} }
`; `;
module.exports = () => ( export default () => (
<div> <div>
<Row name='empty-services'> <Row name='empty-services'>
<Column> <Column>

8
frontend/src/components/footer/index.js
View File

@ -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``;

50
frontend/src/components/header/index.js
View File

@ -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 const borderSide = props => props.toggled
? 'bottom' ? 'bottom'
@ -53,7 +33,7 @@ const StyledProfileWrapper = styled.div`
const StyledAvatarWrapper = styled.div` const StyledAvatarWrapper = styled.div`
display: inline-block; display: inline-block;
&:after { &:after {
border-left: ${remcalc(5)} solid transparent; border-left: ${remcalc(5)} solid transparent;
border-right: ${remcalc(5)} solid transparent; border-right: ${remcalc(5)} solid transparent;
@ -122,7 +102,7 @@ const Header = ({
); );
return ( return (
<StyledHeader name="application-header"> <StyledHeader name='application-header'>
<Row> <Row>
<Column lg={10} xs={8}> <Column lg={10} xs={8}>
<Link to='/'> <Link to='/'>
@ -157,4 +137,4 @@ Header.propTypes = {
tooltip: React.PropTypes.bool tooltip: React.PropTypes.bool
}; };
module.exports = Header; export default Header;

13
frontend/src/components/instance-item/index.js
View File

@ -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, ListItem,
ListItemView, ListItemView,
ListItemMeta, ListItemMeta,
ListItemTitle, ListItemTitle,
ListItemOptions ListItemOptions
} = List; } from '@ui/components/list';
const InstanceItem = ({ const InstanceItem = ({
instance = {}, instance = {},
@ -34,4 +33,4 @@ InstanceItem.propTypes = {
toggleCollapsed: React.PropTypes.func toggleCollapsed: React.PropTypes.func
}; };
module.exports = InstanceItem; export default InstanceItem;

12
frontend/src/components/instance-list/index.js
View File

@ -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 = ({ const InstanceList = ({
instances = [], instances = [],
toggleCollapsed = () => null toggleCollapsed = () => null
}) => { }) => {
const onClick = (uuid) => () => toggleCollapsed(uuid); const onClick = (uuid) => () =>
toggleCollapsed(uuid);
const instanceList = instances.map((instance) => ( const instanceList = instances.map((instance) => (
<InstanceItem <InstanceItem
@ -29,4 +29,4 @@ InstanceList.propTypes = {
toggleCollapsed: React.PropTypes.func toggleCollapsed: React.PropTypes.func
}; };
module.exports = InstanceList; export default InstanceList;

6
frontend/src/components/manage-monitor/index.js
View File

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

23
frontend/src/components/metric-charts/add-metrics.js
View File

@ -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, AddMetricButton,
AddMetricDescription, AddMetricDescription,
AddMetricLink, AddMetricLink,
AddMetricTile, AddMetricTile,
AddMetricTitle AddMetricTitle
} = AddMetric; } from '@ui/components/add-metric';
const AddMetrics = ({ const AddMetrics = ({
datasets, datasets,
metricTypes, metricTypes,
onAddMetric 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) => ( const addButton = (metric) => (
<AddMetricButton metric={metric} onClick={onAddMetric}> <AddMetricButton metric={metric} onClick={onAddMetric}>
<FormattedMessage id={'metrics.add.add-label'} onClick={onAddMetric} /> <FormattedMessage id={'metrics.add.add-label'} onClick={onAddMetric} />
</AddMetricButton> </AddMetricButton>
); );
const addedButton = ( const addedButton = (
<AddMetricButton disabled> <AddMetricButton disabled>
<FormattedMessage id={'metrics.add.added-label'} /> <FormattedMessage id={'metrics.add.added-label'} />
@ -62,4 +59,4 @@ AddMetrics.propTypes = {
onAddMetric: React.PropTypes.func.isRequired onAddMetric: React.PropTypes.func.isRequired
}; };
module.exports = AddMetrics; export default AddMetrics;

38
frontend/src/components/metric-charts/index.js
View File

@ -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, MetricGraph,
MetricCloseButton, MetricCloseButton,
MetricHeader, MetricHeader,
@ -16,7 +11,7 @@ const {
MetricSettingsButton, MetricSettingsButton,
MetricTitle, MetricTitle,
MetricView MetricView
} = Metric; } from '@ui/components/metric';
const MetricCharts = ({ const MetricCharts = ({
datasets, datasets,
@ -30,23 +25,20 @@ const MetricCharts = ({
onSettingsClick, onSettingsClick,
onRemoveMetric = () => {} onRemoveMetric = () => {}
}) => { }) => {
const optionList = durations.map((duration) => (
const optionList = durations.map(duration => (
<option key={String(duration)} value={duration}> <option key={String(duration)} value={duration}>
{moment.duration(duration, 'minutes').humanize()} {moment.duration(duration, 'minutes').humanize()}
</option> </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) => const onSelectChange = (evt) =>
onDurationChange(Number(evt.target.value), dataset.uuid); onDurationChange(Number(evt.target.value), uuid);
return ( return (
<MetricView key={type.id}> <MetricView key={type.id}>
@ -88,4 +80,4 @@ MetricCharts.propTypes = {
onSettingsClick: React.PropTypes.func.isRequired onSettingsClick: React.PropTypes.func.isRequired
}; };
module.exports = MetricCharts; export default MetricCharts;

36
frontend/src/components/metrics-outlet/index.js
View File

@ -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, MiniMetricGraph,
MiniMetricMeta, MiniMetricMeta,
MiniMetricTitle, MiniMetricTitle,
MiniMetricSubtitle, MiniMetricSubtitle,
MiniMetricView MiniMetricView
} = MiniMetric; } from '@ui/components/mini-metric';
const {
ListItemOutlet
} = List;
const StyledOutlet = styled(ListItemOutlet)` const StyledOutlet = styled(ListItemOutlet)`
padding-left: 0; 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) => ( const _datasets = datasets.map((metric, i) => (
<Column key={i} xs={4}> <Column key={i} xs={4}>
<MiniMetricView borderless> <MiniMetricView borderless>
@ -67,4 +57,4 @@ MetricsOutlet.propTypes = {
datasets: React.PropTypes.arrayOf(PropTypes.dataset) datasets: React.PropTypes.arrayOf(PropTypes.dataset)
}; };
module.exports = MetricsOutlet; export default MetricsOutlet;

40
frontend/src/components/monitors/index.js
View File

@ -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` const H1 = styled.h1`
font-size: ${remcalc(26)} !important; font-size: ${remcalc(26)} !important;
@ -41,7 +25,7 @@ const H3 = styled.h3`
font-style: normal; font-style: normal;
font-stretch: normal; font-stretch: normal;
color: ${colors.brandSecondaryColor}; color: ${colors.brandSecondaryColor};
margin: ${remcalc(0)} auto ${remcalc(26)} ${remcalc(24)} !important; margin: 0 auto ${remcalc(26)} ${remcalc(24)} !important;
`; `;
const Header = styled.header` const Header = styled.header`
@ -118,4 +102,4 @@ Monitors.propTypes = {
togglePage: React.PropTypes.func.isRequired togglePage: React.PropTypes.func.isRequired
}; };
module.exports = Monitors; export default Monitors;

8
frontend/src/components/navigation/index.js
View File

@ -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`
`; `;

44
frontend/src/components/navigation/org.js
View File

@ -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` const StyledNav = styled.div`
background-color: #f2f2f2; background-color: #f2f2f2;
@ -147,6 +127,6 @@ const mapStateToProps = (state) => ({
orgs: orgsSelector(state) orgs: orgsSelector(state)
}); });
module.exports = connect( export default connect(
mapStateToProps mapStateToProps
)(OrgNavigation); )(OrgNavigation);

62
frontend/src/components/new-project/billing.js
View File

@ -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, PaymentCard,
PaymentCardDetail, PaymentCardDetail,
PaymentCardDetails, PaymentCardDetails,
PaymentCardView PaymentCardView
} = Card; } from '@ui/components/payment-card';
const Container = styled.div` const Container = styled.div`
padding: ${remcalc(96)} ${remcalc(40)}; padding: ${remcalc(96)} ${remcalc(40)};
@ -62,17 +40,15 @@ const LeftButton = styled(Button)`
margin-right: ${remcalc(6)}; 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) => { const _onNewBilling = (evt) => {
evt.preventDefault(); evt.preventDefault();
onNewBilling(); onNewBilling();
@ -120,4 +96,4 @@ NewProjectBilling.propTypes = {
onSubmit: React.PropTypes.func.isRequired onSubmit: React.PropTypes.func.isRequired
}; };
module.exports = NewProjectBilling; export default NewProjectBilling;

58
frontend/src/components/new-project/index.js
View File

@ -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, FormGroup,
FormLabel, FormLabel,
FormMeta, FormMeta,
Input Input
} = Form; } from '@ui/components/form';
const {
FormattedMessage
} = ReactIntl;
const {
default: styled
} = Styled;
const {
colors
} = constants;
const {
remcalc
} = fns;
const Container = styled.div` const Container = styled.div`
padding: ${remcalc(96)} ${remcalc(40)}; padding: ${remcalc(96)} ${remcalc(40)};
@ -66,15 +44,13 @@ const LeftButton = styled(Button)`
margin-right: ${remcalc(6)}; margin-right: ${remcalc(6)};
`; `;
const CreateProject = (props) => { const CreateProject = ({
const { handleSubmit,
handleSubmit, onCancel,
onCancel, onSubmit,
onSubmit, pristine,
pristine, submitting
submitting }) => {
} = props;
const _onCancel = (evt) => { const _onCancel = (evt) => {
evt.preventDefault(); evt.preventDefault();
onCancel(); onCancel();
@ -119,4 +95,4 @@ CreateProject.propTypes = {
submitting: React.PropTypes.bool.isRequired submitting: React.PropTypes.bool.isRequired
}; };
module.exports = CreateProject; export default CreateProject;

62
frontend/src/components/new-project/new-billing.js
View File

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

43
frontend/src/components/people-list/index.js
View File

@ -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)` const StyledButton = styled(Button)`
float: right; float: right;
@ -25,6 +18,16 @@ const People = (props) => {
people people
} = props; } = props;
const invite = !UI.invite_toggled ? null : (
<Invite {...props} />
);
const peopleTable = people.length > 0 ? (
<PeopleTable {...props} />
) : (
<Empty />
);
return ( return (
<div> <div>
<Row> <Row>
@ -37,14 +40,10 @@ const People = (props) => {
</StyledButton> </StyledButton>
</Column> </Column>
</Row> </Row>
{invite}
{UI.invite_toggled ? <Invite {...props} /> : null}
<Row> <Row>
<Column xs={12}> <Column xs={12}>
{ people.length > 0 {peopleTable}
? <PeopleTable {...props} />
: <Empty /> }
</Column> </Column>
</Row> </Row>
</div> </div>
@ -57,4 +56,4 @@ People.propTypes = {
people: React.PropTypes.array people: React.PropTypes.array
}; };
module.exports = People; export default People;

71
frontend/src/components/people-list/invite.js
View File

@ -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` const SelectWrapper = styled.div`
.Select-menu-outer { .Select-menu-outer {
margin-top: 48px; margin-top: 48px;
} }
@ -24,14 +20,13 @@ const SelectWrapper = styled.div`
top: -4px; 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 // TODO: When removing react-select css
@ -44,41 +39,36 @@ const InputStyle = {
paddingTop: '10px' paddingTop: '10px'
}; };
const Invite = React.createClass({ const Invite = React.createClass({
propTypes: { propTypes: {
addMemember: React.PropTypes.func, addMemember: React.PropTypes.func,
handleToggle: React.PropTypes.func, handleToggle: React.PropTypes.func,
parentIndex: React.PropTypes.number, parentIndex: React.PropTypes.number,
platformMembers: React.PropTypes.array platformMembers: React.PropTypes.array
}, },
getInitialState() { getInitialState() {
return { return {
selectValue: '', selectValue: '',
members: [] members: []
}; };
}, },
getFormattedPlatformMembers() { getFormattedPlatformMembers() {
return this.props.platformMembers.map((m) => ({ return this.props.platformMembers.map((m) => ({
value: m.email, value: m.email,
label: m.name label: m.name
})); }));
}, },
handleSubmit(e) { handleSubmit(e) {
e.preventDefault(); e.preventDefault();
const data = { const data = {
parentIndex: this.props.parentIndex,
member: { member: {
name: this.state.selectValue.label, name: this.state.selectValue.label,
email: this.state.selectValue.value, email: this.state.selectValue.value,
role: 'Unassigned', role: 'Unassigned',
status: 'Sent invitation' status: 'Sent invitation'
}, }
parentIndex: this.props.parentIndex
}; };
this.props.addMemember(data, () => { this.props.addMemember(data, () => {
@ -87,9 +77,7 @@ const Invite = React.createClass({
}); });
}); });
}, },
render() { render() {
const { const {
handleToggle handleToggle
} = this.props; } = this.props;
@ -107,45 +95,36 @@ const Invite = React.createClass({
<Column md={6}> <Column md={6}>
<p>Search for a person by name or email or enter an email address <p>Search for a person by name or email or enter an email address
to invite someone new.</p> to invite someone new.</p>
<Row> <Row>
<Column xs={12}> <Column xs={12}>
<form onSubmit={this.handleSubmit}> <form onSubmit={this.handleSubmit}>
<SelectWrapper> <SelectWrapper>
<Select.Creatable <Select.Creatable
aria-label="member select" aria-label='member select'
onChange={handleSelectChange} onChange={handleSelectChange}
onNewOptionClick={handleSelectChange} onNewOptionClick={handleSelectChange}
options={selectData} options={selectData}
placeholder="Enter an email address or password" placeholder='Enter an email address or password'
style={InputStyle} style={InputStyle}
value={this.state.selectValue} value={this.state.selectValue}
/> />
</SelectWrapper> </SelectWrapper>
<StyledSubmitButton <ButtonAdd type='submit' secondary>
secondary
type="submit"
>
Add Add
</StyledSubmitButton> </ButtonAdd>
</form> </form>
</Column> </Column>
</Row> </Row>
<InlineButton onClick={handleToggle} secondary >
<StyledInlineButton
onClick={handleToggle}
secondary
>
Cancel Cancel
</StyledInlineButton> </InlineButton>
<InlineButton>
<StyledInlineButton>
Send Invitation(s) Send Invitation(s)
</StyledInlineButton> </InlineButton>
</Column> </Column>
</Row> </Row>
); );
} }
}); });
module.exports = Invite; export default Invite;

56
frontend/src/components/people-list/table/index.js
View File

@ -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, Checkbox,
FormGroup 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 = [{ const columns = [{
title: ( title: (
<FormGroup> <FormGroup>
@ -101,10 +93,6 @@ const PeopleTable = (props) => {
}; };
}); });
const StyledWrapper = styled.div`
margin-top: ${remcalc(40)};
`;
return ( return (
<StyledWrapper> <StyledWrapper>
<Table <Table
@ -125,4 +113,4 @@ PeopleTable.propTypes = {
removeMember: React.PropTypes.func removeMember: React.PropTypes.func
}; };
module.exports = PeopleTable; export default PeopleTable;

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

@ -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` const PlainButton = styled.button`
background: transparent; background: transparent;
@ -14,14 +10,11 @@ const PlainButton = styled.button`
color: inherit; color: inherit;
`; `;
const PersonDelete = (props) => { const PersonDelete = ({
personIndex,
const { parentIndex,
personIndex, removeMember
parentIndex, }) => {
removeMember
} = props;
const _onClick = () => removeMember({ const _onClick = () => removeMember({
personIndex, personIndex,
parentIndex parentIndex
@ -40,4 +33,4 @@ PersonDelete.propTypes = {
removeMember: React.PropTypes.func removeMember: React.PropTypes.func
}; };
module.exports = PersonDelete; export default PersonDelete;

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

@ -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 const borderSide = props => props.toggled
? 'bottom' ? 'bottom'
@ -26,12 +13,12 @@ const StyledWrapper = styled.div`
position: relative; position: relative;
display: inline-block; display: inline-block;
min-width: ${remcalc(130)}; min-width: ${remcalc(130)};
&:after { &:after {
border-left: ${remcalc(5)} solid transparent; border-left: ${remcalc(5)} solid transparent;
border-right: ${remcalc(5)} solid transparent; border-right: ${remcalc(5)} solid transparent;
border-${borderSide}: ${remcalc(5)} solid black; border-${borderSide}: ${remcalc(5)} solid black;
${pseudoEl({ ${pseudoEl({
top: '40%', top: '40%',
right: remcalc(-10) right: remcalc(-10)
@ -48,18 +35,15 @@ const PlainButton = styled.button`
color: inherit; 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 toggled = toggledID === person.uuid;
const handleClick = () => handleRoleTooltip(person.uuid); const handleClick = () => handleRoleTooltip(person.uuid);
const handleOptionSelect = (updatedMember) => const handleOptionSelect = (updatedMember) =>
@ -72,22 +56,23 @@ const PersonRole = (props) => {
role: person.role role: person.role
}; };
const tooltip = !toggled ? null : (
<Tooltip
handleSelect={handleOptionSelect}
options={membersRolesOptions}
parentIndex={parentIndex}
person={_person}
personAttr='role'
personIndex={personIndex}
/>
);
return ( return (
<StyledWrapper toggled={toggled}> <StyledWrapper toggled={toggled}>
<PlainButton onClick={handleClick} > <PlainButton onClick={handleClick} >
{person.role} {person.role}
</PlainButton> </PlainButton>
{tooltip}
{ toggledID === person.uuid
? <Tooltip
handleSelect={handleOptionSelect}
options={membersRolesOptions}
parentIndex={parentIndex}
person={_person}
personAttr="role"
personIndex={personIndex}
/>
: null }
</StyledWrapper> </StyledWrapper>
); );
}; };
@ -105,4 +90,4 @@ PersonRole.propTypes = {
]) ])
}; };
module.exports = PersonRole; export default PersonRole;

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

@ -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 const borderSide = props => props.toggled
? 'bottom' ? 'bottom'
@ -26,12 +12,12 @@ const StyledWrapper = styled.div`
position: relative; position: relative;
display: inline-block; display: inline-block;
min-width: ${remcalc(130)}; min-width: ${remcalc(130)};
&:after { &:after {
border-left: ${remcalc(5)} solid transparent; border-left: ${remcalc(5)} solid transparent;
border-right: ${remcalc(5)} solid transparent; border-right: ${remcalc(5)} solid transparent;
border-${borderSide}: ${remcalc(5)} solid black; border-${borderSide}: ${remcalc(5)} solid black;
${pseudoEl({ ${pseudoEl({
top: '40%', top: '40%',
right: remcalc(-10) right: remcalc(-10)
@ -48,20 +34,20 @@ const PlainButton = styled.button`
color: inherit; 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 toggled = toggledID === person.uuid;
const handleClick = () => handleStatusTooltip(person.uuid);
const handleClick = () =>
handleStatusTooltip(person.uuid);
const handleOptionSelect = (updatedMember) => const handleOptionSelect = (updatedMember) =>
handleMemberUpdate(updatedMember); handleMemberUpdate(updatedMember);
@ -72,22 +58,23 @@ const PersonStatus = (props) => {
role: person.role role: person.role
}; };
const tooltip = !toggled ? null : (
<Tooltip
handleSelect={handleOptionSelect}
options={membersStatusOptions}
parentIndex={parentIndex}
person={_person}
personAttr='status'
personIndex={personIndex}
/>
);
return ( return (
<StyledWrapper toggled={toggled}> <StyledWrapper toggled={toggled}>
<PlainButton onClick={handleClick} > <PlainButton onClick={handleClick} >
{person.status} {person.status}
</PlainButton> </PlainButton>
{tooltip}
{ toggledID === person.uuid
? <Tooltip
handleSelect={handleOptionSelect}
options={membersStatusOptions}
parentIndex={parentIndex}
person={_person}
personAttr="status"
personIndex={personIndex}
/>
: null }
</StyledWrapper> </StyledWrapper>
); );
}; };
@ -105,4 +92,4 @@ PersonStatus.propTypes = {
]) ])
}; };
module.exports = PersonStatus; export default PersonStatus;

28
frontend/src/components/people-list/table/tooltip.js
View File

@ -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)` const StyledTooltip = styled(Tooltip)`
position: absolute; position: absolute;
@ -19,7 +14,7 @@ const arrowPosition = {
right: '10%' right: '10%'
}; };
module.exports = ({ const ExtendedTooltip = ({
handleSelect, handleSelect,
person = {}, person = {},
personAttr, personAttr,
@ -27,9 +22,7 @@ module.exports = ({
options = [], options = [],
parentIndex parentIndex
}) => { }) => {
const _options = options.map( (option, i) => { const _options = options.map( (option, i) => {
const payload = { const payload = {
person: { person: {
uuid: person.uuid, uuid: person.uuid,
@ -41,14 +34,15 @@ module.exports = ({
parentIndex parentIndex
}; };
const _onClick = () => handleSelect(payload); const _onClick = () =>
handleSelect(payload);
return ( return (
<li <li
key={i} key={i}
onClick={_onClick} onClick={_onClick}
role="listbox" role='listbox'
tabIndex="0" tabIndex='0'
> >
{option} {option}
</li> </li>
@ -65,11 +59,13 @@ module.exports = ({
); );
}; };
module.exports.propTypes = { ExtendedTooltip.propTypes = {
handleSelect: React.PropTypes.func, handleSelect: React.PropTypes.func,
options: React.PropTypes.array, options: React.PropTypes.array,
parentIndex: React.PropTypes.number, parentIndex: React.PropTypes.number,
person: React.PropTypes.object, person: React.PropTypes.object,
personAttr: React.PropTypes.string, personAttr: React.PropTypes.string,
personIndex: React.PropTypes.number personIndex: React.PropTypes.number
}; };
export default ExtendedTooltip;

10
frontend/src/components/redirect/index.js
View File

@ -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} /> <Redirect to={to} />
); );

40
frontend/src/components/section/index.js
View File

@ -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)` const StyledHorizontalList = styled(Ul)`
padding: 0; padding: 0;
@ -57,7 +41,7 @@ const Section = (props) => {
return ( return (
<div> <div>
<Breadcrumb {...props} /> <Breadcrumb {...props} />
<StyledHorizontalList name="project-nav"> <StyledHorizontalList name='project-nav'>
{navLinks} {navLinks}
</StyledHorizontalList> </StyledHorizontalList>
{children} {children}
@ -70,4 +54,4 @@ Section.propTypes = {
links: React.PropTypes.arrayOf(PropTypes.link) links: React.PropTypes.arrayOf(PropTypes.link)
}; };
module.exports = Section; export default Section;

23
frontend/src/components/service/item.js
View File

@ -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, ListItem,
ListItemView, ListItemView,
ListItemMeta, ListItemMeta,
@ -21,7 +16,7 @@ const {
ListItemGroupView, ListItemGroupView,
ListItemOptions, ListItemOptions,
ListItemHeader ListItemHeader
} = List; } from '@ui/components/list';
const ServiceItem = ({ const ServiceItem = ({
org = '', org = '',
@ -109,4 +104,4 @@ ServiceItem.propTypes = {
service: PropTypes.service service: PropTypes.service
}; };
module.exports = ServiceItem; export default ServiceItem;

34
frontend/src/components/service/view-toggle.js
View File

@ -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` const StyledWrapper = styled.div`
margin-top: ${remcalc(9)}; margin-top: ${remcalc(9)};
@ -22,14 +13,11 @@ const StyledSpan = styled.span`
margin-right: ${remcalc(6)}; 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;

54
frontend/src/containers/app.js
View File

@ -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({ const App = connect()(React.createClass({
displayName: 'App', displayName: 'App',
@ -80,18 +62,18 @@ const App = connect()(React.createClass({
} }
})); }));
module.exports = (props) => ( export default (props) => (
<App {...props}> <App {...props}>
<Header /> <Header />
<Nav name="application-org-navigation"> <Nav name='application-org-navigation'>
<OrgNavigation /> <OrgNavigation />
</Nav> </Nav>
<Article name="application-content"> <Article name='application-content'>
<Switch> <Switch>
<Route component={Home} path='/:org?/:section?' /> <Route component={Home} path='/:org?/:section?' />
<Route component={NotFound} /> <Route component={NotFound} />
</Switch> </Switch>
</Article> </Article>
<Footer name="application-footer" /> <Footer name='application-footer' />
</App> </App>
); );

23
frontend/src/containers/header/index.js
View File

@ -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) => ({ const mapStateToProps = (state, ownProps) => ({
account: accountSelector(state), account: accountSelector(state),
@ -26,7 +13,7 @@ const mapDispatchToProps = (dispatch) => ({
handleToggle: () => dispatch(toggleHeaderTooltip()) handleToggle: () => dispatch(toggleHeaderTooltip())
}); });
module.exports = connect( export default connect(
mapStateToProps, mapStateToProps,
mapDispatchToProps mapDispatchToProps
)(Header); )(Header);

43
frontend/src/containers/home/index.js
View File

@ -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 = ({ const Home = ({
orgs = [] orgs = []
}) => { }) => {
const notFound = !orgs.length const notFound = orgs.length ? Redirect(`/${orgs[0].id}`) : (
? <NotFound /> <NotFound />
: Redirect(`/${orgs[0].id}`); );
return ( return (
<div> <div>
@ -42,7 +28,6 @@ const Home = ({
); );
}; };
Home.propTypes = { Home.propTypes = {
orgs: React.PropTypes.arrayOf(PropTypes.org) orgs: React.PropTypes.arrayOf(PropTypes.org)
}; };
@ -51,4 +36,6 @@ const mapStateToProps = (state) => ({
orgs: orgsSelector(state) orgs: orgsSelector(state)
}); });
module.exports = connect(mapStateToProps)(Home); export default connect(
mapStateToProps
)(Home);

32
frontend/src/containers/metrics/index.js
View File

@ -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 = ({ const Metrics = ({
addMetric, addMetric,
@ -29,7 +21,7 @@ const Metrics = ({
}) => { }) => {
const onMonitorsClick = (ev) => toggleMonitorView(metricTypeUuid); const onMonitorsClick = (ev) => toggleMonitorView(metricTypeUuid);
const onRemoveMetric = (ev) => {}; const onRemoveMetric = (ev) => null;
return ( return (
<div> <div>
@ -75,7 +67,7 @@ const mapDispatchToProps = (dispatch) => ({
dispatch(toggleMonitorView(metricTypeUuid)) dispatch(toggleMonitorView(metricTypeUuid))
}); });
module.exports = connect( export default connect(
mapStateToProps, mapStateToProps,
mapDispatchToProps mapDispatchToProps
)(Metrics); )(Metrics);

44
frontend/src/containers/metrics/monitors.js
View File

@ -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' form: 'create-monitor'
})(CreateMonitor);*/ })(CreateMonitor);
// const ConnectedCreateMonitor = reduxForm()(CreateMonitor);
const MetricMonitors = (props) => { const MetricMonitors = (props) => {
const { const {
@ -37,14 +19,14 @@ const MetricMonitors = (props) => {
const views = { const views = {
create: () => ( create: () => (
<ConnectedCreateMonitor /> <CreateMonitorForm />
), ),
manage: () => ( manage: () => (
<ManageMonitor /> <ManageMonitor />
) )
}; };
const onSubmit = () => {}; const onSubmit = () => null;
return ( return (
<Monitors submit={onSubmit} {...props}> <Monitors submit={onSubmit} {...props}>
@ -68,7 +50,7 @@ const mapDispatchToProps = (dispatch) => ({
togglePage: (newPage) => dispatch(switchMonitorViewPage(newPage)) togglePage: (newPage) => dispatch(switchMonitorViewPage(newPage))
}); });
module.exports = connect( export default connect(
mapStateToProps, mapStateToProps,
mapDispatchToProps mapDispatchToProps
)(MetricMonitors); )(MetricMonitors);

61
frontend/src/containers/new-project/billing.js
View File

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

17
frontend/src/containers/new-project/index.js
View File

@ -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> <Switch>
<Route <Route
component={NewProject} component={NewProject}

58
frontend/src/containers/new-project/new-billing.js
View File

@ -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({ const NewBillingForm = reduxForm({
form: 'create-project' form: 'create-project'
})(CreateBilling); })(CreateBilling);
const NewBilling = (props) => { const NewBilling = ({
handleNewProject,
const { router,
handleNewProject, org
pushRoute, }) => {
org
} = props;
const onBack = (evt) => const onBack = (evt) =>
pushRoute(`/${org.id}/new-project/billing`); router.push(`/${org.id}/new-project/billing`);
const onSubmit = (values) => { const onSubmit = (values) => {
handleNewProject({ handleNewProject({
values, values,
org org
}); });
pushRoute(`/${org.id}/projects`);
router.push(`/${org.id}/projects`);
}; };
return ( return (
@ -57,25 +39,23 @@ const NewBilling = (props) => {
NewBilling.propTypes = { NewBilling.propTypes = {
handleNewProject: React.PropTypes.func.isRequired, handleNewProject: React.PropTypes.func.isRequired,
org: PropTypes.org.isRequired, org: PropTypes.org.isRequired,
pushRoute: React.PropTypes.func router: React.PropTypes.object
}; };
const mapStateToProps = (state, { const mapStateToProps = (state, {
match = { match = {
params: {} params: {}
}, }
push
}) => ({ }) => ({
// TODO add cards - as above // TODO add cards - as above
org: orgByIdSelector(match.params.org)(state), org: orgByIdSelector(match.params.org)(state)
pushRoute: push
}); });
const mapDispatchToProps = (dispatch) => ({ const mapDispatchToProps = (dispatch) => ({
handleNewProject: (values) => dispatch(handleNewProject(values)) handleNewProject: (values) => dispatch(handleNewProject(values))
}); });
module.exports = connect( export default connect(
mapStateToProps, mapStateToProps,
mapDispatchToProps mapDispatchToProps
)(NewBilling); )(NewBilling);

49
frontend/src/containers/new-project/new-project.js
View File

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

18
frontend/src/containers/not-found/index.js
View File

@ -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;

46
frontend/src/containers/org/index.js
View File

@ -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 = { 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 = ({ const Org = ({
org = {}, org = {},
sections = [] sections = []
@ -82,4 +70,6 @@ const mapStateToProps = (state, ownProps) => ({
sections: orgSectionsSelector(ownProps.match.params.org)(state) sections: orgSectionsSelector(ownProps.match.params.org)(state)
}); });
module.exports = connect(mapStateToProps)(Org); export default connect(
mapStateToProps
)(Org);

38
frontend/src/containers/org/people.js
View File

@ -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, peopleByOrgIdSelector,
orgUISelector, orgUISelector,
orgIndexSelector, orgIndexSelector,
membersSelector membersSelector
} = selectors; } from '@state/selectors';
const { import {
addMemberToOrg, addMemberToOrg,
orgHandleInviteToggle, orgHandleInviteToggle,
orgHandlePeopleRoleTooltip, orgHandlePeopleRoleTooltip,
orgHandlePeopleStatusTooltip, orgHandlePeopleStatusTooltip,
orgHandleMemberUpdate, orgHandleMemberUpdate,
orgRemoveMember 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, { const mapStateToProps = (state, {
match = { match = {
@ -58,10 +49,9 @@ const mapDispatchToProps = (dispatch) => ({
dispatch(orgHandleMemberUpdate(updatedMember)), dispatch(orgHandleMemberUpdate(updatedMember)),
removeMember: (removeData) => removeMember: (removeData) =>
dispatch(orgRemoveMember(removeData)) dispatch(orgRemoveMember(removeData))
}); });
module.exports = connect( export default connect(
mapStateToProps, mapStateToProps,
mapDispatchToProps mapDispatchToProps
)(People); )(People);

18
frontend/src/containers/org/projects.js
View File

@ -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) => ( const list = (props) => (
<Section {...props}> <Section {...props}>
<Projects {...props} /> <Projects {...props} />

21
frontend/src/containers/org/section.js
View File

@ -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 = ({ const OrgSection = ({
children, children,
@ -47,6 +38,6 @@ const mapStateToProps = (state, ownProps) => ({
sections: orgSectionsSelector(ownProps.match.params.org)(state) sections: orgSectionsSelector(ownProps.match.params.org)(state)
}); });
module.exports = connect( export default connect(
mapStateToProps mapStateToProps
)(OrgSection); )(OrgSection);

40
frontend/src/containers/org/settings.js
View File

@ -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 = {}; Settings.propTypes = {};
const mapStateToProps = (state) => ({}); const mapStateToProps = (state) => ({});
module.exports = connect(mapStateToProps)(Settings); export default connect(
mapStateToProps
)(Settings);

48
frontend/src/containers/project/index.js
View File

@ -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, orgByIdSelector,
projectSectionsSelector, projectSectionsSelector,
projectByIdSelector projectByIdSelector
} = selectors; } from '@state/selectors';
const SectionComponents = {
services: ServicesSection,
instances: InstancesSection,
people: PeopleSection,
settings: SettingsSection,
manifest: ManifestSection
};
const Project = ({ const Project = ({
org = {}, org = {},
@ -70,6 +64,6 @@ const mapStateToProps = (state, {
sections: projectSectionsSelector(state) sections: projectSectionsSelector(state)
}); });
module.exports = connect( export default connect(
mapStateToProps mapStateToProps
)(Project); )(Project);

31
frontend/src/containers/project/instances.js
View File

@ -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 Instances = (props) => {
const { const {
@ -58,7 +45,7 @@ const mapDispatchToProps = (dispatch) => ({
toggleCollapsed: (uuid) => dispatch(toggleInstanceCollapsed(uuid)) toggleCollapsed: (uuid) => dispatch(toggleInstanceCollapsed(uuid))
}); });
module.exports = connect( export default connect(
mapStateToProps, mapStateToProps,
mapDispatchToProps mapDispatchToProps
)(Instances); )(Instances);

7
frontend/src/containers/project/manifest.js
View File

@ -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}> <Section {...props}>
<p>manifest</p> <p>manifest</p>
</Section> </Section>

25
frontend/src/containers/project/people.js
View File

@ -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, peopleByProjectIdSelector,
projectUISelector, projectUISelector,
projectIndexByIdSelect, projectIndexByIdSelect,
membersSelector membersSelector
} = selectors; } from '@state/selectors';
const { import {
addMemberToProject, addMemberToProject,
projectHandleInviteToggle, projectHandleInviteToggle,
projectHandlePeopleRoleTooltip, projectHandlePeopleRoleTooltip,
projectHandlePeopleStatusTooltip, projectHandlePeopleStatusTooltip,
projectHandleMemberUpdate, projectHandleMemberUpdate,
projectRemoveMember projectRemoveMember
} = actions; } from '@state/actions';
const People = (props) => ( const People = (props) => (
<Section {...props}> <Section {...props}>
@ -53,10 +47,9 @@ const mapDispatchToProps = (dispatch) => ({
dispatch(projectHandleMemberUpdate(updatedMember)), dispatch(projectHandleMemberUpdate(updatedMember)),
removeMember: (removeData) => removeMember: (removeData) =>
dispatch(projectRemoveMember(removeData)) dispatch(projectRemoveMember(removeData))
}); });
module.exports = connect( export default connect(
mapStateToProps, mapStateToProps,
mapDispatchToProps mapDispatchToProps
)(People); )(People);

20
frontend/src/containers/project/section.js
View File

@ -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, orgByIdSelector,
projectByIdSelector, projectByIdSelector,
projectSectionsSelector projectSectionsSelector
} = selectors; } from '@state/selectors';
const ProjectSection = ({ const ProjectSection = ({
children, children,
@ -66,6 +60,6 @@ const mapStateToProps = (state, {
sections: projectSectionsSelector(state) sections: projectSectionsSelector(state)
}); });
module.exports = connect( export default connect(
mapStateToProps mapStateToProps
)(ProjectSection); )(ProjectSection);

18
frontend/src/containers/project/services.js
View File

@ -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) => ( const list = (props) => (
<Section {...props}> <Section {...props}>
<Services {...props} /> <Services {...props} />

7
frontend/src/containers/project/settings.js
View File

@ -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}> <Section {...props}>
<p>settings</p> <p>settings</p>
</Section> </Section>

46
frontend/src/containers/projects/index.js
View File

@ -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 : ( const empty = projects.length ? null : (
<EmptyProjects /> <EmptyProjects />
); );
@ -77,6 +61,6 @@ const mapStateToProps = (state, {
projects: projectsByOrgIdSelector(match.params.org)(state) projects: projectsByOrgIdSelector(match.params.org)(state)
}); });
module.exports = connect( export default connect(
mapStateToProps mapStateToProps
)(Projects); )(Projects);

4
frontend/src/containers/service/activity-feed.js
View File

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

4
frontend/src/containers/service/firewall.js
View File

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

53
frontend/src/containers/service/index.js
View File

@ -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 = { 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, orgByIdSelector,
serviceSectionsSelector, serviceSectionsSelector,
projectByIdSelector, projectByIdSelector,
serviceByIdSelector serviceByIdSelector
} = selectors; } from '@state/selectors';
const Service = ({ const Service = ({
org = {}, org = {},
@ -118,6 +115,6 @@ const mapStateToProps = (state, {
service: serviceByIdSelector(match.params.serviceId)(state) service: serviceByIdSelector(match.params.serviceId)(state)
}); });
module.exports = connect( export default connect(
mapStateToProps mapStateToProps
)(Service); )(Service);

39
frontend/src/containers/service/instances.js
View File

@ -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 : ( const empty = instances.length ? null : (
<EmptyInstances /> <EmptyInstances />
); );
@ -57,7 +42,7 @@ const mapDispatchToProps = (dispatch) => ({
toggleCollapsed: (uuid) => dispatch(toggleInstanceCollapsed(uuid)) toggleCollapsed: (uuid) => dispatch(toggleInstanceCollapsed(uuid))
}); });
module.exports = connect( export default connect(
mapStateToProps, mapStateToProps,
mapDispatchToProps mapDispatchToProps
)(Instances); )(Instances);

36
frontend/src/containers/service/metrics.js
View File

@ -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, metricsByServiceIdSelector,
metricTypesSelector, metricTypesSelector,
serviceByIdSelector serviceByIdSelector
} = selectors; } from '@state/selectors';
const {
addMetric,
metricDurationChange
} = actions;
const mapStateToProps = (state, { const mapStateToProps = (state, {
match = { match = {
@ -30,12 +19,13 @@ const mapStateToProps = (state, {
}); });
const mapDispatchToProps = (dispatch) => ({ 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, duration,
dataset dataset
})) }))
@ -49,7 +39,7 @@ const mergeProps = (stateProps, dispatchProps, ownProps) => ({
metricDurationChange: dispatchProps.metricDurationChange(stateProps.service) metricDurationChange: dispatchProps.metricDurationChange(stateProps.service)
}); });
module.exports = connect( export default connect(
mapStateToProps, mapStateToProps,
mapDispatchToProps, mapDispatchToProps,
mergeProps mergeProps

4
frontend/src/containers/service/networks.js
View File

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

4
frontend/src/containers/service/service-manifest.js
View File

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

4
frontend/src/containers/service/summary.js
View File

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

4
frontend/src/containers/service/tags-metadata.js
View File

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

37
frontend/src/containers/services/index.js
View File

@ -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, orgByIdSelector,
projectByIdSelector, projectByIdSelector,
servicesByProjectIdSelector, servicesByProjectIdSelector,
servicesForTopologySelector servicesForTopologySelector
} = selectors; } from '@state/selectors';
const {
H2
} = BaseELements;
const Services = ({ const Services = ({
org = {}, org = {},
@ -49,9 +38,7 @@ const Services = ({
<Row> <Row>
<Column xs={12}> <Column xs={12}>
<H2>Services</H2> <H2>Services</H2>
<ServiceViewToggle /> <ServiceViewToggle />
{empty} {empty}
{serviceList} {serviceList}
</Column> </Column>
@ -78,6 +65,6 @@ const mapStateToProps = (state, {
servicesForTopologySelector(match.params.projectId)(state) servicesForTopologySelector(match.params.projectId)(state)
}); });
module.exports = connect( export default connect(
mapStateToProps mapStateToProps
)(Services); )(Services);

20
frontend/src/index.js
View File

@ -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') { if (process.env.NODE_ENV !== 'production') {
a11y(React, { 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();

14
frontend/src/intl.js
View File

@ -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 = {}, Locales = {},
ReactIntlLocaleData = {} ReactIntlLocaleData = {}
}) => { }) => {
@ -18,13 +14,13 @@ module.exports = (({
// http://stackoverflow.com/a/38150585 // http://stackoverflow.com/a/38150585
const detectedLocale = ( const detectedLocale = (
qs.parse((document.location.search || '').replace(/^\?/, '')).locale || 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.language || // All browsers
navigator.userLanguage || // IE <= 10 navigator.userLanguage || // IE <= 10
'en-US' 'en-US'
).toLowerCase(); ).toLowerCase();
const lang = detectedLocale.split(/\-/)[0]; const lang = detectedLocale.split(/-/)[0];
const locale = ReactIntlLocaleData[lang] const locale = ReactIntlLocaleData[lang]
? (Locales[detectedLocale] ? detectedLocale : 'en-us') ? (Locales[detectedLocale] ? detectedLocale : 'en-us')
: 'en-us'; : 'en-us';

4
frontend/src/prop-types.js
View File

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

47
frontend/src/root.js
View File

@ -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>
);
};

108
frontend/src/state/actions.js
View File

@ -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 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`);

15
frontend/src/state/reducers/account.js
View File

@ -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) => { [toggleHeaderTooltip.toString()]: (state, action) => {
return { return {
...state, ...state,

15
frontend/src/state/reducers/app.js
View File

@ -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) => { [updateRouter.toString()]: (state, action) => {
return { return {
...state, ...state,

2
frontend/src/state/reducers/common.js
View File

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

40
frontend/src/state/reducers/index.js
View File

@ -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({ return combineReducers({
account: require('@state/reducers/account'), account,
app: require('@state/reducers/app'), app,
datacenters: (state = {}) => state, 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
}); });
}; };

21
frontend/src/state/reducers/instances.js
View File

@ -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 [toggleInstanceCollapsed.toString()]: toggleCollapsed
}, {}); }, {});

11
frontend/src/state/reducers/intl.js
View File

@ -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 'x': (state) => state // somehow handleActions needs at least one reducer
}, require('@root/intl')); }, initialState);

8
frontend/src/state/reducers/members.js
View File

@ -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 'x': (state) => state // somehow handleActions needs at least one reducer
}, {}); }, {});

15
frontend/src/state/reducers/metrics.js
View File

@ -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) => { [metricDurationChange.toString()]: (state, action) => {
return ({ return ({
...state, ...state,

16
frontend/src/state/reducers/monitors.js
View File

@ -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) => ({ [toggleMonitorView.toString()]: (state, action) => ({
...state, ...state,
ui: { ui: {

15
frontend/src/state/reducers/orgs.js
View File

@ -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, addMemberToOrg,
orgHandleInviteToggle, orgHandleInviteToggle,
orgHandlePeopleRoleTooltip, orgHandlePeopleRoleTooltip,
orgHandlePeopleStatusTooltip, orgHandlePeopleStatusTooltip,
orgHandleMemberUpdate, orgHandleMemberUpdate,
orgRemoveMember orgRemoveMember
} = actions; } from '@state/actions';
module.exports = handleActions({ export default handleActions({
[addMemberToOrg.toString()]: (state, action) => { [addMemberToOrg.toString()]: (state, action) => {
const { const {
parentIndex, parentIndex,
member member

83
frontend/src/state/reducers/projects.js
View File

@ -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, addMemberToProject,
projectHandleInviteToggle, projectHandleInviteToggle,
projectHandlePeopleRoleTooltip, projectHandlePeopleRoleTooltip,
@ -15,15 +9,10 @@ const {
projectHandleMemberUpdate, projectHandleMemberUpdate,
projectRemoveMember, projectRemoveMember,
handleNewProject handleNewProject
} = actions; } from '@state/actions';
const { export default handleActions({
rndId
} = fns;
module.exports = handleActions({
[addMemberToProject.toString()]: (state, action) => { [addMemberToProject.toString()]: (state, action) => {
const { const {
parentIndex, parentIndex,
member 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) => { [projectHandleMemberUpdate.toString()]: (state, action) => {
const { const {
parentIndex, parentIndex,
person, person,
personIndex personIndex
} = action.payload; } = action.payload;
return { return {
...state, ...state,
ui: { ui: {
@ -132,6 +116,7 @@ module.exports = handleActions({
org, org,
values values
} = action.payload; } = action.payload;
return { return {
...state, ...state,
data: [ data: [

42
frontend/src/state/reducers/services.js
View File

@ -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 getMetrics = (stateMetrics, addMetric, metric) => {
const metrics = stateMetrics.map((m) => { const metrics = stateMetrics.map((m) => {
@ -22,11 +8,13 @@ const getMetrics = (stateMetrics, addMetric, metric) => {
...m ...m
}); });
}); });
if(addMetric) { if(addMetric) {
metrics.push({ metrics.push({
type: metric type: metric
}); });
} }
return metrics; return metrics;
}; };
@ -43,18 +31,16 @@ const getServices = (stateServices, service, metric) => {
}); });
}; };
module.exports = handleActions({ export default handleActions({
[toggleServiceCollapsed.toString()]: toggleCollapsed, [toggleServiceCollapsed.toString()]: toggleCollapsed,
// This will need to be handled by an async action // This will need to be handled by an async action
// to update on the server too // 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 )
) })
});
}
}, {}); }, {});

64
frontend/src/state/selectors.js
View File

@ -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 account = (state) => get(state, 'account.data', {});
const accountUi = (state) => get(state, 'account.ui', {}); 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
}; };

20
frontend/src/state/store.js
View File

@ -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; const composeEnhancers = window.__REDUX_DEVTOOLS_EXTENSION_COMPOSE__ || compose;
module.exports = (state = Object.freeze({})) => { export default (state = Object.freeze({})) => {
return createStore( return createStore(
enableBatching(createReducer()), enableBatching(createReducer()),
state, state,

2
frontend/src/state/thunks/app.js
View File

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

6
frontend/src/state/thunks/index.js
View File

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

2
frontend/src/utils/form/normalize.js
View File

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

2
frontend/test/_hook.js
View File

@ -36,4 +36,4 @@ requireHacker.global_hook('inline-svgs', (path) => {
if(path.match(/!babel-loader!svg-react-loader/)) { if(path.match(/!babel-loader!svg-react-loader/)) {
return `module.exports = ${fakeComponentString}`; return `module.exports = ${fakeComponentString}`;
} }
}); });

6
frontend/test/components/index.js
View File

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

3
frontend/test/components/project-section.js
View File

@ -13,7 +13,8 @@ const {
} = create; } = create;
test('renders <ProjectSection> without exploding', (t) => { 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 />)); const wrapper = render(withIntl(<Section />));
t.deepEqual(wrapper.length, 1); t.deepEqual(wrapper.length, 1);
}); });

8
frontend/test/components/projects.js
View File

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

4
frontend/test/components/service.js
View File

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

4
frontend/test/components/services.js
View File

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

2
frontend/test/helpers/create.js
View File

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

38
frontend/test/reducers/app.js
View File

@ -1,21 +1,23 @@
const ReduxAva = require('redux-ava'); // const ReduxAva = require('redux-ava');
const test = require('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]'
}
}));

8
frontend/webpack/.eslintrc Normal file
View File

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

11
frontend/webpack/base.js
View File

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

Some files were not shown because too many files have changed in this diff Show More