feat(templates): bootstrap

.eslintignore

@@ -1,4 +1,9 @@
-packages/*/**
-prototypes/*/**
 artifacts
 reports
+.nyc_output
+coverage
+dist
+styleguide
+build
+lib/app
+node_modules

.eslintrc

@@ -1,8 +1,10 @@
 {
   "extends": "joyent-portal",
   "rules": {
-    "jsx-a11y/href-no-hash": 0,
+    "no-console": 1,
     "new-cap": 0,
-    "no-console": 0
+    "jsx-a11y/href-no-hash": 0,
+    "no-negated-condition": 1,
+    "camelcase": 1
   }
 }

bundle/package.json

@@ -9,24 +9,21 @@
     "build:lib": "echo 0",
     "build:bundle": "echo 0",
     "prepublish": "echo 0",
-    "lint": "echo 0",
-    "lint:ci": "echo 0",
     "test": "echo 0",
     "test:ci": "echo 0"
   },
   "dependencies": {
     "apr-main": "^4.0.3",
-    "brule": "^3.1.0",
-    "cloudapi-gql": "^7.1.4",
+    "cloudapi-gql": "^8.0.0",
     "execa": "^0.10.0",
-    "h2o2": "^8.0.1",
-    "hapi": "^17.3.1",
-    "hapi-triton-auth": "^2.0.1",
-    "hapi-webconsole-nav": "^1.2.0",
-    "inert": "^5.1.0",
+    "graphi": "^5.7.0",
+    "h2o2": "^8.1.2",
+    "hapi": "^17.4.0",
+    "hapi-triton-auth": "^3.0.0",
+    "hapi-webconsole-nav": "^2.1.0",
     "my-joy-images": "*",
     "my-joy-instances": "*",
     "my-joy-navigation": "*",
-    "rollover": "^1.0.0"
+    "tsg-graphql": "^1.0.0"
   }
 }

bundle/src/images.js

@@ -1,5 +1,8 @@
+require('../.env.js');
+
 const Main = require('apr-main');
 const CloudApiGql = require('cloudapi-gql');
+const Graphi = require('graphi');
 const Url = require('url');
 
 const Server = require('./server');
@@ -28,6 +31,17 @@ Main(async () => {
   });
 
   await server.register([
+    {
+      plugin: Graphi,
+      options: {
+        graphqlPath: '/graphql',
+        graphiqlPath: '/graphiql',
+        authStrategy: 'sso'
+      },
+      routes: {
+        prefix: `/${PREFIX}`
+      }
+    },
     {
       plugin: CloudApiGql,
       options: {

bundle/src/instances.js

@@ -1,5 +1,8 @@
+require('../.env.js');
+
 const Main = require('apr-main');
 const CloudApiGql = require('cloudapi-gql');
+const Graphi = require('graphi');
 const Url = require('url');
 
 const Server = require('./server');
@@ -28,6 +31,17 @@ Main(async () => {
   });
 
   await server.register([
+    {
+      plugin: Graphi,
+      options: {
+        graphqlPath: '/graphql',
+        graphiqlPath: '/graphiql',
+        authStrategy: 'sso'
+      },
+      routes: {
+        prefix: `/${PREFIX}`
+      }
+    },
     {
       plugin: CloudApiGql,
       options: {

bundle/src/navigation.js

@@ -1,5 +1,8 @@
+require('../.env.js');
+
 const Main = require('apr-main');
 const Nav = require('hapi-webconsole-nav');
+const Graphi = require('graphi');
 const Url = require('url');
 
 const Server = require('./server');
@@ -33,6 +36,17 @@ Main(async () => {
   });
 
   await server.register([
+    {
+      plugin: Graphi,
+      options: {
+        graphqlPath: '/graphql',
+        graphiqlPath: '/graphiql',
+        authStrategy: 'sso'
+      },
+      routes: {
+        prefix: `/${PREFIX}`
+      }
+    },
     {
       plugin: Nav,
       options: {

bundle/src/server.js

@@ -1,6 +1,7 @@
+require('../.env.js');
+
 const Hapi = require('hapi');
 const Sso = require('hapi-triton-auth');
-const Url = require('url');
 
 const {
   COOKIE_PASSWORD,
@@ -8,12 +9,10 @@ const {
   SDC_KEY_PATH,
   SDC_ACCOUNT,
   SDC_KEY_ID,
-  SDC_URL,
-  DC_NAME
+  SDC_URL
 } = process.env;
 
 module.exports = async ({ PORT, BASE_URL }) => {
-  const dcName = DC_NAME || Url.parse(SDC_URL).host.split('.')[0];
   const keyPath = SDC_KEY_PATH;
   const keyId = `/${SDC_ACCOUNT}/keys/${SDC_KEY_ID}`;
   const apiBaseUrl = SDC_URL;
@@ -50,6 +49,7 @@ module.exports = async ({ PORT, BASE_URL }) => {
 
   server.events.on('log', (event, tags) => {
     if (tags.error) {
+      // eslint-disable-next-line no-console
       console.log(event);
     }
   });
@@ -58,6 +58,7 @@ module.exports = async ({ PORT, BASE_URL }) => {
     const { tags } = event;
     if (tags.includes('error') && event.data && event.data.errors) {
       event.data.errors.forEach(error => {
+        // eslint-disable-next-line no-console
         console.log(error);
       });
     }

bundle/src/service-groups.js

@@ -0,0 +1,74 @@
+require('../.env.js');
+
+const Main = require('apr-main');
+const CloudApiGql = require('cloudapi-gql');
+const Tsg = require('tsg-graphql');
+const Graphi = require('graphi');
+const Url = require('url');
+
+const Server = require('./server');
+
+const {
+  PORT = 4004,
+  BASE_URL = `http://0.0.0.0:${PORT}`,
+  PREFIX = 'service-groups',
+  DC_NAME,
+  TSG_URL = 'http://0.0.0.0:3000',
+  SDC_URL,
+  SDC_KEY_PATH,
+  SDC_ACCOUNT,
+  SDC_KEY_ID
+} = process.env;
+
+const dcName = DC_NAME || Url.parse(SDC_URL).host.split('.')[0];
+const keyPath = SDC_KEY_PATH;
+const keyId = `/${SDC_ACCOUNT}/keys/${SDC_KEY_ID}`;
+
+Main(async () => {
+  const server = await Server({
+    PORT,
+    BASE_URL
+  });
+
+  await server.register([
+    {
+      plugin: Graphi,
+      options: {
+        graphqlPath: '/graphql',
+        graphiqlPath: '/graphiql',
+        authStrategy: 'sso'
+      },
+      routes: {
+        prefix: `/${PREFIX}`
+      }
+    },
+    {
+      plugin: Tsg,
+      options: {
+        authStrategy: 'sso',
+        keyPath,
+        keyId,
+        apiBaseUrl: TSG_URL,
+        dcName
+      },
+      routes: {
+        prefix: `/${PREFIX}`
+      }
+    },
+    {
+      plugin: CloudApiGql,
+      options: {
+        authStrategy: 'sso',
+        keyPath,
+        keyId,
+        apiBaseUrl: SDC_URL,
+        dcName
+      },
+      routes: {
+        prefix: `/${PREFIX}`
+      }
+    }
+  ]);
+
+  await server.start();
+});

bundle/src/templates.js

@@ -0,0 +1,74 @@
+require('../.env.js');
+
+const Main = require('apr-main');
+const CloudApiGql = require('cloudapi-gql');
+const Tsg = require('tsg-graphql');
+const Graphi = require('graphi');
+const Url = require('url');
+
+const Server = require('./server');
+
+const {
+  PORT = 4005,
+  BASE_URL = `http://0.0.0.0:${PORT}`,
+  PREFIX = 'templates',
+  DC_NAME,
+  TSG_URL = 'http://0.0.0.0:3000',
+  SDC_URL,
+  SDC_KEY_PATH,
+  SDC_ACCOUNT,
+  SDC_KEY_ID
+} = process.env;
+
+const dcName = DC_NAME || Url.parse(SDC_URL).host.split('.')[0];
+const keyPath = SDC_KEY_PATH;
+const keyId = `/${SDC_ACCOUNT}/keys/${SDC_KEY_ID}`;
+
+Main(async () => {
+  const server = await Server({
+    PORT,
+    BASE_URL
+  });
+
+  await server.register([
+    {
+      plugin: Graphi,
+      options: {
+        graphqlPath: '/graphql',
+        graphiqlPath: '/graphiql',
+        authStrategy: 'sso'
+      },
+      routes: {
+        prefix: `/${PREFIX}`
+      }
+    },
+    {
+      plugin: Tsg,
+      options: {
+        authStrategy: 'sso',
+        keyPath,
+        keyId,
+        apiBaseUrl: TSG_URL,
+        dcName
+      },
+      routes: {
+        prefix: `/${PREFIX}`
+      }
+    },
+    {
+      plugin: CloudApiGql,
+      options: {
+        authStrategy: 'sso',
+        keyPath,
+        keyId,
+        apiBaseUrl: SDC_URL,
+        dcName
+      },
+      routes: {
+        prefix: `/${PREFIX}`
+      }
+    }
+  ]);
+
+  await server.start();
+});

commitlint.config.js

@@ -4,7 +4,16 @@ module.exports = {
     'scope-enum': [
       2,
       'always',
-      ['ui-toolkit', 'icons', 'instances', 'navigation', 'bundle', 'images']
+      [
+        'ui-toolkit',
+        'icons',
+        'instances',
+        'navigation',
+        'bundle',
+        'images',
+        'sg',
+        'templates'
+      ]
     ]
   }
 };

consoles/my-joy-images/.eslintrc

@@ -1,10 +0,0 @@
-{
-  "extends": "joyent-portal",
-  "rules": {
-    "no-console": 0,
-    "new-cap": 0,
-    "camelcase": 1,
-    "jsx-a11y/href-no-hash": 0,
-    "no-negated-condition": 0
-  }
-}

consoles/my-joy-images/lib/index.js

@@ -16,6 +16,7 @@ exports.register = async server => {
     if (NODE_ENV === 'production') {
       throw err;
     } else {
+      // eslint-disable-next-line no-console
       console.error(err);
     }
   }

consoles/my-joy-images/package.json

@@ -11,8 +11,6 @@
     "build:lib": "echo 0",
     "build:bundle": "NAMESPACE=images NODE_ENV=production redrun -p build:frontend build:ssr",
     "prepublish": "NODE_ENV=production redrun build:bundle",
-    "lint": "redrun lint:ci -- --fix",
-    "lint:ci": "NODE_ENV=test eslint . --ext .js --ext .md",
     "test": "echo 0",
     "test:ci": "echo 0",
     "build:frontend": "joyent-react-scripts build",
@@ -38,6 +36,7 @@
     "inert": "^5.1.0",
     "joyent-logo-assets": "^1.1.0",
     "joyent-react-styled-flexboxgrid": "^2.2.3",
+    "joyent-ui-resource-widgets": "^1.0.0",
     "joyent-ui-toolkit": "^6.0.0",
     "lodash.assign": "^4.2.0",
     "lodash.find": "^4.6.0",

consoles/my-joy-images/src/components/create-image/details.js

@@ -6,7 +6,6 @@ import remcalc from 'remcalc';
 import { Row, Col } from 'joyent-react-styled-flexboxgrid';
 
 import {
-  Divider,
   FormGroup,
   FormLabel,
   Input,
@@ -22,15 +21,14 @@ export default ({ placeholderName, randomizing, onRandomize }) => (
       <FlexItem flex>
         <FormGroup name="name" fluid field={Field}>
           <FormLabel>Image name</FormLabel>
-          <Margin top={0.5}>
+          <Margin top="0.5">
             <Input placeholder={placeholderName} onBlur={null} required />
           </Margin>
           <FormMeta />
         </FormGroup>
       </FlexItem>
       <FlexItem>
-        <Divider height={remcalc(13)} transparent />
-        <Margin left={1}>
+        <Margin left="1">
           <Button
             type="button"
             marginTop={remcalc(8)}
@@ -46,10 +44,10 @@ export default ({ placeholderName, randomizing, onRandomize }) => (
         </Margin>
       </FlexItem>
     </Flex>
-    <Margin top={3}>
+    <Margin top="3">
       <FormGroup name="version" fluid field={Field}>
         <FormLabel>Version</FormLabel>
-        <Margin top={0.5}>
+        <Margin top="0.5">
           <Input placeholder="Example: v1.0" onBlur={null} required />
         </Margin>
         <FormMeta />
@@ -57,10 +55,10 @@ export default ({ placeholderName, randomizing, onRandomize }) => (
     </Margin>
     <Row>
       <Col xs={12} sm={8}>
-        <Margin top={3}>
+        <Margin top="3">
           <FormGroup name="description" fluid field={Field}>
             <FormLabel>Description</FormLabel>
-            <Margin top={0.5}>
+            <Margin top="0.5">
               <Textarea
                 placeholder="Example: JarJarBinks, Anakin Skywalker, Obi Wan Kenobi, Qui-Gon Jinn, Han Solo, Wookies"
                 fluid

consoles/my-joy-images/src/components/create-image/title.js

@@ -16,14 +16,14 @@ const Container = styled.div`
 export default ({ icon, children, collapsed = true, ...rest }) => (
   <Container {...rest}>
     <Flex>
-      <Margin right={1}>
+      <Margin right="1">
         <Flex alignCenter full>
           {icon}
         </Flex>
       </Margin>
       <Small noMargin>{children}</Small>
     </Flex>
-    <Margin top={1} bottom={collapsed ? 7 : 3}>
+    <Margin top="1" bottom={collapsed ? 7 : 3}>
       <Divider height={remcalc(1)} />
     </Margin>
   </Container>

consoles/my-joy-images/src/components/description.js

@@ -6,7 +6,7 @@ import { P } from 'joyent-ui-toolkit';
 export default ({ children }) => (
   <Row>
     <Col xs={12} sm={8}>
-      <Margin bottom={3}>
+      <Margin bottom="3">
         <P>{children}</P>
       </Margin>
     </Col>

consoles/my-joy-images/src/components/empty.js

@@ -19,7 +19,7 @@ export default ({ children }) => (
   <FullWidthCard>
     <Padding all={6}>
       <Flex alignCenter justifyCenter column>
-        <Margin bottom={2}>
+        <Margin bottom="2">
           <EmptyState />
         </Margin>
         <NoPackagesTitle>{children}</NoPackagesTitle>

consoles/my-joy-images/src/components/image.js

@@ -84,7 +84,7 @@ export const Image = ({
   onRemove,
   onCreateInstance
 }) => (
-  <Margin bottom={3}>
+  <Margin bottom="3">
     <CardAnchor to={`/images/${id}`} component={Link}>
       <Card radius>
         {removing ? (
@@ -94,10 +94,10 @@ export const Image = ({
         ) : (
           <Fragment>
             <CardHeader white radius>
-              <Padding left={2} right={2}>
+              <Padding left="2" right="2">
                 <Flex full alignCenter>
                   <FlexItem>
-                    <Margin right={2}>
+                    <Margin right="2">
                       {React.createElement(OS[os], {
                         width: '24',
                         height: '24'
@@ -113,7 +113,7 @@ export const Image = ({
               </Padding>
             </CardHeader>
             <Flex justifyBetween>
-              <Content left={2} top={2} bottom={2}>
+              <Content left="2" top="2" bottom="2">
                 <Max justifyBetween>
                   <Max alignCenter>
                     <Flex>{version}</Flex>
@@ -130,7 +130,7 @@ export const Image = ({
                     </ActionsWrapper>
                   </PopoverTarget>
                   <Popover noPadding placement="bottom">
-                    <Padding horizontal={3} vertical={2}>
+                    <Padding horizontal="3" vertical="2">
                       <PopoverItem disabled={false} onClick={onCreateInstance}>
                         <ItemAnchor
                           href={`${
@@ -144,7 +144,7 @@ export const Image = ({
                       </PopoverItem>
                     </Padding>
                     <PopoverDivider />
-                    <Padding horizontal={3} vertical={2}>
+                    <Padding horizontal="3" vertical="2">
                       <PopoverItem disabled={removing} onClick={onRemove}>
                         Remove
                       </PopoverItem>
@@ -165,7 +165,7 @@ export const Filters = ({ selected }) => (
     <FormGroup name="image-type" value="all" field={Field} type="radio">
       <Radio>
         <Flex alignCenter>
-          <Margin horizontal={2}>
+          <Margin horizontal="2">
             <FormLabel big normal={selected !== 'all'}>
               All
             </FormLabel>
@@ -181,7 +181,7 @@ export const Filters = ({ selected }) => (
     >
       <Radio noMargin>
         <Flex alignCenter>
-          <Margin horizontal={2}>
+          <Margin horizontal="2">
             <FormLabel big normal={selected !== 'hardware-virtual-machine'}>
               Virtual machines
             </FormLabel>
@@ -197,7 +197,7 @@ export const Filters = ({ selected }) => (
     >
       <Radio noMargin>
         <Flex alignCenter>
-          <Margin horizontal={2}>
+          <Margin horizontal="2">
             <FormLabel big normal={selected !== 'infrastructure-container'}>
               Infrastructure container
             </FormLabel>

consoles/my-joy-images/src/components/summary.js

@@ -1,7 +1,7 @@
 import React, { Fragment } from 'react';
 import { Row, Col } from 'joyent-react-styled-flexboxgrid';
 import { Margin, Padding } from 'styled-components-spacing';
-import styled, { withTheme } from 'styled-components';
+import styled from 'styled-components';
 import Flex, { FlexItem } from 'styled-flex-component';
 import distanceInWordsToNow from 'date-fns/distance_in_words_to_now';
 import titleCase from 'title-case';
@@ -76,7 +76,7 @@ export const Meta = ({ name, version, type, published_at, state, os }) => (
         <H2 bold>{name}</H2>
       </FlexItem>
     </Flex>
-    <Margin top={2} bottom={3}>
+    <Margin top="2" bottom="3">
       <Flex>
         <Label>{version}</Label>
         <VerticalDivider />
@@ -104,7 +104,7 @@ export const Meta = ({ name, version, type, published_at, state, os }) => (
   </Fragment>
 );
 
-export default withTheme(({ theme = {}, onRemove, removing, ...image }) => (
+export default ({ theme = {}, onRemove, removing, ...image }) => (
   <Row>
     <Col xs={12} sm={12} md={9}>
       <Card>
@@ -136,7 +136,7 @@ export default withTheme(({ theme = {}, onRemove, removing, ...image }) => (
               <Col xs={3}>
                 <SmallOnly>
                   <Button type="button" small icon error right>
-                    <DeleteIcon fill={theme.red} />
+                    <DeleteIcon fill="red" />
                   </Button>
                 </SmallOnly>
                 <Medium>
@@ -150,7 +150,7 @@ export default withTheme(({ theme = {}, onRemove, removing, ...image }) => (
                     right
                   >
                     <Margin right="1">
-                      <DeleteIcon fill={theme.red} />
+                      <DeleteIcon fill="red" />
                     </Margin>
                     <span>Delete</span>
                   </Button>
@@ -163,15 +163,15 @@ export default withTheme(({ theme = {}, onRemove, removing, ...image }) => (
             <Margin bottom="2">
               <P>{image.description}</P>
             </Margin>
-            <Margin bottom={3}>
+            <Margin bottom="3">
               <CopiableField text={(image.id || '').split('-')[0]} label="ID" />
             </Margin>
-            <Margin bottom={3}>
+            <Margin bottom="3">
               <CopiableField text={image.id} label="UUID" />
             </Margin>
             <Row>
               <Col xs={12} md={7}>
-                <Margin bottom={3}>
+                <Margin bottom="3">
                   <FormLabel>Operating system</FormLabel>
                   <Input
                     monospace
@@ -187,4 +187,4 @@ export default withTheme(({ theme = {}, onRemove, removing, ...image }) => (
       </Card>
     </Col>
   </Row>
-));
+);

consoles/my-joy-images/src/components/tags.js

@@ -1,7 +1,8 @@
 import React from 'react';
 import { Margin } from 'styled-components-spacing';
 
-import { TagItem, KeyValue } from 'joyent-ui-toolkit';
+import { TagItem } from 'joyent-ui-toolkit';
+import { KeyValue } from 'joyent-ui-resource-widgets';
 
 export const AddForm = props => (
   <KeyValue {...props} method="add" input="input" type="tag" expanded />

consoles/my-joy-images/src/components/toolbar.js

@@ -17,7 +17,7 @@ export const Toolbar = ({
   <Flex justifyBetween alignEnd>
     <FormGroup name="filter" field={Field}>
       <FormLabel>{searchLabel}</FormLabel>
-      <Margin top={0.5}>
+      <Margin top="0.5">
         <Input placeholder={searchPlaceholder} disabled={!searchable} />
       </Margin>
     </FormGroup>

consoles/my-joy-images/src/containers/breadcrumb.js

@@ -44,7 +44,7 @@ export default ({ match }) => {
     .filter(Boolean)
     .map(({ name, pathname }) => (
       <BreadcrumbItem key={name} to={pathname} component={Link}>
-        <Margin horizontal={1} vertical={3}>
+        <Margin horizontal="1" vertical="3">
           {name}
         </Margin>
       </BreadcrumbItem>

consoles/my-joy-images/src/containers/create-image/details.js

@@ -67,12 +67,12 @@ const NameContainer = ({
             onRandomize={handleRandomize}
           />
         ) : name ? (
-          <Margin top={3}>
+          <Margin top="3">
             <H3 bold noMargin>
               {name}
             </H3>
             {version ? (
-              <Margin top={2}>
+              <Margin top="2">
                 <H4 bold noMargin>
                   {version}
                 </H4>
@@ -81,7 +81,7 @@ const NameContainer = ({
             {description ? (
               <Row>
                 <Col xs={12} sm={8}>
-                  <Margin top={1}>
+                  <Margin top="1">
                     <P>{description}</P>
                   </Margin>
                 </Col>
@@ -92,13 +92,13 @@ const NameContainer = ({
       }
     </ReduxForm>
     {expanded ? (
-      <Margin top={4} bottom={7}>
+      <Margin top="4" bottom="7">
         <Button type="button" disabled={!name} onClick={handleNext}>
           Next
         </Button>
       </Margin>
     ) : proceeded ? (
-      <Margin top={4} bottom={7}>
+      <Margin top="4" bottom="7">
         <Button type="button" onClick={handleEdit} secondary>
           Edit
         </Button>
@@ -166,6 +166,7 @@ export default compose(
         dispatch(set({ name: 'create-image-name-randomizing', value: false }));
 
         if (err) {
+          // eslint-disable-next-line no-console
           console.error(err);
           return;
         }

consoles/my-joy-images/src/containers/create-image/tags.js

@@ -6,17 +6,10 @@ import { destroy, reset } from 'redux-form';
 import ReduxForm from 'declarative-redux-form';
 import { connect } from 'react-redux';
 import get from 'lodash.get';
-import remcalc from 'remcalc';
 import Flex from 'styled-flex-component';
 
-import {
-  TagsIcon,
-  Button,
-  H3,
-  TagList,
-  Divider,
-  KeyValue
-} from 'joyent-ui-toolkit';
+import { TagsIcon, Button, H3, TagList } from 'joyent-ui-toolkit';
+import { KeyValue } from 'joyent-ui-resource-widgets';
 
 import Title from '@components/create-image/title';
 import Description from '@components/description';
@@ -66,7 +59,7 @@ export const Tags = ({
     ) : null}
     {proceeded || expanded ? (
       <Fragment>
-        <Margin bottom={5}>
+        <Margin bottom="5">
           <H3>
             {tags.length} Tag{tags.length === 1 ? '' : 's'}
           </H3>
@@ -102,12 +95,11 @@ export const Tags = ({
               expanded
               onCancel={() => handleChangeAddOpen(false)}
             />
-            <Divider height={remcalc(18)} transparent />
           </Fragment>
         ) : null
       }
     </ReduxForm>
-    <Margin top={1}>
+    <Margin top="1">
       <Flex alignCenter>
         {expanded ? (
           <Button
@@ -118,11 +110,11 @@ export const Tags = ({
             Add Tag
           </Button>
         ) : null}
-        <Margin left={1}>{children}</Margin>
+        <Margin left="1">{children}</Margin>
       </Flex>
     </Margin>
     {proceeded ? (
-      <Margin top={1}>
+      <Margin top="1">
         <Button type="button" onClick={handleEdit} secondary>
           Edit
         </Button>

consoles/my-joy-images/src/containers/create.js

@@ -1,5 +1,3 @@
-/* eslint-disable camelcase */
-
 import React from 'react';
 import { Margin } from 'styled-components-spacing';
 import ReduxForm from 'declarative-redux-form';
@@ -41,12 +39,12 @@ const Create = ({
 }) => (
   <ViewContainer>
     {loading ? (
-      <Margin top={4}>
+      <Margin top="4">
         <StatusLoader />
       </Margin>
     ) : null}
     {loadingError ? (
-      <Margin top={4}>
+      <Margin top="4">
         <Message error>
           <MessageTitle>Ooops!</MessageTitle>
           <MessageDescription>{loadingError}</MessageDescription>
@@ -54,7 +52,7 @@ const Create = ({
       </Margin>
     ) : null}
     {!loading && !loadingError ? (
-      <Margin top={4} bottom={5}>
+      <Margin top="4" bottom="5">
         <H2>Create Image</H2>
       </Margin>
     ) : null}

consoles/my-joy-images/src/containers/list.js

@@ -2,7 +2,6 @@ import React, { Fragment } from 'react';
 import { compose, graphql } from 'react-apollo';
 import ReduxForm from 'declarative-redux-form';
 import { Margin } from 'styled-components-spacing';
-import remcalc from 'remcalc';
 import { Row, Col } from 'joyent-react-styled-flexboxgrid';
 import { connect } from 'react-redux';
 import get from 'lodash.get';
@@ -41,22 +40,21 @@ export const List = ({
   handleRemove
 }) => (
   <ViewContainer main>
-    <Margin top={4}>
+    <Margin top="4">
       <ReduxForm form={LIST_TOOLBAR_FORM}>
         {props => <ToolbarForm {...props} actionable={!loading} />}
       </ReduxForm>
     </Margin>
-    <Margin vertical={4}>
+    <Margin vertical="4">
       <Divider />
     </Margin>
     {loading && !images.length ? (
       <Fragment>
-        <Divider height={remcalc(30)} transparent />
         <StatusLoader />
       </Fragment>
     ) : null}
     {error && !images.length && !loading ? (
-      <Margin bottom={5}>
+      <Margin bottom="5">
         <Message error>
           <MessageTitle>Ooops!</MessageTitle>
           <MessageDescription>
@@ -66,7 +64,7 @@ export const List = ({
       </Margin>
     ) : null}
     <Fragment>
-      <Margin bottom={4}>
+      <Margin bottom="4">
         <ReduxForm
           form={LIST_TOGGLE_TYPE_FORM}
           initialValues={{ 'image-type': 'all' }}

consoles/my-joy-images/src/containers/menu.js

@@ -10,7 +10,7 @@ const SECTIONS = [
 
 export default ({ match }) => {
   const imageId = get(match, 'params.image');
-  const sections = imageId !== '~create' ? SECTIONS : [];
+  const sections = imageId === '~create' ? [] : SECTIONS;
 
   const links = sections.map(({ name, pathname }) => ({
     name,

consoles/my-joy-images/src/containers/summary.js

@@ -30,7 +30,7 @@ export const Summary = ({
   <ViewContainer main>
     {loading && !image ? <StatusLoader /> : null}
     {error && !loading && !image ? (
-      <Margin bottom={5}>
+      <Margin bottom="5">
         <Message error>
           <MessageTitle>Ooops!</MessageTitle>
           <MessageDescription>
@@ -40,7 +40,7 @@ export const Summary = ({
       </Margin>
     ) : null}
     {mutationError ? (
-      <Margin bottom={5}>
+      <Margin bottom="5">
         <Message error>
           <MessageTitle>Ooops!</MessageTitle>
           <MessageDescription>

consoles/my-joy-images/src/containers/tags.js

@@ -14,11 +14,11 @@ import {
   H3,
   ViewContainer,
   StatusLoader,
-  Divider,
   Message,
   MessageTitle,
   MessageDescription,
-  TagList
+  TagList,
+  Divider
 } from 'joyent-ui-toolkit';
 
 import { Forms } from '@root/constants';
@@ -63,7 +63,7 @@ export const Tags = ({
       )}
     </ReduxForm>
     {error && !loading && !tags.length ? (
-      <Margin bottom={5}>
+      <Margin bottom="5">
         <Message error>
           <MessageTitle>Ooops!</MessageTitle>
           <MessageDescription>
@@ -73,7 +73,7 @@ export const Tags = ({
       </Margin>
     ) : null}
     {mutationError ? (
-      <Margin bottom={5}>
+      <Margin bottom="5">
         <Message error>
           <MessageTitle>Ooops!</MessageTitle>
           <MessageDescription>{mutationError}</MessageDescription>
@@ -88,7 +88,7 @@ export const Tags = ({
     >
       {props =>
         addOpen ? (
-          <Margin bottom={5}>
+          <Margin bottom="5">
             <AddForm
               {...props}
               onToggleExpanded={() => handleToggleAddOpen(!addOpen)}
@@ -98,13 +98,13 @@ export const Tags = ({
         ) : null
       }
     </ReduxForm>
-    {!loading ? (
-      <Margin bottom={5}>
+    {loading ? null : (
+      <Margin bottom="5">
         <H3>
           {tags.length} tag{tags.length === 1 ? '' : 's'}
         </H3>
       </Margin>
-    ) : null}
+    )}
     {loading && !tags.length ? <StatusLoader /> : null}
     <TagList>
       {tags.map(({ id, name, value }) => (

consoles/my-joy-images/src/html.js

@@ -20,7 +20,7 @@ module.exports = ({
     </head>
     <body {...bodyAttrs}>
       <div id="header" />
-      {!children ? <div id="root" /> : null}
+      {children ? null : <div id="root" />}
       {children}
       <script src="/navigation/static/main.js" />
     </body>

consoles/my-joy-images/src/server-error.js

@@ -17,7 +17,7 @@ import Breadcrumb from '@containers/breadcrumb';
 export const Route = () => (
   <ViewContainer main>
     <Divider height={remcalc(30)} transparent />
-    <Margin bottom={5}>
+    <Margin bottom="5">
       <Message error>
         <MessageTitle>Ooops!</MessageTitle>
         <MessageDescription>

consoles/my-joy-images/src/state/validators.js

@@ -16,7 +16,7 @@ const validateSchema = async (schema, value) => {
     keys(schema),
     async (errors, name) => {
       const msg = await validateField(schema[name], value[name]);
-      return !msg ? errors : assign(errors, { [name]: msg });
+      return msg ? assign(errors, { [name]: msg }) : errors;
     },
     {}
   );
@@ -66,4 +66,4 @@ const Schemas = {
 export const addTag = tag => validateSchema(Schemas.tag, tag);
 
 export const instanceName = ({ name }) =>
-  !name ? null : validateSchema(Schemas.instanceName, { name });
+  name ? validateSchema(Schemas.instanceName, { name }) : null;

consoles/my-joy-instances/.eslintignore

@@ -1,5 +0,0 @@
-.nyc_output
-coverage
-dist
-build
-lib/app

consoles/my-joy-instances/.eslintrc

@@ -1,10 +0,0 @@
-{
-  "extends": "joyent-portal",
-  "rules": {
-    "no-console": 0,
-    "new-cap": 0,
-    "camelcase": 1,
-    "jsx-a11y/href-no-hash": 0,
-    "no-negated-condition": 0
-  }
-}

consoles/my-joy-instances/lib/index.js

@@ -16,6 +16,7 @@ exports.register = async server => {
     if (NODE_ENV === 'production') {
       throw err;
     } else {
+      // eslint-disable-next-line no-console
       console.error(err);
     }
   }

consoles/my-joy-instances/package.json

@@ -11,8 +11,6 @@
     "build:lib": "echo 0",
     "build:bundle": "NAMESPACE=instances NODE_ENV=production redrun -p build:frontend build:ssr",
     "prepublish": "NODE_ENV=production redrun build:bundle",
-    "lint": "redrun lint:ci -- --fix",
-    "lint:ci": "NODE_ENV=test eslint . --ext .js --ext .md",
     "test": "DEFAULT_TIMEOUT_INTERVAL=100000 NODE_ENV=test joyent-react-scripts test --env=jsdom --testPathIgnorePatterns='.ui.js'",
     "test:ci": "NODE_ENV=test joyent-react-scripts test --env=jsdom --testPathIgnorePatterns='.ui.js'",
     "build:frontend": "joyent-react-scripts build",
@@ -28,7 +26,6 @@
     "boom": "^7.2.0",
     "bytes": "^3.0.0",
     "clipboard-copy": "^2.0.0",
-    "constant-case": "^2.0.0",
     "cross-fetch": "^2.1.0",
     "date-fns": "^1.29.0",
     "declarative-redux-form": "^2.0.8",
@@ -54,15 +51,13 @@
     "lodash.isfunction": "^3.0.9",
     "lodash.isinteger": "^4.0.4",
     "lodash.isnan": "^3.0.2",
-    "lodash.omit": "^4.5.0",
     "lodash.reduce": "^4.6.0",
     "lodash.reverse": "^4.0.1",
     "lodash.some": "^4.6.0",
     "lodash.sortby": "^4.7.0",
-    "lodash.uniqby": "^4.7.0",
     "lodash.values": "^4.3.0",
     "param-case": "^2.1.1",
-    "query-string": "^6.0.0",
+    "query-string": "^6.1.0",
     "react": "^16.3.1",
     "react-apollo": "^2.1.2",
     "react-dom": "^16.3.1",

consoles/my-joy-instances/src/components/instances/__tests__/__snapshots__/summary.spec.js.snap

@@ -315,7 +315,7 @@ exports[`renders <Summary /> without throwing 1`] = `
 
 .c27:hover {
   background-color: rgb(72,83,217);
-  border: solid 0.0625rem rgb(45,56,132);
+  border-color: rgb(45,56,132);
 }
 
 .c27:active,
@@ -419,7 +419,7 @@ exports[`renders <Summary /> without throwing 1`] = `
 
 .c33:hover {
   background-color: rgb(72,83,217);
-  border: solid 0.0625rem rgb(45,56,132);
+  border-color: rgb(45,56,132);
 }
 
 .c33:active,
@@ -515,7 +515,7 @@ exports[`renders <Summary /> without throwing 1`] = `
 
 .c35:hover {
   background-color: rgb(72,83,217);
-  border: solid 0.0625rem rgb(45,56,132);
+  border-color: rgb(45,56,132);
 }
 
 .c35:active,
@@ -625,7 +625,7 @@ exports[`renders <Summary /> without throwing 1`] = `
 
 .c40:hover {
   background-color: rgb(72,83,217);
-  border: solid 0.0625rem rgb(45,56,132);
+  border-color: rgb(45,56,132);
 }
 
 .c40:active,
@@ -767,7 +767,7 @@ exports[`renders <Summary /> without throwing 1`] = `
 
 .c41:hover {
   background-color: rgb(72,83,217);
-  border: solid 0.0625rem rgb(45,56,132);
+  border-color: rgb(45,56,132);
 }
 
 .c41:active,
@@ -893,6 +893,7 @@ exports[`renders <Summary /> without throwing 1`] = `
 .c43 {
   height: 1px;
   background-color: rgb(216,216,216);
+  height: 1;
 }
 
 .c2 {
@@ -2151,7 +2152,7 @@ exports[`renders <Summary instance /> without throwing 1`] = `
 
 .c33:hover {
   background-color: rgb(72,83,217);
-  border: solid 0.0625rem rgb(45,56,132);
+  border-color: rgb(45,56,132);
 }
 
 .c33:active,
@@ -2247,7 +2248,7 @@ exports[`renders <Summary instance /> without throwing 1`] = `
 
 .c27:hover {
   background-color: rgb(72,83,217);
-  border: solid 0.0625rem rgb(45,56,132);
+  border-color: rgb(45,56,132);
 }
 
 .c27:active,
@@ -2352,7 +2353,7 @@ exports[`renders <Summary instance /> without throwing 1`] = `
 
 .c39:hover {
   background-color: rgb(72,83,217);
-  border: solid 0.0625rem rgb(45,56,132);
+  border-color: rgb(45,56,132);
 }
 
 .c39:active,
@@ -2472,7 +2473,7 @@ exports[`renders <Summary instance /> without throwing 1`] = `
 
 .c40:hover {
   background-color: rgb(72,83,217);
-  border: solid 0.0625rem rgb(45,56,132);
+  border-color: rgb(45,56,132);
 }
 
 .c40:active,
@@ -2582,6 +2583,7 @@ exports[`renders <Summary instance /> without throwing 1`] = `
 .c42 {
   height: 1px;
   background-color: rgb(216,216,216);
+  height: 1;
 }
 
 .c2 {
@@ -4078,7 +4080,7 @@ exports[`renders <Summary instance /> without throwing 2`] = `
 
 .c33:hover {
   background-color: rgb(72,83,217);
-  border: solid 0.0625rem rgb(45,56,132);
+  border-color: rgb(45,56,132);
 }
 
 .c33:active,
@@ -4174,7 +4176,7 @@ exports[`renders <Summary instance /> without throwing 2`] = `
 
 .c27:hover {
   background-color: rgb(72,83,217);
-  border: solid 0.0625rem rgb(45,56,132);
+  border-color: rgb(45,56,132);
 }
 
 .c27:active,
@@ -4279,7 +4281,7 @@ exports[`renders <Summary instance /> without throwing 2`] = `
 
 .c39:hover {
   background-color: rgb(72,83,217);
-  border: solid 0.0625rem rgb(45,56,132);
+  border-color: rgb(45,56,132);
 }
 
 .c39:active,
@@ -4399,7 +4401,7 @@ exports[`renders <Summary instance /> without throwing 2`] = `
 
 .c40:hover {
   background-color: rgb(72,83,217);
-  border: solid 0.0625rem rgb(45,56,132);
+  border-color: rgb(45,56,132);
 }
 
 .c40:active,
@@ -4509,6 +4511,7 @@ exports[`renders <Summary instance /> without throwing 2`] = `
 .c42 {
   height: 1px;
   background-color: rgb(216,216,216);
+  height: 1;
 }
 
 .c2 {
@@ -6060,7 +6063,7 @@ exports[`renders <Summary starting stopping rebooting removing /> without throwi
 
 .c27:hover {
   background-color: rgb(72,83,217);
-  border: solid 0.0625rem rgb(45,56,132);
+  border-color: rgb(45,56,132);
 }
 
 .c27:active,
@@ -6164,7 +6167,7 @@ exports[`renders <Summary starting stopping rebooting removing /> without throwi
 
 .c36:hover {
   background-color: rgb(72,83,217);
-  border: solid 0.0625rem rgb(45,56,132);
+  border-color: rgb(45,56,132);
 }
 
 .c36:active,
@@ -6260,7 +6263,7 @@ exports[`renders <Summary starting stopping rebooting removing /> without throwi
 
 .c38:hover {
   background-color: rgb(72,83,217);
-  border: solid 0.0625rem rgb(45,56,132);
+  border-color: rgb(45,56,132);
 }
 
 .c38:active,
@@ -6370,7 +6373,7 @@ exports[`renders <Summary starting stopping rebooting removing /> without throwi
 
 .c43:hover {
   background-color: rgb(72,83,217);
-  border: solid 0.0625rem rgb(45,56,132);
+  border-color: rgb(45,56,132);
 }
 
 .c43:active,
@@ -6512,7 +6515,7 @@ exports[`renders <Summary starting stopping rebooting removing /> without throwi
 
 .c44:hover {
   background-color: rgb(72,83,217);
-  border: solid 0.0625rem rgb(45,56,132);
+  border-color: rgb(45,56,132);
 }
 
 .c44:active,
@@ -6638,6 +6641,7 @@ exports[`renders <Summary starting stopping rebooting removing /> without throwi
 .c46 {
   height: 1px;
   background-color: rgb(216,216,216);
+  height: 1;
 }
 
 .c2 {
@@ -7920,7 +7924,7 @@ exports[`renders <Summary state /> without throwing 1`] = `
 
 .c33:hover {
   background-color: rgb(72,83,217);
-  border: solid 0.0625rem rgb(45,56,132);
+  border-color: rgb(45,56,132);
 }
 
 .c33:active,
@@ -8016,7 +8020,7 @@ exports[`renders <Summary state /> without throwing 1`] = `
 
 .c27:hover {
   background-color: rgb(72,83,217);
-  border: solid 0.0625rem rgb(45,56,132);
+  border-color: rgb(45,56,132);
 }
 
 .c27:active,
@@ -8121,7 +8125,7 @@ exports[`renders <Summary state /> without throwing 1`] = `
 
 .c39:hover {
   background-color: rgb(72,83,217);
-  border: solid 0.0625rem rgb(45,56,132);
+  border-color: rgb(45,56,132);
 }
 
 .c39:active,
@@ -8241,7 +8245,7 @@ exports[`renders <Summary state /> without throwing 1`] = `
 
 .c40:hover {
   background-color: rgb(72,83,217);
-  border: solid 0.0625rem rgb(45,56,132);
+  border-color: rgb(45,56,132);
 }
 
 .c40:active,
@@ -8351,6 +8355,7 @@ exports[`renders <Summary state /> without throwing 1`] = `
 .c42 {
   height: 1px;
   background-color: rgb(216,216,216);
+  height: 1;
 }
 
 .c2 {
@@ -9609,7 +9614,7 @@ exports[`renders <Summary state /> without throwing 2`] = `
 
 .c33:hover {
   background-color: rgb(72,83,217);
-  border: solid 0.0625rem rgb(45,56,132);
+  border-color: rgb(45,56,132);
 }
 
 .c33:active,
@@ -9705,7 +9710,7 @@ exports[`renders <Summary state /> without throwing 2`] = `
 
 .c27:hover {
   background-color: rgb(72,83,217);
-  border: solid 0.0625rem rgb(45,56,132);
+  border-color: rgb(45,56,132);
 }
 
 .c27:active,
@@ -9810,7 +9815,7 @@ exports[`renders <Summary state /> without throwing 2`] = `
 
 .c39:hover {
   background-color: rgb(72,83,217);
-  border: solid 0.0625rem rgb(45,56,132);
+  border-color: rgb(45,56,132);
 }
 
 .c39:active,
@@ -9930,7 +9935,7 @@ exports[`renders <Summary state /> without throwing 2`] = `
 
 .c40:hover {
   background-color: rgb(72,83,217);
-  border: solid 0.0625rem rgb(45,56,132);
+  border-color: rgb(45,56,132);
 }
 
 .c40:active,
@@ -10040,6 +10045,7 @@ exports[`renders <Summary state /> without throwing 2`] = `
 .c42 {
   height: 1px;
   background-color: rgb(216,216,216);
+  height: 1;
 }
 
 .c2 {
@@ -11312,7 +11318,7 @@ exports[`renders <Summary state /> without throwing 3`] = `
 
 .c27:hover {
   background-color: rgb(72,83,217);
-  border: solid 0.0625rem rgb(45,56,132);
+  border-color: rgb(45,56,132);
 }
 
 .c27:active,
@@ -11416,7 +11422,7 @@ exports[`renders <Summary state /> without throwing 3`] = `
 
 .c33:hover {
   background-color: rgb(72,83,217);
-  border: solid 0.0625rem rgb(45,56,132);
+  border-color: rgb(45,56,132);
 }
 
 .c33:active,
@@ -11512,7 +11518,7 @@ exports[`renders <Summary state /> without throwing 3`] = `
 
 .c35:hover {
   background-color: rgb(72,83,217);
-  border: solid 0.0625rem rgb(45,56,132);
+  border-color: rgb(45,56,132);
 }
 
 .c35:active,
@@ -11622,7 +11628,7 @@ exports[`renders <Summary state /> without throwing 3`] = `
 
 .c40:hover {
   background-color: rgb(72,83,217);
-  border: solid 0.0625rem rgb(45,56,132);
+  border-color: rgb(45,56,132);
 }
 
 .c40:active,
@@ -11764,7 +11770,7 @@ exports[`renders <Summary state /> without throwing 3`] = `
 
 .c41:hover {
   background-color: rgb(72,83,217);
-  border: solid 0.0625rem rgb(45,56,132);
+  border-color: rgb(45,56,132);
 }
 
 .c41:active,
@@ -11891,6 +11897,7 @@ exports[`renders <Summary state /> without throwing 3`] = `
 .c43 {
   height: 1px;
   background-color: rgb(216,216,216);
+  height: 1;
 }
 
 .c2 {

consoles/my-joy-instances/src/components/instances/__tests__/__snapshots__/toolbar.spec.js.snap

@@ -127,7 +127,7 @@ exports[`renders <Toolbar /> without throwing 1`] = `
 
 .c7:hover {
   background-color: rgb(72,83,217);
-  border: solid 0.0625rem rgb(45,56,132);
+  border-color: rgb(45,56,132);
 }
 
 .c7:active,
@@ -421,7 +421,7 @@ exports[`renders <Toolbar actionLabel /> without throwing 1`] = `
 
 .c7:hover {
   background-color: rgb(72,83,217);
-  border: solid 0.0625rem rgb(45,56,132);
+  border-color: rgb(45,56,132);
 }
 
 .c7:active,
@@ -720,7 +720,7 @@ exports[`renders <Toolbar actionable /> without throwing 1`] = `
 
 .c7:hover {
   background-color: rgb(72,83,217);
-  border: solid 0.0625rem rgb(45,56,132);
+  border-color: rgb(45,56,132);
 }
 
 .c7:active,
@@ -1031,7 +1031,7 @@ exports[`renders <Toolbar onActionClick /> without throwing 1`] = `
 
 .c7:hover {
   background-color: rgb(72,83,217);
-  border: solid 0.0625rem rgb(45,56,132);
+  border-color: rgb(45,56,132);
 }
 
 .c7:active,
@@ -1325,7 +1325,7 @@ exports[`renders <Toolbar searchLabel /> without throwing 1`] = `
 
 .c7:hover {
   background-color: rgb(72,83,217);
-  border: solid 0.0625rem rgb(45,56,132);
+  border-color: rgb(45,56,132);
 }
 
 .c7:active,
@@ -1619,7 +1619,7 @@ exports[`renders <Toolbar searchPlaceholder /> without throwing 1`] = `
 
 .c7:hover {
   background-color: rgb(72,83,217);
-  border: solid 0.0625rem rgb(45,56,132);
+  border-color: rgb(45,56,132);
 }
 
 .c7:active,
@@ -1913,7 +1913,7 @@ exports[`renders <Toolbar searchable /> without throwing 1`] = `
 
 .c7:hover {
   background-color: rgb(72,83,217);
-  border: solid 0.0625rem rgb(45,56,132);
+  border-color: rgb(45,56,132);
 }
 
 .c7:active,

consoles/my-joy-instances/src/components/instances/footer.js

@@ -1,6 +1,5 @@
 import React from 'react';
 import { Row, Col } from 'joyent-react-styled-flexboxgrid';
-import { withTheme } from 'styled-components';
 import { Margin } from 'styled-components-spacing';
 import Flex from 'styled-flex-component';
 
@@ -16,172 +15,159 @@ import {
 
 const { SmallOnly, Medium } = QueryBreakpoints;
 
-export default withTheme(
-  ({
-    submitting = false,
-    statuses = {},
-    allowedActions = {},
-    onStart,
-    onStop,
-    onReboot,
-    onRemove,
-    theme = {}
-  }) => (
-    <StickyFooter fixed bottom fill="#FAFAFA">
-      <Row between="xs" middle="xs">
-        <Col xs={7}>
-          <Flex>
-            {onStart && [
-              <SmallOnly key="small-only">
+export default ({
+  submitting = false,
+  statuses = {},
+  allowedActions = {},
+  onStart,
+  onStop,
+  onReboot,
+  onRemove
+}) => (
+  <StickyFooter fill="#FAFAFA" fixed bottom>
+    <Row between="xs" middle="xs">
+      <Col xs={7}>
+        <Flex>
+          {onStart && [
+            <SmallOnly key="small-only">
+              <Button
+                type="button"
+                onClick={onStart}
+                disabled={submitting || !allowedActions.start}
+                loading={submitting && statuses.starting}
+                secondary
+                small
+                icon
+              >
+                <StartIcon disabled={submitting || !allowedActions.start} />
+              </Button>
+            </SmallOnly>,
+            <Margin right="1">
+              <Medium key="medium">
                 <Button
                   type="button"
                   onClick={onStart}
                   disabled={submitting || !allowedActions.start}
                   loading={submitting && statuses.starting}
                   secondary
-                  small
                   icon
                 >
-                  <StartIcon disabled={submitting || !allowedActions.start} />
+                  <Margin right="1">
+                    <StartIcon disabled={submitting || !allowedActions.start} />
+                  </Margin>
+                  <span>Start</span>
                 </Button>
-              </SmallOnly>,
-              <Margin right={1}>
-                <Medium key="medium">
-                  <Button
-                    type="button"
-                    onClick={onStart}
-                    disabled={submitting || !allowedActions.start}
-                    loading={submitting && statuses.starting}
-                    secondary
-                    icon
-                  >
-                    <Margin right={1}>
-                      <StartIcon
-                        disabled={submitting || !allowedActions.start}
-                      />
-                    </Margin>
-                    <span>Start</span>
-                  </Button>
-                </Medium>
-              </Margin>
-            ]}
-            {onStop && [
-              <SmallOnly key="small-only">
+              </Medium>
+            </Margin>
+          ]}
+          {onStop && [
+            <SmallOnly key="small-only">
+              <Button
+                type="button"
+                onClick={onStop}
+                disabled={submitting || !allowedActions.stop}
+                loading={submitting && statuses.stopping}
+                secondary
+                small
+                icon
+              >
+                <StopIcon disabled={submitting || !allowedActions.stop} />
+              </Button>
+            </SmallOnly>,
+            <Margin right="1">
+              <Medium key="medium">
                 <Button
                   type="button"
                   onClick={onStop}
                   disabled={submitting || !allowedActions.stop}
                   loading={submitting && statuses.stopping}
                   secondary
-                  small
                   icon
                 >
-                  <StopIcon disabled={submitting || !allowedActions.stop} />
+                  <Margin right="1">
+                    <StopIcon disabled={submitting || !allowedActions.stop} />
+                  </Margin>
+                  <span>Stop</span>
                 </Button>
-              </SmallOnly>,
-              <Margin right={1}>
-                <Medium key="medium">
-                  <Button
-                    type="button"
-                    onClick={onStop}
-                    disabled={submitting || !allowedActions.stop}
-                    loading={submitting && statuses.stopping}
-                    secondary
-                    icon
-                  >
-                    <Margin right={1}>
-                      <StopIcon disabled={submitting || !allowedActions.stop} />
-                    </Margin>
-                    <span>Stop</span>
-                  </Button>
-                </Medium>
-              </Margin>
-            ]}
-            {onReboot && [
-              <SmallOnly key="small-only">
+              </Medium>
+            </Margin>
+          ]}
+          {onReboot && [
+            <SmallOnly key="small-only">
+              <Button
+                type="button"
+                onClick={onReboot}
+                disabled={submitting || !allowedActions.reboot}
+                loading={submitting && statuses.rebooting}
+                secondary
+                small
+                icon
+              >
+                <ResetIcon disabled={submitting || !allowedActions.reboot} />
+              </Button>
+            </SmallOnly>,
+            <Margin right="1">
+              <Medium key="medium">
                 <Button
                   type="button"
                   onClick={onReboot}
                   disabled={submitting || !allowedActions.reboot}
                   loading={submitting && statuses.rebooting}
                   secondary
-                  small
                   icon
                 >
                   <ResetIcon disabled={submitting || !allowedActions.reboot} />
+                  <span>Reboot</span>
                 </Button>
-              </SmallOnly>,
-              <Margin right={1}>
-                <Medium key="medium">
-                  <Button
-                    type="button"
-                    onClick={onReboot}
-                    disabled={submitting || !allowedActions.reboot}
-                    loading={submitting && statuses.rebooting}
-                    secondary
-                    icon
-                  >
-                    <ResetIcon
-                      disabled={submitting || !allowedActions.reboot}
-                    />
-                    <span>Reboot</span>
-                  </Button>
-                </Medium>
-              </Margin>
-            ]}
-          </Flex>
-        </Col>
-        {onRemove && (
-          <Col xs={5}>
-            <SmallOnly key="small-only">
-              <Button
-                type="button"
-                onClick={onRemove}
-                disabled={submitting || !allowedActions.remove}
-                loading={submitting && statuses.removing}
-                secondary
-                error
-                right
-                small
-                icon
-              >
+              </Medium>
+            </Margin>
+          ]}
+        </Flex>
+      </Col>
+      {onRemove && (
+        <Col xs={5}>
+          <SmallOnly key="small-only">
+            <Button
+              type="button"
+              onClick={onRemove}
+              disabled={submitting || !allowedActions.remove}
+              loading={submitting && statuses.removing}
+              secondary
+              error
+              right
+              small
+              icon
+            >
+              <DeleteIcon
+                disabled={submitting}
+                fill={submitting || !allowedActions.remove ? undefined : 'red'}
+              />
+            </Button>
+          </SmallOnly>
+          <Medium key="medium">
+            <Button
+              type="button"
+              onClick={onRemove}
+              disabled={submitting || !allowedActions.remove}
+              loading={submitting && statuses.removing}
+              error
+              secondary
+              right
+              icon
+            >
+              <Margin right="1">
                 <DeleteIcon
-                  disabled={submitting}
+                  disabled={submitting || !allowedActions.remove}
                   fill={
-                    !(submitting || !allowedActions.remove)
-                      ? theme.red
-                      : undefined
+                    submitting || !allowedActions.remove ? undefined : 'red'
                   }
                 />
-              </Button>
-            </SmallOnly>
-            <Medium key="medium">
-              <Button
-                type="button"
-                onClick={onRemove}
-                disabled={submitting || !allowedActions.remove}
-                loading={submitting && statuses.removing}
-                error
-                secondary
-                right
-                icon
-              >
-                <Margin right={1}>
-                  <DeleteIcon
-                    disabled={submitting || !allowedActions.remove}
-                    fill={
-                      !(submitting || !allowedActions.remove)
-                        ? theme.red
-                        : undefined
-                    }
-                  />
-                </Margin>
-                <span>Remove</span>
-              </Button>
-            </Medium>
-          </Col>
-        )}
-      </Row>
-    </StickyFooter>
-  )
+              </Margin>
+              <span>Remove</span>
+            </Button>
+          </Medium>
+        </Col>
+      )}
+    </Row>
+  </StickyFooter>
 );

consoles/my-joy-instances/src/components/instances/list.js

@@ -64,7 +64,7 @@ const MarginalPaginationItem = styled(PaginationItem)`
 `;
 
 const Actions = styled(Flex)`
-  height: ${remcalc(48)};
+  height: 100%;
 `;
 
 const PopoverItem = styled(BasePopoverItem)`
@@ -124,7 +124,11 @@ export const Item = ({
     <TableTd xs="0" sm="130" middle left>
       <code>{id.substring(0, 7)}</code>
     </TableTd>
-    {!mutating ? (
+    {mutating ? (
+      <TableTd padding="0" hasBorder="left" center middle>
+        <ActionsIcon disabled />
+      </TableTd>
+    ) : (
       <PopoverContainer clickable>
         <TableTd padding="0" hasBorder="left">
           <PopoverTarget box>
@@ -160,10 +164,6 @@ export const Item = ({
           </Popover>
         </TableTd>
       </PopoverContainer>
-    ) : (
-      <TableTd padding="0" hasBorder="left" center middle>
-        <ActionsIcon disabled />
-      </TableTd>
     )}
   </TableTr>
 );
@@ -250,7 +250,7 @@ export default ({
           </TableTr>
         </TableThead>
         <TableTbody>{children}</TableTbody>
-        {!noInstances ? (
+        {noInstances ? null : (
           <PaginationTableFoot colSpan="6">
             <PaginationItem
               to={`${Global().pathname}?${queryString.stringify({
@@ -336,7 +336,7 @@ export default ({
               Next
             </PaginationItem>
           </PaginationTableFoot>
-        ) : null}
+        )}
       </Table>
     </form>
   );

consoles/my-joy-instances/src/components/instances/metadata.js

@@ -1,6 +1,6 @@
 import React from 'react';
 
-import { KeyValue } from 'joyent-ui-toolkit';
+import { KeyValue } from 'joyent-ui-resource-widgets';
 import Editor from 'joyent-ui-toolkit/dist/es/editor';
 
 export const AddForm = props => (

consoles/my-joy-instances/src/components/instances/snapshots.js

@@ -15,7 +15,6 @@ import {
   TableTbody,
   TableTd,
   Checkbox,
-  KeyValue,
   Popover,
   PopoverContainer,
   PopoverTarget,
@@ -24,7 +23,7 @@ import {
   DotIcon
 } from 'joyent-ui-toolkit';
 
-import { Empty } from 'joyent-ui-resource-widgets';
+import { Empty, KeyValue } from 'joyent-ui-resource-widgets';
 
 const stateColor = {
   QUEUED: 'primary',
@@ -38,7 +37,11 @@ const loadingState = {
 
 export const Item = ({ name, state, created, onStart, onRemove, mutating }) => (
   <TableTr>
-    {!mutating ? (
+    {mutating ? (
+      <TableTd colSpan="5">
+        <StatusLoader msg={loadingState[mutating]} />
+      </TableTd>
+    ) : (
       <Fragment>
         <TableTd padding="0" paddingLeft={remcalc(12)} middle left>
           <FormGroup paddingTop={remcalc(4)} name={name} field={Field}>
@@ -61,20 +64,16 @@ export const Item = ({ name, state, created, onStart, onRemove, mutating }) => (
               <ActionsIcon />
             </PopoverTarget>
             <Popover placement="top">
-              <Margin vertical={2} horizontal={3}>
+              <Margin vertical="2" horizontal="3">
                 <PopoverItem onClick={onStart}>Start</PopoverItem>
               </Margin>
-              <Margin vertical={2} horizontal={3}>
+              <Margin vertical="2" horizontal="3">
                 <PopoverItem onClick={onRemove}>Remove</PopoverItem>
               </Margin>
             </Popover>
           </TableTd>
         </PopoverContainer>
       </Fragment>
-    ) : (
-      <TableTd colSpan="5">
-        <StatusLoader msg={loadingState[mutating]} />
-      </TableTd>
     )}
   </TableTr>
 );
@@ -171,6 +170,6 @@ export default ({
           : null}
       </TableTbody>
     </Table>
-    {!snapshots.length ? <Empty borderTop>You have no Snapshots</Empty> : null}
+    {snapshots.length ? null : <Empty borderTop>You have no Snapshots</Empty>}
   </Fragment>
 );

consoles/my-joy-instances/src/components/instances/summary.js

@@ -1,8 +1,8 @@
 import React from 'react';
 import distanceInWordsToNow from 'date-fns/distance_in_words_to_now';
 import { Row, Col } from 'joyent-react-styled-flexboxgrid';
-import { default as Flex, FlexItem } from 'styled-flex-component';
-import styled, { withTheme } from 'styled-components';
+import Flex, { FlexItem } from 'styled-flex-component';
+import styled from 'styled-components';
 import { Margin, Padding } from 'styled-components-spacing';
 import titleCase from 'title-case';
 import get from 'lodash.get';
@@ -100,7 +100,7 @@ export const Meta = ({
 }) => [
   <Row middle="xs">
     <Col xs={12}>
-      <Margin bottom={1}>
+      <Margin bottom="1">
         <H2>
           {editingName ? (
             <form onSubmit={handleSubmit}>
@@ -114,7 +114,7 @@ export const Meta = ({
                   />
                   <FormMeta />
                 </FormGroup>
-                <Margin left={1}>
+                <Margin left="1">
                   <Button
                     type="submit"
                     disabled={submitting}
@@ -138,7 +138,7 @@ export const Meta = ({
       </Margin>
     </Col>
   </Row>,
-  <Margin vertical={1}>
+  <Margin vertical="1">
     <Flex>
       <TrimedLabel>
         {image && image.name ? titleCase(image.name) : 'Custom Image'}
@@ -161,7 +161,7 @@ export const Meta = ({
         {titleCase(state)}
       </Flex>
     </Flex>
-    <Margin top={1}>
+    <Margin top="1">
       <Flex>
         <Flex>
           <GreyLabel>Created: </GreyLabel>
@@ -177,227 +177,218 @@ export const Meta = ({
   </Margin>
 ];
 
-export default withTheme(
-  ({
-    instance = {},
-    starting = false,
-    stopping = false,
-    rebooting = false,
-    removing = false,
-    onAction,
-    theme = {},
-    ...props
-  }) => (
-    <Row>
-      <Col xs={12} sm={12} md={9}>
-        <Card>
-          <CardOutlet>
-            <Padding all={5}>
-              <Meta {...instance} {...props} />
-              <Margin top={3}>
-                <Row between="xs">
-                  <Col xs={9}>
-                    <Flex>
-                      <FlexItem>
-                        <Margin right={1}>
-                          <ButtonGroup>
-                            {instance.state === 'STOPPED' ? (
-                              <Button
-                                type="button"
-                                loading={starting}
-                                disabled={instance.state !== 'STOPPED'}
-                                onClick={() => onAction('start')}
-                                secondary
-                                bold
-                                icon
-                              >
-                                <Margin right={2}>
-                                  <StartIcon
-                                    disabled={instance.state !== 'STOPPED'}
-                                  />
-                                </Margin>
-                                <span>Start</span>
-                              </Button>
-                            ) : (
-                              <Button
-                                type="button"
-                                loading={stopping}
-                                disabled={instance.state !== 'RUNNING'}
-                                onClick={() => onAction('stop')}
-                                secondary
-                                bold
-                                icon
-                              >
-                                <Margin right={2}>
-                                  <StopIcon
-                                    disabled={instance.state !== 'RUNNING'}
-                                  />
-                                </Margin>
-                                <span>Stop</span>
-                              </Button>
-                            )}
-                            <PopoverButton secondary>
-                              <PopoverItem
-                                disabled={instance.state === 'RUNNING'}
-                                onClick={() =>
-                                  instance.state === 'RUNNING'
-                                    ? null
-                                    : onAction('start')
-                                }
-                              >
-                                Start
-                              </PopoverItem>
-                              <PopoverItem
-                                disabled={instance.state === 'STOPPED'}
-                                onClick={() =>
-                                  instance.state === 'STOPPED'
-                                    ? null
-                                    : onAction('reboot')
-                                }
-                              >
-                                Restart
-                              </PopoverItem>
-                              <PopoverItem
-                                disabled={instance.state === 'STOPPED'}
-                                onClick={() =>
-                                  instance.state === 'STOPPED'
-                                    ? null
-                                    : onAction('stop')
-                                }
-                              >
-                                Stop
-                              </PopoverItem>
-                            </PopoverButton>
-                          </ButtonGroup>
-                        </Margin>
-                      </FlexItem>
-                      <FlexItem>
-                        <Button
-                          href={`${GLOBAL.origin}/images/~create/${
-                            instance.id
-                          }`}
-                          target="__blank"
-                          rel="noopener noreferrer"
-                          secondary
-                          bold
-                          icon
-                        >
-                          Create Image
-                        </Button>
-                      </FlexItem>
-                    </Flex>
-                  </Col>
-                  <Col xs={3}>
-                    <SmallOnly>
+export default ({
+  instance = {},
+  starting = false,
+  stopping = false,
+  rebooting = false,
+  removing = false,
+  onAction,
+  ...props
+}) => (
+  <Row>
+    <Col xs={12} sm={12} md={9}>
+      <Card>
+        <CardOutlet>
+          <Padding all={5}>
+            <Meta {...instance} {...props} />
+            <Margin top="3">
+              <Row between="xs">
+                <Col xs={9}>
+                  <Flex>
+                    <FlexItem>
+                      <Margin right="1">
+                        <ButtonGroup>
+                          {instance.state === 'STOPPED' ? (
+                            <Button
+                              type="button"
+                              loading={starting}
+                              disabled={instance.state !== 'STOPPED'}
+                              onClick={() => onAction('start')}
+                              secondary
+                              bold
+                              icon
+                            >
+                              <Margin right="2">
+                                <StartIcon
+                                  disabled={instance.state !== 'STOPPED'}
+                                />
+                              </Margin>
+                              <span>Start</span>
+                            </Button>
+                          ) : (
+                            <Button
+                              type="button"
+                              loading={stopping}
+                              disabled={instance.state !== 'RUNNING'}
+                              onClick={() => onAction('stop')}
+                              secondary
+                              bold
+                              icon
+                            >
+                              <Margin right="2">
+                                <StopIcon
+                                  disabled={instance.state !== 'RUNNING'}
+                                />
+                              </Margin>
+                              <span>Stop</span>
+                            </Button>
+                          )}
+                          <PopoverButton secondary>
+                            <PopoverItem
+                              disabled={instance.state === 'RUNNING'}
+                              onClick={() =>
+                                instance.state === 'RUNNING'
+                                  ? null
+                                  : onAction('start')
+                              }
+                            >
+                              Start
+                            </PopoverItem>
+                            <PopoverItem
+                              disabled={instance.state === 'STOPPED'}
+                              onClick={() =>
+                                instance.state === 'STOPPED'
+                                  ? null
+                                  : onAction('reboot')
+                              }
+                            >
+                              Restart
+                            </PopoverItem>
+                            <PopoverItem
+                              disabled={instance.state === 'STOPPED'}
+                              onClick={() =>
+                                instance.state === 'STOPPED'
+                                  ? null
+                                  : onAction('stop')
+                              }
+                            >
+                              Stop
+                            </PopoverItem>
+                          </PopoverButton>
+                        </ButtonGroup>
+                      </Margin>
+                    </FlexItem>
+                    <FlexItem>
                       <Button
-                        type="button"
-                        loading={removing}
-                        disabled={
-                          ['RUNNING', 'STOPPED'].indexOf(instance.state) < 0
-                        }
-                        onClick={() => onAction('remove')}
-                        secondary
-                        small
-                        right
-                        icon
-                        error
-                      >
-                        <Margin right={2}>
-                          <DeleteIcon
-                            fill={theme.red}
-                            disabled={
-                              ['RUNNING', 'STOPPED'].indexOf(instance.state) < 0
-                            }
-                          />
-                        </Margin>
-                      </Button>
-                    </SmallOnly>
-                    <Medium>
-                      <Button
-                        type="button"
-                        loading={removing}
-                        disabled={
-                          ['RUNNING', 'STOPPED'].indexOf(instance.state) < 0
-                        }
-                        onClick={() => onAction('remove')}
+                        href={`${GLOBAL.origin}/images/~create/${instance.id}`}
+                        target="__blank"
+                        rel="noopener noreferrer"
                         secondary
                         bold
-                        right
                         icon
-                        error
                       >
-                        <Margin right={2}>
-                          <DeleteIcon
-                            fill={
-                              ['RUNNING', 'STOPPED'].indexOf(instance.state) >=
-                              0
-                                ? theme.red
-                                : undefined
-                            }
-                            disabled={
-                              ['RUNNING', 'STOPPED'].indexOf(instance.state) < 0
-                            }
-                          />
-                        </Margin>
-                        <span>Delete</span>
+                        Create Image
                       </Button>
-                    </Medium>
-                  </Col>
-                </Row>
-              </Margin>
-              <Margin bottom={5} top={3}>
-                <Divider height={1} />
-              </Margin>
-              <Margin bottom={3}>
+                    </FlexItem>
+                  </Flex>
+                </Col>
+                <Col xs={3}>
+                  <SmallOnly>
+                    <Button
+                      type="button"
+                      loading={removing}
+                      disabled={
+                        ['RUNNING', 'STOPPED'].indexOf(instance.state) < 0
+                      }
+                      onClick={() => onAction('remove')}
+                      secondary
+                      small
+                      right
+                      icon
+                      error
+                    >
+                      <Margin right="2">
+                        <DeleteIcon
+                          fill="red"
+                          disabled={
+                            ['RUNNING', 'STOPPED'].indexOf(instance.state) < 0
+                          }
+                        />
+                      </Margin>
+                    </Button>
+                  </SmallOnly>
+                  <Medium>
+                    <Button
+                      type="button"
+                      loading={removing}
+                      disabled={
+                        ['RUNNING', 'STOPPED'].indexOf(instance.state) < 0
+                      }
+                      onClick={() => onAction('remove')}
+                      secondary
+                      bold
+                      right
+                      icon
+                      error
+                    >
+                      <Margin right="2">
+                        <DeleteIcon
+                          fill={
+                            ['RUNNING', 'STOPPED'].indexOf(instance.state) >= 0
+                              ? 'red'
+                              : undefined
+                          }
+                          disabled={
+                            ['RUNNING', 'STOPPED'].indexOf(instance.state) < 0
+                          }
+                        />
+                      </Margin>
+                      <span>Delete</span>
+                    </Button>
+                  </Medium>
+                </Col>
+              </Row>
+            </Margin>
+            <Margin bottom="5" top="3">
+              <Divider height={1} />
+            </Margin>
+            <Margin bottom="3">
+              <CopiableField
+                text={(instance.id || '').split('-')[0]}
+                label="Short ID"
+              />
+            </Margin>
+            <Margin bottom="3">
+              <CopiableField text={instance.id} label="ID" />
+            </Margin>
+            <Margin bottom="3">
+              <CopiableField text={instance.compute_node} label="CN UUID" />
+            </Margin>
+            {instance.image &&
+              instance.image.id && (
+                <Margin bottom="3">
+                  <CopiableField text={instance.image.id} label="Image UUID" />
+                </Margin>
+              )}
+            <Margin bottom="3">
+              <CopiableField
+                text={`ssh root@${instance.primary_ip}`}
+                label="Login"
+              />
+            </Margin>
+            {get(instance, 'ips.public', []).map((ip, i, ips) => (
+              <Margin bottom="3">
                 <CopiableField
-                  text={(instance.id || '').split('-')[0]}
-                  label="Short ID"
+                  key={`public-${i}`}
+                  label={`Public IP address ${ips.length > 1 ? i + 1 : ''}`}
+                  text={ip}
                 />
               </Margin>
-              <Margin bottom={3}>
-                <CopiableField text={instance.id} label="ID" />
-              </Margin>
-              <Margin bottom={3}>
-                <CopiableField text={instance.compute_node} label="CN UUID" />
-              </Margin>
-              {instance.image &&
-                instance.image.id && (
-                  <Margin bottom={3}>
-                    <CopiableField
-                      text={instance.image.id}
-                      label="Image UUID"
-                    />
-                  </Margin>
-                )}
-              <Margin bottom={3}>
+            ))}
+            {get(instance, 'ips.private', []).map((ip, i, ips) => (
+              <Margin bottom="3">
                 <CopiableField
-                  text={`ssh root@${instance.primary_ip}`}
-                  label="Login"
+                  key={`private-${i}`}
+                  noMargin={i === ips.length - 1}
+                  label={`Private IP address ${ips.length > 1 ? i + 1 : ''}`}
+                  text={ip}
                 />
               </Margin>
-              {get(instance, 'ips.public', []).map((ip, i, ips) => (
-                <Margin bottom={3}>
-                  <CopiableField
-                    key={`public-${i}`}
-                    label={`Public IP address ${ips.length > 1 ? i + 1 : ''}`}
-                    text={ip}
-                  />
-                </Margin>
-              ))}
-              {get(instance, 'ips.private', []).map((ip, i, ips) => (
-                <Margin bottom={3}>
-                  <CopiableField
-                    key={`private-${i}`}
-                    noMargin={i === ips.length - 1}
-                    label={`Private IP address ${ips.length > 1 ? i + 1 : ''}`}
-                    text={ip}
-                  />
-                </Margin>
-              ))}
-            </Padding>
-          </CardOutlet>
-        </Card>
-      </Col>
-    </Row>
-  )
+            ))}
+          </Padding>
+        </CardOutlet>
+      </Card>
+    </Col>
+  </Row>
 );

consoles/my-joy-instances/src/components/instances/toolbar.js

@@ -18,7 +18,7 @@ export const Toolbar = ({
   <Flex justifyBetween alignEnd>
     <FormGroup name="filter" field={Field}>
       <FormLabel>{searchLabel}</FormLabel>
-      <Margin top={0.5}>
+      <Margin top="0.5">
         <Input placeholder={searchPlaceholder} disabled={!searchable} />
       </Margin>
     </FormGroup>

consoles/my-joy-instances/src/containers/create.js

@@ -7,15 +7,9 @@ import { SubmissionError, destroy } from 'redux-form';
 import { set, destroyAll } from 'react-redux-values';
 import intercept from 'apr-intercept';
 import get from 'lodash.get';
-import omit from 'lodash.omit';
-import uniqBy from 'lodash.uniqby';
-import constantCase from 'constant-case';
 
 import { H3, ViewContainer, Button } from 'joyent-ui-toolkit';
-import { Forms } from '../constants';
 import { Provider as ResourceSteps } from 'joyent-ui-resource-step';
-import parseError from '../state/parse-error';
-import CreateInstanceMutation from '../graphql/create-instance.gql';
 
 import {
   Name,
@@ -27,9 +21,14 @@ import {
   UserScript,
   Firewall,
   CNS,
-  Affinity
+  Affinity,
+  generatePayload
 } from 'joyent-ui-instance-steps';
 
+import { Forms } from '@root/constants';
+import parseError from '@state/parse-error';
+import CreateInstanceMutation from '@graphql/create-instance.gql';
+
 const { IC_F } = Forms;
 const names = {
   name: 'IC_NAME',
@@ -94,7 +93,7 @@ class CreateInstance extends Component {
     const {
       name,
       image,
-      package: packageResult,
+      package: pkg,
       networks,
       tags,
       metadata,
@@ -105,7 +104,7 @@ class CreateInstance extends Component {
 
     return (
       <ViewContainer main>
-        <Margin top={5}>
+        <Margin top="5">
           <H3>Create Instance</H3>
         </Margin>
         <Padding top="5">
@@ -138,7 +137,7 @@ class CreateInstance extends Component {
                 next="networks"
                 saved={steps.package}
                 onDefocus={handleDefocus('package')}
-                preview={packageResult}
+                preview={pkg}
               />
             </Margin>
             <Margin bottom="5">
@@ -218,7 +217,7 @@ class CreateInstance extends Component {
               />
             </Margin>
           </ResourceSteps>
-          <Margin bottom={5}>
+          <Margin bottom="5">
             <ReduxForm form={IC_F} onSubmit={handleSubmit}>
               {({ handleSubmit, submitting }) => (
                 <form onSubmit={handleSubmit}>
@@ -277,94 +276,15 @@ export default compose(
     };
   }),
   connect(null, (dispatch, { steps = {}, forms, history, createInstance }) => {
-    const parseAffRule = ({
-      conditional,
-      placement,
-      type: identity,
-      name,
-      pattern,
-      value
-    }) => {
-      const type = constantCase(
-        `${conditional}_${placement === 'same' ? 'equal' : 'not_equal'}`
-      );
-
-      const patterns = {
-        equalling: value => value,
-        starting: value => `/^${value}/`
-      };
-
-      const _name = identity === 'name' ? 'instance' : name;
-      const _value = patterns[pattern](type === 'name' ? name : value);
-
-      return {
-        type,
-        key: _name,
-        value: _value
-      };
-    };
-
     return {
       handleDefocus: name => value => {
         return dispatch(set({ name: names[name], value }));
       },
 
       handleSubmit: async () => {
-        const _affinity = steps.affinity ? parseAffRule(steps.affinity) : null;
-        const _name = steps.name && steps.name.name.toLowerCase();
-
-        const _metadata =
-          (steps.metadata && steps.metadata.map(a => omit(a, 'open'))) || [];
-
-        const _tags =
-          (steps.tags &&
-            uniqBy(steps.tags.map(a => omit(a, 'expanded')), 'name').map(a =>
-              omit(a, 'expanded')
-            )) ||
-          [];
-
-        const _networks = steps.networks && steps.networks.map(({ id }) => id);
-
-        if (steps['user-script'] && steps['user-script'].lines) {
-          _metadata.push({
-            name: 'user-script',
-            value: steps['user-script'].script
-          });
-        }
-
-        if (steps.cns) {
-          _tags.push({
-            name: 'triton.cns.disable',
-            value: !steps.cns.cnsEnabled
-          });
-        }
-
-        if (
-          steps.cns &&
-          (steps.cns.serviceNames &&
-            steps.cns.serviceNames.length &&
-            steps.cns.cnsEnabled)
-        ) {
-          _tags.push({
-            name: 'triton.cns.services',
-            value: steps.cns.serviceNames.join(',')
-          });
-        }
-
         const [err, res] = await intercept(
           createInstance({
-            variables: {
-              name: _name,
-              package: steps.package.id,
-              image: steps.image.id,
-              affinity: _affinity ? [_affinity] : [],
-              metadata: _metadata,
-              tags: _tags,
-              firewall_enabled: steps.firewall
-                ? steps.firewall.enabled
-                : undefined,
-              networks: _networks && _networks.length ? _networks : undefined
-            }
+            variables: generatePayload(steps)
           })
         );
 

consoles/my-joy-instances/src/containers/instances/__tests__/__snapshots__/firewall.spec.js.snap

@@ -140,6 +140,7 @@ Array [
   margin: 0;
   line-height: 1.5rem;
   font-size: 0.9375rem;
+  margin: 0;
 }
 
 .c19 {
@@ -983,6 +984,7 @@ Array [
   margin: 0;
   line-height: 1.5rem;
   font-size: 0.9375rem;
+  margin: 0;
 }
 
 .c19 {
@@ -1888,6 +1890,7 @@ Array [
   margin: 0;
   line-height: 1.5rem;
   font-size: 0.9375rem;
+  margin: 0;
 }
 
 .c19 {
@@ -2731,6 +2734,7 @@ Array [
   margin: 0;
   line-height: 1.5rem;
   font-size: 0.9375rem;
+  margin: 0;
 }
 
 .c19 {
@@ -3561,6 +3565,7 @@ Array [
   margin: 0;
   line-height: 1.5rem;
   font-size: 0.9375rem;
+  margin: 0;
 }
 
 .c7 {
@@ -3840,6 +3845,7 @@ Array [
   margin: 0;
   line-height: 1.5rem;
   font-size: 0.9375rem;
+  margin: 0;
 }
 
 .c7 {
@@ -4202,6 +4208,7 @@ exports[`renders <Firewall loadingError /> without throwing 1`] = `
   margin: 0;
   line-height: 1.5rem;
   font-size: 0.9375rem;
+  margin: 0;
 }
 
 .c25 {
@@ -4266,40 +4273,11 @@ exports[`renders <Firewall loadingError /> without throwing 1`] = `
 .c11 {
   margin: 0;
   color: rgb(73,73,73);
-  font-weight: 600;
+  font-weight: 400;
   line-height: 1.5rem;
   font-size: 0.9375rem;
 }
 
-.c8 {
-  display: -webkit-box;
-  display: -webkit-flex;
-  display: -ms-flexbox;
-  display: flex;
-  position: relative;
-  background-color: rgb(255,255,255);
-  box-shadow: 0 0.125rem 0 0 rgba(0,0,0,0.05);
-  border: 0.0625rem solid rgb(216,216,216);
-  border-radius: 0.1875rem;
-  width: 100%;
-}
-
-.c9 {
-  border-radius: 0.1875rem 0 0 0.1875rem;
-  min-width: 0.75rem;
-  background-color: rgb(0,152,88);
-  background-color: rgb(210,67,58);
-}
-
-.c10 {
-  padding: 1.125rem 1.125rem;
-}
-
-.c12 {
-  line-height: 0.875rem;
-  font-size: 0.8125rem;
-}
-
 .c29 {
   box-sizing: content-box;
   display: -webkit-box;
@@ -4457,6 +4435,35 @@ exports[`renders <Firewall loadingError /> without throwing 1`] = `
   cursor: pointer;
 }
 
+.c8 {
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: -ms-flexbox;
+  display: flex;
+  position: relative;
+  background-color: rgb(255,255,255);
+  box-shadow: 0 0.125rem 0 0 rgba(0,0,0,0.05);
+  border: 0.0625rem solid rgb(216,216,216);
+  border-radius: 0.1875rem;
+  width: 100%;
+}
+
+.c9 {
+  border-radius: 0.1875rem 0 0 0.1875rem;
+  min-width: 0.75rem;
+  background-color: rgb(0,152,88);
+  background-color: rgb(210,67,58);
+}
+
+.c10 {
+  padding: 1.125rem 1.125rem;
+}
+
+.c12 {
+  line-height: 0.875rem;
+  font-size: 0.8125rem;
+}
+
 .c33 {
   color: rgb(151,151,151);
   text-align: center;
@@ -5114,6 +5121,7 @@ exports[`renders <Firewall mutationError /> without throwing 1`] = `
   margin: 0;
   line-height: 1.5rem;
   font-size: 0.9375rem;
+  margin: 0;
 }
 
 .c25 {
@@ -5178,40 +5186,11 @@ exports[`renders <Firewall mutationError /> without throwing 1`] = `
 .c11 {
   margin: 0;
   color: rgb(73,73,73);
-  font-weight: 600;
+  font-weight: 400;
   line-height: 1.5rem;
   font-size: 0.9375rem;
 }
 
-.c8 {
-  display: -webkit-box;
-  display: -webkit-flex;
-  display: -ms-flexbox;
-  display: flex;
-  position: relative;
-  background-color: rgb(255,255,255);
-  box-shadow: 0 0.125rem 0 0 rgba(0,0,0,0.05);
-  border: 0.0625rem solid rgb(216,216,216);
-  border-radius: 0.1875rem;
-  width: 100%;
-}
-
-.c9 {
-  border-radius: 0.1875rem 0 0 0.1875rem;
-  min-width: 0.75rem;
-  background-color: rgb(0,152,88);
-  background-color: rgb(210,67,58);
-}
-
-.c10 {
-  padding: 1.125rem 1.125rem;
-}
-
-.c12 {
-  line-height: 0.875rem;
-  font-size: 0.8125rem;
-}
-
 .c29 {
   box-sizing: content-box;
   display: -webkit-box;
@@ -5369,6 +5348,35 @@ exports[`renders <Firewall mutationError /> without throwing 1`] = `
   cursor: pointer;
 }
 
+.c8 {
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: -ms-flexbox;
+  display: flex;
+  position: relative;
+  background-color: rgb(255,255,255);
+  box-shadow: 0 0.125rem 0 0 rgba(0,0,0,0.05);
+  border: 0.0625rem solid rgb(216,216,216);
+  border-radius: 0.1875rem;
+  width: 100%;
+}
+
+.c9 {
+  border-radius: 0.1875rem 0 0 0.1875rem;
+  min-width: 0.75rem;
+  background-color: rgb(0,152,88);
+  background-color: rgb(210,67,58);
+}
+
+.c10 {
+  padding: 1.125rem 1.125rem;
+}
+
+.c12 {
+  line-height: 0.875rem;
+  font-size: 0.8125rem;
+}
+
 .c33 {
   color: rgb(151,151,151);
   text-align: center;
@@ -5980,6 +5988,7 @@ Array [
   margin: 0;
   line-height: 1.5rem;
   font-size: 0.9375rem;
+  margin: 0;
 }
 
 .c19 {
@@ -6429,6 +6438,7 @@ Array [
   margin: 0;
   line-height: 1.5rem;
   font-size: 0.9375rem;
+  margin: 0;
 }
 
 .c19 {
@@ -6960,6 +6970,7 @@ Array [
   margin: 0;
   line-height: 1.5rem;
   font-size: 0.9375rem;
+  margin: 0;
 }
 
 .c19 {
@@ -7824,6 +7835,7 @@ Array [
   margin: 0;
   line-height: 1.5rem;
   font-size: 0.9375rem;
+  margin: 0;
 }
 
 .c19 {
@@ -8273,6 +8285,7 @@ Array [
   margin: 0;
   line-height: 1.5rem;
   font-size: 0.9375rem;
+  margin: 0;
 }
 
 .c19 {
@@ -8804,6 +8817,7 @@ Array [
   margin: 0;
   line-height: 1.5rem;
   font-size: 0.9375rem;
+  margin: 0;
 }
 
 .c19 {

consoles/my-joy-instances/src/containers/instances/__tests__/__snapshots__/metadata.spec.js.snap

@@ -9,7 +9,7 @@ exports[`renders <Metadata /> without throwing 1`] = `
   margin-top: 0.1875rem;
 }
 
-.c17 {
+.c18 {
   margin-top: 1.875rem;
   margin-bottom: 1.125rem;
 }
@@ -108,7 +108,7 @@ exports[`renders <Metadata /> without throwing 1`] = `
 
 .c10:hover {
   background-color: rgb(72,83,217);
-  border: solid 0.0625rem rgb(45,56,132);
+  border-color: rgb(45,56,132);
 }
 
 .c10:active,
@@ -166,7 +166,7 @@ exports[`renders <Metadata /> without throwing 1`] = `
   padding-bottom: 1.125rem;
 }
 
-.c18 {
+.c19 {
   margin: 0;
   color: rgb(73,73,73);
   font-weight: normal;
@@ -177,12 +177,21 @@ exports[`renders <Metadata /> without throwing 1`] = `
 .c14 {
   height: 1px;
   background-color: rgb(216,216,216);
+  height: 0.6875rem;
   background-color: transparent;
 }
 
 .c16 {
   height: 1px;
   background-color: rgb(216,216,216);
+  height: 0.0625rem;
+}
+
+.c17 {
+  height: 1px;
+  background-color: rgb(216,216,216);
+  height: 1.5rem;
+  background-color: transparent;
 }
 
 .c3 {
@@ -410,14 +419,14 @@ exports[`renders <Metadata /> without throwing 1`] = `
     height="0.0625rem"
   />
   <div
-    className="c14 c15"
+    className="c17 c15"
     height="1.5rem"
   />
   <div
-    className="c17"
+    className="c18"
   >
     <h3
-      className="c18"
+      className="c19"
     >
       0
        key-value pair
@@ -436,12 +445,12 @@ exports[`renders <Metadata addOpen /> without throwing 1`] = `
   margin-top: 0.1875rem;
 }
 
-.c17 {
+.c18 {
   margin-top: 1.875rem;
   margin-bottom: 1.125rem;
 }
 
-.c19 {
+.c20 {
   margin-bottom: 1.125rem;
 }
 
@@ -559,7 +568,7 @@ exports[`renders <Metadata addOpen /> without throwing 1`] = `
 
 .c10:hover {
   background-color: rgb(72,83,217);
-  border: solid 0.0625rem rgb(45,56,132);
+  border-color: rgb(45,56,132);
 }
 
 .c10:active,
@@ -629,7 +638,7 @@ exports[`renders <Metadata addOpen /> without throwing 1`] = `
 
 .c42:hover {
   background-color: rgb(72,83,217);
-  border: solid 0.0625rem rgb(45,56,132);
+  border-color: rgb(45,56,132);
 }
 
 .c42:active,
@@ -717,7 +726,7 @@ exports[`renders <Metadata addOpen /> without throwing 1`] = `
 
 .c43:hover {
   background-color: rgb(72,83,217);
-  border: solid 0.0625rem rgb(45,56,132);
+  border-color: rgb(45,56,132);
 }
 
 .c43:active,
@@ -817,7 +826,7 @@ exports[`renders <Metadata addOpen /> without throwing 1`] = `
 
 .c45:hover {
   background-color: rgb(72,83,217);
-  border: solid 0.0625rem rgb(45,56,132);
+  border-color: rgb(45,56,132);
 }
 
 .c45:active,
@@ -960,7 +969,7 @@ exports[`renders <Metadata addOpen /> without throwing 1`] = `
   padding-bottom: 1.125rem;
 }
 
-.c18 {
+.c19 {
   margin: 0;
   color: rgb(73,73,73);
   font-weight: normal;
@@ -971,7 +980,7 @@ exports[`renders <Metadata addOpen /> without throwing 1`] = `
 .c30 {
   margin: 0;
   color: rgb(73,73,73);
-  font-weight: 600;
+  font-weight: 400;
   line-height: 1.5rem;
   font-size: 0.9375rem;
 }
@@ -979,68 +988,21 @@ exports[`renders <Metadata addOpen /> without throwing 1`] = `
 .c14 {
   height: 1px;
   background-color: rgb(216,216,216);
+  height: 0.6875rem;
   background-color: transparent;
 }
 
 .c16 {
   height: 1px;
   background-color: rgb(216,216,216);
+  height: 0.0625rem;
 }
 
-.c3 {
-  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: start;
-  -webkit-justify-content: flex-start;
-  -ms-flex-pack: start;
-  justify-content: flex-start;
-  -webkit-align-content: stretch;
-  -ms-flex-line-pack: stretch;
-  align-content: stretch;
-  -webkit-box-pack: justify;
-  -webkit-justify-content: space-between;
-  -ms-flex-pack: justify;
-  justify-content: space-between;
-  -webkit-align-items: flex-end;
-  -webkit-box-align: flex-end;
-  -ms-flex-align: flex-end;
-  align-items: flex-end;
-}
-
-.c27 {
-  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: start;
-  -webkit-justify-content: flex-start;
-  -ms-flex-pack: start;
-  justify-content: flex-start;
-  -webkit-align-content: stretch;
-  -ms-flex-line-pack: stretch;
-  align-content: stretch;
-  -webkit-box-pack: justify;
-  -webkit-justify-content: space-between;
-  -ms-flex-pack: justify;
-  justify-content: space-between;
-  -webkit-align-items: center;
-  -webkit-box-align: center;
-  -ms-flex-align: center;
-  align-items: center;
+.c17 {
+  height: 1px;
+  background-color: rgb(216,216,216);
+  height: 1.5rem;
+  background-color: transparent;
 }
 
 .c21 {
@@ -1177,6 +1139,62 @@ exports[`renders <Metadata addOpen /> without throwing 1`] = `
   color: inherit;
 }
 
+.c3 {
+  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: start;
+  -webkit-justify-content: flex-start;
+  -ms-flex-pack: start;
+  justify-content: flex-start;
+  -webkit-align-content: stretch;
+  -ms-flex-line-pack: stretch;
+  align-content: stretch;
+  -webkit-box-pack: justify;
+  -webkit-justify-content: space-between;
+  -ms-flex-pack: justify;
+  justify-content: space-between;
+  -webkit-align-items: flex-end;
+  -webkit-box-align: flex-end;
+  -ms-flex-align: flex-end;
+  align-items: flex-end;
+}
+
+.c27 {
+  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: start;
+  -webkit-justify-content: flex-start;
+  -ms-flex-pack: start;
+  justify-content: flex-start;
+  -webkit-align-content: stretch;
+  -ms-flex-line-pack: stretch;
+  align-content: stretch;
+  -webkit-box-pack: justify;
+  -webkit-justify-content: space-between;
+  -ms-flex-pack: justify;
+  justify-content: space-between;
+  -webkit-align-items: center;
+  -webkit-box-align: center;
+  -ms-flex-align: center;
+  align-items: center;
+}
+
 .c4 {
   display: inline-block;
   padding: 0;
@@ -1375,10 +1393,6 @@ exports[`renders <Metadata addOpen /> without throwing 1`] = `
   font-size: 0.8125rem;
 }
 
-.c20 {
-  margin-bottom: 0;
-}
-
 .c22 {
   border-top: 0;
   border-left: 0;
@@ -1548,14 +1562,14 @@ exports[`renders <Metadata addOpen /> without throwing 1`] = `
     height="0.0625rem"
   />
   <div
-    className="c14 c15"
+    className="c17 c15"
     height="1.5rem"
   />
   <div
-    className="c17"
+    className="c18"
   >
     <h3
-      className="c18"
+      className="c19"
     >
       0
        key-value pair
@@ -1563,10 +1577,9 @@ exports[`renders <Metadata addOpen /> without throwing 1`] = `
     </h3>
   </div>
   <div
-    className="c19"
+    className="c20"
   >
     <form
-      className="c20"
       onSubmit={undefined}
     >
       <div
@@ -1646,10 +1659,6 @@ exports[`renders <Metadata addOpen /> without throwing 1`] = `
                     </div>
                   </div>
                 </div>
-                <div
-                  className="c14 c15"
-                  height="0.75rem"
-                />
               </div>
             </div>
             <div
@@ -1691,10 +1700,6 @@ exports[`renders <Metadata addOpen /> without throwing 1`] = `
                     />
                   </div>
                 </div>
-                <div
-                  className="c14 c15"
-                  height="0.75rem"
-                />
               </div>
             </div>
             <div
@@ -1789,7 +1794,7 @@ exports[`renders <Metadata error /> without throwing 1`] = `
   margin-top: 0.1875rem;
 }
 
-.c23 {
+.c24 {
   margin-top: 1.875rem;
   margin-bottom: 1.125rem;
 }
@@ -1821,11 +1826,12 @@ exports[`renders <Metadata error /> without throwing 1`] = `
   outline: 0.0625rem dotted ButtonText;
 }
 
-.c22 {
+.c23 {
   color: rgb(73,73,73);
   margin: 0;
   line-height: 1.5rem;
   font-size: 0.9375rem;
+  margin: 0;
 }
 
 .c12 {
@@ -1895,7 +1901,7 @@ exports[`renders <Metadata error /> without throwing 1`] = `
 
 .c10:hover {
   background-color: rgb(72,83,217);
-  border: solid 0.0625rem rgb(45,56,132);
+  border-color: rgb(45,56,132);
 }
 
 .c10:active,
@@ -1953,7 +1959,7 @@ exports[`renders <Metadata error /> without throwing 1`] = `
   padding-bottom: 1.125rem;
 }
 
-.c24 {
+.c25 {
   margin: 0;
   color: rgb(73,73,73);
   font-weight: normal;
@@ -1961,10 +1967,10 @@ exports[`renders <Metadata error /> without throwing 1`] = `
   font-size: 1.3125rem;
 }
 
-.c20 {
+.c21 {
   margin: 0;
   color: rgb(73,73,73);
-  font-weight: 600;
+  font-weight: 400;
   line-height: 1.5rem;
   font-size: 0.9375rem;
 }
@@ -1972,12 +1978,21 @@ exports[`renders <Metadata error /> without throwing 1`] = `
 .c14 {
   height: 1px;
   background-color: rgb(216,216,216);
+  height: 0.6875rem;
   background-color: transparent;
 }
 
 .c16 {
   height: 1px;
   background-color: rgb(216,216,216);
+  height: 0.0625rem;
+}
+
+.c17 {
+  height: 1px;
+  background-color: rgb(216,216,216);
+  height: 1.5rem;
+  background-color: transparent;
 }
 
 .c3 {
@@ -2008,35 +2023,6 @@ exports[`renders <Metadata error /> without throwing 1`] = `
   align-items: flex-end;
 }
 
-.c17 {
-  display: -webkit-box;
-  display: -webkit-flex;
-  display: -ms-flexbox;
-  display: flex;
-  position: relative;
-  background-color: rgb(255,255,255);
-  box-shadow: 0 0.125rem 0 0 rgba(0,0,0,0.05);
-  border: 0.0625rem solid rgb(216,216,216);
-  border-radius: 0.1875rem;
-  width: 100%;
-}
-
-.c18 {
-  border-radius: 0.1875rem 0 0 0.1875rem;
-  min-width: 0.75rem;
-  background-color: rgb(0,152,88);
-  background-color: rgb(210,67,58);
-}
-
-.c19 {
-  padding: 1.125rem 1.125rem;
-}
-
-.c21 {
-  line-height: 0.875rem;
-  font-size: 0.8125rem;
-}
-
 .c4 {
   display: inline-block;
   padding: 0;
@@ -2129,6 +2115,35 @@ exports[`renders <Metadata error /> without throwing 1`] = `
   font-size: 0.8125rem;
 }
 
+.c18 {
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: -ms-flexbox;
+  display: flex;
+  position: relative;
+  background-color: rgb(255,255,255);
+  box-shadow: 0 0.125rem 0 0 rgba(0,0,0,0.05);
+  border: 0.0625rem solid rgb(216,216,216);
+  border-radius: 0.1875rem;
+  width: 100%;
+}
+
+.c19 {
+  border-radius: 0.1875rem 0 0 0.1875rem;
+  min-width: 0.75rem;
+  background-color: rgb(0,152,88);
+  background-color: rgb(210,67,58);
+}
+
+.c20 {
+  padding: 1.125rem 1.125rem;
+}
+
+.c22 {
+  line-height: 0.875rem;
+  font-size: 0.8125rem;
+}
+
 @media only screen and (min-width:48em) {
   .c1 {
     width: 46rem;
@@ -2234,28 +2249,28 @@ exports[`renders <Metadata error /> without throwing 1`] = `
     height="0.0625rem"
   />
   <div
-    className="c14 c15"
+    className="c17 c15"
     height="1.5rem"
   />
   <div
     className="c2"
   >
     <div
-      className="c17"
+      className="c18"
     >
       <div
-        className="c18"
+        className="c19"
       />
       <div
-        className="c19"
+        className="c20"
       >
         <h4
-          className="c20"
+          className="c21"
         >
           Ooops!
         </h4>
         <p
-          className="c21 c22"
+          className="c22 c23"
         >
           An error occurred while loading your metadata
         </p>
@@ -2263,10 +2278,10 @@ exports[`renders <Metadata error /> without throwing 1`] = `
     </div>
   </div>
   <div
-    className="c23"
+    className="c24"
   >
     <h3
-      className="c24"
+      className="c25"
     >
       0
        key-value pair
@@ -2334,6 +2349,7 @@ exports[`renders <Metadata loading /> without throwing 1`] = `
   margin: 0;
   line-height: 1.5rem;
   font-size: 0.9375rem;
+  margin: 0;
 }
 
 .c16 {
@@ -2446,7 +2462,7 @@ exports[`renders <Metadata loading /> without throwing 1`] = `
 
 .c10:hover {
   background-color: rgb(72,83,217);
-  border: solid 0.0625rem rgb(45,56,132);
+  border-color: rgb(45,56,132);
 }
 
 .c10:active,
@@ -2524,6 +2540,7 @@ exports[`renders <Metadata loading /> without throwing 1`] = `
 .c14 {
   height: 1px;
   background-color: rgb(216,216,216);
+  height: 0.6875rem;
   background-color: transparent;
 }
 
@@ -2809,7 +2826,7 @@ exports[`renders <Metadata metadata /> without throwing 1`] = `
   margin-top: 0.1875rem;
 }
 
-.c17 {
+.c18 {
   margin-top: 1.875rem;
   margin-bottom: 1.125rem;
 }
@@ -2822,7 +2839,7 @@ exports[`renders <Metadata metadata /> without throwing 1`] = `
   margin-right: 0.75rem;
 }
 
-.c19 {
+.c20 {
   margin-bottom: 0.75rem;
 }
 
@@ -2977,7 +2994,7 @@ exports[`renders <Metadata metadata /> without throwing 1`] = `
 
 .c10:hover {
   background-color: rgb(72,83,217);
-  border: solid 0.0625rem rgb(45,56,132);
+  border-color: rgb(45,56,132);
 }
 
 .c10:active,
@@ -3047,7 +3064,7 @@ exports[`renders <Metadata metadata /> without throwing 1`] = `
 
 .c43:hover {
   background-color: rgb(72,83,217);
-  border: solid 0.0625rem rgb(45,56,132);
+  border-color: rgb(45,56,132);
 }
 
 .c43:active,
@@ -3135,7 +3152,7 @@ exports[`renders <Metadata metadata /> without throwing 1`] = `
 
 .c44:hover {
   background-color: rgb(72,83,217);
-  border: solid 0.0625rem rgb(45,56,132);
+  border-color: rgb(45,56,132);
 }
 
 .c44:active,
@@ -3235,7 +3252,7 @@ exports[`renders <Metadata metadata /> without throwing 1`] = `
 
 .c46:hover {
   background-color: rgb(72,83,217);
-  border: solid 0.0625rem rgb(45,56,132);
+  border-color: rgb(45,56,132);
 }
 
 .c46:active,
@@ -3359,7 +3376,7 @@ exports[`renders <Metadata metadata /> without throwing 1`] = `
 
 .c48:hover {
   background-color: rgb(72,83,217);
-  border: solid 0.0625rem rgb(45,56,132);
+  border-color: rgb(45,56,132);
 }
 
 .c48:active,
@@ -3529,7 +3546,7 @@ exports[`renders <Metadata metadata /> without throwing 1`] = `
   padding-bottom: 1.125rem;
 }
 
-.c18 {
+.c19 {
   margin: 0;
   color: rgb(73,73,73);
   font-weight: normal;
@@ -3540,68 +3557,21 @@ exports[`renders <Metadata metadata /> without throwing 1`] = `
 .c14 {
   height: 1px;
   background-color: rgb(216,216,216);
+  height: 0.6875rem;
   background-color: transparent;
 }
 
 .c16 {
   height: 1px;
   background-color: rgb(216,216,216);
+  height: 0.0625rem;
 }
 
-.c3 {
-  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: start;
-  -webkit-justify-content: flex-start;
-  -ms-flex-pack: start;
-  justify-content: flex-start;
-  -webkit-align-content: stretch;
-  -ms-flex-line-pack: stretch;
-  align-content: stretch;
-  -webkit-box-pack: justify;
-  -webkit-justify-content: space-between;
-  -ms-flex-pack: justify;
-  justify-content: space-between;
-  -webkit-align-items: flex-end;
-  -webkit-box-align: flex-end;
-  -ms-flex-align: flex-end;
-  align-items: flex-end;
-}
-
-.c27 {
-  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: start;
-  -webkit-justify-content: flex-start;
-  -ms-flex-pack: start;
-  justify-content: flex-start;
-  -webkit-align-content: stretch;
-  -ms-flex-line-pack: stretch;
-  align-content: stretch;
-  -webkit-box-pack: justify;
-  -webkit-justify-content: space-between;
-  -ms-flex-pack: justify;
-  justify-content: space-between;
-  -webkit-align-items: center;
-  -webkit-box-align: center;
-  -ms-flex-align: center;
-  align-items: center;
+.c17 {
+  height: 1px;
+  background-color: rgb(216,216,216);
+  height: 1.5rem;
+  background-color: transparent;
 }
 
 .c32 {
@@ -3740,6 +3710,62 @@ exports[`renders <Metadata metadata /> without throwing 1`] = `
   color: inherit;
 }
 
+.c3 {
+  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: start;
+  -webkit-justify-content: flex-start;
+  -ms-flex-pack: start;
+  justify-content: flex-start;
+  -webkit-align-content: stretch;
+  -ms-flex-line-pack: stretch;
+  align-content: stretch;
+  -webkit-box-pack: justify;
+  -webkit-justify-content: space-between;
+  -ms-flex-pack: justify;
+  justify-content: space-between;
+  -webkit-align-items: flex-end;
+  -webkit-box-align: flex-end;
+  -ms-flex-align: flex-end;
+  align-items: flex-end;
+}
+
+.c27 {
+  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: start;
+  -webkit-justify-content: flex-start;
+  -ms-flex-pack: start;
+  justify-content: flex-start;
+  -webkit-align-content: stretch;
+  -ms-flex-line-pack: stretch;
+  align-content: stretch;
+  -webkit-box-pack: justify;
+  -webkit-justify-content: space-between;
+  -ms-flex-pack: justify;
+  justify-content: space-between;
+  -webkit-align-items: center;
+  -webkit-box-align: center;
+  -ms-flex-align: center;
+  align-items: center;
+}
+
 .c4 {
   display: inline-block;
   padding: 0;
@@ -3938,10 +3964,6 @@ exports[`renders <Metadata metadata /> without throwing 1`] = `
   font-size: 0.8125rem;
 }
 
-.c20 {
-  margin-bottom: 0;
-}
-
 .c30 {
   word-break: break-all;
   line-height: 1.5;
@@ -4132,14 +4154,14 @@ exports[`renders <Metadata metadata /> without throwing 1`] = `
     height="0.0625rem"
   />
   <div
-    className="c14 c15"
+    className="c17 c15"
     height="1.5rem"
   />
   <div
-    className="c17"
+    className="c18"
   >
     <h3
-      className="c18"
+      className="c19"
     >
       3
        key-value pair
@@ -4147,10 +4169,9 @@ exports[`renders <Metadata metadata /> without throwing 1`] = `
     </h3>
   </div>
   <div
-    className="c19"
+    className="c20"
   >
     <form
-      className="c20"
       onSubmit={undefined}
     >
       <div
@@ -4245,10 +4266,6 @@ exports[`renders <Metadata metadata /> without throwing 1`] = `
                     </div>
                   </div>
                 </div>
-                <div
-                  className="c14 c15"
-                  height="0.75rem"
-                />
               </div>
             </div>
             <div
@@ -4290,10 +4307,6 @@ exports[`renders <Metadata metadata /> without throwing 1`] = `
                     />
                   </div>
                 </div>
-                <div
-                  className="c14 c15"
-                  height="0.75rem"
-                />
               </div>
             </div>
             <div
@@ -4377,10 +4390,9 @@ exports[`renders <Metadata metadata /> without throwing 1`] = `
     </form>
   </div>
   <div
-    className="c19"
+    className="c20"
   >
     <form
-      className="c20"
       onSubmit={undefined}
     >
       <div
@@ -4475,10 +4487,6 @@ exports[`renders <Metadata metadata /> without throwing 1`] = `
                     </div>
                   </div>
                 </div>
-                <div
-                  className="c14 c15"
-                  height="0.75rem"
-                />
               </div>
             </div>
             <div
@@ -4520,10 +4528,6 @@ exports[`renders <Metadata metadata /> without throwing 1`] = `
                     />
                   </div>
                 </div>
-                <div
-                  className="c14 c15"
-                  height="0.75rem"
-                />
               </div>
             </div>
             <div
@@ -4607,10 +4611,9 @@ exports[`renders <Metadata metadata /> without throwing 1`] = `
     </form>
   </div>
   <div
-    className="c19"
+    className="c20"
   >
     <form
-      className="c20"
       onSubmit={undefined}
     >
       <div
@@ -4705,10 +4708,6 @@ exports[`renders <Metadata metadata /> without throwing 1`] = `
                     </div>
                   </div>
                 </div>
-                <div
-                  className="c14 c15"
-                  height="0.75rem"
-                />
               </div>
             </div>
             <div
@@ -4750,10 +4749,6 @@ exports[`renders <Metadata metadata /> without throwing 1`] = `
                     />
                   </div>
                 </div>
-                <div
-                  className="c14 c15"
-                  height="0.75rem"
-                />
               </div>
             </div>
             <div

consoles/my-joy-instances/src/containers/instances/__tests__/__snapshots__/networks.spec.js.snap

@@ -18,6 +18,7 @@ exports[`renders <Networks /> without throwing 1`] = `
   margin: 0;
   line-height: 1.5rem;
   font-size: 0.9375rem;
+  margin: 0;
 }
 
 .c1 {
@@ -69,6 +70,28 @@ exports[`renders <Networks /> without throwing 1`] = `
   font-size: 1.3125rem;
 }
 
+.c9 {
+  box-sizing: content-box;
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: -ms-flexbox;
+  display: flex;
+  -webkit-flex: 1 0 auto;
+  -ms-flex: 1 0 auto;
+  flex: 1 0 auto;
+  -webkit-flex-direction: column;
+  -ms-flex-direction: column;
+  flex-direction: column;
+  position: relative;
+  border-width: 0.0625rem;
+  border-style: solid;
+  -webkit-transition: all 300ms ease;
+  transition: all 300ms ease;
+  color: rgb(73,73,73);
+  background-color: rgb(255,255,255);
+  border-color: rgb(216,216,216);
+}
+
 .c11 {
   display: -webkit-box;
   display: -webkit-flex;
@@ -100,28 +123,6 @@ exports[`renders <Networks /> without throwing 1`] = `
   align-items: center;
 }
 
-.c9 {
-  box-sizing: content-box;
-  display: -webkit-box;
-  display: -webkit-flex;
-  display: -ms-flexbox;
-  display: flex;
-  -webkit-flex: 1 0 auto;
-  -ms-flex: 1 0 auto;
-  flex: 1 0 auto;
-  -webkit-flex-direction: column;
-  -ms-flex-direction: column;
-  flex-direction: column;
-  position: relative;
-  border-width: 0.0625rem;
-  border-style: solid;
-  -webkit-transition: all 300ms ease;
-  transition: all 300ms ease;
-  color: rgb(73,73,73);
-  background-color: rgb(255,255,255);
-  border-color: rgb(216,216,216);
-}
-
 .c13 {
   color: rgb(151,151,151);
   text-align: center;
@@ -555,6 +556,7 @@ exports[`renders <Networks error /> without throwing 1`] = `
   margin: 0;
   line-height: 1.5rem;
   font-size: 0.9375rem;
+  margin: 0;
 }
 
 .c1 {
@@ -609,7 +611,7 @@ exports[`renders <Networks error /> without throwing 1`] = `
 .c12 {
   margin: 0;
   color: rgb(73,73,73);
-  font-weight: 600;
+  font-weight: 400;
   line-height: 1.5rem;
   font-size: 0.9375rem;
 }
@@ -796,6 +798,7 @@ exports[`renders <Networks loading /> without throwing 1`] = `
   margin: 0;
   line-height: 1.5rem;
   font-size: 0.9375rem;
+  margin: 0;
 }
 
 .c8 {
@@ -1056,6 +1059,7 @@ exports[`renders <Networks networks /> without throwing 1`] = `
   margin: 0;
   line-height: 1.5rem;
   font-size: 0.9375rem;
+  margin: 0;
 }
 
 .c1 {
@@ -1120,74 +1124,13 @@ exports[`renders <Networks networks /> without throwing 1`] = `
 .c15 {
   margin: 0;
   color: rgb(73,73,73);
-  font-weight: 600;
+  font-weight: 400;
   line-height: 1.5rem;
   font-size: 0.9375rem;
   -webkit-text-fill-color: currentcolor;
   color: rgb(255,255,255);
 }
 
-.c18 {
-  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: start;
-  -webkit-justify-content: flex-start;
-  -ms-flex-pack: start;
-  justify-content: flex-start;
-  -webkit-align-content: stretch;
-  -ms-flex-line-pack: stretch;
-  align-content: stretch;
-}
-
-.c21 {
-  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: start;
-  -webkit-justify-content: flex-start;
-  -ms-flex-pack: start;
-  justify-content: flex-start;
-  -webkit-align-content: stretch;
-  -ms-flex-line-pack: stretch;
-  align-content: stretch;
-  -webkit-align-items: center;
-  -webkit-box-align: center;
-  -ms-flex-align: center;
-  align-items: center;
-}
-
-.c20 {
-  -webkit-order: 0;
-  -ms-flex-order: 0;
-  order: 0;
-  -webkit-flex-basis: auto;
-  -ms-flex-preferred-size: auto;
-  flex-basis: auto;
-  -webkit-box-flex: 0;
-  -webkit-flex-grow: 0;
-  -ms-flex-positive: 0;
-  flex-grow: 0;
-  -webkit-flex-shrink: 1;
-  -ms-flex-negative: 1;
-  flex-shrink: 1;
-  display: block;
-}
-
 .c10 {
   box-sizing: content-box;
   display: -webkit-box;
@@ -1399,6 +1342,67 @@ exports[`renders <Networks networks /> without throwing 1`] = `
   color: inherit;
 }
 
+.c18 {
+  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: start;
+  -webkit-justify-content: flex-start;
+  -ms-flex-pack: start;
+  justify-content: flex-start;
+  -webkit-align-content: stretch;
+  -ms-flex-line-pack: stretch;
+  align-content: stretch;
+}
+
+.c21 {
+  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: start;
+  -webkit-justify-content: flex-start;
+  -ms-flex-pack: start;
+  justify-content: flex-start;
+  -webkit-align-content: stretch;
+  -ms-flex-line-pack: stretch;
+  align-content: stretch;
+  -webkit-align-items: center;
+  -webkit-box-align: center;
+  -ms-flex-align: center;
+  align-items: center;
+}
+
+.c20 {
+  -webkit-order: 0;
+  -ms-flex-order: 0;
+  order: 0;
+  -webkit-flex-basis: auto;
+  -ms-flex-preferred-size: auto;
+  flex-basis: auto;
+  -webkit-box-flex: 0;
+  -webkit-flex-grow: 0;
+  -ms-flex-positive: 0;
+  flex-grow: 0;
+  -webkit-flex-shrink: 1;
+  -ms-flex-negative: 1;
+  flex-shrink: 1;
+  display: block;
+}
+
 .c5 {
   font-weight: 200;
 }

consoles/my-joy-instances/src/containers/instances/__tests__/__snapshots__/summary.spec.js.snap

@@ -23,6 +23,7 @@ exports[`renders <Summary /> without throwing 1`] = `
   margin: 0;
   line-height: 1.5rem;
   font-size: 0.9375rem;
+  margin: 0;
 }
 
 .c2 {
@@ -199,6 +200,7 @@ exports[`renders <Summary loading /> without throwing 1`] = `
   margin: 0;
   line-height: 1.5rem;
   font-size: 0.9375rem;
+  margin: 0;
 }
 
 .c2 {
@@ -362,6 +364,7 @@ exports[`renders <Summary loadingError /> without throwing 1`] = `
   margin: 0;
   line-height: 1.5rem;
   font-size: 0.9375rem;
+  margin: 0;
 }
 
 .c1 {
@@ -379,7 +382,7 @@ exports[`renders <Summary loadingError /> without throwing 1`] = `
 .c6 {
   margin: 0;
   color: rgb(73,73,73);
-  font-weight: 600;
+  font-weight: 400;
   line-height: 1.5rem;
   font-size: 0.9375rem;
 }
@@ -506,6 +509,7 @@ exports[`renders <Summary mutationError /> without throwing 1`] = `
   margin: 0;
   line-height: 1.5rem;
   font-size: 0.9375rem;
+  margin: 0;
 }
 
 .c2 {
@@ -582,7 +586,7 @@ exports[`renders <Summary mutationError /> without throwing 1`] = `
 .c11 {
   margin: 0;
   color: rgb(73,73,73);
-  font-weight: 600;
+  font-weight: 400;
   line-height: 1.5rem;
   font-size: 0.9375rem;
 }
@@ -740,6 +744,7 @@ exports[`renders <Summary starting stopping rebooting removing /> without throwi
   margin: 0;
   line-height: 1.5rem;
   font-size: 0.9375rem;
+  margin: 0;
 }
 
 .c2 {
@@ -1059,7 +1064,7 @@ exports[`renders <Summary starting stopping rebooting removing /> without throwi
 
 .c29:hover {
   background-color: rgb(72,83,217);
-  border: solid 0.0625rem rgb(45,56,132);
+  border-color: rgb(45,56,132);
 }
 
 .c29:active,
@@ -1146,7 +1151,7 @@ exports[`renders <Summary starting stopping rebooting removing /> without throwi
 
 .c35:hover {
   background-color: rgb(72,83,217);
-  border: solid 0.0625rem rgb(45,56,132);
+  border-color: rgb(45,56,132);
 }
 
 .c35:active,
@@ -1251,7 +1256,7 @@ exports[`renders <Summary starting stopping rebooting removing /> without throwi
 
 .c41:hover {
   background-color: rgb(72,83,217);
-  border: solid 0.0625rem rgb(45,56,132);
+  border-color: rgb(45,56,132);
 }
 
 .c41:active,
@@ -1371,7 +1376,7 @@ exports[`renders <Summary starting stopping rebooting removing /> without throwi
 
 .c42:hover {
   background-color: rgb(72,83,217);
-  border: solid 0.0625rem rgb(45,56,132);
+  border-color: rgb(45,56,132);
 }
 
 .c42:active,
@@ -1600,43 +1605,7 @@ exports[`renders <Summary starting stopping rebooting removing /> without throwi
 .c44 {
   height: 1px;
   background-color: rgb(216,216,216);
-}
-
-.c12 {
-  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: start;
-  -webkit-justify-content: flex-start;
-  -ms-flex-pack: start;
-  justify-content: flex-start;
-  -webkit-align-content: stretch;
-  -ms-flex-line-pack: stretch;
-  align-content: stretch;
-}
-
-.c26 {
-  -webkit-order: 0;
-  -ms-flex-order: 0;
-  order: 0;
-  -webkit-flex-basis: auto;
-  -ms-flex-preferred-size: auto;
-  flex-basis: auto;
-  -webkit-box-flex: 0;
-  -webkit-flex-grow: 0;
-  -ms-flex-positive: 0;
-  flex-grow: 0;
-  -webkit-flex-shrink: 1;
-  -ms-flex-negative: 1;
-  flex-shrink: 1;
-  display: block;
+  height: 1;
 }
 
 .c4 {
@@ -1677,6 +1646,43 @@ exports[`renders <Summary starting stopping rebooting removing /> without throwi
   background-color: transparent;
 }
 
+.c12 {
+  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: start;
+  -webkit-justify-content: flex-start;
+  -ms-flex-pack: start;
+  justify-content: flex-start;
+  -webkit-align-content: stretch;
+  -ms-flex-line-pack: stretch;
+  align-content: stretch;
+}
+
+.c26 {
+  -webkit-order: 0;
+  -ms-flex-order: 0;
+  order: 0;
+  -webkit-flex-basis: auto;
+  -ms-flex-preferred-size: auto;
+  flex-basis: auto;
+  -webkit-box-flex: 0;
+  -webkit-flex-grow: 0;
+  -ms-flex-positive: 0;
+  flex-grow: 0;
+  -webkit-flex-shrink: 1;
+  -ms-flex-negative: 1;
+  flex-shrink: 1;
+  display: block;
+}
+
 .c50 {
   box-sizing: border-box;
   width: 18.75rem;
@@ -3041,7 +3047,7 @@ exports[`renders <Summary starting stopping rebooting removing /> without throwi
 
 .c29:hover {
   background-color: rgb(72,83,217);
-  border: solid 0.0625rem rgb(45,56,132);
+  border-color: rgb(45,56,132);
 }
 
 .c29:active,
@@ -3128,7 +3134,7 @@ exports[`renders <Summary starting stopping rebooting removing /> without throwi
 
 .c35:hover {
   background-color: rgb(72,83,217);
-  border: solid 0.0625rem rgb(45,56,132);
+  border-color: rgb(45,56,132);
 }
 
 .c35:active,
@@ -3233,7 +3239,7 @@ exports[`renders <Summary starting stopping rebooting removing /> without throwi
 
 .c41:hover {
   background-color: rgb(72,83,217);
-  border: solid 0.0625rem rgb(45,56,132);
+  border-color: rgb(45,56,132);
 }
 
 .c41:active,
@@ -3353,7 +3359,7 @@ exports[`renders <Summary starting stopping rebooting removing /> without throwi
 
 .c42:hover {
   background-color: rgb(72,83,217);
-  border: solid 0.0625rem rgb(45,56,132);
+  border-color: rgb(45,56,132);
 }
 
 .c42:active,
@@ -3582,43 +3588,7 @@ exports[`renders <Summary starting stopping rebooting removing /> without throwi
 .c44 {
   height: 1px;
   background-color: rgb(216,216,216);
-}
-
-.c12 {
-  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: start;
-  -webkit-justify-content: flex-start;
-  -ms-flex-pack: start;
-  justify-content: flex-start;
-  -webkit-align-content: stretch;
-  -ms-flex-line-pack: stretch;
-  align-content: stretch;
-}
-
-.c26 {
-  -webkit-order: 0;
-  -ms-flex-order: 0;
-  order: 0;
-  -webkit-flex-basis: auto;
-  -ms-flex-preferred-size: auto;
-  flex-basis: auto;
-  -webkit-box-flex: 0;
-  -webkit-flex-grow: 0;
-  -ms-flex-positive: 0;
-  flex-grow: 0;
-  -webkit-flex-shrink: 1;
-  -ms-flex-negative: 1;
-  flex-shrink: 1;
-  display: block;
+  height: 1;
 }
 
 .c4 {
@@ -3659,6 +3629,43 @@ exports[`renders <Summary starting stopping rebooting removing /> without throwi
   background-color: transparent;
 }
 
+.c12 {
+  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: start;
+  -webkit-justify-content: flex-start;
+  -ms-flex-pack: start;
+  justify-content: flex-start;
+  -webkit-align-content: stretch;
+  -ms-flex-line-pack: stretch;
+  align-content: stretch;
+}
+
+.c26 {
+  -webkit-order: 0;
+  -ms-flex-order: 0;
+  order: 0;
+  -webkit-flex-basis: auto;
+  -ms-flex-preferred-size: auto;
+  flex-basis: auto;
+  -webkit-box-flex: 0;
+  -webkit-flex-grow: 0;
+  -ms-flex-positive: 0;
+  flex-grow: 0;
+  -webkit-flex-shrink: 1;
+  -ms-flex-negative: 1;
+  flex-shrink: 1;
+  display: block;
+}
+
 .c50 {
   box-sizing: border-box;
   width: 18.75rem;

consoles/my-joy-instances/src/containers/instances/__tests__/firewall.spec.js

@@ -1,4 +1,3 @@
-/* eslint-disable camelcase */
 import React, { Fragment } from 'react';
 import renderer from 'react-test-renderer';
 import 'jest-styled-components';

consoles/my-joy-instances/src/containers/instances/__tests__/firewall.ui.js

@@ -1,4 +1,3 @@
-/* eslint-disable camelcase */
 import React, { Fragment } from 'react';
 import { toMatchImageSnapshot } from 'jest-image-snapshot';
 import screenshot from 'react-screenshot-renderer';

consoles/my-joy-instances/src/containers/instances/__tests__/networks.spec.js

@@ -1,4 +1,3 @@
-/* eslint-disable camelcase */
 import React from 'react';
 import renderer from 'react-test-renderer';
 import 'jest-styled-components';

consoles/my-joy-instances/src/containers/instances/__tests__/networks.ui.js

@@ -1,4 +1,3 @@
-/* eslint-disable camelcase */
 import React from 'react';
 import { toMatchImageSnapshot } from 'jest-image-snapshot';
 import screenshot from 'react-screenshot-renderer';

consoles/my-joy-instances/src/containers/instances/cns.js

@@ -22,12 +22,13 @@ import {
   MessageDescription
 } from 'joyent-ui-toolkit';
 
-import Description from '@components/instances/description';
 import {
   Cns,
   CnsFooter as Footer,
   CnsAddServiceForm as AddServiceForm
 } from 'joyent-ui-resource-widgets';
+
+import Description from '@components/instances/description';
 import GetAccount from '@graphql/get-account.gql';
 import DeleteTag from '@graphql/delete-tag.gql';
 import UpdateTags from '@graphql/update-tags.gql';
@@ -52,7 +53,7 @@ const CnsContainer = ({
   handleAsyncValidate
 }) => (
   <ViewContainer main>
-    <Margin bottom={3}>
+    <Margin bottom="3">
       <Description href="https://docs.joyent.com/private-cloud/install/cns">
         Triton CNS is used to automatically update hostnames for your instances.
         You can serve multiple instances (with multiple IP addresses) under the
@@ -66,7 +67,7 @@ const CnsContainer = ({
             <Padding all={5}>
               {loading ? <StatusLoader /> : null}
               {!loading && loadingError ? (
-                <Margin bottom={5}>
+                <Margin bottom="5">
                   <Message error>
                     <MessageTitle>Ooops!</MessageTitle>
                     <MessageDescription>
@@ -76,7 +77,7 @@ const CnsContainer = ({
                 </Margin>
               ) : null}
               {!loading && mutationError ? (
-                <Margin bottom={5}>
+                <Margin bottom="5">
                   <Message error>
                     <MessageTitle>Ooops!</MessageTitle>
                     <MessageDescription>{mutationError}</MessageDescription>
@@ -108,7 +109,7 @@ const CnsContainer = ({
           </CardOutlet>
         </Card>
         {!loading && !loadingError ? (
-          <Margin top={5}>
+          <Margin top="5">
             <Footer
               enabled={!disabled}
               submitting={mutating}
@@ -278,14 +279,8 @@ export default compose(
         ]);
 
         const newValue = value.join(',');
-        const mutation = !newValue.length
-          ? deleteTag({
-              variables: {
-                id: instance.id,
-                name: 'triton.cns.services'
-              }
-            })
-          : updateTags({
+        const mutation = newValue.length
+          ? updateTags({
               variables: {
                 id: instance.id,
                 tags: [
@@ -295,6 +290,12 @@ export default compose(
                   }
                 ]
               }
+            })
+          : deleteTag({
+              variables: {
+                id: instance.id,
+                name: 'triton.cns.services'
+              }
             });
 
         const [err] = await intercept(mutation);

consoles/my-joy-instances/src/containers/instances/firewall.js

@@ -1,4 +1,3 @@
-/* eslint-disable camelcase */
 import React from 'react';
 import intercept from 'apr-intercept';
 import { connect } from 'react-redux';
@@ -43,7 +42,7 @@ export const Firewall = ({
   handleEnabledToggle
 }) => (
   <ViewContainer main>
-    <Margin bottom={3}>
+    <Margin bottom="3">
       <Description href="https://docs.joyent.com/private-cloud/install/cns">
         Cloud Firewall rules control traffic across instances. Enabling the
         firewall adds a default set of rules and rules defined by your chosen
@@ -52,7 +51,7 @@ export const Firewall = ({
     </Margin>
     {loading ? <StatusLoader /> : null}
     {!loading && loadingError ? (
-      <Margin bottom={5}>
+      <Margin bottom="5">
         <Message error>
           <MessageTitle>Ooops!</MessageTitle>
           <MessageDescription>
@@ -62,7 +61,7 @@ export const Firewall = ({
       </Margin>
     ) : null}
     {!loading && mutationError ? (
-      <Margin bottom={5}>
+      <Margin bottom="5">
         <Message error>
           <MessageTitle>Ooops!</MessageTitle>
           <MessageDescription>{mutationError}</MessageDescription>
@@ -80,7 +79,7 @@ export const Firewall = ({
         >
           {props =>
             loading ? null : (
-              <Margin right={5}>
+              <Margin right="5">
                 <ToggleFirewallForm {...props} submitOnChange />
               </Margin>
             )
@@ -101,19 +100,19 @@ export const Firewall = ({
       </FlexItem>
     </Flex>
     {!loading && !defaultRules.length && !tagRules.length ? (
-      <Margin top={5}>
+      <Margin top="5">
         <Empty borderTop>
           Sorry, but we weren’t able to find any firewall rules.
         </Empty>
       </Margin>
     ) : null}
     {!loading && enabled && defaultRules.length ? (
-      <Margin top={5}>
+      <Margin top="5">
         <DefaultRules rules={defaultRules} />
       </Margin>
     ) : null}
     {!loading && enabled && tagRules.length ? (
-      <Margin top={5}>
+      <Margin top="5">
         <TagRules rules={tagRules} />
       </Margin>
     ) : null}

consoles/my-joy-instances/src/containers/instances/list.js

@@ -83,7 +83,7 @@ export const List = ({
 
   const _error =
     error && !_instances.length && !_loading && !filter.length ? (
-      <Margin bottom={5}>
+      <Margin bottom="5">
         <Message error>
           <MessageTitle>Ooops!</MessageTitle>
           <MessageDescription>
@@ -94,7 +94,7 @@ export const List = ({
     ) : null;
 
   const _mutationError = mutationError && (
-    <Margin bottom={5}>
+    <Margin bottom="5">
       <Message error>
         <MessageTitle>Ooops!</MessageTitle>
         <MessageDescription>{mutationError}</MessageDescription>
@@ -107,7 +107,7 @@ export const List = ({
   const handleReboot = selected => handleAction({ name: 'reboot', selected });
   const handleRemove = selected => handleAction({ name: 'remove', selected });
 
-  const _table = !_loading ? (
+  const _table = _loading ? null : (
     <ReduxForm form={TABLE_FORM_NAME}>
       {props => (
         <InstanceList
@@ -123,7 +123,7 @@ export const List = ({
           total={total}
         >
           {fetching ? <InstanceListFetchingItem /> : null}
-          {(!fetching ? _instances : []).map(instance => (
+          {(fetching ? [] : _instances).map(instance => (
             <InstanceListItem
               key={instance.id}
               {...instance}
@@ -137,7 +137,7 @@ export const List = ({
         </InstanceList>
       )}
     </ReduxForm>
-  ) : null;
+  );
 
   const _empty =
     !_loading && !_instances.length ? (
@@ -164,10 +164,10 @@ export const List = ({
 
   return (
     <ViewContainer main>
-      <Margin top={5}>
+      <Margin top="5">
         <H3>Instances</H3>
       </Margin>
-      <Margin top={3} bottom={5}>
+      <Margin top="3" bottom="5">
         <ReduxForm form={MENU_FORM_NAME}>
           {props => (
             <ToolbarForm
@@ -180,7 +180,7 @@ export const List = ({
           )}
         </ReduxForm>
       </Margin>
-      {!_mutationError ? _error : null}
+      {_mutationError ? null : _error}
       {_mutationError}
       {_loading}
       {_table}
@@ -259,7 +259,6 @@ export default compose(
       const sortBy = get(values, 'instance-list-sort-by', 'name');
       const sortOrder = get(values, 'instance-list-sort-order', 'asc');
 
-      console.log(index, filter);
       // if user is searching something, get items that match that query
       const filtered =
         filter && index.list.length
@@ -366,13 +365,13 @@ export default compose(
       handleAction: async ({ selected, name }) => {
         // eslint-disable-next-line no-alert
         if (
-          !await Confirm(
+          !(await Confirm(
             `Do you want to ${name} ${
               selected.length === 1
                 ? `"${selected[0].name}"`
                 : `${selected.length} instances`
             }`
-          )
+          ))
         ) {
           return;
         }

consoles/my-joy-instances/src/containers/instances/metadata.js

@@ -1,4 +1,4 @@
-import React from 'react';
+import React, { Fragment } from 'react';
 import paramCase from 'param-case';
 import { Margin } from 'styled-components-spacing';
 import { set } from 'react-redux-values';
@@ -53,10 +53,10 @@ export const Metadata = ({
   handleUpdate,
   handleRemove
 }) => {
-  const _loading = !(loading && !metadata.length) ? null : <StatusLoader />;
+  const _loading = loading && !metadata.length ? <StatusLoader /> : null;
 
   const _add = addOpen ? (
-    <Margin bottom={3}>
+    <Margin bottom="3">
       <ReduxForm
         form={ADD_FORM_NAME}
         onSubmit={handleCreate}
@@ -73,25 +73,25 @@ export const Metadata = ({
     </Margin>
   ) : null;
 
-  const _line = !_loading
-    ? [
-        <Divider key="line" height={remcalc(1)} />,
-        <Divider key="after-line-space" height={remcalc(24)} transparent />
-      ]
-    : null;
+  const _line = _loading ? null : (
+    <Fragment>
+      <Divider key="line" height={remcalc(1)} />
+      <Divider key="after-line-space" height={remcalc(24)} transparent />
+    </Fragment>
+  );
 
-  const _count = !_loading ? (
-    <Margin bottom={3} top={5}>
+  const _count = _loading ? null : (
+    <Margin bottom="3" top="5">
       <H3>
         {metadata.length} key-value pair{metadata.length === 1 ? '' : 's'}
       </H3>
     </Margin>
-  ) : null;
+  );
 
   const _metadata =
     !_loading &&
     metadata.map(({ form, initialValues, expanded, removing }) => (
-      <Margin bottom={2}>
+      <Margin bottom="2">
         <ReduxForm
           form={form}
           key={form}
@@ -119,7 +119,7 @@ export const Metadata = ({
 
   const _error =
     error && !_metadata.length && !_loading ? (
-      <Margin bottom={5}>
+      <Margin bottom="5">
         <Message error>
           <MessageTitle>Ooops!</MessageTitle>
           <MessageDescription>
@@ -131,7 +131,7 @@ export const Metadata = ({
 
   return (
     <ViewContainer main>
-      <Margin bottom={5}>
+      <Margin bottom="5">
         <ReduxForm form={MENU_FORM_NAME}>
           {props => (
             <ToolbarForm
@@ -316,7 +316,7 @@ export default compose(
             'initialValues.name'
           );
 
-          if (!await Confirm(`Do you want to remove "${name}"?`)) {
+          if (!(await Confirm(`Do you want to remove "${name}"?`))) {
             return;
           }
 

consoles/my-joy-instances/src/containers/instances/networks.js

@@ -30,7 +30,7 @@ export const Networks = ({
   setInfoExpanded
 }) => (
   <ViewContainer main>
-    <Margin bottom={3}>
+    <Margin bottom="3">
       <Description href="https://docs.joyent.com/public-cloud/network/sdn">
         Use predefined or customized fabric networks which can be public-facing
         or private. All fabrics are isolated from other customers giving you
@@ -42,7 +42,7 @@ export const Networks = ({
     </Margin>
     {loading ? <StatusLoader /> : null}
     {!loading && error && !networks.length ? (
-      <Margin bottom={5}>
+      <Margin bottom="5">
         <Message error>
           <MessageTitle>Ooops!</MessageTitle>
           <MessageDescription>
@@ -81,7 +81,6 @@ export default compose(
       }
     }),
     props: ({ data }) => {
-      console.log(data);
       const { loading, error, variables } = data;
       const { id } = variables;
 

consoles/my-joy-instances/src/containers/instances/snapshots.js

@@ -70,7 +70,7 @@ const Snapshots = ({
   const _error = error &&
     !_loading &&
     !_values.length && (
-      <Margin bottom={5}>
+      <Margin bottom="5">
         <Message error>
           <MessageTitle>Ooops!</MessageTitle>
           <MessageDescription>
@@ -82,7 +82,7 @@ const Snapshots = ({
 
   const _createSnapshot =
     !loading && createSnapshotOpen ? (
-      <Margin bottom={5}>
+      <Margin bottom="5">
         <ReduxForm
           form={CREATE_FORM_NAME}
           shouldAsyncValidate={shouldAsyncValidate}
@@ -111,7 +111,7 @@ const Snapshots = ({
     ) : null;
 
   const _mutationError = mutationError ? (
-    <Margin bottom={5}>
+    <Margin bottom="5">
       <Message error>
         <MessageTitle>Ooops!</MessageTitle>
         <MessageDescription>{mutationError}</MessageDescription>
@@ -119,7 +119,7 @@ const Snapshots = ({
     </Margin>
   ) : null;
 
-  const _items = !_loading ? (
+  const _items = _loading ? null : (
     <ReduxForm form={TABLE_FORM_NAME}>
       {props => (
         <SnapshotsList
@@ -135,11 +135,11 @@ const Snapshots = ({
         />
       )}
     </ReduxForm>
-  ) : null;
+  );
 
   return (
     <ViewContainer main>
-      <Margin bottom={5}>
+      <Margin bottom="5">
         <ReduxForm form={MENU_FORM_NAME}>
           {props => (
             <ToolbarForm
@@ -349,13 +349,13 @@ export default compose(
         handleAction: async ({ name, selected = [] }) => {
           // eslint-disable-next-line no-alert
           if (
-            !await Confirm(
+            !(await Confirm(
               `Do you want to ${name} ${
                 selected.length === 1
                   ? `"${selected[0].name}"`
                   : `${selected.length} snapshots`
               }`
-            )
+            ))
           ) {
             return;
           }

consoles/my-joy-instances/src/containers/instances/summary.js

@@ -79,7 +79,7 @@ export const Summary = ({
   const _error = loadingError &&
     !_loading &&
     !instance && (
-      <Margin bottom={5}>
+      <Margin bottom="5">
         <Message error>
           <MessageTitle>Ooops!</MessageTitle>
           <MessageDescription>
@@ -265,7 +265,7 @@ export default compose(
         const { instance } = ownProps;
         const { id } = instance;
 
-        if (!await Confirm(`Do you want to ${action} "${instance.name}"?`)) {
+        if (!(await Confirm(`Do you want to ${action} "${instance.name}"?`))) {
           return;
         }
 

consoles/my-joy-instances/src/containers/instances/tags.js

@@ -18,10 +18,11 @@ import {
   Divider,
   H3,
   TagList,
-  TagItem,
-  KeyValue
+  TagItem
 } from 'joyent-ui-toolkit';
 
+import { KeyValue } from 'joyent-ui-resource-widgets';
+
 import ToolbarForm from '@components/instances/toolbar';
 import GetTags from '@graphql/list-tags.gql';
 import UpdateTags from '@graphql/update-tags.gql';
@@ -37,11 +38,13 @@ const EDIT_FORM_KEY = field => `instance-tags-${paramCase(field)}`;
 const TagsAddForm = props => (
   <KeyValue {...props} method="add" input="input" type="tag" expanded />
 );
+
 const TagsEditForm = props => (
   <KeyValue {...props} method="edit" input="input" type="tag" expanded />
 );
+
 const Tag = ({ name, value, onRemoveClick, onClick }) => (
-  <Margin right={1} bottom={1} key={`${name}-${value}`}>
+  <Margin right="1" bottom="1" key={`${name}-${value}`}>
     <TagItem onClick={onClick} onRemoveClick={onRemoveClick}>
       {name ? `${name}: ${value}` : value}
     </TagItem>
@@ -63,7 +66,7 @@ export const Tags = ({
   shouldAsyncValidate,
   handleAsyncValidate
 }) => {
-  const _loading = !(loading && !tags.length) ? null : <StatusLoader />;
+  const _loading = loading && !tags.length ? <StatusLoader /> : null;
 
   const _add = addOpen ? (
     <ReduxForm
@@ -85,15 +88,15 @@ export const Tags = ({
         ]
       : null;
 
-  const _count = !_loading ? (
-    <Margin bottom={3} top={5}>
+  const _count = _loading ? null : (
+    <Margin bottom="3" top="5">
       <H3>
         {tags.length} tag{tags.length === 1 ? '' : 's'}
       </H3>
     </Margin>
-  ) : null;
+  );
 
-  const _tags = !_loading ? (
+  const _tags = _loading ? null : (
     <TagList>
       {tags.map(({ id, name, value }) => (
         <Tag
@@ -105,7 +108,7 @@ export const Tags = ({
         />
       ))}
     </TagList>
-  ) : null;
+  );
 
   const _edit = editing ? (
     <ReduxForm
@@ -131,7 +134,7 @@ export const Tags = ({
 
   return (
     <ViewContainer main>
-      <Margin bottom={3}>
+      <Margin bottom="3">
         <ReduxForm form={MENU_FORM_NAME}>
           {props => (
             <ToolbarForm
@@ -282,7 +285,7 @@ export default compose(
         },
         handleRemove: async (form, { name }) => {
           // eslint-disable-next-line no-alert
-          if (!await Confirm(`Do you want to remove "${name}"?`)) {
+          if (!(await Confirm(`Do you want to remove "${name}"?`))) {
             return;
           }
 

consoles/my-joy-instances/src/containers/instances/user-script.js

@@ -18,14 +18,14 @@ import GetMetadata from '@graphql/list-metadata.gql';
 
 export const UserScript = ({ metadata, loading = false, error = null }) => (
   <ViewContainer main>
-    <Margin bottom={3}>
+    <Margin bottom="3">
       <Description href="https://docs.joyent.com/private-cloud/instances/using-mdata#UsingtheMetadataAPI-ListofMetadataKeys">
         User script can be used to inject a custom boot script.
       </Description>
     </Margin>
     {loading ? <StatusLoader /> : null}
     {!loading && error ? (
-      <Margin bottom={5}>
+      <Margin bottom="5">
         <Message error>
           <MessageTitle>Ooops!</MessageTitle>
           <MessageDescription>

consoles/my-joy-instances/src/containers/navigation/__tests__/__snapshots__/breadcrumb.spec.js.snap

@@ -70,7 +70,7 @@ exports[`renders <Breadcrumb /> without throwing 1`] = `
 .c10 {
   margin: 0;
   color: rgb(73,73,73);
-  font-weight: 600;
+  font-weight: 400;
   line-height: 1.5rem;
   font-size: 0.9375rem;
 }
@@ -322,7 +322,7 @@ exports[`renders <Breadcrumb match /> without throwing 1`] = `
 .c10 {
   margin: 0;
   color: rgb(73,73,73);
-  font-weight: 600;
+  font-weight: 400;
   line-height: 1.5rem;
   font-size: 0.9375rem;
 }

consoles/my-joy-instances/src/containers/navigation/breadcrumb.js

@@ -30,7 +30,7 @@ export default ({ match }) => {
     .filter(Boolean)
     .map(({ name, pathname }) => (
       <BreadcrumbItem key={name} to={pathname} component={Link}>
-        <Margin horizontal={1} vertical={3}>
+        <Margin horizontal="1" vertical="3">
           {name}
         </Margin>
       </BreadcrumbItem>

consoles/my-joy-instances/src/html.js

@@ -20,7 +20,7 @@ module.exports = ({
     </head>
     <body {...bodyAttrs}>
       <div id="header" />
-      {!children ? <div id="root" /> : null}
+      {children ? null : <div id="root" />}
       {children}
       <script src="/navigation/static/main.js" />
     </body>

consoles/my-joy-instances/src/server-error.js

@@ -1,6 +1,5 @@
 import React from 'react';
 import { Margin } from 'styled-components-spacing';
-import remcalc from 'remcalc';
 
 import {
   RootContainer,
@@ -8,16 +7,14 @@ import {
   ViewContainer,
   Message,
   MessageDescription,
-  MessageTitle,
-  Divider
+  MessageTitle
 } from 'joyent-ui-toolkit';
 
 import Breadcrumb from '@containers/navigation/breadcrumb';
 
 export const Route = () => (
   <ViewContainer main>
-    <Divider height={remcalc(24)} transparent />
-    <Margin bottom={5}>
+    <Margin bottom="4">
       <Message error>
         <MessageTitle>Ooops!</MessageTitle>
         <MessageDescription>

consoles/my-joy-instances/src/state/validators.js

@@ -16,7 +16,7 @@ const validateSchema = async (schema, value) => {
     keys(schema),
     async (errors, name) => {
       const msg = await validateField(schema[name], value[name]);
-      return !msg ? errors : assign(errors, { [name]: msg });
+      return msg ? assign(errors, { [name]: msg }) : errors;
     },
     {}
   );
@@ -109,6 +109,6 @@ export const addMetadata = metadata =>
   validateSchema(Schemas.metadata, metadata);
 
 export const instanceName = ({ name }) =>
-  !name ? null : validateSchema(Schemas.instanceName, { name });
+  name ? validateSchema(Schemas.instanceName, { name }) : null;
 
 export const editMetadata = addMetadata;

consoles/my-joy-navigation/.eslintignore

@@ -1,2 +0,0 @@
-build
-dist

consoles/my-joy-navigation/.eslintrc

@@ -1,13 +0,0 @@
-{
-  "extends": "joyent-portal",
-  "rules": {
-    "no-console": 0,
-    "new-cap": 0,
-    "camelcase": 1,
-    // temp
-    "no-undef": 1,
-    "no-debugger": 1,
-    "no-negated-condition": 0,
-    "jsx-a11y/href-no-hash": 0
-  }
-}

consoles/my-joy-navigation/lib/index.js

@@ -15,6 +15,7 @@ exports.register = async server => {
     if (NODE_ENV === 'production') {
       throw err;
     } else {
+      // eslint-disable-next-line no-console
       console.error(err);
     }
   }

consoles/my-joy-navigation/package.json

@@ -10,8 +10,6 @@
     "build:lib": "echo 0",
     "build:bundle": "NAMESPACE=navigation NODE_ENV=production redrun build",
     "prepublish": "NAMESPACE=navigation NODE_ENV=production redrun build",
-    "lint": "redrun lint:ci -- --fix",
-    "lint:ci": "NODE_ENV=test eslint . --ext .js --ext .md",
     "test": "echo 0",
     "test:ci": "redrun test",
     "build": "PREACT=1 joyent-react-scripts build"

consoles/my-joy-navigation/src/containers/account.js

@@ -24,7 +24,7 @@ const GetAccountServices = gql`
 `;
 
 const Account = ({ expanded, services = [] }) => {
-  return !expanded ? null : (
+  return expanded ? (
     <Popover>
       <Ul>
         {services.map(({ name, url }) => (
@@ -34,7 +34,7 @@ const Account = ({ expanded, services = [] }) => {
         ))}
       </Ul>
     </Popover>
-  );
+  ) : null;
 };
 
 export default compose(

consoles/my-joy-templates/.babelrc

@@ -0,0 +1,12 @@
+{
+  "ignore": ["_document.js", "_aliases.js"],
+  "presets": [
+    [
+      "joyent-portal",
+      {
+        "aliases": true,
+        "autoAliases": true
+      }
+    ]
+  ]
+}

consoles/my-joy-templates/.gitignore

@@ -0,0 +1,25 @@
+# See https://help.github.com/ignore-files/ for more about ignoring files.
+
+# dependencies
+/node_modules
+
+# testing
+/coverage
+
+# production
+/build
+
+# misc
+.DS_Store
+.env
+npm-debug.log*
+yarn-debug.log*
+
+yarn-error.log*
+
+## Image Snapshots Diff
+
+**/__diff_output__
+
+lib/app
+

consoles/my-joy-templates/.lighthouserc

@@ -0,0 +1,8 @@
+{
+  "setup": {
+    "compile": "npm run build",
+    "start": "serve -s build --port 3069 --single",
+    "href": "http://0.0.0.0:3069"
+  },
+  "extends": "lighthouse:default"
+}

consoles/my-joy-templates/.npmignore

@@ -0,0 +1,27 @@
+# See https://help.github.com/ignore-files/ for more about ignoring files.
+
+# dependencies
+/node_modules
+
+# testing
+/coverage
+
+# production
+/build
+
+# misc
+.DS_Store
+.env
+npm-debug.log*
+yarn-debug.log*
+
+yarn-error.log*
+
+## Image Snapshots Diff
+
+**/__diff_output__
+
+!lib/app
+!dist
+!build
+

consoles/my-joy-templates/.stylelintrc

@@ -0,0 +1,4 @@
+{
+  "test": ["./src/**/*.js"],
+  "extends": ["stylelint-config-joyent-portal"]
+}

consoles/my-joy-templates/.tern-project

@@ -0,0 +1,13 @@
+{
+  "libs": ["ecmascript", "browser"],
+  "plugins": {
+    "doc_comment": true,
+    "local-scope": true,
+    "jsx": true,
+    "node": true,
+    "webpack": {
+      "configPath":
+        "../../node_modules/joyent-react-scripts/src/webpack.config.dev.js"
+    }
+  }
+}

consoles/my-joy-templates/lib/index.js

@@ -0,0 +1,92 @@
+const Inert = require('inert');
+const Path = require('path');
+const RenderReact = require('hapi-render-react');
+const Intercept = require('apr-intercept');
+const Fs = require('mz/fs');
+
+const { NAMESPACE = 'templates' } = process.env;
+
+exports.register = async server => {
+  const relativeTo = Path.join(__dirname, 'app');
+  const buildRoot = Path.join(__dirname, `../build/${NAMESPACE}/static/`);
+  const publicRoot = Path.join(__dirname, `../public/static/`);
+
+  await server.register([
+    {
+      plugin: Inert
+    },
+    {
+      plugin: RenderReact
+    }
+  ]);
+
+  server.route([
+    {
+      method: 'GET',
+      path: `/${NAMESPACE}/service-worker.js`,
+      config: {
+        auth: false,
+        handler: {
+          file: {
+            path: Path.join(__dirname, '../build/service-worker.js')
+          }
+        }
+      }
+    },
+    {
+      method: 'GET',
+      path: `/${NAMESPACE}/favicon.ico`,
+      config: {
+        auth: false,
+        handler: {
+          file: {
+            path: Path.join(__dirname, '../build/favicon.ico')
+          }
+        }
+      }
+    },
+    {
+      method: 'GET',
+      path: `/${NAMESPACE}/static/{rest*}`,
+      config: {
+        auth: false
+      },
+      handler: async (request, h) => {
+        const { params } = request;
+        const { rest } = params;
+
+        const publicPathname = Path.join(publicRoot, rest);
+        const buildPathname = Path.join(buildRoot, rest);
+
+        const [err] = await Intercept(
+          Fs.access(publicPathname, Fs.constants.R_OK)
+        );
+
+        const file = err ? buildPathname : publicPathname;
+        return h.file(file, { confine: false });
+      }
+    },
+    {
+      method: '*',
+      path: `/${NAMESPACE}/~server-error`,
+      handler: {
+        view: {
+          name: 'server-error',
+          relativeTo
+        }
+      }
+    },
+    {
+      method: '*',
+      path: `/${NAMESPACE}/{path*}`,
+      handler: {
+        view: {
+          name: 'app',
+          relativeTo
+        }
+      }
+    }
+  ]);
+};
+
+exports.pkg = require('../package.json');

consoles/my-joy-templates/package.json

@@ -0,0 +1,56 @@
+{
+  "name": "my-joy-templates",
+  "version": "1.0.0",
+  "private": true,
+  "license": "MPL-2.0",
+  "repository": "github:yldio/joyent-portal",
+  "main": "lib/index.js",
+  "scripts": {
+    "dev": "NAMESPACE=templates NODE_ENV=development REACT_APP_GQL_PORT=4000 PORT=3071 joyent-react-scripts start",
+    "build:test": "echo 0",
+    "build:lib": "echo 0",
+    "build:bundle": "NAMESPACE=templates NODE_ENV=production redrun -p build:frontend build:ssr",
+    "prepublish": "NODE_ENV=production redrun build:bundle",
+    "test": "DEFAULT_TIMEOUT_INTERVAL=100000 NODE_ENV=test joyent-react-scripts test --env=jsdom",
+    "test:ci": "NODE_ENV=test joyent-react-scripts test --env=jsdom --testPathIgnorePatterns='.ui.js'",
+    "build:frontend": "joyent-react-scripts build",
+    "build:ssr": "SSR=1 UMD=1 babel src --out-dir lib/app --copy-files"
+  },
+  "dependencies": {
+    "@manaflair/redux-batch": "^0.1.0",
+    "cross-fetch": "^2.1.0",
+    "exenv": "^1.2.2",
+    "hapi-render-react": "^2.5.2",
+    "hapi-render-react-joyent-document": "^5.0.0",
+    "inert": "^5.1.0",
+    "joyent-manifest-editor": "^1.4.0",
+    "joyent-ui-instance-steps": "^1.0.0",
+    "joyent-ui-resource-step": "^1.0.0",
+    "joyent-ui-resource-widgets": "^1.0.0",
+    "joyent-ui-toolkit": "^6.0.0",
+    "lodash.get": "^4.4.2",
+    "query-string": "^6.1.0",
+    "react": "^16.3.1",
+    "react-apollo": "^2.1.2",
+    "react-dom": "^16.3.1",
+    "react-redux-values": "^1.1.2",
+    "react-router-dom": "^4.2.2",
+    "redux": "^3.7.2",
+    "redux-form": "^7.3.0",
+    "remcalc": "^1.0.10",
+    "styled-components": "^3.2.5",
+    "styled-components-spacing": "^2.1.3"
+  },
+  "devDependencies": {
+    "babel-cli": "^6.26.0",
+    "babel-preset-joyent-portal": "^7.0.1",
+    "eslint": "^4.19.1",
+    "eslint-config-joyent-portal": "^3.3.1",
+    "jest-image-snapshot": "^2.4.0",
+    "jest-styled-components": "^5.0.1",
+    "joyent-react-scripts": "^8.0.3",
+    "react-screenshot-renderer": "^1.1.2",
+    "react-test-renderer": "^16.3.1",
+    "redrun": "^6.0.2"
+  }
+}

consoles/my-joy-templates/public/manifest.json

@@ -0,0 +1,15 @@
+{
+  "short_name": "Joyent",
+  "name": "My Joyent β",
+  "icons": [
+    {
+      "src": "favicon.ico",
+      "sizes": "192x192",
+      "type": "image/png"
+    }
+  ],
+  "start_url": "./index.html",
+  "display": "standalone",
+  "theme_color": "#1E313B",
+  "background_color": "#FAFAFA"
+}

consoles/my-joy-templates/public/static/css/libre-franklin.css

@@ -0,0 +1,31 @@
+@font-face {
+  font-family: 'Libre Franklin';
+  font-style: normal;
+  font-weight: 400;
+  src: local('Libre Franklin'), local('LibreFranklin-Regular'),
+    url(../fonts/libre-franklin/libre-franklin-regular.ttf) format('truetype');
+}
+
+@font-face {
+  font-family: 'Libre Franklin';
+  font-style: normal;
+  font-weight: 500;
+  src: local('Libre Franklin Medium'), local('LibreFranklin-Medium'),
+    url(../fonts/libre-franklin/libre-franklin-medium.ttf) format('truetype');
+}
+
+@font-face {
+  font-family: 'Libre Franklin';
+  font-style: normal;
+  font-weight: 600;
+  src: local('Libre Franklin SemiBold'), local('LibreFranklin-SemiBold'),
+    url(../fonts/libre-franklin/libre-franklin-semibold.ttf) format('truetype');
+}
+
+@font-face {
+  font-family: 'Libre Franklin';
+  font-style: normal;
+  font-weight: 700;
+  src: local('Libre Franklin Bold'), local('LibreFranklin-Bold'),
+    url(../fonts/libre-franklin/libre-franklin-bold.ttf) format('truetype');
+}

consoles/my-joy-templates/public/static/css/roboto-mono.css

@@ -0,0 +1,15 @@
+@font-face {
+  font-family: 'Roboto Mono';
+  font-style: normal;
+  font-weight: 400;
+  src: local('Roboto Mono'), local('RobotoMono-Regular'),
+    url(../fonts/roboto-mono/roboto-mono-regular.ttf) format('truetype');
+}
+
+@font-face {
+  font-family: 'Roboto Mono';
+  font-style: normal;
+  font-weight: 700;
+  src: local('Roboto Mono Bold'), local('RobotoMono-Bold'),
+    url(../fonts/roboto-mono/roboto-mono-bold.ttf) format('truetype');
+}

consoles/my-joy-templates/public/static/fonts/libre-franklin/license.txt

@@ -0,0 +1,93 @@
+Copyright (c) 2015, Impallari Type (www.impallari.com)
+
+This Font Software is licensed under the SIL Open Font License, Version 1.1.
+This license is copied below, and is also available with a FAQ at:
+http://scripts.sil.org/OFL
+
+
+-----------------------------------------------------------
+SIL OPEN FONT LICENSE Version 1.1 - 26 February 2007
+-----------------------------------------------------------
+
+PREAMBLE
+The goals of the Open Font License (OFL) are to stimulate worldwide
+development of collaborative font projects, to support the font creation
+efforts of academic and linguistic communities, and to provide a free and
+open framework in which fonts may be shared and improved in partnership
+with others.
+
+The OFL allows the licensed fonts to be used, studied, modified and
+redistributed freely as long as they are not sold by themselves. The
+fonts, including any derivative works, can be bundled, embedded, 
+redistributed and/or sold with any software provided that any reserved
+names are not used by derivative works. The fonts and derivatives,
+however, cannot be released under any other type of license. The
+requirement for fonts to remain under this license does not apply
+to any document created using the fonts or their derivatives.
+
+DEFINITIONS
+"Font Software" refers to the set of files released by the Copyright
+Holder(s) under this license and clearly marked as such. This may
+include source files, build scripts and documentation.
+
+"Reserved Font Name" refers to any names specified as such after the
+copyright statement(s).
+
+"Original Version" refers to the collection of Font Software components as
+distributed by the Copyright Holder(s).
+
+"Modified Version" refers to any derivative made by adding to, deleting,
+or substituting -- in part or in whole -- any of the components of the
+Original Version, by changing formats or by porting the Font Software to a
+new environment.
+
+"Author" refers to any designer, engineer, programmer, technical
+writer or other person who contributed to the Font Software.
+
+PERMISSION & CONDITIONS
+Permission is hereby granted, free of charge, to any person obtaining
+a copy of the Font Software, to use, study, copy, merge, embed, modify,
+redistribute, and sell modified and unmodified copies of the Font
+Software, subject to the following conditions:
+
+1) Neither the Font Software nor any of its individual components,
+in Original or Modified Versions, may be sold by itself.
+
+2) Original or Modified Versions of the Font Software may be bundled,
+redistributed and/or sold with any software, provided that each copy
+contains the above copyright notice and this license. These can be
+included either as stand-alone text files, human-readable headers or
+in the appropriate machine-readable metadata fields within text or
+binary files as long as those fields can be easily viewed by the user.
+
+3) No Modified Version of the Font Software may use the Reserved Font
+Name(s) unless explicit written permission is granted by the corresponding
+Copyright Holder. This restriction only applies to the primary font name as
+presented to the users.
+
+4) The name(s) of the Copyright Holder(s) or the Author(s) of the Font
+Software shall not be used to promote, endorse or advertise any
+Modified Version, except to acknowledge the contribution(s) of the
+Copyright Holder(s) and the Author(s) or with their explicit written
+permission.
+
+5) The Font Software, modified or unmodified, in part or in whole,
+must be distributed entirely under this license, and must not be
+distributed under any other license. The requirement for fonts to
+remain under this license does not apply to any document created
+using the Font Software.
+
+TERMINATION
+This license becomes null and void if any of the above conditions are
+not met.
+
+DISCLAIMER
+THE FONT SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND,
+EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO ANY WARRANTIES OF
+MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT
+OF COPYRIGHT, PATENT, TRADEMARK, OR OTHER RIGHT. IN NO EVENT SHALL THE
+COPYRIGHT HOLDER BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY,
+INCLUDING ANY GENERAL, SPECIAL, INDIRECT, INCIDENTAL, OR CONSEQUENTIAL
+DAMAGES, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING
+FROM, OUT OF THE USE OR INABILITY TO USE THE FONT SOFTWARE OR FROM
+OTHER DEALINGS IN THE FONT SOFTWARE.

consoles/my-joy-templates/public/static/fonts/roboto-mono/license.txt

@@ -0,0 +1,202 @@
+
+                                 Apache License
+                           Version 2.0, January 2004
+                        http://www.apache.org/licenses/
+
+   TERMS AND CONDITIONS FOR USE, REPRODUCTION, AND DISTRIBUTION
+
+   1. Definitions.
+
+      "License" shall mean the terms and conditions for use, reproduction,
+      and distribution as defined by Sections 1 through 9 of this document.
+
+      "Licensor" shall mean the copyright owner or entity authorized by
+      the copyright owner that is granting the License.
+
+      "Legal Entity" shall mean the union of the acting entity and all
+      other entities that control, are controlled by, or are under common
+      control with that entity. For the purposes of this definition,
+      "control" means (i) the power, direct or indirect, to cause the
+      direction or management of such entity, whether by contract or
+      otherwise, or (ii) ownership of fifty percent (50%) or more of the
+      outstanding shares, or (iii) beneficial ownership of such entity.
+
+      "You" (or "Your") shall mean an individual or Legal Entity
+      exercising permissions granted by this License.
+
+      "Source" form shall mean the preferred form for making modifications,
+      including but not limited to software source code, documentation
+      source, and configuration files.
+
+      "Object" form shall mean any form resulting from mechanical
+      transformation or translation of a Source form, including but
+      not limited to compiled object code, generated documentation,
+      and conversions to other media types.
+
+      "Work" shall mean the work of authorship, whether in Source or
+      Object form, made available under the License, as indicated by a
+      copyright notice that is included in or attached to the work
+      (an example is provided in the Appendix below).
+
+      "Derivative Works" shall mean any work, whether in Source or Object
+      form, that is based on (or derived from) the Work and for which the
+      editorial revisions, annotations, elaborations, or other modifications
+      represent, as a whole, an original work of authorship. For the purposes
+      of this License, Derivative Works shall not include works that remain
+      separable from, or merely link (or bind by name) to the interfaces of,
+      the Work and Derivative Works thereof.
+
+      "Contribution" shall mean any work of authorship, including
+      the original version of the Work and any modifications or additions
+      to that Work or Derivative Works thereof, that is intentionally
+      submitted to Licensor for inclusion in the Work by the copyright owner
+      or by an individual or Legal Entity authorized to submit on behalf of
+      the copyright owner. For the purposes of this definition, "submitted"
+      means any form of electronic, verbal, or written communication sent
+      to the Licensor or its representatives, including but not limited to
+      communication on electronic mailing lists, source code control systems,
+      and issue tracking systems that are managed by, or on behalf of, the
+      Licensor for the purpose of discussing and improving the Work, but
+      excluding communication that is conspicuously marked or otherwise
+      designated in writing by the copyright owner as "Not a Contribution."
+
+      "Contributor" shall mean Licensor and any individual or Legal Entity
+      on behalf of whom a Contribution has been received by Licensor and
+      subsequently incorporated within the Work.
+
+   2. Grant of Copyright License. Subject to the terms and conditions of
+      this License, each Contributor hereby grants to You a perpetual,
+      worldwide, non-exclusive, no-charge, royalty-free, irrevocable
+      copyright license to reproduce, prepare Derivative Works of,
+      publicly display, publicly perform, sublicense, and distribute the
+      Work and such Derivative Works in Source or Object form.
+
+   3. Grant of Patent License. Subject to the terms and conditions of
+      this License, each Contributor hereby grants to You a perpetual,
+      worldwide, non-exclusive, no-charge, royalty-free, irrevocable
+      (except as stated in this section) patent license to make, have made,
+      use, offer to sell, sell, import, and otherwise transfer the Work,
+      where such license applies only to those patent claims licensable
+      by such Contributor that are necessarily infringed by their
+      Contribution(s) alone or by combination of their Contribution(s)
+      with the Work to which such Contribution(s) was submitted. If You
+      institute patent litigation against any entity (including a
+      cross-claim or counterclaim in a lawsuit) alleging that the Work
+      or a Contribution incorporated within the Work constitutes direct
+      or contributory patent infringement, then any patent licenses
+      granted to You under this License for that Work shall terminate
+      as of the date such litigation is filed.
+
+   4. Redistribution. You may reproduce and distribute copies of the
+      Work or Derivative Works thereof in any medium, with or without
+      modifications, and in Source or Object form, provided that You
+      meet the following conditions:
+
+      (a) You must give any other recipients of the Work or
+          Derivative Works a copy of this License; and
+
+      (b) You must cause any modified files to carry prominent notices
+          stating that You changed the files; and
+
+      (c) You must retain, in the Source form of any Derivative Works
+          that You distribute, all copyright, patent, trademark, and
+          attribution notices from the Source form of the Work,
+          excluding those notices that do not pertain to any part of
+          the Derivative Works; and
+
+      (d) If the Work includes a "NOTICE" text file as part of its
+          distribution, then any Derivative Works that You distribute must
+          include a readable copy of the attribution notices contained
+          within such NOTICE file, excluding those notices that do not
+          pertain to any part of the Derivative Works, in at least one
+          of the following places: within a NOTICE text file distributed
+          as part of the Derivative Works; within the Source form or
+          documentation, if provided along with the Derivative Works; or,
+          within a display generated by the Derivative Works, if and
+          wherever such third-party notices normally appear. The contents
+          of the NOTICE file are for informational purposes only and
+          do not modify the License. You may add Your own attribution
+          notices within Derivative Works that You distribute, alongside
+          or as an addendum to the NOTICE text from the Work, provided
+          that such additional attribution notices cannot be construed
+          as modifying the License.
+
+      You may add Your own copyright statement to Your modifications and
+      may provide additional or different license terms and conditions
+      for use, reproduction, or distribution of Your modifications, or
+      for any such Derivative Works as a whole, provided Your use,
+      reproduction, and distribution of the Work otherwise complies with
+      the conditions stated in this License.
+
+   5. Submission of Contributions. Unless You explicitly state otherwise,
+      any Contribution intentionally submitted for inclusion in the Work
+      by You to the Licensor shall be under the terms and conditions of
+      this License, without any additional terms or conditions.
+      Notwithstanding the above, nothing herein shall supersede or modify
+      the terms of any separate license agreement you may have executed
+      with Licensor regarding such Contributions.
+
+   6. Trademarks. This License does not grant permission to use the trade
+      names, trademarks, service marks, or product names of the Licensor,
+      except as required for reasonable and customary use in describing the
+      origin of the Work and reproducing the content of the NOTICE file.
+
+   7. Disclaimer of Warranty. Unless required by applicable law or
+      agreed to in writing, Licensor provides the Work (and each
+      Contributor provides its Contributions) on an "AS IS" BASIS,
+      WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or
+      implied, including, without limitation, any warranties or conditions
+      of TITLE, NON-INFRINGEMENT, MERCHANTABILITY, or FITNESS FOR A
+      PARTICULAR PURPOSE. You are solely responsible for determining the
+      appropriateness of using or redistributing the Work and assume any
+      risks associated with Your exercise of permissions under this License.
+
+   8. Limitation of Liability. In no event and under no legal theory,
+      whether in tort (including negligence), contract, or otherwise,
+      unless required by applicable law (such as deliberate and grossly
+      negligent acts) or agreed to in writing, shall any Contributor be
+      liable to You for damages, including any direct, indirect, special,
+      incidental, or consequential damages of any character arising as a
+      result of this License or out of the use or inability to use the
+      Work (including but not limited to damages for loss of goodwill,
+      work stoppage, computer failure or malfunction, or any and all
+      other commercial damages or losses), even if such Contributor
+      has been advised of the possibility of such damages.
+
+   9. Accepting Warranty or Additional Liability. While redistributing
+      the Work or Derivative Works thereof, You may choose to offer,
+      and charge a fee for, acceptance of support, warranty, indemnity,
+      or other liability obligations and/or rights consistent with this
+      License. However, in accepting such obligations, You may act only
+      on Your own behalf and on Your sole responsibility, not on behalf
+      of any other Contributor, and only if You agree to indemnify,
+      defend, and hold each Contributor harmless for any liability
+      incurred by, or claims asserted against, such Contributor by reason
+      of your accepting any such warranty or additional liability.
+
+   END OF TERMS AND CONDITIONS
+
+   APPENDIX: How to apply the Apache License to your work.
+
+      To apply the Apache License to your work, attach the following
+      boilerplate notice, with the fields enclosed by brackets "[]"
+      replaced with your own identifying information. (Don't include
+      the brackets!)  The text should be enclosed in the appropriate
+      comment syntax for the file format. We also recommend that a
+      file or class name and description of purpose be included on the
+      same "printed page" as the copyright notice for easier
+      identification within third-party archives.
+
+   Copyright [yyyy] [name of copyright owner]
+
+   Licensed under the Apache License, Version 2.0 (the "License");
+   you may not use this file except in compliance with the License.
+   You may obtain a copy of the License at
+
+       http://www.apache.org/licenses/LICENSE-2.0
+
+   Unless required by applicable law or agreed to in writing, software
+   distributed under the License is distributed on an "AS IS" BASIS,
+   WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+   See the License for the specific language governing permissions and
+   limitations under the License.