fix(my-joy-beta): create instance - name ui fixes

fixes #1004

packages/my-joy-beta/package.json

@@ -31,7 +31,9 @@
     "lodash.find": "^4.6.0",
     "lodash.get": "^4.4.2",
     "lodash.isstring": "^4.0.1",
+    "lodash.omit": "^4.5.0",
     "lodash.sortby": "^4.7.0",
+    "lodash.uniqby": "^4.7.0",
     "lunr": "^2.1.5",
     "normalized-styled-components": "^1.0.17",
     "param-case": "^2.1.1",

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

@@ -11,6 +11,11 @@ exports[`renders <Name expanded /> without throwing 1`] = `
   margin-bottom: 1rem;
 }
 
+.c8 {
+  margin-top: 0.5rem;
+  margin-bottom: 2rem;
+}
+
 .c0 {
   box-sizing: border-box;
   display: -webkit-box;
@@ -59,7 +64,7 @@ exports[`renders <Name expanded /> without throwing 1`] = `
   padding-bottom: 2.25rem;
 }
 
-.c10 {
+.c11 {
   font-family: sans-serif;
   font-size: 100%;
   line-height: 1.15;
@@ -72,30 +77,30 @@ exports[`renders <Name expanded /> without throwing 1`] = `
   min-width: 7.5rem;
 }
 
-.c10::-moz-focus-inner,
-.c10[type='button']::-moz-focus-inner,
-.c10[type='reset']::-moz-focus-inner,
-.c10[type='submit']::-moz-focus-inner {
+.c11::-moz-focus-inner,
+.c11[type='button']::-moz-focus-inner,
+.c11[type='reset']::-moz-focus-inner,
+.c11[type='submit']::-moz-focus-inner {
   border-style: none;
   padding: 0;
 }
 
-.c10:-moz-focusring,
-.c10[type='button']:-moz-focusring,
-.c10[type='reset']:-moz-focusring,
-.c10[type='submit']:-moz-focusring {
+.c11:-moz-focusring,
+.c11[type='button']:-moz-focusring,
+.c11[type='reset']:-moz-focusring,
+.c11[type='submit']:-moz-focusring {
   outline: 0.0625rem dotted ButtonText;
 }
 
-.c10 + button {
+.c11 + button {
   margin-left: 0.375rem;
 }
 
-.c9 {
+.c10 {
   display: inline-block;
 }
 
-.c8 {
+.c9 {
   box-sizing: border-box;
   display: inline-block;
   -webkit-box-pack: center;
@@ -135,28 +140,28 @@ exports[`renders <Name expanded /> without throwing 1`] = `
   border: solid 0.0625rem rgb(45,56,132);
 }
 
-.c8:focus {
+.c9:focus {
   outline: 0;
   text-decoration: none;
   background-color: rgb(59,70,204);
   border-color: rgb(45,56,132);
 }
 
-.c8:hover {
+.c9:hover {
   background-color: rgb(72,83,217);
   border: solid 0.0625rem rgb(45,56,132);
 }
 
-.c8:active,
-.c8:active:hover,
-.c8:active:focus {
+.c9:active,
+.c9:active:hover,
+.c9:active:focus {
   background-image: none;
   outline: 0;
   background-color: rgb(45,56,132);
   border-color: rgb(45,56,132);
 }
 
-.c8[disabled] {
+.c9[disabled] {
   cursor: not-allowed;
   pointer-events: none;
 }
@@ -315,7 +320,7 @@ exports[`renders <Name expanded /> without throwing 1`] = `
       className="c5"
       htmlFor="Y"
     >
-      Name
+      Instance Name
     </label>
     <input
       className="c6"
@@ -326,14 +331,18 @@ exports[`renders <Name expanded /> without throwing 1`] = `
       className="c7"
     />
   </div>
-  <button
-    className="c8 c9 c10"
-    disabled={undefined}
-    href=""
-    type="submit"
+  <div
+    className="c8"
   >
-    Next
-  </button>
+    <button
+      className="c9 c10 c11"
+      disabled={undefined}
+      href=""
+      type="submit"
+    >
+      Next
+    </button>
+  </div>
 </form>
 `;
 

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

@@ -20,13 +20,15 @@ export default ({ handleSubmit, pristine, expanded, name, onCancel }) => (
           Your instance name will be used to identify this specific instance.
         </Description>
         <FormGroup name="name" fluid field={Field}>
-          <FormLabel>Name</FormLabel>
+          <FormLabel>Instance Name</FormLabel>
           <Input />
           <FormMeta />
         </FormGroup>
-        <Button type="submit" disabled={pristine}>
-          Next
-        </Button>
+        <Margin top={2} bottom={4}>
+          <Button type="submit" disabled={pristine}>
+            Next
+          </Button>
+        </Margin>
       </Fragment>
     ) : (
       <Fragment>

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

@@ -6,8 +6,9 @@ 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 { AffinityIcon, P, Button, H3 } from 'joyent-ui-toolkit';
+import { AffinityIcon, P, Button, H3, Divider } from 'joyent-ui-toolkit';
 
 import Title from '@components/create-instance/title';
 import { Rule, Header } from '@components/create-instance/affinity';
@@ -120,14 +121,22 @@ export const Affinity = ({
           >
             Create affinity rule
           </Button>
-          <Button type="button" onClick={handleNext}>
-            Next
-          </Button>
+          <Margin top={2} bottom={4}>
+            <Button type="submit" onClick={handleNext}>
+              Next
+            </Button>
+          </Margin>
+          <Divider height={remcalc(1)} />
         </Fragment>
       ) : proceeded ? (
-        <Button type="button" onClick={handleEdit} secondary>
-          Edit
-        </Button>
+        <Fragment>
+          <Button type="button" onClick={handleEdit} secondary>
+            Edit
+          </Button>
+          <Margin top={3}>
+            <Divider height={remcalc(1)} />
+          </Margin>
+        </Fragment>
       ) : null}
     </div>
   </Fragment>
@@ -146,7 +155,7 @@ export default compose(
         set({ name: 'create-instance-affinity-proceeded', value: true })
       );
 
-      return history.push(`/instances/~create/done`);
+      return history.push(`/instances/~create/summary`);
     },
     handleEdit: () => {
       return history.push(`/instances/~create/affinity`);

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

@@ -2,7 +2,6 @@ import React from 'react';
 import { Margin } from 'styled-components-spacing';
 import ReduxForm from 'declarative-redux-form';
 import { stopSubmit, destroy } from 'redux-form';
-import remcalc from 'remcalc';
 import { connect } from 'react-redux';
 import { graphql, compose } from 'react-apollo';
 import intercept from 'apr-intercept';
@@ -11,7 +10,7 @@ import get from 'lodash.get';
 import omit from 'lodash.omit';
 import uniqBy from 'lodash.uniqby';
 
-import { ViewContainer, H2, Button, Divider } from 'joyent-ui-toolkit';
+import { ViewContainer, H2, Button } from 'joyent-ui-toolkit';
 
 import Name from '@containers/create-instance/name';
 import Image from '@containers/create-instance/image';
@@ -57,14 +56,11 @@ const CreateInstance = ({ step, handleSubmit, ...props }) => (
     <Margin bottom={4}>
       <Affinity {...props} expanded={step === 'affinity'} />
     </Margin>
-    {step === 'done' || step === 'affinity' ? (
-      <Divider height={remcalc(1)} />
-    ) : null}
     <Margin top={7} bottom={10}>
       <ReduxForm form="create-instance" onSubmit={handleSubmit}>
         {({ handleSubmit, submitting }) => (
           <form onSubmit={handleSubmit}>
-            <Button disabled={step !== 'done'} loading={submitting}>
+            <Button disabled={step !== 'summary'} loading={submitting}>
               Deploy
             </Button>
           </form>

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

@@ -8,7 +8,6 @@ import get from 'lodash.get';
 import sort from 'lodash.sortby';
 import { set } from 'react-redux-values';
 import ReduxForm from 'declarative-redux-form';
-import { withRouter } from 'react-router-dom';
 import { Margin } from 'styled-components-spacing';
 import intercept from 'apr-intercept';
 

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

@@ -157,9 +157,9 @@ export default () => (
           component={props => <CreateInstance {...props} step="affinity" />}
         />
         <Route
-          path="/instances/~create/done"
+          path="/instances/~create/summary"
           exact
-          component={props => <CreateInstance {...props} step="done" />}
+          component={props => <CreateInstance {...props} step="summary" />}
         />
 
         <Route

yarn.lock

@@ -6479,6 +6479,10 @@ lodash.memoize@^4.1.2:
   version "4.1.2"
   resolved "https://registry.yarnpkg.com/lodash.memoize/-/lodash.memoize-4.1.2.tgz#bcc6c49a42a2840ed997f323eada5ecd182e0bfe"
 
+lodash.omit@^4.5.0:
+  version "4.5.0"
+  resolved "https://registry.yarnpkg.com/lodash.omit/-/lodash.omit-4.5.0.tgz#6eb19ae5a1ee1dd9df0b969e66ce0b7fa30b5e60"
+
 lodash.pick@^4.4.0:
   version "4.4.0"
   resolved "https://registry.yarnpkg.com/lodash.pick/-/lodash.pick-4.4.0.tgz#52f05610fff9ded422611441ed1fc123a03001b3"
@@ -6512,6 +6516,10 @@ lodash.uniq@^4.5.0:
   version "4.5.0"
   resolved "https://registry.yarnpkg.com/lodash.uniq/-/lodash.uniq-4.5.0.tgz#d0225373aeb652adc1bc82e4945339a842754773"
 
+lodash.uniqby@^4.7.0:
+  version "4.7.0"
+  resolved "https://registry.yarnpkg.com/lodash.uniqby/-/lodash.uniqby-4.7.0.tgz#d99c07a669e9e6d24e1362dfe266c67616af1302"
+
 "lodash@>=3.5 <5", lodash@^4.0.0, lodash@^4.1.0, lodash@^4.11.1, lodash@^4.13.1, lodash@^4.14.0, lodash@^4.15.0, lodash@^4.17.2, lodash@^4.17.3, lodash@^4.17.4, lodash@^4.2.0, lodash@^4.2.1, lodash@^4.3.0, lodash@^4.5.1:
   version "4.17.4"
   resolved "https://registry.yarnpkg.com/lodash/-/lodash-4.17.4.tgz#78203a4d1c328ae1d86dca6460e369b57f4055ae"