fix(my-joy-beta): create instance - affinity ui fixes

fixes #1014

packages/my-joy-beta/src/components/create-instance/__tests__/__snapshots__/affinity.spec.js.snap

@@ -10,9 +10,11 @@ Array [
   " ",
   " node as the instance(s) identified by the instance ",
   " ",
-  "key ",
+  "key “",
-  " “",
+  "\\" and the instance tag value",
-  "\\" and the instance tag value ",
+  " ",
+  " ",
+  "\\"",
   "”",
 ]
 `;
@@ -27,9 +29,11 @@ Array [
   " ",
   " node as the instance(s) identified by the instance ",
   " ",
-  "key ",
+  "key “",
-  " “",
+  "\\" and the instance tag value",
-  "\\" and the instance tag value ",
+  " ",
+  " ",
+  "\\"",
   "”",
 ]
 `;
@@ -198,7 +202,7 @@ exports[`renders <Rule/> without throwing 1`] = `
 }
 
 .c4:after {
-  right: 0rem;
+  right: 0.375rem;
 }
 
 .c7 {
@@ -231,7 +235,7 @@ exports[`renders <Rule/> without throwing 1`] = `
 }
 
 .c7:after {
-  right: 0rem;
+  right: 0.375rem;
 }
 
 .c6 {
@@ -664,7 +668,7 @@ exports[`renders <Rule/> without throwing 2`] = `
 }
 
 .c4:after {
-  right: 0rem;
+  right: 0.375rem;
 }
 
 .c7 {
@@ -697,7 +701,7 @@ exports[`renders <Rule/> without throwing 2`] = `
 }
 
 .c7:after {
-  right: 0rem;
+  right: 0.375rem;
 }
 
 .c6 {

packages/my-joy-beta/src/components/create-instance/__tests__/affinity.spec.js

@@ -27,7 +27,6 @@ it('renders <Rule/> without throwing', () => {
               'rule-instance-name': 'test',
               'rule-instance-conditional': 'must',
               'rule-instance-placement': 'same',
-              'rule-instance-tag-key-pattern': 'equalling',
               'rule-instance-tag-value-pattern': 'equalling',
               'rule-instance-name-pattern': 'equalling',
               'rule-instance-tag-value': '',
@@ -51,7 +50,6 @@ it('renders <Header /> without throwing', () => {
               'rule-instance-name': 'test',
               'rule-instance-conditional': 'must',
               'rule-instance-placement': 'same',
-              'rule-instance-tag-key-pattern': 'equalling',
               'rule-instance-tag-value-pattern': 'equalling',
               'rule-instance-name-pattern': 'equalling',
               'rule-instance-tag-value': '',
@@ -75,7 +73,6 @@ it('renders <Header tag/> without throwing', () => {
               'rule-instance-name': 'test',
               'rule-instance-conditional': 'must',
               'rule-instance-placement': 'same',
-              'rule-instance-tag-key-pattern': 'equalling',
               'rule-instance-tag-value-pattern': 'equalling',
               'rule-instance-name-pattern': 'equalling',
               'rule-instance-tag-value': 'one',

packages/my-joy-beta/src/components/create-instance/__tests__/network.spec.js

@@ -1,3 +1,5 @@
+/* eslint-disable camelcase */
+
 import React from 'react';
 import renderer from 'react-test-renderer';
 import 'jest-styled-components';

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

@@ -7,9 +7,9 @@ import titleCase from 'title-case';
 
 import { H5, Select, Input, FormGroup } from 'joyent-ui-toolkit';
 
-const Values = (
+const Values = touched => (
   <Margin right={1}>
-    <Select embedded>
+    <Select embedded touched={touched}>
       <option value="equalling">equalling</option>
       <option value="not-equalling">not equalling</option>
       <option value="containing">containing</option>
@@ -26,7 +26,7 @@ export const Rule = rule => (
         The instance
       </H5>
       <FormGroup name="rule-instance-conditional" field={Field}>
-        <Select embedded>
+        <Select embedded touched={rule['rule-instance-conditional']}>
           <option value="must">must</option>
           <option value="should">should</option>
         </Select>
@@ -35,7 +35,7 @@ export const Rule = rule => (
         be on
       </H5>
       <FormGroup name="rule-instance-placement" field={Field}>
-        <Select embedded>
+        <Select embedded touched={rule['rule-instance-placement']}>
           <option value="same">the same</option>
           <option value="different">a different</option>
         </Select>
@@ -44,7 +44,7 @@ export const Rule = rule => (
         node as the instance(s) identified by the
       </H5>
       <FormGroup name="rule-type" field={Field}>
-        <Select embedded left>
+        <Select embedded left touched={rule['rule-type']}>
           <option value="name">instance name</option>
           <option value="tag">tag</option>
         </Select>
@@ -58,7 +58,7 @@ export const Rule = rule => (
             and value{' '}
           </H5>
           <FormGroup name="rule-instance-tag-value-pattern" field={Field}>
-            {Values}
+            {Values(rule['rule-instance-tag-value-pattern'])}
           </FormGroup>
           <FormGroup name="rule-instance-tag-value" field={Field}>
             <Input small embedded type="text" required placeholder="value" />
@@ -67,7 +67,7 @@ export const Rule = rule => (
       ) : (
         <Fragment>
           <FormGroup name="rule-instance-name-pattern" field={Field}>
-            {Values}
+            {Values(rule['rule-instance-name-pattern'])}
           </FormGroup>
           <FormGroup name="rule-instance-name" field={Field}>
             <Input
@@ -96,9 +96,10 @@ export const Header = rule => (
     ) : (
       <Fragment>
         {' '}
-        key {rule['rule-instance-tag-key-pattern']} “{rule['rule-instance-tag-key']}"
+        key “{rule['rule-instance-tag-key']}" and the instance tag value{' '}
-        and the instance tag value {rule['rule-instance-tag-value-pattern']}
+        {rule['rule-instance-tag-value-pattern'] &&
-        {rule['rule-instance-tag-value']}”
+          rule['rule-instance-tag-value-pattern'].split('-').join(' ')}{' '}
+        "{rule['rule-instance-tag-value']}”
       </Fragment>
     )}
   </Fragment>

packages/my-joy-beta/src/containers/create-instance/__tests__/networks.spec.js

@@ -1,3 +1,5 @@
+/* eslint-disable camelcase */
+
 import React from 'react';
 import renderer from 'react-test-renderer';
 import 'jest-styled-components';

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

@@ -8,7 +8,7 @@ import { connect } from 'react-redux';
 import get from 'lodash.get';
 import remcalc from 'remcalc';
 
-import { AffinityIcon, P, Button, H3, Divider } from 'joyent-ui-toolkit';
+import { AffinityIcon, Button, H3, Divider } from 'joyent-ui-toolkit';
 
 import Title from '@components/create-instance/title';
 import { Rule, Header } from '@components/create-instance/affinity';
@@ -49,12 +49,12 @@ export const Affinity = ({
     <Title icon={<AffinityIcon />}>Affinity</Title>
     {expanded ? (
       <Description>
-        Affinity rules control the location of instances, to help reduce traffic
+        Control placement of instances on the physical servers. Design
-        across networks and keep the workload balanced. With strict rules,
+        applications to adapt at failure by distributing application components.
-        instances are only provisioned when the criteria is met.{' '}
+        Instances are only provisioned when the exact criteria is met.{' '}
         <a
           target="__blank"
-          href="https://apidocs.joyent.com/docker/features/placement"
+          href="https://docs.joyent.com/public-cloud/instances/docker/how/start-containers#controlling-container-placement"
         >
           Read the docs
         </a>
@@ -62,9 +62,7 @@ export const Affinity = ({
     ) : null}
     {proceeded ? (
       <Margin bottom={4}>
-        <H3>
+        <H3>{affinityRules.length} Affinity Rule</H3>
-          {affinityRules.length} Affinity Rule{affinityRules.length === 1 ? '' : 's'}
-        </H3>
       </Margin>
     ) : null}
     {affinityRules.map((rule, index) => (
@@ -114,13 +112,15 @@ export const Affinity = ({
     <div>
       {expanded ? (
         <Fragment>
-          <Button
+          {affinityRules.length === 0 ? (
-            type="button"
+            <Button
-            onClick={() => handleChangeAddOpen(true)}
+              type="button"
-            secondary
+              onClick={() => handleChangeAddOpen(true)}
-          >
+              secondary
-            Create affinity rule
+            >
-          </Button>
+              Create affinity rule
+            </Button>
+          ) : null}
           <Margin top={2} bottom={4}>
             <Button type="submit" onClick={handleNext}>
               Next

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

@@ -1,3 +1,5 @@
+/* eslint-disable camelcase */
+
 import React, { Fragment } from 'react';
 import { compose, graphql } from 'react-apollo';
 import { Margin } from 'styled-components-spacing';
@@ -108,7 +110,7 @@ export default compose(
       }
     }),
     props: ({ ownProps, data }) => {
-      const { enabled, showInactive, tags = [] } = ownProps;
+      const { enabled, showInactive } = ownProps;
 
       const {
         firewall_rules_create_machine = [],

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

@@ -1,3 +1,5 @@
+/* eslint-disable camelcase */
+
 import React from 'react';
 import { Margin } from 'styled-components-spacing';
 import ReduxForm from 'declarative-redux-form';
@@ -24,6 +26,8 @@ import Affinity from '@containers/create-instance/affinity';
 import CreateInstanceMutation from '@graphql/create-instance.gql';
 import parseError from '@state/parse-error';
 
+const CREATE_FORM = 'CREATE-INSTANCE';
+
 const CreateInstance = ({ step, handleSubmit, ...props }) => (
   <ViewContainer>
     <Margin top={4} bottom={4}>
@@ -57,7 +61,7 @@ const CreateInstance = ({ step, handleSubmit, ...props }) => (
       <Affinity {...props} expanded={step === 'affinity'} />
     </Margin>
     <Margin top={7} bottom={10}>
-      <ReduxForm form="create-instance" onSubmit={handleSubmit}>
+      <ReduxForm form={CREATE_FORM} onSubmit={handleSubmit}>
         {({ handleSubmit, submitting }) => (
           <form onSubmit={handleSubmit}>
             <Button disabled={step !== 'summary'} loading={submitting}>
@@ -134,12 +138,13 @@ export default compose(
           `${conditional}_${placement === 'same' ? 'equal' : 'not_equal'}`
         );
 
+        console.log(pattern);
         const patterns = {
           equalling: value => value,
-          'not-equalling': `/^!${value}$/`,
+          'not-equalling': value => `/^!${value}$/`,
-          containing: `/${value}/`,
+          containing: value => `/${value}/`,
-          starting: `/^${value}/`,
+          starting: value => `/^${value}/`,
-          ending: `/${value}$/`
+          ending: value => `/${value}$/`
         };
 
         const _key = identity === 'name' ? 'instance' : key;
@@ -198,7 +203,7 @@ export default compose(
 
         if (err) {
           return dispatch(
-            stopSubmit(TABLE_FORM_NAME, {
+            stopSubmit(CREATE_FORM, {
               _error: parseError(err)
             })
           );

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

@@ -7,7 +7,7 @@ import ReduxForm from 'declarative-redux-form';
 import { connect } from 'react-redux';
 import get from 'lodash.get';
 
-import { MetadataIcon, P, Button, H3 } from 'joyent-ui-toolkit';
+import { MetadataIcon, Button, H3 } from 'joyent-ui-toolkit';
 
 import Title from '@components/create-instance/title';
 import Description from '@components/create-instance/description';

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

@@ -6,7 +6,7 @@ import { connect } from 'react-redux';
 import get from 'lodash.get';
 import forceArray from 'force-array';
 
-import { NetworkIcon, P, Button, H3, StatusLoader } from 'joyent-ui-toolkit';
+import { NetworkIcon, Button, H3, StatusLoader } from 'joyent-ui-toolkit';
 
 import Description from '@components/create-instance/description';
 import Title from '@components/create-instance/title';

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

@@ -9,7 +9,7 @@ import sortBy from 'lodash.sortby';
 import find from 'lodash.find';
 import constantCase from 'constant-case';
 
-import { PackageIcon, StatusLoader, P } from 'joyent-ui-toolkit';
+import { PackageIcon, StatusLoader } from 'joyent-ui-toolkit';
 import {
   Filters,
   Packages,

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

@@ -7,7 +7,7 @@ import ReduxForm from 'declarative-redux-form';
 import { connect } from 'react-redux';
 import get from 'lodash.get';
 
-import { TagsIcon, P, Button, H3, TagList } from 'joyent-ui-toolkit';
+import { TagsIcon, Button, H3, TagList } from 'joyent-ui-toolkit';
 
 import Title from '@components/create-instance/title';
 import Tag from '@components/instances/tags';

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

@@ -41,7 +41,7 @@ const SelectWrapper = styled.div`
       margin: 0 ${remcalc(6)};
       min-width: 0;
       &:after {
-        right: ${remcalc(0)};
+        right: ${remcalc(6)};
       }
   `};
 
@@ -83,6 +83,10 @@ const StyledSelect = select.extend`
     margin: 0 ${remcalc(6)};
   `};
 
+  ${is('embedded', 'touched')`
+    color: ${props => props.theme.text};
+  `}
+
   ${is('wrapped')`
     margin: 0;
     border: none;