feat(cp-frontend, ui-toolkit, cp-gql-mock-server): Add snapshot tests

packages/cp-frontend/package.json

@@ -78,6 +78,7 @@
     "jest-matcher-utils": "^20.0.3",
     "jest-snapshot": "^20.0.3",
     "jest-styled-components": "^4.2.2",
+    "jest-transform-graphql": "^2.1.0",
     "lodash.sortby": "^4.7.0",
     "mz": "^2.6.0",
     "react-scripts": "^1.0.7",

packages/cp-frontend/src/components/deployment-group/delete.js

@@ -4,8 +4,8 @@ import { ModalHeading, ModalText, Button } from 'joyent-ui-toolkit';
 
 const DeploymentGroupDelete = ({
   deploymentGroup,
-  onCancelClick,
+  onCancelClick = () => {},
-  onConfirmClick
+  onConfirmClick = () => {}
 }) =>
   <div>
     <ModalHeading>
@@ -23,9 +23,9 @@ const DeploymentGroupDelete = ({
   </div>;
 
 DeploymentGroupDelete.propTypes = {
-  deploymentGroup: PropTypes.object,
+  deploymentGroup: PropTypes.object.isRequired,
-  onCancelClick: PropTypes.func.isRequired,
+  onCancelClick: PropTypes.func,
-  onConfirmClick: PropTypes.func.isRequired
+  onConfirmClick: PropTypes.func
 };
 
 export default DeploymentGroupDelete;

packages/cp-frontend/src/components/instances/list-item.js

@@ -1,23 +1,18 @@
-import React, { Component } from 'react';
+import React from 'react';
 import PropTypes from 'prop-types';
 import remcalc from 'remcalc';
 import styled from 'styled-components';
-import is, { isOr } from 'styled-is';
+import { isOr } from 'styled-is';
 import titleCase from 'title-case';
 
 import {
   Card,
   CardInfo,
   CardView,
-  CardMeta,
   CardTitle,
   CardDescription,
   HealthyIcon,
-  Tooltip,
+  Label
-  TooltipLabel,
-  P,
-  Label,
-  typography
 } from 'joyent-ui-toolkit';
 
 const STATUSES = [
@@ -80,12 +75,10 @@ const StyledCard = Card.extend`
 `;
 
 const InstanceCard = ({
-  instance = {},
+  instance,
-  onOptionsClick = () => null,
+  onHealthMouseOver = () => {},
-  toggleCollapsed = () => null,
+  onStatusMouseOver = () => {},
-  onHealthMouseOver,
+  onMouseOut = () => {}
-  onStatusMouseOver,
-  onMouseOut
 }) => {
 
   const statusProps = STATUSES.reduce(
@@ -147,9 +140,7 @@ const InstanceCard = ({
 };
 
 InstanceCard.propTypes = {
-  instance: PropTypes.object,
+  instance: PropTypes.object.isRequired,
-  onOptionsClick: PropTypes.func,
-  toggleCollapsed: PropTypes.func,
   onHealthMouseOver: PropTypes.func,
   onStatusMouseOver: PropTypes.func,
   onMouseOut: PropTypes.func

packages/cp-frontend/src/components/navigation/menu.js

@@ -1,5 +1,3 @@
-// TODO need to sort out navlinks
-
 import React from 'react';
 import PropTypes from 'prop-types';
 import forceArray from 'force-array';

packages/cp-frontend/src/components/navigation/not-found.js

@@ -2,7 +2,7 @@ import React from 'react';
 import PropTypes from 'prop-types';
 import styled from 'styled-components';
 import remcalc from 'remcalc';
-import { H1, H2, P, Button } from 'joyent-ui-toolkit';
+import { H1, P, Button } from 'joyent-ui-toolkit';
 import { LayoutContainer } from '@components/layout';
 
 const StyledContainer = styled.div`

packages/cp-frontend/src/components/service/delete.js

@@ -2,19 +2,17 @@ import React from 'react';
 import PropTypes from 'prop-types';
 import { ModalHeading, ModalText, Button } from 'joyent-ui-toolkit';
 
-const propTypes = {
+const ServiceDelete = ({
-  service: PropTypes.object,
+  service,
-  onCancelClick: PropTypes.func.isRequired,
+  onCancelClick = () => {},
-  onConfirmClick: PropTypes.func.isRequired
+  onConfirmClick = () => {}
-};
+}) =>
-
-const ServiceDelete = ({ service, onCancelClick, onConfirmClick }) =>
   <div>
     <ModalHeading>
       Deleting a service: <br /> {service.name}
     </ModalHeading>
     <ModalText marginBottom="3">
-      Deleting a service can lead to irreverasable loss of data and failures in
+      Deleting a service can lead to irreversible loss of data and failures in
       your application. Are you sure you want to continue?
     </ModalText>
     <Button onClick={onCancelClick} secondary>
@@ -23,6 +21,10 @@ const ServiceDelete = ({ service, onCancelClick, onConfirmClick }) =>
     <Button onClick={onConfirmClick}>Delete service</Button>
   </div>;
 
-ServiceDelete.propTypes = propTypes;
+ServiceDelete.propTypes = {
+  service: PropTypes.object.isRequired,
+  onCancelClick: PropTypes.func,
+  onConfirmClick: PropTypes.func
+};
 
 export default ServiceDelete;

packages/cp-frontend/src/components/service/scale.js

@@ -11,8 +11,8 @@ import {
 
 const ServiceScale = ({
   service,
-  handleSubmit,
+  handleSubmit = () => {},
-  onCancelClick,
+  onCancelClick = () => {},
   invalid,
   pristine
 }) =>
@@ -41,7 +41,7 @@ const ServiceScale = ({
   </form>;
 
 ServiceScale.propTypes = {
-  service: PropTypes.object,
+  service: PropTypes.object.isRequired,
   onSubmitClick: PropTypes.func,
   onCancelClick: PropTypes.func
 };

packages/cp-frontend/src/components/services/list-item.js

@@ -5,7 +5,7 @@ import forceArray from 'force-array';
 import sortBy from 'lodash.sortby';
 import { isNot } from 'styled-is';
 
-import { InstancesIcon, HealthyIcon, UnhealthyIcon } from 'joyent-ui-toolkit';
+import { InstancesIcon, HealthyIcon } from 'joyent-ui-toolkit';
 import Status from './status';
 
 import {
@@ -41,7 +41,7 @@ const StyledAnchor = styled(Anchor)`
 const ServiceListItem = ({
   onQuickActionsClick = () => {},
   deploymentGroup = '',
-  service = {},
+  service,
   isChild = false
 }) => {
   const handleCardOptionsClick = evt => {
@@ -56,14 +56,16 @@ const ServiceListItem = ({
     ? children.reduce((count, child) => count + child.instances.length, 0)
     : service.instances.length;
 
-  const childrenItems = children.map(service =>
+  const childrenItems = children.length
+    ? children.map(service =>
       <ServiceListItem
         key={service.id}
         deploymentGroup={deploymentGroup}
         service={service}
         isChild
       />
-  );
+    ) : null;
+
 
   const title = isChild
     ? <CardTitle>
@@ -118,7 +120,7 @@ const ServiceListItem = ({
     )
   }
 
-  const view = childrenItems.length
+  const view = children.length
     ? <CardGroupView>
         {childrenItems}
       </CardGroupView>

packages/cp-frontend/src/components/services/quick-actions.js

@@ -6,27 +6,17 @@ const ServicesQuickActions = ({
   show,
   position,
   service,
-  url,
+  onBlur = () => {},
-  onBlur,
+  onRestartClick = () => {},
-  onRestartClick,
+  onStopClick = () => {},
-  onStopClick,
+  onStartClick = () => {},
-  onStartClick,
+  onScaleClick = () => {},
-  onScaleClick,
+  onDeleteClick = () => {},
-  onDeleteClick
 }) => {
   if (!show) {
     return null;
   }
 
-  /* const p = Object.keys(position).reduce((p, key) => {
-    if (typeof position[key] === 'number') {
-      p[key] = `${position[key]}px`;
-    } else {
-      p[key] = position[key];
-    }
-    return p;
-  }, {}); */
-
   const handleRestartClick = evt => {
     onRestartClick(evt, service);
   };

packages/cp-frontend/src/containers/deployment-group/delete.js

@@ -5,10 +5,10 @@ import DeploymentGroupDeleteMutation from '@graphql/DeploymentGroupDeleteMutatio
 import DeploymentGroupQuery from '@graphql/DeploymentGroup.gql';
 import { Loader, ModalErrorMessage } from '@components/messaging';
 import { DeploymentGroupDelete as DeploymentGroupDeleteComponent } from '@components/deployment-group';
-import { Modal, ModalHeading, Button } from 'joyent-ui-toolkit'
+import { Modal } from 'joyent-ui-toolkit'
 import { withNotFound, GqlPaths } from '@containers/navigation';
 
-class DeploymentGroupDelete extends Component {
+export class DeploymentGroupDelete extends Component {
   constructor(props) {
     super(props);
 
@@ -18,7 +18,7 @@ class DeploymentGroupDelete extends Component {
   }
 
   render() {
-    const { location, history, match, loading, error } = this.props;
+    const { history, match, loading, error } = this.props;
 
     const handleCloseClick = evt => {
       const closeUrl = match.url.split('/').slice(0, -2).join('/');

packages/cp-frontend/src/containers/deployment-groups/import.js

@@ -37,7 +37,7 @@ class DeploymentGroupImport extends Component {
   };
 
   render() {
-    const { loading, error } = this.state;
+    const { error } = this.state;
 
     const _title = <Title>Importing deployment group</Title>;
 

packages/cp-frontend/src/containers/deployment-groups/list.js

@@ -110,8 +110,7 @@ const StyledIconButton = styled(IconButton)`
   }
 `;
 
-const DeploymentGroupList = ({
+export const DeploymentGroupList = ({
-  location,
   deploymentGroups,
   importable,
   loading,

packages/cp-frontend/src/containers/environment/index.js

@@ -1,4 +1,4 @@
-import React, { Component } from 'react';
+import React from 'react';
 import { compose, graphql } from 'react-apollo';
 import get from 'lodash.get';
 
@@ -6,7 +6,7 @@ import ManifestQuery from '@graphql/Manifest.gql';
 
 import { LayoutContainer } from '@components/layout';
 import { Title } from '@components/navigation';
-import { Loader, ErrorMessage, WarningMessage } from '@components/messaging';
+import { Loader, ErrorMessage } from '@components/messaging';
 import { Environment } from '@components/manifest/edit-or-create';
 
 const EnvironmentReadOnly = ({

packages/cp-frontend/src/containers/instances/list.js

@@ -1,5 +1,4 @@
-import React, { Component } from 'react';
+import React from 'react';
-import styled from 'styled-components';
 import { compose, graphql } from 'react-apollo';
 import { connect } from 'react-redux';
 import InstancesQuery from '@graphql/Instances.gql';
@@ -13,7 +12,7 @@ import { InstanceListItem, EmptyInstances } from '@components/instances';
 import { toggleInstancesTooltip } from '@root/state/actions';
 import { withNotFound, GqlPaths } from '@containers/navigation';
 
-const InstanceList = ({
+export const InstanceList = ({
   deploymentGroup,
   instances = [],
   loading,
@@ -92,7 +91,6 @@ const InstanceList = ({
     <InstanceListItem
       instance={instance}
       key={instance.id}
-      toggleCollapsed={() => null}
       onHealthMouseOver={handleHealthMouseOver}
       onStatusMouseOver={handleStatusMouseOver}
       onMouseOut={handleMouseOut}

packages/cp-frontend/src/containers/instances/tooltip.js

@@ -2,7 +2,6 @@ import React from 'react';
 import { connect } from 'react-redux';
 import styled from 'styled-components';
 import { Tooltip, TooltipLabel } from 'joyent-ui-toolkit';
-import { ServicesQuickActions } from '@components/services';
 
 const StyledContainer = styled.div`
   position: absolute;
@@ -29,7 +28,7 @@ const statusMessages = {
   unknown: 'We cannot work out what status your instance is in',
 };
 
-const InstancesTooltip = ({
+export const InstancesTooltip = ({
   instancesTooltip
 }) => {
 

packages/cp-frontend/src/containers/navigation/breadcrumb.js

@@ -1,4 +1,5 @@
 import React from 'react';
+import PropTypes from 'prop-types';
 import { connect } from 'react-redux';
 import { compose } from 'react-apollo';
 import { Breadcrumb as BreadcrumbComponent } from '@components/navigation';
@@ -8,9 +9,9 @@ import {
   serviceBySlugSelector
 } from '@root/state/selectors';
 
-const Breadcrumb = ({ deploymentGroup, service, location }) => {
+export const Breadcrumb = ({ deploymentGroup, service, location: { pathname }}) => {
 
-  const path = location.pathname.split('/');
+  const path = pathname.split('/');
 
   const links = [
     {
@@ -36,6 +37,12 @@ const Breadcrumb = ({ deploymentGroup, service, location }) => {
   return <BreadcrumbComponent links={links} />;
 };
 
+Breadcrumb.propTypes = {
+  deploymentGroup: PropTypes.object,
+  service: PropTypes.object,
+  location: PropTypes.object
+}
+
 const connectBreadcrumb = connect(
   (state, ownProps) => {
     const params = ownProps.match.params;

packages/cp-frontend/src/containers/navigation/header.js

@@ -5,7 +5,7 @@ import get from 'lodash.get';
 import PortalQuery from '@graphql/Portal.gql';
 import { Header as HeaderComponent } from '@components/navigation';
 
-const Header = ({ datacenter, username }) =>
+export const Header = ({ datacenter, username }) =>
   <HeaderComponent datacenter={datacenter} username={username} />;
 
 const HeaderWithData = graphql(PortalQuery, {

packages/cp-frontend/src/containers/navigation/menu.js

@@ -4,7 +4,7 @@ import { compose } from 'react-apollo';
 import withNotFound from './not-found-hoc';
 import { Menu as MenuComponent } from '@components/navigation';
 
-const Menu = ({ location, match, sections }) => {
+export const Menu = ({ location, match, sections }) => {
 
   if (!sections || !sections.length) {
     return null;

packages/cp-frontend/src/containers/navigation/not-found-hoc.js

@@ -11,21 +11,20 @@ export default (paths) => {
 
     return class extends Component {
 
-      constructor(props) {
-        super(props);
-      }
-
       componentWillReceiveProps(nextProps) {
+        
         if(paths) {
           const {
             error,
             location,
-            history,
+            history
-            match
           } = nextProps;
 
-          if (error && (!location.state || !location.state.notFound)) {
+          if (
-            if(error.graphQLErrors && error.graphQLErrors.length) {
+            error
+            && (!location.state || !location.state.notFound)
+            && (error.graphQLErrors && error.graphQLErrors.length)
+          ) {
             const graphQLError = error.graphQLErrors[0];
             if(graphQLError.message === 'Not Found') {
               const notFound = graphQLError.path.pop();
@@ -36,7 +35,6 @@ export default (paths) => {
           }
         }
       }
-      }
 
       render() {
 

packages/cp-frontend/src/containers/service/delete.js

@@ -4,11 +4,11 @@ import { compose, graphql } from 'react-apollo';
 import ServicesDeleteMutation from '@graphql/ServicesDeleteMutation.gql';
 import { Loader, ModalErrorMessage } from '@components/messaging';
 import { ServiceDelete as ServiceDeleteComponent } from '@components/service';
-import { Modal, ModalHeading, Button } from 'joyent-ui-toolkit';
+import { Modal } from 'joyent-ui-toolkit';
 import ServiceGql from './service-gql';
 import { withNotFound, GqlPaths } from '@containers/navigation';
 
-class ServiceDelete extends Component {
+export class ServiceDelete extends Component {
   constructor(props) {
     super(props);
 
@@ -18,7 +18,7 @@ class ServiceDelete extends Component {
   }
 
   render() {
-    const { loading, error, match, history, location } = this.props;
+    const { loading, error, match, history } = this.props;
 
     const handleCloseClick = evt => {
       const closeUrl = match.url.split('/').slice(0, -2).join('/');
@@ -79,6 +79,9 @@ class ServiceDelete extends Component {
 
 ServiceDelete.propTypes = {
   service: PropTypes.object,
+  loading: PropTypes.bool,
+  error: PropTypes.bool,
+  match: PropTypes.object,
   history: PropTypes.object,
   deleteServices: PropTypes.func.isRequired
 };

packages/cp-frontend/src/containers/service/scale.js

@@ -5,11 +5,11 @@ import { reduxForm } from 'redux-form';
 import ServiceScaleMutation from '@graphql/ServiceScale.gql';
 import { Loader, ModalErrorMessage } from '@components/messaging';
 import { ServiceScale as ServiceScaleComponent } from '@components/service';
-import { Modal, ModalHeading, Button } from 'joyent-ui-toolkit';
+import { Modal } from 'joyent-ui-toolkit';
 import ServiceGql from './service-gql';
 import { withNotFound, GqlPaths } from '@containers/navigation';
 
-class ServiceScale extends Component {
+export class ServiceScale extends Component {
   constructor(props) {
     super(props);
 
@@ -19,7 +19,7 @@ class ServiceScale extends Component {
   }
 
   render() {
-    const { loading, error, match, history, location } = this.props;
+    const { loading, error, match, history } = this.props;
 
     const handleCloseClick = evt => {
       const closeUrl = match.url.split('/').slice(0, -2).join('/');
@@ -104,6 +104,9 @@ class ServiceScale extends Component {
 
 ServiceScale.propTypes = {
   service: PropTypes.object,
+  loading: PropTypes.bool,
+  error: PropTypes.bool,
+  match: PropTypes.object,
   history: PropTypes.object,
   scale: PropTypes.func.isRequired
 };

packages/cp-frontend/src/containers/services/list.js

@@ -1,4 +1,5 @@
 import React, { Component } from 'react';
+import PropTypes from 'prop-types';
 import { compose, graphql } from 'react-apollo';
 import { connect } from 'react-redux';
 import styled from 'styled-components';
@@ -18,7 +19,7 @@ const StyledContainer = styled.div`
   position: relative;
 `;
 
-class ServiceList extends Component {
+export class ServiceList extends Component {
   constructor(props) {
     super(props);
 
@@ -127,6 +128,14 @@ class ServiceList extends Component {
   }
 }
 
+ServiceList.propTypes = {
+  deploymentGroup: PropTypes.object,
+  services: PropTypes.array,
+  loading: PropTypes.bool,
+  error: PropTypes.bool,
+  toggleServicesQuickActions: PropTypes.func
+}
+
 const mapStateToProps = (state, ownProps) => ({});
 
 const mapDispatchToProps = dispatch => ({

packages/cp-frontend/src/containers/services/menu.js

@@ -20,19 +20,18 @@ const PaddedRow = Row.extend`
   margin-bottom: ${remcalc(18)}
 `;
 
-const ServicesMenu = ({ location, history: { push } }) => {
+export const ServicesMenu = ({
+  location: { pathname },
+  history: { push }
+}) => {
 
-  if(location.state && location.state.notFound) {
+  const toggleValue = pathname.split('-').pop();
-    return null;
-  }
-
-  const toggleValue = location.pathname.split('-').pop();
 
   const handleToggle = evt => {
     const value = evt.target.value;
     if (value !== toggleValue) {
-      const index = location.pathname.lastIndexOf('-');
+      const index = pathname.lastIndexOf('-');
-      const path = `${location.pathname.slice(0, index)}-${value}`;
+      const path = `${pathname.slice(0, index)}-${value}`;
       push(path);
     }
   };

packages/cp-frontend/src/containers/services/quick-actions.js

@@ -5,7 +5,6 @@ import styled from 'styled-components';
 import ServicesRestartMutation from '@graphql/ServicesRestartMutation.gql';
 import ServicesStopMutation from '@graphql/ServicesStopMutation.gql';
 import ServicesStartMutation from '@graphql/ServicesStartMutation.gql';
-import { Tooltip, TooltipLabel } from 'joyent-ui-toolkit';
 import { toggleServicesQuickActions } from '@root/state/actions';
 import { ServicesQuickActions as QuickActions } from '@components/services';
 import { ErrorMessage } from '@components/messaging';
@@ -17,7 +16,7 @@ const StyledContainer = styled.div`
   left: 0;
 `;
 
-class ServicesQuickActions extends Component {
+export class ServicesQuickActions extends Component {
 
   constructor(props) {
     super(props);

packages/cp-frontend/src/containers/services/topology.js

@@ -22,7 +22,7 @@ const StyledContainer = styled.div`
   position: relative;
 `;
 
-class ServicesTopology extends Component {
+export class ServicesTopology extends Component {
   constructor(props) {
     super(props);
 

packages/cp-frontend/test/run

@@ -30,20 +30,26 @@ const paths = require('react-scripts/config/paths');
 
 const config = createJestConfig(
   relativePath =>
-    path.resolve(__dirname, '../node_modules/react-scripts', relativePath),
+    path.resolve(__dirname, '../../../node_modules/react-scripts', relativePath),
-  path.resolve(__dirname, '..'),
+  path.resolve(__dirname, '../../../'),
   false
 );
 
 // patch
 config.testEnvironment = 'node';
-config.testMatch = ['<rootDir>/test/(unit|integration)/*.js'];
+config.testMatch = ['<rootDir>/packages/cp-frontend/test/(unit|integration)/**/*.js'];
+config.testPathIgnorePatterns = ['<rootDir>/packages/cp-frontend/test/(unit|integration)/mocks'];
+config.transform = Object.assign({}, {
+  '\\.(gql|graphql)$': 'jest-transform-graphql'
+}, config.transform)
 config.moduleNameMapper = Object.assign({}, config.moduleNameMapper, {
-  '\\.(jpg|jpeg|png|gif|eot|otf|webp|svg|ttf|woff|woff2|mp4|webm|wav|mp3|m4a|aac|oga)$': '<rootDir>/test/file-mock.js',
+  '\\.(jpg|jpeg|png|gif|eot|otf|webp|svg|ttf|woff|woff2|mp4|webm|wav|mp3|m4a|aac|oga)$': '<rootDir>/packages/cp-frontend/test/file-mock.js',
-  '^root/(.*)$': '<rootDir>/src/$1',
+  '^@root/(.*)$': '<rootDir>/packages/cp-frontend/src/$1',
-  '^@components/(.*)$': '<rootDir>/src/components/$1',
+  '^@components/(.*)$': '<rootDir>/packages/cp-frontend/src/components/$1',
-  '^@assets/(.*)$': '<rootDir>/src/assets/$1',
+  '^@containers/(.*)$': '<rootDir>/packages/cp-frontend/src/containers/$1',
-  '^@state/(.*)$': '<rootDir>/src/state/$1'
+  '^@graphql/(.*)$': '<rootDir>/packages/cp-frontend/src/graphql/$1',
+  '^@assets/(.*)$': '<rootDir>/packages/cp-frontend/src/assets/$1',
+  '^@state/(.*)$': '<rootDir>/packages/cp-frontend/src/state/$1'
 });
 
 argv.push('--config', JSON.stringify(config));

packages/cp-frontend/test/unit/components/deployment-group/__snapshots__/delete.js.snap

@@ -0,0 +1,259 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`renders <DeploymentGroupDelete /> without throwing 1`] = `
+.c4 {
+  font-family: sans-serif;
+  font-size: 100%;
+  line-height: 1.15;
+  margin: 0;
+  overflow: visible;
+  text-transform: none;
+  -webkit-appearance: button;
+  -moz-appearance: button;
+  appearance: button;
+  min-width: 7.5rem;
+  box-sizing: border-box;
+  display: inline-block;
+  -webkit-box-pack: center;
+  -webkit-justify-content: center;
+  -ms-flex-pack: center;
+  justify-content: center;
+  -webkit-align-items: center;
+  -webkit-box-align: center;
+  -ms-flex-align: center;
+  align-items: center;
+  margin: 0;
+  padding: 0.9375rem 1.125rem;
+  position: relative;
+  font-family: "Libre Franklin",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,Helvetica,sans-serif;
+  font-weight: 400;
+  font-size: 0.9375rem;
+  text-align: center;
+  font-style: normal;
+  font-stretch: normal;
+  line-height: normal;
+  -webkit-letter-spacing: normal;
+  -moz-letter-spacing: normal;
+  -ms-letter-spacing: normal;
+  letter-spacing: normal;
+  text-decoration: none;
+  white-space: nowrap;
+  vertical-align: middle;
+  touch-action: manipulation;
+  cursor: pointer;
+  color: ;
+  background-image: none;
+  background-color: ;
+  border-radius: 0.25rem;
+  border: solid 0.0625rem;
+  color: ;
+  background-color: ;
+  border-color: ;
+}
+
+.c4::-moz-focus-inner,
+.c4[type="button"]::-moz-focus-inner,
+.c4[type="reset"]::-moz-focus-inner,
+.c4[type="submit"]::-moz-focus-inner {
+  border-style: none;
+  padding: 0;
+}
+
+.c4:-moz-focusring,
+.c4[type="button"]:-moz-focusring,
+.c4[type="reset"]:-moz-focusring,
+.c4[type="submit"]:-moz-focusring {
+  outline: 0.0625rem dotted ButtonText;
+}
+
+.c4:focus {
+  outline: 0;
+  text-decoration: none;
+  background-color: ;
+  border-color: ;
+}
+
+.c4:hover {
+  background-color: ;
+  border: solid 0.0625rem;
+}
+
+.c4:active,
+.c4:active:hover,
+.c4:active:focus {
+  background-image: none;
+  outline: 0;
+  background-color: ;
+  border-color: ;
+}
+
+.c4[disabled] {
+  cursor: not-allowed;
+  pointer-events: none;
+}
+
+.c4:focus {
+  background-color: ;
+  border-color: ;
+}
+
+.c4:hover {
+  background-color: ;
+  border-color: ;
+}
+
+.c4:active,
+.c4:active:hover,
+.c4:active:focus {
+  background-color: ;
+  border-color: ;
+}
+
+.c4 + button {
+  margin-left: 1.25rem;
+}
+
+.c5 {
+  font-family: sans-serif;
+  font-size: 100%;
+  line-height: 1.15;
+  margin: 0;
+  overflow: visible;
+  text-transform: none;
+  -webkit-appearance: button;
+  -moz-appearance: button;
+  appearance: button;
+  min-width: 7.5rem;
+  box-sizing: border-box;
+  display: inline-block;
+  -webkit-box-pack: center;
+  -webkit-justify-content: center;
+  -ms-flex-pack: center;
+  justify-content: center;
+  -webkit-align-items: center;
+  -webkit-box-align: center;
+  -ms-flex-align: center;
+  align-items: center;
+  margin: 0;
+  padding: 0.9375rem 1.125rem;
+  position: relative;
+  font-family: "Libre Franklin",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,Helvetica,sans-serif;
+  font-weight: 400;
+  font-size: 0.9375rem;
+  text-align: center;
+  font-style: normal;
+  font-stretch: normal;
+  line-height: normal;
+  -webkit-letter-spacing: normal;
+  -moz-letter-spacing: normal;
+  -ms-letter-spacing: normal;
+  letter-spacing: normal;
+  text-decoration: none;
+  white-space: nowrap;
+  vertical-align: middle;
+  touch-action: manipulation;
+  cursor: pointer;
+  color: ;
+  background-image: none;
+  background-color: ;
+  border-radius: 0.25rem;
+  border: solid 0.0625rem;
+}
+
+.c5::-moz-focus-inner,
+.c5[type="button"]::-moz-focus-inner,
+.c5[type="reset"]::-moz-focus-inner,
+.c5[type="submit"]::-moz-focus-inner {
+  border-style: none;
+  padding: 0;
+}
+
+.c5:-moz-focusring,
+.c5[type="button"]:-moz-focusring,
+.c5[type="reset"]:-moz-focusring,
+.c5[type="submit"]:-moz-focusring {
+  outline: 0.0625rem dotted ButtonText;
+}
+
+.c5:focus {
+  outline: 0;
+  text-decoration: none;
+  background-color: ;
+  border-color: ;
+}
+
+.c5:hover {
+  background-color: ;
+  border: solid 0.0625rem;
+}
+
+.c5:active,
+.c5:active:hover,
+.c5:active:focus {
+  background-image: none;
+  outline: 0;
+  background-color: ;
+  border-color: ;
+}
+
+.c5[disabled] {
+  cursor: not-allowed;
+  pointer-events: none;
+}
+
+.c5 + button {
+  margin-left: 1.25rem;
+}
+
+.c1 {
+  font-family: "Libre Franklin",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,Helvetica,sans-serif;
+  font-weight: 500;
+  font-size: 1.5rem;
+}
+
+.c3 {
+  font-family: "Libre Franklin",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,Helvetica,sans-serif;
+  font-weight: 400;
+  line-height: 1.5rem;
+  font-size: 0.9375rem;
+}
+
+.c0 {
+  line-height: 1.25;
+  color: ;
+  margin: 0 0 0.75rem 0;
+}
+
+.c2 {
+  color: ;
+  margin: 0.75rem 0 1.875rem 0;
+}
+
+<div>
+  <h2
+    className="c0 c1"
+  >
+    Deleting a deployment group: 
+    <br />
+     
+    Wordpress Blog Example
+  </h2>
+  <p
+    className="c2 c3"
+  >
+    Deleting a deployment group will also remove all of the services and instances associated with that deployment group. Are you sure you want to continue?
+  </p>
+  <button
+    className="c4"
+    onClick={[Function]}
+  >
+    Cancel
+  </button>
+  <button
+    className="c5"
+    onClick={[Function]}
+  >
+    Delete deployment group
+  </button>
+</div>
+`;

packages/cp-frontend/test/unit/components/deployment-group/delete.js

@@ -0,0 +1,20 @@
+
+/**
+ * @jest-environment jsdom
+ */
+
+import React from 'react';
+import renderer from 'react-test-renderer';
+import 'jest-styled-components';
+
+import DeploymentGroupDelete from '@components/deployment-group/delete.js';
+import { deploymentGroup } from '../../mocks';
+
+it('renders <DeploymentGroupDelete /> without throwing', () => {
+  const tree = renderer
+    .create(
+      <DeploymentGroupDelete deploymentGroup={deploymentGroup} />
+    )
+    .toJSON();
+  expect(tree).toMatchSnapshot();
+});

packages/cp-frontend/test/unit/components/instances/__snapshots__/empty.js.snap

@@ -0,0 +1,62 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`renders <EmtpyInstances /> without throwing 1`] = `
+.c0 {
+  box-sizing: border-box;
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: -ms-flexbox;
+  display: flex;
+  -webkit-flex: 0 1 auto;
+  -ms-flex: 0 1 auto;
+  flex: 0 1 auto;
+  -webkit-flex-direction: row;
+  -ms-flex-direction: row;
+  flex-direction: row;
+  -webkit-flex-wrap: wrap;
+  -ms-flex-wrap: wrap;
+  flex-wrap: wrap;
+  margin-right: -0.5rem;
+  margin-left: -0.5rem;
+}
+
+.c1 {
+  box-sizing: border-box;
+  -webkit-flex: 0 0 auto;
+  -ms-flex: 0 0 auto;
+  flex: 0 0 auto;
+  padding-right: 0.5rem;
+  padding-left: 0.5rem;
+}
+
+.c2 {
+  font-family: "Libre Franklin",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,Helvetica,sans-serif;
+  font-weight: 400;
+  line-height: 1.5rem;
+  font-size: 0.9375rem;
+}
+
+@media only screen and (min-width:0em) {
+  .c1 {
+    -webkit-flex-basis: 100%;
+    -ms-flex-basis: 100%;
+    flex-basis: 100%;
+    max-width: 100%;
+    display: block;
+  }
+}
+
+<div
+  className="c0"
+>
+  <div
+    className="c1"
+  >
+    <p
+      className="c2"
+    >
+      You don't have any instances
+    </p>
+  </div>
+</div>
+`;

packages/cp-frontend/test/unit/components/instances/__snapshots__/list-item.js.snap

@@ -0,0 +1,284 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`renders <InstanceCard /> without throwing 1`] = `
+.c10 {
+  font-family: "Libre Franklin",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,Helvetica,sans-serif;
+  font-weight: 400;
+  font-size: 0.9375rem;
+  font-style: normal;
+  font-stretch: normal;
+  color: ;
+}
+
+.c8 {
+  fill: ;
+}
+
+.c3 {
+  font-size: 0.9375rem;
+  line-height: 1.5;
+  color: ;
+  font-family: "Libre Franklin",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,Helvetica,sans-serif;
+  font-weight: 600;
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: -ms-flexbox;
+  display: flex;
+  -webkit-flex-direction: row;
+  -ms-flex-direction: row;
+  flex-direction: row;
+  -webkit-box-pack: start;
+  -webkit-justify-content: flex-start;
+  -ms-flex-pack: start;
+  justify-content: flex-start;
+  -webkit-flex-grow: 2;
+  -ms-flex-grow: 2;
+  flex-grow: 2;
+  -webkit-flex-basis: 5.625rem;
+  -ms-flex-basis: 5.625rem;
+  flex-basis: 5.625rem;
+  width: 100%;
+  padding: 0.75rem 1.125rem 0 1.125rem;
+  -webkit-flex-grow: 6;
+  -ms-flex-grow: 6;
+  flex-grow: 6;
+  -webkit-flex-direction: column;
+  -ms-flex-direction: column;
+  flex-direction: column;
+  width: auto;
+  -webkit-box-pack: center;
+  -webkit-justify-content: center;
+  -ms-flex-pack: center;
+  justify-content: center;
+  padding: 0 1.125rem;
+}
+
+.c4 {
+  display: inline-block;
+  -webkit-flex-direction: column;
+  -ms-flex-direction: column;
+  flex-direction: column;
+  -webkit-box-pack: center;
+  -webkit-justify-content: center;
+  -ms-flex-pack: center;
+  justify-content: center;
+}
+
+.c5 {
+  font-family: "Libre Franklin",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,Helvetica,sans-serif;
+  font-weight: 400;
+  -webkit-flex-grow: 1;
+  -ms-flex-grow: 1;
+  flex-grow: 1;
+  -webkit-flex-basis: 5.625rem;
+  -ms-flex-basis: 5.625rem;
+  flex-basis: 5.625rem;
+}
+
+.c6 {
+  -webkit-box-pack: start;
+  -webkit-justify-content: flex-start;
+  -ms-flex-pack: start;
+  justify-content: flex-start;
+}
+
+.c1 {
+  box-sizing: border-box;
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: -ms-flexbox;
+  display: flex;
+  -webkit-flex: 0 1 auto;
+  -ms-flex: 0 1 auto;
+  flex: 0 1 auto;
+  -webkit-flex-direction: row;
+  -ms-flex-direction: row;
+  flex-direction: row;
+  -webkit-flex-wrap: wrap;
+  -ms-flex-wrap: wrap;
+  flex-wrap: wrap;
+  margin-right: -0.5rem;
+  margin-left: -0.5rem;
+  position: relative;
+  height: auto;
+  min-height: 7.875rem;
+  margin-bottom: 0.625rem;
+  border: 0.0625rem solid;
+  background-color: ;
+  box-shadow: 0 0.125rem 0 0 rgba(0,0,0,0.05);
+  -webkit-flex-direction: column;
+  -ms-flex-direction: column;
+  flex-direction: column;
+  margin-right: 0rem;
+  margin-left: 0rem;
+  min-height: auto;
+  height: 3rem;
+  margin-bottom: 1rem;
+  background-color: ;
+}
+
+.c2 {
+  box-sizing: border-box;
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: -ms-flexbox;
+  display: flex;
+  -webkit-flex: 0 1 auto;
+  -ms-flex: 0 1 auto;
+  flex: 0 1 auto;
+  -webkit-flex-direction: row;
+  -ms-flex-direction: row;
+  flex-direction: row;
+  -webkit-flex-wrap: wrap;
+  -ms-flex-wrap: wrap;
+  flex-wrap: wrap;
+  margin-right: -0.5rem;
+  margin-left: -0.5rem;
+  -webkit-flex: 1;
+  -ms-flex: 1;
+  flex: 1;
+  margin: 0;
+  height: auto;
+  padding-top: 0;
+  min-width: auto;
+  -webkit-flex-direction: row;
+  -ms-flex-direction: row;
+  flex-direction: row;
+}
+
+.c9 {
+  font-family: "Libre Franklin",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,Helvetica,sans-serif;
+  font-weight: 400;
+  font-size: 0.9375rem;
+  font-style: normal;
+  font-stretch: normal;
+  color: ;
+  display: inline-block;
+  margin-left: 1.5rem;
+}
+
+.c9::first-letter {
+  text-transform: capitalize;
+}
+
+.c7 {
+  position: absolute;
+}
+
+.c11 {
+  margin-right: 0.375rem;
+  width: 0.375rem;
+  height: 0.375rem;
+  border-radius: 0.1875rem;
+  display: inline-block;
+  background-color: ;
+}
+
+.c0 {
+  -webkit-flex-direction: row;
+  -ms-flex-direction: row;
+  flex-direction: row;
+  background-color: ;
+}
+
+.c0:not(:last-child) {
+  margin-bottom: 0;
+  box-shadow: none;
+  border-bottom-width: 0;
+}
+
+<div
+  className="c0 c1"
+  name="card"
+>
+  <div
+    className="c2"
+    name="card-view"
+  >
+    <div
+      className="c3"
+      name="container"
+    >
+      <span
+        className="c4"
+      >
+        wordpress_01
+      </span>
+    </div>
+    <div
+      className="c5 c3"
+      name="container"
+    >
+      <div
+        className="c6"
+      >
+        <div
+          onMouseOut={[Function]}
+          onMouseOver={[Function]}
+        >
+          <div>
+            <div
+              className="c7"
+              color="dark"
+            >
+              <svg
+                className="c8"
+                healthy="HEALTHY"
+                height="18"
+                viewBox="0 0 18 18"
+                width="18"
+                xmlns="http://www.w3.org/2000/svg"
+              >
+                <title>
+                  icon: state
+                </title>
+                <g
+                  fillRule="evenodd"
+                >
+                  <circle
+                    cx="9"
+                    cy="9"
+                    r="9"
+                  />
+                  <path
+                    d="M9.477 6.603l-.522.443-.444-.443a2.056 2.056 0 1 0-2.908 2.909l3.352 3.352 3.412-3.352c.803-.804.863-2.106.06-2.91a2.105 2.105 0 0 0-2.95 0z"
+                    fill="#FFF"
+                  />
+                </g>
+              </svg>
+            </div>
+            <label
+              className="c9"
+              color="dark"
+            >
+              healthy
+            </label>
+          </div>
+        </div>
+      </div>
+    </div>
+    <div
+      className="c5 c3"
+      name="container"
+    >
+      <div
+        className="c6"
+      >
+        <div
+          onMouseOut={[Function]}
+          onMouseOver={[Function]}
+        >
+          <label
+            className="c10"
+          >
+            <span
+              className="c11"
+            />
+            Running
+          </label>
+        </div>
+      </div>
+    </div>
+  </div>
+</div>
+`;

packages/cp-frontend/test/unit/components/instances/empty.js

@@ -0,0 +1,19 @@
+
+/**
+ * @jest-environment jsdom
+ */
+
+import React from 'react';
+import renderer from 'react-test-renderer';
+import 'jest-styled-components';
+
+import EmtpyInstances from '@components/instances/empty.js';
+
+it('renders <EmtpyInstances /> without throwing', () => {
+  const tree = renderer
+    .create(
+      <EmtpyInstances />
+    )
+    .toJSON();
+  expect(tree).toMatchSnapshot();
+});

packages/cp-frontend/test/unit/components/instances/list-item.js

@@ -0,0 +1,20 @@
+
+/**
+ * @jest-environment jsdom
+ */
+
+import React from 'react';
+import renderer from 'react-test-renderer';
+import 'jest-styled-components';
+
+import InstanceCard from '@components/instances/list-item.js';
+import { instance } from '../../mocks';
+
+it('renders <InstanceCard /> without throwing', () => {
+  const tree = renderer
+    .create(
+      <InstanceCard instance={instance} />
+    )
+    .toJSON();
+  expect(tree).toMatchSnapshot();
+});

packages/cp-frontend/test/unit/components/layout/__snapshots__/container.js.snap

@@ -0,0 +1,38 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`renders <Container /> without throwing 1`] = `
+.c0 {
+  margin-right: auto;
+  margin-left: auto;
+  padding-top: 1.1875rem;
+  -webkit-flex: 1 1 auto;
+  -ms-flex: 1 1 auto;
+  flex: 1 1 auto;
+  display: block;
+  -webkit-flex-flow: column;
+  -ms-flex-flow: column;
+  flex-flow: column;
+}
+
+@media only screen and (min-width:48em) {
+  .c0 {
+    width: 46rem;
+  }
+}
+
+@media only screen and (min-width:64em) {
+  .c0 {
+    width: 61rem;
+  }
+}
+
+@media only screen and (min-width:75em) {
+  .c0 {
+    width: 76rem;
+  }
+}
+
+<div
+  className="c0"
+/>
+`;

packages/cp-frontend/test/unit/components/layout/container.js

@@ -0,0 +1,18 @@
+/**
+ * @jest-environment jsdom
+ */
+
+import React from 'react';
+import renderer from 'react-test-renderer';
+import 'jest-styled-components';
+
+import Container from '@components/layout/container';
+
+it('renders <Container /> without throwing', () => {
+  const tree = renderer
+    .create(
+      <Container />
+    )
+    .toJSON();
+  expect(tree).toMatchSnapshot();
+});

packages/cp-frontend/test/unit/components/manifest/edit-or-create.js

@@ -0,0 +1,22 @@
+
+/**
+ * @jest-environment jsdom
+ */
+
+import React from 'react';
+import renderer from 'react-test-renderer';
+import 'jest-styled-components';
+
+import MEditor from '@components/manifest/edit-or-create.js';
+import { Router } from '../../mocks';
+
+xit('renders <MEditor /> without throwing', () => {
+  const tree = renderer
+    .create(
+      <Router>
+        <MEditor />
+      </Router>
+    )
+    .toJSON();
+  expect(tree).toMatchSnapshot();
+});

packages/cp-frontend/test/unit/components/messaging/__snapshots__/error.js.snap

@@ -0,0 +1,53 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`renders <Error /> without throwing 1`] = `
+.c4 {
+  font-family: "Libre Franklin",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,Helvetica,sans-serif;
+  font-weight: 400;
+  line-height: 1.5rem;
+  font-size: 0.9375rem;
+}
+
+.c0 {
+  position: relative;
+  margin-bottom: 0.75rem;
+  background-color: ;
+  box-shadow: 0 0.125rem 0 0 rgba(0,0,0,0.05);
+  border: 0.0625rem solid;
+}
+
+.c1 {
+  position: absolute;
+  top: 0;
+  left: 0;
+  width: 2.25rem;
+  height: 100%;
+  background-color: ;
+}
+
+.c2 {
+  padding: 0.75rem 0 0.84375rem 0;
+}
+
+.c3 {
+  margin: 0.09375rem 3.375rem 0 3.375rem;
+}
+
+<div
+  className="c0"
+>
+  <div
+    className="c1"
+    type="ERROR"
+  />
+  <div
+    className="c2"
+  >
+    <p
+      className="c3 c4"
+    >
+      Ooops, there's been an error
+    </p>
+  </div>
+</div>
+`;

packages/cp-frontend/test/unit/components/messaging/__snapshots__/loader.js.snap

@@ -0,0 +1,109 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`renders <Loader /> without throwing 1`] = `
+.c1 {
+  fill: ;
+  stroke: ;
+  -webkit-animation: iCqDak 1.5s ease-out 0s infinite;
+  animation: iCqDak 1.5s ease-out 0s infinite;
+}
+
+.c2 {
+  fill: ;
+  stroke: ;
+  -webkit-animation: iCqDak 1.5s ease-out 0s infinite;
+  animation: iCqDak 1.5s ease-out 0s infinite;
+  -webkit-animation-delay: 0.5s;
+  animation-delay: 0.5s;
+}
+
+.c3 {
+  fill: ;
+  stroke: ;
+  -webkit-animation: iCqDak 1.5s ease-out 0s infinite;
+  animation: iCqDak 1.5s ease-out 0s infinite;
+  -webkit-animation-delay: 1s;
+  animation-delay: 1s;
+}
+
+.c0 {
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: -ms-flexbox;
+  display: flex;
+  -webkit-flex-direction: column;
+  -ms-flex-direction: column;
+  flex-direction: column;
+  -webkit-flex-wrap: nowrap;
+  -ms-flex-wrap: nowrap;
+  flex-wrap: nowrap;
+  -webkit-box-pack: center;
+  -webkit-justify-content: center;
+  -ms-flex-pack: center;
+  justify-content: center;
+  -webkit-align-content: center;
+  -ms-flex-line-pack: center;
+  align-content: center;
+  -webkit-align-items: center;
+  -webkit-box-align: center;
+  -ms-flex-align: center;
+  align-items: center;
+  -webkit-flex: 1 0 auto;
+  -ms-flex: 1 0 auto;
+  flex: 1 0 auto;
+  -webkit-align-self: stretch;
+  -ms-flex-item-align: stretch;
+  align-self: stretch;
+}
+
+.c4 {
+  font-family: "Libre Franklin",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,Helvetica,sans-serif;
+  font-weight: 400;
+  line-height: 1.5rem;
+  font-size: 0.9375rem;
+  -webkit-flex: 0 0 auto;
+  -ms-flex: 0 0 auto;
+  flex: 0 0 auto;
+  -webkit-align-self: stretch;
+  -ms-flex-item-align: stretch;
+  align-self: stretch;
+  text-align: center;
+  margin-bottom: 0;
+}
+
+<div
+  className="c0"
+>
+  <svg
+    height="10"
+    width="28"
+  >
+    <rect
+      className="c1"
+      height="6"
+      width="6"
+      x="2"
+      y="2"
+    />
+    <rect
+      className="c2"
+      height="6"
+      width="6"
+      x="11"
+      y="2"
+    />
+    <rect
+      className="c3"
+      height="6"
+      width="6"
+      x="20"
+      y="2"
+    />
+  </svg>
+  <p
+    className="c4"
+  >
+    Loading...
+  </p>
+</div>
+`;

packages/cp-frontend/test/unit/components/messaging/__snapshots__/modal-error.js.snap

@@ -0,0 +1,160 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`renders <ModalError /> without throwing 1`] = `
+.c5 {
+  font-family: sans-serif;
+  font-size: 100%;
+  line-height: 1.15;
+  margin: 0;
+  overflow: visible;
+  text-transform: none;
+  -webkit-appearance: button;
+  -moz-appearance: button;
+  appearance: button;
+  min-width: 7.5rem;
+  box-sizing: border-box;
+  display: inline-block;
+  -webkit-box-pack: center;
+  -webkit-justify-content: center;
+  -ms-flex-pack: center;
+  justify-content: center;
+  -webkit-align-items: center;
+  -webkit-box-align: center;
+  -ms-flex-align: center;
+  align-items: center;
+  margin: 0;
+  padding: 0.9375rem 1.125rem;
+  position: relative;
+  font-family: "Libre Franklin",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,Helvetica,sans-serif;
+  font-weight: 400;
+  font-size: 0.9375rem;
+  text-align: center;
+  font-style: normal;
+  font-stretch: normal;
+  line-height: normal;
+  -webkit-letter-spacing: normal;
+  -moz-letter-spacing: normal;
+  -ms-letter-spacing: normal;
+  letter-spacing: normal;
+  text-decoration: none;
+  white-space: nowrap;
+  vertical-align: middle;
+  touch-action: manipulation;
+  cursor: pointer;
+  color: ;
+  background-image: none;
+  background-color: ;
+  border-radius: 0.25rem;
+  border: solid 0.0625rem;
+  color: ;
+  background-color: ;
+  border-color: ;
+}
+
+.c5::-moz-focus-inner,
+.c5[type="button"]::-moz-focus-inner,
+.c5[type="reset"]::-moz-focus-inner,
+.c5[type="submit"]::-moz-focus-inner {
+  border-style: none;
+  padding: 0;
+}
+
+.c5:-moz-focusring,
+.c5[type="button"]:-moz-focusring,
+.c5[type="reset"]:-moz-focusring,
+.c5[type="submit"]:-moz-focusring {
+  outline: 0.0625rem dotted ButtonText;
+}
+
+.c5:focus {
+  outline: 0;
+  text-decoration: none;
+  background-color: ;
+  border-color: ;
+}
+
+.c5:hover {
+  background-color: ;
+  border: solid 0.0625rem;
+}
+
+.c5:active,
+.c5:active:hover,
+.c5:active:focus {
+  background-image: none;
+  outline: 0;
+  background-color: ;
+  border-color: ;
+}
+
+.c5[disabled] {
+  cursor: not-allowed;
+  pointer-events: none;
+}
+
+.c5:focus {
+  background-color: ;
+  border-color: ;
+}
+
+.c5:hover {
+  background-color: ;
+  border-color: ;
+}
+
+.c5:active,
+.c5:active:hover,
+.c5:active:focus {
+  background-color: ;
+  border-color: ;
+}
+
+.c5 + button {
+  margin-left: 1.25rem;
+}
+
+.c2 {
+  font-family: "Libre Franklin",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,Helvetica,sans-serif;
+  font-weight: 500;
+  font-size: 1.5rem;
+}
+
+.c4 {
+  font-family: "Libre Franklin",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,Helvetica,sans-serif;
+  font-weight: 400;
+  line-height: 1.5rem;
+  font-size: 0.9375rem;
+}
+
+.c1 {
+  line-height: 1.25;
+  color: ;
+  margin: 0 0 0.75rem 0;
+}
+
+.c3 {
+  color: ;
+  margin: 0.75rem 0 1.875rem 0;
+}
+
+.c0 {
+  color: ;
+}
+
+<div>
+  <h2
+    className="c0 c1 c2"
+  />
+  <p
+    className="c3 c4"
+  >
+    Modal error message
+  </p>
+  <button
+    className="c5"
+    onClick={[Function]}
+  >
+    Close 
+  </button>
+</div>
+`;

packages/cp-frontend/test/unit/components/messaging/__snapshots__/warning.js.snap

@@ -0,0 +1,53 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`renders <Warning /> without throwing 1`] = `
+.c4 {
+  font-family: "Libre Franklin",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,Helvetica,sans-serif;
+  font-weight: 400;
+  line-height: 1.5rem;
+  font-size: 0.9375rem;
+}
+
+.c0 {
+  position: relative;
+  margin-bottom: 0.75rem;
+  background-color: ;
+  box-shadow: 0 0.125rem 0 0 rgba(0,0,0,0.05);
+  border: 0.0625rem solid;
+}
+
+.c1 {
+  position: absolute;
+  top: 0;
+  left: 0;
+  width: 2.25rem;
+  height: 100%;
+  background-color: ;
+}
+
+.c2 {
+  padding: 0.75rem 0 0.84375rem 0;
+}
+
+.c3 {
+  margin: 0.09375rem 3.375rem 0 3.375rem;
+}
+
+<div
+  className="c0"
+>
+  <div
+    className="c1"
+    type="WARNING"
+  />
+  <div
+    className="c2"
+  >
+    <p
+      className="c3 c4"
+    >
+      Warning message
+    </p>
+  </div>
+</div>
+`;

packages/cp-frontend/test/unit/components/messaging/error.js

@@ -0,0 +1,18 @@
+/**
+ * @jest-environment jsdom
+ */
+
+import React from 'react';
+import renderer from 'react-test-renderer';
+import 'jest-styled-components';
+
+import Error from '@components/messaging/error';
+
+it('renders <Error /> without throwing', () => {
+  const tree = renderer
+    .create(
+      <Error />
+    )
+    .toJSON();
+  expect(tree).toMatchSnapshot();
+});

packages/cp-frontend/test/unit/components/messaging/loader.js

@@ -0,0 +1,18 @@
+/**
+ * @jest-environment jsdom
+ */
+
+import React from 'react';
+import renderer from 'react-test-renderer';
+import 'jest-styled-components';
+
+import Loader from '@components/messaging/loader';
+
+it('renders <Loader /> without throwing', () => {
+  const tree = renderer
+    .create(
+      <Loader />
+    )
+    .toJSON();
+  expect(tree).toMatchSnapshot();
+});

packages/cp-frontend/test/unit/components/messaging/modal-error.js

@@ -0,0 +1,18 @@
+/**
+ * @jest-environment jsdom
+ */
+
+import React from 'react';
+import renderer from 'react-test-renderer';
+import 'jest-styled-components';
+
+import ModalError from '@components/messaging/modal-error';
+
+it('renders <ModalError /> without throwing', () => {
+  const tree = renderer
+    .create(
+      <ModalError message='Modal error message' onCloseClick={() => {}}/>
+    )
+    .toJSON();
+  expect(tree).toMatchSnapshot();
+});

packages/cp-frontend/test/unit/components/messaging/warning.js

@@ -0,0 +1,18 @@
+/**
+ * @jest-environment jsdom
+ */
+
+import React from 'react';
+import renderer from 'react-test-renderer';
+import 'jest-styled-components';
+
+import Warning from '@components/messaging/warning';
+
+it('renders <Warning /> without throwing', () => {
+  const tree = renderer
+    .create(
+      <Warning message='Warning message'/>
+    )
+    .toJSON();
+  expect(tree).toMatchSnapshot();
+});

packages/cp-frontend/test/unit/components/navigation/__snapshots__/breadcrumb.js.snap

@@ -0,0 +1,62 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`renders <Breadcrumb /> without throwing 1`] = `
+.c1 {
+  margin-right: auto;
+  margin-left: auto;
+}
+
+.c2 {
+  box-sizing: border-box;
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: -ms-flexbox;
+  display: flex;
+  -webkit-flex: 0 1 auto;
+  -ms-flex: 0 1 auto;
+  flex: 0 1 auto;
+  -webkit-flex-direction: row;
+  -ms-flex-direction: row;
+  flex-direction: row;
+  -webkit-flex-wrap: wrap;
+  -ms-flex-wrap: wrap;
+  flex-wrap: wrap;
+  margin-right: -0.5rem;
+  margin-left: -0.5rem;
+}
+
+.c0 {
+  border-bottom: solid 0.0625rem;
+}
+
+@media only screen and (min-width:48em) {
+  .c1 {
+    width: 46rem;
+  }
+}
+
+@media only screen and (min-width:64em) {
+  .c1 {
+    width: 61rem;
+  }
+}
+
+@media only screen and (min-width:75em) {
+  .c1 {
+    width: 76rem;
+  }
+}
+
+<div
+  className="c0"
+>
+  <div
+    className="c1"
+  >
+    <div
+      className="c2"
+      name="breadcrum"
+    />
+  </div>
+</div>
+`;

packages/cp-frontend/test/unit/components/navigation/__snapshots__/header.js.snap

@@ -1,18 +1,17 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
 exports[`renders <Header /> without throwing 1`] = `
-.iKAUmn {
+.c2 {
   font-family: "Libre Franklin",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,Helvetica,sans-serif;
   font-weight: 500;
   font-size: 1.5rem;
-  -webkit-text-transform: uppercase;
   text-transform: uppercase;
   color: ;
   font-size: 1.8125rem;
   margin: 0;
 }
 
-.eVSukw {
+.c1 {
   -webkit-flex: 1 1 auto;
   -ms-flex: 1 1 auto;
   flex: 1 1 auto;
@@ -25,7 +24,7 @@ exports[`renders <Header /> without throwing 1`] = `
   padding: 0.9375rem 0;
 }
 
-.facVTr {
+.c5 {
   font-family: "Libre Franklin",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,Helvetica,sans-serif;
   font-weight: 400;
   line-height: 1.5rem;
@@ -36,7 +35,7 @@ exports[`renders <Header /> without throwing 1`] = `
   margin: 0;
 }
 
-.hnPDgK {
+.c4 {
   -webkit-flex: 0 1 auto;
   -ms-flex: 0 1 auto;
   flex: 0 1 auto;
@@ -51,7 +50,7 @@ exports[`renders <Header /> without throwing 1`] = `
   max-width: 6.25rem;
 }
 
-.fAWQXE {
+.c0 {
   display: -webkit-box;
   display: -webkit-flex;
   display: -ms-flexbox;
@@ -80,38 +79,44 @@ exports[`renders <Header /> without throwing 1`] = `
   line-height: 1.5625rem;
 }
 
+.c3 {
+  border-style: none;
+  width: 5.4375rem;
+  height: 1.5625rem;
+}
+
 <div
-  className="header__Header-cywcLi fAWQXE"
+  className="c0"
 >
   <div
-    className="brand__Box-cSEQoZ eVSukw"
+    className="c1"
   >
     <h2
-      className="sc-kkGfuU iKAUmn"
+      className="c2"
     >
       <a
         href="/"
         onClick={[Function]}
       >
         <img
-          className="sc-hSdWYo iogIsy"
+          className="c3"
           src="test-file-mock"
         />
       </a>
     </h2>
   </div>
   <div
-    className="item__Box-hzIdkQ hnPDgK"
+    className="c4"
   >
     <p
-      className="sc-iAyFgw facVTr"
+      className="c5"
     />
   </div>
   <div
-    className="item__Box-hzIdkQ hnPDgK"
+    className="c4"
   >
     <p
-      className="sc-iAyFgw facVTr"
+      className="c5"
     />
   </div>
 </div>

packages/cp-frontend/test/unit/components/navigation/__snapshots__/menu.js.snap

@@ -0,0 +1,41 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`renders <Menu /> without throwing 1`] = `
+.c0 {
+  margin-right: auto;
+  margin-left: auto;
+  padding-top: 1.1875rem;
+}
+
+.c1 {
+  list-style-type: none;
+  padding: 0;
+  margin: 0;
+}
+
+@media only screen and (min-width:48em) {
+  .c0 {
+    width: 46rem;
+  }
+}
+
+@media only screen and (min-width:64em) {
+  .c0 {
+    width: 61rem;
+  }
+}
+
+@media only screen and (min-width:75em) {
+  .c0 {
+    width: 76rem;
+  }
+}
+
+<div
+  className="c0"
+>
+  <ul
+    className="c1"
+  />
+</div>
+`;

packages/cp-frontend/test/unit/components/navigation/__snapshots__/not-found.js.snap

@@ -0,0 +1,157 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`renders <NotFound /> without throwing 1`] = `
+.c6 {
+  display: inline-block;
+  box-sizing: border-box;
+  display: inline-block;
+  -webkit-box-pack: center;
+  -webkit-justify-content: center;
+  -ms-flex-pack: center;
+  justify-content: center;
+  -webkit-align-items: center;
+  -webkit-box-align: center;
+  -ms-flex-align: center;
+  align-items: center;
+  margin: 0;
+  padding: 0.9375rem 1.125rem;
+  position: relative;
+  font-family: "Libre Franklin",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,Helvetica,sans-serif;
+  font-weight: 400;
+  font-size: 0.9375rem;
+  text-align: center;
+  font-style: normal;
+  font-stretch: normal;
+  line-height: normal;
+  -webkit-letter-spacing: normal;
+  -moz-letter-spacing: normal;
+  -ms-letter-spacing: normal;
+  letter-spacing: normal;
+  text-decoration: none;
+  white-space: nowrap;
+  vertical-align: middle;
+  touch-action: manipulation;
+  cursor: pointer;
+  color: ;
+  background-image: none;
+  background-color: ;
+  border-radius: 0.25rem;
+  border: solid 0.0625rem;
+}
+
+.c6:focus {
+  outline: 0;
+  text-decoration: none;
+  background-color: ;
+  border-color: ;
+}
+
+.c6:hover {
+  background-color: ;
+  border: solid 0.0625rem;
+}
+
+.c6:active,
+.c6:active:hover,
+.c6:active:focus {
+  background-image: none;
+  outline: 0;
+  background-color: ;
+  border-color: ;
+}
+
+.c6[disabled] {
+  cursor: not-allowed;
+  pointer-events: none;
+}
+
+.c3 {
+  font-size: 2rem;
+  margin: 0.625rem 0;
+  font-family: "Libre Franklin",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,Helvetica,sans-serif;
+  font-weight: 500;
+  font-size: 2.25rem;
+  font-style: normal;
+  font-stretch: normal;
+  margin: 0;
+}
+
+.c5 {
+  font-family: "Libre Franklin",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,Helvetica,sans-serif;
+  font-weight: 400;
+  line-height: 1.5rem;
+  font-size: 0.9375rem;
+}
+
+.c0 {
+  margin-right: auto;
+  margin-left: auto;
+  padding-top: 1.1875rem;
+  -webkit-flex: 1 1 auto;
+  -ms-flex: 1 1 auto;
+  flex: 1 1 auto;
+  display: block;
+  -webkit-flex-flow: column;
+  -ms-flex-flow: column;
+  flex-flow: column;
+}
+
+.c1 {
+  margin-top: 3.75rem;
+}
+
+.c2 {
+  font-weight: normal;
+  font-size: 2rem;
+}
+
+.c4 {
+  margin-bottom: 1.875rem;
+  max-width: 30.625rem;
+}
+
+@media only screen and (min-width:48em) {
+  .c0 {
+    width: 46rem;
+  }
+}
+
+@media only screen and (min-width:64em) {
+  .c0 {
+    width: 61rem;
+  }
+}
+
+@media only screen and (min-width:75em) {
+  .c0 {
+    width: 76rem;
+  }
+}
+
+<div
+  className="c0"
+>
+  <div
+    className="c1"
+  >
+    <h1
+      className="c2 c3"
+    >
+      I have no memory of this place
+    </h1>
+    <p
+      className="c4 c5"
+    >
+      HTTP 404: We can’t find what you are looking for. Next time, always follow your nose.
+    </p>
+    <a
+      className="c6"
+      href="/deployment-groups"
+      onClick={[Function]}
+      primary={true}
+    >
+      Back to dashboard
+    </a>
+  </div>
+</div>
+`;

packages/cp-frontend/test/unit/components/navigation/__snapshots__/title.js.snap

@@ -0,0 +1,20 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`renders <Title /> without throwing 1`] = `
+.c0 {
+  font-family: "Libre Franklin",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,Helvetica,sans-serif;
+  font-weight: 500;
+  font-size: 1.5rem;
+  margin-top: 0.125rem;
+  -webkit-flex: 0 0 auto;
+  -ms-flex: 0 0 auto;
+  flex: 0 0 auto;
+  -webkit-align-self: stretch;
+  -ms-flex-item-align: stretch;
+  align-self: stretch;
+}
+
+<h2
+  className="c0"
+/>
+`;

packages/cp-frontend/test/unit/components/navigation/breadcrumb.js

@@ -0,0 +1,21 @@
+/**
+ * @jest-environment jsdom
+ */
+
+import React from 'react';
+import renderer from 'react-test-renderer';
+import 'jest-styled-components';
+
+import Breadcrumb from '@components/navigation/breadcrumb';
+import { Router } from '../../mocks';
+
+it('renders <Breadcrumb /> without throwing', () => {
+  const tree = renderer
+    .create(
+      <Router>
+        <Breadcrumb />
+      </Router>
+    )
+    .toJSON();
+  expect(tree).toMatchSnapshot();
+});

packages/cp-frontend/test/unit/components/navigation/header.js

@@ -1,5 +1,5 @@
 /**
- * @jest-environment node
+ * @jest-environment jsdom
  */
 
 import React from 'react';
@@ -7,7 +7,7 @@ import renderer from 'react-test-renderer';
 import 'jest-styled-components';
 
 import Header from '@components/navigation/header';
-import { Router } from './mocks';
+import { Router } from '../../mocks';
 
 it('renders <Header /> without throwing', () => {
   const tree = renderer
@@ -17,5 +17,5 @@ it('renders <Header /> without throwing', () => {
       </Router>
     )
     .toJSON();
-  expect(tree).toMatchStyledComponentsSnapshot();
+  expect(tree).toMatchSnapshot();
 });

packages/cp-frontend/test/unit/components/navigation/menu.js

@@ -0,0 +1,21 @@
+/**
+ * @jest-environment jsdom
+ */
+
+import React from 'react';
+import renderer from 'react-test-renderer';
+import 'jest-styled-components';
+
+import Menu from '@components/navigation/menu';
+import { Router } from '../../mocks';
+
+it('renders <Menu /> without throwing', () => {
+  const tree = renderer
+    .create(
+      <Router>
+        <Menu />
+      </Router>
+    )
+    .toJSON();
+  expect(tree).toMatchSnapshot();
+});

packages/cp-frontend/test/unit/components/navigation/not-found.js

@@ -0,0 +1,21 @@
+/**
+ * @jest-environment jsdom
+ */
+
+import React from 'react';
+import renderer from 'react-test-renderer';
+import 'jest-styled-components';
+
+import NotFound from '@components/navigation/not-found';
+import { Router } from '../../mocks';
+
+it('renders <NotFound /> without throwing', () => {
+  const tree = renderer
+    .create(
+      <Router>
+        <NotFound />
+      </Router>
+    )
+    .toJSON();
+  expect(tree).toMatchSnapshot();
+});

packages/cp-frontend/test/unit/components/navigation/title.js

@@ -0,0 +1,18 @@
+/**
+ * @jest-environment jsdom
+ */
+
+import React from 'react';
+import renderer from 'react-test-renderer';
+import 'jest-styled-components';
+
+import Title from '@components/navigation/title';
+
+it('renders <Title /> without throwing', () => {
+  const tree = renderer
+    .create(
+      <Title />
+    )
+    .toJSON();
+  expect(tree).toMatchSnapshot();
+});

packages/cp-frontend/test/unit/components/service/__snapshots__/delete.js.snap

@@ -0,0 +1,259 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`renders <Delete /> without throwing 1`] = `
+.c4 {
+  font-family: sans-serif;
+  font-size: 100%;
+  line-height: 1.15;
+  margin: 0;
+  overflow: visible;
+  text-transform: none;
+  -webkit-appearance: button;
+  -moz-appearance: button;
+  appearance: button;
+  min-width: 7.5rem;
+  box-sizing: border-box;
+  display: inline-block;
+  -webkit-box-pack: center;
+  -webkit-justify-content: center;
+  -ms-flex-pack: center;
+  justify-content: center;
+  -webkit-align-items: center;
+  -webkit-box-align: center;
+  -ms-flex-align: center;
+  align-items: center;
+  margin: 0;
+  padding: 0.9375rem 1.125rem;
+  position: relative;
+  font-family: "Libre Franklin",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,Helvetica,sans-serif;
+  font-weight: 400;
+  font-size: 0.9375rem;
+  text-align: center;
+  font-style: normal;
+  font-stretch: normal;
+  line-height: normal;
+  -webkit-letter-spacing: normal;
+  -moz-letter-spacing: normal;
+  -ms-letter-spacing: normal;
+  letter-spacing: normal;
+  text-decoration: none;
+  white-space: nowrap;
+  vertical-align: middle;
+  touch-action: manipulation;
+  cursor: pointer;
+  color: ;
+  background-image: none;
+  background-color: ;
+  border-radius: 0.25rem;
+  border: solid 0.0625rem;
+  color: ;
+  background-color: ;
+  border-color: ;
+}
+
+.c4::-moz-focus-inner,
+.c4[type="button"]::-moz-focus-inner,
+.c4[type="reset"]::-moz-focus-inner,
+.c4[type="submit"]::-moz-focus-inner {
+  border-style: none;
+  padding: 0;
+}
+
+.c4:-moz-focusring,
+.c4[type="button"]:-moz-focusring,
+.c4[type="reset"]:-moz-focusring,
+.c4[type="submit"]:-moz-focusring {
+  outline: 0.0625rem dotted ButtonText;
+}
+
+.c4:focus {
+  outline: 0;
+  text-decoration: none;
+  background-color: ;
+  border-color: ;
+}
+
+.c4:hover {
+  background-color: ;
+  border: solid 0.0625rem;
+}
+
+.c4:active,
+.c4:active:hover,
+.c4:active:focus {
+  background-image: none;
+  outline: 0;
+  background-color: ;
+  border-color: ;
+}
+
+.c4[disabled] {
+  cursor: not-allowed;
+  pointer-events: none;
+}
+
+.c4:focus {
+  background-color: ;
+  border-color: ;
+}
+
+.c4:hover {
+  background-color: ;
+  border-color: ;
+}
+
+.c4:active,
+.c4:active:hover,
+.c4:active:focus {
+  background-color: ;
+  border-color: ;
+}
+
+.c4 + button {
+  margin-left: 1.25rem;
+}
+
+.c5 {
+  font-family: sans-serif;
+  font-size: 100%;
+  line-height: 1.15;
+  margin: 0;
+  overflow: visible;
+  text-transform: none;
+  -webkit-appearance: button;
+  -moz-appearance: button;
+  appearance: button;
+  min-width: 7.5rem;
+  box-sizing: border-box;
+  display: inline-block;
+  -webkit-box-pack: center;
+  -webkit-justify-content: center;
+  -ms-flex-pack: center;
+  justify-content: center;
+  -webkit-align-items: center;
+  -webkit-box-align: center;
+  -ms-flex-align: center;
+  align-items: center;
+  margin: 0;
+  padding: 0.9375rem 1.125rem;
+  position: relative;
+  font-family: "Libre Franklin",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,Helvetica,sans-serif;
+  font-weight: 400;
+  font-size: 0.9375rem;
+  text-align: center;
+  font-style: normal;
+  font-stretch: normal;
+  line-height: normal;
+  -webkit-letter-spacing: normal;
+  -moz-letter-spacing: normal;
+  -ms-letter-spacing: normal;
+  letter-spacing: normal;
+  text-decoration: none;
+  white-space: nowrap;
+  vertical-align: middle;
+  touch-action: manipulation;
+  cursor: pointer;
+  color: ;
+  background-image: none;
+  background-color: ;
+  border-radius: 0.25rem;
+  border: solid 0.0625rem;
+}
+
+.c5::-moz-focus-inner,
+.c5[type="button"]::-moz-focus-inner,
+.c5[type="reset"]::-moz-focus-inner,
+.c5[type="submit"]::-moz-focus-inner {
+  border-style: none;
+  padding: 0;
+}
+
+.c5:-moz-focusring,
+.c5[type="button"]:-moz-focusring,
+.c5[type="reset"]:-moz-focusring,
+.c5[type="submit"]:-moz-focusring {
+  outline: 0.0625rem dotted ButtonText;
+}
+
+.c5:focus {
+  outline: 0;
+  text-decoration: none;
+  background-color: ;
+  border-color: ;
+}
+
+.c5:hover {
+  background-color: ;
+  border: solid 0.0625rem;
+}
+
+.c5:active,
+.c5:active:hover,
+.c5:active:focus {
+  background-image: none;
+  outline: 0;
+  background-color: ;
+  border-color: ;
+}
+
+.c5[disabled] {
+  cursor: not-allowed;
+  pointer-events: none;
+}
+
+.c5 + button {
+  margin-left: 1.25rem;
+}
+
+.c1 {
+  font-family: "Libre Franklin",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,Helvetica,sans-serif;
+  font-weight: 500;
+  font-size: 1.5rem;
+}
+
+.c3 {
+  font-family: "Libre Franklin",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,Helvetica,sans-serif;
+  font-weight: 400;
+  line-height: 1.5rem;
+  font-size: 0.9375rem;
+}
+
+.c0 {
+  line-height: 1.25;
+  color: ;
+  margin: 0 0 0.75rem 0;
+}
+
+.c2 {
+  color: ;
+  margin: 0.75rem 0 1.875rem 0;
+}
+
+<div>
+  <h2
+    className="c0 c1"
+  >
+    Deleting a service: 
+    <br />
+     
+    Nginx
+  </h2>
+  <p
+    className="c2 c3"
+  >
+    Deleting a service can lead to irreversible loss of data and failures in your application. Are you sure you want to continue?
+  </p>
+  <button
+    className="c4"
+    onClick={[Function]}
+  >
+    Cancel
+  </button>
+  <button
+    className="c5"
+    onClick={[Function]}
+  >
+    Delete service
+  </button>
+</div>
+`;

packages/cp-frontend/test/unit/components/service/__snapshots__/scale.js.snap

@@ -0,0 +1,565 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`renders <Scale /> without throwing 1`] = `
+.c13 {
+  font-family: sans-serif;
+  font-size: 100%;
+  line-height: 1.15;
+  margin: 0;
+  overflow: visible;
+  text-transform: none;
+  -webkit-appearance: button;
+  -moz-appearance: button;
+  appearance: button;
+  min-width: 7.5rem;
+  box-sizing: border-box;
+  display: inline-block;
+  -webkit-box-pack: center;
+  -webkit-justify-content: center;
+  -ms-flex-pack: center;
+  justify-content: center;
+  -webkit-align-items: center;
+  -webkit-box-align: center;
+  -ms-flex-align: center;
+  align-items: center;
+  margin: 0;
+  padding: 0.9375rem 1.125rem;
+  position: relative;
+  font-family: "Libre Franklin",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,Helvetica,sans-serif;
+  font-weight: 400;
+  font-size: 0.9375rem;
+  text-align: center;
+  font-style: normal;
+  font-stretch: normal;
+  line-height: normal;
+  -webkit-letter-spacing: normal;
+  -moz-letter-spacing: normal;
+  -ms-letter-spacing: normal;
+  letter-spacing: normal;
+  text-decoration: none;
+  white-space: nowrap;
+  vertical-align: middle;
+  touch-action: manipulation;
+  cursor: pointer;
+  color: ;
+  background-image: none;
+  background-color: ;
+  border-radius: 0.25rem;
+  border: solid 0.0625rem;
+  color: ;
+  background-color: ;
+  border-color: ;
+}
+
+.c13::-moz-focus-inner,
+.c13[type="button"]::-moz-focus-inner,
+.c13[type="reset"]::-moz-focus-inner,
+.c13[type="submit"]::-moz-focus-inner {
+  border-style: none;
+  padding: 0;
+}
+
+.c13:-moz-focusring,
+.c13[type="button"]:-moz-focusring,
+.c13[type="reset"]:-moz-focusring,
+.c13[type="submit"]:-moz-focusring {
+  outline: 0.0625rem dotted ButtonText;
+}
+
+.c13:focus {
+  outline: 0;
+  text-decoration: none;
+  background-color: ;
+  border-color: ;
+}
+
+.c13:hover {
+  background-color: ;
+  border: solid 0.0625rem;
+}
+
+.c13:active,
+.c13:active:hover,
+.c13:active:focus {
+  background-image: none;
+  outline: 0;
+  background-color: ;
+  border-color: ;
+}
+
+.c13[disabled] {
+  cursor: not-allowed;
+  pointer-events: none;
+}
+
+.c13:focus {
+  background-color: ;
+  border-color: ;
+}
+
+.c13:hover {
+  background-color: ;
+  border-color: ;
+}
+
+.c13:active,
+.c13:active:hover,
+.c13:active:focus {
+  background-color: ;
+  border-color: ;
+}
+
+.c13 + button {
+  margin-left: 1.25rem;
+}
+
+.c14 {
+  font-family: sans-serif;
+  font-size: 100%;
+  line-height: 1.15;
+  margin: 0;
+  overflow: visible;
+  text-transform: none;
+  -webkit-appearance: button;
+  -moz-appearance: button;
+  appearance: button;
+  min-width: 7.5rem;
+  box-sizing: border-box;
+  display: inline-block;
+  -webkit-box-pack: center;
+  -webkit-justify-content: center;
+  -ms-flex-pack: center;
+  justify-content: center;
+  -webkit-align-items: center;
+  -webkit-box-align: center;
+  -ms-flex-align: center;
+  align-items: center;
+  margin: 0;
+  padding: 0.9375rem 1.125rem;
+  position: relative;
+  font-family: "Libre Franklin",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,Helvetica,sans-serif;
+  font-weight: 400;
+  font-size: 0.9375rem;
+  text-align: center;
+  font-style: normal;
+  font-stretch: normal;
+  line-height: normal;
+  -webkit-letter-spacing: normal;
+  -moz-letter-spacing: normal;
+  -ms-letter-spacing: normal;
+  letter-spacing: normal;
+  text-decoration: none;
+  white-space: nowrap;
+  vertical-align: middle;
+  touch-action: manipulation;
+  cursor: pointer;
+  color: ;
+  background-image: none;
+  background-color: ;
+  border-radius: 0.25rem;
+  border: solid 0.0625rem;
+  color: ;
+  background-color: ;
+  border-color: ;
+  color: ;
+  background-color: ;
+  border-color: ;
+  box-shadow: 0 0.125rem 0 0 rgba(0,0,0,0.05);
+}
+
+.c14::-moz-focus-inner,
+.c14[type="button"]::-moz-focus-inner,
+.c14[type="reset"]::-moz-focus-inner,
+.c14[type="submit"]::-moz-focus-inner {
+  border-style: none;
+  padding: 0;
+}
+
+.c14:-moz-focusring,
+.c14[type="button"]:-moz-focusring,
+.c14[type="reset"]:-moz-focusring,
+.c14[type="submit"]:-moz-focusring {
+  outline: 0.0625rem dotted ButtonText;
+}
+
+.c14:focus {
+  outline: 0;
+  text-decoration: none;
+  background-color: ;
+  border-color: ;
+}
+
+.c14:hover {
+  background-color: ;
+  border: solid 0.0625rem;
+}
+
+.c14:active,
+.c14:active:hover,
+.c14:active:focus {
+  background-image: none;
+  outline: 0;
+  background-color: ;
+  border-color: ;
+}
+
+.c14[disabled] {
+  cursor: not-allowed;
+  pointer-events: none;
+}
+
+.c14:focus {
+  background-color: ;
+  border-color: ;
+}
+
+.c14:hover {
+  background-color: ;
+  border-color: ;
+}
+
+.c14:active,
+.c14:active:hover,
+.c14:active:focus {
+  background-color: ;
+  border-color: ;
+}
+
+.c14:focus {
+  background-color: ;
+  border-color: ;
+}
+
+.c14:hover {
+  background-color: ;
+  border-color: ;
+}
+
+.c14:active,
+.c14:active:hover,
+.c14:active:focus {
+  background-color: ;
+  border-color: ;
+}
+
+.c14 + button {
+  margin-left: 1.25rem;
+}
+
+.c1 {
+  font-family: "Libre Franklin",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,Helvetica,sans-serif;
+  font-weight: 500;
+  font-size: 1.5rem;
+}
+
+.c3 {
+  font-family: "Libre Franklin",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,Helvetica,sans-serif;
+  font-weight: 400;
+  line-height: 1.5rem;
+  font-size: 0.9375rem;
+}
+
+.c12 {
+  vertical-align: middle;
+}
+
+.c10 {
+  vertical-align: middle;
+}
+
+.c0 {
+  line-height: 1.25;
+  color: ;
+  margin: 0 0 0.75rem 0;
+}
+
+.c2 {
+  color: ;
+  margin: 0.75rem 0 1.875rem 0;
+}
+
+.c9 {
+  font-family: sans-serif;
+  font-size: 100%;
+  line-height: 1.15;
+  margin: 0;
+  overflow: visible;
+  text-transform: none;
+  -webkit-appearance: button;
+  -moz-appearance: button;
+  appearance: button;
+  border-radius: 0.25rem;
+  border: solid 0.0625rem;
+  background-color: ;
+  box-sizing: border-box;
+  display: inline-block;
+  -webkit-box-pack: center;
+  -webkit-justify-content: center;
+  -ms-flex-pack: center;
+  justify-content: center;
+  -webkit-align-items: center;
+  -webkit-box-align: center;
+  -ms-flex-align: center;
+  align-items: center;
+  padding: 0.9375rem 1.125rem;
+  position: relative;
+  text-align: center;
+  line-height: normal;
+  vertical-align: middle;
+  touch-action: manipulation;
+  min-width: 0;
+  cursor: pointer;
+}
+
+.c9::-moz-focus-inner,
+.c9[type="button"]::-moz-focus-inner,
+.c9[type="reset"]::-moz-focus-inner,
+.c9[type="submit"]::-moz-focus-inner {
+  border-style: none;
+  padding: 0;
+}
+
+.c9:-moz-focusring,
+.c9[type="button"]:-moz-focusring,
+.c9[type="reset"]:-moz-focusring,
+.c9[type="submit"]:-moz-focusring {
+  outline: 0.0625rem dotted ButtonText;
+}
+
+.c9 > svg {
+  fill: ;
+}
+
+.c9:focus {
+  outline: 0;
+  background-color: ;
+  border-color: ;
+}
+
+.c9:hover {
+  background-color: ;
+  border-color: ;
+}
+
+.c9:focus,
+.c9:hover > svg {
+  fill: ;
+}
+
+.c9:active,
+.c9:active:hover,
+.c9:active:focus {
+  outline: 0;
+  background-color: ;
+  border-color: ;
+}
+
+.c9:active,
+.c9:active:hover,
+.c9:active:focus > svg {
+  fill: ;
+}
+
+.c9[disabled] {
+  cursor: not-allowed;
+  pointer-events: none;
+  color: ;
+  background-color: ;
+  border-color: ;
+}
+
+.c9[disabled] > svg {
+  fill: ;
+}
+
+.c9[disabled]:focus,
+.c9[disabled]:hover,
+.c9[disabled]:active,
+.c9[disabled]:active:hover,
+.c9[disabled]:active:focus {
+  background-color: ;
+  border-color: ;
+}
+
+.c9[disabled]:focus,
+.c9[disabled]:hover,
+.c9[disabled]:active,
+.c9[disabled]:active:hover,
+.c9[disabled]:active:focus > svg {
+  fill: ;
+}
+
+.c11 {
+  margin-left: 0.375rem;
+}
+
+.c4 {
+  padding: 0.35em 0.75em 0.625em;
+  display: inline-block;
+  margin: 0;
+  padding: 0;
+  border: none;
+  overflow: hidden;
+  width: 100%;
+  height: auto;
+  -webkit-margin-start: 0;
+  -webkit-margin-end: 0;
+  -webkit-padding-before: 0;
+  -webkit-padding-start: 0;
+  -webkit-padding-end: 0;
+  -webkit-padding-after: 0;
+}
+
+.c5 {
+  font-family: "Libre Franklin",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,Helvetica,sans-serif;
+  font-weight: 400;
+  font-size: 0.9375rem;
+  font-style: normal;
+  font-stretch: normal;
+  color: ;
+  float: right;
+}
+
+.c6 {
+  margin-bottom: 1.5rem;
+}
+
+.c8 {
+  box-sizing: border-box;
+  width: 100%;
+  height: 3rem;
+  margin-bottom: 0.5rem;
+  margin-top: 0.5rem;
+  padding: 0.8125rem 1.125rem;
+  border-radius: 0.25rem;
+  background-color: ;
+  border: 0.0625rem solid;
+  font-size: 0.9375rem;
+  line-height: normal !important;
+  font-weight: 400;
+  font-style: normal;
+  font-stretch: normal;
+  color: ;
+  -webkit-appearance: none;
+  -moz-appearance: none;
+  appearance: none;
+  outline: 0;
+}
+
+.c8:focus {
+  border-color: ;
+  outline: 0;
+}
+
+.c7 {
+  width: 7.5rem;
+  margin: 0 0.75rem 0 0;
+  vertical-align: middle;
+}
+
+@media only screen and (min-width:48.0625rem) {
+  .c5 {
+    text-align: right;
+  }
+}
+
+<form
+  onSubmit={[Function]}
+>
+  <h2
+    className="c0 c1"
+  >
+    Scaling a service: 
+    <br />
+    Nginx
+  </h2>
+  <p
+    className="c2 c3"
+  >
+    Choose how many instances of a service you want to have running.
+  </p>
+  <fieldset
+    className="c4"
+    style={undefined}
+  >
+    <div>
+      <label
+        className="c5"
+        form="testScaleForm"
+      />
+      <div
+        className="c6"
+      >
+        <input
+          className="c7 c8"
+          id="bmXOIS"
+          name="replicas"
+          onBlur={[Function]}
+          onChange={[Function]}
+          onDragStart={[Function]}
+          onDrop={[Function]}
+          onFocus={[Function]}
+          value=""
+        />
+        <button
+          className="c9"
+          onClick={[Function]}
+        >
+          <svg
+            className="c10"
+            height="2"
+            verticalAlign="middle"
+            viewBox="0 0 8 2"
+            width="8"
+            xmlns="http://www.w3.org/2000/svg"
+          >
+            <title>
+              icon: plus
+            </title>
+            <path
+              d="M0 0h8v2H0z"
+              fill="#494949"
+              fillRule="evenodd"
+            />
+          </svg>
+        </button>
+        <button
+          className="c11 c9"
+          onClick={[Function]}
+        >
+          <svg
+            className="c12"
+            height="8"
+            verticalAlign="middle"
+            viewBox="0 0 8 8"
+            width="8"
+            xmlns="http://www.w3.org/2000/svg"
+          >
+            <title>
+              icon: plus
+            </title>
+            <path
+              d="M3 3H0v2h3v3h2V5h3V3H5V0H3v3z"
+              fill="#494949"
+              fillRule="evenodd"
+            />
+          </svg>
+        </button>
+      </div>
+    </div>
+  </fieldset>
+  <button
+    className="c13"
+    onClick={[Function]}
+  >
+    Cancel
+  </button>
+  <button
+    className="c14"
+    disabled={true}
+    type="submit"
+  >
+    Scale
+  </button>
+</form>
+`;

packages/cp-frontend/test/unit/components/service/delete.js

@@ -0,0 +1,19 @@
+/**
+ * @jest-environment jsdom
+ */
+
+import React from 'react';
+import renderer from 'react-test-renderer';
+import 'jest-styled-components';
+import { service } from '../../mocks';
+
+import Delete from '@components/service/delete';
+
+it('renders <Delete /> without throwing', () => {
+  const tree = renderer
+    .create(
+      <Delete service={service} />
+    )
+    .toJSON();
+  expect(tree).toMatchSnapshot();
+});

packages/cp-frontend/test/unit/components/service/scale.js

@@ -0,0 +1,24 @@
+/**
+ * @jest-environment jsdom
+ */
+
+import React from 'react';
+import renderer from 'react-test-renderer';
+import 'jest-styled-components';
+import { reduxForm } from 'redux-form';
+import { Store, service } from '../../mocks';
+
+import Scale from '@components/service/scale';
+
+const TestScaleForm = reduxForm({ form: 'testScaleForm' })(Scale);
+
+it('renders <Scale /> without throwing', () => {
+  const tree = renderer
+    .create(
+      <Store>
+        <TestScaleForm service={service} />
+      </Store>
+    )
+    .toJSON();
+  expect(tree).toMatchSnapshot();
+});

packages/cp-frontend/test/unit/components/services/__snapshots__/empty.js.snap

@@ -0,0 +1,336 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`renders <EmptyServices /> without throwing 1`] = `
+.c1 {
+  box-sizing: border-box;
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: -ms-flexbox;
+  display: flex;
+  -webkit-flex: 0 1 auto;
+  -ms-flex: 0 1 auto;
+  flex: 0 1 auto;
+  -webkit-flex-direction: row;
+  -ms-flex-direction: row;
+  flex-direction: row;
+  -webkit-flex-wrap: wrap;
+  -ms-flex-wrap: wrap;
+  flex-wrap: wrap;
+  margin-right: -0.5rem;
+  margin-left: -0.5rem;
+}
+
+.c2 {
+  box-sizing: border-box;
+  -webkit-flex: 0 0 auto;
+  -ms-flex: 0 0 auto;
+  flex: 0 0 auto;
+  padding-right: 0.5rem;
+  padding-left: 0.5rem;
+}
+
+.c5 {
+  box-sizing: border-box;
+  -webkit-flex: 0 0 auto;
+  -ms-flex: 0 0 auto;
+  flex: 0 0 auto;
+  padding-right: 0.5rem;
+  padding-left: 0.5rem;
+}
+
+.c9 {
+  box-sizing: border-box;
+  -webkit-flex: 0 0 auto;
+  -ms-flex: 0 0 auto;
+  flex: 0 0 auto;
+  padding-right: 0.5rem;
+  padding-left: 0.5rem;
+}
+
+.c0 {
+  margin-right: auto;
+  margin-left: auto;
+  padding-top: 1.1875rem;
+  -webkit-flex: 1 1 auto;
+  -ms-flex: 1 1 auto;
+  flex: 1 1 auto;
+  display: block;
+  -webkit-flex-flow: column;
+  -ms-flex-flow: column;
+  flex-flow: column;
+}
+
+.c8 {
+  font-family: sans-serif;
+  font-size: 100%;
+  line-height: 1.15;
+  margin: 0;
+  overflow: visible;
+  text-transform: none;
+  -webkit-appearance: button;
+  -moz-appearance: button;
+  appearance: button;
+  min-width: 7.5rem;
+  box-sizing: border-box;
+  display: inline-block;
+  -webkit-box-pack: center;
+  -webkit-justify-content: center;
+  -ms-flex-pack: center;
+  justify-content: center;
+  -webkit-align-items: center;
+  -webkit-box-align: center;
+  -ms-flex-align: center;
+  align-items: center;
+  margin: 0;
+  padding: 0.9375rem 1.125rem;
+  position: relative;
+  font-family: "Libre Franklin",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,Helvetica,sans-serif;
+  font-weight: 400;
+  font-size: 0.9375rem;
+  text-align: center;
+  font-style: normal;
+  font-stretch: normal;
+  line-height: normal;
+  -webkit-letter-spacing: normal;
+  -moz-letter-spacing: normal;
+  -ms-letter-spacing: normal;
+  letter-spacing: normal;
+  text-decoration: none;
+  white-space: nowrap;
+  vertical-align: middle;
+  touch-action: manipulation;
+  cursor: pointer;
+  color: ;
+  background-image: none;
+  background-color: ;
+  border-radius: 0.25rem;
+  border: solid 0.0625rem;
+  color: ;
+  background-color: ;
+  border-color: ;
+}
+
+.c8::-moz-focus-inner,
+.c8[type="button"]::-moz-focus-inner,
+.c8[type="reset"]::-moz-focus-inner,
+.c8[type="submit"]::-moz-focus-inner {
+  border-style: none;
+  padding: 0;
+}
+
+.c8:-moz-focusring,
+.c8[type="button"]:-moz-focusring,
+.c8[type="reset"]:-moz-focusring,
+.c8[type="submit"]:-moz-focusring {
+  outline: 0.0625rem dotted ButtonText;
+}
+
+.c8:focus {
+  outline: 0;
+  text-decoration: none;
+  background-color: ;
+  border-color: ;
+}
+
+.c8:hover {
+  background-color: ;
+  border: solid 0.0625rem;
+}
+
+.c8:active,
+.c8:active:hover,
+.c8:active:focus {
+  background-image: none;
+  outline: 0;
+  background-color: ;
+  border-color: ;
+}
+
+.c8[disabled] {
+  cursor: not-allowed;
+  pointer-events: none;
+}
+
+.c8:focus {
+  background-color: ;
+  border-color: ;
+}
+
+.c8:hover {
+  background-color: ;
+  border-color: ;
+}
+
+.c8:active,
+.c8:active:hover,
+.c8:active:focus {
+  background-color: ;
+  border-color: ;
+}
+
+.c8 + button {
+  margin-left: 1.25rem;
+}
+
+.c3 {
+  font-family: "Libre Franklin",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,Helvetica,sans-serif;
+  font-weight: 500;
+  font-size: 1.5rem;
+}
+
+.c6 {
+  font-family: "Libre Franklin",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,Helvetica,sans-serif;
+  font-weight: 500;
+  font-size: 0.9375rem;
+}
+
+.c7 {
+  font-family: "Libre Franklin",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,Helvetica,sans-serif;
+  font-weight: 400;
+  line-height: 1.5rem;
+  font-size: 0.9375rem;
+}
+
+.c4 {
+  box-shadow: 0 2px 0 0 rgba(0,0,0,0.05);
+  border: solid 1px #d8d8d8;
+  padding: 0.375rem 1.125rem 1.5rem;
+}
+
+.c4 + .c4 {
+  margin-top: 1.5rem;
+}
+
+@media only screen and (min-width:64em) {
+  .c5 {
+    -webkit-flex-basis: 83.33333333333334%;
+    -ms-flex-basis: 83.33333333333334%;
+    flex-basis: 83.33333333333334%;
+    max-width: 83.33333333333334%;
+    display: block;
+  }
+}
+
+@media only screen and (min-width:64em) {
+  .c9 {
+    -webkit-flex-basis: 75%;
+    -ms-flex-basis: 75%;
+    flex-basis: 75%;
+    max-width: 75%;
+    display: block;
+  }
+}
+
+@media only screen and (min-width:48em) {
+  .c0 {
+    width: 46rem;
+  }
+}
+
+@media only screen and (min-width:64em) {
+  .c0 {
+    width: 61rem;
+  }
+}
+
+@media only screen and (min-width:75em) {
+  .c0 {
+    width: 76rem;
+  }
+}
+
+<div
+  className="c0"
+>
+  <div
+    className="c1"
+  >
+    <div
+      className="c2"
+    >
+      <h2
+        className="c3"
+      >
+        Services
+      </h2>
+      <div
+        className="c1"
+      >
+        <div
+          className="c2"
+        >
+          <div
+            className="c4"
+          >
+            <div
+              className="c1"
+            >
+              <div
+                className="c5"
+              >
+                <h3
+                  className="c6"
+                >
+                  Import your services
+                </h3>
+                <p
+                  className="c7"
+                >
+                  You can import your services from a Git repository hosting service. Learn more.
+                </p>
+                <button
+                  className="c8"
+                >
+                  from GitHub
+                </button>
+                <button
+                  className="c8"
+                >
+                  from GitLab
+                </button>
+                <button
+                  className="c8"
+                >
+                  from BitBucket
+                </button>
+              </div>
+            </div>
+          </div>
+          <div
+            className="c4"
+          >
+            <div
+              className="c1"
+            >
+              <div
+                className="c9"
+              >
+                <h3
+                  className="c6"
+                >
+                  Alternatively, you can upload or edit manifest file.
+                </h3>
+                <p
+                  className="c7"
+                >
+                  Manifest is a file describing your services. It is similar to Docker Compose file. You can upload a file from you local machine or edit it manually. Learn more.
+                </p>
+                <button
+                  className="c8"
+                >
+                  Upload manifest
+                </button>
+                <button
+                  className="c8"
+                >
+                  Edit manifest
+                </button>
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+</div>
+`;

packages/cp-frontend/test/unit/components/services/__snapshots__/list-item.js.snap

@@ -0,0 +1,762 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`renders <ServiceListItem /> without throwing 1`] = `
+.c7 {
+  color: ;
+  color: ;
+  text-decoration: none;
+}
+
+.c14 {
+  font-family: sans-serif;
+  font-size: 100%;
+  line-height: 1.15;
+  margin: 0;
+  overflow: visible;
+  text-transform: none;
+  -webkit-appearance: button;
+  -moz-appearance: button;
+  appearance: button;
+  min-width: 7.5rem;
+  box-sizing: border-box;
+  display: inline-block;
+  -webkit-box-pack: center;
+  -webkit-justify-content: center;
+  -ms-flex-pack: center;
+  justify-content: center;
+  -webkit-align-items: center;
+  -webkit-box-align: center;
+  -ms-flex-align: center;
+  align-items: center;
+  margin: 0;
+  padding: 0.9375rem 1.125rem;
+  position: relative;
+  font-family: "Libre Franklin",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,Helvetica,sans-serif;
+  font-weight: 400;
+  font-size: 0.9375rem;
+  text-align: center;
+  font-style: normal;
+  font-stretch: normal;
+  line-height: normal;
+  -webkit-letter-spacing: normal;
+  -moz-letter-spacing: normal;
+  -ms-letter-spacing: normal;
+  letter-spacing: normal;
+  text-decoration: none;
+  white-space: nowrap;
+  vertical-align: middle;
+  touch-action: manipulation;
+  cursor: pointer;
+  color: ;
+  background-image: none;
+  background-color: ;
+  border-radius: 0.25rem;
+  border: solid 0.0625rem;
+  border-radius: 0;
+}
+
+.c14::-moz-focus-inner,
+.c14[type="button"]::-moz-focus-inner,
+.c14[type="reset"]::-moz-focus-inner,
+.c14[type="submit"]::-moz-focus-inner {
+  border-style: none;
+  padding: 0;
+}
+
+.c14:-moz-focusring,
+.c14[type="button"]:-moz-focusring,
+.c14[type="reset"]:-moz-focusring,
+.c14[type="submit"]:-moz-focusring {
+  outline: 0.0625rem dotted ButtonText;
+}
+
+.c14:focus {
+  outline: 0;
+  text-decoration: none;
+  background-color: ;
+  border-color: ;
+}
+
+.c14:hover {
+  background-color: ;
+  border: solid 0.0625rem;
+}
+
+.c14:active,
+.c14:active:hover,
+.c14:active:focus {
+  background-image: none;
+  outline: 0;
+  background-color: ;
+  border-color: ;
+}
+
+.c14[disabled] {
+  cursor: not-allowed;
+  pointer-events: none;
+}
+
+.c14 + button {
+  margin-left: 1.25rem;
+}
+
+.c4 {
+  font-size: 0.9375rem;
+  line-height: 1.5;
+  color: ;
+  font-family: "Libre Franklin",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,Helvetica,sans-serif;
+  font-weight: 600;
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: -ms-flexbox;
+  display: flex;
+  -webkit-flex-direction: row;
+  -ms-flex-direction: row;
+  flex-direction: row;
+  -webkit-box-pack: start;
+  -webkit-justify-content: flex-start;
+  -ms-flex-pack: start;
+  justify-content: flex-start;
+  -webkit-flex-grow: 2;
+  -ms-flex-grow: 2;
+  flex-grow: 2;
+  -webkit-flex-basis: 5.625rem;
+  -ms-flex-basis: 5.625rem;
+  flex-basis: 5.625rem;
+  width: 100%;
+  padding: 0.75rem 1.125rem 0 1.125rem;
+  color: ;
+  -webkit-flex-grow: 6;
+  -ms-flex-grow: 6;
+  flex-grow: 6;
+  -webkit-flex-direction: column;
+  -ms-flex-direction: column;
+  flex-direction: column;
+  width: auto;
+  -webkit-box-pack: center;
+  -webkit-justify-content: center;
+  -ms-flex-pack: center;
+  justify-content: center;
+  padding: 0 1.125rem;
+}
+
+.c19 {
+  font-size: 0.9375rem;
+  line-height: 1.5;
+  color: ;
+  font-family: "Libre Franklin",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,Helvetica,sans-serif;
+  font-weight: 600;
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: -ms-flexbox;
+  display: flex;
+  -webkit-flex-direction: row;
+  -ms-flex-direction: row;
+  flex-direction: row;
+  -webkit-box-pack: start;
+  -webkit-justify-content: flex-start;
+  -ms-flex-pack: start;
+  justify-content: flex-start;
+  -webkit-flex-grow: 2;
+  -ms-flex-grow: 2;
+  flex-grow: 2;
+  -webkit-flex-basis: 5.625rem;
+  -ms-flex-basis: 5.625rem;
+  flex-basis: 5.625rem;
+  width: 100%;
+  padding: 0.75rem 1.125rem 0 1.125rem;
+}
+
+.c8 {
+  font-family: "Libre Franklin",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,Helvetica,sans-serif;
+  font-weight: 400;
+  -webkit-flex-grow: 1;
+  -ms-flex-grow: 1;
+  flex-grow: 1;
+  -webkit-flex-basis: 5.625rem;
+  -ms-flex-basis: 5.625rem;
+  flex-basis: 5.625rem;
+}
+
+.c18 {
+  font-family: "Libre Franklin",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,Helvetica,sans-serif;
+  font-weight: 400;
+  -webkit-flex-grow: 1;
+  -ms-flex-grow: 1;
+  flex-grow: 1;
+  -webkit-flex-basis: 5.625rem;
+  -ms-flex-basis: 5.625rem;
+  flex-basis: 5.625rem;
+  padding-bottom: 0.75rem;
+}
+
+.c9 {
+  -webkit-box-pack: start;
+  -webkit-justify-content: flex-start;
+  -ms-flex-pack: start;
+  justify-content: flex-start;
+}
+
+.c0 {
+  box-sizing: border-box;
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: -ms-flexbox;
+  display: flex;
+  -webkit-flex: 0 1 auto;
+  -ms-flex: 0 1 auto;
+  flex: 0 1 auto;
+  -webkit-flex-direction: row;
+  -ms-flex-direction: row;
+  flex-direction: row;
+  -webkit-flex-wrap: wrap;
+  -ms-flex-wrap: wrap;
+  flex-wrap: wrap;
+  margin-right: -0.5rem;
+  margin-left: -0.5rem;
+  position: relative;
+  height: auto;
+  min-height: 7.875rem;
+  margin-bottom: 0.625rem;
+  border: 0.0625rem solid;
+  background-color: ;
+  box-shadow: 0 0.125rem 0 0 rgba(0,0,0,0.05);
+  -webkit-flex-direction: column;
+  -ms-flex-direction: column;
+  flex-direction: column;
+  margin-right: 0rem;
+  margin-left: 0rem;
+}
+
+.c3 {
+  box-sizing: border-box;
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: -ms-flexbox;
+  display: flex;
+  -webkit-flex: 0 1 auto;
+  -ms-flex: 0 1 auto;
+  flex: 0 1 auto;
+  -webkit-flex-direction: row;
+  -ms-flex-direction: row;
+  flex-direction: row;
+  -webkit-flex-wrap: wrap;
+  -ms-flex-wrap: wrap;
+  flex-wrap: wrap;
+  margin-right: -0.5rem;
+  margin-left: -0.5rem;
+  position: relative;
+  height: auto;
+  min-height: 7.875rem;
+  margin-bottom: 0.625rem;
+  border: 0.0625rem solid;
+  background-color: ;
+  box-shadow: 0 0.125rem 0 0 rgba(0,0,0,0.05);
+  -webkit-flex-direction: column;
+  -ms-flex-direction: column;
+  flex-direction: column;
+  margin-right: 0rem;
+  margin-left: 0rem;
+  min-height: auto;
+  height: 3rem;
+  margin-bottom: 1rem;
+  box-shadow: 0 0.125rem 0 0 rgba(0,0,0,0.1);
+}
+
+.c2 {
+  position: absolute;
+  -webkit-flex-direction: row;
+  -ms-flex-direction: row;
+  flex-direction: row;
+  background-color: ;
+  border: solid 0.0625rem;
+  box-shadow: none;
+  width: calc(100% + 0.125rem);
+  margin: -0.0625rem -0.0625rem 0 -0.0625rem;
+}
+
+.c17 {
+  box-sizing: border-box;
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: -ms-flexbox;
+  display: flex;
+  -webkit-flex: 0 1 auto;
+  -ms-flex: 0 1 auto;
+  flex: 0 1 auto;
+  -webkit-flex-direction: row;
+  -ms-flex-direction: row;
+  flex-direction: row;
+  -webkit-flex-wrap: wrap;
+  -ms-flex-wrap: wrap;
+  flex-wrap: wrap;
+  margin-right: -0.5rem;
+  margin-left: -0.5rem;
+  -webkit-flex: 1;
+  -ms-flex: 1;
+  flex: 1;
+  margin: 0;
+  height: auto;
+  padding-top: 0;
+  min-width: auto;
+  -webkit-flex-direction: row;
+  -ms-flex-direction: row;
+  flex-direction: row;
+}
+
+.c12 {
+  display: block;
+  -webkit-flex: 0 0 2.9375rem;
+  -ms-flex: 0 0 2.9375rem;
+  flex: 0 0 2.9375rem;
+  border-left: 0.0625rem solid;
+  box-sizing: border-box;
+  border-left-color: ;
+}
+
+.c13 {
+  position: relative;
+  border-width: 0;
+  box-shadow: none;
+  width: 100%;
+  min-width: 2.875rem !important;
+  height: 7.75rem;
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: -ms-flexbox;
+  display: flex;
+  -webkit-box-pack: center;
+  -webkit-justify-content: center;
+  -ms-flex-pack: center;
+  justify-content: center;
+  -webkit-align-items: center;
+  -webkit-box-align: center;
+  -ms-flex-align: center;
+  align-items: center;
+  overflow-x: visible;
+  overflow-y: visible;
+  height: 2.875rem;
+}
+
+.c13:focus {
+  border-width: 0;
+}
+
+.c13:hover {
+  border-width: 0;
+}
+
+.c13:active,
+.c13:active:hover,
+.c13:active:focus {
+  border-width: 0;
+}
+
+.c15 {
+  position: absolute;
+  left: 50%;
+  top: 35%;
+}
+
+.c16 {
+  margin: 0 0 0.125rem -0.125rem;
+  border-radius: 50%;
+  background-color: ;
+  width: 0.25rem;
+  height: 0.25rem;
+}
+
+.c11 {
+  font-family: "Libre Franklin",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,Helvetica,sans-serif;
+  font-weight: 400;
+  font-size: 0.9375rem;
+  font-style: normal;
+  font-stretch: normal;
+  color: ;
+  display: inline-block;
+  color: undefined;
+  margin-left: 1.5rem;
+}
+
+.c11::first-letter {
+  text-transform: capitalize;
+}
+
+.c10 {
+  position: absolute;
+}
+
+.c10 > svg {
+  fill: undefined;
+}
+
+.c20 {
+  display: inline-block;
+  margin: 0 0 0.9375rem 0;
+  height: 3.375rem;
+  width: 12.5rem;
+}
+
+.c21 {
+  font-family: "Libre Franklin",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,Helvetica,sans-serif;
+  font-weight: 400;
+  line-height: 1.5rem;
+  font-size: 0.9375rem;
+  margin: 0 0 0.375rem 0;
+  font-size: 0.8125rem;
+  line-height: 0.8125rem;
+}
+
+.c1 {
+  position: relative;
+}
+
+.c5 {
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: -ms-flexbox;
+  display: flex;
+  -webkit-flex-direction: row;
+  -ms-flex-direction: row;
+  flex-direction: row;
+  -webkit-box-pack: left;
+  -webkit-justify-content: left;
+  -ms-flex-pack: left;
+  justify-content: left;
+  -webkit-align-items: center;
+  -webkit-box-align: center;
+  -ms-flex-align: center;
+  align-items: center;
+}
+
+.c6 {
+  color: ;
+}
+
+<div
+  className="c0"
+  name="card"
+>
+  <div
+    className="c1 c2 c3"
+    name="card-header"
+  >
+    <div
+      className="c4"
+      name="container"
+    >
+      <div
+        className="c5"
+      >
+        <a
+          active={undefined}
+          className="c6 c7"
+          href="/deployment-groups//services/nginx"
+          onClick={[Function]}
+          secondary={true}
+        >
+          Nginx
+        </a>
+      </div>
+    </div>
+    <div
+      className="c8 c4"
+      name="container"
+    >
+      <div
+        className="c9"
+      >
+        <div>
+          <div
+            className="c10"
+            color="disabled"
+          >
+            <svg
+              className=""
+              height="9"
+              viewBox="0 0 18 9"
+              width="18"
+              xmlns="http://www.w3.org/2000/svg"
+            >
+              <title>
+                icon: instances
+              </title>
+              <path
+                d="M4.5 0a4.5 4.5 0 1 0 0 9 4.5 4.5 0 0 0 0-9m8.59 0c-.375 0-.739.047-1.09.12 2.184.456 3.818 2.239 3.818 4.38S14.184 8.424 12 8.88c.351.073.715.12 1.09.12C15.803 9 18 6.985 18 4.5S15.802 0 13.09 0M14 4.5C14 6.985 11.802 9 9.09 9c-.375 0-.739-.047-1.09-.12 2.184-.456 3.818-2.239 3.818-4.38S10.184.576 8 .12C8.351.047 8.715 0 9.09 0 11.803 0 14 2.015 14 4.5"
+                fillRule="evenodd"
+              />
+            </svg>
+          </div>
+          <label
+            className="c11"
+            color="disabled"
+          >
+            1 instance
+          </label>
+        </div>
+      </div>
+    </div>
+    <nav
+      className="c12"
+      name="card-options"
+    >
+      <button
+        className="c13 c14"
+        onClick={[Function]}
+      >
+        <div
+          className="c15"
+        >
+          <div
+            className="c16"
+          />
+          <div
+            className="c16"
+          />
+          <div
+            className="c16"
+          />
+        </div>
+      </button>
+    </nav>
+  </div>
+  <div
+    className="c17"
+    name="card-view"
+  >
+    <div
+      className="c18 c19"
+      name="container"
+    >
+      <div
+        className="c9"
+      >
+        <div
+          className="c20"
+        >
+          <p
+            className="c21"
+          >
+            1
+                        instance
+                        running
+          </p>
+        </div>
+      </div>
+    </div>
+  </div>
+</div>
+`;
+
+exports[`renders child <ServiceListItem /> without throwing 1`] = `
+.c2 {
+  font-size: 0.9375rem;
+  line-height: 1.5;
+  color: ;
+  font-family: "Libre Franklin",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,Helvetica,sans-serif;
+  font-weight: 600;
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: -ms-flexbox;
+  display: flex;
+  -webkit-flex-direction: row;
+  -ms-flex-direction: row;
+  flex-direction: row;
+  -webkit-box-pack: start;
+  -webkit-justify-content: flex-start;
+  -ms-flex-pack: start;
+  justify-content: flex-start;
+  -webkit-flex-grow: 2;
+  -ms-flex-grow: 2;
+  flex-grow: 2;
+  -webkit-flex-basis: 5.625rem;
+  -ms-flex-basis: 5.625rem;
+  flex-basis: 5.625rem;
+  width: 100%;
+  padding: 0.75rem 1.125rem 0 1.125rem;
+}
+
+.c3 {
+  display: inline-block;
+  -webkit-flex-direction: column;
+  -ms-flex-direction: column;
+  flex-direction: column;
+  -webkit-box-pack: center;
+  -webkit-justify-content: center;
+  -ms-flex-pack: center;
+  justify-content: center;
+}
+
+.c6 {
+  font-family: "Libre Franklin",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,Helvetica,sans-serif;
+  font-weight: 400;
+  -webkit-flex-grow: 1;
+  -ms-flex-grow: 1;
+  flex-grow: 1;
+  -webkit-flex-basis: 5.625rem;
+  -ms-flex-basis: 5.625rem;
+  flex-basis: 5.625rem;
+  padding-bottom: 0.75rem;
+}
+
+.c7 {
+  -webkit-box-pack: start;
+  -webkit-justify-content: flex-start;
+  -ms-flex-pack: start;
+  justify-content: flex-start;
+}
+
+.c0 {
+  box-sizing: border-box;
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: -ms-flexbox;
+  display: flex;
+  -webkit-flex: 0 1 auto;
+  -ms-flex: 0 1 auto;
+  flex: 0 1 auto;
+  -webkit-flex-direction: row;
+  -ms-flex-direction: row;
+  flex-direction: row;
+  -webkit-flex-wrap: wrap;
+  -ms-flex-wrap: wrap;
+  flex-wrap: wrap;
+  margin-right: -0.5rem;
+  margin-left: -0.5rem;
+  position: relative;
+  height: auto;
+  min-height: 7.875rem;
+  margin-bottom: 0.625rem;
+  border: 0.0625rem solid;
+  background-color: ;
+  box-shadow: 0 0.125rem 0 0 rgba(0,0,0,0.05);
+  -webkit-flex-direction: column;
+  -ms-flex-direction: column;
+  flex-direction: column;
+  margin-right: 0rem;
+  margin-left: 0rem;
+  box-shadow: none;
+}
+
+.c1 {
+  box-sizing: border-box;
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: -ms-flexbox;
+  display: flex;
+  -webkit-flex: 0 1 auto;
+  -ms-flex: 0 1 auto;
+  flex: 0 1 auto;
+  -webkit-flex-direction: row;
+  -ms-flex-direction: row;
+  flex-direction: row;
+  -webkit-flex-wrap: wrap;
+  -ms-flex-wrap: wrap;
+  flex-wrap: wrap;
+  margin-right: -0.5rem;
+  margin-left: -0.5rem;
+  -webkit-flex: 1;
+  -ms-flex: 1;
+  flex: 1;
+  margin: 0;
+  height: auto;
+  padding-top: 0;
+  min-width: auto;
+  -webkit-flex-direction: row;
+  -ms-flex-direction: row;
+  flex-direction: row;
+}
+
+.c5 {
+  display: inline-block;
+  -webkit-flex-direction: column;
+  -ms-flex-direction: column;
+  flex-direction: column;
+  font-family: "Libre Franklin",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,Helvetica,sans-serif;
+  font-weight: 400;
+  font-style: normal;
+  font-stretch: normal;
+  font-size: 0.875rem;
+  -webkit-box-pack: end;
+  -webkit-justify-content: flex-end;
+  -ms-flex-pack: end;
+  justify-content: flex-end;
+}
+
+.c4 {
+  display: inline-block;
+  padding: 0 1.125rem;
+  font-family: "Libre Franklin",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,Helvetica,sans-serif;
+  font-weight: 400;
+}
+
+.c8 {
+  display: inline-block;
+  margin: 0 0 0.9375rem 0;
+  height: 3.375rem;
+  width: 12.5rem;
+}
+
+.c9 {
+  font-family: "Libre Franklin",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,Helvetica,sans-serif;
+  font-weight: 400;
+  line-height: 1.5rem;
+  font-size: 0.9375rem;
+  margin: 0 0 0.375rem 0;
+  font-size: 0.8125rem;
+  line-height: 0.8125rem;
+}
+
+<div
+  className="c0"
+  name="card"
+>
+  <div
+    className="c1"
+    name="card-view"
+  >
+    <div
+      className="c2"
+      name="container"
+    >
+      <span
+        className="c3"
+      >
+        Nginx
+      </span>
+    </div>
+    <div
+      className="c4 c2"
+      name="container"
+    >
+      <span
+        className="c5"
+      >
+        1
+         
+        instance
+      </span>
+    </div>
+    <div
+      className="c6 c2"
+      name="container"
+    >
+      <div
+        className="c7"
+      >
+        <div
+          className="c8"
+        >
+          <p
+            className="c9"
+          >
+            1
+                        instance
+                        running
+          </p>
+        </div>
+      </div>
+    </div>
+  </div>
+</div>
+`;

packages/cp-frontend/test/unit/components/services/__snapshots__/quick-actions.js.snap

@@ -0,0 +1,3 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`renders <ServicesQuickActions /> without throwing 1`] = `null`;

packages/cp-frontend/test/unit/components/services/empty.js

@@ -0,0 +1,22 @@
+
+/**
+ * @jest-environment jsdom
+ */
+
+import React from 'react';
+import renderer from 'react-test-renderer';
+import 'jest-styled-components';
+
+import EmptyServices from '@components/services/empty.js';
+import { Router } from '../../mocks';
+
+it('renders <EmptyServices /> without throwing', () => {
+  const tree = renderer
+    .create(
+      <Router>
+        <EmptyServices />
+      </Router>
+    )
+    .toJSON();
+  expect(tree).toMatchSnapshot();
+});

packages/cp-frontend/test/unit/components/services/list-item.js

@@ -0,0 +1,31 @@
+
+/**
+ * @jest-environment jsdom
+ */
+
+import React from 'react';
+import renderer from 'react-test-renderer';
+import 'jest-styled-components';
+
+import ServiceListItem from '@components/services/list-item.js';
+import { Router, service } from '../../mocks';
+
+it('renders <ServiceListItem /> without throwing', () => {
+  const tree = renderer
+    .create(
+      <Router>
+        <ServiceListItem service={service} />
+      </Router>
+    )
+    .toJSON();
+  expect(tree).toMatchSnapshot();
+});
+
+it('renders child <ServiceListItem /> without throwing', () => {
+  const tree = renderer
+    .create(
+      <ServiceListItem service={service} isChild />
+    )
+    .toJSON();
+  expect(tree).toMatchSnapshot();
+});

packages/cp-frontend/test/unit/components/services/quick-actions.js

@@ -0,0 +1,22 @@
+
+/**
+ * @jest-environment jsdom
+ */
+
+import React from 'react';
+import renderer from 'react-test-renderer';
+import 'jest-styled-components';
+
+import ServicesQuickActions from '@components/services/quick-actions.js';
+import { Router, service } from '../../mocks';
+
+it('renders <ServicesQuickActions /> without throwing', () => {
+  const tree = renderer
+    .create(
+      <Router>
+        <ServicesQuickActions service={service} />
+      </Router>
+    )
+    .toJSON();
+  expect(tree).toMatchSnapshot();
+});

packages/cp-frontend/test/unit/components/services/status.js

@@ -0,0 +1,20 @@
+
+/**
+ * @jest-environment jsdom
+ */
+
+import React from 'react';
+import renderer from 'react-test-renderer';
+import 'jest-styled-components';
+
+import ServiceStatus from '@components/services/status.js';
+import { service } from '../../mocks';
+
+xit('renders <ServiceStatus /> without throwing', () => {
+  const tree = renderer
+    .create(
+      <ServiceStatus instanceStatuses={service.instanceStatuses} />
+    )
+    .toJSON();
+  expect(tree).toMatchSnapshot();
+});

packages/cp-frontend/test/unit/containers/deployment-group/__snapshots__/delete.js.snap

@@ -0,0 +1,335 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`renders <DeploymentGroupDelete /> without throwing 1`] = `
+.c4 {
+  font-family: sans-serif;
+  font-size: 100%;
+  line-height: 1.15;
+  margin: 0;
+  overflow: visible;
+  text-transform: none;
+  -webkit-appearance: button;
+  -moz-appearance: button;
+  appearance: button;
+  min-width: 7.5rem;
+  box-sizing: border-box;
+  display: inline-block;
+  -webkit-box-pack: center;
+  -webkit-justify-content: center;
+  -ms-flex-pack: center;
+  justify-content: center;
+  -webkit-align-items: center;
+  -webkit-box-align: center;
+  -ms-flex-align: center;
+  align-items: center;
+  margin: 0;
+  padding: 0.9375rem 1.125rem;
+  position: relative;
+  font-family: "Libre Franklin",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,Helvetica,sans-serif;
+  font-weight: 400;
+  font-size: 0.9375rem;
+  text-align: center;
+  font-style: normal;
+  font-stretch: normal;
+  line-height: normal;
+  -webkit-letter-spacing: normal;
+  -moz-letter-spacing: normal;
+  -ms-letter-spacing: normal;
+  letter-spacing: normal;
+  text-decoration: none;
+  white-space: nowrap;
+  vertical-align: middle;
+  touch-action: manipulation;
+  cursor: pointer;
+  color: ;
+  background-image: none;
+  background-color: ;
+  border-radius: 0.25rem;
+  border: solid 0.0625rem;
+}
+
+.c4::-moz-focus-inner,
+.c4[type="button"]::-moz-focus-inner,
+.c4[type="reset"]::-moz-focus-inner,
+.c4[type="submit"]::-moz-focus-inner {
+  border-style: none;
+  padding: 0;
+}
+
+.c4:-moz-focusring,
+.c4[type="button"]:-moz-focusring,
+.c4[type="reset"]:-moz-focusring,
+.c4[type="submit"]:-moz-focusring {
+  outline: 0.0625rem dotted ButtonText;
+}
+
+.c4:focus {
+  outline: 0;
+  text-decoration: none;
+  background-color: ;
+  border-color: ;
+}
+
+.c4:hover {
+  background-color: ;
+  border: solid 0.0625rem;
+}
+
+.c4:active,
+.c4:active:hover,
+.c4:active:focus {
+  background-image: none;
+  outline: 0;
+  background-color: ;
+  border-color: ;
+}
+
+.c4[disabled] {
+  cursor: not-allowed;
+  pointer-events: none;
+}
+
+.c4 + button {
+  margin-left: 1.25rem;
+}
+
+.c9 {
+  font-family: sans-serif;
+  font-size: 100%;
+  line-height: 1.15;
+  margin: 0;
+  overflow: visible;
+  text-transform: none;
+  -webkit-appearance: button;
+  -moz-appearance: button;
+  appearance: button;
+  min-width: 7.5rem;
+  box-sizing: border-box;
+  display: inline-block;
+  -webkit-box-pack: center;
+  -webkit-justify-content: center;
+  -ms-flex-pack: center;
+  justify-content: center;
+  -webkit-align-items: center;
+  -webkit-box-align: center;
+  -ms-flex-align: center;
+  align-items: center;
+  margin: 0;
+  padding: 0.9375rem 1.125rem;
+  position: relative;
+  font-family: "Libre Franklin",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,Helvetica,sans-serif;
+  font-weight: 400;
+  font-size: 0.9375rem;
+  text-align: center;
+  font-style: normal;
+  font-stretch: normal;
+  line-height: normal;
+  -webkit-letter-spacing: normal;
+  -moz-letter-spacing: normal;
+  -ms-letter-spacing: normal;
+  letter-spacing: normal;
+  text-decoration: none;
+  white-space: nowrap;
+  vertical-align: middle;
+  touch-action: manipulation;
+  cursor: pointer;
+  color: ;
+  background-image: none;
+  background-color: ;
+  border-radius: 0.25rem;
+  border: solid 0.0625rem;
+  color: ;
+  background-color: ;
+  border-color: ;
+}
+
+.c9::-moz-focus-inner,
+.c9[type="button"]::-moz-focus-inner,
+.c9[type="reset"]::-moz-focus-inner,
+.c9[type="submit"]::-moz-focus-inner {
+  border-style: none;
+  padding: 0;
+}
+
+.c9:-moz-focusring,
+.c9[type="button"]:-moz-focusring,
+.c9[type="reset"]:-moz-focusring,
+.c9[type="submit"]:-moz-focusring {
+  outline: 0.0625rem dotted ButtonText;
+}
+
+.c9:focus {
+  outline: 0;
+  text-decoration: none;
+  background-color: ;
+  border-color: ;
+}
+
+.c9:hover {
+  background-color: ;
+  border: solid 0.0625rem;
+}
+
+.c9:active,
+.c9:active:hover,
+.c9:active:focus {
+  background-image: none;
+  outline: 0;
+  background-color: ;
+  border-color: ;
+}
+
+.c9[disabled] {
+  cursor: not-allowed;
+  pointer-events: none;
+}
+
+.c9:focus {
+  background-color: ;
+  border-color: ;
+}
+
+.c9:hover {
+  background-color: ;
+  border-color: ;
+}
+
+.c9:active,
+.c9:active:hover,
+.c9:active:focus {
+  background-color: ;
+  border-color: ;
+}
+
+.c9 + button {
+  margin-left: 1.25rem;
+}
+
+.c6 {
+  font-family: "Libre Franklin",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,Helvetica,sans-serif;
+  font-weight: 500;
+  font-size: 1.5rem;
+}
+
+.c8 {
+  font-family: "Libre Franklin",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,Helvetica,sans-serif;
+  font-weight: 400;
+  line-height: 1.5rem;
+  font-size: 0.9375rem;
+}
+
+.c3 {
+  background-color: #FFFFFF;
+  padding: 0.75rem;
+  min-width: auto;
+  border: none;
+  box-shadow: none;
+}
+
+.c3:hover,
+.c3:focus,
+.c3:active,
+.c3:active:hover,
+.c3:active:focus {
+  background-color: #FFFFFF;
+  border: none;
+  box-shadow: none;
+}
+
+.c0 {
+  position: fixed;
+  width: 100%;
+  height: 100%;
+  top: 0;
+  left: 0;
+  background-color: rgba(250,250,250,0.5);
+  z-index: 100;
+}
+
+.c1 {
+  position: absolute;
+  left: 50%;
+  top: 33.33%;
+  padding: 2.25rem 2.25rem 2.25rem 2.25rem;
+  background-color: ;
+  box-shadow: 0 0 0.375rem 0.0625rem rgba(0,0,0,0.1);
+  width: 28.75rem;
+  margin: 0 auto 0 -14.375rem;
+  z-index: 101;
+}
+
+.c2 {
+  position: absolute;
+  right: 0.375rem;
+  top: 0.1875rem;
+}
+
+.c5 {
+  line-height: 1.25;
+  color: ;
+  margin: 0 0 0.75rem 0;
+}
+
+.c7 {
+  color: ;
+  margin: 0.75rem 0 1.875rem 0;
+}
+
+<div
+  className="c0"
+>
+  <div
+    className="c1"
+    width={460}
+  >
+    <button
+      className="c2 c3 c4"
+      onClick={[Function]}
+    >
+      <svg
+        className=""
+        height="12"
+        viewBox="0 0 12 12"
+        width="12"
+        xmlns="http://www.w3.org/2000/svg"
+      >
+        <title>
+          icon: close
+        </title>
+        <path
+          d="M7.314 5.9l4.242-4.243L10.142.243 5.9 4.485 1.657.243.243 1.657l4.242 4.242-4.242 4.243 1.414 1.414 4.242-4.242 4.243 4.242 1.414-1.414L7.314 5.9z"
+          fill="#494949"
+          fillRule="evenodd"
+        />
+      </svg>
+    </button>
+    <div>
+      <h2
+        className="c5 c6"
+      >
+        Deleting a deployment group: 
+        <br />
+         
+        Wordpress Blog Example
+      </h2>
+      <p
+        className="c7 c8"
+      >
+        Deleting a deployment group will also remove all of the services and instances associated with that deployment group. Are you sure you want to continue?
+      </p>
+      <button
+        className="c9"
+        onClick={[Function]}
+      >
+        Cancel
+      </button>
+      <button
+        className="c4"
+        onClick={[Function]}
+      >
+        Delete deployment group
+      </button>
+    </div>
+  </div>
+</div>
+`;

packages/cp-frontend/test/unit/containers/deployment-group/delete.js

@@ -0,0 +1,27 @@
+
+/**
+ * @jest-environment jsdom
+ */
+
+import React from 'react';
+import renderer from 'react-test-renderer';
+import 'jest-styled-components';
+
+import { DeploymentGroupDelete } from '@containers/deployment-group/delete';
+import { Router, Store, deploymentGroup } from '../../mocks';
+
+it('renders <DeploymentGroupDelete /> without throwing', () => {
+  const tree = renderer
+    .create(
+      <Store>
+        <Router>
+          <DeploymentGroupDelete
+            deploymentGroup={deploymentGroup}
+            deleteDeploymentGroup={() => {}}
+          />
+        </Router>
+      </Store>
+    )
+    .toJSON();
+  expect(tree).toMatchSnapshot();
+});

packages/cp-frontend/test/unit/containers/deployment-groups/__snapshots__/create.js.snap

@@ -0,0 +1,536 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`renders <DeploymentGroupCreate /> without throwing 1`] = `
+.c8 {
+  font-family: sans-serif;
+  font-size: 100%;
+  line-height: 1.15;
+  margin: 0;
+  overflow: visible;
+  text-transform: none;
+  -webkit-appearance: button;
+  -moz-appearance: button;
+  appearance: button;
+  min-width: 7.5rem;
+  box-sizing: border-box;
+  display: inline-block;
+  -webkit-box-pack: center;
+  -webkit-justify-content: center;
+  -ms-flex-pack: center;
+  justify-content: center;
+  -webkit-align-items: center;
+  -webkit-box-align: center;
+  -ms-flex-align: center;
+  align-items: center;
+  margin: 0;
+  padding: 0.9375rem 1.125rem;
+  position: relative;
+  font-family: "Libre Franklin",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,Helvetica,sans-serif;
+  font-weight: 400;
+  font-size: 0.9375rem;
+  text-align: center;
+  font-style: normal;
+  font-stretch: normal;
+  line-height: normal;
+  -webkit-letter-spacing: normal;
+  -moz-letter-spacing: normal;
+  -ms-letter-spacing: normal;
+  letter-spacing: normal;
+  text-decoration: none;
+  white-space: nowrap;
+  vertical-align: middle;
+  touch-action: manipulation;
+  cursor: pointer;
+  color: ;
+  background-image: none;
+  background-color: ;
+  border-radius: 0.25rem;
+  border: solid 0.0625rem;
+}
+
+.c8::-moz-focus-inner,
+.c8[type="button"]::-moz-focus-inner,
+.c8[type="reset"]::-moz-focus-inner,
+.c8[type="submit"]::-moz-focus-inner {
+  border-style: none;
+  padding: 0;
+}
+
+.c8:-moz-focusring,
+.c8[type="button"]:-moz-focusring,
+.c8[type="reset"]:-moz-focusring,
+.c8[type="submit"]:-moz-focusring {
+  outline: 0.0625rem dotted ButtonText;
+}
+
+.c8:focus {
+  outline: 0;
+  text-decoration: none;
+  background-color: ;
+  border-color: ;
+}
+
+.c8:hover {
+  background-color: ;
+  border: solid 0.0625rem;
+}
+
+.c8:active,
+.c8:active:hover,
+.c8:active:focus {
+  background-image: none;
+  outline: 0;
+  background-color: ;
+  border-color: ;
+}
+
+.c8[disabled] {
+  cursor: not-allowed;
+  pointer-events: none;
+}
+
+.c8 + button {
+  margin-left: 1.25rem;
+}
+
+.c3 {
+  float: left;
+  background-color: ;
+}
+
+.c6 {
+  fill: none;
+  fill: ;
+}
+
+.c12 {
+  fill: none;
+}
+
+.c5 {
+  display: inline-block;
+  border-radius: 50%;
+  width: 1.125rem;
+  height: 1.125rem;
+  background: inherit;
+  border: 0.0625rem solid;
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: -ms-flexbox;
+  display: flex;
+  -webkit-box-pack: center;
+  -webkit-justify-content: center;
+  -ms-flex-pack: center;
+  justify-content: center;
+  -webkit-align-items: center;
+  -webkit-box-align: center;
+  -ms-flex-align: center;
+  align-items: center;
+  border: 0.0625rem solid;
+  background: ;
+}
+
+.c11 {
+  display: inline-block;
+  border-radius: 50%;
+  width: 1.125rem;
+  height: 1.125rem;
+  background: inherit;
+  border: 0.0625rem solid;
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: -ms-flexbox;
+  display: flex;
+  -webkit-box-pack: center;
+  -webkit-justify-content: center;
+  -ms-flex-pack: center;
+  justify-content: center;
+  -webkit-align-items: center;
+  -webkit-box-align: center;
+  -ms-flex-align: center;
+  align-items: center;
+}
+
+.c7 {
+  padding: 0.75rem 1.125rem 0.75rem 0.75rem;
+  background-color: #FFFFFF;
+  color: #464646;
+  text-align: left;
+  border: none;
+  box-shadow: none;
+  line-height: 1.6;
+  cursor: default;
+}
+
+.c7:focus {
+  background-color: #FFFFFF;
+  border: none;
+  color: #464646;
+}
+
+.c7:hover {
+  background-color: #FFFFFF;
+  border: none;
+  color: #464646;
+}
+
+.c7:active,
+.c7:active:hover,
+.c7:active:focus {
+  background-color: #FFFFFF;
+  border: none;
+  color: #464646;
+}
+
+.c4 {
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: -ms-flexbox;
+  display: flex;
+  -webkit-box-pack: center;
+  -webkit-justify-content: center;
+  -ms-flex-pack: center;
+  justify-content: center;
+  -webkit-align-items: center;
+  -webkit-box-align: center;
+  -ms-flex-align: center;
+  align-items: center;
+  position: relative;
+  z-index: 10;
+  padding-left: 2.5rem;
+  border-top: 0.0625rem solid;
+  border-bottom: 0.0625rem solid;
+  border-top: 0.0625rem solid;
+  border-bottom: 0.0625rem solid;
+  border-left: 0.0625rem solid;
+  padding-left: 0.8125rem;
+  border-right: 0.0625rem solid;
+  border-right: none;
+}
+
+.c10 {
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: -ms-flexbox;
+  display: flex;
+  -webkit-box-pack: center;
+  -webkit-justify-content: center;
+  -ms-flex-pack: center;
+  justify-content: center;
+  -webkit-align-items: center;
+  -webkit-box-align: center;
+  -ms-flex-align: center;
+  align-items: center;
+  position: relative;
+  z-index: 9;
+  padding-left: 2.5rem;
+  border-top: 0.0625rem solid;
+  border-bottom: 0.0625rem solid;
+  border-right: 0.0625rem solid;
+  border-right: none;
+}
+
+.c14 {
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: -ms-flexbox;
+  display: flex;
+  -webkit-box-pack: center;
+  -webkit-justify-content: center;
+  -ms-flex-pack: center;
+  justify-content: center;
+  -webkit-align-items: center;
+  -webkit-box-align: center;
+  -ms-flex-align: center;
+  align-items: center;
+  position: relative;
+  z-index: 8;
+  padding-left: 2.5rem;
+  border-top: 0.0625rem solid;
+  border-bottom: 0.0625rem solid;
+  border-right: 0.0625rem solid;
+  border-right: none;
+}
+
+.c15 {
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: -ms-flexbox;
+  display: flex;
+  -webkit-box-pack: center;
+  -webkit-justify-content: center;
+  -ms-flex-pack: center;
+  justify-content: center;
+  -webkit-align-items: center;
+  -webkit-box-align: center;
+  -ms-flex-align: center;
+  align-items: center;
+  position: relative;
+  z-index: 7;
+  padding-left: 2.5rem;
+  border-top: 0.0625rem solid;
+  border-bottom: 0.0625rem solid;
+  border-right: 0.0625rem solid;
+}
+
+.c9 {
+  position: absolute;
+  top: 0;
+  right: -1.6875rem;
+  border: solid;
+  border-width: 0 0.0625rem 0.0625rem 0;
+  padding: 1.06875rem;
+  -webkit-transform: rotate(-45deg);
+  -ms-transform: rotate(-45deg);
+  transform: rotate(-45deg);
+  margin: 0.4rem 0.625rem 0.4rem 0.625rem;
+  border-color: ;
+}
+
+.c13 {
+  position: absolute;
+  top: 0;
+  right: -1.6875rem;
+  border: solid;
+  border-width: 0 0.0625rem 0.0625rem 0;
+  padding: 1.06875rem;
+  -webkit-transform: rotate(-45deg);
+  -ms-transform: rotate(-45deg);
+  transform: rotate(-45deg);
+  margin: 0.4rem 0.625rem 0.4rem 0.625rem;
+}
+
+.c16 {
+  position: absolute;
+  top: 0;
+  right: -1.6875rem;
+  border: solid;
+  border-width: 0 0.0625rem 0.0625rem 0;
+  padding: 1.06875rem;
+  -webkit-transform: rotate(-45deg);
+  -ms-transform: rotate(-45deg);
+  transform: rotate(-45deg);
+  margin: 0.4rem 0.625rem 0.4rem 0.625rem;
+  display: none;
+}
+
+.c2 {
+  display: table;
+  list-style-type: none;
+  padding: 0;
+}
+
+.c0 {
+  margin-right: auto;
+  margin-left: auto;
+  padding-top: 1.1875rem;
+  -webkit-flex: 1 1 auto;
+  -ms-flex: 1 1 auto;
+  flex: 1 1 auto;
+  display: block;
+  -webkit-flex-flow: column;
+  -ms-flex-flow: column;
+  flex-flow: column;
+}
+
+.c1 {
+  font-family: "Libre Franklin",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,Helvetica,sans-serif;
+  font-weight: 500;
+  font-size: 1.5rem;
+  margin-top: 0.125rem;
+  -webkit-flex: 0 0 auto;
+  -ms-flex: 0 0 auto;
+  flex: 0 0 auto;
+  -webkit-align-self: stretch;
+  -ms-flex-item-align: stretch;
+  align-self: stretch;
+}
+
+@media only screen and (min-width:48em) {
+  .c0 {
+    width: 46rem;
+  }
+}
+
+@media only screen and (min-width:64em) {
+  .c0 {
+    width: 61rem;
+  }
+}
+
+@media only screen and (min-width:75em) {
+  .c0 {
+    width: 76rem;
+  }
+}
+
+<div
+  className="c0"
+>
+  <h2
+    className="c1"
+  >
+    Creating deployment group
+  </h2>
+  <ul
+    className="c2"
+  >
+    <li
+      className="c3"
+    >
+      <div
+        className="c4"
+      >
+        <span
+          className="c5"
+        >
+          <svg
+            active={false}
+            className="c6 "
+            completed={true}
+            first={true}
+            height="9"
+            last={undefined}
+            viewBox="0 0 9 9"
+            width="9"
+            xmlns="http://www.w3.org/2000/svg"
+          >
+            <title>
+              tick
+            </title>
+            <path
+              d="M7.316 0L3.254 5.477l-1.55-2.165L0 4.495 3.223 9 9 1.21z"
+              fillRule="evenodd"
+            />
+          </svg>
+        </span>
+        <button
+          className="c7 c8"
+        >
+          Name the group
+        </button>
+        <span
+          className="c9"
+        />
+      </div>
+    </li>
+    <li
+      className="c3"
+    >
+      <div
+        className="c10"
+      >
+        <span
+          className="c11"
+        >
+          <svg
+            active={false}
+            className="c12 "
+            completed={false}
+            first={undefined}
+            height="9"
+            last={undefined}
+            viewBox="0 0 9 9"
+            width="9"
+            xmlns="http://www.w3.org/2000/svg"
+          >
+            <title>
+              tick
+            </title>
+            <path
+              d="M7.316 0L3.254 5.477l-1.55-2.165L0 4.495 3.223 9 9 1.21z"
+              fillRule="evenodd"
+            />
+          </svg>
+        </span>
+        <button
+          className="c7 c8"
+        >
+          Define Services
+        </button>
+        <span
+          className="c13"
+        />
+      </div>
+    </li>
+    <li
+      className="c3"
+    >
+      <div
+        className="c14"
+      >
+        <span
+          className="c11"
+        >
+          <svg
+            active={false}
+            className="c12 "
+            completed={false}
+            first={undefined}
+            height="9"
+            last={undefined}
+            viewBox="0 0 9 9"
+            width="9"
+            xmlns="http://www.w3.org/2000/svg"
+          >
+            <title>
+              tick
+            </title>
+            <path
+              d="M7.316 0L3.254 5.477l-1.55-2.165L0 4.495 3.223 9 9 1.21z"
+              fillRule="evenodd"
+            />
+          </svg>
+        </span>
+        <button
+          className="c7 c8"
+        >
+          Define Environment
+        </button>
+        <span
+          className="c13"
+        />
+      </div>
+    </li>
+    <li
+      className="c3"
+    >
+      <div
+        className="c15"
+      >
+        <span
+          className="c11"
+        >
+          <svg
+            active={false}
+            className="c12 "
+            completed={undefined}
+            first={undefined}
+            height="9"
+            last={true}
+            viewBox="0 0 9 9"
+            width="9"
+            xmlns="http://www.w3.org/2000/svg"
+          >
+            <title>
+              tick
+            </title>
+            <path
+              d="M7.316 0L3.254 5.477l-1.55-2.165L0 4.495 3.223 9 9 1.21z"
+              fillRule="evenodd"
+            />
+          </svg>
+        </span>
+        <button
+          className="c7 c8"
+        >
+          Review and deploy
+        </button>
+        <span
+          className="c16"
+        />
+      </div>
+    </li>
+  </ul>
+</div>
+`;

packages/cp-frontend/test/unit/containers/deployment-groups/__snapshots__/import.js.snap

@@ -0,0 +1,183 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`renders <DeploymentGroupImport /> without throwing 1`] = `
+.c0 {
+  margin-right: auto;
+  margin-left: auto;
+  padding-top: 1.1875rem;
+  -webkit-flex: 1 1 auto;
+  -ms-flex: 1 1 auto;
+  flex: 1 1 auto;
+  display: block;
+  -webkit-flex-flow: column;
+  -ms-flex-flow: column;
+  flex-flow: column;
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: -ms-flexbox;
+  display: flex;
+  -webkit-flex-direction: column;
+  -ms-flex-direction: column;
+  flex-direction: column;
+  -webkit-flex-wrap: nowrap;
+  -ms-flex-wrap: nowrap;
+  flex-wrap: nowrap;
+  -webkit-box-pack: center;
+  -webkit-justify-content: center;
+  -ms-flex-pack: center;
+  justify-content: center;
+  -webkit-align-content: center;
+  -ms-flex-line-pack: center;
+  align-content: center;
+  -webkit-align-items: center;
+  -webkit-box-align: center;
+  -ms-flex-align: center;
+  align-items: center;
+}
+
+.c3 {
+  fill: ;
+  stroke: ;
+  -webkit-animation: iCqDak 1.5s ease-out 0s infinite;
+  animation: iCqDak 1.5s ease-out 0s infinite;
+}
+
+.c4 {
+  fill: ;
+  stroke: ;
+  -webkit-animation: iCqDak 1.5s ease-out 0s infinite;
+  animation: iCqDak 1.5s ease-out 0s infinite;
+  -webkit-animation-delay: 0.5s;
+  animation-delay: 0.5s;
+}
+
+.c5 {
+  fill: ;
+  stroke: ;
+  -webkit-animation: iCqDak 1.5s ease-out 0s infinite;
+  animation: iCqDak 1.5s ease-out 0s infinite;
+  -webkit-animation-delay: 1s;
+  animation-delay: 1s;
+}
+
+.c1 {
+  font-family: "Libre Franklin",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,Helvetica,sans-serif;
+  font-weight: 500;
+  font-size: 1.5rem;
+  margin-top: 0.125rem;
+  -webkit-flex: 0 0 auto;
+  -ms-flex: 0 0 auto;
+  flex: 0 0 auto;
+  -webkit-align-self: stretch;
+  -ms-flex-item-align: stretch;
+  align-self: stretch;
+}
+
+.c2 {
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: -ms-flexbox;
+  display: flex;
+  -webkit-flex-direction: column;
+  -ms-flex-direction: column;
+  flex-direction: column;
+  -webkit-flex-wrap: nowrap;
+  -ms-flex-wrap: nowrap;
+  flex-wrap: nowrap;
+  -webkit-box-pack: center;
+  -webkit-justify-content: center;
+  -ms-flex-pack: center;
+  justify-content: center;
+  -webkit-align-content: center;
+  -ms-flex-line-pack: center;
+  align-content: center;
+  -webkit-align-items: center;
+  -webkit-box-align: center;
+  -ms-flex-align: center;
+  align-items: center;
+  -webkit-flex: 1 0 auto;
+  -ms-flex: 1 0 auto;
+  flex: 1 0 auto;
+  -webkit-align-self: stretch;
+  -ms-flex-item-align: stretch;
+  align-self: stretch;
+}
+
+.c6 {
+  font-family: "Libre Franklin",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,Helvetica,sans-serif;
+  font-weight: 400;
+  line-height: 1.5rem;
+  font-size: 0.9375rem;
+  -webkit-flex: 0 0 auto;
+  -ms-flex: 0 0 auto;
+  flex: 0 0 auto;
+  -webkit-align-self: stretch;
+  -ms-flex-item-align: stretch;
+  align-self: stretch;
+  text-align: center;
+  margin-bottom: 0;
+}
+
+@media only screen and (min-width:48em) {
+  .c0 {
+    width: 46rem;
+  }
+}
+
+@media only screen and (min-width:64em) {
+  .c0 {
+    width: 61rem;
+  }
+}
+
+@media only screen and (min-width:75em) {
+  .c0 {
+    width: 76rem;
+  }
+}
+
+<div
+  className="c0"
+>
+  <h2
+    className="c1"
+  >
+    Importing deployment group
+  </h2>
+  <div
+    className="c2"
+  >
+    <svg
+      height="10"
+      width="28"
+    >
+      <rect
+        className="c3"
+        height="6"
+        width="6"
+        x="2"
+        y="2"
+      />
+      <rect
+        className="c4"
+        height="6"
+        width="6"
+        x="11"
+        y="2"
+      />
+      <rect
+        className="c5"
+        height="6"
+        width="6"
+        x="20"
+        y="2"
+      />
+    </svg>
+    <p
+      className="c6"
+    >
+      Loading...
+    </p>
+  </div>
+</div>
+`;

packages/cp-frontend/test/unit/containers/deployment-groups/__snapshots__/list.js.snap

@@ -0,0 +1,423 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`renders <DeploymentGroupList /> without throwing 1`] = `
+.c3 {
+  box-sizing: border-box;
+  -webkit-flex: 0 0 auto;
+  -ms-flex: 0 0 auto;
+  flex: 0 0 auto;
+  padding-right: 0.5rem;
+  padding-left: 0.5rem;
+}
+
+.c0 {
+  margin-right: auto;
+  margin-left: auto;
+  padding-top: 1.1875rem;
+  -webkit-flex: 1 1 auto;
+  -ms-flex: 1 1 auto;
+  flex: 1 1 auto;
+  display: block;
+  -webkit-flex-flow: column;
+  -ms-flex-flow: column;
+  flex-flow: column;
+}
+
+.c8 {
+  display: inline-block;
+  border-radius: 0.25rem;
+  border: solid 0.0625rem;
+  background-color: ;
+  box-sizing: border-box;
+  display: inline-block;
+  -webkit-box-pack: center;
+  -webkit-justify-content: center;
+  -ms-flex-pack: center;
+  justify-content: center;
+  -webkit-align-items: center;
+  -webkit-box-align: center;
+  -ms-flex-align: center;
+  align-items: center;
+  padding: 0.9375rem 1.125rem;
+  position: relative;
+  text-align: center;
+  line-height: normal;
+  vertical-align: middle;
+  touch-action: manipulation;
+  min-width: 0;
+  cursor: pointer;
+}
+
+.c8 > svg {
+  fill: ;
+}
+
+.c8:focus {
+  outline: 0;
+  background-color: ;
+  border-color: ;
+}
+
+.c8:hover {
+  background-color: ;
+  border-color: ;
+}
+
+.c8:focus,
+.c8:hover > svg {
+  fill: ;
+}
+
+.c8:active,
+.c8:active:hover,
+.c8:active:focus {
+  outline: 0;
+  background-color: ;
+  border-color: ;
+}
+
+.c8:active,
+.c8:active:hover,
+.c8:active:focus > svg {
+  fill: ;
+}
+
+.c8[disabled] {
+  cursor: not-allowed;
+  pointer-events: none;
+  color: ;
+  background-color: ;
+  border-color: ;
+}
+
+.c8[disabled] > svg {
+  fill: ;
+}
+
+.c8[disabled]:focus,
+.c8[disabled]:hover,
+.c8[disabled]:active,
+.c8[disabled]:active:hover,
+.c8[disabled]:active:focus {
+  background-color: ;
+  border-color: ;
+}
+
+.c8[disabled]:focus,
+.c8[disabled]:hover,
+.c8[disabled]:active,
+.c8[disabled]:active:hover,
+.c8[disabled]:active:focus > svg {
+  fill: ;
+}
+
+.c1 {
+  font-family: "Libre Franklin",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,Helvetica,sans-serif;
+  font-weight: 500;
+  font-size: 1.5rem;
+  margin-top: 0.125rem;
+  -webkit-flex: 0 0 auto;
+  -ms-flex: 0 0 auto;
+  flex: 0 0 auto;
+  -webkit-align-self: stretch;
+  -ms-flex-item-align: stretch;
+  align-self: stretch;
+}
+
+.c2 {
+  box-sizing: border-box;
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: -ms-flexbox;
+  display: flex;
+  -webkit-flex: 0 1 auto;
+  -ms-flex: 0 1 auto;
+  flex: 0 1 auto;
+  -webkit-flex-direction: row;
+  -ms-flex-direction: row;
+  flex-direction: row;
+  -webkit-flex-wrap: wrap;
+  -ms-flex-wrap: wrap;
+  flex-wrap: wrap;
+  margin-right: -0.5rem;
+  margin-left: -0.5rem;
+  margin-top: -0.4375rem;
+}
+
+.c4 {
+  position: relative;
+  text-decoration: none;
+  color: ;
+  background-color: ;
+  box-shadow: 0 0.125rem 0 0 rgba(0,0,0,0.05);
+  border: solid 0.0625rem;
+  margin-top: 1.25rem;
+  margin-bottom: 0;
+  padding: 1.125rem;
+  min-height: 16.125rem;
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: -ms-flexbox;
+  display: flex;
+  -webkit-flex-direction: column;
+  -ms-flex-direction: column;
+  flex-direction: column;
+}
+
+.c4:last-child {
+  margin-bottom: 1.25rem;
+}
+
+.c9 {
+  position: relative;
+  text-decoration: none;
+  color: ;
+  background-color: ;
+  box-shadow: 0 0.125rem 0 0 rgba(0,0,0,0.05);
+  border: solid 0.0625rem;
+  margin-top: 1.25rem;
+  margin-bottom: 0;
+  padding: 1.125rem;
+  min-height: 16.125rem;
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: -ms-flexbox;
+  display: flex;
+  -webkit-flex-direction: column;
+  -ms-flex-direction: column;
+  flex-direction: column;
+  background-color: ;
+}
+
+.c9:last-child {
+  margin-bottom: 1.25rem;
+}
+
+.c9:hover {
+  background-color: ;
+}
+
+.c11 {
+  border: solid 0.0625rem;
+  border-radius: 50%;
+  width: 3rem;
+  height: 3rem;
+  line-height: 3rem;
+  font-size: 1.5rem;
+  text-align: center;
+  margin-bottom: 1.25rem;
+}
+
+.c12 {
+  font-size: 80%;
+  font-family: "Libre Franklin",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,Helvetica,sans-serif;
+  font-weight: 400;
+  line-height: 1.125rem;
+  font-size: 0.875rem;
+  font-weight: 600;
+  text-align: center;
+}
+
+.c6 {
+  font-family: "Libre Franklin",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,Helvetica,sans-serif;
+  font-weight: 500;
+  font-size: 0.9375rem;
+  margin-top: 0.625rem;
+  font-weight: 600;
+}
+
+.c5 {
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: -ms-flexbox;
+  display: flex;
+  -webkit-flex-grow: 1;
+  -ms-flex-grow: 1;
+  flex-grow: 1;
+  text-decoration: none;
+  color: ;
+}
+
+.c10 {
+  -webkit-flex-direction: column;
+  -ms-flex-direction: column;
+  flex-direction: column;
+  -webkit-box-pack: center;
+  -webkit-justify-content: center;
+  -ms-flex-pack: center;
+  justify-content: center;
+  -webkit-align-items: center;
+  -webkit-box-align: center;
+  -ms-flex-align: center;
+  align-items: center;
+  -webkit-align-content: center;
+  -ms-flex-line-pack: center;
+  align-content: center;
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: -ms-flexbox;
+  display: flex;
+}
+
+.c7 {
+  position: absolute;
+  right: 0;
+  bottom: 0;
+  border: none;
+}
+
+.c7:hover,
+.c7:focus,
+.c7:active,
+.c7:active:hover,
+.c7:active:focus {
+  background-color: ;
+}
+
+.c7:focus > svg,
+.c7:hover > svg {
+  fill: ;
+}
+
+.c7:active > svg,
+.c7:active:hover > svg,
+.c7:active:focus > svg {
+  fill: ;
+}
+
+@media only screen and (min-width:0em) {
+  .c3 {
+    -webkit-flex-basis: 100%;
+    -ms-flex-basis: 100%;
+    flex-basis: 100%;
+    max-width: 100%;
+    display: block;
+  }
+}
+
+@media only screen and (min-width:48em) {
+  .c3 {
+    -webkit-flex-basis: 33.333333333333336%;
+    -ms-flex-basis: 33.333333333333336%;
+    flex-basis: 33.333333333333336%;
+    max-width: 33.333333333333336%;
+    display: block;
+  }
+}
+
+@media only screen and (min-width:64em) {
+  .c3 {
+    -webkit-flex-basis: 25%;
+    -ms-flex-basis: 25%;
+    flex-basis: 25%;
+    max-width: 25%;
+    display: block;
+  }
+}
+
+@media only screen and (min-width:75em) {
+  .c3 {
+    -webkit-flex-basis: 25%;
+    -ms-flex-basis: 25%;
+    flex-basis: 25%;
+    max-width: 25%;
+    display: block;
+  }
+}
+
+@media only screen and (min-width:48em) {
+  .c0 {
+    width: 46rem;
+  }
+}
+
+@media only screen and (min-width:64em) {
+  .c0 {
+    width: 61rem;
+  }
+}
+
+@media only screen and (min-width:75em) {
+  .c0 {
+    width: 76rem;
+  }
+}
+
+<div
+  className="c0"
+>
+  <h2
+    className="c1"
+  >
+    Deployment groups
+  </h2>
+  <div
+    className="c2"
+  >
+    <div
+      className="c3"
+    >
+      <div
+        className="c4"
+      >
+        <a
+          className="c5"
+          href="/wordpress-blog-example"
+          onClick={[Function]}
+        >
+          <h3
+            className="c6"
+          >
+            Wordpress Blog Example
+          </h3>
+        </a>
+        <a
+          className="c7 c8"
+          href="undefined/wordpress-blog-example/delete"
+          onClick={[Function]}
+        >
+          <svg
+            className=""
+            height="17"
+            viewBox="0 0 12 17"
+            width="12"
+            xmlns="http://www.w3.org/2000/svg"
+          >
+            <title>
+              icon: delete
+            </title>
+            <path
+              d="M4 0v1H0v2h12V1H8.001V0H4zM1 17h10V4H1v13z"
+              fillRule="evenodd"
+            />
+          </svg>
+        </a>
+      </div>
+    </div>
+    <div
+      className="c3"
+    >
+      <div
+        className="c9"
+      >
+        <a
+          className="c10 c5"
+          href="/~create"
+          onClick={[Function]}
+        >
+          <div
+            className="c11"
+          >
+            +
+          </div>
+          <small
+            className="c12"
+          >
+            Create new deployment group
+          </small>
+        </a>
+      </div>
+    </div>
+  </div>
+</div>
+`;

packages/cp-frontend/test/unit/containers/deployment-groups/create.js

@@ -0,0 +1,31 @@
+
+/**
+ * @jest-environment jsdom
+ */
+
+import React from 'react';
+import renderer from 'react-test-renderer';
+import 'jest-styled-components';
+
+import DeploymentGroupCreate from '@containers/deployment-groups/create.js';
+import { Router, Store } from '../../mocks';
+
+it('renders <DeploymentGroupCreate /> without throwing', () => {
+  const props = {
+    match: {
+      params: {
+        stage: ''
+      }
+    }
+  }
+  const tree = renderer
+    .create(
+      <Store>
+        <Router>
+          <DeploymentGroupCreate { ...props } />
+        </Router>
+      </Store>
+    )
+    .toJSON();
+  expect(tree).toMatchSnapshot();
+});

packages/cp-frontend/test/unit/containers/deployment-groups/import.js

@@ -0,0 +1,24 @@
+
+/**
+ * @jest-environment jsdom
+ */
+
+import React from 'react';
+import renderer from 'react-test-renderer';
+import 'jest-styled-components';
+
+import DeploymentGroupImport from '@containers/deployment-groups/import.js';
+import { Router, Store } from '../../mocks';
+
+it('renders <DeploymentGroupImport /> without throwing', () => {
+  const tree = renderer
+    .create(
+      <Store>
+        <Router>
+          <DeploymentGroupImport />
+        </Router>
+      </Store>
+    )
+    .toJSON();
+  expect(tree).toMatchSnapshot();
+});

packages/cp-frontend/test/unit/containers/deployment-groups/list.js

@@ -0,0 +1,27 @@
+
+/**
+ * @jest-environment jsdom
+ */
+
+import React from 'react';
+import renderer from 'react-test-renderer';
+import 'jest-styled-components';
+
+import { DeploymentGroupList } from '@containers/deployment-groups/list.js';
+import { Router, Store, deploymentGroups } from '../../mocks';
+
+it('renders <DeploymentGroupList /> without throwing', () => {
+  const tree = renderer
+    .create(
+      <Store>
+        <Router>
+          <DeploymentGroupList
+            deploymentGroups={deploymentGroups}
+            match={{ path: '' }}
+          />
+        </Router>
+      </Store>
+    )
+    .toJSON();
+  expect(tree).toMatchSnapshot();
+});

packages/cp-frontend/test/unit/containers/instances/__snapshots__/tooltip.js.snap

@@ -0,0 +1,89 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`renders <InstancesTooltip /> without throwing 1`] = `
+.c4 {
+  font-family: "Libre Franklin",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,Helvetica,sans-serif;
+  font-weight: 400;
+  line-height: 1.5rem;
+  font-size: 0.9375rem;
+}
+
+.c1 {
+  position: absolute;
+  top: auto;
+  left: auto;
+  bottom: ;
+  right: auto;
+}
+
+.c1:focus {
+  outline: none;
+}
+
+.c2 {
+  position: relative;
+  display: inline-block;
+  top: 0.3125rem;
+  left: -50%;
+  margin: 0;
+  padding: 0.75rem 0;
+  background-color: ;
+  border: 0.0625rem solid;
+  box-shadow: 0 0.125rem 0.375rem 0.0625rem rgba(0,0,0,0.1);
+  border-radius: 0.25rem;
+  z-index: 1000;
+}
+
+.c2:after,
+.c2:before {
+  content: "";
+  position: absolute;
+  bottom: 100%;
+  left: 50%;
+  height: 0;
+  width: 0;
+  border: solid transparent;
+}
+
+.c2:after {
+  border-bottom-color: ;
+  border-width: 0.1875rem;
+  margin-left: -0.1875rem;
+}
+
+.c2:before {
+  border-bottom-color: ;
+  border-width: 0.3125rem;
+  margin-left: -0.3125rem;
+}
+
+.c3 {
+  margin: 0 1.125rem;
+  color: ;
+  white-space: nowrap;
+}
+
+.c0 {
+  position: absolute;
+  top: 0;
+  left: 0;
+}
+
+<div
+  className="c0"
+>
+  <div
+    className="c1"
+  >
+    <div
+      className="c2"
+    >
+      <p
+        className="c3 c4"
+      >
+        Your instance is operating as expected
+      </p>
+    </div>
+  </div>
+</div>
+`;

packages/cp-frontend/test/unit/containers/instances/list.js

@@ -0,0 +1,24 @@
+
+/**
+ * @jest-environment jsdom
+ */
+
+import React from 'react';
+import renderer from 'react-test-renderer';
+import 'jest-styled-components';
+
+import { InstanceList } from '@containers/instances/list.js';
+import { Router, Store, instances } from '../../mocks';
+
+xit('renders <InstanceList /> without throwing', () => {
+  const tree = renderer
+    .create(
+      <Store>
+        <Router>
+          <InstanceList instances={instances} />
+        </Router>
+      </Store>
+    )
+    .toJSON();
+  expect(tree).toMatchSnapshot();
+});

packages/cp-frontend/test/unit/containers/instances/tooltip.js

@@ -0,0 +1,31 @@
+
+/**
+ * @jest-environment jsdom
+ */
+
+import React from 'react';
+import renderer from 'react-test-renderer';
+import 'jest-styled-components';
+
+import { InstancesTooltip } from '@containers/instances/tooltip.js';
+import { Router, Store, instance } from '../../mocks';
+
+it('renders <InstancesTooltip /> without throwing', () => {
+  const tree = renderer
+    .create(
+      <Store>
+        <Router>
+          <InstancesTooltip
+            instancesTooltip={{
+              show: true,
+              position: {},
+              type: 'healthy',
+              instance
+            }}
+          />
+        </Router>
+      </Store>
+    )
+    .toJSON();
+  expect(tree).toMatchSnapshot();
+});

packages/cp-frontend/test/unit/containers/manifest/__snapshots__/edit-or-create.js.snap

@@ -0,0 +1,3 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`renders <DeploymentGroupEditOrCreate /> without throwing 1`] = `null`;

packages/cp-frontend/test/unit/containers/manifest/edit-or-create.js

@@ -0,0 +1,24 @@
+
+/**
+ * @jest-environment jsdom
+ */
+
+import React from 'react';
+import renderer from 'react-test-renderer';
+import 'jest-styled-components';
+
+import DeploymentGroupEditOrCreate from '@containers/manifest/edit-or-create.js';
+import { Router, Store } from '../../mocks';
+
+it('renders <DeploymentGroupEditOrCreate /> without throwing', () => {
+  const tree = renderer
+    .create(
+      <Store>
+        <Router>
+          <DeploymentGroupEditOrCreate />
+        </Router>
+      </Store>
+    )
+    .toJSON();
+  expect(tree).toMatchSnapshot();
+});

packages/cp-frontend/test/unit/containers/navigation/__snapshots__/breadcrumb.js.snap

@@ -0,0 +1,95 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`renders <Breadcrumb /> without throwing 1`] = `
+.c1 {
+  margin-right: auto;
+  margin-left: auto;
+}
+
+.c2 {
+  box-sizing: border-box;
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: -ms-flexbox;
+  display: flex;
+  -webkit-flex: 0 1 auto;
+  -ms-flex: 0 1 auto;
+  flex: 0 1 auto;
+  -webkit-flex-direction: row;
+  -ms-flex-direction: row;
+  flex-direction: row;
+  -webkit-flex-wrap: wrap;
+  -ms-flex-wrap: wrap;
+  flex-wrap: wrap;
+  margin-right: -0.5rem;
+  margin-left: -0.5rem;
+}
+
+.c3 {
+  font-family: "Libre Franklin",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,Helvetica,sans-serif;
+  font-weight: 500;
+  font-size: 1.5rem;
+  font-weight: 400;
+  color: ;
+  margin: 1.25rem 0 1.125rem 0;
+  display: inline-block;
+}
+
+.c4 {
+  border: solid;
+  border-width: 0 0.125rem 0.125rem 0;
+  display: inline-block;
+  padding: 0.125rem;
+  -webkit-transform: rotate(-45deg);
+  -ms-transform: rotate(-45deg);
+  transform: rotate(-45deg);
+  margin: 0.1875rem 0.625rem 0.1875rem 0.625rem;
+}
+
+.c0 {
+  border-bottom: solid 0.0625rem;
+}
+
+@media only screen and (min-width:48em) {
+  .c1 {
+    width: 46rem;
+  }
+}
+
+@media only screen and (min-width:64em) {
+  .c1 {
+    width: 61rem;
+  }
+}
+
+@media only screen and (min-width:75em) {
+  .c1 {
+    width: 76rem;
+  }
+}
+
+<div
+  className="c0"
+>
+  <div
+    className="c1"
+  >
+    <div
+      className="c2"
+      name="breadcrum"
+    >
+      <div>
+        <h2
+          className="c3"
+          name="breadcrum-item"
+        >
+          Dashboard
+        </h2>
+        <div
+          className="c4"
+        />
+      </div>
+    </div>
+  </div>
+</div>
+`;

packages/cp-frontend/test/unit/containers/navigation/__snapshots__/header.js.snap

@@ -0,0 +1,123 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`renders <Header /> without throwing 1`] = `
+.c2 {
+  font-family: "Libre Franklin",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,Helvetica,sans-serif;
+  font-weight: 500;
+  font-size: 1.5rem;
+  text-transform: uppercase;
+  color: ;
+  font-size: 1.8125rem;
+  margin: 0;
+}
+
+.c1 {
+  -webkit-flex: 1 1 auto;
+  -ms-flex: 1 1 auto;
+  flex: 1 1 auto;
+  -webkit-align-self: stretch;
+  -ms-flex-item-align: stretch;
+  align-self: stretch;
+  -webkit-order: 0;
+  -ms-flex-order: 0;
+  order: 0;
+  padding: 0.9375rem 0;
+}
+
+.c5 {
+  font-family: "Libre Franklin",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,Helvetica,sans-serif;
+  font-weight: 400;
+  line-height: 1.5rem;
+  font-size: 0.9375rem;
+  font-weight: 600;
+  text-align: center;
+  color: ;
+  margin: 0;
+}
+
+.c4 {
+  -webkit-flex: 0 1 auto;
+  -ms-flex: 0 1 auto;
+  flex: 0 1 auto;
+  -webkit-align-self: auto;
+  -ms-flex-item-align: auto;
+  align-self: auto;
+  -webkit-order: 0;
+  -ms-flex-order: 0;
+  order: 0;
+  padding: 0.9375rem 0;
+  width: 6.25rem;
+  max-width: 6.25rem;
+}
+
+.c0 {
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: -ms-flexbox;
+  display: flex;
+  -webkit-flex-direction: row;
+  -ms-flex-direction: row;
+  flex-direction: row;
+  -webkit-flex-wrap: nowrap;
+  -ms-flex-wrap: nowrap;
+  flex-wrap: nowrap;
+  -webkit-box-pack: space-between;
+  -webkit-justify-content: space-between;
+  -ms-flex-pack: space-between;
+  justify-content: space-between;
+  -webkit-align-content: stretch;
+  -ms-flex-line-pack: stretch;
+  align-content: stretch;
+  -webkit-align-items: stretch;
+  -webkit-box-align: stretch;
+  -ms-flex-align: stretch;
+  align-items: stretch;
+  background-color: ;
+  max-height: 3.3125rem;
+  min-height: 3.3125rem;
+  padding: 0 1.125rem;
+  line-height: 1.5625rem;
+}
+
+.c3 {
+  border-style: none;
+  width: 5.4375rem;
+  height: 1.5625rem;
+}
+
+<div
+  className="c0"
+>
+  <div
+    className="c1"
+  >
+    <h2
+      className="c2"
+    >
+      <a
+        href="/"
+        onClick={[Function]}
+      >
+        <img
+          className="c3"
+          src="test-file-mock"
+        />
+      </a>
+    </h2>
+  </div>
+  <div
+    className="c4"
+  >
+    <p
+      className="c5"
+    />
+  </div>
+  <div
+    className="c4"
+  >
+    <p
+      className="c5"
+    />
+  </div>
+</div>
+`;

packages/cp-frontend/test/unit/containers/navigation/__snapshots__/menu.js.snap

@@ -0,0 +1,3 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`renders <Menu /> without throwing 1`] = `null`;

packages/cp-frontend/test/unit/containers/navigation/breadcrumb.js

@@ -0,0 +1,29 @@
+
+/**
+ * @jest-environment jsdom
+ */
+
+import React from 'react';
+import renderer from 'react-test-renderer';
+import 'jest-styled-components';
+
+import { Breadcrumb } from '@containers/navigation/breadcrumb.js';
+import { Router, Store } from '../../mocks';
+
+it('renders <Breadcrumb /> without throwing', () => {
+  const props = {
+    location: {
+      pathname: ''
+    }
+  }
+  const tree = renderer
+    .create(
+      <Store>
+        <Router>
+          <Breadcrumb { ...props } />
+        </Router>
+      </Store>
+    )
+    .toJSON();
+  expect(tree).toMatchSnapshot();
+});

packages/cp-frontend/test/unit/containers/navigation/header.js

@@ -0,0 +1,24 @@
+
+/**
+ * @jest-environment jsdom
+ */
+
+import React from 'react';
+import renderer from 'react-test-renderer';
+import 'jest-styled-components';
+
+import { Header } from '@containers/navigation/header.js';
+import { Router, Store } from '../../mocks';
+
+it('renders <Header /> without throwing', () => {
+  const tree = renderer
+    .create(
+      <Store>
+        <Router>
+          <Header />
+        </Router>
+      </Store>
+    )
+    .toJSON();
+  expect(tree).toMatchSnapshot();
+});

packages/cp-frontend/test/unit/containers/navigation/menu.js

@@ -0,0 +1,24 @@
+
+/**
+ * @jest-environment jsdom
+ */
+
+import React from 'react';
+import renderer from 'react-test-renderer';
+import 'jest-styled-components';
+
+import { Menu } from '@containers/navigation/menu.js';
+import { Router, Store } from '../../mocks';
+
+it('renders <Menu /> without throwing', () => {
+  const tree = renderer
+    .create(
+      <Store>
+        <Router>
+          <Menu />
+        </Router>
+      </Store>
+    )
+    .toJSON();
+  expect(tree).toMatchSnapshot();
+});

packages/cp-frontend/test/unit/containers/navigation/not-found-hoc.js

@@ -0,0 +1,24 @@
+
+/**
+ * @jest-environment jsdom
+ */
+
+import React from 'react';
+import renderer from 'react-test-renderer';
+import 'jest-styled-components';
+
+import NotFoundHoc from '@containers/navigation/not-found-hoc.js';
+import { Router, Store } from '../../mocks';
+
+xit('renders <NotFoundHoc /> without throwing', () => {
+  const tree = renderer
+    .create(
+      <Store>
+        <Router>
+          <NotFoundHoc />
+        </Router>
+      </Store>
+    )
+    .toJSON();
+  expect(tree).toMatchSnapshot();
+});

packages/cp-frontend/test/unit/containers/service/__snapshots__/delete.js.snap

@@ -0,0 +1,335 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`renders <ServiceDelete /> without throwing 1`] = `
+.c4 {
+  font-family: sans-serif;
+  font-size: 100%;
+  line-height: 1.15;
+  margin: 0;
+  overflow: visible;
+  text-transform: none;
+  -webkit-appearance: button;
+  -moz-appearance: button;
+  appearance: button;
+  min-width: 7.5rem;
+  box-sizing: border-box;
+  display: inline-block;
+  -webkit-box-pack: center;
+  -webkit-justify-content: center;
+  -ms-flex-pack: center;
+  justify-content: center;
+  -webkit-align-items: center;
+  -webkit-box-align: center;
+  -ms-flex-align: center;
+  align-items: center;
+  margin: 0;
+  padding: 0.9375rem 1.125rem;
+  position: relative;
+  font-family: "Libre Franklin",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,Helvetica,sans-serif;
+  font-weight: 400;
+  font-size: 0.9375rem;
+  text-align: center;
+  font-style: normal;
+  font-stretch: normal;
+  line-height: normal;
+  -webkit-letter-spacing: normal;
+  -moz-letter-spacing: normal;
+  -ms-letter-spacing: normal;
+  letter-spacing: normal;
+  text-decoration: none;
+  white-space: nowrap;
+  vertical-align: middle;
+  touch-action: manipulation;
+  cursor: pointer;
+  color: ;
+  background-image: none;
+  background-color: ;
+  border-radius: 0.25rem;
+  border: solid 0.0625rem;
+}
+
+.c4::-moz-focus-inner,
+.c4[type="button"]::-moz-focus-inner,
+.c4[type="reset"]::-moz-focus-inner,
+.c4[type="submit"]::-moz-focus-inner {
+  border-style: none;
+  padding: 0;
+}
+
+.c4:-moz-focusring,
+.c4[type="button"]:-moz-focusring,
+.c4[type="reset"]:-moz-focusring,
+.c4[type="submit"]:-moz-focusring {
+  outline: 0.0625rem dotted ButtonText;
+}
+
+.c4:focus {
+  outline: 0;
+  text-decoration: none;
+  background-color: ;
+  border-color: ;
+}
+
+.c4:hover {
+  background-color: ;
+  border: solid 0.0625rem;
+}
+
+.c4:active,
+.c4:active:hover,
+.c4:active:focus {
+  background-image: none;
+  outline: 0;
+  background-color: ;
+  border-color: ;
+}
+
+.c4[disabled] {
+  cursor: not-allowed;
+  pointer-events: none;
+}
+
+.c4 + button {
+  margin-left: 1.25rem;
+}
+
+.c9 {
+  font-family: sans-serif;
+  font-size: 100%;
+  line-height: 1.15;
+  margin: 0;
+  overflow: visible;
+  text-transform: none;
+  -webkit-appearance: button;
+  -moz-appearance: button;
+  appearance: button;
+  min-width: 7.5rem;
+  box-sizing: border-box;
+  display: inline-block;
+  -webkit-box-pack: center;
+  -webkit-justify-content: center;
+  -ms-flex-pack: center;
+  justify-content: center;
+  -webkit-align-items: center;
+  -webkit-box-align: center;
+  -ms-flex-align: center;
+  align-items: center;
+  margin: 0;
+  padding: 0.9375rem 1.125rem;
+  position: relative;
+  font-family: "Libre Franklin",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,Helvetica,sans-serif;
+  font-weight: 400;
+  font-size: 0.9375rem;
+  text-align: center;
+  font-style: normal;
+  font-stretch: normal;
+  line-height: normal;
+  -webkit-letter-spacing: normal;
+  -moz-letter-spacing: normal;
+  -ms-letter-spacing: normal;
+  letter-spacing: normal;
+  text-decoration: none;
+  white-space: nowrap;
+  vertical-align: middle;
+  touch-action: manipulation;
+  cursor: pointer;
+  color: ;
+  background-image: none;
+  background-color: ;
+  border-radius: 0.25rem;
+  border: solid 0.0625rem;
+  color: ;
+  background-color: ;
+  border-color: ;
+}
+
+.c9::-moz-focus-inner,
+.c9[type="button"]::-moz-focus-inner,
+.c9[type="reset"]::-moz-focus-inner,
+.c9[type="submit"]::-moz-focus-inner {
+  border-style: none;
+  padding: 0;
+}
+
+.c9:-moz-focusring,
+.c9[type="button"]:-moz-focusring,
+.c9[type="reset"]:-moz-focusring,
+.c9[type="submit"]:-moz-focusring {
+  outline: 0.0625rem dotted ButtonText;
+}
+
+.c9:focus {
+  outline: 0;
+  text-decoration: none;
+  background-color: ;
+  border-color: ;
+}
+
+.c9:hover {
+  background-color: ;
+  border: solid 0.0625rem;
+}
+
+.c9:active,
+.c9:active:hover,
+.c9:active:focus {
+  background-image: none;
+  outline: 0;
+  background-color: ;
+  border-color: ;
+}
+
+.c9[disabled] {
+  cursor: not-allowed;
+  pointer-events: none;
+}
+
+.c9:focus {
+  background-color: ;
+  border-color: ;
+}
+
+.c9:hover {
+  background-color: ;
+  border-color: ;
+}
+
+.c9:active,
+.c9:active:hover,
+.c9:active:focus {
+  background-color: ;
+  border-color: ;
+}
+
+.c9 + button {
+  margin-left: 1.25rem;
+}
+
+.c6 {
+  font-family: "Libre Franklin",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,Helvetica,sans-serif;
+  font-weight: 500;
+  font-size: 1.5rem;
+}
+
+.c8 {
+  font-family: "Libre Franklin",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,Helvetica,sans-serif;
+  font-weight: 400;
+  line-height: 1.5rem;
+  font-size: 0.9375rem;
+}
+
+.c3 {
+  background-color: #FFFFFF;
+  padding: 0.75rem;
+  min-width: auto;
+  border: none;
+  box-shadow: none;
+}
+
+.c3:hover,
+.c3:focus,
+.c3:active,
+.c3:active:hover,
+.c3:active:focus {
+  background-color: #FFFFFF;
+  border: none;
+  box-shadow: none;
+}
+
+.c0 {
+  position: fixed;
+  width: 100%;
+  height: 100%;
+  top: 0;
+  left: 0;
+  background-color: rgba(250,250,250,0.5);
+  z-index: 100;
+}
+
+.c1 {
+  position: absolute;
+  left: 50%;
+  top: 33.33%;
+  padding: 2.25rem 2.25rem 2.25rem 2.25rem;
+  background-color: ;
+  box-shadow: 0 0 0.375rem 0.0625rem rgba(0,0,0,0.1);
+  width: 28.75rem;
+  margin: 0 auto 0 -14.375rem;
+  z-index: 101;
+}
+
+.c2 {
+  position: absolute;
+  right: 0.375rem;
+  top: 0.1875rem;
+}
+
+.c5 {
+  line-height: 1.25;
+  color: ;
+  margin: 0 0 0.75rem 0;
+}
+
+.c7 {
+  color: ;
+  margin: 0.75rem 0 1.875rem 0;
+}
+
+<div
+  className="c0"
+>
+  <div
+    className="c1"
+    width={460}
+  >
+    <button
+      className="c2 c3 c4"
+      onClick={[Function]}
+    >
+      <svg
+        className=""
+        height="12"
+        viewBox="0 0 12 12"
+        width="12"
+        xmlns="http://www.w3.org/2000/svg"
+      >
+        <title>
+          icon: close
+        </title>
+        <path
+          d="M7.314 5.9l4.242-4.243L10.142.243 5.9 4.485 1.657.243.243 1.657l4.242 4.242-4.242 4.243 1.414 1.414 4.242-4.242 4.243 4.242 1.414-1.414L7.314 5.9z"
+          fill="#494949"
+          fillRule="evenodd"
+        />
+      </svg>
+    </button>
+    <div>
+      <h2
+        className="c5 c6"
+      >
+        Deleting a service: 
+        <br />
+         
+        Nginx
+      </h2>
+      <p
+        className="c7 c8"
+      >
+        Deleting a service can lead to irreversible loss of data and failures in your application. Are you sure you want to continue?
+      </p>
+      <button
+        className="c9"
+        onClick={[Function]}
+      >
+        Cancel
+      </button>
+      <button
+        className="c4"
+        onClick={[Function]}
+      >
+        Delete service
+      </button>
+    </div>
+  </div>
+</div>
+`;

packages/cp-frontend/test/unit/containers/service/__snapshots__/scale.js.snap

@@ -0,0 +1,733 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`renders <ServiceScale /> without throwing 1`] = `
+.c4 {
+  font-family: sans-serif;
+  font-size: 100%;
+  line-height: 1.15;
+  margin: 0;
+  overflow: visible;
+  text-transform: none;
+  -webkit-appearance: button;
+  -moz-appearance: button;
+  appearance: button;
+  min-width: 7.5rem;
+  box-sizing: border-box;
+  display: inline-block;
+  -webkit-box-pack: center;
+  -webkit-justify-content: center;
+  -ms-flex-pack: center;
+  justify-content: center;
+  -webkit-align-items: center;
+  -webkit-box-align: center;
+  -ms-flex-align: center;
+  align-items: center;
+  margin: 0;
+  padding: 0.9375rem 1.125rem;
+  position: relative;
+  font-family: "Libre Franklin",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,Helvetica,sans-serif;
+  font-weight: 400;
+  font-size: 0.9375rem;
+  text-align: center;
+  font-style: normal;
+  font-stretch: normal;
+  line-height: normal;
+  -webkit-letter-spacing: normal;
+  -moz-letter-spacing: normal;
+  -ms-letter-spacing: normal;
+  letter-spacing: normal;
+  text-decoration: none;
+  white-space: nowrap;
+  vertical-align: middle;
+  touch-action: manipulation;
+  cursor: pointer;
+  color: ;
+  background-image: none;
+  background-color: ;
+  border-radius: 0.25rem;
+  border: solid 0.0625rem;
+}
+
+.c4::-moz-focus-inner,
+.c4[type="button"]::-moz-focus-inner,
+.c4[type="reset"]::-moz-focus-inner,
+.c4[type="submit"]::-moz-focus-inner {
+  border-style: none;
+  padding: 0;
+}
+
+.c4:-moz-focusring,
+.c4[type="button"]:-moz-focusring,
+.c4[type="reset"]:-moz-focusring,
+.c4[type="submit"]:-moz-focusring {
+  outline: 0.0625rem dotted ButtonText;
+}
+
+.c4:focus {
+  outline: 0;
+  text-decoration: none;
+  background-color: ;
+  border-color: ;
+}
+
+.c4:hover {
+  background-color: ;
+  border: solid 0.0625rem;
+}
+
+.c4:active,
+.c4:active:hover,
+.c4:active:focus {
+  background-image: none;
+  outline: 0;
+  background-color: ;
+  border-color: ;
+}
+
+.c4[disabled] {
+  cursor: not-allowed;
+  pointer-events: none;
+}
+
+.c4 + button {
+  margin-left: 1.25rem;
+}
+
+.c18 {
+  font-family: sans-serif;
+  font-size: 100%;
+  line-height: 1.15;
+  margin: 0;
+  overflow: visible;
+  text-transform: none;
+  -webkit-appearance: button;
+  -moz-appearance: button;
+  appearance: button;
+  min-width: 7.5rem;
+  box-sizing: border-box;
+  display: inline-block;
+  -webkit-box-pack: center;
+  -webkit-justify-content: center;
+  -ms-flex-pack: center;
+  justify-content: center;
+  -webkit-align-items: center;
+  -webkit-box-align: center;
+  -ms-flex-align: center;
+  align-items: center;
+  margin: 0;
+  padding: 0.9375rem 1.125rem;
+  position: relative;
+  font-family: "Libre Franklin",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,Helvetica,sans-serif;
+  font-weight: 400;
+  font-size: 0.9375rem;
+  text-align: center;
+  font-style: normal;
+  font-stretch: normal;
+  line-height: normal;
+  -webkit-letter-spacing: normal;
+  -moz-letter-spacing: normal;
+  -ms-letter-spacing: normal;
+  letter-spacing: normal;
+  text-decoration: none;
+  white-space: nowrap;
+  vertical-align: middle;
+  touch-action: manipulation;
+  cursor: pointer;
+  color: ;
+  background-image: none;
+  background-color: ;
+  border-radius: 0.25rem;
+  border: solid 0.0625rem;
+  color: ;
+  background-color: ;
+  border-color: ;
+}
+
+.c18::-moz-focus-inner,
+.c18[type="button"]::-moz-focus-inner,
+.c18[type="reset"]::-moz-focus-inner,
+.c18[type="submit"]::-moz-focus-inner {
+  border-style: none;
+  padding: 0;
+}
+
+.c18:-moz-focusring,
+.c18[type="button"]:-moz-focusring,
+.c18[type="reset"]:-moz-focusring,
+.c18[type="submit"]:-moz-focusring {
+  outline: 0.0625rem dotted ButtonText;
+}
+
+.c18:focus {
+  outline: 0;
+  text-decoration: none;
+  background-color: ;
+  border-color: ;
+}
+
+.c18:hover {
+  background-color: ;
+  border: solid 0.0625rem;
+}
+
+.c18:active,
+.c18:active:hover,
+.c18:active:focus {
+  background-image: none;
+  outline: 0;
+  background-color: ;
+  border-color: ;
+}
+
+.c18[disabled] {
+  cursor: not-allowed;
+  pointer-events: none;
+}
+
+.c18:focus {
+  background-color: ;
+  border-color: ;
+}
+
+.c18:hover {
+  background-color: ;
+  border-color: ;
+}
+
+.c18:active,
+.c18:active:hover,
+.c18:active:focus {
+  background-color: ;
+  border-color: ;
+}
+
+.c18 + button {
+  margin-left: 1.25rem;
+}
+
+.c19 {
+  font-family: sans-serif;
+  font-size: 100%;
+  line-height: 1.15;
+  margin: 0;
+  overflow: visible;
+  text-transform: none;
+  -webkit-appearance: button;
+  -moz-appearance: button;
+  appearance: button;
+  min-width: 7.5rem;
+  box-sizing: border-box;
+  display: inline-block;
+  -webkit-box-pack: center;
+  -webkit-justify-content: center;
+  -ms-flex-pack: center;
+  justify-content: center;
+  -webkit-align-items: center;
+  -webkit-box-align: center;
+  -ms-flex-align: center;
+  align-items: center;
+  margin: 0;
+  padding: 0.9375rem 1.125rem;
+  position: relative;
+  font-family: "Libre Franklin",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,Helvetica,sans-serif;
+  font-weight: 400;
+  font-size: 0.9375rem;
+  text-align: center;
+  font-style: normal;
+  font-stretch: normal;
+  line-height: normal;
+  -webkit-letter-spacing: normal;
+  -moz-letter-spacing: normal;
+  -ms-letter-spacing: normal;
+  letter-spacing: normal;
+  text-decoration: none;
+  white-space: nowrap;
+  vertical-align: middle;
+  touch-action: manipulation;
+  cursor: pointer;
+  color: ;
+  background-image: none;
+  background-color: ;
+  border-radius: 0.25rem;
+  border: solid 0.0625rem;
+  color: ;
+  background-color: ;
+  border-color: ;
+  color: ;
+  background-color: ;
+  border-color: ;
+  box-shadow: 0 0.125rem 0 0 rgba(0,0,0,0.05);
+}
+
+.c19::-moz-focus-inner,
+.c19[type="button"]::-moz-focus-inner,
+.c19[type="reset"]::-moz-focus-inner,
+.c19[type="submit"]::-moz-focus-inner {
+  border-style: none;
+  padding: 0;
+}
+
+.c19:-moz-focusring,
+.c19[type="button"]:-moz-focusring,
+.c19[type="reset"]:-moz-focusring,
+.c19[type="submit"]:-moz-focusring {
+  outline: 0.0625rem dotted ButtonText;
+}
+
+.c19:focus {
+  outline: 0;
+  text-decoration: none;
+  background-color: ;
+  border-color: ;
+}
+
+.c19:hover {
+  background-color: ;
+  border: solid 0.0625rem;
+}
+
+.c19:active,
+.c19:active:hover,
+.c19:active:focus {
+  background-image: none;
+  outline: 0;
+  background-color: ;
+  border-color: ;
+}
+
+.c19[disabled] {
+  cursor: not-allowed;
+  pointer-events: none;
+}
+
+.c19:focus {
+  background-color: ;
+  border-color: ;
+}
+
+.c19:hover {
+  background-color: ;
+  border-color: ;
+}
+
+.c19:active,
+.c19:active:hover,
+.c19:active:focus {
+  background-color: ;
+  border-color: ;
+}
+
+.c19:focus {
+  background-color: ;
+  border-color: ;
+}
+
+.c19:hover {
+  background-color: ;
+  border-color: ;
+}
+
+.c19:active,
+.c19:active:hover,
+.c19:active:focus {
+  background-color: ;
+  border-color: ;
+}
+
+.c19 + button {
+  margin-left: 1.25rem;
+}
+
+.c6 {
+  font-family: "Libre Franklin",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,Helvetica,sans-serif;
+  font-weight: 500;
+  font-size: 1.5rem;
+}
+
+.c8 {
+  font-family: "Libre Franklin",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,Helvetica,sans-serif;
+  font-weight: 400;
+  line-height: 1.5rem;
+  font-size: 0.9375rem;
+}
+
+.c17 {
+  vertical-align: middle;
+}
+
+.c15 {
+  vertical-align: middle;
+}
+
+.c3 {
+  background-color: #FFFFFF;
+  padding: 0.75rem;
+  min-width: auto;
+  border: none;
+  box-shadow: none;
+}
+
+.c3:hover,
+.c3:focus,
+.c3:active,
+.c3:active:hover,
+.c3:active:focus {
+  background-color: #FFFFFF;
+  border: none;
+  box-shadow: none;
+}
+
+.c0 {
+  position: fixed;
+  width: 100%;
+  height: 100%;
+  top: 0;
+  left: 0;
+  background-color: rgba(250,250,250,0.5);
+  z-index: 100;
+}
+
+.c1 {
+  position: absolute;
+  left: 50%;
+  top: 33.33%;
+  padding: 2.25rem 2.25rem 2.25rem 2.25rem;
+  background-color: ;
+  box-shadow: 0 0 0.375rem 0.0625rem rgba(0,0,0,0.1);
+  width: 28.75rem;
+  margin: 0 auto 0 -14.375rem;
+  z-index: 101;
+}
+
+.c2 {
+  position: absolute;
+  right: 0.375rem;
+  top: 0.1875rem;
+}
+
+.c5 {
+  line-height: 1.25;
+  color: ;
+  margin: 0 0 0.75rem 0;
+}
+
+.c7 {
+  color: ;
+  margin: 0.75rem 0 1.875rem 0;
+}
+
+.c14 {
+  font-family: sans-serif;
+  font-size: 100%;
+  line-height: 1.15;
+  margin: 0;
+  overflow: visible;
+  text-transform: none;
+  -webkit-appearance: button;
+  -moz-appearance: button;
+  appearance: button;
+  border-radius: 0.25rem;
+  border: solid 0.0625rem;
+  background-color: ;
+  box-sizing: border-box;
+  display: inline-block;
+  -webkit-box-pack: center;
+  -webkit-justify-content: center;
+  -ms-flex-pack: center;
+  justify-content: center;
+  -webkit-align-items: center;
+  -webkit-box-align: center;
+  -ms-flex-align: center;
+  align-items: center;
+  padding: 0.9375rem 1.125rem;
+  position: relative;
+  text-align: center;
+  line-height: normal;
+  vertical-align: middle;
+  touch-action: manipulation;
+  min-width: 0;
+  cursor: pointer;
+}
+
+.c14::-moz-focus-inner,
+.c14[type="button"]::-moz-focus-inner,
+.c14[type="reset"]::-moz-focus-inner,
+.c14[type="submit"]::-moz-focus-inner {
+  border-style: none;
+  padding: 0;
+}
+
+.c14:-moz-focusring,
+.c14[type="button"]:-moz-focusring,
+.c14[type="reset"]:-moz-focusring,
+.c14[type="submit"]:-moz-focusring {
+  outline: 0.0625rem dotted ButtonText;
+}
+
+.c14 > svg {
+  fill: ;
+}
+
+.c14:focus {
+  outline: 0;
+  background-color: ;
+  border-color: ;
+}
+
+.c14:hover {
+  background-color: ;
+  border-color: ;
+}
+
+.c14:focus,
+.c14:hover > svg {
+  fill: ;
+}
+
+.c14:active,
+.c14:active:hover,
+.c14:active:focus {
+  outline: 0;
+  background-color: ;
+  border-color: ;
+}
+
+.c14:active,
+.c14:active:hover,
+.c14:active:focus > svg {
+  fill: ;
+}
+
+.c14[disabled] {
+  cursor: not-allowed;
+  pointer-events: none;
+  color: ;
+  background-color: ;
+  border-color: ;
+}
+
+.c14[disabled] > svg {
+  fill: ;
+}
+
+.c14[disabled]:focus,
+.c14[disabled]:hover,
+.c14[disabled]:active,
+.c14[disabled]:active:hover,
+.c14[disabled]:active:focus {
+  background-color: ;
+  border-color: ;
+}
+
+.c14[disabled]:focus,
+.c14[disabled]:hover,
+.c14[disabled]:active,
+.c14[disabled]:active:hover,
+.c14[disabled]:active:focus > svg {
+  fill: ;
+}
+
+.c16 {
+  margin-left: 0.375rem;
+}
+
+.c9 {
+  padding: 0.35em 0.75em 0.625em;
+  display: inline-block;
+  margin: 0;
+  padding: 0;
+  border: none;
+  overflow: hidden;
+  width: 100%;
+  height: auto;
+  -webkit-margin-start: 0;
+  -webkit-margin-end: 0;
+  -webkit-padding-before: 0;
+  -webkit-padding-start: 0;
+  -webkit-padding-end: 0;
+  -webkit-padding-after: 0;
+}
+
+.c10 {
+  font-family: "Libre Franklin",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,Helvetica,sans-serif;
+  font-weight: 400;
+  font-size: 0.9375rem;
+  font-style: normal;
+  font-stretch: normal;
+  color: ;
+  float: right;
+}
+
+.c11 {
+  margin-bottom: 1.5rem;
+}
+
+.c13 {
+  box-sizing: border-box;
+  width: 100%;
+  height: 3rem;
+  margin-bottom: 0.5rem;
+  margin-top: 0.5rem;
+  padding: 0.8125rem 1.125rem;
+  border-radius: 0.25rem;
+  background-color: ;
+  border: 0.0625rem solid;
+  font-size: 0.9375rem;
+  line-height: normal !important;
+  font-weight: 400;
+  font-style: normal;
+  font-stretch: normal;
+  color: ;
+  -webkit-appearance: none;
+  -moz-appearance: none;
+  appearance: none;
+  outline: 0;
+}
+
+.c13:focus {
+  border-color: ;
+  outline: 0;
+}
+
+.c12 {
+  width: 7.5rem;
+  margin: 0 0.75rem 0 0;
+  vertical-align: middle;
+}
+
+@media only screen and (min-width:48.0625rem) {
+  .c10 {
+    text-align: right;
+  }
+}
+
+<div
+  className="c0"
+>
+  <div
+    className="c1"
+    width={460}
+  >
+    <button
+      className="c2 c3 c4"
+      onClick={[Function]}
+    >
+      <svg
+        className=""
+        height="12"
+        viewBox="0 0 12 12"
+        width="12"
+        xmlns="http://www.w3.org/2000/svg"
+      >
+        <title>
+          icon: close
+        </title>
+        <path
+          d="M7.314 5.9l4.242-4.243L10.142.243 5.9 4.485 1.657.243.243 1.657l4.242 4.242-4.242 4.243 1.414 1.414 4.242-4.242 4.243 4.242 1.414-1.414L7.314 5.9z"
+          fill="#494949"
+          fillRule="evenodd"
+        />
+      </svg>
+    </button>
+    <form
+      onSubmit={[Function]}
+    >
+      <h2
+        className="c5 c6"
+      >
+        Scaling a service: 
+        <br />
+        Nginx
+      </h2>
+      <p
+        className="c7 c8"
+      >
+        Choose how many instances of a service you want to have running.
+      </p>
+      <fieldset
+        className="c9"
+        style={undefined}
+      >
+        <div>
+          <label
+            className="c10"
+            form="scale-service"
+          />
+          <div
+            className="c11"
+          >
+            <input
+              className="c12 c13"
+              id="CHwcs"
+              name="replicas"
+              onBlur={[Function]}
+              onChange={[Function]}
+              onDragStart={[Function]}
+              onDrop={[Function]}
+              onFocus={[Function]}
+              value={1}
+            />
+            <button
+              className="c14"
+              onClick={[Function]}
+            >
+              <svg
+                className="c15"
+                height="2"
+                verticalAlign="middle"
+                viewBox="0 0 8 2"
+                width="8"
+                xmlns="http://www.w3.org/2000/svg"
+              >
+                <title>
+                  icon: plus
+                </title>
+                <path
+                  d="M0 0h8v2H0z"
+                  fill="#494949"
+                  fillRule="evenodd"
+                />
+              </svg>
+            </button>
+            <button
+              className="c16 c14"
+              onClick={[Function]}
+            >
+              <svg
+                className="c17"
+                height="8"
+                verticalAlign="middle"
+                viewBox="0 0 8 8"
+                width="8"
+                xmlns="http://www.w3.org/2000/svg"
+              >
+                <title>
+                  icon: plus
+                </title>
+                <path
+                  d="M3 3H0v2h3v3h2V5h3V3H5V0H3v3z"
+                  fill="#494949"
+                  fillRule="evenodd"
+                />
+              </svg>
+            </button>
+          </div>
+        </div>
+      </fieldset>
+      <button
+        className="c18"
+        onClick={[Function]}
+      >
+        Cancel
+      </button>
+      <button
+        className="c19"
+        disabled={true}
+        type="submit"
+      >
+        Scale
+      </button>
+    </form>
+  </div>
+</div>
+`;

packages/cp-frontend/test/unit/containers/service/delete.js

@@ -0,0 +1,24 @@
+
+/**
+ * @jest-environment jsdom
+ */
+
+import React from 'react';
+import renderer from 'react-test-renderer';
+import 'jest-styled-components';
+
+import { ServiceDelete } from '@containers/service/delete.js';
+import { Router, Store, service } from '../../mocks';
+
+it('renders <ServiceDelete /> without throwing', () => {
+  const tree = renderer
+    .create(
+      <Store>
+        <Router>
+          <ServiceDelete service={service} />
+        </Router>
+      </Store>
+    )
+    .toJSON();
+  expect(tree).toMatchSnapshot();
+});

packages/cp-frontend/test/unit/containers/service/scale.js

@@ -0,0 +1,24 @@
+
+/**
+ * @jest-environment jsdom
+ */
+
+import React from 'react';
+import renderer from 'react-test-renderer';
+import 'jest-styled-components';
+
+import { ServiceScale } from '@containers/service/scale';
+import { Router, Store, service } from '../../mocks';
+
+it('renders <ServiceScale /> without throwing', () => {
+  const tree = renderer
+    .create(
+      <Store>
+        <Router>
+          <ServiceScale service={service} />
+        </Router>
+      </Store>
+    )
+    .toJSON();
+  expect(tree).toMatchSnapshot();
+});

packages/cp-frontend/test/unit/containers/services/__snapshots__/list.js.snap

@@ -0,0 +1,592 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`renders <ServiceList /> without throwing 1`] = `
+.c9 {
+  color: ;
+  color: ;
+  text-decoration: none;
+}
+
+.c16 {
+  font-family: sans-serif;
+  font-size: 100%;
+  line-height: 1.15;
+  margin: 0;
+  overflow: visible;
+  text-transform: none;
+  -webkit-appearance: button;
+  -moz-appearance: button;
+  appearance: button;
+  min-width: 7.5rem;
+  box-sizing: border-box;
+  display: inline-block;
+  -webkit-box-pack: center;
+  -webkit-justify-content: center;
+  -ms-flex-pack: center;
+  justify-content: center;
+  -webkit-align-items: center;
+  -webkit-box-align: center;
+  -ms-flex-align: center;
+  align-items: center;
+  margin: 0;
+  padding: 0.9375rem 1.125rem;
+  position: relative;
+  font-family: "Libre Franklin",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,Helvetica,sans-serif;
+  font-weight: 400;
+  font-size: 0.9375rem;
+  text-align: center;
+  font-style: normal;
+  font-stretch: normal;
+  line-height: normal;
+  -webkit-letter-spacing: normal;
+  -moz-letter-spacing: normal;
+  -ms-letter-spacing: normal;
+  letter-spacing: normal;
+  text-decoration: none;
+  white-space: nowrap;
+  vertical-align: middle;
+  touch-action: manipulation;
+  cursor: pointer;
+  color: ;
+  background-image: none;
+  background-color: ;
+  border-radius: 0.25rem;
+  border: solid 0.0625rem;
+  border-radius: 0;
+}
+
+.c16::-moz-focus-inner,
+.c16[type="button"]::-moz-focus-inner,
+.c16[type="reset"]::-moz-focus-inner,
+.c16[type="submit"]::-moz-focus-inner {
+  border-style: none;
+  padding: 0;
+}
+
+.c16:-moz-focusring,
+.c16[type="button"]:-moz-focusring,
+.c16[type="reset"]:-moz-focusring,
+.c16[type="submit"]:-moz-focusring {
+  outline: 0.0625rem dotted ButtonText;
+}
+
+.c16:focus {
+  outline: 0;
+  text-decoration: none;
+  background-color: ;
+  border-color: ;
+}
+
+.c16:hover {
+  background-color: ;
+  border: solid 0.0625rem;
+}
+
+.c16:active,
+.c16:active:hover,
+.c16:active:focus {
+  background-image: none;
+  outline: 0;
+  background-color: ;
+  border-color: ;
+}
+
+.c16[disabled] {
+  cursor: not-allowed;
+  pointer-events: none;
+}
+
+.c16 + button {
+  margin-left: 1.25rem;
+}
+
+.c6 {
+  font-size: 0.9375rem;
+  line-height: 1.5;
+  color: ;
+  font-family: "Libre Franklin",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,Helvetica,sans-serif;
+  font-weight: 600;
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: -ms-flexbox;
+  display: flex;
+  -webkit-flex-direction: row;
+  -ms-flex-direction: row;
+  flex-direction: row;
+  -webkit-box-pack: start;
+  -webkit-justify-content: flex-start;
+  -ms-flex-pack: start;
+  justify-content: flex-start;
+  -webkit-flex-grow: 2;
+  -ms-flex-grow: 2;
+  flex-grow: 2;
+  -webkit-flex-basis: 5.625rem;
+  -ms-flex-basis: 5.625rem;
+  flex-basis: 5.625rem;
+  width: 100%;
+  padding: 0.75rem 1.125rem 0 1.125rem;
+  color: ;
+  -webkit-flex-grow: 6;
+  -ms-flex-grow: 6;
+  flex-grow: 6;
+  -webkit-flex-direction: column;
+  -ms-flex-direction: column;
+  flex-direction: column;
+  width: auto;
+  -webkit-box-pack: center;
+  -webkit-justify-content: center;
+  -ms-flex-pack: center;
+  justify-content: center;
+  padding: 0 1.125rem;
+}
+
+.c21 {
+  font-size: 0.9375rem;
+  line-height: 1.5;
+  color: ;
+  font-family: "Libre Franklin",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,Helvetica,sans-serif;
+  font-weight: 600;
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: -ms-flexbox;
+  display: flex;
+  -webkit-flex-direction: row;
+  -ms-flex-direction: row;
+  flex-direction: row;
+  -webkit-box-pack: start;
+  -webkit-justify-content: flex-start;
+  -ms-flex-pack: start;
+  justify-content: flex-start;
+  -webkit-flex-grow: 2;
+  -ms-flex-grow: 2;
+  flex-grow: 2;
+  -webkit-flex-basis: 5.625rem;
+  -ms-flex-basis: 5.625rem;
+  flex-basis: 5.625rem;
+  width: 100%;
+  padding: 0.75rem 1.125rem 0 1.125rem;
+}
+
+.c10 {
+  font-family: "Libre Franklin",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,Helvetica,sans-serif;
+  font-weight: 400;
+  -webkit-flex-grow: 1;
+  -ms-flex-grow: 1;
+  flex-grow: 1;
+  -webkit-flex-basis: 5.625rem;
+  -ms-flex-basis: 5.625rem;
+  flex-basis: 5.625rem;
+}
+
+.c20 {
+  font-family: "Libre Franklin",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,Helvetica,sans-serif;
+  font-weight: 400;
+  -webkit-flex-grow: 1;
+  -ms-flex-grow: 1;
+  flex-grow: 1;
+  -webkit-flex-basis: 5.625rem;
+  -ms-flex-basis: 5.625rem;
+  flex-basis: 5.625rem;
+  padding-bottom: 0.75rem;
+}
+
+.c11 {
+  -webkit-box-pack: start;
+  -webkit-justify-content: flex-start;
+  -ms-flex-pack: start;
+  justify-content: flex-start;
+}
+
+.c2 {
+  box-sizing: border-box;
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: -ms-flexbox;
+  display: flex;
+  -webkit-flex: 0 1 auto;
+  -ms-flex: 0 1 auto;
+  flex: 0 1 auto;
+  -webkit-flex-direction: row;
+  -ms-flex-direction: row;
+  flex-direction: row;
+  -webkit-flex-wrap: wrap;
+  -ms-flex-wrap: wrap;
+  flex-wrap: wrap;
+  margin-right: -0.5rem;
+  margin-left: -0.5rem;
+  position: relative;
+  height: auto;
+  min-height: 7.875rem;
+  margin-bottom: 0.625rem;
+  border: 0.0625rem solid;
+  background-color: ;
+  box-shadow: 0 0.125rem 0 0 rgba(0,0,0,0.05);
+  -webkit-flex-direction: column;
+  -ms-flex-direction: column;
+  flex-direction: column;
+  margin-right: 0rem;
+  margin-left: 0rem;
+}
+
+.c5 {
+  box-sizing: border-box;
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: -ms-flexbox;
+  display: flex;
+  -webkit-flex: 0 1 auto;
+  -ms-flex: 0 1 auto;
+  flex: 0 1 auto;
+  -webkit-flex-direction: row;
+  -ms-flex-direction: row;
+  flex-direction: row;
+  -webkit-flex-wrap: wrap;
+  -ms-flex-wrap: wrap;
+  flex-wrap: wrap;
+  margin-right: -0.5rem;
+  margin-left: -0.5rem;
+  position: relative;
+  height: auto;
+  min-height: 7.875rem;
+  margin-bottom: 0.625rem;
+  border: 0.0625rem solid;
+  background-color: ;
+  box-shadow: 0 0.125rem 0 0 rgba(0,0,0,0.05);
+  -webkit-flex-direction: column;
+  -ms-flex-direction: column;
+  flex-direction: column;
+  margin-right: 0rem;
+  margin-left: 0rem;
+  min-height: auto;
+  height: 3rem;
+  margin-bottom: 1rem;
+  box-shadow: 0 0.125rem 0 0 rgba(0,0,0,0.1);
+}
+
+.c4 {
+  position: absolute;
+  -webkit-flex-direction: row;
+  -ms-flex-direction: row;
+  flex-direction: row;
+  background-color: ;
+  border: solid 0.0625rem;
+  box-shadow: none;
+  width: calc(100% + 0.125rem);
+  margin: -0.0625rem -0.0625rem 0 -0.0625rem;
+}
+
+.c19 {
+  box-sizing: border-box;
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: -ms-flexbox;
+  display: flex;
+  -webkit-flex: 0 1 auto;
+  -ms-flex: 0 1 auto;
+  flex: 0 1 auto;
+  -webkit-flex-direction: row;
+  -ms-flex-direction: row;
+  flex-direction: row;
+  -webkit-flex-wrap: wrap;
+  -ms-flex-wrap: wrap;
+  flex-wrap: wrap;
+  margin-right: -0.5rem;
+  margin-left: -0.5rem;
+  -webkit-flex: 1;
+  -ms-flex: 1;
+  flex: 1;
+  margin: 0;
+  height: auto;
+  padding-top: 0;
+  min-width: auto;
+  -webkit-flex-direction: row;
+  -ms-flex-direction: row;
+  flex-direction: row;
+}
+
+.c14 {
+  display: block;
+  -webkit-flex: 0 0 2.9375rem;
+  -ms-flex: 0 0 2.9375rem;
+  flex: 0 0 2.9375rem;
+  border-left: 0.0625rem solid;
+  box-sizing: border-box;
+  border-left-color: ;
+}
+
+.c15 {
+  position: relative;
+  border-width: 0;
+  box-shadow: none;
+  width: 100%;
+  min-width: 2.875rem !important;
+  height: 7.75rem;
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: -ms-flexbox;
+  display: flex;
+  -webkit-box-pack: center;
+  -webkit-justify-content: center;
+  -ms-flex-pack: center;
+  justify-content: center;
+  -webkit-align-items: center;
+  -webkit-box-align: center;
+  -ms-flex-align: center;
+  align-items: center;
+  overflow-x: visible;
+  overflow-y: visible;
+  height: 2.875rem;
+}
+
+.c15:focus {
+  border-width: 0;
+}
+
+.c15:hover {
+  border-width: 0;
+}
+
+.c15:active,
+.c15:active:hover,
+.c15:active:focus {
+  border-width: 0;
+}
+
+.c17 {
+  position: absolute;
+  left: 50%;
+  top: 35%;
+}
+
+.c18 {
+  margin: 0 0 0.125rem -0.125rem;
+  border-radius: 50%;
+  background-color: ;
+  width: 0.25rem;
+  height: 0.25rem;
+}
+
+.c13 {
+  font-family: "Libre Franklin",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,Helvetica,sans-serif;
+  font-weight: 400;
+  font-size: 0.9375rem;
+  font-style: normal;
+  font-stretch: normal;
+  color: ;
+  display: inline-block;
+  color: undefined;
+  margin-left: 1.5rem;
+}
+
+.c13::first-letter {
+  text-transform: capitalize;
+}
+
+.c12 {
+  position: absolute;
+}
+
+.c12 > svg {
+  fill: undefined;
+}
+
+.c0 {
+  margin-right: auto;
+  margin-left: auto;
+  padding-top: 1.1875rem;
+  -webkit-flex: 1 1 auto;
+  -ms-flex: 1 1 auto;
+  flex: 1 1 auto;
+  display: block;
+  -webkit-flex-flow: column;
+  -ms-flex-flow: column;
+  flex-flow: column;
+}
+
+.c22 {
+  display: inline-block;
+  margin: 0 0 0.9375rem 0;
+  height: 3.375rem;
+  width: 12.5rem;
+}
+
+.c23 {
+  font-family: "Libre Franklin",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,Helvetica,sans-serif;
+  font-weight: 400;
+  line-height: 1.5rem;
+  font-size: 0.9375rem;
+  margin: 0 0 0.375rem 0;
+  font-size: 0.8125rem;
+  line-height: 0.8125rem;
+}
+
+.c3 {
+  position: relative;
+}
+
+.c7 {
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: -ms-flexbox;
+  display: flex;
+  -webkit-flex-direction: row;
+  -ms-flex-direction: row;
+  flex-direction: row;
+  -webkit-box-pack: left;
+  -webkit-justify-content: left;
+  -ms-flex-pack: left;
+  justify-content: left;
+  -webkit-align-items: center;
+  -webkit-box-align: center;
+  -ms-flex-align: center;
+  align-items: center;
+}
+
+.c8 {
+  color: ;
+}
+
+.c1 {
+  position: relative;
+}
+
+@media only screen and (min-width:48em) {
+  .c0 {
+    width: 46rem;
+  }
+}
+
+@media only screen and (min-width:64em) {
+  .c0 {
+    width: 61rem;
+  }
+}
+
+@media only screen and (min-width:75em) {
+  .c0 {
+    width: 76rem;
+  }
+}
+
+<div
+  className="c0"
+>
+  <div
+    className="c1"
+  >
+    <div
+      className="c2"
+      name="card"
+    >
+      <div
+        className="c3 c4 c5"
+        name="card-header"
+      >
+        <div
+          className="c6"
+          name="container"
+        >
+          <div
+            className="c7"
+          >
+            <a
+              active={undefined}
+              className="c8 c9"
+              href="/deployment-groups/wordpress-blog-example/services/nginx"
+              onClick={[Function]}
+              secondary={true}
+            >
+              Nginx
+            </a>
+          </div>
+        </div>
+        <div
+          className="c10 c6"
+          name="container"
+        >
+          <div
+            className="c11"
+          >
+            <div>
+              <div
+                className="c12"
+                color="disabled"
+              >
+                <svg
+                  className=""
+                  height="9"
+                  viewBox="0 0 18 9"
+                  width="18"
+                  xmlns="http://www.w3.org/2000/svg"
+                >
+                  <title>
+                    icon: instances
+                  </title>
+                  <path
+                    d="M4.5 0a4.5 4.5 0 1 0 0 9 4.5 4.5 0 0 0 0-9m8.59 0c-.375 0-.739.047-1.09.12 2.184.456 3.818 2.239 3.818 4.38S14.184 8.424 12 8.88c.351.073.715.12 1.09.12C15.803 9 18 6.985 18 4.5S15.802 0 13.09 0M14 4.5C14 6.985 11.802 9 9.09 9c-.375 0-.739-.047-1.09-.12 2.184-.456 3.818-2.239 3.818-4.38S10.184.576 8 .12C8.351.047 8.715 0 9.09 0 11.803 0 14 2.015 14 4.5"
+                    fillRule="evenodd"
+                  />
+                </svg>
+              </div>
+              <label
+                className="c13"
+                color="disabled"
+              >
+                1 instance
+              </label>
+            </div>
+          </div>
+        </div>
+        <nav
+          className="c14"
+          name="card-options"
+        >
+          <button
+            className="c15 c16"
+            onClick={[Function]}
+          >
+            <div
+              className="c17"
+            >
+              <div
+                className="c18"
+              />
+              <div
+                className="c18"
+              />
+              <div
+                className="c18"
+              />
+            </div>
+          </button>
+        </nav>
+      </div>
+      <div
+        className="c19"
+        name="card-view"
+      >
+        <div
+          className="c20 c21"
+          name="container"
+        >
+          <div
+            className="c11"
+          >
+            <div
+              className="c22"
+            >
+              <p
+                className="c23"
+              >
+                1
+                            instance
+                            running
+              </p>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+</div>
+`;

packages/cp-frontend/test/unit/containers/services/__snapshots__/menu.js.snap

@@ -0,0 +1,301 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`renders <ServicesMenu /> without throwing 1`] = `
+.c3 {
+  box-sizing: border-box;
+  -webkit-flex: 0 0 auto;
+  -ms-flex: 0 0 auto;
+  flex: 0 0 auto;
+  padding-right: 0.5rem;
+  padding-left: 0.5rem;
+}
+
+.c0 {
+  margin-right: auto;
+  margin-left: auto;
+  padding-top: 1.1875rem;
+}
+
+.c4 {
+  padding: 0.35em 0.75em 0.625em;
+  display: inline-block;
+  margin: 0;
+  padding: 0;
+  border: none;
+  overflow: hidden;
+  width: 100%;
+  height: auto;
+  -webkit-margin-start: 0;
+  -webkit-margin-end: 0;
+  -webkit-padding-before: 0;
+  -webkit-padding-start: 0;
+  -webkit-padding-end: 0;
+  -webkit-padding-after: 0;
+}
+
+.c9 {
+  font-family: sans-serif;
+  font-size: 100%;
+  line-height: 1.15;
+  margin: 0;
+  overflow: visible;
+  display: none;
+}
+
+.c9[type="checkbox"],
+.c9[type="radio"] {
+  box-sizing: border-box;
+  padding: 0;
+}
+
+.c9[type="number"]::-webkit-inner-spin-button,
+.c9[type="number"]::-webkit-outer-spin-button {
+  height: auto;
+}
+
+.c9[type="search"] {
+  -webkit-appearance: textfield;
+  -moz-appearance: textfield;
+  appearance: textfield;
+  outline-offset: -0.125rem;
+}
+
+.c9[type="search"]::-webkit-search-cancel-button,
+.c9[type="search"]::-webkit-search-decoration {
+  -webkit-appearance: none;
+  -moz-appearance: none;
+  appearance: none;
+}
+
+.c9::-webkit-file-upload-button {
+  -webkit-appearance: button;
+  -moz-appearance: button;
+  appearance: button;
+  font: inherit;
+}
+
+.c9:checked + label {
+  border-radius: 0.25rem;
+  background-color: ;
+  box-shadow: 0 0.125rem 0 0 rgba(0,0,0,0.05);
+  color: ;
+}
+
+.c9:selected + label {
+  border-radius: 0.25rem;
+  background-color: ;
+  box-shadow: 0 0.125rem 0 0 rgba(0,0,0,0.05);
+  color: ;
+}
+
+.c9:disabled + label {
+  color: ;
+}
+
+.c10 {
+  font-family: "Libre Franklin",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,Helvetica,sans-serif;
+  font-weight: 400;
+  position: absolute;
+  box-sizing: border-box;
+  width: 7.5rem;
+  height: 3rem;
+  top: 0;
+  left: 0;
+  text-align: center;
+  padding-top: 0.75rem;
+  color: ;
+}
+
+.c10:hover {
+  color: ;
+}
+
+.c8 {
+  position: relative;
+  vertical-align: text-bottom;
+  width: 7.5rem;
+  height: 3rem;
+}
+
+.c7 {
+  display: inline-block;
+  list-style-type: none;
+  vertical-align: text-bottom;
+  border-top: 0.0625rem solid;
+  border-bottom: 0.0625rem solid;
+  border-left: 0.0625rem solid;
+}
+
+.c7:first-of-type {
+  border-radius: 0.25rem 0 0 0.25rem;
+}
+
+.c7:last-of-type {
+  border-radius: 0 0.25rem 0.25rem 0;
+  border-right: 0.0625rem solid;
+}
+
+.c6 {
+  display: inline-block;
+  margin: 0;
+  padding: 0;
+  box-shadow: 0 0.125rem 0 0 rgba(0,0,0,0.05);
+}
+
+.c1 {
+  font-family: "Libre Franklin",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,Helvetica,sans-serif;
+  font-weight: 500;
+  font-size: 1.5rem;
+  margin-top: 0.125rem;
+  -webkit-flex: 0 0 auto;
+  -ms-flex: 0 0 auto;
+  flex: 0 0 auto;
+  -webkit-align-self: stretch;
+  -ms-flex-item-align: stretch;
+  align-self: stretch;
+}
+
+.c5 {
+  box-sizing: border-box;
+  color: inherit;
+  display: table;
+  max-width: 100%;
+  padding: 0;
+  white-space: normal;
+  font-family: "Libre Franklin",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,Helvetica,sans-serif;
+  font-weight: 600;
+  float: left;
+  padding-top: 0.75rem;
+  margin-right: 0.5625rem;
+}
+
+.c2 {
+  box-sizing: border-box;
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: -ms-flexbox;
+  display: flex;
+  -webkit-flex: 0 1 auto;
+  -ms-flex: 0 1 auto;
+  flex: 0 1 auto;
+  -webkit-flex-direction: row;
+  -ms-flex-direction: row;
+  flex-direction: row;
+  -webkit-flex-wrap: wrap;
+  -ms-flex-wrap: wrap;
+  flex-wrap: wrap;
+  margin-right: -0.5rem;
+  margin-left: -0.5rem;
+  margin-bottom: 1.125rem;
+}
+
+@media only screen and (min-width:0em) {
+  .c3 {
+    -webkit-flex-basis: 41.66666666666667%;
+    -ms-flex-basis: 41.66666666666667%;
+    flex-basis: 41.66666666666667%;
+    max-width: 41.66666666666667%;
+    display: block;
+  }
+}
+
+@media only screen and (min-width:48em) {
+  .c0 {
+    width: 46rem;
+  }
+}
+
+@media only screen and (min-width:64em) {
+  .c0 {
+    width: 61rem;
+  }
+}
+
+@media only screen and (min-width:75em) {
+  .c0 {
+    width: 76rem;
+  }
+}
+
+<div
+  className="c0"
+>
+  <h2
+    className="c1"
+  >
+    Services
+  </h2>
+  <div
+    className="c2"
+  >
+    <div
+      className="c3"
+    >
+      <fieldset
+        className="c4"
+        style={undefined}
+      >
+        <div>
+          <legend
+            className="c5"
+          >
+            View
+          </legend>
+          <ul
+            className="c6"
+          >
+            <li
+              className="c7"
+              id="ceXTk"
+            >
+              <div
+                className="c8"
+              >
+                <input
+                  checked={false}
+                  className="c9"
+                  id="bnZLXP"
+                  name="service-view"
+                  onChange={[Function]}
+                  type="radio"
+                  value="list"
+                />
+                <label
+                  className="c10"
+                  htmlFor="bnZLXP"
+                >
+                  List
+                </label>
+              </div>
+            </li>
+            <li
+              className="c7"
+              id="ceXTk"
+            >
+              <div
+                className="c8"
+              >
+                <input
+                  checked={false}
+                  className="c9"
+                  id="bxmoz"
+                  name="service-view"
+                  onChange={[Function]}
+                  type="radio"
+                  value="topology"
+                />
+                <label
+                  className="c10"
+                  htmlFor="bxmoz"
+                >
+                  Topology
+                </label>
+              </div>
+            </li>
+          </ul>
+        </div>
+      </fieldset>
+    </div>
+  </div>
+</div>
+`;

packages/cp-frontend/test/unit/containers/services/__snapshots__/quick-actions.js.snap

@@ -0,0 +1,254 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`renders <ServicesQuickActions /> without throwing 1`] = `
+.c5 {
+  font-family: sans-serif;
+  font-size: 100%;
+  line-height: 1.15;
+  margin: 0;
+  overflow: visible;
+  text-transform: none;
+  -webkit-appearance: button;
+  -moz-appearance: button;
+  appearance: button;
+  min-width: 7.5rem;
+  box-sizing: border-box;
+  display: inline-block;
+  -webkit-box-pack: center;
+  -webkit-justify-content: center;
+  -ms-flex-pack: center;
+  justify-content: center;
+  -webkit-align-items: center;
+  -webkit-box-align: center;
+  -ms-flex-align: center;
+  align-items: center;
+  margin: 0;
+  padding: 0.9375rem 1.125rem;
+  position: relative;
+  font-family: "Libre Franklin",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,Helvetica,sans-serif;
+  font-weight: 400;
+  font-size: 0.9375rem;
+  text-align: center;
+  font-style: normal;
+  font-stretch: normal;
+  line-height: normal;
+  -webkit-letter-spacing: normal;
+  -moz-letter-spacing: normal;
+  -ms-letter-spacing: normal;
+  letter-spacing: normal;
+  text-decoration: none;
+  white-space: nowrap;
+  vertical-align: middle;
+  touch-action: manipulation;
+  cursor: pointer;
+  color: ;
+  background-image: none;
+  background-color: ;
+  border-radius: 0.25rem;
+  border: solid 0.0625rem;
+}
+
+.c5::-moz-focus-inner,
+.c5[type="button"]::-moz-focus-inner,
+.c5[type="reset"]::-moz-focus-inner,
+.c5[type="submit"]::-moz-focus-inner {
+  border-style: none;
+  padding: 0;
+}
+
+.c5:-moz-focusring,
+.c5[type="button"]:-moz-focusring,
+.c5[type="reset"]:-moz-focusring,
+.c5[type="submit"]:-moz-focusring {
+  outline: 0.0625rem dotted ButtonText;
+}
+
+.c5:focus {
+  outline: 0;
+  text-decoration: none;
+  background-color: ;
+  border-color: ;
+}
+
+.c5:hover {
+  background-color: ;
+  border: solid 0.0625rem;
+}
+
+.c5:active,
+.c5:active:hover,
+.c5:active:focus {
+  background-image: none;
+  outline: 0;
+  background-color: ;
+  border-color: ;
+}
+
+.c5[disabled] {
+  cursor: not-allowed;
+  pointer-events: none;
+}
+
+.c5 + button {
+  margin-left: 1.25rem;
+}
+
+.c1 {
+  position: absolute;
+  top: auto;
+  left: auto;
+  bottom: ;
+  right: auto;
+}
+
+.c1:focus {
+  outline: none;
+}
+
+.c2 {
+  position: relative;
+  display: inline-block;
+  top: 0.3125rem;
+  left: -50%;
+  margin: 0;
+  padding: 0.75rem 0;
+  background-color: ;
+  border: 0.0625rem solid;
+  box-shadow: 0 0.125rem 0.375rem 0.0625rem rgba(0,0,0,0.1);
+  border-radius: 0.25rem;
+  z-index: 1000;
+}
+
+.c2:after,
+.c2:before {
+  content: "";
+  position: absolute;
+  bottom: 100%;
+  left: 50%;
+  height: 0;
+  width: 0;
+  border: solid transparent;
+}
+
+.c2:after {
+  border-bottom-color: #FFFFFF;
+  border-width: 0.1875rem;
+  margin-left: -0.1875rem;
+}
+
+.c2:before {
+  border-bottom-color: #D8D8D8;
+  border-width: 0.3125rem;
+  margin-left: -0.3125rem;
+}
+
+.c4 {
+  width: 100%;
+  padding: 0.375rem 1.125rem;
+  background-color: #FFFFFF;
+  color: #464646;
+  text-align: left;
+  border: none;
+  box-shadow: none;
+}
+
+.c4:focus {
+  background-color: #FFFFFF;
+  color: #3B46CC;
+  border: none;
+}
+
+.c4:hover {
+  background-color: #FFFFFF;
+  color: #3B46CC;
+  border: none;
+}
+
+.c4:active,
+.c4:active:hover,
+.c4:active:focus {
+  background-color: #FFFFFF;
+  color: #3B46CC;
+  border: none;
+}
+
+.c4[disabled] {
+  cursor: not-allowed;
+  pointer-events: none;
+}
+
+.c6 {
+  border-top: 0.0625rem solid;
+  margin: 0.375rem 0 0.5625rem 0;
+}
+
+.c3 {
+  margin: 0;
+  padding: 0;
+  list-style-type: none;
+}
+
+.c0 {
+  position: absolute;
+  top: 0;
+  left: 0;
+}
+
+<div>
+  <div
+    className="c0"
+  >
+    <div
+      className="c1"
+    >
+      <div
+        className="c2"
+      >
+        <ul
+          className="c3"
+        >
+          <li>
+            <button
+              className="c4 c5"
+              disabled={undefined}
+              onClick={[Function]}
+            >
+              Scale
+            </button>
+          </li>
+          <li>
+            <button
+              className="c4 c5"
+              disabled={undefined}
+              onClick={[Function]}
+            >
+              Restart
+            </button>
+          </li>
+          <li>
+            <button
+              className="c4 c5"
+              disabled={undefined}
+              onClick={[Function]}
+            >
+              Stop
+            </button>
+          </li>
+          <div
+            className="c6"
+          />
+          <li>
+            <button
+              className="c4 c5"
+              disabled={undefined}
+              onClick={[Function]}
+            >
+              Delete
+            </button>
+          </li>
+        </ul>
+      </div>
+    </div>
+  </div>
+</div>
+`;

packages/cp-frontend/test/unit/containers/services/__snapshots__/topology.js.snap

@@ -0,0 +1,253 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`renders <ServicesTopology /> without throwing 1`] = `
+.c5 {
+  stroke: ;
+  stroke-width: 1.5;
+  stroke: ;
+}
+
+.c3 {
+  stroke: ;
+  fill: ;
+  stroke-width: 1.5;
+  rx: 4;
+  ry: 4;
+  stroke: ;
+  fill: ;
+}
+
+.c4 {
+  font-family: "Libre Franklin",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,Helvetica,sans-serif;
+  font-weight: 400;
+  fill: ;
+  font-size: 16px;
+  font-weight: 600;
+  fill: ;
+  cursor: pointer;
+}
+
+.c9 {
+  font-family: "Libre Franklin",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,Helvetica,sans-serif;
+  font-weight: 400;
+  fill: ;
+  font-size: 12px;
+  opacity: 0.8;
+  fill: ;
+}
+
+.c7 {
+  opacity: 0;
+  cursor: pointer;
+}
+
+.c7:focus {
+  outline: none;
+}
+
+.c6 {
+  fill: ;
+  fill: ;
+}
+
+.c8 {
+  fill: ;
+  fill: ;
+}
+
+.c2 {
+  width: 100%;
+  height: 1000px;
+}
+
+.c2:not(:root) {
+  overflow: hidden;
+}
+
+.c0 {
+  padding: 1.5rem;
+  background-color: ;
+}
+
+.c1 {
+  position: relative;
+}
+
+<div>
+  <div
+    className="c0"
+  >
+    <div
+      className="c1"
+    >
+      <div>
+        <svg
+          className="c2"
+          id="topology-svg"
+          onMouseMove={[Function]}
+          onMouseUp={[Function]}
+          onTouchCancel={[Function]}
+          onTouchEnd={[Function]}
+          onTouchMove={[Function]}
+        >
+          <g>
+            <g
+              transform="translate(0, 0)"
+            >
+              <rect
+                className="c3"
+                height={114}
+                width={180}
+                x={0}
+                y={0}
+              />
+              <g>
+                <text
+                  className="c4"
+                  onClick={[Function]}
+                  onKeyDown={[Function]}
+                  x={12}
+                  y={30}
+                >
+                  Nginx
+                </text>
+              </g>
+              <g
+                transform="translate(140, 0)"
+              >
+                <line
+                  className="c5"
+                  x1={0}
+                  x2={0}
+                  y1={0}
+                  y2={48}
+                />
+                <circle
+                  className="c6"
+                  cx={20}
+                  cy={18}
+                  r={2}
+                />
+                <circle
+                  className="c6"
+                  cx={20}
+                  cy={24}
+                  r={2}
+                />
+                <circle
+                  className="c6"
+                  cx={20}
+                  cy={30}
+                  r={2}
+                />
+                <rect
+                  className="c7"
+                  height={48}
+                  onClick={[Function]}
+                  onKeyDown={[Function]}
+                  role="button"
+                  tabIndex={100}
+                  width={40}
+                />
+              </g>
+              <g
+                transform="translate(0, 48)"
+              >
+                <line
+                  className="c5"
+                  x1={0}
+                  x2={180}
+                  y1={0}
+                  y2={0}
+                />
+                <g
+                  transform="translate(12, 11)"
+                >
+                  <g
+                    transform="translate(0, 0)"
+                  >
+                    <svg
+                      className=""
+                      height="18"
+                      viewBox="0 0 18 18"
+                      width="18"
+                      xmlns="http://www.w3.org/2000/svg"
+                    >
+                      <title>
+                        icon: error
+                      </title>
+                      <g
+                        fill="none"
+                        fillRule="evenodd"
+                      >
+                        <circle
+                          cx="9"
+                          cy="9"
+                          fill="#DA4B42"
+                          r="9"
+                        />
+                        <g
+                          fill="#FFF"
+                        >
+                          <path
+                            d="M11.121 5.464l1.415 1.415-5.657 5.657-1.415-1.415z"
+                          />
+                          <path
+                            d="M12.536 11.121l-1.415 1.415-5.657-5.657L6.88 5.464z"
+                          />
+                        </g>
+                      </g>
+                    </svg>
+                  </g>
+                  <g
+                    transform="translate(30, 4.5)"
+                  >
+                    <svg
+                      active={undefined}
+                      className="c8"
+                      consul={undefined}
+                      height="9"
+                      viewBox="0 0 18 9"
+                      width="18"
+                      xmlns="http://www.w3.org/2000/svg"
+                    >
+                      <title>
+                        icon: instances
+                      </title>
+                      <path
+                        d="M4.5 0a4.5 4.5 0 1 0 0 9 4.5 4.5 0 0 0 0-9m8.59 0c-.375 0-.739.047-1.09.12 2.184.456 3.818 2.239 3.818 4.38S14.184 8.424 12 8.88c.351.073.715.12 1.09.12C15.803 9 18 6.985 18 4.5S15.802 0 13.09 0M14 4.5C14 6.985 11.802 9 9.09 9c-.375 0-.739-.047-1.09-.12 2.184-.456 3.818-2.239 3.818-4.38S10.184.576 8 .12C8.351.047 8.715 0 9.09 0 11.803 0 14 2.015 14 4.5"
+                        fillRule="evenodd"
+                      />
+                    </svg>
+                  </g>
+                  <text
+                    className="c9"
+                    x={54}
+                    y={14}
+                  >
+                    1 inst.
+                  </text>
+                  <g
+                    transform="translate(54, 36)"
+                  >
+                    <text
+                      className="c9"
+                    >
+                      1
+                                  running
+                    </text>
+                  </g>
+                </g>
+              </g>
+            </g>
+          </g>
+          <g />
+          <g />
+          <g />
+          <g />
+        </svg>
+      </div>
+    </div>
+  </div>
+</div>
+`;

packages/cp-frontend/test/unit/containers/services/list.js

@@ -0,0 +1,27 @@
+
+/**
+ * @jest-environment jsdom
+ */
+
+import React from 'react';
+import renderer from 'react-test-renderer';
+import 'jest-styled-components';
+
+import { ServiceList } from '@containers/services/list.js';
+import { Router, Store, deploymentGroup, services } from '../../mocks';
+
+it('renders <ServiceList /> without throwing', () => {
+  const tree = renderer
+    .create(
+      <Store>
+        <Router>
+          <ServiceList
+            deploymentGroup={deploymentGroup}
+            services={services}
+          />
+        </Router>
+      </Store>
+    )
+    .toJSON();
+  expect(tree).toMatchSnapshot();
+});

packages/cp-frontend/test/unit/containers/services/menu.js

@@ -0,0 +1,32 @@
+
+/**
+ * @jest-environment jsdom
+ */
+
+import React from 'react';
+import renderer from 'react-test-renderer';
+import 'jest-styled-components';
+
+import { ServicesMenu } from '@containers/services/menu.js';
+import { Router, Store } from '../../mocks';
+
+it('renders <ServicesMenu /> without throwing', () => {
+  const props = {
+    location: {
+      pathname: ''
+    },
+    history: {
+      push: () => {}
+    }
+  }
+  const tree = renderer
+    .create(
+      <Store>
+        <Router>
+          <ServicesMenu { ...props } />
+        </Router>
+      </Store>
+    )
+    .toJSON();
+  expect(tree).toMatchSnapshot();
+});

packages/cp-frontend/test/unit/containers/services/quick-actions.js

@@ -0,0 +1,30 @@
+
+/**
+ * @jest-environment jsdom
+ */
+
+import React from 'react';
+import renderer from 'react-test-renderer';
+import 'jest-styled-components';
+
+import { ServicesQuickActions } from '@containers/services/quick-actions.js';
+import { Router, Store, service } from '../../mocks';
+
+it('renders <ServicesQuickActions /> without throwing', () => {
+  const tree = renderer
+    .create(
+      <Store>
+        <Router>
+          <ServicesQuickActions
+            servicesQuickActions={{
+              show: true,
+              position: {},
+              service
+            }}
+          />
+        </Router>
+      </Store>
+    )
+    .toJSON();
+  expect(tree).toMatchSnapshot();
+});

packages/cp-frontend/test/unit/containers/services/topology.js

@@ -0,0 +1,26 @@
+
+/**
+ * @jest-environment jsdom
+ */
+
+import React from 'react';
+import renderer from 'react-test-renderer';
+import 'jest-styled-components';
+
+import { ServicesTopology } from '@containers/services/topology.js';
+import { Router, Store, services } from '../../mocks';
+
+it('renders <ServicesTopology /> without throwing', () => {
+  const tree = renderer
+    .create(
+      <Store>
+        <Router>
+          <ServicesTopology
+            services={services}
+          />
+        </Router>
+      </Store>
+    )
+    .toJSON();
+  expect(tree).toMatchSnapshot();
+});

packages/cp-frontend/test/unit/mocks/data.js

@@ -0,0 +1,37 @@
+export const instance = {
+  "id": "309ecd9f-ac03-474b-aff7-4bd2e743296c",
+  "name": "wordpress_01",
+  "serviceId": "be227788-74f1-4e5b-a85f-b5c71cbae8d8",
+  "deploymentGroupId": "e0ea0c02-55cc-45fe-8064-3e5176a59401",
+  "machineId": "011f7479-2d45-442d-99bf-7f6216954cc8",
+  "status": "RUNNING",
+  "healthy": "HEALTHY"
+};
+
+export const service = {
+  "id": "081a792c-47e0-4439-924b-2efa9788ae9e",
+  "slug": "nginx",
+  "name": "Nginx",
+  "deploymentGroupId": "e0ea0c02-55cc-45fe-8064-3e5176a59401",
+  "connections": ["be227788-74f1-4e5b-a85f-b5c71cbae8d8"],
+  "instances": [instance],
+  "instanceStatuses": [{ status: "RUNNING", count: 1 }]
+};
+
+export const deploymentGroup = {
+  "id": "e0ea0c02-55cc-45fe-8064-3e5176a59401",
+  "slug": "wordpress-blog-example",
+  "name": "Wordpress Blog Example"
+};
+
+export const services = [
+  service
+];
+
+export const instances = [
+  instance
+];
+
+export const deploymentGroups = [
+  deploymentGroup
+]

packages/cp-frontend/test/unit/mocks/index.js

@@ -1,3 +1,4 @@
 export { default as Router } from './router';
 export { default as Store } from './store';
 export { default as Theme } from './theme';
+export * from './data';

packages/cp-gql-mock-server/src/resolvers.js

@@ -164,13 +164,13 @@ const deleteDeploymentGroup = options => {
     .then(services =>
       Promise.all(
         services.map(service =>
-          handleStatusUpdateRequest(
+          handleStatusUpdateRequest({
-            service.id,
+            serviceId: service.id,
-            'DELETING',
+            transitionalServiceStatus: 'DELETING',
-            'STOPPING',
+            transitionalInstancesStatus: 'STOPPING',
-            'DELETED',
+            serviceStatus: 'DELETED',
-            'DELETED'
+            instancesStatus: 'DELETED'
-          )
+          })
         )
       )
     )
@@ -368,13 +368,13 @@ const updateServiceAndInstancesStatus = (
     );
 };
 
-const handleStatusUpdateRequest = (
+const handleStatusUpdateRequest = ({
   serviceId,
   transitionalServiceStatus,
   transitionalInstancesStatus,
   serviceStatus,
   instancesStatus
-) => {
+}) => {
   // this is what we need to delay
   setTimeout(() => {
     updateServiceAndInstancesStatus(serviceId, serviceStatus, instancesStatus);
@@ -393,13 +393,13 @@ const deleteServices = options => {
   // instances transitional 'STOPPING'
   // service 'DELETED'
   // instances 'DELETED'
-  const deleteService = handleStatusUpdateRequest(
+  const deleteService = handleStatusUpdateRequest({
-    options.ids[0],
+    serviceId: options.ids[0],
-    'DELETING',
+    transitionalServiceStatus: 'DELETING',
-    'STOPPING',
+    transitionalInstancesStatus: 'STOPPING',
-    'DELETED',
+    serviceStatus: 'DELETED',
-    'DELETED'
+    instancesStatus: 'DELETED'
-  );
+  });
   return Promise.resolve(deleteService);
 };
 
@@ -408,13 +408,13 @@ const stopServices = options => {
   // instances transitional 'STOPPING'
   // service 'STOPPED'
   // instances 'STOPPED'
-  const stopService = handleStatusUpdateRequest(
+  const stopService = handleStatusUpdateRequest({
-    options.ids[0],
+    serviceId: options.ids[0],
-    'STOPPING',
+    transitionalServiceStatus: 'STOPPING',
-    'STOPPING',
+    transitionalInstancesStatus: 'STOPPING',
-    'STOPPED',
+    serviceStatus: 'STOPPED',
-    'STOPPED'
+    instancesStatus: 'STOPPED'
-  );
+  });
   return Promise.resolve(stopService);
 };
 
@@ -423,13 +423,13 @@ const startServices = options => {
   // instances transitional ...
   // service 'ACTIVE'
   // instances 'RUNNING'
-  const startService = handleStatusUpdateRequest(
+  const startService = handleStatusUpdateRequest({
-    options.ids[0],
+    serviceId: options.ids[0],
-    'PROVISIONING',
+    transitionalServiceStatus: 'PROVISIONING',
-    'PROVISIONING',
+    transitionalInstancesStatus: 'PROVISIONING',
-    'ACTIVE',
+    serviceStatus: 'ACTIVE',
-    'RUNNING'
+    instancesStatus: 'RUNNING'
-  );
+  });
   return Promise.resolve(startService);
 };
 
@@ -438,13 +438,13 @@ const restartServices = options => {
   // instances transitional 'STOPPING'
   // service 'ACTIVE'
   // instances 'RUNNING'
-  const restartService = handleStatusUpdateRequest(
+  const restartService = handleStatusUpdateRequest({
-    options.ids[0],
+    serviceId: options.ids[0],
-    'RESTARTING',
+    transitionalServiceStatus: 'RESTARTING',
-    'STOPPING',
+    transitionalInstancesStatus: 'STOPPING',
-    'ACTIVE',
+    serviceStatus: 'ACTIVE',
-    'RUNNING'
+    instancesStatus: 'RUNNING'
-  );
+  });
   return Promise.resolve(restartService);
 };
 

packages/ui-toolkit/.snapguidist/__snapshots__/Anchor-0.snap

@@ -1,6 +0,0 @@
-exports[`Anchor-0 1`] = `
-<a
-  className="baseline-jsABYb bHdHoA sc-htpNat snokA">
-  Inspire the lazy
-</a>
-`;