fix(my-joy-beta): create instance improve firewall ui

fixes #1012

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

@@ -0,0 +1,25 @@
+import React from 'react';
+import styled from 'styled-components';
+import { Margin, Padding } from 'styled-components-spacing';
+import Flex from 'styled-flex-component';
+
+import { H3, Card } from 'joyent-ui-toolkit';
+
+import NoPackagesImage from '../../assets/no-packages.svg';
+
+const NoPackagesTitle = styled(H3)`
+  color: ${props => props.theme.greyDark};
+`;
+
+export default ({ children }) => (
+  <Card>
+    <Padding all={6}>
+      <Flex alignCenter justifyCenter column>
+        <Margin bottom={2}>
+          <img src={NoPackagesImage} alt="No packages were found" />
+        </Margin>
+        <NoPackagesTitle>{children}</NoPackagesTitle>
+      </Flex>
+    </Padding>
+  </Card>
+);

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

@@ -6,7 +6,6 @@ import { Margin, Padding } from 'styled-components-spacing';
 import Flex, { FlexItem } from 'styled-flex-component';
 import styled from 'styled-components';
 import remcalc from 'remcalc';
-import constantCase from 'constant-case';
 
 import {
   H3,
@@ -15,10 +14,15 @@ import {
   Divider,
   Row,
   Col,
-  TagList
+  TagList,
+  P
 } from 'joyent-ui-toolkit';
 
 import Tag from '@components/instances/tags';
+import Empty from './empty';
+
+const capitalizeFirstLetter = string =>
+  string.charAt(0).toUpperCase() + string.slice(1);
 
 const Box = styled.div`
   display: inline-block;
@@ -57,9 +61,11 @@ const Rule = ({ enabled, rule_obj }) => {
         <Row>
           <Col xs={3}>
             <Flex justifyStart alignCenter contentStretch>
-              <FlexItem>
-                <b>From: </b>
-              </FlexItem>
+              <Margin right={0.5}>
+                <FlexItem>
+                  <b>From: </b>
+                </FlexItem>
+              </Margin>
               <FlexItem grow={1}>
                 <TagList>{froms}</TagList>
               </FlexItem>
@@ -67,9 +73,11 @@ const Rule = ({ enabled, rule_obj }) => {
           </Col>
           <Col xs={3}>
             <Flex justifyStart alignCenter contentStretch>
-              <FlexItem>
-                <b>To: </b>
-              </FlexItem>
+              <Margin right={0.5}>
+                <FlexItem>
+                  <b>To: </b>
+                </FlexItem>
+              </Margin>
               <FlexItem grow={1}>
                 <TagList>{tos}</TagList>
               </FlexItem>
@@ -77,26 +85,32 @@ const Rule = ({ enabled, rule_obj }) => {
           </Col>
           <Col xs={2}>
             <Flex justifyStart alignCenter contentStretch>
-              <FlexItem>
-                <b>Protocol: </b>
-              </FlexItem>
+              <Margin right={0.5}>
+                <FlexItem>
+                  <b>Protocol: </b>
+                </FlexItem>
+              </Margin>
               <FlexItem grow={1}>{protocol.name}</FlexItem>
             </Flex>
           </Col>
           <Col xs={2}>
             <Flex justifyStart alignCenter contentStretch>
-              <FlexItem>
-                <b>Ports: </b>
-              </FlexItem>
+              <Margin right={0.5}>
+                <FlexItem>
+                  <b>Ports: </b>
+                </FlexItem>
+              </Margin>
               <FlexItem grow={1}>{protocol.targets.join(';')}</FlexItem>
             </Flex>
           </Col>
           <Col xs={2}>
             <Flex justifyStart alignCenter contentStretch>
-              <FlexItem>
-                <b>Action: </b>
-              </FlexItem>
-              <FlexItem grow={1}>{constantCase(action)}</FlexItem>
+              <Margin right={0.5}>
+                <FlexItem>
+                  <b>Action: </b>
+                </FlexItem>
+              </Margin>
+              <FlexItem grow={1}>{capitalizeFirstLetter(action)}</FlexItem>
             </Flex>
           </Col>
         </Row>
@@ -134,6 +148,11 @@ export default ({
         </Margin>
       </Fragment>
     ) : null}
+    {enabled && !defaultRules.length ? (
+      <Margin bottom={4}>
+        <Empty>Sorry, but we weren’t able to find any firewalls.</Empty>
+      </Margin>
+    ) : null}
     {enabled && tagRules.length && defaultRules.length ? (
       <Divider height={remcalc(18)} transparent />
     ) : null}
@@ -152,5 +171,21 @@ export default ({
     {enabled && (tagRules.length || defaultRules.length) ? (
       <Divider height={remcalc(12)} transparent />
     ) : null}
+    {enabled ? (
+      <Margin bottom={4}>
+        <P>
+          *Other firewall rules may apply as defined by wildcard(s), IP(s),
+          subnet(s), tag(s) or VM(s). Please see{' '}
+          <a
+            href="https://apidocs.joyent.com/cloudapi/#firewall-rule-syntax"
+            target="_blank"
+            rel="noopener noreferrer"
+          >
+            firewall rule list
+          </a>{' '}
+          for more details.
+        </P>
+      </Margin>
+    ) : null}
   </form>
 );

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

@@ -1,7 +1,7 @@
 import React, { Fragment } from 'react';
 import { Field } from 'redux-form';
 import styled from 'styled-components';
-import { Margin, Padding } from 'styled-components-spacing';
+import { Margin } from 'styled-components-spacing';
 import remcalc from 'remcalc';
 import Flex from 'styled-flex-component';
 import bytes from 'bytes';
@@ -9,7 +9,6 @@ import bytes from 'bytes';
 import {
   H3,
   H4,
-  Card,
   FormGroup,
   Button,
   TableTh,
@@ -27,7 +26,7 @@ import {
   MemoryIcon
 } from 'joyent-ui-toolkit';
 
-import NoPackagesImage from '../../assets/no-packages.svg';
+import Empty from './empty';
 
 const GroupIcons = {
   MEMORY: <MemoryIcon fill="#32ABCF" />,
@@ -62,10 +61,6 @@ const SuperScript = styled.div`
   margin-left: ${remcalc(6)};
 `;
 
-const NoPackagesTitle = styled(H3)`
-  color: ${props => props.theme.greyDark};
-`;
-
 export const Filters = ({ resetFilters }) => (
   <Margin top={4} bottom={3}>
     <H4>Filters</H4>
@@ -132,21 +127,6 @@ export const Filters = ({ resetFilters }) => (
   </Margin>
 );
 
-export const NoPackages = () => (
-  <Card>
-    <Padding all={6}>
-      <Flex alignCenter justifyCenter column>
-        <Margin bottom={2}>
-          <img src={NoPackagesImage} alt="No packages were found" />
-        </Margin>
-        <NoPackagesTitle>
-          Sorry, but we weren’t able to find any packages with that filter
-        </NoPackagesTitle>
-      </Flex>
-    </Padding>
-  </Card>
-);
-
 export const Package = ({
   selected = false,
   id,
@@ -265,7 +245,11 @@ export const Packages = ({
       </TableThead>
       <TableTbody>{children}</TableTbody>
     </Table>
-    {!packages ? <NoPackages /> : null}
+    {!packages ? (
+      <Empty>
+        Sorry, but we weren’t able to find any packages with that filter
+      </Empty>
+    ) : null}
     <Margin top={4}>
       <Button type="submit" disabled={pristine}>
         Next

packages/my-joy-beta/src/containers/create-instance/firewall.js

@@ -59,8 +59,7 @@ const Firewall = ({
                 tagRules={tagRules}
                 enabled={enabled}
               />
-            ) : null
-          }
+            ) : null}
         </ReduxForm>
       ) : null}
       {proceeded && !expanded ? (