add new tabs

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

@@ -7,19 +7,24 @@ import Flex from 'styled-flex-component';
 import pascalCase from 'pascal-case';
 import titleCase from 'title-case';
 import remcalc from 'remcalc';
+import format from 'date-fns/format';
 
 import {
   H3,
   P,
   FormGroup,
   FormLabel,
-  Toggle,
+  SectionList,
+  SectionListItem,
+  SectionListAnchor,
+  Anchor,
   H4,
   Select,
   Card
 } from 'joyent-ui-toolkit';
 
 import * as Assets from 'joyent-logo-assets';
+import { isDate } from 'date-fns';
 
 const Version = styled(Select)`
   min-width: 100%;
@@ -33,6 +38,15 @@ const Version = styled(Select)`
   }
 `;
 
+const parseDate = str => {
+  const y = str.substr(0, 4);
+  const m = str.substr(4, 2) - 1;
+  const d = str.substr(6, 2);
+  const D = new Date(y, m, d);
+  const isDate = D.getFullYear() == y && D.getMonth() == m && D.getDate() == d;
+  return isDate ? format(D, 'MM/DD/YYYY') : str;
+};
+
 export const Preview = ({ name, version, isVm }) => (
   <Fragment>
     <Margin bottom={2} top={3}>
@@ -72,7 +86,7 @@ const Image = ({ onClick, active, ...image }) => {
                 <option
                   key={`${name} - ${version}`}
                   value={id}
-                >{`${name} - ${version}`}</option>
+                >{`${name} - ${parseDate(version)}`}</option>
               ))}
             </Version>
           </FormGroup>
@@ -82,17 +96,21 @@ const Image = ({ onClick, active, ...image }) => {
   );
 };
 
-export const ImageType = () => (
-  <form>
-    <Margin bottom={4}>
-      <FormGroup name="vms" field={Field}>
-        <Flex alignCenter>
-          <FormLabel>Infrastructure Container </FormLabel>
-          <Toggle onBlur={null}>Hardware Virtual Machine</Toggle>
-        </Flex>
-      </FormGroup>
-    </Margin>
-  </form>
+export const ImageType = ({ setImageType, vms }) => (
+  <Margin bottom={4}>
+    <SectionList>
+      <SectionListItem>
+        <SectionListAnchor active={!vms} onClick={() => setImageType(false)}>
+          Hardware virtual machine
+        </SectionListAnchor>
+      </SectionListItem>
+      <SectionListItem>
+        <SectionListAnchor active={vms} onClick={() => setImageType(true)}>
+          Infrastructure container
+        </SectionListAnchor>
+      </SectionListItem>
+    </SectionList>
+  </Margin>
 );
 
 export default ({ images = [], onSelectLatest }) => (

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

@@ -42,7 +42,8 @@ const ImageContainer = ({
   loading,
   images,
   vms,
-  step
+  step,
+  setImageType
 }) =>
   queryImage ? (
     <Fragment>
@@ -72,14 +73,6 @@ const ImageContainer = ({
           </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}
@@ -90,15 +83,17 @@ const ImageContainer = ({
           loading && expanded ? (
             <StatusLoader />
           ) : expanded ? (
-            <Image
-              {...props}
-              images={images.filter(i => i.isVm === vms)}
-              onSelectLatest={handleSelectLatest}
-            />
+            <Fragment>
+              <ImageType setImageType={setImageType} vms={vms} />
+              <Image
+                {...props}
+                images={images.filter(i => i.isVm === vms)}
+                onSelectLatest={handleSelectLatest}
+              />
+            </Fragment>
           ) : image.id ? (
             <Preview {...image} />
-          ) : null
-        }
+          ) : null}
       </ReduxForm>
       {expanded ? (
         <Margin top={1} bottom={7}>
@@ -124,7 +119,7 @@ export default compose(
   connect(
     ({ form, values }, ownProps) => {
       const proceeded = get(values, 'create-instance-image-proceeded', false);
-      const vms = get(form, 'create-instance-vms.values.vms', false);
+      const vms = get(values, 'vms', true);
       const image = get(form, 'create-instance-image.values.image', null);
 
       return {
@@ -145,6 +140,9 @@ export default compose(
       handleSelectLatest: ({ versions }) => {
         const id = versions[0].id;
         return dispatch(change('create-instance-image', 'image', id));
+      },
+      setImageType: value => {
+        return dispatch(set({ name: 'vms', value }));
       }
     })
   ),