From 84b2d67d2cf0be6e0fd09a652a569ae87aa23492 Mon Sep 17 00:00:00 2001
From: johnytiago <joaosao10@gmail.com>
Date: Thu, 10 May 2018 17:44:18 +0100
Subject: [PATCH] feat(instances): Adds Counts, Updates Firewall

---
 packages/instance-steps/src/firewall/index.js | 18 ++--
 .../instance-steps/src/metadata/components.js | 92 +++++++++++--------
 packages/instance-steps/src/metadata/index.js | 28 +++---
 packages/instance-steps/src/tags/index.js     | 17 +++-
 .../src/user-script/components.js             |  8 +-
 .../resource-widgets/src/firewall/index.js    | 61 +++++-------
 packages/ui-toolkit/src/form/checkbox.js      | 18 ++++
 7 files changed, 139 insertions(+), 103 deletions(-)

diff --git a/packages/instance-steps/src/firewall/index.js b/packages/instance-steps/src/firewall/index.js
index 1630c87e..302593cb 100644
--- a/packages/instance-steps/src/firewall/index.js
+++ b/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
-                        {...props}
-                        submitting={loading}
-                        left
-                      />
+                      <ToggleFirewallForm {...props} submitting={loading} />
                     </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}
diff --git a/packages/instance-steps/src/metadata/components.js b/packages/instance-steps/src/metadata/components.js
index c2c695c2..76486c5c 100644
--- a/packages/instance-steps/src/metadata/components.js
+++ b/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,42 +25,48 @@ export default ({
   handleCancelEdit,
   addOpen,
   disabled
-}) =>
-  metadata.map(({ name, value, open }, index) => (
-    <ReduxForm
-      form={IC_MD_F_EDIT(index)}
-      key={index}
-      initialValues={{ name, value }}
-      destroyOnUnmount={false}
-      forceUnregisterOnUnmount={true}
-      onSubmit={newValue => handleUpdateMetadata(index, newValue)}
-      shouldAsyncValidate={shouldAsyncValidate}
-      asyncValidate={handleAsyncValidate}
-    >
-      {props => (
-        <Fragment>
-          <KeyValue
-            {...props}
-            initialValues={{ name, value }}
-            expanded={open}
-            method="edit"
-            input="textarea"
-            type="metadata"
-            onToggleExpanded={
-              handleToggleExpanded && (() => handleToggleExpanded(index))
-            }
-            onCancel={handleCancelEdit && (() => handleCancelEdit(index))}
-            onRemove={
-              handleRemoveMetadata && (() => handleRemoveMetadata(index))
-            }
-            editor={Editor}
-            disabled={disabled}
-            shadow={false}
-          />
-          {addOpen || index !== metadata.length - 1 ? (
-            <Margin bottom={2} />
-          ) : null}
-        </Fragment>
-      )}
-    </ReduxForm>
-  ));
+}) => (
+  <Fragment>
+    <Margin bottom={5}>
+      <Overview total={metadata.length} />
+    </Margin>
+    {metadata.map(({ name, value, open }, index) => (
+      <ReduxForm
+        form={IC_MD_F_EDIT(index)}
+        key={index}
+        initialValues={{ name, value }}
+        destroyOnUnmount={false}
+        forceUnregisterOnUnmount={true}
+        onSubmit={newValue => handleUpdateMetadata(index, newValue)}
+        shouldAsyncValidate={shouldAsyncValidate}
+        asyncValidate={handleAsyncValidate}
+      >
+        {props => (
+          <Fragment>
+            <KeyValue
+              {...props}
+              initialValues={{ name, value }}
+              expanded={open}
+              method="edit"
+              input="textarea"
+              type="metadata"
+              onToggleExpanded={
+                handleToggleExpanded && (() => handleToggleExpanded(index))
+              }
+              onCancel={handleCancelEdit && (() => handleCancelEdit(index))}
+              onRemove={
+                handleRemoveMetadata && (() => handleRemoveMetadata(index))
+              }
+              editor={Editor}
+              disabled={disabled}
+              shadow={false}
+            />
+            {addOpen || index !== metadata.length - 1 ? (
+              <Margin bottom={2} />
+            ) : null}
+          </Fragment>
+        )}
+      </ReduxForm>
+    ))}
+  </Fragment>
+);
diff --git a/packages/instance-steps/src/metadata/index.js b/packages/instance-steps/src/metadata/index.js
index 22786a39..a870944b 100644
--- a/packages/instance-steps/src/metadata/index.js
+++ b/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,18 +58,20 @@ const Metadata = ({
       {({ next }) => (
         <Margin top="5">
           {metadata.length ? (
-            <Preview
-              metadata={metadata}
-              handleCancelEdit={handleCancelEdit}
-              handleRemoveMetadata={handleRemoveMetadata}
-              handleToggleExpanded={handleToggleExpanded}
-              handleUpdateMetadata={handleUpdateMetadata}
-              handleAddMetadata={handleAddMetadata}
-              shouldAsyncValidate={shouldAsyncValidate}
-              handleAsyncValidate={handleAsyncValidate}
-              handleChangeAddOpen={handleChangeAddOpen}
-              addOpen={addOpen}
-            />
+            <Fragment>
+              <Preview
+                metadata={metadata}
+                handleCancelEdit={handleCancelEdit}
+                handleRemoveMetadata={handleRemoveMetadata}
+                handleToggleExpanded={handleToggleExpanded}
+                handleUpdateMetadata={handleUpdateMetadata}
+                handleAddMetadata={handleAddMetadata}
+                shouldAsyncValidate={shouldAsyncValidate}
+                handleAsyncValidate={handleAsyncValidate}
+                handleChangeAddOpen={handleChangeAddOpen}
+                addOpen={addOpen}
+              />
+            </Fragment>
           ) : null}
           <ReduxForm
             form={IC_MD_F_ADD}
diff --git a/packages/instance-steps/src/tags/index.js b/packages/instance-steps/src/tags/index.js
index 5c6fa458..db4527c8 100644
--- a/packages/instance-steps/src/tags/index.js
+++ b/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
-              name={name}
-              value={value}
-              onRemoveClick={() => handleRemoveTag(index)}
-            />
+            <Tag name={name} value={value} />
           ))}
         </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
diff --git a/packages/instance-steps/src/user-script/components.js b/packages/instance-steps/src/user-script/components.js
index 46baec4d..c4536c79 100644
--- a/packages/instance-steps/src/user-script/components.js
+++ b/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>
+    );
   }
 }
 
diff --git a/packages/resource-widgets/src/firewall/index.js b/packages/resource-widgets/src/firewall/index.js
index 5228b78c..fc573d8f 100644
--- a/packages/resource-widgets/src/firewall/index.js
+++ b/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}>
-      <FormGroup name="enabled" type="checkbox" field={Field}>
-        <Flex alignCenter>
-          {left ? (
-            <Fragment>
-              <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>
-          )}
-        </Flex>
+    <Form onChange={onChange}>
+      <FormGroup type="checkbox" name="enabled" field={Field}>
+        <Checkbox disabled={submitting}>
+          <FormLabel noMargin actionable>
+            <Margin left={2} right={2}>
+              Enable Firewall
+            </Margin>
+          </FormLabel>
+        </Checkbox>
       </FormGroup>
-    </form>
+    </Form>
   );
 };
 
 export const ToggleInactiveForm = () => (
-  <form>
-    <FormGroup name="inactive" type="checkbox" field={Field}>
-      <Flex alignCenter>
-        <Fragment>
-          <Margin right={2}>
-            <Toggle />
-          </Margin>
-          <FormLabel big marginless>
+  <Form>
+    <FormGroup type="checkbox" name="inactive" field={Field}>
+      <Checkbox>
+        <FormLabel noMargin actionable>
+          <Margin left={2} right={2}>
             Show inactive rules
-          </FormLabel>
-        </Fragment>
-      </Flex>
+          </Margin>
+        </FormLabel>
+      </Checkbox>
     </FormGroup>
-  </form>
+  </Form>
 );
diff --git a/packages/ui-toolkit/src/form/checkbox.js b/packages/ui-toolkit/src/form/checkbox.js
index 44197f5e..22cc5391 100644
--- a/packages/ui-toolkit/src/form/checkbox.js
+++ b/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`