fix(my-joy-beta): create instance deploy ux improvements

fixes #1015

packages/my-joy-beta/package.json

@@ -41,7 +41,7 @@
     "react-apollo": "^2.0.4",
     "react-dom": "^16.2.0",
     "react-redux": "^5.0.6",
-    "react-redux-values": "^1.0.2",
+    "react-redux-values": "^1.1.2",
     "react-router": "^4.2.0",
     "react-router-dom": "^4.2.2",
     "redux": "^3.7.2",

packages/my-joy-beta/src/components/create-instance/__tests__/__snapshots__/title.spec.js.snap

@@ -1,14 +1,38 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
 exports[`renders <Title /> without throwing 1`] = `
-Array [
+.c3 {
-  .c3 {
   font-size: 80%;
   color: rgba(73,73,73,1);
   line-height: 1.125rem;
   font-size: 0.8125rem;
 }
 
+.c7 {
+  box-sizing: border-box;
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: -ms-flexbox;
+  display: flex;
+  -webkit-flex: 0 1 auto;
+  -ms-flex: 0 1 auto;
+  flex: 0 1 auto;
+  -webkit-flex-direction: row;
+  -ms-flex-direction: row;
+  flex-direction: row;
+  -webkit-flex-wrap: wrap;
+  -ms-flex-wrap: wrap;
+  flex-wrap: wrap;
+  margin-right: -0.5rem;
+  margin-left: -0.5rem;
+}
+
+.c6 {
+  background-color: rgb(216,216,216);
+  margin: 0;
+  height: 0.0625rem;
+}
+
 .c0 {
   display: -webkit-box;
   display: -webkit-flex;
@@ -62,9 +86,22 @@ Array [
   margin-right: 0.25rem;
 }
 
+.c5 {
+  margin-top: 0.25rem;
+  margin-bottom: 1rem;
+}
+
+.c4 + div:empty,
+.c4 + form:empty {
+  margin-bottom: 2.5rem;
+}
+
 <div
-    className="c0"
+  className=""
 >
+  <div
+    className="c0"
+  >
     <div
       className="c1"
     >
@@ -75,62 +112,51 @@ Array [
     <small
       className="c3"
     />
-</div>,
+  </div>
-  .c3 {
-  box-sizing: border-box;
-  display: -webkit-box;
-  display: -webkit-flex;
-  display: -ms-flexbox;
-  display: flex;
-  -webkit-flex: 0 1 auto;
-  -ms-flex: 0 1 auto;
-  flex: 0 1 auto;
-  -webkit-flex-direction: row;
-  -ms-flex-direction: row;
-  flex-direction: row;
-  -webkit-flex-wrap: wrap;
-  -ms-flex-wrap: wrap;
-  flex-wrap: wrap;
-  margin-right: -0.5rem;
-  margin-left: -0.5rem;
-}
-
-.c2 {
-  background-color: rgb(216,216,216);
-  margin: 0;
-  height: 0.0625rem;
-}
-
-.c1 {
-  margin-top: 0.25rem;
-  margin-bottom: 1rem;
-}
-
-.c0 + div:empty,
-.c0 + form:empty {
-  margin-bottom: 2.5rem;
-}
-
-<div
-    className="c0 c1"
->
   <div
-        className="c2 c3"
+    className="c4 c5"
+  >
+    <div
+      className="c6 c7"
       height="0.0625rem"
     />
-</div>,
+  </div>
-]
+</div>
 `;
 
 exports[`renders <Title icon="NameIcon"/> without throwing 1`] = `
-Array [
+.c3 {
-  .c3 {
   font-size: 80%;
   color: rgba(73,73,73,1);
   line-height: 1.125rem;
   font-size: 0.8125rem;
 }
 
+.c7 {
+  box-sizing: border-box;
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: -ms-flexbox;
+  display: flex;
+  -webkit-flex: 0 1 auto;
+  -ms-flex: 0 1 auto;
+  flex: 0 1 auto;
+  -webkit-flex-direction: row;
+  -ms-flex-direction: row;
+  flex-direction: row;
+  -webkit-flex-wrap: wrap;
+  -ms-flex-wrap: wrap;
+  flex-wrap: wrap;
+  margin-right: -0.5rem;
+  margin-left: -0.5rem;
+}
+
+.c6 {
+  background-color: rgb(216,216,216);
+  margin: 0;
+  height: 0.0625rem;
+}
+
 .c0 {
   display: -webkit-box;
   display: -webkit-flex;
@@ -184,9 +210,22 @@ Array [
   margin-right: 0.25rem;
 }
 
+.c5 {
+  margin-top: 0.25rem;
+  margin-bottom: 1rem;
+}
+
+.c4 + div:empty,
+.c4 + form:empty {
+  margin-bottom: 2.5rem;
+}
+
 <div
-    className="c0"
+  className=""
 >
+  <div
+    className="c0"
+  >
     <div
       className="c1"
     >
@@ -218,62 +257,51 @@ Array [
     <small
       className="c3"
     />
-</div>,
+  </div>
-  .c3 {
-  box-sizing: border-box;
-  display: -webkit-box;
-  display: -webkit-flex;
-  display: -ms-flexbox;
-  display: flex;
-  -webkit-flex: 0 1 auto;
-  -ms-flex: 0 1 auto;
-  flex: 0 1 auto;
-  -webkit-flex-direction: row;
-  -ms-flex-direction: row;
-  flex-direction: row;
-  -webkit-flex-wrap: wrap;
-  -ms-flex-wrap: wrap;
-  flex-wrap: wrap;
-  margin-right: -0.5rem;
-  margin-left: -0.5rem;
-}
-
-.c2 {
-  background-color: rgb(216,216,216);
-  margin: 0;
-  height: 0.0625rem;
-}
-
-.c1 {
-  margin-top: 0.25rem;
-  margin-bottom: 1rem;
-}
-
-.c0 + div:empty,
-.c0 + form:empty {
-  margin-bottom: 2.5rem;
-}
-
-<div
-    className="c0 c1"
->
   <div
-        className="c2 c3"
+    className="c4 c5"
+  >
+    <div
+      className="c6 c7"
       height="0.0625rem"
     />
-</div>,
+  </div>
-]
+</div>
 `;
 
 exports[`renders <Title icon="Test" label="Instance name"/> without throwing 1`] = `
-Array [
+.c3 {
-  .c3 {
   font-size: 80%;
   color: rgba(73,73,73,1);
   line-height: 1.125rem;
   font-size: 0.8125rem;
 }
 
+.c7 {
+  box-sizing: border-box;
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: -ms-flexbox;
+  display: flex;
+  -webkit-flex: 0 1 auto;
+  -ms-flex: 0 1 auto;
+  flex: 0 1 auto;
+  -webkit-flex-direction: row;
+  -ms-flex-direction: row;
+  flex-direction: row;
+  -webkit-flex-wrap: wrap;
+  -ms-flex-wrap: wrap;
+  flex-wrap: wrap;
+  margin-right: -0.5rem;
+  margin-left: -0.5rem;
+}
+
+.c6 {
+  background-color: rgb(216,216,216);
+  margin: 0;
+  height: 0.0625rem;
+}
+
 .c0 {
   display: -webkit-box;
   display: -webkit-flex;
@@ -327,9 +355,23 @@ Array [
   margin-right: 0.25rem;
 }
 
+.c5 {
+  margin-top: 0.25rem;
+  margin-bottom: 1rem;
+}
+
+.c4 + div:empty,
+.c4 + form:empty {
+  margin-bottom: 2.5rem;
+}
+
 <div
-    className="c0"
+  className=""
+  label="Instance name"
 >
+  <div
+    className="c0"
+  >
     <div
       className="c1"
     >
@@ -361,8 +403,27 @@ Array [
     <small
       className="c3"
     />
-</div>,
+  </div>
-  .c3 {
+  <div
+    className="c4 c5"
+  >
+    <div
+      className="c6 c7"
+      height="0.0625rem"
+    />
+  </div>
+</div>
+`;
+
+exports[`renders <Title label="Test"/> without throwing 1`] = `
+.c3 {
+  font-size: 80%;
+  color: rgba(73,73,73,1);
+  line-height: 1.125rem;
+  font-size: 0.8125rem;
+}
+
+.c7 {
   box-sizing: border-box;
   display: -webkit-box;
   display: -webkit-flex;
@@ -381,42 +442,12 @@ Array [
   margin-left: -0.5rem;
 }
 
-.c2 {
+.c6 {
   background-color: rgb(216,216,216);
   margin: 0;
   height: 0.0625rem;
 }
 
-.c1 {
-  margin-top: 0.25rem;
-  margin-bottom: 1rem;
-}
-
-.c0 + div:empty,
-.c0 + form:empty {
-  margin-bottom: 2.5rem;
-}
-
-<div
-    className="c0 c1"
->
-    <div
-        className="c2 c3"
-        height="0.0625rem"
-    />
-</div>,
-]
-`;
-
-exports[`renders <Title label="Test"/> without throwing 1`] = `
-Array [
-  .c3 {
-  font-size: 80%;
-  color: rgba(73,73,73,1);
-  line-height: 1.125rem;
-  font-size: 0.8125rem;
-}
-
 .c0 {
   display: -webkit-box;
   display: -webkit-flex;
@@ -470,9 +501,23 @@ Array [
   margin-right: 0.25rem;
 }
 
+.c5 {
+  margin-top: 0.25rem;
+  margin-bottom: 1rem;
+}
+
+.c4 + div:empty,
+.c4 + form:empty {
+  margin-bottom: 2.5rem;
+}
+
 <div
-    className="c0"
+  className=""
+  label="Test"
 >
+  <div
+    className="c0"
+  >
     <div
       className="c1"
     >
@@ -483,49 +528,14 @@ Array [
     <small
       className="c3"
     />
-</div>,
+  </div>
-  .c3 {
-  box-sizing: border-box;
-  display: -webkit-box;
-  display: -webkit-flex;
-  display: -ms-flexbox;
-  display: flex;
-  -webkit-flex: 0 1 auto;
-  -ms-flex: 0 1 auto;
-  flex: 0 1 auto;
-  -webkit-flex-direction: row;
-  -ms-flex-direction: row;
-  flex-direction: row;
-  -webkit-flex-wrap: wrap;
-  -ms-flex-wrap: wrap;
-  flex-wrap: wrap;
-  margin-right: -0.5rem;
-  margin-left: -0.5rem;
-}
-
-.c2 {
-  background-color: rgb(216,216,216);
-  margin: 0;
-  height: 0.0625rem;
-}
-
-.c1 {
-  margin-top: 0.25rem;
-  margin-bottom: 1rem;
-}
-
-.c0 + div:empty,
-.c0 + form:empty {
-  margin-bottom: 2.5rem;
-}
-
-<div
-    className="c0 c1"
->
   <div
-        className="c2 c3"
+    className="c4 c5"
+  >
+    <div
+      className="c6 c7"
       height="0.0625rem"
     />
-</div>,
+  </div>
-]
+</div>
 `;

packages/my-joy-beta/src/components/create-instance/image.js

@@ -16,10 +16,8 @@ import {
   Button,
   Toggle,
   H4,
-  Select,
+  Select
-  StatusLoader
 } from 'joyent-ui-toolkit';
-import Description from '@components/create-instance/description';
 
 const fadeIn = keyframes`
   from {
@@ -88,7 +86,7 @@ const getImageByID = (id, images) => {
   const image = images
     .map(image => ({
       ...image,
-      versions: image.versions.filter(version => version.id === id)
+      versions: (image.versions || []).filter(version => version.id === id)
     }))
     .filter(e => e.versions.length)[0];
   return image
@@ -100,35 +98,31 @@ const getImageByID = (id, images) => {
     : {};
 };
 
+export const Preview = ({ imageID, images, isVmSelected, onEdit }) => (
+  <Fragment>
+    <Margin bottom={2} top={3}>
+      <H3 bold>
+        {titleCase(getImageByID(imageID, images).name)} -{' '}
+        {getImageByID(imageID, images).version}
+      </H3>
+      <P>
+        {isVmSelected ? 'Hardware Virtual Machine' : 'Infrastructure Container'}{' '}
+      </P>
+    </Margin>
+    <Button type="button" secondary onClick={onEdit}>
+      Edit
+    </Button>
+  </Fragment>
+);
+
 export default ({
   handleSubmit,
   pristine,
-  expanded,
   imageID,
-  onCancel,
+  images = [],
-  loading,
-  images,
   isVmSelected
 }) => (
   <form onSubmit={handleSubmit}>
-    {expanded && (
-      <Fragment>
-        <Description>
-          Hardware virtual machines are generally used for non-containerized
-          applications. Infrastructure containers are generally for running any
-          Linux image on secure, bare metal containers.{' '}
-          <a
-            href="https://docs.joyent.com/private-cloud/images"
-            rel="noopener noreferrer"
-            target="_blank"
-          >
-            Read the docs
-          </a>
-        </Description>
-        {loading ? (
-          <StatusLoader />
-        ) : (
-          <Fragment>
     <Margin bottom={4}>
       <FormGroup name="vms" field={Field}>
         <Flex alignCenter>
@@ -143,8 +137,7 @@ export default ({
           <Col md={2} sm={3}>
             <Card
               selected={
-                        image.imageName ===
+                image.imageName === getImageByID(imageID, images).imageName
-                        getImageByID(imageID, images).imageName
               }
             >
               <img
@@ -160,7 +153,7 @@ export default ({
               <FormGroup name="image" field={Field}>
                 <Version onBlur={null}>
                   <option selected>Version</option>
-                          {image.versions.map(version => (
+                  {image.versions && image.versions.map(version => (
                     <option
                       key={`${version.name} - ${version.version}`}
                       value={version.id}
@@ -177,28 +170,5 @@ export default ({
         Next
       </Button>
     </Margin>
-          </Fragment>
-        )}
-      </Fragment>
-    )}
-    {!expanded &&
-      imageID && (
-        <Fragment>
-          <Margin bottom={2} top={3}>
-            <H3 bold>
-              {titleCase(getImageByID(imageID, images).name)} -{' '}
-              {getImageByID(imageID, images).version}
-            </H3>
-            <P>
-              {isVmSelected
-                ? 'Hardware Virtual Machine'
-                : 'Infrastructure Container'}{' '}
-            </P>
-          </Margin>
-          <Button type="button" secondary onClick={onCancel}>
-            Edit
-          </Button>
-        </Fragment>
-      )}
   </form>
 );

packages/my-joy-beta/src/components/create-instance/name.js

@@ -1,11 +1,10 @@
-import React, { Fragment } from 'react';
+import React from 'react';
 import { Field } from 'redux-form';
 import { Margin } from 'styled-components-spacing';
 import Flex, { FlexItem } from 'styled-flex-component';
 import remcalc from 'remcalc';
 
 import {
-  H3,
   FormGroup,
   FormLabel,
   Input,
@@ -20,16 +19,11 @@ export default ({
   handleSubmit,
   pristine,
   asyncValidating,
-  expanded,
-  name,
   placeholderName,
   randomizing,
-  onCancel,
   onRandomize
 }) => (
   <form onSubmit={handleSubmit}>
-    {expanded ? (
-      <Fragment>
     <Description>
       Your instance name will be used to identify this specific instance.
     </Description>
@@ -64,20 +58,5 @@ export default ({
         Next
       </Button>
     </Margin>
-      </Fragment>
-    ) : (
-      <Fragment>
-        {name ? (
-          <Fragment>
-            <Margin bottom={2} top={3}>
-              <H3 bold>{name}</H3>
-            </Margin>
-            <Button type="button" secondary onClick={onCancel}>
-              Edit
-            </Button>
-          </Fragment>
-        ) : null}
-      </Fragment>
-    )}
   </form>
 );

packages/my-joy-beta/src/components/create-instance/title.js

@@ -1,8 +1,9 @@
-import React, { Fragment } from 'react';
+import React from 'react';
 import Flex from 'styled-flex-component';
 import { Margin } from 'styled-components-spacing';
 import remcalc from 'remcalc';
 import styled from 'styled-components';
+import is from 'styled-is';
 
 import { Divider, Small } from 'joyent-ui-toolkit';
 
@@ -13,8 +14,14 @@ const IsEmpty = styled(Margin)`
   }
 `;
 
-export default ({ icon, children }) => (
+const Container = styled.div`
-  <Fragment>
+  ${is('onClick')`
+    cursor: pointer;
+  `};
+`;
+
+export default ({ icon, children, ...rest }) => (
+  <Container {...rest}>
     <Flex>
       <Margin right={1}>
         <Flex alignCenter full>
@@ -26,5 +33,5 @@ export default ({ icon, children }) => (
     <IsEmpty top={1} bottom={3}>
       <Divider height={remcalc(1)} />
     </IsEmpty>
-  </Fragment>
+  </Container>
 );

packages/my-joy-beta/src/containers/create-instance/__tests__/__snapshots__/metadata.spec.js.snap

@@ -9,10 +9,40 @@ Array [
   font-size: 0.8125rem;
 }
 
+.c7 {
+  box-sizing: border-box;
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: -ms-flexbox;
+  display: flex;
+  -webkit-flex: 0 1 auto;
+  -ms-flex: 0 1 auto;
+  flex: 0 1 auto;
+  -webkit-flex-direction: row;
+  -ms-flex-direction: row;
+  flex-direction: row;
+  -webkit-flex-wrap: wrap;
+  -ms-flex-wrap: wrap;
+  flex-wrap: wrap;
+  margin-right: -0.5rem;
+  margin-left: -0.5rem;
+}
+
+.c6 {
+  background-color: rgb(216,216,216);
+  margin: 0;
+  height: 0.0625rem;
+}
+
 .c1 {
   margin-right: 0.25rem;
 }
 
+.c5 {
+  margin-top: 0.25rem;
+  margin-bottom: 1rem;
+}
+
 .c0 {
   display: -webkit-box;
   display: -webkit-flex;
@@ -62,9 +92,18 @@ Array [
   flex-basis: 100%;
 }
 
+.c4 + div:empty,
+.c4 + form:empty {
+  margin-bottom: 2.5rem;
+}
+
 <div
-    className="c0"
+    className=""
+    onClick={undefined}
 >
+    <div
+        className="c0"
+    >
         <div
             className="c1"
         >
@@ -139,49 +178,15 @@ Array [
         >
             Metadata
         </small>
-</div>,
+    </div>
-  .c3 {
-  box-sizing: border-box;
-  display: -webkit-box;
-  display: -webkit-flex;
-  display: -ms-flexbox;
-  display: flex;
-  -webkit-flex: 0 1 auto;
-  -ms-flex: 0 1 auto;
-  flex: 0 1 auto;
-  -webkit-flex-direction: row;
-  -ms-flex-direction: row;
-  flex-direction: row;
-  -webkit-flex-wrap: wrap;
-  -ms-flex-wrap: wrap;
-  flex-wrap: wrap;
-  margin-right: -0.5rem;
-  margin-left: -0.5rem;
-}
-
-.c2 {
-  background-color: rgb(216,216,216);
-  margin: 0;
-  height: 0.0625rem;
-}
-
-.c1 {
-  margin-top: 0.25rem;
-  margin-bottom: 1rem;
-}
-
-.c0 + div:empty,
-.c0 + form:empty {
-  margin-bottom: 2.5rem;
-}
-
-<div
-    className="c0 c1"
->
     <div
-        className="c2 c3"
+        className="c4 c5"
+    >
+        <div
+            className="c6 c7"
             height="0.0625rem"
         />
+    </div>
 </div>,
   <div />,
 ]
@@ -196,10 +201,40 @@ Array [
   font-size: 0.8125rem;
 }
 
+.c7 {
+  box-sizing: border-box;
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: -ms-flexbox;
+  display: flex;
+  -webkit-flex: 0 1 auto;
+  -ms-flex: 0 1 auto;
+  flex: 0 1 auto;
+  -webkit-flex-direction: row;
+  -ms-flex-direction: row;
+  flex-direction: row;
+  -webkit-flex-wrap: wrap;
+  -ms-flex-wrap: wrap;
+  flex-wrap: wrap;
+  margin-right: -0.5rem;
+  margin-left: -0.5rem;
+}
+
+.c6 {
+  background-color: rgb(216,216,216);
+  margin: 0;
+  height: 0.0625rem;
+}
+
 .c1 {
   margin-right: 0.25rem;
 }
 
+.c5 {
+  margin-top: 0.25rem;
+  margin-bottom: 1rem;
+}
+
 .c0 {
   display: -webkit-box;
   display: -webkit-flex;
@@ -249,9 +284,18 @@ Array [
   flex-basis: 100%;
 }
 
+.c4 + div:empty,
+.c4 + form:empty {
+  margin-bottom: 2.5rem;
+}
+
 <div
-    className="c0"
+    className=""
+    onClick={false}
 >
+    <div
+        className="c0"
+    >
         <div
             className="c1"
         >
@@ -326,49 +370,15 @@ Array [
         >
             Metadata
         </small>
-</div>,
+    </div>
-  .c3 {
-  box-sizing: border-box;
-  display: -webkit-box;
-  display: -webkit-flex;
-  display: -ms-flexbox;
-  display: flex;
-  -webkit-flex: 0 1 auto;
-  -ms-flex: 0 1 auto;
-  flex: 0 1 auto;
-  -webkit-flex-direction: row;
-  -ms-flex-direction: row;
-  flex-direction: row;
-  -webkit-flex-wrap: wrap;
-  -ms-flex-wrap: wrap;
-  flex-wrap: wrap;
-  margin-right: -0.5rem;
-  margin-left: -0.5rem;
-}
-
-.c2 {
-  background-color: rgb(216,216,216);
-  margin: 0;
-  height: 0.0625rem;
-}
-
-.c1 {
-  margin-top: 0.25rem;
-  margin-bottom: 1rem;
-}
-
-.c0 + div:empty,
-.c0 + form:empty {
-  margin-bottom: 2.5rem;
-}
-
-<div
-    className="c0 c1"
->
     <div
-        className="c2 c3"
+        className="c4 c5"
+    >
+        <div
+            className="c6 c7"
             height="0.0625rem"
         />
+    </div>
 </div>,
   .c3 {
   color: rgba(73,73,73,1);
@@ -1713,10 +1723,40 @@ Array [
   font-size: 0.8125rem;
 }
 
+.c7 {
+  box-sizing: border-box;
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: -ms-flexbox;
+  display: flex;
+  -webkit-flex: 0 1 auto;
+  -ms-flex: 0 1 auto;
+  flex: 0 1 auto;
+  -webkit-flex-direction: row;
+  -ms-flex-direction: row;
+  flex-direction: row;
+  -webkit-flex-wrap: wrap;
+  -ms-flex-wrap: wrap;
+  flex-wrap: wrap;
+  margin-right: -0.5rem;
+  margin-left: -0.5rem;
+}
+
+.c6 {
+  background-color: rgb(216,216,216);
+  margin: 0;
+  height: 0.0625rem;
+}
+
 .c1 {
   margin-right: 0.25rem;
 }
 
+.c5 {
+  margin-top: 0.25rem;
+  margin-bottom: 1rem;
+}
+
 .c0 {
   display: -webkit-box;
   display: -webkit-flex;
@@ -1766,9 +1806,18 @@ Array [
   flex-basis: 100%;
 }
 
+.c4 + div:empty,
+.c4 + form:empty {
+  margin-bottom: 2.5rem;
+}
+
 <div
-    className="c0"
+    className=""
+    onClick={false}
 >
+    <div
+        className="c0"
+    >
         <div
             className="c1"
         >
@@ -1843,49 +1892,15 @@ Array [
         >
             Metadata
         </small>
-</div>,
+    </div>
-  .c3 {
-  box-sizing: border-box;
-  display: -webkit-box;
-  display: -webkit-flex;
-  display: -ms-flexbox;
-  display: flex;
-  -webkit-flex: 0 1 auto;
-  -ms-flex: 0 1 auto;
-  flex: 0 1 auto;
-  -webkit-flex-direction: row;
-  -ms-flex-direction: row;
-  flex-direction: row;
-  -webkit-flex-wrap: wrap;
-  -ms-flex-wrap: wrap;
-  flex-wrap: wrap;
-  margin-right: -0.5rem;
-  margin-left: -0.5rem;
-}
-
-.c2 {
-  background-color: rgb(216,216,216);
-  margin: 0;
-  height: 0.0625rem;
-}
-
-.c1 {
-  margin-top: 0.25rem;
-  margin-bottom: 1rem;
-}
-
-.c0 + div:empty,
-.c0 + form:empty {
-  margin-bottom: 2.5rem;
-}
-
-<div
-    className="c0 c1"
->
     <div
-        className="c2 c3"
+        className="c4 c5"
+    >
+        <div
+            className="c6 c7"
             height="0.0625rem"
         />
+    </div>
 </div>,
   .c3 {
   color: rgba(73,73,73,1);
@@ -2210,10 +2225,40 @@ Array [
   font-size: 0.8125rem;
 }
 
+.c7 {
+  box-sizing: border-box;
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: -ms-flexbox;
+  display: flex;
+  -webkit-flex: 0 1 auto;
+  -ms-flex: 0 1 auto;
+  flex: 0 1 auto;
+  -webkit-flex-direction: row;
+  -ms-flex-direction: row;
+  flex-direction: row;
+  -webkit-flex-wrap: wrap;
+  -ms-flex-wrap: wrap;
+  flex-wrap: wrap;
+  margin-right: -0.5rem;
+  margin-left: -0.5rem;
+}
+
+.c6 {
+  background-color: rgb(216,216,216);
+  margin: 0;
+  height: 0.0625rem;
+}
+
 .c1 {
   margin-right: 0.25rem;
 }
 
+.c5 {
+  margin-top: 0.25rem;
+  margin-bottom: 1rem;
+}
+
 .c0 {
   display: -webkit-box;
   display: -webkit-flex;
@@ -2263,9 +2308,18 @@ Array [
   flex-basis: 100%;
 }
 
+.c4 + div:empty,
+.c4 + form:empty {
+  margin-bottom: 2.5rem;
+}
+
 <div
-    className="c0"
+    className=""
+    onClick={undefined}
 >
+    <div
+        className="c0"
+    >
         <div
             className="c1"
         >
@@ -2340,49 +2394,15 @@ Array [
         >
             Metadata
         </small>
-</div>,
+    </div>
-  .c3 {
-  box-sizing: border-box;
-  display: -webkit-box;
-  display: -webkit-flex;
-  display: -ms-flexbox;
-  display: flex;
-  -webkit-flex: 0 1 auto;
-  -ms-flex: 0 1 auto;
-  flex: 0 1 auto;
-  -webkit-flex-direction: row;
-  -ms-flex-direction: row;
-  flex-direction: row;
-  -webkit-flex-wrap: wrap;
-  -ms-flex-wrap: wrap;
-  flex-wrap: wrap;
-  margin-right: -0.5rem;
-  margin-left: -0.5rem;
-}
-
-.c2 {
-  background-color: rgb(216,216,216);
-  margin: 0;
-  height: 0.0625rem;
-}
-
-.c1 {
-  margin-top: 0.25rem;
-  margin-bottom: 1rem;
-}
-
-.c0 + div:empty,
-.c0 + form:empty {
-  margin-bottom: 2.5rem;
-}
-
-<div
-    className="c0 c1"
->
     <div
-        className="c2 c3"
+        className="c4 c5"
+    >
+        <div
+            className="c6 c7"
             height="0.0625rem"
         />
+    </div>
 </div>,
   .c21 {
   font-family: sans-serif;
@@ -4473,10 +4493,40 @@ Array [
   font-size: 0.8125rem;
 }
 
+.c7 {
+  box-sizing: border-box;
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: -ms-flexbox;
+  display: flex;
+  -webkit-flex: 0 1 auto;
+  -ms-flex: 0 1 auto;
+  flex: 0 1 auto;
+  -webkit-flex-direction: row;
+  -ms-flex-direction: row;
+  flex-direction: row;
+  -webkit-flex-wrap: wrap;
+  -ms-flex-wrap: wrap;
+  flex-wrap: wrap;
+  margin-right: -0.5rem;
+  margin-left: -0.5rem;
+}
+
+.c6 {
+  background-color: rgb(216,216,216);
+  margin: 0;
+  height: 0.0625rem;
+}
+
 .c1 {
   margin-right: 0.25rem;
 }
 
+.c5 {
+  margin-top: 0.25rem;
+  margin-bottom: 1rem;
+}
+
 .c0 {
   display: -webkit-box;
   display: -webkit-flex;
@@ -4526,9 +4576,18 @@ Array [
   flex-basis: 100%;
 }
 
+.c4 + div:empty,
+.c4 + form:empty {
+  margin-bottom: 2.5rem;
+}
+
 <div
-    className="c0"
+    className=""
+    onClick={false}
 >
+    <div
+        className="c0"
+    >
         <div
             className="c1"
         >
@@ -4603,49 +4662,15 @@ Array [
         >
             Metadata
         </small>
-</div>,
+    </div>
-  .c3 {
-  box-sizing: border-box;
-  display: -webkit-box;
-  display: -webkit-flex;
-  display: -ms-flexbox;
-  display: flex;
-  -webkit-flex: 0 1 auto;
-  -ms-flex: 0 1 auto;
-  flex: 0 1 auto;
-  -webkit-flex-direction: row;
-  -ms-flex-direction: row;
-  flex-direction: row;
-  -webkit-flex-wrap: wrap;
-  -ms-flex-wrap: wrap;
-  flex-wrap: wrap;
-  margin-right: -0.5rem;
-  margin-left: -0.5rem;
-}
-
-.c2 {
-  background-color: rgb(216,216,216);
-  margin: 0;
-  height: 0.0625rem;
-}
-
-.c1 {
-  margin-top: 0.25rem;
-  margin-bottom: 1rem;
-}
-
-.c0 + div:empty,
-.c0 + form:empty {
-  margin-bottom: 2.5rem;
-}
-
-<div
-    className="c0 c1"
->
     <div
-        className="c2 c3"
+        className="c4 c5"
+    >
+        <div
+            className="c6 c7"
             height="0.0625rem"
         />
+    </div>
 </div>,
   .c3 {
   color: rgba(73,73,73,1);

packages/my-joy-beta/src/containers/create-instance/__tests__/__snapshots__/networks.spec.js.snap

@@ -9,10 +9,40 @@ Array [
   font-size: 0.8125rem;
 }
 
+.c7 {
+  box-sizing: border-box;
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: -ms-flexbox;
+  display: flex;
+  -webkit-flex: 0 1 auto;
+  -ms-flex: 0 1 auto;
+  flex: 0 1 auto;
+  -webkit-flex-direction: row;
+  -ms-flex-direction: row;
+  flex-direction: row;
+  -webkit-flex-wrap: wrap;
+  -ms-flex-wrap: wrap;
+  flex-wrap: wrap;
+  margin-right: -0.5rem;
+  margin-left: -0.5rem;
+}
+
+.c6 {
+  background-color: rgb(216,216,216);
+  margin: 0;
+  height: 0.0625rem;
+}
+
 .c1 {
   margin-right: 0.25rem;
 }
 
+.c5 {
+  margin-top: 0.25rem;
+  margin-bottom: 1rem;
+}
+
 .c0 {
   display: -webkit-box;
   display: -webkit-flex;
@@ -62,9 +92,18 @@ Array [
   flex-basis: 100%;
 }
 
+.c4 + div:empty,
+.c4 + form:empty {
+  margin-bottom: 2.5rem;
+}
+
 <div
-    className="c0"
+    className=""
+    onClick={undefined}
 >
+    <div
+        className="c0"
+    >
         <div
             className="c1"
         >
@@ -111,49 +150,15 @@ Array [
         >
             Networks
         </small>
-</div>,
+    </div>
-  .c3 {
-  box-sizing: border-box;
-  display: -webkit-box;
-  display: -webkit-flex;
-  display: -ms-flexbox;
-  display: flex;
-  -webkit-flex: 0 1 auto;
-  -ms-flex: 0 1 auto;
-  flex: 0 1 auto;
-  -webkit-flex-direction: row;
-  -ms-flex-direction: row;
-  flex-direction: row;
-  -webkit-flex-wrap: wrap;
-  -ms-flex-wrap: wrap;
-  flex-wrap: wrap;
-  margin-right: -0.5rem;
-  margin-left: -0.5rem;
-}
-
-.c2 {
-  background-color: rgb(216,216,216);
-  margin: 0;
-  height: 0.0625rem;
-}
-
-.c1 {
-  margin-top: 0.25rem;
-  margin-bottom: 1rem;
-}
-
-.c0 + div:empty,
-.c0 + form:empty {
-  margin-bottom: 2.5rem;
-}
-
-<div
-    className="c0 c1"
->
     <div
-        className="c2 c3"
+        className="c4 c5"
+    >
+        <div
+            className="c6 c7"
             height="0.0625rem"
         />
+    </div>
 </div>,
   <form />,
   .c0 {
@@ -175,10 +180,40 @@ Array [
   font-size: 0.8125rem;
 }
 
+.c7 {
+  box-sizing: border-box;
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: -ms-flexbox;
+  display: flex;
+  -webkit-flex: 0 1 auto;
+  -ms-flex: 0 1 auto;
+  flex: 0 1 auto;
+  -webkit-flex-direction: row;
+  -ms-flex-direction: row;
+  flex-direction: row;
+  -webkit-flex-wrap: wrap;
+  -ms-flex-wrap: wrap;
+  flex-wrap: wrap;
+  margin-right: -0.5rem;
+  margin-left: -0.5rem;
+}
+
+.c6 {
+  background-color: rgb(216,216,216);
+  margin: 0;
+  height: 0.0625rem;
+}
+
 .c1 {
   margin-right: 0.25rem;
 }
 
+.c5 {
+  margin-top: 0.25rem;
+  margin-bottom: 1rem;
+}
+
 .c0 {
   display: -webkit-box;
   display: -webkit-flex;
@@ -228,9 +263,18 @@ Array [
   flex-basis: 100%;
 }
 
+.c4 + div:empty,
+.c4 + form:empty {
+  margin-bottom: 2.5rem;
+}
+
 <div
-    className="c0"
+    className=""
+    onClick={undefined}
 >
+    <div
+        className="c0"
+    >
         <div
             className="c1"
         >
@@ -277,49 +321,15 @@ Array [
         >
             Networks
         </small>
-</div>,
+    </div>
-  .c3 {
-  box-sizing: border-box;
-  display: -webkit-box;
-  display: -webkit-flex;
-  display: -ms-flexbox;
-  display: flex;
-  -webkit-flex: 0 1 auto;
-  -ms-flex: 0 1 auto;
-  flex: 0 1 auto;
-  -webkit-flex-direction: row;
-  -ms-flex-direction: row;
-  flex-direction: row;
-  -webkit-flex-wrap: wrap;
-  -ms-flex-wrap: wrap;
-  flex-wrap: wrap;
-  margin-right: -0.5rem;
-  margin-left: -0.5rem;
-}
-
-.c2 {
-  background-color: rgb(216,216,216);
-  margin: 0;
-  height: 0.0625rem;
-}
-
-.c1 {
-  margin-top: 0.25rem;
-  margin-bottom: 1rem;
-}
-
-.c0 + div:empty,
-.c0 + form:empty {
-  margin-bottom: 2.5rem;
-}
-
-<div
-    className="c0 c1"
->
     <div
-        className="c2 c3"
+        className="c4 c5"
+    >
+        <div
+            className="c6 c7"
             height="0.0625rem"
         />
+    </div>
 </div>,
   .c0 {
   margin-bottom: 2rem;
@@ -340,10 +350,40 @@ Array [
   font-size: 0.8125rem;
 }
 
+.c7 {
+  box-sizing: border-box;
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: -ms-flexbox;
+  display: flex;
+  -webkit-flex: 0 1 auto;
+  -ms-flex: 0 1 auto;
+  flex: 0 1 auto;
+  -webkit-flex-direction: row;
+  -ms-flex-direction: row;
+  flex-direction: row;
+  -webkit-flex-wrap: wrap;
+  -ms-flex-wrap: wrap;
+  flex-wrap: wrap;
+  margin-right: -0.5rem;
+  margin-left: -0.5rem;
+}
+
+.c6 {
+  background-color: rgb(216,216,216);
+  margin: 0;
+  height: 0.0625rem;
+}
+
 .c1 {
   margin-right: 0.25rem;
 }
 
+.c5 {
+  margin-top: 0.25rem;
+  margin-bottom: 1rem;
+}
+
 .c0 {
   display: -webkit-box;
   display: -webkit-flex;
@@ -393,9 +433,18 @@ Array [
   flex-basis: 100%;
 }
 
+.c4 + div:empty,
+.c4 + form:empty {
+  margin-bottom: 2.5rem;
+}
+
 <div
-    className="c0"
+    className=""
+    onClick={false}
 >
+    <div
+        className="c0"
+    >
         <div
             className="c1"
         >
@@ -442,49 +491,15 @@ Array [
         >
             Networks
         </small>
-</div>,
+    </div>
-  .c3 {
-  box-sizing: border-box;
-  display: -webkit-box;
-  display: -webkit-flex;
-  display: -ms-flexbox;
-  display: flex;
-  -webkit-flex: 0 1 auto;
-  -ms-flex: 0 1 auto;
-  flex: 0 1 auto;
-  -webkit-flex-direction: row;
-  -ms-flex-direction: row;
-  flex-direction: row;
-  -webkit-flex-wrap: wrap;
-  -ms-flex-wrap: wrap;
-  flex-wrap: wrap;
-  margin-right: -0.5rem;
-  margin-left: -0.5rem;
-}
-
-.c2 {
-  background-color: rgb(216,216,216);
-  margin: 0;
-  height: 0.0625rem;
-}
-
-.c1 {
-  margin-top: 0.25rem;
-  margin-bottom: 1rem;
-}
-
-.c0 + div:empty,
-.c0 + form:empty {
-  margin-bottom: 2.5rem;
-}
-
-<div
-    className="c0 c1"
->
     <div
-        className="c2 c3"
+        className="c4 c5"
+    >
+        <div
+            className="c6 c7"
             height="0.0625rem"
         />
+    </div>
 </div>,
   .c3 {
   color: rgba(73,73,73,1);
@@ -852,10 +867,40 @@ Array [
   font-size: 0.8125rem;
 }
 
+.c7 {
+  box-sizing: border-box;
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: -ms-flexbox;
+  display: flex;
+  -webkit-flex: 0 1 auto;
+  -ms-flex: 0 1 auto;
+  flex: 0 1 auto;
+  -webkit-flex-direction: row;
+  -ms-flex-direction: row;
+  flex-direction: row;
+  -webkit-flex-wrap: wrap;
+  -ms-flex-wrap: wrap;
+  flex-wrap: wrap;
+  margin-right: -0.5rem;
+  margin-left: -0.5rem;
+}
+
+.c6 {
+  background-color: rgb(216,216,216);
+  margin: 0;
+  height: 0.0625rem;
+}
+
 .c1 {
   margin-right: 0.25rem;
 }
 
+.c5 {
+  margin-top: 0.25rem;
+  margin-bottom: 1rem;
+}
+
 .c0 {
   display: -webkit-box;
   display: -webkit-flex;
@@ -905,9 +950,18 @@ Array [
   flex-basis: 100%;
 }
 
+.c4 + div:empty,
+.c4 + form:empty {
+  margin-bottom: 2.5rem;
+}
+
 <div
-    className="c0"
+    className=""
+    onClick={undefined}
 >
+    <div
+        className="c0"
+    >
         <div
             className="c1"
         >
@@ -954,49 +1008,15 @@ Array [
         >
             Networks
         </small>
-</div>,
+    </div>
-  .c3 {
-  box-sizing: border-box;
-  display: -webkit-box;
-  display: -webkit-flex;
-  display: -ms-flexbox;
-  display: flex;
-  -webkit-flex: 0 1 auto;
-  -ms-flex: 0 1 auto;
-  flex: 0 1 auto;
-  -webkit-flex-direction: row;
-  -ms-flex-direction: row;
-  flex-direction: row;
-  -webkit-flex-wrap: wrap;
-  -ms-flex-wrap: wrap;
-  flex-wrap: wrap;
-  margin-right: -0.5rem;
-  margin-left: -0.5rem;
-}
-
-.c2 {
-  background-color: rgb(216,216,216);
-  margin: 0;
-  height: 0.0625rem;
-}
-
-.c1 {
-  margin-top: 0.25rem;
-  margin-bottom: 1rem;
-}
-
-.c0 + div:empty,
-.c0 + form:empty {
-  margin-bottom: 2.5rem;
-}
-
-<div
-    className="c0 c1"
->
     <div
-        className="c2 c3"
+        className="c4 c5"
+    >
+        <div
+            className="c6 c7"
             height="0.0625rem"
         />
+    </div>
 </div>,
   .c7 {
   color: rgba(73,73,73,1);
@@ -1353,10 +1373,40 @@ Array [
   font-size: 0.8125rem;
 }
 
+.c7 {
+  box-sizing: border-box;
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: -ms-flexbox;
+  display: flex;
+  -webkit-flex: 0 1 auto;
+  -ms-flex: 0 1 auto;
+  flex: 0 1 auto;
+  -webkit-flex-direction: row;
+  -ms-flex-direction: row;
+  flex-direction: row;
+  -webkit-flex-wrap: wrap;
+  -ms-flex-wrap: wrap;
+  flex-wrap: wrap;
+  margin-right: -0.5rem;
+  margin-left: -0.5rem;
+}
+
+.c6 {
+  background-color: rgb(216,216,216);
+  margin: 0;
+  height: 0.0625rem;
+}
+
 .c1 {
   margin-right: 0.25rem;
 }
 
+.c5 {
+  margin-top: 0.25rem;
+  margin-bottom: 1rem;
+}
+
 .c0 {
   display: -webkit-box;
   display: -webkit-flex;
@@ -1406,9 +1456,18 @@ Array [
   flex-basis: 100%;
 }
 
+.c4 + div:empty,
+.c4 + form:empty {
+  margin-bottom: 2.5rem;
+}
+
 <div
-    className="c0"
+    className=""
+    onClick={false}
 >
+    <div
+        className="c0"
+    >
         <div
             className="c1"
         >
@@ -1455,49 +1514,15 @@ Array [
         >
             Networks
         </small>
-</div>,
+    </div>
-  .c3 {
-  box-sizing: border-box;
-  display: -webkit-box;
-  display: -webkit-flex;
-  display: -ms-flexbox;
-  display: flex;
-  -webkit-flex: 0 1 auto;
-  -ms-flex: 0 1 auto;
-  flex: 0 1 auto;
-  -webkit-flex-direction: row;
-  -ms-flex-direction: row;
-  flex-direction: row;
-  -webkit-flex-wrap: wrap;
-  -ms-flex-wrap: wrap;
-  flex-wrap: wrap;
-  margin-right: -0.5rem;
-  margin-left: -0.5rem;
-}
-
-.c2 {
-  background-color: rgb(216,216,216);
-  margin: 0;
-  height: 0.0625rem;
-}
-
-.c1 {
-  margin-top: 0.25rem;
-  margin-bottom: 1rem;
-}
-
-.c0 + div:empty,
-.c0 + form:empty {
-  margin-bottom: 2.5rem;
-}
-
-<div
-    className="c0 c1"
->
     <div
-        className="c2 c3"
+        className="c4 c5"
+    >
+        <div
+            className="c6 c7"
             height="0.0625rem"
         />
+    </div>
 </div>,
   .c3 {
   color: rgba(73,73,73,1);
@@ -3012,10 +3037,40 @@ Array [
   font-size: 0.8125rem;
 }
 
+.c7 {
+  box-sizing: border-box;
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: -ms-flexbox;
+  display: flex;
+  -webkit-flex: 0 1 auto;
+  -ms-flex: 0 1 auto;
+  flex: 0 1 auto;
+  -webkit-flex-direction: row;
+  -ms-flex-direction: row;
+  flex-direction: row;
+  -webkit-flex-wrap: wrap;
+  -ms-flex-wrap: wrap;
+  flex-wrap: wrap;
+  margin-right: -0.5rem;
+  margin-left: -0.5rem;
+}
+
+.c6 {
+  background-color: rgb(216,216,216);
+  margin: 0;
+  height: 0.0625rem;
+}
+
 .c1 {
   margin-right: 0.25rem;
 }
 
+.c5 {
+  margin-top: 0.25rem;
+  margin-bottom: 1rem;
+}
+
 .c0 {
   display: -webkit-box;
   display: -webkit-flex;
@@ -3065,9 +3120,18 @@ Array [
   flex-basis: 100%;
 }
 
+.c4 + div:empty,
+.c4 + form:empty {
+  margin-bottom: 2.5rem;
+}
+
 <div
-    className="c0"
+    className=""
+    onClick={false}
 >
+    <div
+        className="c0"
+    >
         <div
             className="c1"
         >
@@ -3114,49 +3178,15 @@ Array [
         >
             Networks
         </small>
-</div>,
+    </div>
-  .c3 {
-  box-sizing: border-box;
-  display: -webkit-box;
-  display: -webkit-flex;
-  display: -ms-flexbox;
-  display: flex;
-  -webkit-flex: 0 1 auto;
-  -ms-flex: 0 1 auto;
-  flex: 0 1 auto;
-  -webkit-flex-direction: row;
-  -ms-flex-direction: row;
-  flex-direction: row;
-  -webkit-flex-wrap: wrap;
-  -ms-flex-wrap: wrap;
-  flex-wrap: wrap;
-  margin-right: -0.5rem;
-  margin-left: -0.5rem;
-}
-
-.c2 {
-  background-color: rgb(216,216,216);
-  margin: 0;
-  height: 0.0625rem;
-}
-
-.c1 {
-  margin-top: 0.25rem;
-  margin-bottom: 1rem;
-}
-
-.c0 + div:empty,
-.c0 + form:empty {
-  margin-bottom: 2.5rem;
-}
-
-<div
-    className="c0 c1"
->
     <div
-        className="c2 c3"
+        className="c4 c5"
+    >
+        <div
+            className="c6 c7"
             height="0.0625rem"
         />
+    </div>
 </div>,
   .c0 {
   color: rgba(73,73,73,1);

packages/my-joy-beta/src/containers/create-instance/__tests__/__snapshots__/tag.spec.js.snap

@@ -9,10 +9,40 @@ Array [
   font-size: 0.8125rem;
 }
 
+.c7 {
+  box-sizing: border-box;
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: -ms-flexbox;
+  display: flex;
+  -webkit-flex: 0 1 auto;
+  -ms-flex: 0 1 auto;
+  flex: 0 1 auto;
+  -webkit-flex-direction: row;
+  -ms-flex-direction: row;
+  flex-direction: row;
+  -webkit-flex-wrap: wrap;
+  -ms-flex-wrap: wrap;
+  flex-wrap: wrap;
+  margin-right: -0.5rem;
+  margin-left: -0.5rem;
+}
+
+.c6 {
+  background-color: rgb(216,216,216);
+  margin: 0;
+  height: 0.0625rem;
+}
+
 .c1 {
   margin-right: 0.25rem;
 }
 
+.c5 {
+  margin-top: 0.25rem;
+  margin-bottom: 1rem;
+}
+
 .c0 {
   display: -webkit-box;
   display: -webkit-flex;
@@ -62,9 +92,18 @@ Array [
   flex-basis: 100%;
 }
 
+.c4 + div:empty,
+.c4 + form:empty {
+  margin-bottom: 2.5rem;
+}
+
 <div
-    className="c0"
+    className=""
+    onClick={undefined}
 >
+    <div
+        className="c0"
+    >
         <div
             className="c1"
         >
@@ -126,49 +165,15 @@ Array [
         >
             Tags
         </small>
-</div>,
+    </div>
-  .c3 {
-  box-sizing: border-box;
-  display: -webkit-box;
-  display: -webkit-flex;
-  display: -ms-flexbox;
-  display: flex;
-  -webkit-flex: 0 1 auto;
-  -ms-flex: 0 1 auto;
-  flex: 0 1 auto;
-  -webkit-flex-direction: row;
-  -ms-flex-direction: row;
-  flex-direction: row;
-  -webkit-flex-wrap: wrap;
-  -ms-flex-wrap: wrap;
-  flex-wrap: wrap;
-  margin-right: -0.5rem;
-  margin-left: -0.5rem;
-}
-
-.c2 {
-  background-color: rgb(216,216,216);
-  margin: 0;
-  height: 0.0625rem;
-}
-
-.c1 {
-  margin-top: 0.25rem;
-  margin-bottom: 1rem;
-}
-
-.c0 + div:empty,
-.c0 + form:empty {
-  margin-bottom: 2.5rem;
-}
-
-<div
-    className="c0 c1"
->
     <div
-        className="c2 c3"
+        className="c4 c5"
+    >
+        <div
+            className="c6 c7"
             height="0.0625rem"
         />
+    </div>
 </div>,
   <div />,
 ]
@@ -183,10 +188,40 @@ Array [
   font-size: 0.8125rem;
 }
 
+.c7 {
+  box-sizing: border-box;
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: -ms-flexbox;
+  display: flex;
+  -webkit-flex: 0 1 auto;
+  -ms-flex: 0 1 auto;
+  flex: 0 1 auto;
+  -webkit-flex-direction: row;
+  -ms-flex-direction: row;
+  flex-direction: row;
+  -webkit-flex-wrap: wrap;
+  -ms-flex-wrap: wrap;
+  flex-wrap: wrap;
+  margin-right: -0.5rem;
+  margin-left: -0.5rem;
+}
+
+.c6 {
+  background-color: rgb(216,216,216);
+  margin: 0;
+  height: 0.0625rem;
+}
+
 .c1 {
   margin-right: 0.25rem;
 }
 
+.c5 {
+  margin-top: 0.25rem;
+  margin-bottom: 1rem;
+}
+
 .c0 {
   display: -webkit-box;
   display: -webkit-flex;
@@ -236,9 +271,18 @@ Array [
   flex-basis: 100%;
 }
 
+.c4 + div:empty,
+.c4 + form:empty {
+  margin-bottom: 2.5rem;
+}
+
 <div
-    className="c0"
+    className=""
+    onClick={false}
 >
+    <div
+        className="c0"
+    >
         <div
             className="c1"
         >
@@ -300,49 +344,15 @@ Array [
         >
             Tags
         </small>
-</div>,
+    </div>
-  .c3 {
-  box-sizing: border-box;
-  display: -webkit-box;
-  display: -webkit-flex;
-  display: -ms-flexbox;
-  display: flex;
-  -webkit-flex: 0 1 auto;
-  -ms-flex: 0 1 auto;
-  flex: 0 1 auto;
-  -webkit-flex-direction: row;
-  -ms-flex-direction: row;
-  flex-direction: row;
-  -webkit-flex-wrap: wrap;
-  -ms-flex-wrap: wrap;
-  flex-wrap: wrap;
-  margin-right: -0.5rem;
-  margin-left: -0.5rem;
-}
-
-.c2 {
-  background-color: rgb(216,216,216);
-  margin: 0;
-  height: 0.0625rem;
-}
-
-.c1 {
-  margin-top: 0.25rem;
-  margin-bottom: 1rem;
-}
-
-.c0 + div:empty,
-.c0 + form:empty {
-  margin-bottom: 2.5rem;
-}
-
-<div
-    className="c0 c1"
->
     <div
-        className="c2 c3"
+        className="c4 c5"
+    >
+        <div
+            className="c6 c7"
             height="0.0625rem"
         />
+    </div>
 </div>,
   .c3 {
   color: rgba(73,73,73,1);
@@ -1684,10 +1694,40 @@ Array [
   font-size: 0.8125rem;
 }
 
+.c7 {
+  box-sizing: border-box;
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: -ms-flexbox;
+  display: flex;
+  -webkit-flex: 0 1 auto;
+  -ms-flex: 0 1 auto;
+  flex: 0 1 auto;
+  -webkit-flex-direction: row;
+  -ms-flex-direction: row;
+  flex-direction: row;
+  -webkit-flex-wrap: wrap;
+  -ms-flex-wrap: wrap;
+  flex-wrap: wrap;
+  margin-right: -0.5rem;
+  margin-left: -0.5rem;
+}
+
+.c6 {
+  background-color: rgb(216,216,216);
+  margin: 0;
+  height: 0.0625rem;
+}
+
 .c1 {
   margin-right: 0.25rem;
 }
 
+.c5 {
+  margin-top: 0.25rem;
+  margin-bottom: 1rem;
+}
+
 .c0 {
   display: -webkit-box;
   display: -webkit-flex;
@@ -1737,9 +1777,18 @@ Array [
   flex-basis: 100%;
 }
 
+.c4 + div:empty,
+.c4 + form:empty {
+  margin-bottom: 2.5rem;
+}
+
 <div
-    className="c0"
+    className=""
+    onClick={false}
 >
+    <div
+        className="c0"
+    >
         <div
             className="c1"
         >
@@ -1801,49 +1850,15 @@ Array [
         >
             Tags
         </small>
-</div>,
+    </div>
-  .c3 {
-  box-sizing: border-box;
-  display: -webkit-box;
-  display: -webkit-flex;
-  display: -ms-flexbox;
-  display: flex;
-  -webkit-flex: 0 1 auto;
-  -ms-flex: 0 1 auto;
-  flex: 0 1 auto;
-  -webkit-flex-direction: row;
-  -ms-flex-direction: row;
-  flex-direction: row;
-  -webkit-flex-wrap: wrap;
-  -ms-flex-wrap: wrap;
-  flex-wrap: wrap;
-  margin-right: -0.5rem;
-  margin-left: -0.5rem;
-}
-
-.c2 {
-  background-color: rgb(216,216,216);
-  margin: 0;
-  height: 0.0625rem;
-}
-
-.c1 {
-  margin-top: 0.25rem;
-  margin-bottom: 1rem;
-}
-
-.c0 + div:empty,
-.c0 + form:empty {
-  margin-bottom: 2.5rem;
-}
-
-<div
-    className="c0 c1"
->
     <div
-        className="c2 c3"
+        className="c4 c5"
+    >
+        <div
+            className="c6 c7"
             height="0.0625rem"
         />
+    </div>
 </div>,
   .c3 {
   color: rgba(73,73,73,1);
@@ -2192,10 +2207,40 @@ Array [
   font-size: 0.8125rem;
 }
 
+.c7 {
+  box-sizing: border-box;
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: -ms-flexbox;
+  display: flex;
+  -webkit-flex: 0 1 auto;
+  -ms-flex: 0 1 auto;
+  flex: 0 1 auto;
+  -webkit-flex-direction: row;
+  -ms-flex-direction: row;
+  flex-direction: row;
+  -webkit-flex-wrap: wrap;
+  -ms-flex-wrap: wrap;
+  flex-wrap: wrap;
+  margin-right: -0.5rem;
+  margin-left: -0.5rem;
+}
+
+.c6 {
+  background-color: rgb(216,216,216);
+  margin: 0;
+  height: 0.0625rem;
+}
+
 .c1 {
   margin-right: 0.25rem;
 }
 
+.c5 {
+  margin-top: 0.25rem;
+  margin-bottom: 1rem;
+}
+
 .c0 {
   display: -webkit-box;
   display: -webkit-flex;
@@ -2245,9 +2290,18 @@ Array [
   flex-basis: 100%;
 }
 
+.c4 + div:empty,
+.c4 + form:empty {
+  margin-bottom: 2.5rem;
+}
+
 <div
-    className="c0"
+    className=""
+    onClick={undefined}
 >
+    <div
+        className="c0"
+    >
         <div
             className="c1"
         >
@@ -2309,49 +2363,15 @@ Array [
         >
             Tags
         </small>
-</div>,
+    </div>
-  .c3 {
-  box-sizing: border-box;
-  display: -webkit-box;
-  display: -webkit-flex;
-  display: -ms-flexbox;
-  display: flex;
-  -webkit-flex: 0 1 auto;
-  -ms-flex: 0 1 auto;
-  flex: 0 1 auto;
-  -webkit-flex-direction: row;
-  -ms-flex-direction: row;
-  flex-direction: row;
-  -webkit-flex-wrap: wrap;
-  -ms-flex-wrap: wrap;
-  flex-wrap: wrap;
-  margin-right: -0.5rem;
-  margin-left: -0.5rem;
-}
-
-.c2 {
-  background-color: rgb(216,216,216);
-  margin: 0;
-  height: 0.0625rem;
-}
-
-.c1 {
-  margin-top: 0.25rem;
-  margin-bottom: 1rem;
-}
-
-.c0 + div:empty,
-.c0 + form:empty {
-  margin-bottom: 2.5rem;
-}
-
-<div
-    className="c0 c1"
->
     <div
-        className="c2 c3"
+        className="c4 c5"
+    >
+        <div
+            className="c6 c7"
             height="0.0625rem"
         />
+    </div>
 </div>,
   <div />,
 ]
@@ -2366,10 +2386,40 @@ Array [
   font-size: 0.8125rem;
 }
 
+.c7 {
+  box-sizing: border-box;
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: -ms-flexbox;
+  display: flex;
+  -webkit-flex: 0 1 auto;
+  -ms-flex: 0 1 auto;
+  flex: 0 1 auto;
+  -webkit-flex-direction: row;
+  -ms-flex-direction: row;
+  flex-direction: row;
+  -webkit-flex-wrap: wrap;
+  -ms-flex-wrap: wrap;
+  flex-wrap: wrap;
+  margin-right: -0.5rem;
+  margin-left: -0.5rem;
+}
+
+.c6 {
+  background-color: rgb(216,216,216);
+  margin: 0;
+  height: 0.0625rem;
+}
+
 .c1 {
   margin-right: 0.25rem;
 }
 
+.c5 {
+  margin-top: 0.25rem;
+  margin-bottom: 1rem;
+}
+
 .c0 {
   display: -webkit-box;
   display: -webkit-flex;
@@ -2419,9 +2469,18 @@ Array [
   flex-basis: 100%;
 }
 
+.c4 + div:empty,
+.c4 + form:empty {
+  margin-bottom: 2.5rem;
+}
+
 <div
-    className="c0"
+    className=""
+    onClick={false}
 >
+    <div
+        className="c0"
+    >
         <div
             className="c1"
         >
@@ -2483,49 +2542,15 @@ Array [
         >
             Tags
         </small>
-</div>,
+    </div>
-  .c3 {
-  box-sizing: border-box;
-  display: -webkit-box;
-  display: -webkit-flex;
-  display: -ms-flexbox;
-  display: flex;
-  -webkit-flex: 0 1 auto;
-  -ms-flex: 0 1 auto;
-  flex: 0 1 auto;
-  -webkit-flex-direction: row;
-  -ms-flex-direction: row;
-  flex-direction: row;
-  -webkit-flex-wrap: wrap;
-  -ms-flex-wrap: wrap;
-  flex-wrap: wrap;
-  margin-right: -0.5rem;
-  margin-left: -0.5rem;
-}
-
-.c2 {
-  background-color: rgb(216,216,216);
-  margin: 0;
-  height: 0.0625rem;
-}
-
-.c1 {
-  margin-top: 0.25rem;
-  margin-bottom: 1rem;
-}
-
-.c0 + div:empty,
-.c0 + form:empty {
-  margin-bottom: 2.5rem;
-}
-
-<div
-    className="c0 c1"
->
     <div
-        className="c2 c3"
+        className="c4 c5"
+    >
+        <div
+            className="c6 c7"
             height="0.0625rem"
         />
+    </div>
 </div>,
   .c3 {
   color: rgba(73,73,73,1);

packages/my-joy-beta/src/containers/create-instance/affinity.js

@@ -46,7 +46,12 @@ export const Affinity = ({
   rule
 }) => (
   <Fragment>
-    <Title icon={<AffinityIcon />}>Affinity</Title>
+    <Title
+      onClick={!expanded && !proceeded && handleEdit}
+      icon={<AffinityIcon />}
+    >
+      Affinity
+    </Title>
     {expanded ? (
       <Description>
         Control placement of instances on the physical servers. Design

packages/my-joy-beta/src/containers/create-instance/cns.js

@@ -54,7 +54,9 @@ const CNSContainer = ({
   loading
 }) => (
   <Fragment>
-    <Title icon={<CnsIcon />}>Container Name Service</Title>
+    <Title onClick={!expanded && !proceeded && handleEdit} icon={<CnsIcon />}>
+      Container Name Service
+    </Title>
     {expanded ? (
       <Description>
         Triton CNS is used to automatically update hostnames for your

packages/my-joy-beta/src/containers/create-instance/firewall.js

@@ -29,7 +29,12 @@ const Firewall = ({
   handleEdit
 }) => (
   <Fragment>
-    <Title icon={<FirewallIcon />}>Firewall</Title>
+    <Title
+      onClick={!expanded && !proceeded && handleEdit}
+      icon={<FirewallIcon />}
+    >
+      Firewall
+    </Title>
     {expanded ? (
       <Description>
         Cloud Firewall rules control traffic across instances. Enabling the
@@ -59,7 +64,8 @@ const Firewall = ({
                 tagRules={tagRules}
                 enabled={enabled}
               />
-            ) : null}
+            ) : null
+          }
         </ReduxForm>
       ) : null}
       {proceeded && !expanded ? (

packages/my-joy-beta/src/containers/create-instance/image.js

@@ -2,11 +2,13 @@ import React, { Fragment } from 'react';
 import { compose, graphql } from 'react-apollo';
 import ReduxForm from 'declarative-redux-form';
 import { connect } from 'react-redux';
+import { set } from 'react-redux-values';
 import get from 'lodash.get';
 
-import { InstanceTypeIcon } from 'joyent-ui-toolkit';
+import { InstanceTypeIcon, StatusLoader } from 'joyent-ui-toolkit';
-import Image from '@components/create-instance/image';
+import Image, { Preview } from '@components/create-instance/image';
 import Title from '@components/create-instance/title';
+import Description from '@components/create-instance/description';
 import imageData from '../../data/images-map.json';
 
 import getImages from '../../graphql/get-images.gql';
@@ -14,31 +16,58 @@ import getImages from '../../graphql/get-images.gql';
 const ImageContainer = ({
   expanded,
   image,
-  handleSubmit,
+  handleNext,
-  handleCancel,
+  handleEdit,
   loading,
   images,
   vms
 }) => (
   <Fragment>
-    <Title icon={<InstanceTypeIcon />}>Instance type and image</Title>
+    <Title
+      onClick={!expanded && !image && handleEdit}
+      icon={<InstanceTypeIcon />}
+    >
+      Instance type and image
+    </Title>
+    {expanded ? (
+      <Description>
+        Hardware virtual machines are generally used for non-containerized
+        applications. Infrastructure containers are generally for running any
+        Linux image on secure, bare metal containers.{' '}
+        <a
+          href="https://docs.joyent.com/private-cloud/images"
+          rel="noopener noreferrer"
+          target="_blank"
+        >
+          Read the docs
+        </a>
+      </Description>
+    ) : null}
     <ReduxForm
       form="create-instance-image"
       destroyOnUnmount={false}
       forceUnregisterOnUnmount={true}
-      onSubmit={handleSubmit}
+      onSubmit={handleNext}
     >
-      {props => (
+      {props =>
+        (loading && expanded) ? (
+          <StatusLoader />
+        ) : expanded ? (
           <Image
             {...props}
             isVmSelected={vms}
-          loading={loading}
             imageID={image}
             images={images}
-          expanded={expanded}
-          onCancel={handleCancel}
           />
-      )}
+        ) : image ? (
+          <Preview
+            isVmSelected={vms}
+            imageID={image}
+            images={images}
+            onEdit={handleEdit}
+          />
+        ) : null
+      }
     </ReduxForm>
   </Fragment>
 );
@@ -53,8 +82,12 @@ export default compose(
       };
     },
     (dispatch, { history }) => ({
-      handleSubmit: () => history.push(`/instances/~create/package`),
+      handleNext: () => {
-      handleCancel: () => history.push(`/instances/~create/image`)
+        dispatch(set({ name: 'create-instance-image-proceeded', value: true }));
+
+        return history.push(`/instances/~create/package`);
+      },
+      handleEdit: () => history.push(`/instances/~create/image`)
     })
   ),
   graphql(getImages, {

packages/my-joy-beta/src/containers/create-instance/index.js

@@ -5,6 +5,7 @@ import { Margin } from 'styled-components-spacing';
 import ReduxForm from 'declarative-redux-form';
 import { stopSubmit, destroy } from 'redux-form';
 import { connect } from 'react-redux';
+import { destroyAll } from 'react-redux-values';
 import { graphql, compose } from 'react-apollo';
 import intercept from 'apr-intercept';
 import constantCase from 'constant-case';
@@ -28,43 +29,59 @@ import parseError from '@state/parse-error';
 
 const CREATE_FORM = 'CREATE-INSTANCE';
 
-const CreateInstance = ({ step, handleSubmit, ...props }) => (
+const CreateInstance = ({ step, disabled, handleSubmit, history, match }) => (
   <ViewContainer>
     <Margin top={4} bottom={4}>
       <H2>Create Instances</H2>
     </Margin>
     <Margin bottom={4}>
-      <Name {...props} expanded={step === 'name'} />
+      <Name history={history} match={match} expanded={step === 'name'} />
     </Margin>
     <Margin bottom={4}>
-      <Image {...props} expanded={step === 'image'} />
+      <Image history={history} match={match} expanded={step === 'image'} />
     </Margin>
     <Margin bottom={4}>
-      <Package {...props} expanded={step === 'package'} />
+      <Package history={history} match={match} expanded={step === 'package'} />
     </Margin>
     <Margin bottom={4}>
-      <Tags {...props} expanded={step === 'tags'} />
+      <Tags history={history} match={match} expanded={step === 'tags'} />
     </Margin>
     <Margin bottom={4}>
-      <Metadata {...props} expanded={step === 'metadata'} />
+      <Metadata
+        history={history}
+        match={match}
+        expanded={step === 'metadata'}
+      />
     </Margin>
     <Margin bottom={4}>
-      <Networks {...props} expanded={step === 'networks'} />
+      <Networks
+        history={history}
+        match={match}
+        expanded={step === 'networks'}
+      />
     </Margin>
     <Margin bottom={5}>
-      <Firewall {...props} expanded={step === 'firewall'} />
+      <Firewall
+        history={history}
+        match={match}
+        expanded={step === 'firewall'}
+      />
     </Margin>
     <Margin bottom={4}>
-      <CNS {...props} expanded={step === 'cns'} />
+      <CNS history={history} match={match} expanded={step === 'cns'} />
     </Margin>
     <Margin bottom={4}>
-      <Affinity {...props} expanded={step === 'affinity'} />
+      <Affinity
+        history={history}
+        match={match}
+        expanded={step === 'affinity'}
+      />
     </Margin>
     <Margin top={7} bottom={10}>
       <ReduxForm form={CREATE_FORM} onSubmit={handleSubmit}>
         {({ handleSubmit, submitting }) => (
           <form onSubmit={handleSubmit}>
-            <Button disabled={step !== 'summary'} loading={submitting}>
+            <Button disabled={disabled} loading={submitting}>
               Deploy
             </Button>
           </form>
@@ -76,14 +93,22 @@ const CreateInstance = ({ step, handleSubmit, ...props }) => (
 
 export default compose(
   graphql(CreateInstanceMutation, { name: 'createInstance' }),
-  connect(({ form, values }, ownProps) => {
+  connect(({ form, values }, { step }) => {
+    const disabled = ['name', 'image', 'package', 'networks'].some(
+      step => !get(values, `create-instance-${step}-proceeded`, false)
+    );
+
+    if (disabled) {
+      return { disabled };
+    }
+
     const name = get(
       form,
       'create-instance-name.values.name',
       '<instance-name>'
     );
 
-    const firewall = get(
+    const firewall_enabled = get(
       form,
       'CREATE-INSTANCE-FIREWALL.values.enabled',
       false
@@ -98,14 +123,10 @@ export default compose(
     const pkg = get(
       form,
       'create-instance-package.values.package',
-      '<instance-image>'
+      '<instance-pkg>'
     );
 
-    const networks = get(
+    const networks = get(form, 'CREATE-INSTANCE-NETWORKS.values', {});
-      form,
-      'CREATE-INSTANCE-NETWORKS.values',
-      '<instance-image>'
-    );
 
     const metadata = get(values, 'create-instance-metadata', []);
     const receivedTags = get(values, 'create-instance-tags', []);
@@ -121,52 +142,17 @@ export default compose(
       tags.push({ name: 'triton.cns.services', value: cnsServices.join(',') });
     }
 
-    const affRules = affinity
-      .map(aff => ({
-        conditional: aff['rule-instance-conditional'],
-        placement: aff['rule-instance-placement'],
-        identity: aff['rule-type'],
-        key: aff['rule-instance-tag-key'],
-        pattern: aff['rule-instance-tag-value-pattern'],
-        value:
-          aff['rule-type'] === 'name'
-            ? aff['rule-instance-name']
-            : aff['rule-instance-tag-value']
-      }))
-      .map(({ conditional, placement, identity, key, pattern, value }) => {
-        const type = constantCase(
-          `${conditional}_${placement === 'same' ? 'equal' : 'not_equal'}`
-        );
-
-        console.log(pattern);
-        const patterns = {
-          equalling: value => value,
-          'not-equalling': value => `/^!${value}$/`,
-          containing: value => `/${value}/`,
-          starting: value => `/^${value}/`,
-          ending: value => `/${value}$/`
-        };
-
-        const _key = identity === 'name' ? 'instance' : key;
-        const _value = patterns[pattern](value);
-
-        return {
-          type,
-          key: _key,
-          value: _value
-        };
-      });
-
     return {
       forms: Object.keys(form), // improve this
-      name: name.toLowerCase(),
+      name,
       pkg,
       image,
-      affinity: affRules,
+      affinity,
-      metadata: metadata.map(a => omit(a, 'expanded')),
+      metadata,
-      tags: uniqBy(tags, 'name'),
+      tags,
-      firewall_enabled: firewall,
+      firewall_enabled,
-      networks: Object.keys(networks).filter(network => networks[network])
+      networks,
+      disabled
     };
   }),
   connect(null, (dispatch, ownProps) => {
@@ -186,17 +172,59 @@ export default compose(
 
     return {
       handleSubmit: async () => {
+        const _affinity = affinity
+          .map(aff => ({
+            conditional: aff['rule-instance-conditional'],
+            placement: aff['rule-instance-placement'],
+            identity: aff['rule-type'],
+            key: aff['rule-instance-tag-key'],
+            pattern: aff['rule-instance-tag-value-pattern'],
+            value:
+              aff['rule-type'] === 'name'
+                ? aff['rule-instance-name']
+                : aff['rule-instance-tag-value']
+          }))
+          .map(({ conditional, placement, identity, key, pattern, value }) => {
+            const type = constantCase(
+              `${conditional}_${placement === 'same' ? 'equal' : 'not_equal'}`
+            );
+
+            const patterns = {
+              equalling: value => value,
+              'not-equalling': value => `/^!${value}$/`,
+              containing: value => `/${value}/`,
+              starting: value => `/^${value}/`,
+              ending: value => `/${value}$/`
+            };
+
+            const _key = identity === 'name' ? 'instance' : key;
+            const _value = patterns[pattern](value);
+
+            return {
+              type,
+              key: _key,
+              value: _value
+            };
+          });
+
+        const _metadata = metadata.map(a => omit(a, 'expanded'));
+        const _tags = uniqBy(tags, 'name');
+        const _networks = Object.keys(networks).filter(
+          network => networks[network]
+        );
+        const _name = name.toLowerCase();
+
         const [err, res] = await intercept(
           createInstance({
             variables: {
-              name,
+              name: _name,
               package: pkg,
               image,
-              affinity,
+              affinity: _affinity,
-              metadata,
+              metadata: _metadata,
-              tags,
+              tags: _tags,
               firewall_enabled,
-              networks
+              networks: _networks
             }
           })
         );
@@ -209,7 +237,7 @@ export default compose(
           );
         }
 
-        dispatch(forms.map(name => destroy(name)));
+        dispatch([destroyAll(), forms.map(name => destroy(name))]);
 
         history.push(`/instances/${res.data.createMachine.name}`);
       }

packages/my-joy-beta/src/containers/create-instance/metadata.js

@@ -31,7 +31,12 @@ export const Metadata = ({
   handleEdit
 }) => (
   <Fragment>
-    <Title icon={<MetadataIcon />}>Metadata</Title>
+    <Title
+      onClick={!expanded && !proceeded && handleEdit}
+      icon={<MetadataIcon />}
+    >
+      Metadata
+    </Title>
     {expanded ? (
       <Description>
         Metadata can be used to pass data to the instance. It can also be used

packages/my-joy-beta/src/containers/create-instance/name.js

@@ -2,13 +2,14 @@ import React, { Fragment } from 'react';
 import { compose, graphql } from 'react-apollo';
 import { set } from 'react-redux-values';
 import ReduxForm from 'declarative-redux-form';
+import { Margin } from 'styled-components-spacing';
 import { change } from 'redux-form';
 import { connect } from 'react-redux';
 import intercept from 'apr-intercept';
 import get from 'lodash.get';
 import punycode from 'punycode';
 
-import { NameIcon } from 'joyent-ui-toolkit';
+import { NameIcon, H3, Button } from 'joyent-ui-toolkit';
 
 import Name from '@components/create-instance/name';
 import Title from '@components/create-instance/title';
@@ -17,7 +18,7 @@ import GetRandomName from '@graphql/get-random-name.gql';
 import { client } from '@state/store';
 import parseError from '@state/parse-error';
 
-const FORM_NAME = 'CREATE_INSTANCE_NAME';
+const FORM_NAME = 'create-instance-name';
 
 const NameContainer = ({
   expanded,
@@ -27,11 +28,13 @@ const NameContainer = ({
   handleAsyncValidation,
   shouldAsyncValidate,
   handleNext,
-  handleCancel,
+  handleRandomize,
-  handleRandomize
+  handleEdit
 }) => (
   <Fragment>
-    <Title icon={<NameIcon />}>Instance name</Title>
+    <Title onClick={!expanded && !name && handleEdit} icon={<NameIcon />}>
+      Instance name
+    </Title>
     <ReduxForm
       form={FORM_NAME}
       destroyOnUnmount={false}
@@ -40,17 +43,25 @@ const NameContainer = ({
       asyncValidate={handleAsyncValidation}
       shouldAsyncValidate={shouldAsyncValidate}
     >
-      {props => (
+      {props =>
+        expanded ? (
           <Name
             {...props}
-          name={name}
             placeholderName={placeholderName}
-          expanded={expanded}
             randomizing={randomizing}
-          onCancel={handleCancel}
             onRandomize={handleRandomize}
           />
-      )}
+        ) : name ? (
+          <Fragment>
+            <Margin bottom={2} top={3}>
+              <H3 bold>{name}</H3>
+            </Margin>
+            <Button type="button" secondary onClick={handleEdit}>
+              Edit
+            </Button>
+          </Fragment>
+        ) : null
+      }
     </ReduxForm>
   </Fragment>
 );
@@ -80,14 +91,21 @@ export default compose(
     (dispatch, { history }) => ({
       shouldAsyncValidate: ({ trigger }) => trigger === 'submit',
       handleAsyncValidation: async ({ name }) => {
-        const sanitized = punycode.encode(name).replace(/\-$/, '');
+        const sanitized = punycode.encode(name).replace(/-$/, '');
 
         if (sanitized !== name) {
+          // eslint-disable-next-line no-throw-literal
           throw {
             name: 'Special characters are not accepted'
           };
         }
 
+        if (!(/^[a-zA-Z0-9][a-zA-Z0-9\\_\\.\\-]*$/).test(name)) {
+          throw {
+            name: 'Invalid name'
+          };
+        }
+
         const [err, res] = await intercept(
           client.query({
             fetchPolicy: 'network-only',
@@ -97,6 +115,7 @@ export default compose(
         );
 
         if (err) {
+          // eslint-disable-next-line no-throw-literal
           throw {
             name: parseError(err)
           };
@@ -106,13 +125,18 @@ export default compose(
         const { machines = [] } = data;
 
         if (machines.length) {
+          // eslint-disable-next-line no-throw-literal
           throw {
             name: `${name} already exists`
           };
         }
       },
-      handleNext: () => history.push(`/instances/~create/image`),
+      handleNext: () => {
-      handleCancel: () => history.push(`/instances/~create/name`),
+        dispatch(set({ name: 'create-instance-name-proceeded', value: true }));
+
+        return history.push(`/instances/~create/image`);
+      },
+      handleEdit: () => history.push(`/instances/~create/name`),
       handleRandomize: async () => {
         dispatch(
           set({ name: 'create-instance-name-randomizing', value: true })

packages/my-joy-beta/src/containers/create-instance/networks.js

@@ -29,7 +29,12 @@ export const Networks = ({
 
   return (
     <Fragment>
-      <Title icon={<NetworkIcon />}>Networks</Title>
+      <Title
+        onClick={!expanded && !proceeded && handleEdit}
+        icon={<NetworkIcon />}
+      >
+        Networks
+      </Title>
       {expanded ? (
         <Description>
           Instances are automatically connected to a private fabric network,

packages/my-joy-beta/src/containers/create-instance/package.js

@@ -29,8 +29,8 @@ const FILTERS = 'create-instance-package-filters';
 const PackageContainer = ({
   expanded,
   hasVms,
-  handleSubmit,
+  handleNext,
-  handleCancel,
+  handleEdit,
   loading,
   packages,
   selected = {},
@@ -40,7 +40,12 @@ const PackageContainer = ({
   resetFilters
 }) => (
   <Fragment>
-    <Title icon={<PackageIcon />}>Package</Title>
+    <Title
+      onClick={!expanded && !selected.id && handleEdit}
+      icon={<PackageIcon />}
+    >
+      Package
+    </Title>
     <div>
       {expanded ? (
         <Description>
@@ -71,7 +76,7 @@ const PackageContainer = ({
           form={FORM_NAME}
           destroyOnUnmount={false}
           forceUnregisterOnUnmount={true}
-          onSubmit={handleSubmit}
+          onSubmit={handleNext}
         >
           {props => (
             <Fragment>
@@ -98,11 +103,7 @@ const PackageContainer = ({
                 </Fragment>
               ) : null}
               {!expanded && selected.id ? (
-                <Overview
+                <Overview {...selected} hasVms={hasVms} onCancel={handleEdit} />
-                  {...selected}
-                  hasVms={hasVms}
-                  onCancel={handleCancel}
-                />
               ) : null}
             </Fragment>
           )}
@@ -195,8 +196,14 @@ export default compose(
       };
     },
     (dispatch, { history }) => ({
-      handleSubmit: () => history.push('/instances/~create/tags'),
+      handleNext: () => {
-      handleCancel: () => history.push('/instances/~create/package'),
+        dispatch(
+          set({ name: 'create-instance-package-proceeded', value: true })
+        );
+
+        return history.push('/instances/~create/tags');
+      },
+      handleEdit: () => history.push('/instances/~create/package'),
       resetFilters: () => {
         dispatch(reset(`${FILTERS}-filters`));
       },

packages/my-joy-beta/src/containers/create-instance/tags.js

@@ -32,7 +32,9 @@ export const Tags = ({
   handleEdit
 }) => (
   <Fragment>
-    <Title icon={<TagsIcon />}>Tags</Title>
+    <Title onClick={!expanded && !proceeded && handleEdit} icon={<TagsIcon />}>
+      Tags
+    </Title>
     {expanded ? (
       <Description>
         Tags can be used to identify your instances, group multiple instances

yarn.lock

@@ -6762,8 +6762,8 @@ multicast-dns-service-types@^1.1.0:
   resolved "https://registry.yarnpkg.com/multicast-dns-service-types/-/multicast-dns-service-types-1.1.0.tgz#899f11d9686e5e05cb91b35d5f0e63b773cfc901"
 
 multicast-dns@^6.0.1:
-  version "6.2.1"
+  version "6.2.2"
-  resolved "https://registry.yarnpkg.com/multicast-dns/-/multicast-dns-6.2.1.tgz#c5035defa9219d30640558a49298067352098060"
+  resolved "https://registry.yarnpkg.com/multicast-dns/-/multicast-dns-6.2.2.tgz#300b6133361f8aaaf2b8d1248e85c363fe5b95a0"
   dependencies:
     dns-packet "^1.0.1"
     thunky "^0.1.0"
@@ -8234,9 +8234,9 @@ react-popper@^0.7.4:
     popper.js "^1.12.5"
     prop-types "^15.5.10"
 
-react-redux-values@^1.0.2:
+react-redux-values@^1.1.2:
-  version "1.0.2"
+  version "1.1.2"
-  resolved "https://registry.yarnpkg.com/react-redux-values/-/react-redux-values-1.0.2.tgz#f626997a1107626883147e45612cb8d1c0bce8fb"
+  resolved "https://registry.yarnpkg.com/react-redux-values/-/react-redux-values-1.1.2.tgz#e55e72fe74db1370e26aa96b27f15c262b1afa0c"
   dependencies:
     lodash.isundefined "^3.0.1"
     prop-types "^15.6.0"