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,81 +44,82 @@ const ImageContainer = ({
   images,
   vms,
   step
-}) => queryImage ? (
-  <Fragment>
-    <HarcodedImage {...queryImage} />
-  </Fragment>
-) : (
-  <Fragment>
-    <Title
-      id={step}
-      onClick={!expanded && !proceeded && handleEdit}
-      collapsed={!expanded && !proceeded}
-      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-vms"
-      destroyOnUnmount={false}
-      forceUnregisterOnUnmount={true}
-      initialValues={{ vms: true }}
-    >
-      {props => (loading || !expanded ? null : <ImageType {...props} />)}
-    </ReduxForm>
-    <ReduxForm
-      form="create-instance-image"
-      destroyOnUnmount={false}
-      forceUnregisterOnUnmount={true}
-      initialValues={{ vms: true }}
-    >
-      {props =>
-        loading && expanded ? (
-          <StatusLoader />
-        ) : expanded ? (
-          <Image
-            {...props}
-            images={images.filter(i => i.isVm === vms)}
-            onSelectLatest={handleSelectLatest}
-          />
-        ) : image.id ? (
-          <Preview {...image} />
-        ) : null
-      }
-    </ReduxForm>
-    {expanded ? (
-      <Margin top={1} bottom={7}>
-        <Button
-          type="button"
-          onClick={handleNext}
-          disabled={!image.id || vms !== image.isVm}
-        >
-          Next
-        </Button>
-      </Margin>
-    ) : proceeded ? (
-      <Margin top={4} bottom={7}>
-        <Button type="button" onClick={handleEdit} secondary>
-          Edit
-        </Button>
-      </Margin>
-    ) : null}
-  </Fragment>
-);
+}) =>
+  queryImage ? (
+    <Fragment>
+      <HarcodedImage {...queryImage} />
+    </Fragment>
+  ) : (
+    <Fragment>
+      <Title
+        id={step}
+        onClick={!expanded && !proceeded && handleEdit}
+        collapsed={!expanded && !proceeded}
+        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-vms"
+        destroyOnUnmount={false}
+        forceUnregisterOnUnmount={true}
+        initialValues={{ vms: true }}
+      >
+        {props => (loading || !expanded ? null : <ImageType {...props} />)}
+      </ReduxForm>
+      <ReduxForm
+        form="create-instance-image"
+        destroyOnUnmount={false}
+        forceUnregisterOnUnmount={true}
+        initialValues={{ vms: true }}
+      >
+        {props =>
+          loading && expanded ? (
+            <StatusLoader />
+          ) : expanded ? (
+            <Image
+              {...props}
+              images={images.filter(i => i.isVm === vms)}
+              onSelectLatest={handleSelectLatest}
+            />
+          ) : image.id ? (
+            <Preview {...image} />
+          ) : null
+        }
+      </ReduxForm>
+      {expanded ? (
+        <Margin top={1} bottom={7}>
+          <Button
+            type="button"
+            onClick={handleNext}
+            disabled={!image.id || vms !== image.isVm}
+          >
+            Next
+          </Button>
+        </Margin>
+      ) : proceeded ? (
+        <Margin top={4} bottom={7}>
+          <Button type="button" onClick={handleEdit} secondary>
+            Edit
+          </Button>
+        </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, {
-              _error: parseError(err)
-            })
-          );
+          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,12 +37,14 @@ const SelectWrapper = styled.div`
   }
 
   ${is('embedded')`
-      width: auto;
-      margin: 0 ${remcalc(6)};
-      min-width: 0;
-      &:after {
-        right: ${remcalc(6)};
-      }
+    margin: 0 ${remcalc(6)};
+    width: auto;
+    max-width: auto;
+    min-width: 0;
+
+    &:after {
+      right: ${remcalc(6)};
+    }
   `};
 
   ${is('embedded', 'left')`