fix(my-joy-beta): validate tags and metadata

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

@@ -18,6 +18,8 @@ const FORM_NAME_CREATE = 'CREATE-INSTANCE-METADATA-ADD';
 const FORM_NAME_EDIT = i => `CREATE-INSTANCE-METADATA-EDIT-${i}`;
 
 export const Metadata = ({
+  id,
+  step,
   metadata = [],
   expanded,
   proceeded,
@@ -30,8 +32,8 @@ export const Metadata = ({
   handleChangeAddOpen,
   handleNext,
   handleEdit,
-  id,
-  step
+  shouldAsyncValidate,
+  asyncValidate
 }) => (
   <Fragment>
     <Title
@@ -71,6 +73,8 @@ export const Metadata = ({
         destroyOnUnmount={false}
         forceUnregisterOnUnmount={true}
         onSubmit={newValue => handleUpdateMetadata(index, newValue)}
+        shouldAsyncValidate={shouldAsyncValidate}
+        asyncValidate={asyncValidate}
       >
         {props => (
           <Fragment>
@@ -102,6 +106,8 @@ export const Metadata = ({
       destroyOnUnmount={false}
       forceUnregisterOnUnmount={true}
       onSubmit={handleAddMetadata}
+      shouldAsyncValidate={shouldAsyncValidate}
+      asyncValidate={asyncValidate}
     >
       {props =>
         expanded && addOpen ? (
@@ -166,6 +172,22 @@ export default compose(
     handleEdit: () => {
       return history.push(`/~create/metadata${history.location.search}`);
     },
+    shouldAsyncValidate: ({ trigger }) => {
+      return trigger === 'submit';
+    },
+    asyncValidate: async ({ name = '', value = '' }) => {
+      const isNameInvalid = name.length === 0;
+      const isValueInvalid = value.length === 0;
+
+      if (!isNameInvalid && !isValueInvalid) {
+        return;
+      }
+
+      throw {
+        name: isNameInvalid,
+        value: isValueInvalid
+      };
+    },
     handleAddMetadata: value => {
       const toggleToClosed = set({
         name: `create-instance-metadata-add-open`,

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

@@ -26,6 +26,7 @@ const FORM_NAME_CREATE = 'CREATE-INSTANCE-TAGS-ADD';
 const FORM_NAME_EDIT = i => `CREATE-INSTANCE-TAGS-EDIT-${i}`;
 
 export const Tags = ({
+  step,
   tags = [],
   expanded,
   proceeded,
@@ -37,8 +38,9 @@ export const Tags = ({
   handleCancelEdit,
   handleChangeAddOpen,
   handleNext,
-  step,
-  handleEdit
+  handleEdit,
+  shouldAsyncValidate,
+  asyncValidate
 }) => (
   <Fragment>
     <Title
@@ -86,6 +88,8 @@ export const Tags = ({
       destroyOnUnmount={false}
       forceUnregisterOnUnmount={true}
       onSubmit={handleAddTag}
+      shouldAsyncValidate={shouldAsyncValidate}
+      asyncValidate={asyncValidate}
     >
       {props =>
         expanded && addOpen ? (
@@ -147,6 +151,22 @@ export default compose(
     handleEdit: () => {
       return history.push(`/~create/tags${history.location.search}`);
     },
+    shouldAsyncValidate: ({ trigger }) => {
+      return trigger === 'submit';
+    },
+    asyncValidate: async ({ name = '', value = '' }) => {
+      const isNameInvalid = name.length === 0;
+      const isValueInvalid = value.length === 0;
+
+      if (!isNameInvalid && !isValueInvalid) {
+        return;
+      }
+
+      throw {
+        name: isNameInvalid,
+        value: isValueInvalid
+      };
+    },
     handleAddTag: value => {
       const toggleToClosed = set({
         name: `create-instance-tags-add-open`,

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

@@ -47,12 +47,19 @@ export const Metadata = ({
   handleCancel,
   handleCreate,
   handleUpdate,
-  handleRemove
+  handleRemove,
+  shouldAsyncValidate,
+  asyncValidate
 }) => {
   const _loading = !(loading && !metadata.length) ? null : <StatusLoader />;
 
   const _add = addOpen ? (
-    <ReduxForm form={ADD_FORM_NAME} onSubmit={handleCreate}>
+    <ReduxForm
+      form={ADD_FORM_NAME}
+      onSubmit={handleCreate}
+      shouldAsyncValidate={shouldAsyncValidate}
+      asyncValidate={asyncValidate}
+    >
       {props => (
         <MetadataAddForm
           {...props}
@@ -87,6 +94,8 @@ export const Metadata = ({
           initialValues={initialValues}
           destroyOnUnmount={false}
           onSubmit={handleUpdate}
+          shouldAsyncValidate={shouldAsyncValidate}
+          asyncValidate={asyncValidate}
         >
           {props => (
             <MetadataEditForm
@@ -198,15 +207,34 @@ export default compose(
       } = ownProps;
 
       return {
-        handleCancel: form =>
-          dispatch([
+        handleCancel: form => {
+          return dispatch([
             set({ name: `${form}-expanded`, value: false }),
             dispatch(reset(form))
-          ]),
-        handleToggleAddOpen: value =>
-          dispatch(set({ name: `add-metadata-open`, value })),
-        handleUpdateExpanded: (form, expanded) =>
-          dispatch(set({ name: `${form}-expanded`, value: expanded })),
+          ]);
+        },
+        handleToggleAddOpen: value => {
+          return dispatch(set({ name: `add-metadata-open`, value }));
+        },
+        handleUpdateExpanded: (form, expanded) => {
+          return dispatch(set({ name: `${form}-expanded`, value: expanded }));
+        },
+        shouldAsyncValidate: ({ trigger }) => {
+          return trigger === 'submit';
+        },
+        asyncValidate: async ({ name = '', value = '' }) => {
+          const isNameInvalid = name.length === 0;
+          const isValueInvalid = value.length === 0;
+
+          if (!isNameInvalid && !isValueInvalid) {
+            return;
+          }
+
+          throw {
+            name: isNameInvalid,
+            value: isValueInvalid
+          };
+        },
         handleCreate: async ({ name, value }) => {
           // call mutation
           const [err] = await intercept(

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

@@ -48,7 +48,9 @@ export const Tags = ({
   handleCancel,
   handleEdit,
   handleRemove,
-  handleCreate
+  handleCreate,
+  shouldAsyncValidate,
+  asyncValidate
 }) => {
   const _loading = !(loading && !tags.length) ? null : <StatusLoader />;
 
@@ -57,6 +59,8 @@ export const Tags = ({
       form={ADD_FORM_NAME}
       onSubmit={handleCreate}
       onCancel={() => handleToggleAddOpen(false)}
+      shouldAsyncValidate={shouldAsyncValidate}
+      asyncValidate={asyncValidate}
     >
       {TagsAddForm}
     </ReduxForm>
@@ -95,6 +99,8 @@ export const Tags = ({
     <ReduxForm
       form={editing.form}
       initialValues={{ name: editing.name, value: editing.value }}
+      shouldAsyncValidate={shouldAsyncValidate}
+      asyncValidate={asyncValidate}
       onSubmit={handleEdit}
     >
       {props => (
@@ -197,10 +203,28 @@ export default compose(
     },
     (dispatch, ownProps) => {
       return {
-        handleToggleAddOpen: value =>
-          dispatch(set({ name: `add-tags-open`, value })),
-        handleToggleEditing: value =>
-          dispatch(set({ name: `editing-tag`, value })),
+        handleToggleAddOpen: value => {
+          return dispatch(set({ name: `add-tags-open`, value }));
+        },
+        handleToggleEditing: value => {
+          return dispatch(set({ name: `editing-tag`, value }));
+        },
+        shouldAsyncValidate: ({ trigger }) => {
+          return trigger === 'submit';
+        },
+        asyncValidate: async ({ name = '', value = '' }) => {
+          const isNameInvalid = name.length === 0;
+          const isValueInvalid = value.length === 0;
+
+          if (!isNameInvalid && !isValueInvalid) {
+            return;
+          }
+
+          throw {
+            name: isNameInvalid,
+            value: isValueInvalid
+          };
+        },
         handleEdit: async ({ name, value }, _, { form, initialValues }) => {
           const { instance, deleteTag, updateTags, refetch } = ownProps;