feat(my-joy-beta): instance home

fixes #814

joyent.code-workspace

@@ -1,10 +1,13 @@
 {
 	"folders": [
 		{
-			"path": "prototypes/create-instance-icons"
+			"path": "packages/ui-toolkit"
 		},
 		{
-			"path": "packages/ui-toolkit"
+			"path": "packages/icons"
+		},
+		{
+			"path": "packages/my-joy-beta"
 		}
 	],
 	"settings": {}

packages/icons/src/copy.js

@@ -0,0 +1,37 @@
+import React from 'react';
+
+import Colors from './colors';
+import Rotate from './rotate';
+import calcFill from './fill';
+
+export default ({
+  fill = null,
+  light = false,
+  disabled = false,
+  direction = 'down',
+  style = {},
+  ...rest
+}) => (
+  <Colors white text grey>
+    {colors => (
+      <Rotate direction={direction}>
+        {({ style: rotateStyle }) => (
+          <svg
+            width="13"
+            height="16"
+            viewBox="0 0 13 16"
+            version="1.1"
+            xmlns="http://www.w3.org/2000/svg"
+            style={{ ...style, ...rotateStyle }}
+            {...rest}
+          >
+            <path
+              fill={calcFill({ fill, disabled, light, colors })}
+              d="M 12 1L 10 1L 10 0L 3 0L 3 1L 1 1C 0.4 1 0 1.4 0 2L 0 15C 0 15.6 0.4 16 1 16L 12 16C 12.6 16 13 15.6 13 15L 13 2C 13 1.4 12.6 1 12 1ZM 4 1L 9 1L 9 2L 9 3L 4 3L 4 2L 4 1ZM 12 15L 1 15L 1 2L 3 2L 3 4L 10 4L 10 2L 12 2L 12 15Z"
+            />
+          </svg>
+        )}
+      </Rotate>
+    )}
+  </Colors>
+);

packages/icons/src/index.js

@@ -7,6 +7,7 @@ export { default as Chevron } from './chevron';
 export { default as Clipboard } from './clipboard';
 export { default as Close } from './close';
 export { default as Cns } from './cns';
+export { default as Copy } from './copy';
 export { default as DataCenter } from './data-center';
 export { default as Delete } from './delete';
 export { default as Dot } from './dot';

packages/icons/src/play.js

@@ -0,0 +1,26 @@
+import React from 'react';
+import Colors from './colors';
+
+export default ({ light = false, disabled, ...rest, }) => (
+  <Colors white secondary>
+    {({ white, text }) => (
+      <svg
+        width="18"
+        height="20"
+        viewBox="0 0 18 20"
+        version="1.1"
+        xmlns="http://www.w3.org/2000/svg"
+        {...rest}
+      >
+        <path
+          fill={light ? white : text}
+          style={{
+            transform: 'rotate(90deg) translateX(-2px) translateY(1px)',
+            transformOrigin: '50%'
+          }}
+          d="M 2.33975 15L 1.47372 14.5L 2.33975 15ZM 19.6603 15L 18.7942 15.5L 19.6603 15ZM 18.7942 16.5L 18.7942 15.5L 18.7942 16.5ZM 11.866 1.5L 12.7321 1L 11.866 1.5ZM 10.134 1.5L 11 2L 10.134 1.5ZM 11 2L 18.7942 15.5L 20.5263 14.5L 12.7321 1L 11 2ZM 18.7942 15.5L 3.20577 15.5L 3.20577 17.5L 18.7942 17.5L 18.7942 15.5ZM 3.20577 15.5L 11 2L 9.26795 1L 1.47372 14.5L 3.20577 15.5ZM 3.20577 15.5L 3.20577 15.5L 1.47372 14.5C 0.70392 15.8333 1.66617 17.5 3.20577 17.5L 3.20577 15.5ZM 18.7942 15.5L 18.7942 15.5L 18.7942 17.5C 20.3338 17.5 21.2961 15.8333 20.5263 14.5L 18.7942 15.5ZM 12.7321 1C 11.9622 -0.333334 10.0377 -0.333332 9.26795 1L 11 2L 11 2L 12.7321 1Z"
+        />
+      </svg>
+    )}
+  </Colors>
+);

packages/icons/src/restart.js

@@ -0,0 +1,23 @@
+import React from 'react';
+
+export default props => (
+  <svg
+    width="16"
+    height="19"
+    viewBox="0 0 16 19"
+    version="1.1"
+    xmlns="http://www.w3.org/2000/svg"
+    {...props}
+  >
+    <path
+      {...props}
+      style={{
+        transform: 'rotate(30deg) translateX(1px) translateY(-1px)',
+        transformOrigin: '50%'
+      }}
+      fill-rule="evenodd"
+      transform
+      d="M 6.67853 4.42272L 6.67879 6.61018L 12.4032 3.30519L 6.67874 0L 6.67829 2.4743C 2.88206 3.15051 -0.000481996 6.46786 6.04528e-08 10.4594C -1.2363e-05 14.9384 3.63041 18.5685 8.10965 18.5692C 12.588 18.5682 16.2192 14.9381 16.2192 10.4592L 14.3115 10.46C 14.3108 13.8839 11.535 16.6615 8.10976 16.6612C 4.68462 16.6608 1.90795 13.8842 1.90764 10.4586C 1.90797 7.52657 3.94309 5.06834 6.67853 4.42272Z"
+    />
+  </svg>
+);

packages/my-joy-beta/package.json

@@ -6,14 +6,11 @@
   "repository": "github:yldio/joyent-portal",
   "main": "build/",
   "scripts": {
-    "dev":
+    "dev": "REACT_APP_GQL_PORT=4000 PORT=3069 REACT_APP_GQL_PROTOCOL=http joyent-react-scripts start",
-      "REACT_APP_GQL_PORT=4000 PORT=3069 REACT_APP_GQL_PROTOCOL=http joyent-react-scripts start",
     "start": "PORT=3069 joyent-react-scripts start",
     "build": "NODE_ENV=production joyent-react-scripts build",
-    "lint-ci":
+    "lint-ci": "eslint . --ext .js --ext .md && echo 0 `# stylelint './src/**/*.js'`",
-      "eslint . --ext .js --ext .md && echo 0 `# stylelint './src/**/*.js'`",
+    "lint": "eslint . --fix --ext .js --ext .md && echo 0 `# stylelint './src/**/*.js'`",
-    "lint":
-      "eslint . --fix --ext .js --ext .md && echo 0 `# stylelint './src/**/*.js'`",
     "test": "NODE_ENV=test joyent-react-scripts test --env=jsdom",
     "test-ci": "redrun test",
     "prepublish": "echo 0"
@@ -21,6 +18,9 @@
   "dependencies": {
     "@manaflair/redux-batch": "^0.1.0",
     "apollo": "^0.2.2",
+    "apr-intercept": "^1.0.4",
+    "clipboard-copy": "^1.2.0",
+    "date-fns": "^1.29.0",
     "declarative-redux-form": "^1.0.3",
     "joyent-ui-toolkit": "^2.0.1",
     "lodash.find": "^4.6.0",

packages/my-joy-beta/src/app.js

@@ -6,10 +6,46 @@ import { theme, RootContainer } from 'joyent-ui-toolkit';
 
 import { client, store } from '@state/store';
 import Router from '@root/router';
+import remcalc from 'remcalc';
+
+const fullTheme = {
+  ...theme,
+  flexboxgrid: {
+    gridSize: 12, // rem
+    gutterWidth: 1.25, // rem
+    outerMargin: 1.875, // rem
+    mediaQuery: 'only screen',
+    container: {
+      sm: 46, // rem
+      md: 56, // rem
+      lg: 59 // rem
+    },
+    breakpoints: {
+      xs: 0, // em
+      sm: 48, // em
+      md: 64, // em
+      lg: 75 // em
+    }
+  },
+  spacing: {
+    0.5: remcalc(4),
+    0: remcalc(0),
+    1: remcalc(6),
+    2: remcalc(12),
+    3: remcalc(18),
+    4: remcalc(24),
+    5: remcalc(30),
+    6: remcalc(36),
+    7: remcalc(42),
+    8: remcalc(48),
+    9: remcalc(54),
+    10: remcalc(60)
+  }
+};
 
 export default () => (
   <ApolloProvider client={client} store={store}>
-    <ThemeProvider theme={theme}>
+    <ThemeProvider theme={fullTheme}>
       <RootContainer>
         <Router />
       </RootContainer>

packages/my-joy-beta/src/components/instances/__tests__/home.js

@@ -0,0 +1,89 @@
+import React from 'react';
+import renderer from 'react-test-renderer';
+import Store from '@mocks/store';
+import 'jest-styled-components';
+
+import Home, { CopyToClipboardTooltip, CopiableField, Meta } from '../home';
+
+it('renders <CopiableField /> without throwing', () => {
+  const tree = renderer
+    .create(
+      <Store>
+        <CopiableField label="test" text="test" />
+      </Store>
+    )
+    .toJSON();
+
+  expect(tree).toMatchSnapshot();
+});
+
+it('renders <Home /> without throwing', () => {
+  const tree = renderer
+    .create(
+      <Store>
+        <Home
+          instance={{
+            id: '2252839a-e698-ceec-afac-9549ad0c6624',
+            state: 'RUNNING',
+            name: '2252839a',
+            created: '2017-10-13T11:36:04.463Z',
+            updated: '2017-11-27T13:46:28.000Z',
+            primary_ip: '72.2.119.146',
+            ips: ['ahgsjdasdhjas', 'ajshdajkdhk'],
+            docker: null,
+            dns_names: {},
+            compute_node: '70bb1cee-dba3-11e3-a799-002590e4f2b0',
+            image: {},
+            package: {},
+            __typename: 'Machine'
+          }}
+          starting={true}
+          stopping={false}
+          rebooting={true}
+          deleteing={false}
+          onAction={() => {}}
+        />
+      </Store>
+    )
+    .toJSON();
+
+  expect(tree).toMatchSnapshot();
+});
+
+it('renders <Meta /> without throwing', () => {
+  const tree = renderer
+    .create(
+      <Store>
+        <Meta {...{
+          "id": "2252839a-e698-ceec-afac-9549ad0c6624",
+          "state": "RUNNING",
+          "name": "2252839a",
+          "created": "2017-10-13T11:36:04.463Z",
+          "updated": "2017-11-27T13:46:28.000Z",
+          "primary_ip": "72.2.119.146",
+          "ips": {},
+          "docker": null,
+          "dns_names": {},
+          "compute_node": "70bb1cee-dba3-11e3-a799-002590e4f2b0",
+          "image": {},
+          "package": {},
+          "__typename": "Machine"
+      }} onAction={() => console.log('sup??')}/>
+      </Store>
+    )
+    .toJSON();
+
+  expect(tree).toMatchSnapshot();
+});
+
+it('renders <CopyToClipboardTooltip /> without throwing', () => {
+  const tree = renderer
+    .create(
+      <Store>
+        <CopyToClipboardTooltiptip>{"test"}</CopyToClipboardTooltiptip>
+      </Store>
+    )
+    .toJSON();
+
+  expect(tree).toMatchSnapshot();
+});

packages/my-joy-beta/src/components/instances/home.js

@@ -0,0 +1,291 @@
+import React, { Component } from 'react';
+import { Row, Col } from 'react-styled-flexboxgrid';
+import styled, { withTheme} from 'styled-components';
+import { Margin, Padding } from 'styled-components-spacing';
+import remcalc from 'remcalc';
+import is from 'styled-is';
+import titleCase from 'title-case';
+import distanceInWordsToNow from 'date-fns/distance_in_words_to_now';
+import copy from 'clipboard-copy';
+
+import {
+  Card,
+  CardOutlet,
+  Divider,
+  ResetIcon,
+  Button,
+  FormLabel,
+  Input,
+  H2,
+  Label,
+  DotIcon,
+  DeleteIcon,
+  StartIcon,
+  StopIcon,
+  TooltipContainer,
+  TooltipTarget,
+  Tooltip,
+  ClipboardIcon
+} from 'joyent-ui-toolkit';
+
+const stateColor = {
+  PROVISIONING: 'primary',
+  RUNNING: 'green',
+  STOPPING: 'grey',
+  STOPPED: 'grey',
+  DELETED: 'secondaryActive',
+  FAILED: 'red'
+};
+
+const GreyLabel = styled(Label)`
+  opacity: 0.5;
+  padding-right: ${remcalc(3)};
+`;
+
+const Flex = styled.div`
+  align-items: center;
+  display: flex;
+  justify-content: flex-start;
+
+  @media (max-width: ${remcalc(767)}) {
+    display: block;
+  }
+`;
+
+const FlexEnd = styled.div`
+  justify-content: flex-end;
+  align-items: center;
+  display: flex;
+  flex-grow: 1;
+`;
+
+const InputIconWrapper = styled.div`
+  display: flex;
+  margin-bottom: ${remcalc(10)};
+  align-items: center;
+
+  ${is('noMargin')`
+    margin-bottom: ${remcalc(0)};
+  `};
+
+  input {
+    padding-right: ${remcalc(30)};
+  }
+
+  div {
+    position: relative;
+    left: ${remcalc(-26)};
+  }
+`;
+
+const HorizontalDivider = styled.div`
+  width: ${remcalc(1)};
+  background: ${props => props.theme.grey};
+  height: ${remcalc(24)};
+  display: flex;
+  align-self: flex-end;
+  margin: 0 ${remcalc(18)};
+
+  @media (max-width: ${remcalc(767)}) {
+    display: none;
+  }
+`;
+
+const ClipboardIconActionable = styled(ClipboardIcon)`
+  cursor: pointer;
+`;
+
+export class CopyToClipboardTooltip extends Component {
+  constructor() {
+    super();
+
+    this.state = {
+      copied: false
+    };
+  }
+
+  handleClick = () => {
+    const { children: text } = this.props;
+
+    copy(text);
+
+    this.setState(
+      {
+        copied: true
+      },
+      () => {
+        setTimeout(() => {
+          this.setState({
+            copied: false
+          });
+        }, 4000);
+      }
+    );
+  };
+
+  render = () => (
+    <TooltipContainer hoverable>
+      <TooltipTarget>
+        <ClipboardIconActionable onClick={this.handleClick} />
+      </TooltipTarget>
+      <Tooltip placement="top" success={Boolean(this.state.copied)}>
+        {this.state.copied ? 'Copied To Clipboard' : 'Copy To Clipboard'}
+      </Tooltip>
+    </TooltipContainer>
+  );
+}
+
+export const CopiableField = ({ label, text, ...rest }) => (
+  <Row>
+    <Col xs={12} md={7}>
+      <FormLabel>{label}</FormLabel>
+      <InputIconWrapper {...rest}>
+        <Input fluid value={text} />
+        <CopyToClipboardTooltip>{text}</CopyToClipboardTooltip>
+      </InputIconWrapper>
+    </Col>
+  </Row>
+);
+
+export const Meta = ({ created, updated, state, brand, image, ...instance }) => [
+  <Row middle="xs">
+    <Col xs={12}>
+      <H2>{instance.package.name}</H2>
+    </Col>
+  </Row>,
+  <Margin top={2} bottom={3}>
+    <Flex>
+      <Label>
+        {image ? titleCase(image.name) : 'Custom Image'}
+      </Label>
+      <HorizontalDivider />
+      <Label>
+        {brand === 'LX'
+          ? 'Infrastructure Container'
+          : 'Hardware Virtual Machine'}
+      </Label>
+      <HorizontalDivider />
+      <Flex>
+        <DotIcon
+          borderRadius="50%"
+          marginRight={remcalc(6)}
+          marginTop={remcalc(1)}
+          width={remcalc(11)}
+          height={remcalc(11)}
+          color={stateColor[state]}
+        />
+        {titleCase(state)}
+      </Flex>
+    </Flex>
+    <Margin top={1}>
+      <Flex>
+        <Flex>
+          <GreyLabel>Created: </GreyLabel>
+          <Label> {distanceInWordsToNow(created)} ago</Label>
+        </Flex>
+        <HorizontalDivider />
+        <Flex>
+          <GreyLabel>Updated: </GreyLabel>
+          <Label> {distanceInWordsToNow(updated)} ago</Label>
+        </Flex>
+      </Flex>
+    </Margin>
+  </Margin>
+];
+
+export default withTheme(({
+  instance,
+  starting,
+  stopping,
+  rebooting,
+  deleteing,
+  onAction,
+  theme
+}) => (
+  <Row>
+    <Col xs={12} sm={12} md={9}>
+      <Card>
+        <CardOutlet big>
+          <Meta {...instance} />
+          <Flex>
+            <Flex>
+              <Button
+                secondary
+                bold
+                icon
+                loading={starting}
+                disabled={instance.state === 'RUNNING'}
+                onClick={() => onAction('start')}
+              >
+                <Padding right={3} style={{ height: 18 }}>
+                  <StartIcon disabled={instance.state === 'RUNNING'} />
+                </Padding>
+                <span>Start</span>
+              </Button>
+              <Button
+                secondary
+                bold
+                icon
+                loading={stopping}
+                disabled={instance.state === 'STOPPED'}
+                onClick={() => onAction('stop')}
+              >
+                <Padding right={3} style={{ height: 18 }}>
+                  <StopIcon disabled={instance.state === 'STOPPED'} />
+                </Padding>
+                <span>Stop</span>
+              </Button>
+              <Button
+                secondary
+                bold
+                icon
+                loading={rebooting}
+                disabled={instance.state === 'PROVISIONING'}
+                onClick={() => onAction('reboot')}
+              >
+                <Padding right={3} style={{ height: 18 }}>
+                  <ResetIcon disabled={instance.state === 'PROVISIONING'} />
+                </Padding>
+                <span>Restart</span>
+              </Button>
+            </Flex>
+            <FlexEnd>
+              <Button
+                error
+                bold
+                icon
+                loading={deleteing}
+                disabled={instance.state === 'PROVISIONING'}
+                onClick={() => onAction('delete')}
+              >
+                <Padding right={3} style={{ height: 18 }}>
+                  <DeleteIcon fill={theme.red} disabled={instance.state === 'PROVISIONING'} />
+                </Padding>
+                <span>Delete</span>
+              </Button>
+            </FlexEnd>
+          </Flex>
+          <Margin bottom={5} top={4}>
+            <Divider height={remcalc(1)} />
+          </Margin>
+          <CopiableField text={instance.id.split('-')[0]} label="Short ID" />
+          <CopiableField text={instance.id} label="ID" />
+          <CopiableField text={instance.compute_node} label="CN UUID" />
+          {instance.image && (
+            <CopiableField text={instance.image.id} label="Image UUID" />
+          )}
+          <CopiableField text={`$ ssh root@${instance.primary_ip}`} label="Login" />
+
+          {instance.ips.map((ip, i) => (
+            <CopiableField
+              key={i}
+              noMargin={i === instance.ips.length - 1}
+              text={ip}
+              label={`IP address ${i + 1}`}
+            />
+          ))}
+        </CardOutlet>
+      </Card>
+    </Col>
+  </Row>
+));

packages/my-joy-beta/src/components/navigation/header.js

@@ -21,13 +21,13 @@ export default () => (
   <Header fluid>
     <HeaderBrand beta>
       <HeaderAnchor to="/">
-        <Logo beta alt="Triton" />
+        <Logo beta alt="Triton" light />
       </HeaderAnchor>
     </HeaderBrand>
     <HeaderNav>
-      <li>
+      <HeaderItem>
         <HeaderAnchor to="/">Compute</HeaderAnchor>
-      </li>
+      </HeaderItem>
     </HeaderNav>
     <HeaderItem>
       <HeaderAnchor href="https://my.joyent.com">

packages/my-joy-beta/src/components/navigation/menu.js

@@ -1,6 +1,7 @@
 import React from 'react';
 import PropTypes from 'prop-types';
 import forceArray from 'force-array';
+import { Margin } from 'styled-components-spacing';
 
 import { SectionList, SectionListItem, ViewContainer } from 'joyent-ui-toolkit';
 
@@ -20,7 +21,9 @@ const Menu = ({ links = [] }) => {
 
   return (
     <ViewContainer plain>
+      <Margin bottom={6}>
         <SectionList>{getMenuItems(_links)}</SectionList>
+      </Margin>
     </ViewContainer>
   );
 };

packages/my-joy-beta/src/containers/instances/home.js

@@ -0,0 +1,160 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import { compose, graphql } from 'react-apollo';
+import find from 'lodash.find';
+import get from 'lodash.get';
+import { connect } from 'react-redux';
+import { set } from 'react-redux-values';
+import intercept from 'apr-intercept';
+
+import {
+  ViewContainer,
+  StatusLoader,
+  Message,
+  MessageDescription,
+  MessageTitle
+} from 'joyent-ui-toolkit';
+
+import GetInstance from '@graphql/get-instance.gql';
+import StartInstance from '@graphql/start-instance.gql';
+import StopInstance from '@graphql/stop-instance.gql';
+import RebootInstance from '@graphql/reboot-instance.gql';
+import DeleteInstance from '@graphql/delete-instance.gql';
+import HomeScreen from '@components/instances/home';
+import parseError from '@state/parse-error';
+
+const Home = ({
+  instance,
+  loading,
+  loadingError,
+  mutationError,
+  handleAction,
+  starting,
+  stopping,
+  rebooting,
+  deleteing,
+}) => {
+  const { name } = instance || {};
+
+  const _loading = loading && !name && <StatusLoader />;
+  const _summary = !_loading &&
+    instance && (
+      <HomeScreen
+        instance={instance}
+        starting={starting}
+        stopping={stopping}
+        rebooting={rebooting}
+        deleteing={deleteing}
+        onAction={handleAction}
+      />
+    );
+
+  const _error = loadingError &&
+    !_loading &&
+    !instance && (
+      <Message error>
+        <MessageTitle>Ooops!</MessageTitle>
+        <MessageDescription>
+          An error occurred while loading your instance summary
+        </MessageDescription>
+      </Message>
+    );
+
+  const _mutationError = mutationError && (
+    <Message error>
+      <MessageTitle>Ooops!</MessageTitle>
+      <MessageDescription>{mutationError}</MessageDescription>
+    </Message>
+  );
+
+  return (
+    <ViewContainer center={Boolean(_loading)} main>
+      {_loading}
+      {_error}
+      {_mutationError}
+      {_summary}
+    </ViewContainer>
+  );
+};
+
+Home.propTypes = {
+  loading: PropTypes.bool
+};
+
+export default compose(
+  graphql(StopInstance, { name: 'stop' }),
+  graphql(StartInstance, { name: 'start' }),
+  graphql(RebootInstance, { name: 'reboot' }),
+  graphql(DeleteInstance, { name: 'reboot' }),
+  graphql(GetInstance, {
+    options: ({ match }) => ({
+      pollInterval: 1000,
+      variables: {
+        name: get(match, 'params.instance')
+      }
+    }),
+    props: ({ data: { loading, error, variables, ...rest } }) => ({
+      instance: find(get(rest, 'machines', []), ['name', variables.name]),
+      loading,
+      loadingError: error
+    })
+  }),
+  connect(
+    (state, ownProps) => {
+      const { instance = {} } = ownProps;
+      const { id } = instance;
+
+      if (!id) {
+        return ownProps;
+      }
+
+      return {
+        ...ownProps,
+        starting: state.values[`${id}-home-starting`],
+        stopping: state.values[`${id}-home-stoping`],
+        rebooting: state.values[`${id}-home-rebooting`],
+        deleteing: state.values[`${id}-home-deleteing`],
+        mutationError: state.values[`${id}-home-mutation-error`]
+      };
+    },
+    (disptach, ownProps) => ({
+      handleAction: async (action) => {
+        const { instance } = ownProps;
+        const { id } = instance;
+
+        const gerund = `${action}ing`;
+        const name = `${id}-home-${gerund}`;
+
+        // sets loading to true
+        disptach(set({
+          name,
+          value: true
+        }));
+
+        // calls mutation and waits while loading is still true
+        const [err] = await intercept(ownProps[action]({
+          variables: { id }
+        }));
+
+        if (!err && (action === 'delete')) {
+          const { history } = ownProps;
+          return history.push(`/instances/`);
+        }
+
+        // after mutation, sets loading back to false
+        const setLoadingFalse = set({
+          name,
+          value: false
+        });
+
+        // if error, sets error value
+        const mutationError = err && set({
+          name: `${id}-home-mutation-error`,
+          value: parseError(err)
+        });
+
+        return disptach([mutationError, setLoadingFalse].filter(Boolean));
+      }
+    })
+  )
+)(Home);

packages/my-joy-beta/src/containers/instances/index.js

@@ -1,5 +1,5 @@
 export { default as List } from './list';
-export { default as Summary } from './summary';
+export { default as Home } from './home';
 export { default as Tags } from './tags';
 export { default as Metadata } from './metadata';
 export { default as Networks } from './networks';

packages/my-joy-beta/src/containers/instances/summary.js

@@ -1,65 +0,0 @@
-import React from 'react';
-import ReactJson from 'react-json-view';
-import PropTypes from 'prop-types';
-import { compose, graphql } from 'react-apollo';
-import find from 'lodash.find';
-import get from 'lodash.get';
-
-import {
-  ViewContainer,
-  Title,
-  StatusLoader,
-  Message,
-  MessageDescription,
-  MessageTitle
-} from 'joyent-ui-toolkit';
-
-import GetInstance from '@graphql/get-instance.gql';
-
-const Summary = ({ instance, loading, error }) => {
-  const { name } = instance || {};
-
-  const _title = <Title>Summary</Title>;
-  const _loading = loading && !name && <StatusLoader />;
-  const _summary = !_loading && instance && <ReactJson src={instance} />;
-
-  const _error = error &&
-    !_loading &&
-    !instance && (
-      <Message error>
-        <MessageTitle>Ooops!</MessageTitle>
-        <MessageDescription>
-          An error occurred while loading your instance summary
-        </MessageDescription>
-      </Message>
-    );
-
-  return (
-    <ViewContainer center={Boolean(_loading)} main>
-      {_title}
-      {_loading}
-      {_error}
-      {_summary}
-    </ViewContainer>
-  );
-};
-
-Summary.propTypes = {
-  loading: PropTypes.bool
-};
-
-export default compose(
-  graphql(GetInstance, {
-    options: ({ match }) => ({
-      pollInterval: 1000,
-      variables: {
-        name: get(match, 'params.instance')
-      }
-    }),
-    props: ({ data: { loading, error, variables, ...rest } }) => ({
-      instance: find(get(rest, 'machines', []), ['name', variables.name]),
-      loading,
-      error
-    })
-  })
-)(Summary);

packages/my-joy-beta/src/graphql/delete-instance.gql

@@ -0,0 +1,5 @@
+mutation startInstance($id: ID!) {
+  deleteMachine(id: $id) {
+    id
+  }
+}

packages/my-joy-beta/src/graphql/get-instance.gql

@@ -1,6 +1,21 @@
 query instance($name: String) {
   machines(name: $name) {
     id
-    dns_names
+    state,
+    name,
+    created,
+    updated,
+    primary_ip,
+    ips,
+		docker,
+    dns_names,
+    compute_node,
+    image {
+      id,
+      name
+    },
+    package {
+      name
+    }
   }
 }

packages/my-joy-beta/src/graphql/start-instance.gql

@@ -1,3 +1,5 @@
 mutation startInstance($id: ID!) {
-  startMachine(id: $id)
+  startMachine(id: $id) {
+    id
+  }
 }

packages/my-joy-beta/src/graphql/stop-instance.gql

@@ -1,3 +1,5 @@
 mutation stopInstance($id: ID!) {
-  stopMachine(id: $id)
+  stopMachine(id: $id) {
+    id
+  }
 }

packages/my-joy-beta/src/router.js

@@ -9,7 +9,7 @@ import { Header } from '@components/navigation';
 
 import {
   List as Instances,
-  Summary as InstanceSummary,
+  Home as InstanceHome,
   Tags as InstanceTags,
   Metadata as InstanceMetadata,
   Networks as InstanceNetworks,
@@ -55,9 +55,9 @@ export default () => (
           component={() => null}
         />
         <Route
-          path="/instances/:instance/summary"
+          path="/instances/:instance/home"
           exact
-          component={InstanceSummary}
+          component={InstanceHome}
         />
         <Route
           path="/instances/:instance/tags"
@@ -90,7 +90,7 @@ export default () => (
           exact
           component={({ match }) => (
             <Redirect
-              to={`/instances/${get(match, 'params.instance')}/summary`}
+              to={`/instances/${get(match, 'params.instance')}/home`}
             />
           )}
         />

packages/my-joy-beta/src/state/parse-error.js

@@ -0,0 +1,4 @@
+export default ({ graphQLErrors = [], message = '' }) =>
+  graphQLErrors.length
+    ? graphQLErrors.map(({ message }) => message).join('\n')
+    : message;

packages/my-joy-beta/src/state/state.js

@@ -2,8 +2,7 @@ export default {
   ui: {
     sections: {
       instances: [
-        'feed',
+        'home',
-        'summary',
         'tags',
         'metadata',
         'networks',

packages/ui-toolkit/etc/style.css

@@ -31,7 +31,7 @@ p.rsg--p-32 {
     padding-bottom: 36px;
 }
 
-.rsg--sidebar-4 a.rsg--link-72 {
+.rsg--sidebar-4 a.rsg--link-48 {
     color: #fff;
     font-size: 15px;
 }

packages/ui-toolkit/src/baseline/index.js

@@ -9,7 +9,7 @@ const unitProps = (() => {
 
   const measures = ['margin', 'padding']
     .reduce((props, rule) => [...props, rule, ...sided(rule)], [])
-    .concat(['height', 'width']);
+    .concat(['height', 'width', 'border-radius']);
 
   return sides.reduce((acc, side) => [...acc, `border-${side}-width`], [
     'border',

packages/ui-toolkit/src/button/index.js

@@ -109,6 +109,30 @@ const style = css`
     }
   `};
 
+  ${is('error')`
+    color: ${props => props.theme.red};
+    background-color: ${props => props.theme.white};
+    border-color: ${props => props.theme.red};
+    font-weight: 600;
+
+    &:focus {
+      background-color: ${props => props.theme.white};
+      border-color: ${props => props.theme.red};
+    }
+
+    &:hover {
+      background-color: ${props => props.theme.whiteHover};
+      border-color: ${props => props.theme.red};
+    }
+
+    &:active,
+    &:active:hover,
+    &:active:focus {
+      background-color: ${props => props.theme.whiteActive};
+      border-color: ${props => props.theme.red};
+    }
+  `};
+
   ${is('tertiary', 'selected')`
       background-color: rgba(59, 70, 204, 0.2);
       color: ${props => props.theme.primaryActive};
@@ -160,7 +184,8 @@ const style = css`
 
   ${is('icon')`
     min-height: ${remcalc(48)};
-    min-width: ${remcalc(48)};
+    display: flex;
+    align-items: center;
   `};
 
   ${is('fluid')`

packages/ui-toolkit/src/card/outlet.js

@@ -14,9 +14,13 @@ const BaseOutlet = BaseCard.extend`
   flex: 1 1 auto;
   flex-direction: column;
   border-width: 0;
-  padding: ${remcalc(13)};
+  padding: ${remcalc(12)};
   margin-bottom: 0;
 
+  ${is('big')`
+      padding: ${remcalc(24)};
+  `};
+
   background-color: transparent;
 
   ${is('collapsed')`

packages/ui-toolkit/src/form/base/input.js

@@ -95,6 +95,10 @@ const style = css`
     width: ${remcalc(120)}
   `};
 
+   ${is('fluid')`
+    max-width: 100%;
+  `};
+
   ${is('xSmall')`
     width: ${remcalc(80)}
   `};

packages/ui-toolkit/src/icons/Readme.md

@@ -13,6 +13,7 @@ const {
   Clipboard,
   Close,
   Cns,
+  Copy,
   DataCenter,
   Delete,
   Dot,
@@ -197,6 +198,24 @@ const {
     </Icon>
     <Label>CNS &gt; Disabled</Label>
   </ListItem>
+  <ListItem>
+    <Icon>
+      <Copy />
+    </Icon>
+    <Label>Copy &gt; Dark</Label>
+  </ListItem>
+  <ListItem>
+    <Icon dark>
+      <Copy light />
+    </Icon>
+    <Label>Copy &gt; Light</Label>
+  </ListItem>
+  <ListItem>
+    <Icon>
+      <Copy disabled />
+    </Icon>
+    <Label>Copy &gt; Disabled</Label>
+  </ListItem>
   <ListItem>
     <Icon>
       <DataCenter />

packages/ui-toolkit/src/icons/index.js

@@ -10,6 +10,7 @@ import {
   Clipboard as BaseClipboard,
   Close as BaseClose,
   Cns as BaseCns,
+  Copy as BaseCopy,
   DataCenter as BaseDataCenter,
   Delete as BaseDelete,
   Dot as BaseDot,
@@ -46,6 +47,7 @@ export const Chevron = Baseline(BaseChevron);
 export const Clipboard = Baseline(BaseClipboard);
 export const Close = Baseline(BaseClose);
 export const Cns = Baseline(BaseCns);
+export const Copy = Baseline(BaseCopy);
 export const DataCenter = Baseline(BaseDataCenter);
 export const Delete = Baseline(BaseDelete);
 export const Dot = Baseline(BaseDot);

packages/ui-toolkit/src/index.js

@@ -93,9 +93,11 @@ export {
   Arrow as ArrowIcon,
   Bin as BinIcon,
   Checkcircle as CheckcircleIcon,
+  Chevron as ChevronIcon,
   Clipboard as ClipboardIcon,
   Close as CloseIcon,
   Cns as CnsIcon,
+  Copy as CopyIcon,
   DataCenter as DataCenterIcon,
   Delete as DeleteIcon,
   Dot as DotIcon,

packages/ui-toolkit/src/tooltip/index.js

@@ -4,6 +4,7 @@ import styled from 'styled-components';
 import { Popper as BasePopper, Arrow } from 'react-popper';
 import rndId from 'rnd-id';
 import remcalc from 'remcalc';
+import is from 'styled-is';
 
 import style from './style';
 
@@ -12,13 +13,21 @@ const arrowClassName = rndId();
 const Popper = styled(BasePopper)`
   padding: ${remcalc(13)} ${remcalc(18)};
   font-weight: normal;
-
   ${style({
     background: 'text',
     color: 'white',
     border: 'transparent',
     arrow: arrowClassName
   })};
+
+  ${is('success')`
+    ${style({
+      background: 'green',
+      color: 'white',
+      border: 'transparent',
+      arrow: arrowClassName
+    })};
+  `};
 `;
 
 export default class Tooltip extends Component {

yarn.lock

@@ -251,8 +251,8 @@ ajv@^4.9.1:
     json-stable-stringify "^1.0.1"
 
 ajv@^5.0.0, ajv@^5.1.0, ajv@^5.1.5, ajv@^5.2.0, ajv@^5.2.3, ajv@^5.3.0:
-  version "5.4.0"
+  version "5.5.0"
-  resolved "https://registry.yarnpkg.com/ajv/-/ajv-5.4.0.tgz#32d1cf08dbc80c432f426f12e10b2511f6b46474"
+  resolved "https://registry.yarnpkg.com/ajv/-/ajv-5.5.0.tgz#eb2840746e9dc48bd5e063a36e3fd400c5eab5a9"
   dependencies:
     co "^4.6.0"
     fast-deep-equal "^1.0.0"
@@ -456,6 +456,10 @@ apr-for-each@^1.0.6:
     apr-engine-each "^1.0.3"
     lodash.defaults "^4.2.0"
 
+apr-intercept@^1.0.4:
+  version "1.0.4"
+  resolved "https://registry.yarnpkg.com/apr-intercept/-/apr-intercept-1.0.4.tgz#01c64345f4af647b6b04f5aba4755195429b061a"
+
 apr-main@^1.0.7:
   version "1.0.7"
   resolved "https://registry.yarnpkg.com/apr-main/-/apr-main-1.0.7.tgz#4f2592e20cb236b09c3c3d98a95088fbcc5fad4d"
@@ -2090,12 +2094,12 @@ caniuse-api@^1.5.2:
     lodash.uniq "^4.5.0"
 
 caniuse-db@^1.0.30000529, caniuse-db@^1.0.30000634, caniuse-db@^1.0.30000639:
-  version "1.0.30000770"
+  version "1.0.30000772"
-  resolved "https://registry.yarnpkg.com/caniuse-db/-/caniuse-db-1.0.30000770.tgz#cf68ae1cb8a82f6d3c35df41c62dc6973e470244"
+  resolved "https://registry.yarnpkg.com/caniuse-db/-/caniuse-db-1.0.30000772.tgz#51aae891768286eade4a3d8319ea76d6a01b512b"
 
 caniuse-lite@^1.0.30000748, caniuse-lite@^1.0.30000770:
-  version "1.0.30000770"
+  version "1.0.30000772"
-  resolved "https://registry.yarnpkg.com/caniuse-lite/-/caniuse-lite-1.0.30000770.tgz#bc8e7f50b073273390db6ab357378909a14e9bdb"
+  resolved "https://registry.yarnpkg.com/caniuse-lite/-/caniuse-lite-1.0.30000772.tgz#78129622cabfed7af1ff38b64ab680a6a0865420"
 
 capture-stack-trace@^1.0.0:
   version "1.0.0"
@@ -2177,8 +2181,8 @@ character-reference-invalid@^1.0.0:
   resolved "https://registry.yarnpkg.com/character-reference-invalid/-/character-reference-invalid-1.1.1.tgz#942835f750e4ec61a308e60c2ef8cc1011202efc"
 
 chardet@^0.4.0:
-  version "0.4.0"
+  version "0.4.2"
-  resolved "https://registry.yarnpkg.com/chardet/-/chardet-0.4.0.tgz#0bbe1355ac44d7a3ed4a925707c4ef70f8190f6c"
+  resolved "https://registry.yarnpkg.com/chardet/-/chardet-0.4.2.tgz#b5473b33dc97c424e5d98dc87d55d4d8a29c8bf2"
 
 checksum@^0.1.1:
   version "0.1.1"
@@ -2431,11 +2435,7 @@ commander@2.1.x, commander@~2.1.0:
   version "2.1.0"
   resolved "https://registry.yarnpkg.com/commander/-/commander-2.1.0.tgz#d121bbae860d9992a3d517ba96f56588e47c6781"
 
-commander@2.11.x, commander@~2.11.0:
+commander@2.12.x, commander@^2.11.0, commander@^2.9.0, commander@~2.12.1:
-  version "2.11.0"
-  resolved "https://registry.yarnpkg.com/commander/-/commander-2.11.0.tgz#157152fd1e7a6c8d98a5b715cf376df928004563"
-
-commander@^2.11.0, commander@^2.9.0:
   version "2.12.1"
   resolved "https://registry.yarnpkg.com/commander/-/commander-2.12.1.tgz#468635c4168d06145b9323356d1da84d14ac4a7a"
 
@@ -3070,6 +3070,10 @@ dashdash@^1.12.0:
   dependencies:
     assert-plus "^1.0.0"
 
+date-fns@^1.29.0:
+  version "1.29.0"
+  resolved "https://registry.yarnpkg.com/date-fns/-/date-fns-1.29.0.tgz#12e609cdcb935127311d04d33334e2960a2a54e6"
+
 date-now@^0.1.4:
   version "0.1.4"
   resolved "https://registry.yarnpkg.com/date-now/-/date-now-0.1.4.tgz#eaf439fd4d4848ad74e5cc7dbef200672b9e345b"
@@ -3263,6 +3267,13 @@ diffie-hellman@^5.0.0:
     miller-rabin "^4.0.0"
     randombytes "^2.0.0"
 
+dir-glob@^2.0.0:
+  version "2.0.0"
+  resolved "https://registry.yarnpkg.com/dir-glob/-/dir-glob-2.0.0.tgz#0b205d2b6aef98238ca286598a8204d29d0a0034"
+  dependencies:
+    arrify "^1.0.1"
+    path-type "^3.0.0"
+
 disable-scroll@^0.3.0:
   version "0.3.0"
   resolved "https://registry.yarnpkg.com/disable-scroll/-/disable-scroll-0.3.0.tgz#486d309ec9873edb18aec7891c5576bf8b506c59"
@@ -3295,12 +3306,11 @@ doctrine@1.5.0:
     esutils "^2.0.2"
     isarray "^1.0.0"
 
-doctrine@^2.0.0:
+doctrine@^2.0.0, doctrine@^2.0.2:
-  version "2.0.0"
+  version "2.0.2"
-  resolved "https://registry.yarnpkg.com/doctrine/-/doctrine-2.0.0.tgz#c73d8d2909d22291e1a007a395804da8b665fe63"
+  resolved "https://registry.yarnpkg.com/doctrine/-/doctrine-2.0.2.tgz#68f96ce8efc56cc42651f1faadb4f175273b0075"
   dependencies:
     esutils "^2.0.2"
-    isarray "^1.0.0"
 
 dom-converter@~0.1:
   version "0.1.4"
@@ -3325,7 +3335,7 @@ domain-browser@^1.1.1:
   version "1.1.7"
   resolved "https://registry.yarnpkg.com/domain-browser/-/domain-browser-1.1.7.tgz#867aa4b093faa05f1de08c06f4d7b21fdf8698bc"
 
-domelementtype@1:
+domelementtype@1, domelementtype@^1.3.0:
   version "1.3.0"
   resolved "https://registry.yarnpkg.com/domelementtype/-/domelementtype-1.3.0.tgz#b17aed82e8ab59e52dd9c19b1756e0fc187204c2"
 
@@ -3339,6 +3349,12 @@ domhandler@2.1:
   dependencies:
     domelementtype "1"
 
+domhandler@^2.3.0:
+  version "2.4.1"
+  resolved "https://registry.yarnpkg.com/domhandler/-/domhandler-2.4.1.tgz#892e47000a99be55bbf3774ffea0561d8879c259"
+  dependencies:
+    domelementtype "1"
+
 domutils@1.1:
   version "1.1.6"
   resolved "https://registry.yarnpkg.com/domutils/-/domutils-1.1.6.tgz#bddc3de099b9a2efacc51c623f28f416ecc57485"
@@ -3352,13 +3368,20 @@ domutils@1.5.1:
     dom-serializer "0"
     domelementtype "1"
 
+domutils@^1.5.1:
+  version "1.6.2"
+  resolved "https://registry.yarnpkg.com/domutils/-/domutils-1.6.2.tgz#1958cc0b4c9426e9ed367fb1c8e854891b0fa3ff"
+  dependencies:
+    dom-serializer "0"
+    domelementtype "1"
+
 dot-prop@^3.0.0:
   version "3.0.0"
   resolved "https://registry.yarnpkg.com/dot-prop/-/dot-prop-3.0.0.tgz#1b708af094a49c9a0e7dbcad790aba539dac1177"
   dependencies:
     is-obj "^1.0.0"
 
-dot-prop@^4.1.0:
+dot-prop@^4.1.0, dot-prop@^4.1.1:
   version "4.2.0"
   resolved "https://registry.yarnpkg.com/dot-prop/-/dot-prop-4.2.0.tgz#1f19e0c2e1aa0e32797c49799f2837ac6af69c57"
   dependencies:
@@ -3477,7 +3500,7 @@ enhanced-resolve@^3.4.0:
     object-assign "^4.0.1"
     tapable "^0.2.7"
 
-entities@~1.1.1:
+entities@^1.1.1, entities@~1.1.1:
   version "1.1.1"
   resolved "https://registry.yarnpkg.com/entities/-/entities-1.1.1.tgz#6e5c2d0a5621b5dadaecef80b90edfb5cd7772f0"
 
@@ -3520,8 +3543,8 @@ error-ex@^1.2.0, error-ex@^1.3.1:
     is-arrayish "^0.2.1"
 
 es-abstract@^1.6.1, es-abstract@^1.7.0:
-  version "1.9.0"
+  version "1.10.0"
-  resolved "https://registry.yarnpkg.com/es-abstract/-/es-abstract-1.9.0.tgz#690829a07cae36b222e7fd9b75c0d0573eb25227"
+  resolved "https://registry.yarnpkg.com/es-abstract/-/es-abstract-1.10.0.tgz#1ecb36c197842a00d8ee4c2dfd8646bb97d60864"
   dependencies:
     es-to-primitive "^1.1.1"
     function-bind "^1.1.1"
@@ -3634,8 +3657,8 @@ eslint-config-joyent-portal@3.2.0, eslint-config-joyent-portal@^3.2.0:
   resolved "https://registry.yarnpkg.com/eslint-config-joyent-portal/-/eslint-config-joyent-portal-3.2.0.tgz#20de54035938ea6918160393dc4b387e2792d57f"
 
 eslint-config-prettier@^2.6.0, eslint-config-prettier@^2.7.0:
-  version "2.8.0"
+  version "2.9.0"
-  resolved "https://registry.yarnpkg.com/eslint-config-prettier/-/eslint-config-prettier-2.8.0.tgz#929861a11de0249677686eba908118175d1a26bc"
+  resolved "https://registry.yarnpkg.com/eslint-config-prettier/-/eslint-config-prettier-2.9.0.tgz#5ecd65174d486c22dff389fe036febf502d468a3"
   dependencies:
     get-stdin "^5.0.1"
 
@@ -3812,8 +3835,8 @@ eslint@4.10.0:
     text-table "~0.2.0"
 
 eslint@^4.11.0, eslint@^4.9.0:
-  version "4.11.0"
+  version "4.12.0"
-  resolved "https://registry.yarnpkg.com/eslint/-/eslint-4.11.0.tgz#39a8c82bc0a3783adf5a39fa27fdd9d36fac9a34"
+  resolved "https://registry.yarnpkg.com/eslint/-/eslint-4.12.0.tgz#a7ce78eba8cc8f2443acfbbc870cc31a65135884"
   dependencies:
     ajv "^5.3.0"
     babel-code-frame "^6.22.0"
@@ -3821,7 +3844,7 @@ eslint@^4.11.0, eslint@^4.9.0:
     concat-stream "^1.6.0"
     cross-spawn "^5.1.0"
     debug "^3.0.1"
-    doctrine "^2.0.0"
+    doctrine "^2.0.2"
     eslint-scope "^3.7.1"
     espree "^3.5.2"
     esquery "^1.0.0"
@@ -3830,7 +3853,7 @@ eslint@^4.11.0, eslint@^4.9.0:
     file-entry-cache "^2.0.0"
     functional-red-black-tree "^1.0.1"
     glob "^7.1.2"
-    globals "^9.17.0"
+    globals "^11.0.1"
     ignore "^3.3.3"
     imurmurhash "^0.1.4"
     inquirer "^3.0.6"
@@ -4025,7 +4048,7 @@ express-graphql@^0.6.6:
     http-errors "^1.3.0"
     raw-body "^2.1.0"
 
-express@^4.13.3, express@^4.15.3:
+express@^4.13.3, express@^4.15.3, express@^4.16.2:
   version "4.16.2"
   resolved "https://registry.yarnpkg.com/express/-/express-4.16.2.tgz#e35c6dfe2d64b7dca0a5cd4f21781be3299e076c"
   dependencies:
@@ -4691,6 +4714,10 @@ globals@^10.0.0:
   version "10.4.0"
   resolved "https://registry.yarnpkg.com/globals/-/globals-10.4.0.tgz#5c477388b128a9e4c5c5d01c7a2aca68c68b2da7"
 
+globals@^11.0.1:
+  version "11.0.1"
+  resolved "https://registry.yarnpkg.com/globals/-/globals-11.0.1.tgz#12a87bb010e5154396acc535e1e43fc753b0e5e8"
+
 globals@^9.17.0, globals@^9.18.0:
   version "9.18.0"
   resolved "https://registry.yarnpkg.com/globals/-/globals-9.18.0.tgz#aa3896b3e69b487f17e31ed2143d69a8e30c2d8a"
@@ -4716,6 +4743,17 @@ globby@^6.1.0:
     pify "^2.0.0"
     pinkie-promise "^2.0.0"
 
+globby@^7.0.0:
+  version "7.1.1"
+  resolved "https://registry.yarnpkg.com/globby/-/globby-7.1.1.tgz#fb2ccff9401f8600945dfada97440cca972b8680"
+  dependencies:
+    array-union "^1.0.1"
+    dir-glob "^2.0.0"
+    glob "^7.1.2"
+    ignore "^3.3.5"
+    pify "^3.0.0"
+    slash "^1.0.0"
+
 globjoin@^0.1.4:
   version "0.1.4"
   resolved "https://registry.yarnpkg.com/globjoin/-/globjoin-0.1.4.tgz#2f4494ac8919e3767c5cbb691e9f463324285d43"
@@ -5009,17 +5047,17 @@ html-entities@1.2.1, html-entities@^1.2.0:
   resolved "https://registry.yarnpkg.com/html-entities/-/html-entities-1.2.1.tgz#0df29351f0721163515dfb9e5543e5f6eed5162f"
 
 html-minifier@^3.2.3:
-  version "3.5.6"
+  version "3.5.7"
-  resolved "https://registry.yarnpkg.com/html-minifier/-/html-minifier-3.5.6.tgz#7e4e661a09999599c7d8e8a2b8d7fb7430bb5c3e"
+  resolved "https://registry.yarnpkg.com/html-minifier/-/html-minifier-3.5.7.tgz#511e69bb5a8e7677d1012ebe03819aa02ca06208"
   dependencies:
     camel-case "3.0.x"
     clean-css "4.1.x"
-    commander "2.11.x"
+    commander "2.12.x"
     he "1.1.x"
     ncname "1.0.x"
     param-case "2.1.x"
     relateurl "0.2.x"
-    uglify-js "3.1.x"
+    uglify-js "3.2.x"
 
 html-tags@^2.0.0:
   version "2.0.0"
@@ -5047,6 +5085,17 @@ html-webpack-plugin@^2.30.1:
     pretty-error "^2.0.2"
     toposort "^1.0.0"
 
+htmlparser2@^3.9.2:
+  version "3.9.2"
+  resolved "https://registry.yarnpkg.com/htmlparser2/-/htmlparser2-3.9.2.tgz#1bdf87acca0f3f9e53fa4fcceb0f4b4cbb00b338"
+  dependencies:
+    domelementtype "^1.3.0"
+    domhandler "^2.3.0"
+    domutils "^1.5.1"
+    entities "^1.1.1"
+    inherits "^2.0.1"
+    readable-stream "^2.0.2"
+
 htmlparser2@~3.3.0:
   version "3.3.0"
   resolved "https://registry.yarnpkg.com/htmlparser2/-/htmlparser2-3.3.0.tgz#cc70d05a59f6542e43f0e685c982e14c924a9efe"
@@ -5156,7 +5205,7 @@ iferr@^0.1.5:
   version "0.1.5"
   resolved "https://registry.yarnpkg.com/iferr/-/iferr-0.1.5.tgz#c60eed69e6d8fdb6b3104a1fcbca1c192dc5b501"
 
-ignore@^3.3.3:
+ignore@^3.3.3, ignore@^3.3.5:
   version "3.3.7"
   resolved "https://registry.yarnpkg.com/ignore/-/ignore-3.3.7.tgz#612289bfb3c220e186a58118618d5be8c1bab021"
 
@@ -7003,9 +7052,9 @@ mime@1.4.1:
   version "1.4.1"
   resolved "https://registry.yarnpkg.com/mime/-/mime-1.4.1.tgz#121f9ebc49e3766f311a76e1fa1c8003c4b03aa6"
 
-mime@^1.2.11, mime@^1.4.1:
+mime@^1.2.11, mime@^1.4.1, mime@^1.5.0:
-  version "1.5.0"
+  version "1.6.0"
-  resolved "https://registry.yarnpkg.com/mime/-/mime-1.5.0.tgz#59c20e03ae116089edeb7d3b34a6788c5b3cccea"
+  resolved "https://registry.yarnpkg.com/mime/-/mime-1.6.0.tgz#32cd9e5c64553bd58d19a568af452acff04981b1"
 
 mimic-fn@^1.0.0:
   version "1.1.0"
@@ -7104,8 +7153,8 @@ multicast-dns-service-types@^1.1.0:
   resolved "https://registry.yarnpkg.com/multicast-dns-service-types/-/multicast-dns-service-types-1.1.0.tgz#899f11d9686e5e05cb91b35d5f0e63b773cfc901"
 
 multicast-dns@^6.0.1:
-  version "6.2.0"
+  version "6.2.1"
-  resolved "https://registry.yarnpkg.com/multicast-dns/-/multicast-dns-6.2.0.tgz#13f22d0c32dc5ee82a32878e3c380d875b3eab22"
+  resolved "https://registry.yarnpkg.com/multicast-dns/-/multicast-dns-6.2.1.tgz#c5035defa9219d30640558a49298067352098060"
   dependencies:
     dns-packet "^1.0.1"
     thunky "^0.1.0"
@@ -7725,7 +7774,7 @@ path-to-regexp@^2.1.0:
   version "2.1.0"
   resolved "https://registry.yarnpkg.com/path-to-regexp/-/path-to-regexp-2.1.0.tgz#7e30f9f5b134bd6a28ffc2e3ef1e47075ac5259b"
 
-path-type@3.0.0:
+path-type@3.0.0, path-type@^3.0.0:
   version "3.0.0"
   resolved "https://registry.yarnpkg.com/path-type/-/path-type-3.0.0.tgz#cef31dc8e0a1a3bb0d105c0cd97cf3bf47f4e36f"
   dependencies:
@@ -7890,6 +7939,14 @@ postcss-flexbugs-fixes@3.2.0:
   dependencies:
     postcss "^6.0.1"
 
+postcss-html@^0.11.0:
+  version "0.11.0"
+  resolved "https://registry.yarnpkg.com/postcss-html/-/postcss-html-0.11.0.tgz#03a3ff3116f8a0fe0d46316ea21893d4db4b63af"
+  dependencies:
+    htmlparser2 "^3.9.2"
+    remark "^8.0.0"
+    unist-util-find-all-after "^1.0.1"
+
 postcss-less@^1.1.0:
   version "1.1.3"
   resolved "https://registry.yarnpkg.com/postcss-less/-/postcss-less-1.1.3.tgz#6930525271bfe38d5793d33ac09c1a546b87bb51"
@@ -8088,7 +8145,7 @@ postcss-scss@^1.0.2:
   dependencies:
     postcss "^6.0.3"
 
-postcss-selector-parser@^2.0.0, postcss-selector-parser@^2.2.2, postcss-selector-parser@^2.2.3:
+postcss-selector-parser@^2.0.0, postcss-selector-parser@^2.2.2:
   version "2.2.3"
   resolved "https://registry.yarnpkg.com/postcss-selector-parser/-/postcss-selector-parser-2.2.3.tgz#f9437788606c3c9acee16ffe8d8b16297f27bb90"
   dependencies:
@@ -8096,6 +8153,14 @@ postcss-selector-parser@^2.0.0, postcss-selector-parser@^2.2.2, postcss-selector
     indexes-of "^1.0.1"
     uniq "^1.0.1"
 
+postcss-selector-parser@^3.1.0:
+  version "3.1.1"
+  resolved "https://registry.yarnpkg.com/postcss-selector-parser/-/postcss-selector-parser-3.1.1.tgz#4f875f4afb0c96573d5cf4d74011aee250a7e865"
+  dependencies:
+    dot-prop "^4.1.1"
+    indexes-of "^1.0.1"
+    uniq "^1.0.1"
+
 postcss-svgo@^2.1.1:
   version "2.1.6"
   resolved "https://registry.yarnpkg.com/postcss-svgo/-/postcss-svgo-2.1.6.tgz#b6df18aa613b666e133f08adb5219c2684ac108d"
@@ -8980,8 +9045,8 @@ redux-actions@^2.2.1:
     reduce-reducers "^0.1.0"
 
 redux-form@^7.1.2:
-  version "7.1.2"
+  version "7.2.0"
-  resolved "https://registry.yarnpkg.com/redux-form/-/redux-form-7.1.2.tgz#6b0f25c57fd8130a05ce00f6435fe1b051f402af"
+  resolved "https://registry.yarnpkg.com/redux-form/-/redux-form-7.2.0.tgz#4465d9bc863e40b1704695d672bea75fcf81db04"
   dependencies:
     deep-equal "^1.0.1"
     es6-error "^4.0.0"
@@ -10175,8 +10240,8 @@ stylelint-config-styled-components@^0.1.1:
   resolved "https://registry.yarnpkg.com/stylelint-config-styled-components/-/stylelint-config-styled-components-0.1.1.tgz#b408388d7c687833ab4be4c4e6522d97d2827ede"
 
 stylelint-processor-styled-components@^1.0.0:
-  version "1.1.0"
+  version "1.1.1"
-  resolved "https://registry.yarnpkg.com/stylelint-processor-styled-components/-/stylelint-processor-styled-components-1.1.0.tgz#27658def7844629960e194ae1b1af6b13f6e83d8"
+  resolved "https://registry.yarnpkg.com/stylelint-processor-styled-components/-/stylelint-processor-styled-components-1.1.1.tgz#c16ee9d6cda0a8c150c3b620812960bdf30958dc"
   dependencies:
     babel-traverse "^6.16.0"
     babylon "^6.12.0"
@@ -10184,8 +10249,8 @@ stylelint-processor-styled-components@^1.0.0:
     typescript-eslint-parser "^9.0.0"
 
 stylelint@^8.2.0:
-  version "8.2.0"
+  version "8.3.1"
-  resolved "https://registry.yarnpkg.com/stylelint/-/stylelint-8.2.0.tgz#6a15044553fb5c3143b16d62013a370314495b0d"
+  resolved "https://registry.yarnpkg.com/stylelint/-/stylelint-8.3.1.tgz#424c822f32c88e85025b55d72c7b98355e3fa6de"
   dependencies:
     autoprefixer "^7.1.2"
     balanced-match "^1.0.0"
@@ -10195,7 +10260,7 @@ stylelint@^8.2.0:
     execall "^1.0.0"
     file-entry-cache "^2.0.0"
     get-stdin "^5.0.1"
-    globby "^6.1.0"
+    globby "^7.0.0"
     globjoin "^0.1.4"
     html-tags "^2.0.0"
     ignore "^3.3.3"
@@ -10209,13 +10274,14 @@ stylelint@^8.2.0:
     normalize-selector "^0.2.0"
     pify "^3.0.0"
     postcss "^6.0.6"
+    postcss-html "^0.11.0"
     postcss-less "^1.1.0"
     postcss-media-query-parser "^0.2.3"
     postcss-reporter "^5.0.0"
     postcss-resolve-nested-selector "^0.1.1"
     postcss-safe-parser "^3.0.1"
     postcss-scss "^1.0.2"
-    postcss-selector-parser "^2.2.3"
+    postcss-selector-parser "^3.1.0"
     postcss-value-parser "^3.3.0"
     resolve-from "^4.0.0"
     specificity "^0.3.1"
@@ -10226,8 +10292,8 @@ stylelint@^8.2.0:
     table "^4.0.1"
 
 stylis@3.x:
-  version "3.4.4"
+  version "3.4.5"
-  resolved "https://registry.yarnpkg.com/stylis/-/stylis-3.4.4.tgz#7dbc7e3ca3c8707b796cd217fe6f8fbe81e78464"
+  resolved "https://registry.yarnpkg.com/stylis/-/stylis-3.4.5.tgz#d7b9595fc18e7b9c8775eca8270a9a1d3e59806e"
 
 sugarss@^1.0.0:
   version "1.0.1"
@@ -10665,17 +10731,17 @@ ua-parser-js@^0.7.9:
   resolved "https://registry.yarnpkg.com/ua-parser-js/-/ua-parser-js-0.7.17.tgz#e9ec5f9498b9ec910e7ae3ac626a805c4d09ecac"
 
 uglify-es@^3.0.24:
-  version "3.1.10"
+  version "3.2.0"
-  resolved "https://registry.yarnpkg.com/uglify-es/-/uglify-es-3.1.10.tgz#f1840c3b52771d17555a02ce158cf46f689384bd"
+  resolved "https://registry.yarnpkg.com/uglify-es/-/uglify-es-3.2.0.tgz#fbbfb9dc465ec7e5065701b9720d0de977d0bc24"
   dependencies:
-    commander "~2.11.0"
+    commander "~2.12.1"
     source-map "~0.6.1"
 
-uglify-js@3.1.x, uglify-js@^3.0.13:
+uglify-js@3.2.x, uglify-js@^3.0.13:
-  version "3.1.10"
+  version "3.2.0"
-  resolved "https://registry.yarnpkg.com/uglify-js/-/uglify-js-3.1.10.tgz#c4a5f9b5c6276b40cb971c1d97c9eeb26af9509c"
+  resolved "https://registry.yarnpkg.com/uglify-js/-/uglify-js-3.2.0.tgz#cb411ee4ca0e0cadbfe3a4e1a1da97e6fa0d19c1"
   dependencies:
-    commander "~2.11.0"
+    commander "~2.12.1"
     source-map "~0.6.1"
 
 uglify-js@^2.6, uglify-js@^2.8.29:
@@ -10776,7 +10842,13 @@ unique-string@^1.0.0:
   dependencies:
     crypto-random-string "^1.0.0"
 
-unist-util-is@^2.1.1:
+unist-util-find-all-after@^1.0.1:
+  version "1.0.1"
+  resolved "https://registry.yarnpkg.com/unist-util-find-all-after/-/unist-util-find-all-after-1.0.1.tgz#4e5512abfef7e0616781aecf7b1ed751c00af908"
+  dependencies:
+    unist-util-is "^2.0.0"
+
+unist-util-is@^2.0.0, unist-util-is@^2.1.1:
   version "2.1.1"
   resolved "https://registry.yarnpkg.com/unist-util-is/-/unist-util-is-2.1.1.tgz#0c312629e3f960c66e931e812d3d80e77010947b"
 
@@ -11118,16 +11190,16 @@ webpack-common-shake@^1.5.3:
     webpack-sources "^1.0.1"
 
 webpack-dev-middleware@^1.11.0:
-  version "1.12.1"
+  version "1.12.2"
-  resolved "https://registry.yarnpkg.com/webpack-dev-middleware/-/webpack-dev-middleware-1.12.1.tgz#338be3ca930973be1c2ce07d84d275e997e1a25a"
+  resolved "https://registry.yarnpkg.com/webpack-dev-middleware/-/webpack-dev-middleware-1.12.2.tgz#f8fc1120ce3b4fc5680ceecb43d777966b21105e"
   dependencies:
     memory-fs "~0.4.1"
-    mime "^1.4.1"
+    mime "^1.5.0"
     path-is-absolute "^1.0.0"
     range-parser "^1.0.3"
     time-stamp "^2.0.0"
 
-webpack-dev-server@2.9.4, webpack-dev-server@^2.8.2:
+webpack-dev-server@2.9.4:
   version "2.9.4"
   resolved "https://registry.yarnpkg.com/webpack-dev-server/-/webpack-dev-server-2.9.4.tgz#7883e61759c6a4b33e9b19ec4037bd4ab61428d1"
   dependencies:
@@ -11159,6 +11231,38 @@ webpack-dev-server@2.9.4, webpack-dev-server@^2.8.2:
     webpack-dev-middleware "^1.11.0"
     yargs "^6.6.0"
 
+webpack-dev-server@^2.8.2:
+  version "2.9.5"
+  resolved "https://registry.yarnpkg.com/webpack-dev-server/-/webpack-dev-server-2.9.5.tgz#79336fba0087a66ae491f4869f6545775b18daa8"
+  dependencies:
+    ansi-html "0.0.7"
+    array-includes "^3.0.3"
+    bonjour "^3.5.0"
+    chokidar "^1.6.0"
+    compression "^1.5.2"
+    connect-history-api-fallback "^1.3.0"
+    debug "^3.1.0"
+    del "^3.0.0"
+    express "^4.16.2"
+    html-entities "^1.2.0"
+    http-proxy-middleware "~0.17.4"
+    import-local "^0.1.1"
+    internal-ip "1.2.0"
+    ip "^1.1.5"
+    killable "^1.0.0"
+    loglevel "^1.4.1"
+    opn "^5.1.0"
+    portfinder "^1.0.9"
+    selfsigned "^1.9.1"
+    serve-index "^1.7.2"
+    sockjs "0.3.18"
+    sockjs-client "1.1.4"
+    spdy "^3.4.1"
+    strip-ansi "^3.0.1"
+    supports-color "^4.2.1"
+    webpack-dev-middleware "^1.11.0"
+    yargs "^6.6.0"
+
 webpack-manifest-plugin@1.3.2:
   version "1.3.2"
   resolved "https://registry.yarnpkg.com/webpack-manifest-plugin/-/webpack-manifest-plugin-1.3.2.tgz#5ea8ee5756359ddc1d98814324fe43496349a7d4"