feat(instances): Adds Counts, Updates Firewall

2018-05-10 17:44:18 +01:00 · 2018-05-10 17:44:18 +01:00 · 84b2d67d2c
parent 062ff0ba67
commit 84b2d67d2c
7 changed files with 139 additions and 103 deletions
--- 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}
--- 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>
+);
--- 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}
--- 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
--- 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>
+    );
  }
 }

--- 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>
 );
--- 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`