fix(my-joy-beta): show create instance errors

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

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

@@ -44,11 +44,12 @@ const ImageContainer = ({
   images,
   vms,
   step
-}) => queryImage ? (
+}) =>
+  queryImage ? (
     <Fragment>
       <HarcodedImage {...queryImage} />
     </Fragment>
-) : (
+  ) : (
     <Fragment>
       <Title
         id={step}
@@ -118,7 +119,7 @@ const ImageContainer = ({
         </Margin>
       ) : null}
     </Fragment>
-);
+  );
 
 export default compose(
   connect(

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

@@ -3,7 +3,7 @@
 import React from 'react';
 import { Margin } from 'styled-components-spacing';
 import ReduxForm from 'declarative-redux-form';
-import { stopSubmit, destroy } from 'redux-form';
+import { SubmissionError, destroy } from 'redux-form';
 import { connect } from 'react-redux';
 import { destroyAll } from 'react-redux-values';
 import { graphql, compose } from 'react-apollo';
@@ -15,7 +15,14 @@ import Values from 'lodash.values';
 import omit from 'lodash.omit';
 import uniqBy from 'lodash.uniqby';
 
-import { ViewContainer, H2, Button } from 'joyent-ui-toolkit';
+import {
+  ViewContainer,
+  H2,
+  Button,
+  Message,
+  MessageTitle,
+  MessageDescription
+} from 'joyent-ui-toolkit';
 
 import Name from '@containers/create-instance/name';
 import Image from '@containers/create-instance/image';
@@ -44,6 +51,14 @@ const CreateInstance = ({
     <Margin top={4} bottom={4}>
       <H2>Create Instances</H2>
     </Margin>
+    {error ? (
+      <Margin bottom={4}>
+        <Message error>
+          <MessageTitle>Ooops!</MessageTitle>
+          <MessageDescription>{error}</MessageDescription>
+        </Message>
+      </Margin>
+    ) : null}
     {query.image ? (
       <Image
         history={history}
@@ -113,6 +128,14 @@ const CreateInstance = ({
       expanded={step === 'affinity'}
     />
     <Margin top={7} bottom={10}>
+      {error ? (
+        <Margin bottom={4}>
+          <Message error>
+            <MessageTitle>Ooops!</MessageTitle>
+            <MessageDescription>{error}</MessageDescription>
+          </Message>
+        </Margin>
+      ) : null}
       <ReduxForm form={CREATE_FORM} onSubmit={handleSubmit}>
         {({ handleSubmit, submitting }) => (
           <form onSubmit={handleSubmit}>
@@ -133,6 +156,7 @@ export default compose(
     const FORM_NAME = 'create-instance-name';
     const step = get(match, 'params.step', 'name');
 
+    const error = get(form, `${CREATE_FORM}.error`, null);
     const name = get(form, `${FORM_NAME}.values.name`, '');
     const image = get(form, 'create-instance-image.values.image', '');
     const pkg = get(form, 'create-instance-package.values.package', '');
@@ -146,6 +170,7 @@ export default compose(
 
     if (!enabled) {
       return {
+        error,
         disabled: !enabled,
         step
       };
@@ -178,6 +203,7 @@ export default compose(
     }
 
     return {
+      error,
       query,
       forms: Object.keys(form), // improve this
       name,
@@ -272,11 +298,9 @@ export default compose(
         );
 
         if (err) {
-          return dispatch(
-            stopSubmit(CREATE_FORM, {
+          throw new SubmissionError({
             _error: parseError(err)
-            })
-          );
+          });
         }
 
         dispatch([destroyAll(), forms.map(name => destroy(name))]);

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

@@ -11,7 +11,6 @@ import intercept from 'apr-intercept';
 import find from 'lodash.find';
 import reverse from 'lodash.reverse';
 import sort from 'lodash.sortby';
-import includes from 'lodash.includes';
 import remcalc from 'remcalc';
 
 import {

packages/ui-toolkit/src/form/select.js

@@ -37,9 +37,11 @@ const SelectWrapper = styled.div`
   }
 
   ${is('embedded')`
-      width: auto;
     margin: 0 ${remcalc(6)};
+    width: auto;
+    max-width: auto;
     min-width: 0;
+
     &:after {
       right: ${remcalc(6)};
     }