fix(my-joy-beta): update ui tests

packages/my-joy-beta/src/components/__tests__/firewall.spec.js

@@ -3,7 +3,13 @@ import React from 'react';
 import renderer from 'react-test-renderer';
 import 'jest-styled-components';
 
-import { Rules, TagRules, DefaultRules, ToggleFirewallForm, ToggleInactiveForm } from '../firewall';
+import {
+  Rules,
+  TagRules,
+  DefaultRules,
+  ToggleFirewallForm,
+  ToggleInactiveForm
+} from '../firewall';
 
 import Theme from '@mocks/theme';
 

packages/my-joy-beta/src/components/cns.js

@@ -4,7 +4,6 @@ import remcalc from 'remcalc';
 import { Margin, Padding } from 'styled-components-spacing';
 import Flex, { FlexItem } from 'styled-flex-component';
 import { Field } from 'redux-form';
-import copy from 'clipboard-copy';
 import { CopiableField } from '@components/instances/summary';
 
 import {
@@ -36,8 +35,8 @@ export const Header = () => (
     <H3>Hostnames</H3>
     <Padding bottom={2}>
       <P>
-        Default hostnames are automatically generated from both the instance name and any attached
-        networks.
+        Default hostnames are automatically generated from both the instance
+        name and any attached networks.
       </P>
     </Padding>
   </Fragment>
@@ -68,15 +67,20 @@ export const HostnamesHeader = () => (
     <H3>CNS service hostnames</H3>
     <Padding bottom={3}>
       <P>
-        CNS service hostnames are created by attaching a CNS service name to one or more instances.
-        You can serve multiple instances under the same hostname by assigning them to a matching CNS
-        service name.
+        CNS service hostnames are created by attaching a CNS service name to one
+        or more instances. You can serve multiple instances under the same
+        hostname by assigning them to a matching CNS service name.
       </P>
     </Padding>
   </Margin>
 );
 
-export const AddServiceForm = ({ handleSubmit, submitting, disabled, pristine }) => (
+export const AddServiceForm = ({
+  handleSubmit,
+  submitting,
+  disabled,
+  pristine
+}) => (
   <form onSubmit={handleSubmit}>
     <Flex alignEnd wrap>
       <FlexItem>
@@ -105,7 +109,13 @@ export const AddServiceForm = ({ handleSubmit, submitting, disabled, pristine })
   </form>
 );
 
-export const Hostname = ({ copy, values = [], network, service, ...hostname }) => (
+export const Hostname = ({
+  copy,
+  values = [],
+  network,
+  service,
+  ...hostname
+}) => (
   <Fragment>
     {values.length ? (
       <Margin bottom={4}>
@@ -113,11 +123,15 @@ export const Hostname = ({ copy, values = [], network, service, ...hostname }) =
           <SmallBordered bold noMargin>
             {network && service
               ? 'Network CNS service'
-              : network ? 'Network' : service ? 'CNS service' : 'Instance name'}{' '}
+              : network
+                ? 'Network'
+                : service ? 'CNS service' : 'Instance name'}{' '}
             hostname{values.length === 1 ? '' : 's'}
           </SmallBordered>
           <FlexItem>
-            <Margin right={1}>{hostname.public ? <PublicIcon /> : <PrivateIcon />}</Margin>
+            <Margin right={1}>
+              {hostname.public ? <PublicIcon /> : <PrivateIcon />}
+            </Margin>
           </FlexItem>
           <FlexItem>
             <Small noMargin>{hostname.public ? 'Public' : 'Private'}</Small>
@@ -126,7 +140,10 @@ export const Hostname = ({ copy, values = [], network, service, ...hostname }) =
         {values.map((value, i) => (
           <Margin
             top={0.5}
-            bottom={values.length !== 1 && values.length !== i + 1 ? '1' : undefined}>
+            bottom={
+              values.length !== 1 && values.length !== i + 1 ? '1' : undefined
+            }
+          >
             {copy ? (
               <CopiableField disabled md={12} text={value} />
             ) : (
@@ -169,7 +186,9 @@ const CnsHostnames = ({
                 active
                 key={value}
                 value={value}
-                onRemoveClick={onRemoveService && (() => onRemoveService(value))}
+                onRemoveClick={
+                  onRemoveService && (() => onRemoveService(value))
+                }
               />
             ))}
           </TagList>
@@ -187,17 +206,27 @@ const CnsHostnames = ({
   </Fragment>
 );
 
-export default ({ copy, hostnames = [], services = [], onRemoveService, children = null }) => (
+export default ({
+  copy,
+  hostnames = [],
+  services = [],
+  onRemoveService,
+  children = null
+}) => (
   <Card>
     <Padding all={4} bottom={0}>
-      <DefaultHostnames copy={copy} hostnames={hostnames.filter(({ service }) => !service)} />
+      <DefaultHostnames
+        copy={copy}
+        hostnames={hostnames.filter(({ service }) => !service)}
+      />
       <Divider height={remcalc(1)} />
       <Margin top={4}>
         <CnsHostnames
           copy={copy}
           services={services}
           hostnames={hostnames.filter(({ service }) => service)}
-          onRemoveService={onRemoveService}>
+          onRemoveService={onRemoveService}
+        >
           {children}
         </CnsHostnames>
       </Margin>

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

@@ -6,9 +6,9 @@ Array [
     
     :
 </b>,
-  " be on a ",
+  " be on a",
   " ",
-  "node as the instance(s) identified by the instance ",
+  " node as the instance(s) identified by the instance ",
   " ",
   "key “",
   "\\" and the instance tag value",
@@ -25,9 +25,9 @@ Array [
     
     :
 </b>,
-  " be on a ",
+  " be on a",
   " ",
-  "node as the instance(s) identified by the instance ",
+  " node as the instance(s) identified by the instance ",
   " ",
   "key “",
   "\\" and the instance tag value",

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

@@ -35,7 +35,8 @@ export const Rule = rule => (
           style={style}
           touched={rule['rule-instance-conditional']}
           width={remcalc(66)}
-          embedded>
+          embedded
+        >
           <option value="must">must</option>
           <option value="should">should</option>
         </Select>
@@ -48,7 +49,8 @@ export const Rule = rule => (
           style={style}
           touched={rule['rule-instance-placement']}
           width={remcalc(90)}
-          embedded>
+          embedded
+        >
           <option value="same">the same</option>
           <option value="different">a different</option>
         </Select>
@@ -57,7 +59,13 @@ export const Rule = rule => (
         node as the instance(s) identified by the
       </H5>
       <FormGroup name="rule-type" field={Field}>
-        <Select style={style} touched={rule['rule-type']} width={remcalc(120)} embedded left>
+        <Select
+          style={style}
+          touched={rule['rule-type']}
+          width={remcalc(120)}
+          embedded
+          left
+        >
           <option value="name">instance name</option>
           <option value="tag">tag</option>
         </Select>
@@ -116,8 +124,9 @@ export const Rule = rule => (
 
 export const Header = rule => (
   <Fragment>
-    <b>{titleCase(rule['rule-instance-conditional'])}:</b> be on a {rule['rule-instance-placement']}{' '}
-    node as the instance(s) identified by the instance {rule['rule-type']}
+    <b>{titleCase(rule['rule-instance-conditional'])}:</b> be on a{' '}
+    {rule['rule-instance-placement']} node as the instance(s) identified by the
+    instance {rule['rule-type']}
     {rule['rule-type'] === 'name' ? (
       <Fragment>
         {' '}

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

@@ -56,7 +56,9 @@ export const Collapsed = ({ name, fabric, ...network }) => (
                 <FlexItem>
                   <Flex alignCenter>
                     <FlexItem>
-                      <Margin right={1}>{network.public ? <PublicIcon /> : <PrivateIcon />}</Margin>
+                      <Margin right={1}>
+                        {network.public ? <PublicIcon /> : <PrivateIcon />}
+                      </Margin>
                     </FlexItem>
                     <FlexItem>
                       <P>{network.public ? 'Public' : 'Private'}</P>
@@ -68,7 +70,9 @@ export const Collapsed = ({ name, fabric, ...network }) => (
                 <FlexItem>
                   <Flex alignCenter>
                     <FlexItem>
-                      <Margin right={1}>{fabric ? <FabricIcon /> : <DataCenterIcon />}</Margin>
+                      <Margin right={1}>
+                        {fabric ? <FabricIcon /> : <DataCenterIcon />}
+                      </Margin>
                     </FlexItem>
                     <FlexItem>
                       <P>{fabric ? 'Fabric network' : 'Data center network'}</P>
@@ -137,10 +141,14 @@ export const Expanded = ({
                   <FlexItem>
                     <Flex alignCenter>
                       <FlexItem>
-                        <Margin right={1}>{fabric ? <FabricIcon /> : <DataCenterIcon />}</Margin>
+                        <Margin right={1}>
+                          {fabric ? <FabricIcon /> : <DataCenterIcon />}
+                        </Margin>
                       </FlexItem>
                       <FlexItem>
-                        <P>{fabric ? 'Fabric network' : 'Data center network'}</P>
+                        <P>
+                          {fabric ? 'Fabric network' : 'Data center network'}
+                        </P>
                       </FlexItem>
                     </Flex>
                   </FlexItem>
@@ -149,7 +157,11 @@ export const Expanded = ({
               {fabric ? (
                 <Margin top={3}>
                   <Card collapsed={!infoExpanded} actionable={!infoExpanded}>
-                    <CardHeader secondary={false} transparent={false} onClick={onInfoClick}>
+                    <CardHeader
+                      secondary={false}
+                      transparent={false}
+                      onClick={onInfoClick}
+                    >
                       <CardHeaderMeta>
                         <Padding left={3} right={3}>
                           <P>Network information</P>
@@ -167,7 +179,11 @@ export const Expanded = ({
                               <FlexItem>
                                 <Margin bottom={3}>
                                   <Flex alignCenter>
-                                    <DotIcon right={remcalc(6)} size={remcalc(12)} color="green" />
+                                    <DotIcon
+                                      right={remcalc(6)}
+                                      size={remcalc(12)}
+                                      color="green"
+                                    />
                                     <Small bold noMargin>
                                       Outbound internet access enabled
                                     </Small>
@@ -179,7 +195,13 @@ export const Expanded = ({
                               <FormGroup name="id">
                                 <FormLabel>ID</FormLabel>
                                 <Margin top={0.5} bottom={2}>
-                                  <Input onBlur={null} big monospace type="text" value={id} />
+                                  <Input
+                                    onBlur={null}
+                                    big
+                                    monospace
+                                    type="text"
+                                    value={id}
+                                  />
                                 </Margin>
                               </FormGroup>
                             </FlexItem>
@@ -187,7 +209,13 @@ export const Expanded = ({
                               <FormGroup name="subnet">
                                 <FormLabel>Subnet</FormLabel>
                                 <Margin top={0.5} bottom={2}>
-                                  <Input onBlur={null} big monospace type="text" value={subnet} />
+                                  <Input
+                                    onBlur={null}
+                                    big
+                                    monospace
+                                    type="text"
+                                    value={subnet}
+                                  />
                                 </Margin>
                               </FormGroup>
                             </FlexItem>

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

@@ -132,7 +132,11 @@ export const Package = ({
           <Flex alignCenter>
             {GroupIcons[group]}
             <Margin left={1} right={2}>
-              <FormLabel style={{fontWeight: sortBy === 'name' ? 'bold': 'normal'}}>{name}</FormLabel>
+              <FormLabel
+                style={{ fontWeight: sortBy === 'name' ? 'bold' : 'normal' }}
+              >
+                {name}
+              </FormLabel>
             </Margin>
           </Flex>
         </Radio>
@@ -180,7 +184,8 @@ export const Packages = ({
             left
             middle
             xs="200"
-            actionable>
+            actionable
+          >
             <span>Name </span>
           </TableTh>
           <TableTh
@@ -190,7 +195,8 @@ export const Packages = ({
             showSort={sortBy === 'memory'}
             right
             middle
-            actionable>
+            actionable
+          >
             <span>RAM </span>
           </TableTh>
           <TableTh
@@ -200,7 +206,8 @@ export const Packages = ({
             showSort={sortBy === 'disk'}
             right
             middle
-            actionable>
+            actionable
+          >
             <span>Disk </span>
           </TableTh>
           {hasVms && (
@@ -211,7 +218,8 @@ export const Packages = ({
               showSort={sortBy === 'vcpu'}
               right
               middle
-              actionable>
+              actionable
+            >
               <span>vCPU</span>
             </TableTh>
           )}
@@ -222,7 +230,8 @@ export const Packages = ({
             showSort={sortBy === 'price'}
             right
             middle
-            actionable>
+            actionable
+          >
             <span>$/hour</span>
           </TableTh>
         </TableTr>
@@ -230,12 +239,23 @@ export const Packages = ({
       <TableTbody>{children}</TableTbody>
     </Table>
     {!packages ? (
-      <Empty>Sorry, but we weren’t able to find any packages with that filter</Empty>
+      <Empty>
+        Sorry, but we weren’t able to find any packages with that filter
+      </Empty>
     ) : null}
   </form>
 );
 
-export const Overview = ({ name, price, memory, vcpus, hasVms, ssd, disk, onCancel }) => (
+export const Overview = ({
+  name,
+  price,
+  memory,
+  vcpus,
+  hasVms,
+  ssd,
+  disk,
+  onCancel
+}) => (
   <Fragment>
     <Margin bottom={2}>
       <H3 bold noMargin>

packages/my-joy-beta/src/components/empty.js

@@ -12,14 +12,14 @@ const NoPackagesTitle = styled(H3)`
 
 const FullWidthCard = styled(Card)`
   width: 100%;
-`
+`;
 
 export default ({ children }) => (
   <FullWidthCard>
     <Padding all={6}>
       <Flex alignCenter justifyCenter column>
         <Margin bottom={2}>
-          <img src={NoPackagesImage} alt="Sad Animal"/>
+          <img src={NoPackagesImage} alt="Sad Animal" />
         </Margin>
         <NoPackagesTitle>{children}</NoPackagesTitle>
       </Flex>

packages/my-joy-beta/src/components/firewall.js

@@ -5,11 +5,21 @@ import { Margin, Padding } from 'styled-components-spacing';
 import Flex, { FlexItem } from 'styled-flex-component';
 import { Row, Col } from 'joyent-react-styled-flexboxgrid';
 
-import { H3, FormGroup, FormLabel, Toggle, TagList, P, Strong, Card } from 'joyent-ui-toolkit';
+import {
+  H3,
+  FormGroup,
+  FormLabel,
+  Toggle,
+  TagList,
+  P,
+  Strong,
+  Card
+} from 'joyent-ui-toolkit';
 
 import Tag from '@components/tags';
 
-const capitalizeFirstLetter = string => string.charAt(0).toUpperCase() + string.slice(1);
+const capitalizeFirstLetter = string =>
+  string.charAt(0).toUpperCase() + string.slice(1);
 
 const Wildcards = {
   vmall: 'All VMs in DC',

packages/my-joy-beta/src/components/instances/list.js

@@ -69,7 +69,8 @@ export const Item = ({
         <StatusLoader small />
       ) : (
         <span>
-          <DotIcon size={remcalc(12)} color={stateColor[state]} /> {titleCase(state)}
+          <DotIcon size={remcalc(12)} color={stateColor[state]} />{' '}
+          {titleCase(state)}
         </span>
       )}
     </TableTd>
@@ -139,7 +140,8 @@ export default ({
             showSort={sortBy === 'name'}
             left
             middle
-            actionable>
+            actionable
+          >
             <span>Name </span>
           </TableTh>
           <TableTh
@@ -149,7 +151,8 @@ export default ({
             showSort={sortBy === 'state'}
             left
             middle
-            actionable>
+            actionable
+          >
             <span>Status </span>
           </TableTh>
           <TableTh
@@ -160,7 +163,8 @@ export default ({
             showSort={sortBy === 'created'}
             left
             middle
-            actionable>
+            actionable
+          >
             <span>Created </span>
           </TableTh>
           <TableTh
@@ -171,7 +175,8 @@ export default ({
             showSort={sortBy === 'id'}
             left
             middle
-            actionable>
+            actionable
+          >
             <span>Short ID </span>
           </TableTh>
           <TableTh xs="60" padding="0" />

packages/my-joy-beta/src/components/instances/snapshots.js

@@ -30,7 +30,15 @@ const stateColor = {
   CREATED: 'green'
 };
 
-export const Item = ({ name, state, created, onStart, onRemove, updated, mutating }) => (
+export const Item = ({
+  name,
+  state,
+  created,
+  onStart,
+  onRemove,
+  updated,
+  mutating
+}) => (
   <TableTr>
     {!mutating ? (
       <Fragment>
@@ -43,7 +51,8 @@ export const Item = ({ name, state, created, onStart, onRemove, updated, mutatin
           {name}
         </TableTd>
         <TableTd middle left>
-          <DotIcon size={remcalc(12)} color={stateColor[state]} /> {titleCase(state)}
+          <DotIcon size={remcalc(12)} color={stateColor[state]} />{' '}
+          {titleCase(state)}
         </TableTd>
         <TableTd xs="0" sm="160" middle left>
           {distanceInWordsToNow(created)}
@@ -72,7 +81,15 @@ export const Item = ({ name, state, created, onStart, onRemove, updated, mutatin
 );
 
 export const AddForm = props => (
-  <KeyValue {...props} method="create" input="input" type="snapshot" expanded onlyName noRemove />
+  <KeyValue
+    {...props}
+    method="create"
+    input="input"
+    type="snapshot"
+    expanded
+    onlyName
+    noRemove
+  />
 );
 
 export default ({
@@ -111,7 +128,8 @@ export default ({
             showSort={sortBy === 'name'}
             left
             middle
-            actionable>
+            actionable
+          >
             <span>Name </span>
           </TableTh>
           <TableTh
@@ -121,7 +139,8 @@ export default ({
             showSort={sortBy === 'state'}
             left
             middle
-            actionable>
+            actionable
+          >
             <span>Status </span>
           </TableTh>
           <TableTh
@@ -132,7 +151,8 @@ export default ({
             showSort={sortBy === 'created'}
             left
             middle
-            actionable>
+            actionable
+          >
             <span>Created </span>
           </TableTh>
           <TableTh
@@ -143,7 +163,8 @@ export default ({
             showSort={sortBy === 'updated'}
             left
             middle
-            actionable>
+            actionable
+          >
             <span>Updated </span>
           </TableTh>
           <TableTh xs="60" padding="0" />