feat(instances): Adds Counts, Updates Firewall

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

@@ -15,7 +15,7 @@ import Step, {
   Outlet as StepOutlet
 } from 'joyent-ui-resource-step';
 
-import { Button, P, FirewallIcon } from 'joyent-ui-toolkit';
+import { H3, Button, P, FirewallIcon } from 'joyent-ui-toolkit';
 
 import {
   TagRules,
@@ -67,11 +67,7 @@ const Firewall = ({
                 >
                   {props => (
                     <Margin right={5}>
-                      <ToggleFirewallForm
+                      <ToggleFirewallForm {...props} submitting={loading} />
-                        {...props}
-                        submitting={loading}
-                        left
-                      />
                     </Margin>
                   )}
                 </ReduxForm>
@@ -94,7 +90,15 @@ const Firewall = ({
           {enabled && !loading && !defaultRules.length && !tagRules.length ? (
             <Margin top={5}>
               <Empty borderTop>
-                Sorry, but we weren’t able to find any firewall rules.
+                <Fragment>
+                  <H3>No Firewall rules found</H3>
+                  <Margin top={1}>
+                    <P>
+                      Try viewing inactive rules instead to see firewalls that
+                      can potentially affect your instance
+                    </P>
+                  </Margin>
+                </Fragment>
               </Empty>
             </Margin>
           ) : null}

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

@@ -2,13 +2,19 @@ import React, { Fragment } from 'react';
 import { Margin } from 'styled-components-spacing';
 import ReduxForm from 'declarative-redux-form';
 
-import { KeyValue } from 'joyent-ui-toolkit';
+import { H3, KeyValue } from 'joyent-ui-toolkit';
 import Editor from 'joyent-ui-toolkit/dist/es/editor';
 
 import { Forms } from '../constants';
 
 const { IC_MD_F_EDIT } = Forms;
 
+export const Overview = ({ total = 0 }) => (
+  <H3>
+    {total} key-value pair{total === 1 ? '' : 's'}
+  </H3>
+);
+
 export default ({
   metadata = [],
   handleUpdateMetadata,
@@ -19,8 +25,12 @@ export default ({
   handleCancelEdit,
   addOpen,
   disabled
-}) =>
+}) => (
-  metadata.map(({ name, value, open }, index) => (
+  <Fragment>
+    <Margin bottom={5}>
+      <Overview total={metadata.length} />
+    </Margin>
+    {metadata.map(({ name, value, open }, index) => (
       <ReduxForm
         form={IC_MD_F_EDIT(index)}
         key={index}
@@ -57,4 +67,6 @@ export default ({
           </Fragment>
         )}
       </ReduxForm>
-  ));
+    ))}
+  </Fragment>
+);

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

@@ -19,7 +19,7 @@ import Step, {
 import { Button, KeyValue, MetadataIcon } from 'joyent-ui-toolkit';
 
 import { Forms, Values } from '../constants';
-import Preview from './components';
+import { default as Preview, Overview } from './components';
 import Editor from 'joyent-ui-toolkit/dist/es/editor';
 import { addMetadata as validateMetadata } from '../validators';
 
@@ -58,6 +58,7 @@ const Metadata = ({
       {({ next }) => (
         <Margin top="5">
           {metadata.length ? (
+            <Fragment>
               <Preview
                 metadata={metadata}
                 handleCancelEdit={handleCancelEdit}
@@ -70,6 +71,7 @@ const Metadata = ({
                 handleChangeAddOpen={handleChangeAddOpen}
                 addOpen={addOpen}
               />
+            </Fragment>
           ) : null}
           <ReduxForm
             form={IC_MD_F_ADD}

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

@@ -20,6 +20,7 @@ import Step, {
 } from 'joyent-ui-resource-step';
 
 import {
+  H3,
   Button,
   TagsIcon,
   TagList as BaseTagList,
@@ -37,6 +38,14 @@ const TagList = styled(BaseTagList)`
   margin-bottom: ${remcalc(-6)};
 `;
 
+const TagCount = ({ total = 0 }) => (
+  <Margin bottom={5}>
+    <H3>
+      {total} Tag{total === 1 ? '' : 's'}
+    </H3>
+  </Margin>
+);
+
 const Tag = ({ name, value, onRemoveClick }) => (
   <Margin right={1} bottom={1} key={`${name}-${value}`}>
     <TagItem iconFill="grey" onRemoveClick={onRemoveClick}>
@@ -67,13 +76,10 @@ const TagsContainer = ({
     </StepDescription>
     <StepPreview>
       <Margin top="3">
+        <TagCount total={preview.length} />
         <TagList>
           {preview.map(({ name, value }, index) => (
-            <Tag
+            <Tag name={name} value={value} />
-              name={name}
-              value={value}
-              onRemoveClick={() => handleRemoveTag(index)}
-            />
           ))}
         </TagList>
       </Margin>
@@ -83,6 +89,7 @@ const TagsContainer = ({
         <Fragment>
           {tags.length ? (
             <Margin top={5}>
+              <TagCount total={tags.length} />
               <TagList>
                 {tags.map(({ name, value }, index) => (
                   <Tag

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

@@ -2,12 +2,16 @@ import React, { PureComponent, Fragment } from 'react';
 import { Field } from 'redux-form';
 import { Margin } from 'styled-components-spacing';
 
-import { FormGroup, H3 } from 'joyent-ui-toolkit';
+import { FormGroup, H3, Button } from 'joyent-ui-toolkit';
 import Editor from 'joyent-ui-toolkit/dist/es/editor';
 
 class EditorField extends PureComponent {
   render() {
-    return <Editor {...this.props} onBlur={null} mode="sh" />;
+    return (
+      <Fragment>
+        <Editor {...this.props} onBlur={null} mode="sh" />
+      </Fragment>
+    );
   }
 }
 

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

@@ -4,6 +4,7 @@ import { Field } from 'redux-form';
 import { Margin, Padding } from 'styled-components-spacing';
 import Flex, { FlexItem } from 'styled-flex-component';
 import { Row, Col } from 'joyent-react-styled-flexboxgrid';
+import styled from 'styled-components';
 
 import {
   H3,
@@ -13,10 +14,15 @@ import {
   TagList,
   TagItem,
   P,
+  Checkbox,
   Strong,
   Card
 } from 'joyent-ui-toolkit';
 
+const Form = styled.form`
+  margin-bottom: 0 !important;
+`;
+
 const capitalizeFirstLetter = string =>
   string.charAt(0).toUpperCase() + string.slice(1);
 
@@ -170,47 +176,30 @@ export const ToggleFirewallForm = ({
     : undefined;
 
   return (
-    <form onChange={onChange}>
+    <Form onChange={onChange}>
-      <FormGroup name="enabled" type="checkbox" field={Field}>
+      <FormGroup type="checkbox" name="enabled" field={Field}>
-        <Flex alignCenter>
+        <Checkbox disabled={submitting}>
-          {left ? (
+          <FormLabel noMargin actionable>
-            <Fragment>
+            <Margin left={2} right={2}>
-              <Margin right={2}>
-                <Toggle disabled={submitting} />
-              </Margin>
-              <FormLabel big marginless>
               Enable Firewall
-              </FormLabel>
-            </Fragment>
-          ) : (
-            <Fragment>
-              <FormLabel big marginless>
-                Enable Firewall
-              </FormLabel>
-              <Margin left={2}>
-                <Toggle disabled={submitting} />
             </Margin>
-            </Fragment>
+          </FormLabel>
-          )}
+        </Checkbox>
-        </Flex>
       </FormGroup>
-    </form>
+    </Form>
   );
 };
 
 export const ToggleInactiveForm = () => (
-  <form>
+  <Form>
-    <FormGroup name="inactive" type="checkbox" field={Field}>
+    <FormGroup type="checkbox" name="inactive" field={Field}>
-      <Flex alignCenter>
+      <Checkbox>
-        <Fragment>
+        <FormLabel noMargin actionable>
-          <Margin right={2}>
+          <Margin left={2} right={2}>
-            <Toggle />
-          </Margin>
-          <FormLabel big marginless>
             Show inactive rules
+          </Margin>
         </FormLabel>
-        </Fragment>
+      </Checkbox>
-      </Flex>
     </FormGroup>
-  </form>
+  </Form>
 );

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

@@ -9,10 +9,28 @@ const Li = styled.li`
   list-style-type: none;
   display: flex;
   align-items: center;
+  display: flex;
+  align-items: center;
+  align-content: center;
+  height: 24px;
 
   label {
     font-weight: 400;
   }
+
+  label::after {
+    width: 0.475rem;
+    height: 0.205rem;
+    top: 0.4125rem;
+    left: 0.35rem;
+  }
+
+  div[type='checkbox'],
+  div[type='checkbox'] input,
+  div[type='checkbox'] label {
+    height: 24px;
+    width: 24px;
+  }
 `;
 
 const Ul = styled.ul`