feat(my-joy-beta): use editor on metadata

packages/my-joy-beta/src/components/instances/key-value.js

@@ -1,5 +1,6 @@
 import React from 'react';
 import { Row, Col } from 'react-styled-flexboxgrid';
+import { Field } from 'redux-form';
 
 import {
   FormGroup,
@@ -7,12 +8,46 @@ import {
   Button,
   BinIcon,
   QueryBreakpoints,
-  Divider
+  Divider,
+  Editor
 } from 'joyent-ui-toolkit';
 
 const { SmallOnly, Small } = QueryBreakpoints;
 
-export default ({ name, formName, formValue, handleSubmit, onRemove, textarea }) => (
+const TextareaKeyValue = ({ name, formName, formValue, handleSubmit, onRemove, textarea }) => (
+  <form onSubmit={handleSubmit}>
+    <Row>
+      <Col xs={12} sm={10}>
+        <FormGroup name={formName} reduxForm>
+          <Input fluid mono marginless />
+        </FormGroup>
+      </Col>
+      <Col xs={6} sm={1}>
+        <Button type="button" onClick={() => onRemove(name)} secondary small icon fluid>
+          <BinIcon />
+        </Button>
+      </Col>
+      <Col xs={6} sm={1}>
+        <Button type="submit" secondary small icon fluid>
+          S
+        </Button>
+      </Col>
+      <Col xs={12} sm={12}>
+        <FormGroup name={formValue} reduxForm>
+          <Field name={formValue} component={Editor} mode='sh' />
+        </FormGroup>
+      </Col>
+      <SmallOnly>
+        <Divider height="4" width="100%" transparent />
+      </SmallOnly>
+      <Small>
+        <Divider height="2" width="100%" transparent />
+      </Small>
+    </Row>
+  </form>
+);
+
+const InputKeyValue = ({ name, formName, formValue, handleSubmit, onRemove, textarea }) => (
   <form onSubmit={handleSubmit}>
     <Row>
       <Col xs={12} sm={5}>
@@ -41,3 +76,7 @@ export default ({ name, formName, formValue, handleSubmit, onRemove, textarea })
     </Row>
   </form>
 );
+
+export default ({ textarea, ...rest }) => textarea
+  ? <TextareaKeyValue {...rest} />
+  : <InputKeyValue {...rest} />;

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

@@ -12,32 +12,35 @@ import { ViewContainer, Title, StatusLoader, Message } from 'joyent-ui-toolkit';
 import GetMetadata from '@graphql/list-metadata.gql';
 import { KeyValue } from '@components/instances';
 
+const MetadataForms = (metadata = []) => metadata.map(({ key, formName, formValue, value, name }) => {
+  const MetadataForm = reduxForm({
+    form: `instance-metadata-${key}`,
+    initialValues: {
+      [formName]: name,
+      [formValue]: value
+    }
+  })(KeyValue);
+
+  return (
+    <MetadataForm
+      key={key}
+      formName={formName}
+      formValue={formValue}
+      name={key}
+      onSubmit={val => console.log(key, val)}
+      onRemove={key => console.log('remove', key)}
+      textarea
+    />
+  );
+});
+
 const Metadata = ({ metadata = [], loading, error }) => {
   const _title = <Title>Metadata</Title>;
   const _loading = !(loading && !forceArray(metadata).length) ? null : (
     <StatusLoader />
   );
 
-  const metadataNames = Object.keys(metadata).map(name => ({
+  const _metadata = !_loading && MetadataForms(metadata);
-    key: paramCase(name),
-    name
-  }));
-
-  const InstanceMetadataForm = reduxForm({
-    form: `instance-tags`,
-    initialValues: metadataNames.reduce(
-      (all, { key, name }) => ({
-        ...all,
-        [`${key}-name`]: name,
-        [`${key}-value`]: metadata[name]
-      }),
-      {}
-    )
-  })(KeyValue);
-
-  const _tags = !_loading && (
-    <InstanceMetadataForm keys={metadataNames.map(({ key }) => key)} />
-  );
 
   const _error = !(error && !_loading) ? null : (
     <Message
@@ -52,7 +55,7 @@ const Metadata = ({ metadata = [], loading, error }) => {
       {_title}
       {_loading}
       {_error}
-      {_tags}
+      {_metadata}
     </ViewContainer>
   );
 };
@@ -69,14 +72,30 @@ export default compose(
         name: get(match, 'params.instance')
       }
     }),
-    props: ({ data: { loading, error, variables, ...rest } }) => ({
+    props: ({ data: { loading, error, variables, ...rest } }) => {
-      metadata: get(
+      const values = get(
         find(get(rest, 'machines', []), ['name', variables.name]),
         'metadata',
         []
-      ),
+      );
-      loading,
+
-      error
+
-    })
+      const metadata = Object.keys(values).reduce((all, name) => {
+        const key = paramCase(name);
+
+        return {
+          ...all,
+          [key]: {
+            key,
+            formName: `${key}-name`,
+            formValue: `${key}-value`,
+            value: values[name],
+            name
+          }
+        };
+      }, {});
+
+      return { metadata: Object.values(metadata), loading, error };
+    }
   })
 )(Metadata);