Merge branch 'master' of https://github.com/yldio/joyent-portal into 1406

consoles/my-joy-images/src/components/empty.js

@@ -4,7 +4,7 @@ import { Margin, Padding } from 'styled-components-spacing';
 import Flex from 'styled-flex-component';
 
 import { H3, Card } from 'joyent-ui-toolkit';
-import { NoPackages } from 'joyent-logo-assets';
+import { EmptyState } from 'joyent-icons';
 
 const NoPackagesTitle = styled(H3)`
   color: ${props => props.theme.greyDark};
@@ -20,7 +20,7 @@ export default ({ children }) => (
     <Padding all={6}>
       <Flex alignCenter justifyCenter column>
         <Margin bottom={2}>
-          <NoPackages />
+          <EmptyState />
         </Margin>
         <NoPackagesTitle>{children}</NoPackagesTitle>
       </Flex>

consoles/my-joy-images/src/components/summary.js

@@ -13,7 +13,7 @@ import {
   CardOutlet,
   H2,
   P,
-  Label,
+  Label as BaseLabel,
   Divider,
   Button,
   QueryBreakpoints,
@@ -43,6 +43,10 @@ const VerticalDivider = styled.div`
   }
 `;
 
+const Label = styled(BaseLabel)`
+  font-weight: 200;
+`;
+
 const GreyLabel = styled(Label)`
   opacity: 0.5;
   padding-right: ${remcalc(3)};
@@ -148,7 +152,7 @@ export default withTheme(({ theme = {}, onRemove, removing, ...image }) => (
                     <Margin right="1">
                       <DeleteIcon fill={theme.red} />
                     </Margin>
-                    <span>Remove</span>
+                    <span>Delete</span>
                   </Button>
                 </Medium>
               </Col>

consoles/my-joy-instances/src/components/instances/__tests__/__snapshots__/toolbar.spec.js.snap

@@ -89,7 +89,6 @@ exports[`renders <Toolbar /> without throwing 1`] = `
   text-align: center;
   font-style: normal;
   font-stretch: normal;
-  line-height: normal;
   -webkit-letter-spacing: normal;
   -moz-letter-spacing: normal;
   -ms-letter-spacing: normal;
@@ -384,7 +383,6 @@ exports[`renders <Toolbar actionLabel /> without throwing 1`] = `
   text-align: center;
   font-style: normal;
   font-stretch: normal;
-  line-height: normal;
   -webkit-letter-spacing: normal;
   -moz-letter-spacing: normal;
   -ms-letter-spacing: normal;
@@ -679,7 +677,6 @@ exports[`renders <Toolbar actionable /> without throwing 1`] = `
   text-align: center;
   font-style: normal;
   font-stretch: normal;
-  line-height: normal;
   -webkit-letter-spacing: normal;
   -moz-letter-spacing: normal;
   -ms-letter-spacing: normal;
@@ -996,7 +993,6 @@ exports[`renders <Toolbar onActionClick /> without throwing 1`] = `
   text-align: center;
   font-style: normal;
   font-stretch: normal;
-  line-height: normal;
   -webkit-letter-spacing: normal;
   -moz-letter-spacing: normal;
   -ms-letter-spacing: normal;
@@ -1291,7 +1287,6 @@ exports[`renders <Toolbar searchLabel /> without throwing 1`] = `
   text-align: center;
   font-style: normal;
   font-stretch: normal;
-  line-height: normal;
   -webkit-letter-spacing: normal;
   -moz-letter-spacing: normal;
   -ms-letter-spacing: normal;
@@ -1586,7 +1581,6 @@ exports[`renders <Toolbar searchPlaceholder /> without throwing 1`] = `
   text-align: center;
   font-style: normal;
   font-stretch: normal;
-  line-height: normal;
   -webkit-letter-spacing: normal;
   -moz-letter-spacing: normal;
   -ms-letter-spacing: normal;
@@ -1881,7 +1875,6 @@ exports[`renders <Toolbar searchable /> without throwing 1`] = `
   text-align: center;
   font-style: normal;
   font-stretch: normal;
-  line-height: normal;
   -webkit-letter-spacing: normal;
   -moz-letter-spacing: normal;
   -ms-letter-spacing: normal;

consoles/my-joy-instances/src/components/instances/footer.js

@@ -1,6 +1,8 @@
 import React from 'react';
 import { Row, Col } from 'joyent-react-styled-flexboxgrid';
 import { withTheme } from 'styled-components';
+import { Margin } from 'styled-components-spacing';
+import Flex from 'styled-flex-component';
 
 import {
   Button,
@@ -25,93 +27,109 @@ export default withTheme(
     onRemove,
     theme = {}
   }) => (
-    <StickyFooter fixed bottom>
+    <StickyFooter fixed bottom fill="#FAFAFA">
       <Row between="xs" middle="xs">
         <Col xs={7}>
-          {onStart && [
+          <Flex>
-            <SmallOnly key="small-only">
+            {onStart && [
-              <Button
+              <SmallOnly key="small-only">
-                type="button"
+                <Button
-                onClick={onStart}
+                  type="button"
-                disabled={submitting || !allowedActions.start}
+                  onClick={onStart}
-                loading={submitting && statuses.starting}
+                  disabled={submitting || !allowedActions.start}
-                secondary
+                  loading={submitting && statuses.starting}
-                small
+                  secondary
-                icon
+                  small
-              >
+                  icon
-                <StartIcon disabled={submitting || !allowedActions.start} />
+                >
-              </Button>
+                  <StartIcon disabled={submitting || !allowedActions.start} />
-            </SmallOnly>,
+                </Button>
-            <Medium key="medium">
+              </SmallOnly>,
-              <Button
+              <Margin right={1}>
-                type="button"
+                <Medium key="medium">
-                onClick={onStart}
+                  <Button
-                disabled={submitting || !allowedActions.start}
+                    type="button"
-                loading={submitting && statuses.starting}
+                    onClick={onStart}
-                secondary
+                    disabled={submitting || !allowedActions.start}
-                icon
+                    loading={submitting && statuses.starting}
-              >
+                    secondary
-                <StartIcon disabled={submitting || !allowedActions.start} />
+                    icon
-                <span>Start</span>
+                  >
-              </Button>
+                    <Margin right={1}>
-            </Medium>
+                      <StartIcon
-          ]}
+                        disabled={submitting || !allowedActions.start}
-          {onStop && [
+                      />
-            <SmallOnly key="small-only">
+                    </Margin>
-              <Button
+                    <span>Start</span>
-                type="button"
+                  </Button>
-                onClick={onStop}
+                </Medium>
-                disabled={submitting || !allowedActions.stop}
+              </Margin>
-                loading={submitting && statuses.stopping}
+            ]}
-                secondary
+            {onStop && [
-                small
+              <SmallOnly key="small-only">
-                icon
+                <Button
-              >
+                  type="button"
-                <StopIcon disabled={submitting || !allowedActions.stop} />
+                  onClick={onStop}
-              </Button>
+                  disabled={submitting || !allowedActions.stop}
-            </SmallOnly>,
+                  loading={submitting && statuses.stopping}
-            <Medium key="medium">
+                  secondary
-              <Button
+                  small
-                type="button"
+                  icon
-                onClick={onStop}
+                >
-                disabled={submitting || !allowedActions.stop}
+                  <StopIcon disabled={submitting || !allowedActions.stop} />
-                loading={submitting && statuses.stopping}
+                </Button>
-                secondary
+              </SmallOnly>,
-                icon
+              <Margin right={1}>
-              >
+                <Medium key="medium">
-                <StopIcon disabled={submitting || !allowedActions.stop} />
+                  <Button
-                <span>Stop</span>
+                    type="button"
-              </Button>
+                    onClick={onStop}
-            </Medium>
+                    disabled={submitting || !allowedActions.stop}
-          ]}
+                    loading={submitting && statuses.stopping}
-          {onReboot && [
+                    secondary
-            <SmallOnly key="small-only">
+                    icon
-              <Button
+                  >
-                type="button"
+                    <Margin right={1}>
-                onClick={onReboot}
+                      <StopIcon disabled={submitting || !allowedActions.stop} />
-                disabled={submitting || !allowedActions.reboot}
+                    </Margin>
-                loading={submitting && statuses.rebooting}
+                    <span>Stop</span>
-                secondary
+                  </Button>
-                small
+                </Medium>
-                icon
+              </Margin>
-              >
+            ]}
-                <ResetIcon disabled={submitting || !allowedActions.reboot} />
+            {onReboot && [
-              </Button>
+              <SmallOnly key="small-only">
-            </SmallOnly>,
+                <Button
-            <Medium key="medium">
+                  type="button"
-              <Button
+                  onClick={onReboot}
-                type="button"
+                  disabled={submitting || !allowedActions.reboot}
-                onClick={onReboot}
+                  loading={submitting && statuses.rebooting}
-                disabled={submitting || !allowedActions.reboot}
+                  secondary
-                loading={submitting && statuses.rebooting}
+                  small
-                secondary
+                  icon
-                icon
+                >
-              >
+                  <ResetIcon disabled={submitting || !allowedActions.reboot} />
-                <ResetIcon disabled={submitting || !allowedActions.reboot} />
+                </Button>
-                <span>Reboot</span>
+              </SmallOnly>,
-              </Button>
+              <Margin right={1}>
-            </Medium>
+                <Medium key="medium">
-          ]}
+                  <Button
+                    type="button"
+                    onClick={onReboot}
+                    disabled={submitting || !allowedActions.reboot}
+                    loading={submitting && statuses.rebooting}
+                    secondary
+                    icon
+                  >
+                    <ResetIcon
+                      disabled={submitting || !allowedActions.reboot}
+                    />
+                    <span>Reboot</span>
+                  </Button>
+                </Medium>
+              </Margin>
+            ]}
+          </Flex>
         </Col>
         {onRemove && (
           <Col xs={5}>
@@ -148,14 +166,16 @@ export default withTheme(
                 right
                 icon
               >
-                <DeleteIcon
+                <Margin right={1}>
-                  disabled={submitting || !allowedActions.remove}
+                  <DeleteIcon
-                  fill={
+                    disabled={submitting || !allowedActions.remove}
-                    !(submitting || !allowedActions.remove)
+                    fill={
-                      ? theme.red
+                      !(submitting || !allowedActions.remove)
-                      : undefined
+                        ? theme.red
-                  }
+                        : undefined
-                />
+                    }
+                  />
+                </Margin>
                 <span>Remove</span>
               </Button>
             </Medium>

consoles/my-joy-instances/src/components/instances/list.js

@@ -7,6 +7,7 @@ import { Link } from 'react-router-dom';
 import { Field } from 'redux-form';
 import Flex from 'styled-flex-component';
 import queryString from 'query-string';
+import { Padding } from 'styled-components-spacing';
 
 import {
   Anchor,
@@ -24,8 +25,8 @@ import {
   Popover,
   PopoverContainer,
   PopoverTarget,
-  PopoverItem,
+  PopoverItem as BasePopoverItem,
-  PopoverDivider,
+  PopoverDivider as BasePopoverDivider,
   DotIcon,
   ActionsIcon
 } from 'joyent-ui-toolkit';
@@ -66,6 +67,14 @@ const Actions = styled(Flex)`
   height: ${remcalc(48)};
 `;
 
+const PopoverItem = styled(BasePopoverItem)`
+  padding-bottom: ${remcalc(11)};
+`;
+
+const PopoverDivider = styled(BasePopoverDivider)`
+  margin-left: ${remcalc(-18)};
+`;
+
 export const FetchingItem = () => (
   <TableTr colSpan="6">
     <TableTd colSpan="6" middle center>
@@ -131,9 +140,14 @@ export const Item = ({
               Stop
             </PopoverItem>
             <PopoverItem disabled={!allowedActions.reboot} onClick={onReboot}>
-              Reboot
+              Restart
             </PopoverItem>
-            <PopoverDivider />
+            <PopoverItem disabled={!allowedActions.remove} onClick={onRemove}>
+              Delete
+            </PopoverItem>
+            <Padding bottom={2}>
+              <PopoverDivider />
+            </Padding>
             <PopoverItem disabled={false} onClick={onCreateImage}>
               <ItemAnchor
                 href={`${GLOBAL.origin}/images/~create/${id}`}
@@ -143,10 +157,6 @@ export const Item = ({
                 Create Image
               </ItemAnchor>
             </PopoverItem>
-            <PopoverDivider />
-            <PopoverItem disabled={!allowedActions.remove} onClick={onRemove}>
-              Remove
-            </PopoverItem>
           </Popover>
         </TableTd>
       </PopoverContainer>

consoles/my-joy-instances/src/components/instances/summary.js

@@ -1,6 +1,7 @@
 import React from 'react';
 import distanceInWordsToNow from 'date-fns/distance_in_words_to_now';
 import { Row, Col } from 'joyent-react-styled-flexboxgrid';
+import { default as Flex, FlexItem } from 'styled-flex-component';
 import styled, { withTheme } from 'styled-components';
 import { Margin, Padding } from 'styled-components-spacing';
 import titleCase from 'title-case';
@@ -13,10 +14,12 @@ import {
   Card,
   CardOutlet,
   Divider,
-  ResetIcon,
+  Button,
-  Button as BaseButton,
+  ButtonGroup,
+  PopoverButton,
+  PopoverItem as BasePopoverItem,
   H2 as BaseH2,
-  Label,
+  Label as BaseLabel,
   CopiableField,
   QueryBreakpoints,
   DotIcon,
@@ -24,7 +27,6 @@ import {
   StartIcon,
   StopIcon,
   EditIcon,
-  InstanceTypeIcon,
   Input,
   FormMeta,
   FormGroup
@@ -43,6 +45,10 @@ const stateColor = {
   FAILED: 'red'
 };
 
+const Label = styled(BaseLabel)`
+  font-weight: 200;
+`;
+
 const GreyLabel = styled(Label)`
   opacity: 0.5;
   padding-right: ${remcalc(3)};
@@ -54,16 +60,6 @@ const TrimedLabel = styled(Label)`
   text-overflow: ellipsis;
 `;
 
-const Flex = styled.div`
-  align-items: center;
-  display: flex;
-  justify-content: flex-start;
-
-  @media (max-width: ${remcalc(breakpoints.small.upper)}) {
-    display: block;
-  }
-`;
-
 const Actionable = styled(Margin)`
   cursor: pointer;
 `;
@@ -85,8 +81,8 @@ const H2 = styled(BaseH2)`
   margin: 0;
 `;
 
-const Button = styled(BaseButton)`
+const PopoverItem = styled(BasePopoverItem)`
-  margin-right: ${remcalc(6)};
+  padding-bottom: ${remcalc(11)};
 `;
 
 export const Meta = ({
@@ -108,7 +104,7 @@ export const Meta = ({
         <H2>
           {editingName ? (
             <form onSubmit={handleSubmit}>
-              <Flex style={{ alignItems: 'start' }}>
+              <Flex alignStart>
                 <FormGroup name="name" field={Field}>
                   <Input
                     onBlur={null}
@@ -125,7 +121,7 @@ export const Meta = ({
                     loading={submitting}
                     inline
                   >
-                    Add
+                    Save
                   </Button>
                 </Margin>
               </Flex>
@@ -201,127 +197,95 @@ export default withTheme(
               <Margin top={3}>
                 <Row between="xs">
                   <Col xs={9}>
-                    <Button
+                    <Flex>
-                      href={`${GLOBAL.origin}/images/~create/${instance.id}`}
+                      <FlexItem>
-                      target="__blank"
+                        <Margin right={1}>
-                      rel="noopener noreferrer"
+                          <ButtonGroup>
-                      secondary
+                            {instance.state === 'STOPPED' ? (
-                      bold
+                              <Button
-                      small
+                                type="button"
-                      icon
+                                loading={starting}
-                    >
+                                disabled={instance.state !== 'STOPPED'}
-                      <Padding top={0.5}>
+                                onClick={() => onAction('start')}
-                        <InstanceTypeIcon />
+                                secondary
-                      </Padding>
+                                bold
-                    </Button>
+                                icon
-                    <SmallOnly>
+                              >
-                      <Button
+                                <Margin right={2}>
-                        href={`${GLOBAL.origin}/images/~create/${instance.id}`}
+                                  <StartIcon
-                        target="__blank"
+                                    disabled={instance.state !== 'STOPPED'}
-                        rel="noopener noreferrer"
+                                  />
-                        secondary
+                                </Margin>
-                        bold
+                                <span>Start</span>
-                        small
+                              </Button>
-                        icon
+                            ) : (
-                      >
+                              <Button
-                        <Padding top={0}>
+                                type="button"
-                          <InstanceTypeIcon />
+                                loading={stopping}
-                        </Padding>
+                                disabled={instance.state !== 'RUNNING'}
-                      </Button>
+                                onClick={() => onAction('stop')}
-                    </SmallOnly>
+                                secondary
-                    <SmallOnly>
+                                bold
-                      <Button
+                                icon
-                        type="button"
+                              >
-                        loading={starting}
+                                <Margin right={2}>
-                        disabled={instance.state !== 'STOPPED'}
+                                  <StopIcon
-                        onClick={() => onAction('start')}
+                                    disabled={instance.state !== 'RUNNING'}
-                        secondary
+                                  />
-                        small
+                                </Margin>
-                        icon
+                                <span>Stop</span>
-                      >
+                              </Button>
-                        <Margin right={2}>
+                            )}
-                          <StartIcon disabled={instance.state !== 'STOPPED'} />
+                            <PopoverButton secondary>
+                              <PopoverItem
+                                disabled={instance.state === 'RUNNING'}
+                                onClick={() =>
+                                  instance.state === 'RUNNING'
+                                    ? null
+                                    : onAction('start')
+                                }
+                              >
+                                Start
+                              </PopoverItem>
+                              <PopoverItem
+                                disabled={instance.state === 'STOPPED'}
+                                onClick={() =>
+                                  instance.state === 'STOPPED'
+                                    ? null
+                                    : onAction('reboot')
+                                }
+                              >
+                                Restart
+                              </PopoverItem>
+                              <PopoverItem
+                                disabled={instance.state === 'STOPPED'}
+                                onClick={() =>
+                                  instance.state === 'STOPPED'
+                                    ? null
+                                    : onAction('stop')
+                                }
+                              >
+                                Stop
+                              </PopoverItem>
+                            </PopoverButton>
+                          </ButtonGroup>
                         </Margin>
-                      </Button>
+                      </FlexItem>
-                    </SmallOnly>
+                      <FlexItem>
-                    <Medium>
+                        <Button
-                      <Button
+                          href={`${GLOBAL.origin}/images/~create/${
-                        type="button"
+                            instance.id
-                        loading={starting}
+                          }`}
-                        disabled={instance.state !== 'STOPPED'}
+                          target="__blank"
-                        onClick={() => onAction('start')}
+                          rel="noopener noreferrer"
-                        secondary
+                          secondary
-                        bold
+                          bold
-                        icon
+                          icon
-                      >
+                        >
-                        <Margin right={2}>
+                          Create Image
-                          <StartIcon disabled={instance.state !== 'STOPPED'} />
+                        </Button>
-                        </Margin>
+                      </FlexItem>
-                        <span>Start</span>
+                    </Flex>
-                      </Button>
-                    </Medium>
-                    <SmallOnly>
-                      <Button
-                        type="button"
-                        loading={stopping}
-                        disabled={instance.state !== 'RUNNING'}
-                        onClick={() => onAction('stop')}
-                        secondary
-                        small
-                        icon
-                      >
-                        <Margin right={2}>
-                          <StopIcon disabled={instance.state !== 'RUNNING'} />
-                        </Margin>
-                      </Button>
-                    </SmallOnly>
-                    <Medium>
-                      <Button
-                        type="button"
-                        loading={stopping}
-                        disabled={instance.state !== 'RUNNING'}
-                        onClick={() => onAction('stop')}
-                        secondary
-                        bold
-                        icon
-                      >
-                        <Margin right={2}>
-                          <StopIcon disabled={instance.state !== 'RUNNING'} />
-                        </Margin>
-                        <span>Stop</span>
-                      </Button>
-                    </Medium>
-                    <SmallOnly>
-                      <Button
-                        type="button"
-                        loading={rebooting}
-                        disabled={instance.state !== 'RUNNING'}
-                        onClick={() => onAction('reboot')}
-                        secondary
-                        small
-                        icon
-                      >
-                        <Margin right={2}>
-                          <ResetIcon disabled={instance.state !== 'RUNNING'} />
-                        </Margin>
-                      </Button>
-                    </SmallOnly>
-                    <Medium>
-                      <Button
-                        type="button"
-                        loading={rebooting}
-                        disabled={instance.state !== 'RUNNING'}
-                        onClick={() => onAction('reboot')}
-                        secondary
-                        bold
-                        icon
-                      >
-                        <Margin right={2}>
-                          <ResetIcon disabled={instance.state !== 'RUNNING'} />
-                        </Margin>
-                        <span>Reboot</span>
-                      </Button>
-                    </Medium>
                   </Col>
                   <Col xs={3}>
                     <SmallOnly>
@@ -375,7 +339,7 @@ export default withTheme(
                             }
                           />
                         </Margin>
-                        <span>Remove</span>
+                        <span>Delete</span>
                       </Button>
                     </Medium>
                   </Col>

consoles/my-joy-instances/src/containers/instances/__tests__/__snapshots__/networks.spec.js.snap

@@ -221,11 +221,15 @@ exports[`renders <Networks /> without throwing 1`] = `
       </div>
     </div>
   </div>
-  <h3
+  <div
-    className="c7"
+    className="c2"
   >
-    Networks attached to this instance
+    <h3
-  </h3>
+      className="c7"
+    >
+      Networks attached to this instance
+    </h3>
+  </div>
   <div
     className="c8 c9"
     disabled={false}
@@ -241,227 +245,289 @@ exports[`renders <Networks /> without throwing 1`] = `
           className="c12"
         >
           <svg
-            height={60}
+            height={109}
-            viewBox="0 0 79 60"
+            viewBox="0 0 119.34 109.47"
-            width={79}
+            width={119}
             xmlns="http://www.w3.org/2000/svg"
             xmlnsXlink="http://www.w3.org/1999/xlink"
           >
-            <title>
-              Guilty_Salamander
-            </title>
-            <desc>
-              Created using Figma
-            </desc>
-            <use
-              fill="#FAA427"
-              transform="translate(23.8 22)"
-              xlinkHref="#a"
-            />
-            <use
-              fill="#F3722C"
-              transform="translate(27.3 25.5)"
-              xlinkHref="#b"
-            />
-            <use
-              fill="#FAA427"
-              transform="translate(4.8 32.1)"
-              xlinkHref="#c"
-            />
-            <use
-              fill="#F3722C"
-              transform="translate(12.2 31.8)"
-              xlinkHref="#d"
-            />
-            <use
-              fill="#FAA427"
-              transform="translate(54.4 31.9)"
-              xlinkHref="#e"
-            />
-            <use
-              fill="#F3722C"
-              transform="translate(54.4 32)"
-              xlinkHref="#f"
-            />
-            <use
-              fill="#FAA427"
-              transform="translate(15.8 26.8)"
-              xlinkHref="#g"
-            />
-            <use
-              fill="#FAA427"
-              transform="translate(5)"
-              xlinkHref="#h"
-            />
-            <use
-              fill="#FAFBFC"
-              transform="rotate(-15.13 41.037 5.45)"
-              xlinkHref="#i"
-            />
-            <use
-              fill="#412B13"
-              transform="rotate(-15.13 67.273 -24.78)"
-              xlinkHref="#j"
-            />
-            <use
-              fill="#F3722C"
-              transform="translate(2.2 8)"
-              xlinkHref="#k"
-            />
-            <use
-              fill="#FAFBFC"
-              transform="rotate(-74.87 40.46 -20.511)"
-              xlinkHref="#l"
-            />
-            <use
-              fill="#412B13"
-              transform="rotate(-74.87 41.364 -22.098)"
-              xlinkHref="#m"
-            />
-            <use
-              fill="#F3722C"
-              transform="translate(52.1 8)"
-              xlinkHref="#n"
-            />
-            <use
-              fill="#F3722C"
-              transform="translate(31.5 34.3)"
-              xlinkHref="#o"
-            />
-            <use
-              fill="#F3722C"
-              transform="translate(14.3)"
-              xlinkHref="#p"
-            />
-            <use
-              fill="#F3722C"
-              transform="translate(30.9 18.9)"
-              xlinkHref="#q"
-            />
-            <use
-              fill="#F3722C"
-              transform="translate(37.6 18.9)"
-              xlinkHref="#r"
-            />
-            <use
-              fill="#FAA427"
-              transform="translate(27.4 53.9)"
-              xlinkHref="#s"
-            />
-            <use
-              fill="#FAA427"
-              transform="translate(39.1 53.9)"
-              xlinkHref="#t"
-            />
-            <use
-              fill="#F3722C"
-              transform="translate(27.4 53.9)"
-              xlinkHref="#u"
-            />
-            <use
-              fill="#342013"
-              transform="translate(28.6 26.2)"
-              xlinkHref="#v"
-            />
-            <use
-              fill="#FFF"
-              transform="translate(32.6 28.7)"
-              xlinkHref="#w"
-            />
             <defs>
-              <path
+              <style
-                d="M54.921 36.053L0 0l1.413 24.908c.359 6.249 5.752 11.145 12.283 11.145H54.92z"
+                dangerouslySetInnerHTML={
-                id="a"
+                  Object {
-              />
+                    "__html": ".cls-1{opacity:0.5;}.cls-2{fill:url(#radial-gradient);}.cls-3{fill:url(#radial-gradient-2);}.cls-4{fill:#fff;}.cls-5{fill:url(#radial-gradient-3);}.cls-6{fill:#1b3240;}.cls-7{fill:url(#radial-gradient-4);}",
-              <path
+                  }
-                d="M42.12 32.526L13.47 0 0 23.737c.282 4.924 4.527 8.778 9.672 8.778l32.448.01z"
+                }
-                id="b"
-              />
-              <path
-                d="M3.326 17.01a3.312 3.312 0 0 1-1.545-6.25C6.059 8.52 8.482 2.226 8.52 2.165a3.313 3.313 0 0 1 6.216 2.296c-.133.354-3.312 8.717-9.86 12.145-.475.26-1.008.4-1.55.403z"
-                id="c"
-              />
-              <path
-                d="M5.079 9.205A28.654 28.654 0 0 0 7.287 4.75a3.312 3.312 0 1 0-6.183-2.296C.781 3.234.412 3.996 0 4.734c1.33 1.181 3.544 3.152 5.079 4.471z"
-                id="d"
-              />
-              <path
-                d="M11.682 17.27a3.312 3.312 0 0 0 1.545-6.248C8.95 8.78 6.526 2.487 6.504 2.427A3.312 3.312 0 1 0 .316 4.723c.126.353 3.312 8.717 9.853 12.145.464.254.983.393 1.513.403z"
-                id="e"
-              />
-              <path
-                d="M2.45 9.01A28.33 28.33 0 0 1 .242 4.553a3.312 3.312 0 1 1 6.21-2.296c.326.78.695 1.54 1.104 2.28C6.187 5.719 3.973 7.69 2.45 9.009z"
-                id="f"
-              />
-              <path
-                d="M35.159 0H6.542A6.542 6.542 0 0 0 0 6.542v14.016a6.542 6.542 0 0 0 6.542 6.541h28.617a6.541 6.541 0 0 0 6.541-6.541V6.542A6.542 6.542 0 0 0 35.16 0z"
-                id="g"
-              />
-              <path
-                d="M54.254 0H9.026A9.026 9.026 0 0 0 0 9.026v17.207a9.026 9.026 0 0 0 9.026 9.025h45.228a9.026 9.026 0 0 0 9.025-9.026V9.027A9.026 9.026 0 0 0 54.253 0z"
-                id="h"
-              />
-              <path
-                d="M9.721 18.637c5.37 0 9.721-4.172 9.721-9.319C19.442 4.172 15.09 0 9.722 0 4.351 0 0 4.172 0 9.318c0 5.147 4.352 9.319 9.721 9.319z"
-                id="i"
-              />
-              <path
-                d="M5.19 9.959c2.865 0 5.188-2.23 5.188-4.98C10.378 2.23 8.055 0 5.19 0S0 2.23 0 4.98c0 2.75 2.323 4.979 5.19 4.979z"
-                id="j"
-              />
-              <path
-                d="M7.262.351C2.078 1.753-1.018 6.921.306 11.89l18.77-5.073C17.705 1.847 12.411-1.045 7.261.35z"
-                id="k"
-              />
-              <path
-                d="M9.318 19.442c5.147 0 9.319-4.352 9.319-9.72C18.637 4.351 14.465 0 9.318 0 4.172 0 0 4.352 0 9.721c0 5.37 4.172 9.721 9.318 9.721z"
-                id="l"
-              />
-              <path
-                d="M4.98 10.378c2.75 0 4.979-2.323 4.979-5.189S7.729 0 4.979 0C2.23 0 0 2.323 0 5.19c0 2.865 2.23 5.188 4.98 5.188z"
-                id="m"
-              />
-              <path
-                d="M11.819.351c5.178 1.402 8.28 6.57 6.95 11.538L0 6.816C1.347 1.847 6.635-1.045 11.819.35z"
-                id="n"
-              />
-              <path
-                d="M5.106 4.897A5.007 5.007 0 0 0 10.218 0H0a5.001 5.001 0 0 0 5.106 4.897z"
-                id="o"
-              />
-              <path
-                d="M0 0l22.258 18.498L44.516 0H0z"
-                id="p"
-              />
-              <path
-                d="M2.445 0A2.396 2.396 0 0 0 0 2.342h4.885a2.39 2.39 0 0 0-2.44-2.34z"
-                id="q"
-              />
-              <path
-                d="M2.462 0A2.396 2.396 0 0 0 0 2.343h4.885A2.39 2.39 0 0 0 2.462 0z"
-                id="r"
-              />
-              <path
-                d="M0 0h6.227v3.091A3.047 3.047 0 0 1 3.18 6.14h-.127A3.047 3.047 0 0 1 .006 3.09V0H0z"
-                id="s"
-              />
-              <path
-                d="M.006 0H6.22v3.091A3.047 3.047 0 0 1 3.174 6.14h-.127A3.047 3.047 0 0 1 0 3.09V0h.006z"
-                id="t"
-              />
-              <path
-                d="M31.328 0H0v1.474h31.328V0z"
-                id="u"
-              />
-              <path
-                d="M15.422 1.503A17.422 17.422 0 0 0 8.113.002 17.4 17.4 0 0 0 .805 1.503a1.457 1.457 0 0 0 .629 2.76h2.572V4.06a1.579 1.579 0 0 1 2.126-1.468 6.194 6.194 0 0 0 3.963 0 1.574 1.574 0 0 1 2.12 1.468v.204h2.572a1.463 1.463 0 0 0 .635-2.76z"
-                id="v"
-              />
-              <path
-                d="M6.072.104a6.194 6.194 0 0 1-3.963 0A1.579 1.579 0 0 0 0 1.573v.204h8.209v-.204A1.573 1.573 0 0 0 6.072.104z"
-                id="w"
               />
+              <radialGradient
+                cx="208.79"
+                cy="99.06"
+                gradientTransform="translate(227.6 -122.69) rotate(102.18) scale(1 1.28)"
+                gradientUnits="userSpaceOnUse"
+                id="radial-gradient"
+                r="57.13"
+              >
+                <stop
+                  offset="0.05"
+                  stopColor="#436275"
+                />
+                <stop
+                  offset="0.1"
+                  stopColor="#415f72"
+                />
+                <stop
+                  offset="0.13"
+                  stopColor="#3a5769"
+                />
+                <stop
+                  offset="0.16"
+                  stopColor="#2e4959"
+                />
+                <stop
+                  offset="0.19"
+                  stopColor="#1d3543"
+                />
+                <stop
+                  offset="0.19"
+                  stopColor="#1b3240"
+                />
+                <stop
+                  offset="0.26"
+                  stopColor="#1e3644"
+                />
+                <stop
+                  offset="0.32"
+                  stopColor="#274150"
+                />
+                <stop
+                  offset="0.39"
+                  stopColor="#365364"
+                />
+                <stop
+                  offset="0.43"
+                  stopColor="#436275"
+                />
+                <stop
+                  offset="0.49"
+                  stopColor="#3f5d6f"
+                />
+                <stop
+                  offset="0.56"
+                  stopColor="#324e5f"
+                />
+                <stop
+                  offset="0.65"
+                  stopColor="#1e3644"
+                />
+                <stop
+                  offset="0.66"
+                  stopColor="#1b3240"
+                />
+                <stop
+                  offset="0.85"
+                  stopColor="#1b3240"
+                />
+                <stop
+                  offset="0.9"
+                  stopColor="#2c4656"
+                />
+                <stop
+                  offset="0.95"
+                  stopColor="#436275"
+                />
+              </radialGradient>
+              <radialGradient
+                cx="59.15"
+                cy="56.86"
+                gradientTransform="matrix(-0.52, 0.85, -1.09, -0.66, 151.75, 43.43)"
+                gradientUnits="userSpaceOnUse"
+                id="radial-gradient-2"
+                r="46.01"
+              >
+                <stop
+                  offset={0}
+                  stopColor="#436275"
+                />
+                <stop
+                  offset="0.1"
+                  stopColor="#426073"
+                />
+                <stop
+                  offset="0.13"
+                  stopColor="#3c5a6c"
+                />
+                <stop
+                  offset="0.16"
+                  stopColor="#344f61"
+                />
+                <stop
+                  offset="0.18"
+                  stopColor="#274050"
+                />
+                <stop
+                  offset="0.19"
+                  stopColor="#1b3240"
+                />
+                <stop
+                  offset="0.26"
+                  stopColor="#1e3644"
+                />
+                <stop
+                  offset="0.32"
+                  stopColor="#274150"
+                />
+                <stop
+                  offset="0.39"
+                  stopColor="#365364"
+                />
+                <stop
+                  offset="0.43"
+                  stopColor="#436275"
+                />
+                <stop
+                  offset="0.49"
+                  stopColor="#3f5d6f"
+                />
+                <stop
+                  offset="0.56"
+                  stopColor="#324e5f"
+                />
+                <stop
+                  offset="0.65"
+                  stopColor="#1e3644"
+                />
+                <stop
+                  offset="0.66"
+                  stopColor="#1b3240"
+                />
+                <stop
+                  offset="0.85"
+                  stopColor="#1b3240"
+                />
+                <stop
+                  offset="0.92"
+                  stopColor="#2c4656"
+                />
+                <stop
+                  offset={1}
+                  stopColor="#436275"
+                />
+              </radialGradient>
+              <radialGradient
+                cx="-521.06"
+                cy="366.16"
+                gradientTransform="translate(353.22 -558.2) rotate(-21.55) scale(1 1.28)"
+                gradientUnits="userSpaceOnUse"
+                id="radial-gradient-3"
+                r="32.44"
+              >
+                <stop
+                  offset={0}
+                  stopColor="#436275"
+                />
+                <stop
+                  offset="0.02"
+                  stopColor="#436275"
+                  stopOpacity="0.97"
+                />
+                <stop
+                  offset="0.34"
+                  stopColor="#436275"
+                  stopOpacity="0.55"
+                />
+                <stop
+                  offset="0.62"
+                  stopColor="#436275"
+                  stopOpacity="0.25"
+                />
+                <stop
+                  offset="0.85"
+                  stopColor="#436275"
+                  stopOpacity="0.07"
+                />
+                <stop
+                  offset={1}
+                  stopColor="#436275"
+                  stopOpacity={0}
+                />
+              </radialGradient>
+              <radialGradient
+                cx="-136.43"
+                cy="140.9"
+                gradientTransform="translate(242.58 104.51) rotate(58.19) scale(1 0.7)"
+                gradientUnits="userSpaceOnUse"
+                id="radial-gradient-4"
+                r="54.82"
+              >
+                <stop
+                  offset={0}
+                  stopColor="#436275"
+                />
+                <stop
+                  offset="0.58"
+                  stopColor="#436275"
+                  stopOpacity="0.4"
+                />
+                <stop
+                  offset={1}
+                  stopColor="#436275"
+                  stopOpacity={0}
+                />
+              </radialGradient>
             </defs>
+            <title>
+              Empty-state-illustration
+            </title>
+            <g
+              data-name="Layer 2"
+              id="Layer_2"
+            >
+              <g
+                data-name="Layer 1"
+                id="Layer_1-2"
+              >
+                <g
+                  className="cls-1"
+                >
+                  <path
+                    className="cls-2"
+                    d="M80.06,4.35c-13.32-6.18-29.35-5.57-42.71.53S13.26,22.2,6.63,35.31C1.14,46.16-1.69,58.78,1.08,70.63,3.79,82.22,11.75,92.21,21.73,98.69s21.86,9.66,33.73,10.54c11.45.85,23.26-.43,33.68-5.27,19-8.83,31.51-30,30.09-50.91s-20.11-40-38.57-48.3Z"
+                  />
+                </g>
+                <g
+                  className="cls-1"
+                >
+                  <path
+                    className="cls-3"
+                    d="M91.49,23.42c-11.21-9.58-24.94-13-38.61-11.88A45.54,45.54,0,0,0,19,32.25a49.05,49.05,0,0,0-5.48,39.52,35.93,35.93,0,0,0,7.15,13.75C26,91.54,33.6,95,41.27,97.28a64.6,64.6,0,0,0,20.16,3,47.46,47.46,0,0,0,32-13.61,44.74,44.74,0,0,0,13.06-32.08,42.49,42.49,0,0,0-15-31.19Z"
+                  />
+                </g>
+                <circle
+                  className="cls-4"
+                  cx="23.53"
+                  cy="73.77"
+                  r="11.93"
+                />
+                <circle
+                  className="cls-5"
+                  cx="23.53"
+                  cy="73.77"
+                  r="11.93"
+                />
+                <circle
+                  className="cls-6"
+                  cx="61.95"
+                  cy="55.24"
+                  r="34.25"
+                />
+                <circle
+                  className="cls-7"
+                  cx="61.95"
+                  cy="55.24"
+                  r="34.25"
+                />
+              </g>
+            </g>
           </svg>
         </div>
         <h3
@@ -666,11 +732,15 @@ exports[`renders <Networks error /> without throwing 1`] = `
       </div>
     </div>
   </div>
-  <h3
+  <div
-    className="c7"
+    className="c2"
   >
-    Networks attached to this instance
+    <h3
-  </h3>
+      className="c7"
+    >
+      Networks attached to this instance
+    </h3>
+  </div>
   <div
     className="c8"
   >
@@ -904,11 +974,15 @@ exports[`renders <Networks loading /> without throwing 1`] = `
       </div>
     </div>
   </div>
-  <h3
+  <div
-    className="c7"
+    className="c2"
   >
-    Networks attached to this instance
+    <h3
-  </h3>
+      className="c7"
+    >
+      Networks attached to this instance
+    </h3>
+  </div>
   <div
     className="c8"
   >
@@ -1432,11 +1506,15 @@ exports[`renders <Networks networks /> without throwing 1`] = `
       </div>
     </div>
   </div>
-  <h3
+  <div
-    className="c7"
+    className="c2"
   >
-    Networks attached to this instance
+    <h3
-  </h3>
+      className="c7"
+    >
+      Networks attached to this instance
+    </h3>
+  </div>
   <div
     className="c3"
   >

consoles/my-joy-instances/src/containers/instances/firewall.js

@@ -1,12 +1,12 @@
 /* eslint-disable camelcase */
-import React, { Fragment } from 'react';
+import React from 'react';
 import intercept from 'apr-intercept';
 import { connect } from 'react-redux';
 import { compose, graphql } from 'react-apollo';
 import ReduxForm from 'declarative-redux-form';
 import { SubmissionError } from 'redux-form';
 import { Margin } from 'styled-components-spacing';
-import remcalc from 'remcalc';
+import { default as Flex, FlexItem } from 'styled-flex-component';
 import isBoolean from 'lodash.isboolean';
 import get from 'lodash.get';
 
@@ -15,8 +15,7 @@ import {
   Message,
   MessageTitle,
   MessageDescription,
-  StatusLoader,
+  StatusLoader
-  Divider
 } from 'joyent-ui-toolkit';
 
 import {
@@ -70,38 +69,37 @@ export const Firewall = ({
         </Message>
       </Margin>
     ) : null}
-    <ReduxForm
+    <Flex>
-      form="fw-enabled"
+      <FlexItem>
-      destroyOnUnmount={false}
+        <ReduxForm
-      forceUnregisterOnUnmount={true}
+          form="fw-enabled"
-      {...{ initialValues: isBoolean(enabled) ? { enabled } : undefined }}
+          destroyOnUnmount={false}
-      onSubmit={handleEnabledToggle}
+          forceUnregisterOnUnmount={true}
-    >
+          {...{ initialValues: isBoolean(enabled) ? { enabled } : undefined }}
-      {props =>
+          onSubmit={handleEnabledToggle}
-        loading ? null : (
+        >
-          <Fragment>
+          {props =>
-            <Margin bottom={5}>
+            loading ? null : (
-              <ToggleFirewallForm {...props} submitOnChange />
+              <Margin right={5}>
-            </Margin>
+                <ToggleFirewallForm {...props} submitOnChange />
-            <Divider height={remcalc(1)} />
+              </Margin>
-          </Fragment>
+            )
-        )
+          }
-      }
+        </ReduxForm>
-    </ReduxForm>
+      </FlexItem>
-    <ReduxForm
+      <FlexItem>
-      form="fw-inactive"
+        <ReduxForm
-      destroyOnUnmount={false}
+          form="fw-inactive"
-      forceUnregisterOnUnmount={true}
+          destroyOnUnmount={false}
-      initialValues={{ inactive }}
+          forceUnregisterOnUnmount={true}
-    >
+          initialValues={{ inactive }}
-      {props =>
+        >
-        !enabled || loading ? null : (
+          {props =>
-          <Margin top={4}>
+            !enabled || loading ? null : <ToggleInactiveForm {...props} />
-            <ToggleInactiveForm {...props} />
+          }
-          </Margin>
+        </ReduxForm>
-        )
+      </FlexItem>
-      }
+    </Flex>
-    </ReduxForm>
     {!loading && !defaultRules.length && !tagRules.length ? (
       <Margin top={5}>
         <Empty borderTop>

consoles/my-joy-instances/src/containers/instances/list.js

@@ -259,8 +259,12 @@ export default compose(
       const sortBy = get(values, 'instance-list-sort-by', 'name');
       const sortOrder = get(values, 'instance-list-sort-order', 'asc');
 
+      console.log(index, filter);
       // if user is searching something, get items that match that query
-      const filtered = filter ? index.search(filter) : instances;
+      const filtered =
+        filter && index.list.length
+          ? index.list.filter(i => i.name.includes(filter))
+          : instances;
 
       // from filtered instances, sort asc
       // set's mutating flag

consoles/my-joy-instances/src/containers/instances/networks.js

@@ -37,7 +37,9 @@ export const Networks = ({
         complete control over the network environment. Read more on fabrics.
       </Description>
     </Margin>
-    <H3>Networks attached to this instance</H3>
+    <Margin bottom={3}>
+      <H3>Networks attached to this instance</H3>
+    </Margin>
     {loading ? <StatusLoader /> : null}
     {!loading && error && !networks.length ? (
       <Margin bottom={5}>
@@ -79,14 +81,14 @@ export default compose(
       }
     }),
     props: ({ data }) => {
+      console.log(data);
       const { loading, error, variables } = data;
       const { id } = variables;
 
-      const machines = get(data, 'machines.results', []);
+      const machines = get(data, 'machine', []);
       const instance = find(forceArray(machines), ['id', id]);
       const values = get(instance, 'networks', []);
       const networks = reverse(sortBy(values, 'public'));
-
       return {
         networks,
         instance,

packages/icons/src/empty-state.js

@@ -0,0 +1,126 @@
+import React from 'react';
+
+export default ({
+  fill = null,
+  light = false,
+  disabled = false,
+  colors = {},
+  ...rest
+}) => (
+  <svg
+    width={119}
+    height={109}
+    xmlns="http://www.w3.org/2000/svg"
+    xmlnsXlink="http://www.w3.org/1999/xlink"
+    viewBox="0 0 119.34 109.47"
+  >
+    <defs>
+      <style
+        dangerouslySetInnerHTML={{
+          __html:
+            '.cls-1{opacity:0.5;}.cls-2{fill:url(#radial-gradient);}.cls-3{fill:url(#radial-gradient-2);}.cls-4{fill:#fff;}.cls-5{fill:url(#radial-gradient-3);}.cls-6{fill:#1b3240;}.cls-7{fill:url(#radial-gradient-4);}'
+        }}
+      />
+      <radialGradient
+        id="radial-gradient"
+        cx="208.79"
+        cy="99.06"
+        r="57.13"
+        gradientTransform="translate(227.6 -122.69) rotate(102.18) scale(1 1.28)"
+        gradientUnits="userSpaceOnUse"
+      >
+        <stop offset="0.05" stopColor="#436275" />
+        <stop offset="0.1" stopColor="#415f72" />
+        <stop offset="0.13" stopColor="#3a5769" />
+        <stop offset="0.16" stopColor="#2e4959" />
+        <stop offset="0.19" stopColor="#1d3543" />
+        <stop offset="0.19" stopColor="#1b3240" />
+        <stop offset="0.26" stopColor="#1e3644" />
+        <stop offset="0.32" stopColor="#274150" />
+        <stop offset="0.39" stopColor="#365364" />
+        <stop offset="0.43" stopColor="#436275" />
+        <stop offset="0.49" stopColor="#3f5d6f" />
+        <stop offset="0.56" stopColor="#324e5f" />
+        <stop offset="0.65" stopColor="#1e3644" />
+        <stop offset="0.66" stopColor="#1b3240" />
+        <stop offset="0.85" stopColor="#1b3240" />
+        <stop offset="0.9" stopColor="#2c4656" />
+        <stop offset="0.95" stopColor="#436275" />
+      </radialGradient>
+      <radialGradient
+        id="radial-gradient-2"
+        cx="59.15"
+        cy="56.86"
+        r="46.01"
+        gradientTransform="matrix(-0.52, 0.85, -1.09, -0.66, 151.75, 43.43)"
+        gradientUnits="userSpaceOnUse"
+      >
+        <stop offset={0} stopColor="#436275" />
+        <stop offset="0.1" stopColor="#426073" />
+        <stop offset="0.13" stopColor="#3c5a6c" />
+        <stop offset="0.16" stopColor="#344f61" />
+        <stop offset="0.18" stopColor="#274050" />
+        <stop offset="0.19" stopColor="#1b3240" />
+        <stop offset="0.26" stopColor="#1e3644" />
+        <stop offset="0.32" stopColor="#274150" />
+        <stop offset="0.39" stopColor="#365364" />
+        <stop offset="0.43" stopColor="#436275" />
+        <stop offset="0.49" stopColor="#3f5d6f" />
+        <stop offset="0.56" stopColor="#324e5f" />
+        <stop offset="0.65" stopColor="#1e3644" />
+        <stop offset="0.66" stopColor="#1b3240" />
+        <stop offset="0.85" stopColor="#1b3240" />
+        <stop offset="0.92" stopColor="#2c4656" />
+        <stop offset={1} stopColor="#436275" />
+      </radialGradient>
+      <radialGradient
+        id="radial-gradient-3"
+        cx="-521.06"
+        cy="366.16"
+        r="32.44"
+        gradientTransform="translate(353.22 -558.2) rotate(-21.55) scale(1 1.28)"
+        gradientUnits="userSpaceOnUse"
+      >
+        <stop offset={0} stopColor="#436275" />
+        <stop offset="0.02" stopColor="#436275" stopOpacity="0.97" />
+        <stop offset="0.34" stopColor="#436275" stopOpacity="0.55" />
+        <stop offset="0.62" stopColor="#436275" stopOpacity="0.25" />
+        <stop offset="0.85" stopColor="#436275" stopOpacity="0.07" />
+        <stop offset={1} stopColor="#436275" stopOpacity={0} />
+      </radialGradient>
+      <radialGradient
+        id="radial-gradient-4"
+        cx="-136.43"
+        cy="140.9"
+        r="54.82"
+        gradientTransform="translate(242.58 104.51) rotate(58.19) scale(1 0.7)"
+        gradientUnits="userSpaceOnUse"
+      >
+        <stop offset={0} stopColor="#436275" />
+        <stop offset="0.58" stopColor="#436275" stopOpacity="0.4" />
+        <stop offset={1} stopColor="#436275" stopOpacity={0} />
+      </radialGradient>
+    </defs>
+    <title>Empty-state-illustration</title>
+    <g id="Layer_2" data-name="Layer 2">
+      <g id="Layer_1-2" data-name="Layer 1">
+        <g className="cls-1">
+          <path
+            className="cls-2"
+            d="M80.06,4.35c-13.32-6.18-29.35-5.57-42.71.53S13.26,22.2,6.63,35.31C1.14,46.16-1.69,58.78,1.08,70.63,3.79,82.22,11.75,92.21,21.73,98.69s21.86,9.66,33.73,10.54c11.45.85,23.26-.43,33.68-5.27,19-8.83,31.51-30,30.09-50.91s-20.11-40-38.57-48.3Z"
+          />
+        </g>
+        <g className="cls-1">
+          <path
+            className="cls-3"
+            d="M91.49,23.42c-11.21-9.58-24.94-13-38.61-11.88A45.54,45.54,0,0,0,19,32.25a49.05,49.05,0,0,0-5.48,39.52,35.93,35.93,0,0,0,7.15,13.75C26,91.54,33.6,95,41.27,97.28a64.6,64.6,0,0,0,20.16,3,47.46,47.46,0,0,0,32-13.61,44.74,44.74,0,0,0,13.06-32.08,42.49,42.49,0,0,0-15-31.19Z"
+          />
+        </g>
+        <circle className="cls-4" cx="23.53" cy="73.77" r="11.93" />
+        <circle className="cls-5" cx="23.53" cy="73.77" r="11.93" />
+        <circle className="cls-6" cx="61.95" cy="55.24" r="34.25" />
+        <circle className="cls-7" cx="61.95" cy="55.24" r="34.25" />
+      </g>
+    </g>
+  </svg>
+);

packages/icons/src/index.js

@@ -12,6 +12,7 @@ export { default as Delete } from './delete';
 export { default as Dot } from './dot';
 export { default as Duplicate } from './duplicate';
 export { default as Edit } from './edit';
+export { default as EmptyState } from './empty-state';
 export { default as Fabric } from './fabric';
 // export { default as Filter } from './filter';
 export { default as Firewall } from './firewall';

packages/instance-steps/src/affinity/components.js

@@ -34,9 +34,19 @@ const Input = styled(BaseInput)`
 
 const Values = touched => (
   <Margin right={1}>
-    <Select style={style} touched={touched} width={remcalc(130)} embedded>
+    <Select
-      <option value="equalling">equalling</option>
+      id={'affinity-rule-3-select'}
-      <option value="starting">starting with</option>
+      style={style}
+      touched={touched}
+      width={remcalc(130)}
+      embedded
+    >
+      <option id={'affinity-rule-3-equalling'} value="equalling">
+        equalling
+      </option>
+      <option id={'affinity-rule-3-starting'} value="starting">
+        starting with
+      </option>
     </Select>
   </Margin>
 );
@@ -54,9 +64,14 @@ export const Rule = ({ valid, ...rule }) => (
             touched={rule.conditional}
             width={remcalc(86)}
             embedded
+            id={'affinity-rule-0-select'}
           >
-            <option value="should">should</option>
+            <option id={'affinity-rule-0-should'} value="should">
-            <option value="must">must</option>
+              should
+            </option>
+            <option id={'affinity-rule-0-must'} value="must">
+              must
+            </option>
           </Select>
         </FormGroup>
       </Margin>
@@ -70,9 +85,14 @@ export const Rule = ({ valid, ...rule }) => (
             touched={rule.placement}
             width={remcalc(100)}
             embedded
+            id={'affinity-rule-1-select'}
           >
-            <option value="same">the same</option>
+            <option id={'affinity-rule-1-same'} value="same">
-            <option value="different">a different</option>
+              the same
+            </option>
+            <option id={'affinity-rule-1-different'} value="different">
+              a different
+            </option>
           </Select>
         </FormGroup>
       </Margin>
@@ -82,21 +102,26 @@ export const Rule = ({ valid, ...rule }) => (
       <Margin horizontal={1}>
         <FormGroup name="type" field={Field}>
           <Select
+            id={'affinity-rule-2-select'}
             style={style}
             touched={rule.type}
             width={remcalc(135)}
             embedded
             left
           >
-            <option value="name">instance name</option>
+            <option id={'affinity-rule-2-name'} value="name">
-            <option value="tag">tag</option>
+              instance name
+            </option>
+            <option id={'affinity-rule-2-tag'} value="tag">
+              tag
+            </option>
           </Select>
         </FormGroup>
       </Margin>
       <FormGroup name="pattern" field={Field}>
         {Values(rule.pattern)}
       </FormGroup>
-      <FormGroup name="value" field={Field}>
+      <FormGroup id={'affinity-rule-input'} name="value" field={Field}>
         <Input
           onBlur={null}
           style={style}

packages/instance-steps/src/affinity/index.js

@@ -150,6 +150,7 @@ const Affinity = ({
                     noRemove
                     borderless
                     headless
+                    id="affinity"
                     onCancel={() => handleChangeAddOpen(false)}
                   />
                 </Margin>
@@ -169,7 +170,12 @@ const Affinity = ({
           ) : null}
           {!addOpen && exitingRule ? (
             <Margin top={5}>
-              <Button type="button" component={Link} to={next}>
+              <Button
+                id={'next-button-affinity'}
+                type="button"
+                component={Link}
+                to={next}
+              >
                 Next
               </Button>
             </Margin>

packages/instance-steps/src/cns/index.js

@@ -83,7 +83,12 @@ const CnsContainer = ({
             </ReduxForm>
           </Cns>
           <Margin top={5}>
-            <Button type="button" component={Link} to={next}>
+            <Button
+              id={'next-button-cns'}
+              type="button"
+              component={Link}
+              to={next}
+            >
               Next
             </Button>
           </Margin>

packages/instance-steps/src/firewall/index.js

@@ -5,6 +5,7 @@ import { compose, graphql } from 'react-apollo';
 import { Link } from 'react-router-dom';
 import ReduxForm from 'declarative-redux-form';
 import { connect } from 'react-redux';
+import { change } from 'redux-form';
 import get from 'lodash.get';
 import forceArray from 'force-array';
 
@@ -39,6 +40,8 @@ const Firewall = ({
   tagRules = [],
   loading = false,
   enabled = false,
+  showInactiveRules = null,
+  showInactive = false,
   ...props
 }) => (
   <Step name="firewall" getValue={handleGetValue} {...props}>
@@ -98,6 +101,15 @@ const Firewall = ({
                       can potentially affect your instance
                     </P>
                   </Margin>
+                  <Margin top={2}>
+                    <Button
+                      secondary
+                      onClick={showInactiveRules}
+                      disabled={showInactive}
+                    >
+                      View Inactive Rules
+                    </Button>
+                  </Margin>
                 </Fragment>
               </Empty>
             </Margin>
@@ -129,7 +141,12 @@ const Firewall = ({
             </Margin>
           ) : null}
           <Margin top={5}>
-            <Button type="button" component={Link} to={next}>
+            <Button
+              id={'next-button-firewall'}
+              type="button"
+              component={Link}
+              to={next}
+            >
               Next
             </Button>
           </Margin>
@@ -142,7 +159,9 @@ const Firewall = ({
 export default compose(
   connect(({ form, values }, ownProps) => ({
     ...ownProps,
-    enabled: get(form, `${IC_FW_F_ENABLED}.values.enabled`, false),
+    enabled:
+      console.log(form, values) ||
+      get(form, `${IC_FW_F_ENABLED}.values.enabled`, false),
     showInactive: get(form, `${IC_FW_F_INACTIVE}.values.inactive`, false),
     tags: get(values, IC_TAG_V_TAGS, [])
   })),
@@ -184,5 +203,9 @@ export default compose(
         handleGetValue: () => ({ enabled, defaultRules, tagRules })
       };
     }
-  })
+  }),
+  connect(null, (dispatch, { ...args }) => ({
+    showInactiveRules: () =>
+      dispatch(change(IC_FW_F_INACTIVE, 'inactive', true))
+  }))
 )(Firewall);

packages/instance-steps/src/image/components.js

@@ -137,12 +137,20 @@ export const ImageType = ({ setImageType, vms }) => (
   <Margin bottom={3}>
     <SectionList>
       <SectionListItem>
-        <SectionListAnchor active={vms} onClick={() => setImageType(true)}>
+        <SectionListAnchor
+          id={'image-type-hwvm'}
+          active={vms}
+          onClick={() => setImageType(true)}
+        >
           Hardware virtual machine
         </SectionListAnchor>
       </SectionListItem>
       <SectionListItem>
-        <SectionListAnchor active={!vms} onClick={() => setImageType(false)}>
+        <SectionListAnchor
+          id={'image-type-ic'}
+          active={!vms}
+          onClick={() => setImageType(false)}
+        >
           Infrastructure container
         </SectionListAnchor>
       </SectionListItem>

packages/instance-steps/src/image/index.js

@@ -79,7 +79,12 @@ const Image = ({
                       onSelectLatest={handleSelectLatest}
                     />
                     <Margin top="2">
-                      <Button type="button" component={Link} to={next}>
+                      <Button
+                        id={'next-button-image'}
+                        type="button"
+                        component={Link}
+                        to={next}
+                      >
                         Next
                       </Button>
                     </Margin>

packages/instance-steps/src/metadata/index.js

@@ -89,6 +89,7 @@ const Metadata = ({
                     method="add"
                     input="textarea"
                     type="metadata"
+                    id="metadata"
                     onCancel={() => handleChangeAddOpen(false)}
                     editor={Editor}
                     expanded
@@ -101,6 +102,7 @@ const Metadata = ({
                     <FlexItem>
                       <Margin right={1}>
                         <Button
+                          id={'button-add-metadata'}
                           type="button"
                           onClick={() => handleChangeAddOpen(true)}
                           secondary
@@ -110,7 +112,12 @@ const Metadata = ({
                       </Margin>
                     </FlexItem>
                     <FlexItem>
-                      <Button type="button" component={Link} to={next}>
+                      <Button
+                        id={'next-button-metadata'}
+                        type="button"
+                        component={Link}
+                        to={next}
+                      >
                         Next
                       </Button>
                     </FlexItem>

packages/instance-steps/src/name/index.js

@@ -42,6 +42,10 @@ const RandomizeIcon = styled(BaseRandomizeIcon)`
   width: ${remcalc(16)};
 `;
 
+const Form = styled.form`
+  margin-bottom: 0;
+`;
+
 const Name = ({
   initialValues,
   handleValidate,
@@ -79,8 +83,8 @@ const Name = ({
             keepDirtyOnReinitialize
           >
             {props => (
-              <form onSubmit={null}>
+              <Form onSubmit={null}>
-                <FormGroup name="name" fluid field={Field}>
+                <FormGroup id={'input-name'} name="name" fluid field={Field}>
                   <FormLabel>Instance name</FormLabel>
                   <Margin top="0.5">
                     <Flex>
@@ -90,6 +94,7 @@ const Name = ({
                       <FlexItem>
                         <Margin left="1" inline>
                           <Button
+                            id={'randomize-button-name'}
                             type="button"
                             loading={randomizing}
                             onClick={handleRandomize}
@@ -109,11 +114,16 @@ const Name = ({
                   <FormMeta />
                 </FormGroup>
                 <Margin top="5">
-                  <Button type="button" component={Link} to={next}>
+                  <Button
+                    id={'next-button-name'}
+                    type="button"
+                    component={Link}
+                    to={next}
+                  >
                     Next
                   </Button>
                 </Margin>
-              </form>
+              </Form>
             )}
           </ReduxForm>
         </Margin>

packages/instance-steps/src/networks/index.js

@@ -113,7 +113,12 @@ const Networks = ({
                     )}
                   </Form>
                   <Margin top="5">
-                    <Button type="button" component={Link} to={next}>
+                    <Button
+                      id={'next-button-networks'}
+                      type="button"
+                      component={Link}
+                      to={next}
+                    >
                       Next
                     </Button>
                   </Margin>

packages/instance-steps/src/package/components.js

@@ -32,6 +32,7 @@ import {
 
 import { NoPackages } from 'joyent-logo-assets';
 import { breakpoints } from 'joyent-ui-toolkit/dist/es/breakpoints/screens';
+import { EmptyState } from 'joyent-icons';
 
 const GroupIcons = {
   MEMORY: <MemoryIcon fill="#32ABCF" />,
@@ -461,7 +462,7 @@ export const Empty = ({ children, ...rest }) => (
     <Padding all={6}>
       <Flex alignCenter justifyCenter column>
         <Margin bottom={2}>
-          <NoPackages />
+          <EmptyState />
         </Margin>
         <NoPackagesTitle>{children}</NoPackagesTitle>
       </Flex>

packages/instance-steps/src/package/index.js

@@ -124,7 +124,12 @@ const PackageComponent = ({
                       </Packages>
                     </Medium>
                     <Margin top="4">
-                      <Button type="button" component={Link} to={next}>
+                      <Button
+                        id={'next-button-packages'}
+                        type="button"
+                        component={Link}
+                        to={next}
+                      >
                         Next
                       </Button>
                     </Margin>

packages/instance-steps/src/tags/index.js

@@ -96,6 +96,7 @@ const TagsContainer = ({
                     name={name}
                     value={value}
                     onRemoveClick={() => handleRemoveTag(index)}
+                    id={'tag-' + index}
                   />
                 ))}
               </TagList>
@@ -119,6 +120,7 @@ const TagsContainer = ({
                         method="add"
                         input="input"
                         type="tag"
+                        id="tag"
                         expanded
                         borderless
                         onCancel={() => handleChangeAddOpen(false)}
@@ -134,6 +136,7 @@ const TagsContainer = ({
                 <FlexItem>
                   <Margin right={1}>
                     <Button
+                      id={'add-tag-button'}
                       type="button"
                       onClick={() => handleChangeAddOpen(true)}
                       secondary
@@ -143,7 +146,12 @@ const TagsContainer = ({
                   </Margin>
                 </FlexItem>
                 <FlexItem>
-                  <Button type="button" component={Link} to={next}>
+                  <Button
+                    id={'next-button-tags'}
+                    type="button"
+                    component={Link}
+                    to={next}
+                  >
                     Next
                   </Button>
                 </FlexItem>

packages/instance-steps/src/user-script/components.js

@@ -17,7 +17,7 @@ class EditorField extends PureComponent {
 
 export default () => (
   <form name="user-script">
-    <FormGroup name="value" field={Field} fluid>
+    <FormGroup id="userscript-editor" name="value" field={Field} fluid>
       <Field name="value" component={EditorField} />
     </FormGroup>
   </form>

packages/instance-steps/src/user-script/index.js

@@ -54,7 +54,12 @@ const UserScript = ({
               <Fragment>
                 <UserScriptForm {...props} />
                 <Margin top={5}>
-                  <Button type="button" component={Link} to={next}>
+                  <Button
+                    id={'next-button-userscript'}
+                    type="button"
+                    component={Link}
+                    to={next}
+                  >
                     Next
                   </Button>
                 </Margin>

packages/logos/assets/empty-state.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 119.34 109.47"><defs><style>.cls-1{opacity:0.5;}.cls-2{fill:url(#radial-gradient);}.cls-3{fill:url(#radial-gradient-2);}.cls-4{fill:#fff;}.cls-5{fill:url(#radial-gradient-3);}.cls-6{fill:#1b3240;}.cls-7{fill:url(#radial-gradient-4);}</style><radialGradient id="radial-gradient" cx="208.79" cy="99.06" r="57.13" gradientTransform="translate(227.6 -122.69) rotate(102.18) scale(1 1.28)" gradientUnits="userSpaceOnUse"><stop offset="0.05" stop-color="#436275"/><stop offset="0.1" stop-color="#415f72"/><stop offset="0.13" stop-color="#3a5769"/><stop offset="0.16" stop-color="#2e4959"/><stop offset="0.19" stop-color="#1d3543"/><stop offset="0.19" stop-color="#1b3240"/><stop offset="0.26" stop-color="#1e3644"/><stop offset="0.32" stop-color="#274150"/><stop offset="0.39" stop-color="#365364"/><stop offset="0.43" stop-color="#436275"/><stop offset="0.49" stop-color="#3f5d6f"/><stop offset="0.56" stop-color="#324e5f"/><stop offset="0.65" stop-color="#1e3644"/><stop offset="0.66" stop-color="#1b3240"/><stop offset="0.85" stop-color="#1b3240"/><stop offset="0.9" stop-color="#2c4656"/><stop offset="0.95" stop-color="#436275"/></radialGradient><radialGradient id="radial-gradient-2" cx="59.15" cy="56.86" r="46.01" gradientTransform="matrix(-0.52, 0.85, -1.09, -0.66, 151.75, 43.43)" gradientUnits="userSpaceOnUse"><stop offset="0" stop-color="#436275"/><stop offset="0.1" stop-color="#426073"/><stop offset="0.13" stop-color="#3c5a6c"/><stop offset="0.16" stop-color="#344f61"/><stop offset="0.18" stop-color="#274050"/><stop offset="0.19" stop-color="#1b3240"/><stop offset="0.26" stop-color="#1e3644"/><stop offset="0.32" stop-color="#274150"/><stop offset="0.39" stop-color="#365364"/><stop offset="0.43" stop-color="#436275"/><stop offset="0.49" stop-color="#3f5d6f"/><stop offset="0.56" stop-color="#324e5f"/><stop offset="0.65" stop-color="#1e3644"/><stop offset="0.66" stop-color="#1b3240"/><stop offset="0.85" stop-color="#1b3240"/><stop offset="0.92" stop-color="#2c4656"/><stop offset="1" stop-color="#436275"/></radialGradient><radialGradient id="radial-gradient-3" cx="-521.06" cy="366.16" r="32.44" gradientTransform="translate(353.22 -558.2) rotate(-21.55) scale(1 1.28)" gradientUnits="userSpaceOnUse"><stop offset="0" stop-color="#436275"/><stop offset="0.02" stop-color="#436275" stop-opacity="0.97"/><stop offset="0.34" stop-color="#436275" stop-opacity="0.55"/><stop offset="0.62" stop-color="#436275" stop-opacity="0.25"/><stop offset="0.85" stop-color="#436275" stop-opacity="0.07"/><stop offset="1" stop-color="#436275" stop-opacity="0"/></radialGradient><radialGradient id="radial-gradient-4" cx="-136.43" cy="140.9" r="54.82" gradientTransform="translate(242.58 104.51) rotate(58.19) scale(1 0.7)" gradientUnits="userSpaceOnUse"><stop offset="0" stop-color="#436275"/><stop offset="0.58" stop-color="#436275" stop-opacity="0.4"/><stop offset="1" stop-color="#436275" stop-opacity="0"/></radialGradient></defs><title>Empty-state-illustration</title><g id="Layer_2" data-name="Layer 2"><g id="Layer_1-2" data-name="Layer 1"><g class="cls-1"><path class="cls-2" d="M80.06,4.35c-13.32-6.18-29.35-5.57-42.71.53S13.26,22.2,6.63,35.31C1.14,46.16-1.69,58.78,1.08,70.63,3.79,82.22,11.75,92.21,21.73,98.69s21.86,9.66,33.73,10.54c11.45.85,23.26-.43,33.68-5.27,19-8.83,31.51-30,30.09-50.91s-20.11-40-38.57-48.3Z"/></g><g class="cls-1"><path class="cls-3" d="M91.49,23.42c-11.21-9.58-24.94-13-38.61-11.88A45.54,45.54,0,0,0,19,32.25a49.05,49.05,0,0,0-5.48,39.52,35.93,35.93,0,0,0,7.15,13.75C26,91.54,33.6,95,41.27,97.28a64.6,64.6,0,0,0,20.16,3,47.46,47.46,0,0,0,32-13.61,44.74,44.74,0,0,0,13.06-32.08,42.49,42.49,0,0,0-15-31.19Z"/></g><circle class="cls-4" cx="23.53" cy="73.77" r="11.93"/><circle class="cls-5" cx="23.53" cy="73.77" r="11.93"/><circle class="cls-6" cx="61.95" cy="55.24" r="34.25"/><circle class="cls-7" cx="61.95" cy="55.24" r="34.25"/></g></g></svg>

packages/resource-step/src/index.js

@@ -46,46 +46,42 @@ export const Header = ({ icon = null, children }) => (
             <Flex justifyBetween>
               <FlexItem>
                 <Flex alignCenter>
-                  <FlexItem>{icon}</FlexItem>
                   <FlexItem>
-                    <Divider vertical />
+                    <Margin right="2">{icon}</Margin>
                   </FlexItem>
                   <FlexItem>
                     <H3 bold>{children}</H3>
                   </FlexItem>
-                  <FlexItem>
+                  {/* improve this */}
-                    <Divider vertical />
+                  {optional ? (
-                  </FlexItem>
+                    <Fragment>
-                  <FlexItem alignCenter>
+                      <FlexItem>
-                    <Link
+                        <Margin horizontal="1">
-                      to={expanded ? `/${namespace}` : `/${namespace}/${name}`}
+                          <Divider vertical />
-                    >
-                      <Flex alignCenter>
-                        {expanded ? 'Save and Collase' : 'Expand'}
-                        <Margin left={1}>
-                          <Flex>
-                            <ArrowIcon
-                              fill="primary"
-                              direction={expanded ? 'up' : 'down'}
-                            />
-                          </Flex>
                         </Margin>
-                      </Flex>
+                      </FlexItem>
-                    </Link>
+                      <FlexItem>
-                  </FlexItem>
+                        <P optional>Optional</P>
+                      </FlexItem>
+                    </Fragment>
+                  ) : null}
                 </Flex>
               </FlexItem>
-              {isValid && !expanded && saved ? (
+              <FlexItem alignCenter>
-                <FlexItem>
+                <Link to={expanded ? `/${namespace}` : `/${namespace}/${name}`}>
-                  <SavedIcon />
+                  <Flex alignCenter>
-                </FlexItem>
+                    {expanded ? 'Save and Collapse' : 'Edit'}
-              ) : null}
+                    <Margin left="1">
-              {/* improve this */}
+                      <Flex>
-              {!saved && optional ? (
+                        <ArrowIcon
-                <FlexItem>
+                          fill="primary"
-                  <P optional>Optional</P>
+                          direction={expanded ? 'up' : 'down'}
-                </FlexItem>
+                        />
-              ) : null}
+                      </Flex>
+                    </Margin>
+                  </Flex>
+                </Link>
+              </FlexItem>
               {!expanded && !isValid ? (
                 <FlexItem>
                   <ErrorIcon />
@@ -93,7 +89,7 @@ export const Header = ({ icon = null, children }) => (
               ) : null}
             </Flex>
             {expanded || saved ? (
-              <Margin vertical={3}>
+              <Margin vertical="3">
                 <Divider noMargin />
               </Margin>
             ) : null}
@@ -172,7 +168,7 @@ export default class Step extends PureComponent {
       >
         <Card expanded={expanded} error={!expanded && !isValid}>
           <CardOutlet>
-            <Padding all={5}>{children}</Padding>
+            <Padding all="5">{children}</Padding>
           </CardOutlet>
         </Card>
       </Broadcast>

packages/resource-widgets/src/__tests__/__snapshots__/cns.spec.js.snap

@@ -1,15 +1,19 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
 exports[`renders <AddServiceForm /> without throwing 1`] = `
-.c6 {
+.c0 {
-  margin-top: 0.1875rem;
+  margin-bottom: 1.125rem;
 }
 
 .c8 {
+  margin-top: 0.1875rem;
+}
+
+.c10 {
   margin-left: 0.75rem;
 }
 
-.c0 {
+.c2 {
   display: -webkit-box;
   display: -webkit-flex;
   display: -ms-flexbox;
@@ -36,7 +40,7 @@ exports[`renders <AddServiceForm /> without throwing 1`] = `
   align-items: flex-end;
 }
 
-.c2 {
+.c4 {
   display: -webkit-box;
   display: -webkit-flex;
   display: -ms-flexbox;
@@ -56,7 +60,7 @@ exports[`renders <AddServiceForm /> without throwing 1`] = `
   align-content: stretch;
 }
 
-.c1 {
+.c3 {
   -webkit-order: 0;
   -ms-flex-order: 0;
   order: 0;
@@ -73,7 +77,7 @@ exports[`renders <AddServiceForm /> without throwing 1`] = `
   display: block;
 }
 
-.c12 {
+.c14 {
   font-family: sans-serif;
   font-size: 100%;
   line-height: 1.15;
@@ -85,30 +89,30 @@ exports[`renders <AddServiceForm /> without throwing 1`] = `
   appearance: button;
 }
 
-.c12::-moz-focus-inner,
+.c14::-moz-focus-inner,
-.c12[type='button']::-moz-focus-inner,
+.c14[type='button']::-moz-focus-inner,
-.c12[type='reset']::-moz-focus-inner,
+.c14[type='reset']::-moz-focus-inner,
-.c12[type='submit']::-moz-focus-inner {
+.c14[type='submit']::-moz-focus-inner {
   border-style: none;
   padding: 0;
 }
 
-.c12:-moz-focusring,
+.c14:-moz-focusring,
-.c12[type='button']:-moz-focusring,
+.c14[type='button']:-moz-focusring,
-.c12[type='reset']:-moz-focusring,
+.c14[type='reset']:-moz-focusring,
-.c12[type='submit']:-moz-focusring {
+.c14[type='submit']:-moz-focusring {
   outline: 0.0625rem dotted ButtonText;
 }
 
-.c11 {
+.c13 {
   min-width: 7.5rem;
 }
 
-.c10 {
+.c12 {
   display: inline-block;
 }
 
-.c9 {
+.c11 {
   box-sizing: border-box;
   display: inline-block;
   -webkit-box-pack: center;
@@ -129,7 +133,6 @@ exports[`renders <AddServiceForm /> without throwing 1`] = `
   text-align: center;
   font-style: normal;
   font-stretch: normal;
-  line-height: normal;
   -webkit-letter-spacing: normal;
   -moz-letter-spacing: normal;
   -ms-letter-spacing: normal;
@@ -148,7 +151,7 @@ exports[`renders <AddServiceForm /> without throwing 1`] = `
   border: solid 0.0625rem rgb(45,56,132);
 }
 
-.c9:focus {
+.c11:focus {
   outline: 0;
   -webkit-text-decoration: none;
   text-decoration: none;
@@ -156,26 +159,26 @@ exports[`renders <AddServiceForm /> without throwing 1`] = `
   border-color: rgb(45,56,132);
 }
 
-.c9:hover {
+.c11:hover {
   background-color: rgb(72,83,217);
   border: solid 0.0625rem rgb(45,56,132);
 }
 
-.c9:active,
+.c11:active,
-.c9:active:hover,
+.c11:active:hover,
-.c9:active:focus {
+.c11:active:focus {
   background-image: none;
   outline: 0;
   background-color: rgb(45,56,132);
   border-color: rgb(45,56,132);
 }
 
-.c9[disabled] {
+.c11[disabled] {
   cursor: not-allowed;
   pointer-events: none;
 }
 
-.c5 {
+.c7 {
   font-size: 0.9375rem;
   line-height: 1.125rem;
   font-style: normal;
@@ -185,7 +188,7 @@ exports[`renders <AddServiceForm /> without throwing 1`] = `
   text-align: left;
 }
 
-.c3 {
+.c5 {
   display: inline-block;
   padding: 0;
   border: none;
@@ -197,7 +200,7 @@ exports[`renders <AddServiceForm /> without throwing 1`] = `
   -webkit-padding-after: 0;
 }
 
-.c7 {
+.c9 {
   box-sizing: border-box;
   width: 18.75rem;
   height: 3rem;
@@ -219,121 +222,134 @@ exports[`renders <AddServiceForm /> without throwing 1`] = `
   text-overflow: ellipsis;
 }
 
-.c7:focus {
+.c9:focus {
   border-color: rgb(59,70,204);
   outline: 0;
 }
 
-.c7::-webkit-input-placeholder {
+.c9::-webkit-input-placeholder {
   color: rgba(73,73,73,0.5);
 }
 
-.c7::-moz-placeholder {
+.c9::-moz-placeholder {
   color: rgba(73,73,73,0.5);
 }
 
-.c7:-ms-input-placeholder {
+.c9:-ms-input-placeholder {
   color: rgba(73,73,73,0.5);
 }
 
-.c7:invalid {
+.c9:invalid {
   box-shadow: none;
 }
 
-.c7:disabled {
+.c9:disabled {
   background-color: rgb(250,250,250);
   color: rgb(216,216,216);
   cursor: not-allowed;
 }
 
-.c7:disabled::-webkit-input-placeholder {
+.c9:disabled::-webkit-input-placeholder {
   color: rgba(73,73,73,0.5);
 }
 
-.c7:disabled::-moz-placeholder {
+.c9:disabled::-moz-placeholder {
   color: rgba(73,73,73,0.5);
 }
 
-.c7:disabled:-ms-input-placeholder {
+.c9:disabled:-ms-input-placeholder {
   color: rgba(73,73,73,0.5);
 }
 
-.c4 {
+.c6 {
   font-weight: 600;
   white-space: pre;
   font-size: 0.8125rem;
 }
 
-<form
+.c1 {
-  onSubmit={undefined}
+  margin-bottom: 0;
+}
+
+<div
+  className="c0"
 >
-  <div
+  <form
-    className="c0"
+    className="c1"
-    wrap={true}
+    onSubmit={undefined}
   >
     <div
-      className="c1"
+      className="c2"
+      wrap={true}
     >
       <div
-        className="c2"
+        className="c3"
       >
         <div
-          className="c3"
+          className="c4"
-          name="name"
-          role="group"
-          style={undefined}
         >
-          <label
-            className="c4 c5"
-            htmlFor="k"
-          >
-            Attach to new CNS service name
-          </label>
           <div
-            className="c6"
+            className="c5"
+            name="name"
+            role="group"
+            style={undefined}
           >
-            <input
+            <label
-              className="c7"
+              className="c6 c7"
-              disabled={false}
+              htmlFor="k"
-              id="k"
+            >
-              onBlur={null}
+              Attach to new CNS service name
-              placeholder="Example: mySQLdb"
+            </label>
-            />
+            <div
+              className="c8"
+            >
+              <input
+                className="c9"
+                disabled={false}
+                id="k"
+                onBlur={null}
+                placeholder="Example: mySQLdb"
+              />
+            </div>
           </div>
         </div>
       </div>
-    </div>
-    <div
-      className="c1"
-    >
       <div
-        className="c8"
+        className="c3"
       >
-        <button
+        <div
-          className="c9 c10 c11 c12"
+          className="c10"
-          data-ui-button="true"
-          disabled={undefined}
-          href=""
-          type="submit"
         >
-          Add
+          <button
-        </button>
+            className="c11 c12 c13 c14"
+            data-ui-button="true"
+            disabled={undefined}
+            href=""
+            type="submit"
+          >
+            Add
+          </button>
+        </div>
       </div>
     </div>
-  </div>
+  </form>
-</form>
+</div>
 `;
 
 exports[`renders <AddServiceForm pristine /> without throwing 1`] = `
-.c6 {
+.c0 {
-  margin-top: 0.1875rem;
+  margin-bottom: 1.125rem;
 }
 
 .c8 {
+  margin-top: 0.1875rem;
+}
+
+.c10 {
   margin-left: 0.75rem;
 }
 
-.c0 {
+.c2 {
   display: -webkit-box;
   display: -webkit-flex;
   display: -ms-flexbox;
@@ -360,7 +376,7 @@ exports[`renders <AddServiceForm pristine /> without throwing 1`] = `
   align-items: flex-end;
 }
 
-.c2 {
+.c4 {
   display: -webkit-box;
   display: -webkit-flex;
   display: -ms-flexbox;
@@ -380,7 +396,7 @@ exports[`renders <AddServiceForm pristine /> without throwing 1`] = `
   align-content: stretch;
 }
 
-.c1 {
+.c3 {
   -webkit-order: 0;
   -ms-flex-order: 0;
   order: 0;
@@ -397,7 +413,7 @@ exports[`renders <AddServiceForm pristine /> without throwing 1`] = `
   display: block;
 }
 
-.c12 {
+.c14 {
   font-family: sans-serif;
   font-size: 100%;
   line-height: 1.15;
@@ -409,30 +425,30 @@ exports[`renders <AddServiceForm pristine /> without throwing 1`] = `
   appearance: button;
 }
 
-.c12::-moz-focus-inner,
+.c14::-moz-focus-inner,
-.c12[type='button']::-moz-focus-inner,
+.c14[type='button']::-moz-focus-inner,
-.c12[type='reset']::-moz-focus-inner,
+.c14[type='reset']::-moz-focus-inner,
-.c12[type='submit']::-moz-focus-inner {
+.c14[type='submit']::-moz-focus-inner {
   border-style: none;
   padding: 0;
 }
 
-.c12:-moz-focusring,
+.c14:-moz-focusring,
-.c12[type='button']:-moz-focusring,
+.c14[type='button']:-moz-focusring,
-.c12[type='reset']:-moz-focusring,
+.c14[type='reset']:-moz-focusring,
-.c12[type='submit']:-moz-focusring {
+.c14[type='submit']:-moz-focusring {
   outline: 0.0625rem dotted ButtonText;
 }
 
-.c11 {
+.c13 {
   min-width: 7.5rem;
 }
 
-.c10 {
+.c12 {
   display: inline-block;
 }
 
-.c9 {
+.c11 {
   box-sizing: border-box;
   display: inline-block;
   -webkit-box-pack: center;
@@ -453,7 +469,6 @@ exports[`renders <AddServiceForm pristine /> without throwing 1`] = `
   text-align: center;
   font-style: normal;
   font-stretch: normal;
-  line-height: normal;
   -webkit-letter-spacing: normal;
   -moz-letter-spacing: normal;
   -ms-letter-spacing: normal;
@@ -472,7 +487,7 @@ exports[`renders <AddServiceForm pristine /> without throwing 1`] = `
   border: solid 0.0625rem rgb(45,56,132);
 }
 
-.c9:focus {
+.c11:focus {
   outline: 0;
   -webkit-text-decoration: none;
   text-decoration: none;
@@ -480,26 +495,26 @@ exports[`renders <AddServiceForm pristine /> without throwing 1`] = `
   border-color: rgb(45,56,132);
 }
 
-.c9:hover {
+.c11:hover {
   background-color: rgb(72,83,217);
   border: solid 0.0625rem rgb(45,56,132);
 }
 
-.c9:active,
+.c11:active,
-.c9:active:hover,
+.c11:active:hover,
-.c9:active:focus {
+.c11:active:focus {
   background-image: none;
   outline: 0;
   background-color: rgb(45,56,132);
   border-color: rgb(45,56,132);
 }
 
-.c9[disabled] {
+.c11[disabled] {
   cursor: not-allowed;
   pointer-events: none;
 }
 
-.c5 {
+.c7 {
   font-size: 0.9375rem;
   line-height: 1.125rem;
   font-style: normal;
@@ -509,7 +524,7 @@ exports[`renders <AddServiceForm pristine /> without throwing 1`] = `
   text-align: left;
 }
 
-.c3 {
+.c5 {
   display: inline-block;
   padding: 0;
   border: none;
@@ -521,7 +536,7 @@ exports[`renders <AddServiceForm pristine /> without throwing 1`] = `
   -webkit-padding-after: 0;
 }
 
-.c7 {
+.c9 {
   box-sizing: border-box;
   width: 18.75rem;
   height: 3rem;
@@ -543,109 +558,118 @@ exports[`renders <AddServiceForm pristine /> without throwing 1`] = `
   text-overflow: ellipsis;
 }
 
-.c7:focus {
+.c9:focus {
   border-color: rgb(59,70,204);
   outline: 0;
 }
 
-.c7::-webkit-input-placeholder {
+.c9::-webkit-input-placeholder {
   color: rgba(73,73,73,0.5);
 }
 
-.c7::-moz-placeholder {
+.c9::-moz-placeholder {
   color: rgba(73,73,73,0.5);
 }
 
-.c7:-ms-input-placeholder {
+.c9:-ms-input-placeholder {
   color: rgba(73,73,73,0.5);
 }
 
-.c7:invalid {
+.c9:invalid {
   box-shadow: none;
 }
 
-.c7:disabled {
+.c9:disabled {
   background-color: rgb(250,250,250);
   color: rgb(216,216,216);
   cursor: not-allowed;
 }
 
-.c7:disabled::-webkit-input-placeholder {
+.c9:disabled::-webkit-input-placeholder {
   color: rgba(73,73,73,0.5);
 }
 
-.c7:disabled::-moz-placeholder {
+.c9:disabled::-moz-placeholder {
   color: rgba(73,73,73,0.5);
 }
 
-.c7:disabled:-ms-input-placeholder {
+.c9:disabled:-ms-input-placeholder {
   color: rgba(73,73,73,0.5);
 }
 
-.c4 {
+.c6 {
   font-weight: 600;
   white-space: pre;
   font-size: 0.8125rem;
 }
 
-<form
+.c1 {
-  onSubmit={undefined}
+  margin-bottom: 0;
+}
+
+<div
+  className="c0"
 >
-  <div
+  <form
-    className="c0"
+    className="c1"
-    wrap={true}
+    onSubmit={undefined}
   >
     <div
-      className="c1"
+      className="c2"
+      wrap={true}
     >
       <div
-        className="c2"
+        className="c3"
       >
         <div
-          className="c3"
+          className="c4"
-          name="name"
-          role="group"
-          style={undefined}
         >
-          <label
-            className="c4 c5"
-            htmlFor="l"
-          >
-            Attach to new CNS service name
-          </label>
           <div
-            className="c6"
+            className="c5"
+            name="name"
+            role="group"
+            style={undefined}
           >
-            <input
+            <label
-              className="c7"
+              className="c6 c7"
-              disabled={false}
+              htmlFor="l"
-              id="l"
+            >
-              onBlur={null}
+              Attach to new CNS service name
-              placeholder="Example: mySQLdb"
+            </label>
-            />
+            <div
+              className="c8"
+            >
+              <input
+                className="c9"
+                disabled={false}
+                id="l"
+                onBlur={null}
+                placeholder="Example: mySQLdb"
+              />
+            </div>
           </div>
         </div>
       </div>
-    </div>
-    <div
-      className="c1"
-    >
       <div
-        className="c8"
+        className="c3"
       >
-        <button
+        <div
-          className="c9 c10 c11 c12"
+          className="c10"
-          data-ui-button="true"
-          disabled={undefined}
-          href=""
-          type="submit"
         >
-          Add
+          <button
-        </button>
+            className="c11 c12 c13 c14"
+            data-ui-button="true"
+            disabled={undefined}
+            href=""
+            type="submit"
+          >
+            Add
+          </button>
+        </div>
       </div>
     </div>
-  </div>
+  </form>
-</form>
+</div>
 `;
 
 exports[`renders <Header/> without throwing 1`] = `
@@ -824,14 +848,14 @@ exports[`renders <Hostname /> without throwing 1`] = `
 `;
 
 exports[`renders <Hostname values /> without throwing 1`] = `
-.c10 {
-  margin-top: 0.1875rem;
-}
-
 .c0 {
   margin-bottom: 1.125rem;
 }
 
+.c10 {
+  margin-top: 0.1875rem;
+}
+
 .c6 {
   margin-right: 0.375rem;
   margin-bottom: 0.1875rem;

packages/resource-widgets/src/__tests__/__snapshots__/firewall.spec.js.snap

@@ -96,11 +96,6 @@ Array [
   -webkit-box-align: center;
   -ms-flex-align: center;
   align-items: center;
-  width: 100%;
-  height: 100%;
-  -webkit-flex-basis: 100%;
-  -ms-flex-preferred-size: 100%;
-  flex-basis: 100%;
 }
 
 .c10 {
@@ -246,21 +241,6 @@ Array [
 }
 
 .c17 {
-  display: -webkit-box;
-  display: -webkit-flex;
-  display: -ms-flexbox;
-  display: flex;
-  -webkit-align-items: center;
-  -webkit-box-align: center;
-  -ms-flex-align: center;
-  align-items: center;
-  -webkit-box-flex: 1;
-  -webkit-flex-grow: 1;
-  -ms-flex-positive: 1;
-  flex-grow: 1;
-}
-
-.c18 {
   border: 0.0625rem solid rgb(216,216,216);
   box-sizing: border-box;
   border-radius: 0.125rem;
@@ -1274,21 +1254,17 @@ Array [
                                     <ul
                                         className="c16"
                                     >
-                                        <div
+                                        <li
                                             className="c17"
-                                        >
+                                            fill={null}
-                                            <li
+                                            name="wat"
-                                                className="c18"
+                                            style={
-                                                fill={null}
+                                                Object {
-                                                name="wat"
+                                                    "color": "#D8D8D8",
-                                                style={
+                                                  }
-                                                    Object {
+                                            }
-                                                        "color": "#D8D8D8",
+                                            value=""
-                                                      }
+                                        />
-                                                }
-                                                value=""
-                                            />
-                                        </div>
                                     </ul>
                                 </div>
                             </div>
@@ -1468,11 +1444,6 @@ Array [
   -webkit-box-align: center;
   -ms-flex-align: center;
   align-items: center;
-  width: 100%;
-  height: 100%;
-  -webkit-flex-basis: 100%;
-  -ms-flex-preferred-size: 100%;
-  flex-basis: 100%;
 }
 
 .c9 {
@@ -1871,11 +1842,6 @@ Array [
   -webkit-box-align: center;
   -ms-flex-align: center;
   align-items: center;
-  width: 100%;
-  height: 100%;
-  -webkit-flex-basis: 100%;
-  -ms-flex-preferred-size: 100%;
-  flex-basis: 100%;
 }
 
 .c9 {
@@ -2274,11 +2240,6 @@ Array [
   -webkit-box-align: center;
   -ms-flex-align: center;
   align-items: center;
-  width: 100%;
-  height: 100%;
-  -webkit-flex-basis: 100%;
-  -ms-flex-preferred-size: 100%;
-  flex-basis: 100%;
 }
 
 .c9 {
@@ -2681,11 +2642,6 @@ Array [
   -webkit-box-align: center;
   -ms-flex-align: center;
   align-items: center;
-  width: 100%;
-  height: 100%;
-  -webkit-flex-basis: 100%;
-  -ms-flex-preferred-size: 100%;
-  flex-basis: 100%;
 }
 
 .c9 {
@@ -3092,11 +3048,6 @@ Array [
   -webkit-box-align: center;
   -ms-flex-align: center;
   align-items: center;
-  width: 100%;
-  height: 100%;
-  -webkit-flex-basis: 100%;
-  -ms-flex-preferred-size: 100%;
-  flex-basis: 100%;
 }
 
 .c9 {
@@ -3169,7 +3120,7 @@ Array [
   display: block;
 }
 
-.c15 {
+.c14 {
   box-sizing: border-box;
   -webkit-flex: 0 0 auto;
   -ms-flex: 0 0 auto;
@@ -3220,21 +3171,6 @@ Array [
 }
 
 .c13 {
-  display: -webkit-box;
-  display: -webkit-flex;
-  display: -ms-flexbox;
-  display: flex;
-  -webkit-align-items: center;
-  -webkit-box-align: center;
-  -ms-flex-align: center;
-  align-items: center;
-  -webkit-box-flex: 1;
-  -webkit-flex-grow: 1;
-  -ms-flex-positive: 1;
-  flex-grow: 1;
-}
-
-.c14 {
   border: 0.0625rem solid rgb(216,216,216);
   box-sizing: border-box;
   border-radius: 0.125rem;
@@ -3278,7 +3214,7 @@ Array [
 }
 
 @media only screen and (min-width:0em) {
-  .c15 {
+  .c14 {
     -webkit-flex-basis: 16.666666666666668%;
     -ms-flex-preferred-size: 16.666666666666668%;
     flex-basis: 16.666666666666668%;
@@ -3373,28 +3309,24 @@ Array [
                                 <ul
                                     className="c12"
                                 >
-                                    <div
+                                    <li
                                         className="c13"
-                                    >
+                                        fill={null}
-                                        <li
+                                        name="wat"
-                                            className="c14"
+                                        style={
-                                            fill={null}
+                                            Object {
-                                            name="wat"
+                                                "color": "#D8D8D8",
-                                            style={
+                                              }
-                                                Object {
+                                        }
-                                                    "color": "#D8D8D8",
+                                        value=""
-                                                  }
+                                    />
-                                            }
-                                            value=""
-                                        />
-                                    </div>
                                 </ul>
                             </div>
                         </div>
                     </div>
                 </div>
                 <div
-                    className="c15"
+                    className="c14"
                 >
                     <div
                         className="c5"
@@ -3434,7 +3366,7 @@ Array [
                     </div>
                 </div>
                 <div
-                    className="c15"
+                    className="c14"
                 >
                     <div
                         className="c5"
@@ -3474,7 +3406,7 @@ Array [
                     </div>
                 </div>
                 <div
-                    className="c15"
+                    className="c14"
                 >
                     <div
                         className="c5"
@@ -3618,11 +3550,6 @@ Array [
   -webkit-box-align: center;
   -ms-flex-align: center;
   align-items: center;
-  width: 100%;
-  height: 100%;
-  -webkit-flex-basis: 100%;
-  -ms-flex-preferred-size: 100%;
-  flex-basis: 100%;
 }
 
 .c10 {
@@ -3768,21 +3695,6 @@ Array [
 }
 
 .c17 {
-  display: -webkit-box;
-  display: -webkit-flex;
-  display: -ms-flexbox;
-  display: flex;
-  -webkit-align-items: center;
-  -webkit-box-align: center;
-  -ms-flex-align: center;
-  align-items: center;
-  -webkit-box-flex: 1;
-  -webkit-flex-grow: 1;
-  -ms-flex-positive: 1;
-  flex-grow: 1;
-}
-
-.c18 {
   border: 0.0625rem solid rgb(216,216,216);
   box-sizing: border-box;
   border-radius: 0.125rem;
@@ -4796,21 +4708,17 @@ Array [
                                     <ul
                                         className="c16"
                                     >
-                                        <div
+                                        <li
                                             className="c17"
-                                        >
+                                            fill={null}
-                                            <li
+                                            name="wat"
-                                                className="c18"
+                                            style={
-                                                fill={null}
+                                                Object {
-                                                name="wat"
+                                                    "color": "#D8D8D8",
-                                                style={
+                                                  }
-                                                    Object {
+                                            }
-                                                        "color": "#D8D8D8",
+                                            value=""
-                                                      }
+                                        />
-                                                }
-                                                value=""
-                                            />
-                                        </div>
                                     </ul>
                                 </div>
                             </div>
@@ -5146,6 +5054,7 @@ exports[`renders <ToggleFirewallForm /> without throwing 1`] = `
 >
   <div
     className="c1"
+    id="fw-toggle-firewall"
     name="enabled"
     role="group"
     style={undefined}
@@ -5158,7 +5067,7 @@ exports[`renders <ToggleFirewallForm /> without throwing 1`] = `
         checked={false}
         className="c3"
         disabled={false}
-        id="k"
+        id="fw-toggle-firewall"
         onBlur={undefined}
         type="checkbox"
       >
@@ -5179,7 +5088,7 @@ exports[`renders <ToggleFirewallForm /> without throwing 1`] = `
         checked={false}
         className="c7"
         disabled={false}
-        id="k"
+        id="fw-toggle-firewall"
         onBlur={undefined}
       >
         <label
@@ -5400,6 +5309,7 @@ exports[`renders <ToggleFirewallForm submitting /> without throwing 1`] = `
 >
   <div
     className="c1"
+    id="fw-toggle-firewall"
     name="enabled"
     role="group"
     style={undefined}
@@ -5412,7 +5322,7 @@ exports[`renders <ToggleFirewallForm submitting /> without throwing 1`] = `
         checked={false}
         className="c3"
         disabled={true}
-        id="m"
+        id="fw-toggle-firewall"
         onBlur={undefined}
         type="checkbox"
       >
@@ -5433,7 +5343,7 @@ exports[`renders <ToggleFirewallForm submitting /> without throwing 1`] = `
         checked={false}
         className="c7"
         disabled={true}
-        id="m"
+        id="fw-toggle-firewall"
         onBlur={undefined}
       >
         <label
@@ -5653,6 +5563,7 @@ exports[`renders <ToggleInactiveForm /> without throwing 1`] = `
 >
   <div
     className="c1"
+    id="fw-toggle-inactive"
     name="inactive"
     role="group"
     style={undefined}
@@ -5665,7 +5576,7 @@ exports[`renders <ToggleInactiveForm /> without throwing 1`] = `
         checked={false}
         className="c3"
         disabled={false}
-        id="o"
+        id="fw-toggle-inactive"
         onBlur={undefined}
         type="checkbox"
       >
@@ -5686,7 +5597,7 @@ exports[`renders <ToggleInactiveForm /> without throwing 1`] = `
         checked={false}
         className="c7"
         disabled={false}
-        id="o"
+        id="fw-toggle-inactive"
         onBlur={undefined}
       >
         <label

packages/resource-widgets/src/__tests__/__snapshots__/network.spec.js.snap

@@ -479,6 +479,7 @@ exports[`renders <Network /> without throwing 1`] = `
           >
             <div
               className="c8"
+              id="network-checkbox-"
               name={undefined}
               role="group"
               style={undefined}
@@ -490,7 +491,7 @@ exports[`renders <Network /> without throwing 1`] = `
                   checked={false}
                   className="c10"
                   disabled={false}
-                  id="l"
+                  id="network-checkbox-"
                   onBlur={undefined}
                   type="checkbox"
                 >
@@ -1389,6 +1390,7 @@ exports[`renders <Network {...network} /> without throwing 1`] = `
           >
             <div
               className="c8"
+              id="network-checkbox-name"
               name="1"
               role="group"
               style={undefined}
@@ -1400,7 +1402,7 @@ exports[`renders <Network {...network} /> without throwing 1`] = `
                   checked={false}
                   className="c10"
                   disabled={false}
-                  id="n"
+                  id="network-checkbox-name"
                   onBlur={undefined}
                   type="checkbox"
                 >
@@ -2312,6 +2314,7 @@ exports[`renders <Network {...network} /> without throwing 3`] = `
           >
             <div
               className="c8"
+              id="network-checkbox-name"
               name="1"
               role="group"
               style={undefined}
@@ -2323,7 +2326,7 @@ exports[`renders <Network {...network} /> without throwing 3`] = `
                   checked={false}
                   className="c10"
                   disabled={false}
-                  id="p"
+                  id="network-checkbox-name"
                   onBlur={undefined}
                   type="checkbox"
                 >
@@ -3285,6 +3288,7 @@ exports[`renders <Network {...network} fabric /> without throwing 1`] = `
           >
             <div
               className="c8"
+              id="network-checkbox-name"
               name="1"
               role="group"
               style={undefined}
@@ -3296,7 +3300,7 @@ exports[`renders <Network {...network} fabric /> without throwing 1`] = `
                   checked={false}
                   className="c10"
                   disabled={false}
-                  id="t"
+                  id="network-checkbox-name"
                   onBlur={undefined}
                   type="checkbox"
                 >
@@ -4533,6 +4537,7 @@ exports[`renders <Network {...network} infoExpanded /> without throwing 1`] = `
           >
             <div
               className="c8"
+              id="network-checkbox-name"
               name="1"
               role="group"
               style={undefined}
@@ -4544,7 +4549,7 @@ exports[`renders <Network {...network} infoExpanded /> without throwing 1`] = `
                   checked={false}
                   className="c10"
                   disabled={false}
-                  id="v"
+                  id="network-checkbox-name"
                   onBlur={undefined}
                   type="checkbox"
                 >
@@ -5744,6 +5749,7 @@ exports[`renders <Network {...network} public /> without throwing 1`] = `
           >
             <div
               className="c8"
+              id="network-checkbox-name"
               name="1"
               role="group"
               style={undefined}
@@ -5755,7 +5761,7 @@ exports[`renders <Network {...network} public /> without throwing 1`] = `
                   checked={false}
                   className="c10"
                   disabled={false}
-                  id="r"
+                  id="network-checkbox-name"
                   onBlur={undefined}
                   type="checkbox"
                 >

packages/resource-widgets/src/cns/index.js

@@ -9,7 +9,7 @@ import {
   P as BaseP,
   H3 as BaseH3,
   Divider,
-  TagList,
+  TagList as BaseTagList,
   Input,
   Toggle as BaseToggle,
   Small,
@@ -23,6 +23,10 @@ import {
   TagItem
 } from 'joyent-ui-toolkit';
 
+const TagList = styled(BaseTagList)`
+  margin-bottom: ${remcalc(-6)};
+`;
+
 const SmallBordered = styled(Small)`
   padding-right: ${remcalc(12)};
   margin-right: ${remcalc(12)};
@@ -46,6 +50,10 @@ const ShortDivider = styled(Divider)`
   margin-right: 0;
 `;
 
+const Form = styled.form`
+  margin-bottom: 0;
+`;
+
 export const Header = () => (
   <Margin bottom={5}>
     <H3>CNS Default Hostnames</H3>
@@ -95,38 +103,40 @@ export const AddServiceForm = ({
   pristine,
   invalid
 }) => (
-  <form onSubmit={handleSubmit}>
+  <Margin bottom={3}>
-    <Flex wrap alignCenter={invalid} alignEnd={!invalid}>
+    <Form onSubmit={handleSubmit}>
-      <FlexItem>
+      <Flex wrap alignCenter={invalid} alignEnd={!invalid}>
-        <Flex collumn>
+        <FlexItem>
-          <FormGroup name="name" field={Field}>
+          <Flex collumn>
-            <FormLabel>Attach to new CNS service name</FormLabel>
+            <FormGroup name="name" field={Field}>
-            <Margin top={0.5}>
+              <FormLabel>Attach to new CNS service name</FormLabel>
-              <Input
+              <Margin top={0.5}>
-                onBlur={null}
+                <Input
-                type="text"
+                  onBlur={null}
-                placeholder="Example: mySQLdb"
+                  type="text"
-                disabled={disabled || submitting}
+                  placeholder="Example: mySQLdb"
-              />
+                  disabled={disabled || submitting}
-              <FormMeta />
+                />
-            </Margin>
+                <FormMeta />
-          </FormGroup>
+              </Margin>
-        </Flex>
+            </FormGroup>
-      </FlexItem>
+          </Flex>
-      <FlexItem>
+        </FlexItem>
-        <Margin left={2}>
+        <FlexItem>
-          <Button
+          <Margin left={2}>
-            type="submit"
+            <Button
-            disabled={submitting}
+              type="submit"
-            loading={submitting}
+              disabled={submitting}
-            inline
+              loading={submitting}
-          >
+              inline
-            Add
+            >
-          </Button>
+              Add
-        </Margin>
+            </Button>
-      </FlexItem>
+          </Margin>
-    </Flex>
+        </FlexItem>
-  </form>
+      </Flex>
+    </Form>
+  </Margin>
 );
 
 export const Hostname = ({
@@ -195,28 +205,31 @@ const CnsHostnames = ({
 }) => (
   <Fragment>
     <HostnamesHeader />
+    {children}
     {services.length ? (
       <Margin bottom={3}>
         <FormLabel>Existing CNS service name(s)</FormLabel>
         <Margin top={1}>
           <TagList>
-            {services.map(value => (
+            {services.map((value, index) => (
-              <TagItem
+              <Margin right={1} bottom={1}>
-                active
+                <TagItem
-                fill={'rgba(66, 134, 244, 0.1)'}
+                  active
-                key={value}
+                  fill={'rgba(66, 134, 244, 0.1)'}
-                onRemoveClick={
+                  key={value}
-                  onRemoveService && (() => onRemoveService(value))
+                  onRemoveClick={
-                }
+                    onRemoveService && (() => onRemoveService(value))
-              >
+                  }
-                {value}
+                  id={'cns-tag-' + index}
-              </TagItem>
+                >
+                  {value}
+                </TagItem>
+              </Margin>
             ))}
           </TagList>
         </Margin>
       </Margin>
     ) : null}
-    {children}
     {hostnames.length &&
     hostnames.filter(({ values }) => values.length).length ? (
       <Margin top={5}>

packages/resource-widgets/src/empty/index.js

@@ -6,7 +6,7 @@ import is, { isNot } from 'styled-is';
 import remcalc from 'remcalc';
 
 import { H3, Card } from 'joyent-ui-toolkit';
-import { NoPackages } from 'joyent-logo-assets';
+import { EmptyState } from 'joyent-icons';
 
 const NoPackagesTitle = styled(H3)`
   color: ${props => props.theme.greyDark};
@@ -28,7 +28,7 @@ export default ({ children, ...rest }) => (
     <Padding all={6}>
       <Flex alignCenter justifyCenter column>
         <Margin bottom={2}>
-          <NoPackages />
+          <EmptyState />
         </Margin>
         <NoPackagesTitle>{children}</NoPackagesTitle>
       </Flex>

packages/resource-widgets/src/firewall/index.js

@@ -76,7 +76,7 @@ const Rule = ({ enabled, rule_obj }) => {
       <Padding left={3} right={3} top={2} bottom={2}>
         <Row>
           <Col xs={3}>
-            <Flex justifyStart alignCenter contentStretch full>
+            <Flex justifyStart alignCenter contentStretch>
               <Margin right={0.5}>
                 <FlexItem>
                   <Strong style={style}>From: </Strong>
@@ -86,7 +86,7 @@ const Rule = ({ enabled, rule_obj }) => {
             </Flex>
           </Col>
           <Col xs={3}>
-            <Flex justifyStart alignCenter contentStretch full>
+            <Flex justifyStart alignCenter contentStretch>
               <Margin right={0.5}>
                 <FlexItem>
                   <Strong style={style}>To: </Strong>
@@ -96,7 +96,7 @@ const Rule = ({ enabled, rule_obj }) => {
             </Flex>
           </Col>
           <Col xs={2}>
-            <Flex justifyStart alignCenter contentStretch full>
+            <Flex justifyStart alignCenter contentStretch>
               <Margin right={0.5}>
                 <FlexItem>
                   <Strong style={style}>Protocol: </Strong>
@@ -108,7 +108,7 @@ const Rule = ({ enabled, rule_obj }) => {
             </Flex>
           </Col>
           <Col xs={2}>
-            <Flex justifyStart alignCenter contentStretch full>
+            <Flex justifyStart alignCenter contentStretch>
               <Margin right={0.5}>
                 <FlexItem>
                   <Strong style={style}>Ports: </Strong>
@@ -120,7 +120,7 @@ const Rule = ({ enabled, rule_obj }) => {
             </Flex>
           </Col>
           <Col xs={2}>
-            <Flex justifyStart alignCenter contentStretch full>
+            <Flex justifyStart alignCenter contentStretch>
               <Margin right={0.5}>
                 <FlexItem>
                   <Strong style={style}>Action: </Strong>
@@ -177,7 +177,12 @@ export const ToggleFirewallForm = ({
 
   return (
     <Form onChange={onChange}>
-      <FormGroup type="checkbox" name="enabled" field={Field}>
+      <FormGroup
+        id={'fw-toggle-firewall'}
+        type="checkbox"
+        name="enabled"
+        field={Field}
+      >
         <Checkbox disabled={submitting}>
           <FormLabel noMargin actionable>
             <Margin left={2} right={2}>
@@ -192,7 +197,12 @@ export const ToggleFirewallForm = ({
 
 export const ToggleInactiveForm = () => (
   <Form>
-    <FormGroup type="checkbox" name="inactive" field={Field}>
+    <FormGroup
+      id={'fw-toggle-inactive'}
+      type="checkbox"
+      name="inactive"
+      field={Field}
+    >
       <Checkbox>
         <FormLabel noMargin actionable>
           <Margin left={2} right={2}>

packages/resource-widgets/src/network/index.js

@@ -7,6 +7,7 @@ import styled from 'styled-components';
 import Flex, { FlexItem } from 'styled-flex-component';
 import remcalc from 'remcalc';
 import { isNot } from 'styled-is';
+import paramCase from 'param-case';
 
 import {
   H4,
@@ -121,7 +122,11 @@ export const Expanded = ({
           <CardHeader secondary={selected}>
             {readOnly ? null : (
               <CardHeaderBox>
-                <FormGroup name={id} field={Field}>
+                <FormGroup
+                  id={'network-checkbox-' + paramCase(name)}
+                  name={id}
+                  field={Field}
+                >
                   <Checkbox noMargin checked={selected} />
                 </FormGroup>
               </CardHeaderBox>

packages/ui-toolkit/src/base/global.js

@@ -26,6 +26,7 @@ export default ({ theme }) => css`
     padding: 0;
     background: ${theme.background};
     color: ${theme.text};
+    -webkit-font-smoothing: antialiased;
   }
 
   html,

packages/ui-toolkit/src/button/__tests___/__snapshots__/button.spec.js.snap

@@ -46,7 +46,6 @@ exports[`Button Default Button 1`] = `
   text-align: center;
   font-style: normal;
   font-stretch: normal;
-  line-height: normal;
   -webkit-letter-spacing: normal;
   -moz-letter-spacing: normal;
   -ms-letter-spacing: normal;
@@ -155,7 +154,6 @@ exports[`Button Disabled Button 1`] = `
   text-align: center;
   font-style: normal;
   font-stretch: normal;
-  line-height: normal;
   -webkit-letter-spacing: normal;
   -moz-letter-spacing: normal;
   -ms-letter-spacing: normal;
@@ -279,7 +277,6 @@ exports[`Button Error Button 1`] = `
   text-align: center;
   font-style: normal;
   font-stretch: normal;
-  line-height: normal;
   -webkit-letter-spacing: normal;
   -moz-letter-spacing: normal;
   -ms-letter-spacing: normal;
@@ -411,7 +408,6 @@ exports[`Button Loading Button 1`] = `
   text-align: center;
   font-style: normal;
   font-stretch: normal;
-  line-height: normal;
   -webkit-letter-spacing: normal;
   -moz-letter-spacing: normal;
   -ms-letter-spacing: normal;
@@ -537,7 +533,6 @@ exports[`Button Secondary Button 1`] = `
   text-align: center;
   font-style: normal;
   font-stretch: normal;
-  line-height: normal;
   -webkit-letter-spacing: normal;
   -moz-letter-spacing: normal;
   -ms-letter-spacing: normal;

packages/ui-toolkit/src/button/group.js

@@ -6,6 +6,7 @@ export default styled.span`
   & [data-ui-button='true']:not(:first-child) {
     border-top-left-radius: 0;
     border-bottom-left-radius: 0;
+    border-left: none;
   }
 
   & [data-ui-button='true']:not(:last-child) {

packages/ui-toolkit/src/button/index.js

@@ -87,7 +87,6 @@ const Button = styled(BaseButton)`
   text-align: center;
   font-style: normal;
   font-stretch: normal;
-  line-height: normal;
   letter-spacing: normal;
   text-decoration: none;
 

packages/ui-toolkit/src/footer/sticky-footer.js

@@ -19,7 +19,8 @@ const Footer = styled.div`
   flex-wrap: nowrap;
   align-content: stretch;
   align-items: stretch;
-  background-color: rgba(241, 241, 241, 1);
+  background-color: ${props =>
+    props.fill ? props => props.fill : 'rgba(241, 241, 241, 1)'};
   border-top: ${remcalc(1)} solid ${props => props.theme.grey};
   max-height: ${remcalc(53)};
   min-height: ${remcalc(53)};

packages/ui-toolkit/src/form/copiable-field.js

@@ -8,7 +8,7 @@ import { Margin } from 'styled-components-spacing';
 import { FormLabel, Input } from '..';
 
 import {
-  default as Tooltip,
+  default as BaseTooltip,
   Container as TooltipContainer,
   Target as TooltipTarget
 } from '../tooltip';
@@ -29,6 +29,10 @@ const InputIconWrapper = styled.div`
   }
 `;
 
+const Tooltip = styled(BaseTooltip)`
+  top: ${remcalc(-6)} !important;
+`;
+
 const ClipboardIconActionable = styled(Clipboard)`
   cursor: pointer;
 `;

packages/ui-toolkit/src/key-value/index.js

@@ -27,6 +27,10 @@ import { H4 } from '../text/headings';
 import Button from '../button';
 import Divider from '../divider';
 
+const Form = styled.form`
+  margin-bottom: 0;
+`;
+
 const CollapsedKeyValue = styled.div`
   word-break: break-all;
   line-height: 1.5;
@@ -70,6 +74,7 @@ const Bold = styled.span`
 `;
 
 const TextareaKeyValue = ({
+  id = null,
   type,
   submitting,
   onlyName,
@@ -80,7 +85,12 @@ const TextareaKeyValue = ({
     {!onlyValue ? (
       <Row>
         <Col xs={12}>
-          <FormGroup name="name" field={Field} fluid>
+          <FormGroup
+            id={id ? 'kv-input-key-' + id : null}
+            name="name"
+            field={Field}
+            fluid
+          >
             <FormLabel>{titleCase(type)} key</FormLabel>
             <Margin top={0.5}>
               <Input onBlur={null} type="text" disabled={submitting} />
@@ -98,7 +108,12 @@ const TextareaKeyValue = ({
     {!onlyName ? (
       <Row>
         <Col xs={12}>
-          <FormGroup name="value" field={Field} fluid>
+          <FormGroup
+            id={id ? 'kv-input-value-' + id : null}
+            name="value"
+            field={Field}
+            fluid
+          >
             <FormLabel>{titleCase(type)} value</FormLabel>
             <Margin top={0.5}>
               <Textarea
@@ -123,6 +138,7 @@ const TextareaKeyValue = ({
 );
 
 const InputKeyValue = ({
+  id = null,
   type,
   submitting,
   typeLabel,
@@ -132,7 +148,12 @@ const InputKeyValue = ({
   <Flex wrap justifyStart contentStretch>
     {!onlyValue ? (
       <FlexItem basis="auto">
-        <FormGroup name="name" field={Field} fluid>
+        <FormGroup
+          id={id ? 'kv-input-name-' + id : null}
+          name="name"
+          field={Field}
+          fluid
+        >
           <FormLabel>
             {titleCase(type)} {typeLabel}
           </FormLabel>
@@ -150,7 +171,12 @@ const InputKeyValue = ({
     {!onlyName ? (
       <Fragment>
         <FlexItem basis="auto">
-          <FormGroup name="value" field={Field} fluid>
+          <FormGroup
+            id={id ? 'kv-input-value-' + id : null}
+            name="value"
+            field={Field}
+            fluid
+          >
             <FormLabel>{titleCase(type)} value</FormLabel>
             <Margin top={0.5}>
               <Input onBlur={null} type="text" disabled={submitting} />
@@ -168,6 +194,7 @@ const InputKeyValue = ({
 );
 
 export const KeyValue = ({
+  id = null,
   disabled = false,
   input = 'input',
   type = 'metadata',
@@ -262,6 +289,7 @@ export const KeyValue = ({
             ) : null}
             {input === 'input' ? (
               <InputKeyValue
+                id={id}
                 onBlur={null}
                 type={type}
                 typeLabel={typeLabel}
@@ -272,6 +300,7 @@ export const KeyValue = ({
             ) : null}
             {input === 'textarea' ? (
               <TextareaKeyValue
+                id={id}
                 type={type}
                 submitting={disabled || submitting}
                 onlyName={onlyName}
@@ -286,6 +315,7 @@ export const KeyValue = ({
               <Row between="xs" middle="xs">
                 <Col xs={method === 'add' ? 12 : 7}>
                   <MarginalButton
+                    id={id ? 'kv-cancel-button-' + id : null}
                     type="button"
                     onClick={onCancel}
                     disabled={disabled || submitting}
@@ -294,6 +324,7 @@ export const KeyValue = ({
                     <span>Cancel</span>
                   </MarginalButton>
                   <Button
+                    id={id ? 'kv-submit-button-' + id : null}
                     type="submit"
                     disabled={pristine || invalid}
                     loading={submitting && !removing}
@@ -312,6 +343,7 @@ export const KeyValue = ({
                       right
                       icon
                       error
+                      id={id ? 'kv-remove-button-' + id : null}
                     >
                       <Margin right={2}>
                         <DeleteIcon
@@ -319,7 +351,7 @@ export const KeyValue = ({
                           fill={disabled || submitting ? undefined : theme.red}
                         />
                       </Margin>
-                      <span>Remove</span>
+                      <span>Delete</span>
                     </Button>
                   </Col>
                 )}
@@ -348,7 +380,7 @@ KeyValue.propTypes = {
 };
 
 export default withTheme(({ handleSubmit, ...rest }) => (
-  <form onSubmit={handleSubmit}>
+  <Form onSubmit={handleSubmit}>
     <KeyValue {...rest} />
-  </form>
+  </Form>
 ));

packages/ui-toolkit/src/popover/__tests__/__snapshots__/popover.spec.js.snap

@@ -36,6 +36,7 @@ Array [
 .c1 {
   display: block;
   text-align: left;
+  font-size: 1rem;
   cursor: pointer;
 }
 
@@ -110,7 +111,7 @@ Array [
 
 .c0[data-placement='top'] .b,
 .c0[data-placement='bottom'] .b {
-  left: calc(50% - 0.6875rem);
+  left: calc(50% - 0.375rem);
 }
 
 .c0[data-placement^='left'] .b {

packages/ui-toolkit/src/popover/item.js

@@ -2,12 +2,12 @@ import React, { Component } from 'react';
 import is, { isNot } from 'styled-is';
 import PropTypes from 'prop-types';
 import styled from 'styled-components';
+import remcalc from 'remcalc';
 
 const BaseItem = styled.span`
   display: block;
   text-align: left;
-
+  font-size: ${remcalc(16)} ${isNot('disabled')`
-  ${isNot('disabled')`
     cursor: pointer;
 
     &:hover {

packages/ui-toolkit/src/tags/item.js

@@ -11,12 +11,6 @@ const CloseIcon = styled(Close)`
   `};
 `;
 
-const Container = styled.div`
-  display: flex;
-  align-items: center;
-  flex-grow: 1;
-`;
-
 const Tag = styled.li`
   border: ${remcalc(1)} solid ${props => props.theme.grey};
   box-sizing: border-box;
@@ -59,19 +53,15 @@ export default withTheme(
     iconFill = null,
     ...rest
   }) => (
-    <Container>
+    <Tag fill={fill} active={active} {...rest}>
-      <Tag fill={fill} active={active} {...rest}>
+      {children}
-        {children}
+      {onRemoveClick ? (
-        {onRemoveClick ? (
+        <CloseIcon
-          <CloseIcon
+          fill={iconFill ? iconFill : active ? theme.primaryActive : theme.text}
-            fill={
+          disabled
-              iconFill ? iconFill : active ? theme.primaryActive : theme.text
+          onClick={onRemoveClick}
-            }
+        />
-            disabled
+      ) : null}
-            onClick={onRemoveClick}
+    </Tag>
-          />
-        ) : null}
-      </Tag>
-    </Container>
   )
 );

packages/ui-toolkit/src/tags/list.js

@@ -1,4 +1,5 @@
 import styled from 'styled-components';
+import remcalc from 'remcalc';
 
 export default styled.ul`
   margin: 0;

packages/ui-toolkit/src/tooltip/__tests__/__snapshots__/tooltip.spec.js.snap

@@ -79,7 +79,7 @@ Array [
 
 .c0[data-placement='top'] .b,
 .c0[data-placement='bottom'] .b {
-  left: calc(50% - 0.6875rem);
+  left: calc(50% - 0.375rem);
 }
 
 .c0[data-placement^='left'] .b {

packages/ui-toolkit/src/tooltip/style.js

@@ -73,7 +73,7 @@ export default ({ background, color, border, arrow }) => css`
   }
 
   &[data-placement='top'] .${arrow}, &[data-placement='bottom'] .${arrow} {
-    left: calc(50% - ${remcalc(11)});
+    left: calc(50% - ${remcalc(6)});
   }
 
   &[data-placement^='left'] .${arrow} {