feat(instances): QA bug fixing. closes #1416

2018-05-18 17:16:00 +01:00
20 changed files with 3090 additions and 2245 deletions
--- a/consoles/my-joy-instances/src/components/tests/snapshots/menu.spec.js.snap
+++ b/consoles/my-joy-instances/src/components/tests/snapshots/menu.spec.js.snap
@ -28,6 +28,10 @@ exports[`renders <Menu links /> without throwing 1`] = `
  text-decoration: none;
 }

+.c6 a:hover {
+  color: rgb(45,56,132);
+}
+
 .c1 {
  margin-right: auto;
  margin-left: auto;
--- a/consoles/my-joy-instances/src/components/instances/tests/snapshots/list.spec.js.snap
+++ b/consoles/my-joy-instances/src/components/instances/tests/snapshots/list.spec.js.snap
@ -61,6 +61,10 @@ exports[`renders <InstanceList /> without throwing 1`] = `
  text-decoration: none;
 }

+.c19 a:hover {
+  color: rgb(45,56,132);
+}
+
 .c7 {
  font-family: "Libre Franklin",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,Helvetica,sans-serif;
  display: none;
@ -779,6 +783,10 @@ exports[`renders <InstanceList allSelected /> without throwing 1`] = `
  text-decoration: none;
 }

+.c19 a:hover {
+  color: rgb(45,56,132);
+}
+
 .c7 {
  font-family: "Libre Franklin",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,Helvetica,sans-serif;
  display: none;
@ -1497,6 +1505,10 @@ exports[`renders <InstanceList sortBy /> without throwing 1`] = `
  text-decoration: none;
 }

+.c19 a:hover {
+  color: rgb(45,56,132);
+}
+
 .c7 {
  font-family: "Libre Franklin",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,Helvetica,sans-serif;
  display: none;
@ -2215,6 +2227,10 @@ exports[`renders <InstanceList sortBy sortOrder /> without throwing 1`] = `
  text-decoration: none;
 }

+.c19 a:hover {
+  color: rgb(45,56,132);
+}
+
 .c7 {
  font-family: "Libre Franklin",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,Helvetica,sans-serif;
  display: none;
@ -2933,6 +2949,10 @@ exports[`renders <InstanceList submitting /> without throwing 1`] = `
  text-decoration: none;
 }

+.c19 a:hover {
+  color: rgb(45,56,132);
+}
+
 .c7 {
  font-family: "Libre Franklin",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,Helvetica,sans-serif;
  display: none;
@ -3651,6 +3671,10 @@ exports[`renders <InstanceList>{children}</InstanceList> without throwing 1`] =
  text-decoration: none;
 }

+.c19 a:hover {
+  color: rgb(45,56,132);
+}
+
 .c7 {
  font-family: "Libre Franklin",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,Helvetica,sans-serif;
  display: none;
@ -4363,6 +4387,10 @@ exports[`renders <Item /> without throwing 1`] = `
  text-decoration: none;
 }

+.c11 a:hover {
+  color: rgb(45,56,132);
+}
+
 .c12 {
  width: 0.75rem;
  height: 0.75rem;
@ -4891,6 +4919,10 @@ exports[`renders <Item {...item} /> without throwing 1`] = `
  text-decoration: none;
 }

+.c11 a:hover {
+  color: rgb(45,56,132);
+}
+
 .c12 {
  width: 0.75rem;
  height: 0.75rem;
@ -5421,6 +5453,10 @@ exports[`renders <Item allowedActions /> without throwing 1`] = `
  text-decoration: none;
 }

+.c11 a:hover {
+  color: rgb(45,56,132);
+}
+
 .c12 {
  width: 0.75rem;
  height: 0.75rem;
@ -5949,6 +5985,10 @@ exports[`renders <Item mutating /> without throwing 1`] = `
  text-decoration: none;
 }

+.c11 a:hover {
+  color: rgb(45,56,132);
+}
+
 .c13 {
  fill: rgb(59,70,204);
  stroke: rgb(59,70,204);
--- a/consoles/my-joy-instances/src/components/instances/tests/snapshots/summary.spec.js.snap
+++ b/consoles/my-joy-instances/src/components/instances/tests/snapshots/summary.spec.js.snap
@ -240,6 +240,10 @@ exports[`renders <Summary /> without throwing 1`] = `
  text-decoration: none;
 }

+.c36 a:hover {
+  color: rgb(45,56,132);
+}
+
 .c29 {
  min-width: 7.5rem;
 }
@ -2090,6 +2094,10 @@ exports[`renders <Summary instance /> without throwing 1`] = `
  text-decoration: none;
 }

+.c35 a:hover {
+  color: rgb(45,56,132);
+}
+
 .c29 {
  min-width: 7.5rem;
 }
@ -4017,6 +4025,10 @@ exports[`renders <Summary instance /> without throwing 2`] = `
  text-decoration: none;
 }

+.c35 a:hover {
+  color: rgb(45,56,132);
+}
+
 .c29 {
  min-width: 7.5rem;
 }
@ -5940,6 +5952,10 @@ exports[`renders <Summary starting stopping rebooting removing /> without throwi
  text-decoration: none;
 }

+.c39 a:hover {
+  color: rgb(45,56,132);
+}
+
 .c32 {
  fill: rgb(59,70,204);
  stroke: rgb(59,70,204);
@ -7859,6 +7875,10 @@ exports[`renders <Summary state /> without throwing 1`] = `
  text-decoration: none;
 }

+.c35 a:hover {
+  color: rgb(45,56,132);
+}
+
 .c29 {
  min-width: 7.5rem;
 }
@ -9548,6 +9568,10 @@ exports[`renders <Summary state /> without throwing 2`] = `
  text-decoration: none;
 }

+.c35 a:hover {
+  color: rgb(45,56,132);
+}
+
 .c29 {
  min-width: 7.5rem;
 }
@ -11237,6 +11261,10 @@ exports[`renders <Summary state /> without throwing 3`] = `
  text-decoration: none;
 }

+.c36 a:hover {
+  color: rgb(45,56,132);
+}
+
 .c29 {
  min-width: 7.5rem;
 }
--- a/consoles/my-joy-instances/src/components/instances/description.js
+++ b/consoles/my-joy-instances/src/components/instances/description.js
@ -2,6 +2,8 @@ import React from 'react';
 import { P as BaseP } from 'joyent-ui-toolkit';
 import { Row, Col } from 'joyent-react-styled-flexboxgrid';
 import styled from 'styled-components';
+import { Anchor } from 'joyent-ui-toolkit';
+import { Link } from 'react-router-dom';

 const P = styled(BaseP)`
  font-weight: 200;
@ -13,9 +15,11 @@ export default ({ href = '', children }) => (
      <P>
        {children}{' '}
        {href ? (
-          <a target="__blank" href={href} rel="noopener noreferrer">
+          <Anchor>
+            <Link target="__blank" to={href} rel="noopener noreferrer">
              Read the docs
-          </a>
+            </Link>
+          </Anchor>
        ) : null}
      </P>
    </Col>
--- a/consoles/my-joy-instances/src/containers/instances/tests/snapshots/cns.spec.js.snap
+++ b/consoles/my-joy-instances/src/containers/instances/tests/snapshots/cns.spec.js.snap
--- a/consoles/my-joy-instances/src/containers/instances/tests/snapshots/firewall.spec.js.snap
+++ b/consoles/my-joy-instances/src/containers/instances/tests/snapshots/firewall.spec.js.snap
--- a/consoles/my-joy-instances/src/containers/instances/tests/snapshots/list.spec.js.snap
+++ b/consoles/my-joy-instances/src/containers/instances/tests/snapshots/list.spec.js.snap
@ -2001,6 +2001,10 @@ exports[`renders <List instances /> without throwing 1`] = `
  text-decoration: none;
 }

+.c32 a:hover {
+  color: rgb(45,56,132);
+}
+
 .c13 {
  display: inline-block;
 }
@ -3540,6 +3544,10 @@ exports[`renders <List instances selected /> without throwing 1`] = `
  text-decoration: none;
 }

+.c32 a:hover {
+  color: rgb(45,56,132);
+}
+
 .c56 {
  min-width: 7.5rem;
 }
@ -6112,6 +6120,10 @@ exports[`renders <List instances selected=all /> without throwing 1`] = `
  text-decoration: none;
 }

+.c32 a:hover {
+  color: rgb(45,56,132);
+}
+
 .c56 {
  min-width: 7.5rem;
 }
@ -8684,6 +8696,10 @@ exports[`renders <List instances selected=all allowedActions /> without throwing
  text-decoration: none;
 }

+.c32 a:hover {
+  color: rgb(45,56,132);
+}
+
 .c56 {
  min-width: 7.5rem;
 }
--- a/consoles/my-joy-instances/src/containers/instances/tests/snapshots/networks.spec.js.snap
+++ b/consoles/my-joy-instances/src/containers/instances/tests/snapshots/networks.spec.js.snap
--- a/consoles/my-joy-instances/src/containers/instances/tests/snapshots/summary.spec.js.snap
+++ b/consoles/my-joy-instances/src/containers/instances/tests/snapshots/summary.spec.js.snap
@ -919,6 +919,10 @@ exports[`renders <Summary starting stopping rebooting removing /> without throwi
  text-decoration: none;
 }

+.c37 a:hover {
+  color: rgb(45,56,132);
+}
+
 .c31 {
  min-width: 7.5rem;
 }
@ -2887,6 +2891,10 @@ exports[`renders <Summary starting stopping rebooting removing /> without throwi
  text-decoration: none;
 }

+.c37 a:hover {
+  color: rgb(45,56,132);
+}
+
 .c31 {
  min-width: 7.5rem;
 }
--- a/packages/instance-steps/src/firewall/index.js
+++ b/packages/instance-steps/src/firewall/index.js
@ -159,9 +159,7 @@ const Firewall = ({
 export default compose(
  connect(({ form, values }, ownProps) => ({
    ...ownProps,
-    enabled:
-      console.log(form, values) ||
-      get(form, `${IC_FW_F_ENABLED}.values.enabled`, false),
+    enabled: 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, [])
  })),
--- a/packages/instance-steps/src/package/components.js
+++ b/packages/instance-steps/src/package/components.js
@ -34,7 +34,7 @@ import { EmptyState } from 'joyent-icons';

 const GroupIcons = {
  MEMORY: <MemoryIcon fill="#32ABCF" />,
-  STORAGE: <StorageIcon fill="#A88A83" />,
+  STORAGE: <StorageIcon fill="#DADADA" />,
  GENERAL: <GeneralIcon fill="#E08A0E" />,
  COMPUTE: <CpuIcon fill="#8043DC" />
 };
@ -106,7 +106,7 @@ export const Filters = ({ onResetFilters }) => (
        <Checkbox>
          <FormLabel noMargin actionable>
            <Flex alignCenter>
-              <Margin left={1}>{GroupIcons.GENERAL}</Margin>
+              <Margin left={1}>{GroupIcons.STORAGE}</Margin>
              <Margin left={1} right={3}>
                Storage Optimized
              </Margin>
--- a/packages/instance-steps/src/user-script/components.js
+++ b/packages/instance-steps/src/user-script/components.js
@ -9,7 +9,12 @@ class EditorField extends PureComponent {
  render() {
    return (
      <Fragment>
-        <Editor {...this.props} onBlur={null} mode="sh" />
+        <Editor
+          value="&#13;&#13;&#13;&#13;"
+          {...this.props}
+          onBlur={null}
+          mode="sh"
+        />
      </Fragment>
    );
  }
--- a/packages/resource-step/src/index.js
+++ b/packages/resource-step/src/index.js
@ -1,6 +1,6 @@
 import React, { Fragment, PureComponent } from 'react';
 import { Broadcast, Subscriber } from 'joy-react-broadcast';
-import { Link as BaseLink } from 'react-router-dom';
+import { Link } from 'react-router-dom';
 import Flex, { FlexItem } from 'styled-flex-component';
 import { Margin, Padding } from 'styled-components-spacing';
 import { Row, Col } from 'joyent-react-styled-flexboxgrid';
@ -14,7 +14,8 @@ import {
  Divider,
  H3,
  P,
-  ArrowIcon
+  ArrowIcon,
+  Anchor
 } from 'joyent-ui-toolkit';

 import { Saved as SavedIcon, Error as ErrorIcon } from './status-icon';
@ -29,14 +30,6 @@ const Card = styled(BaseCard)`
  `};
 }`;

-const Link = styled(BaseLink)`
-  color: ${props => props.theme.primary};
-
-  :active {
-    color: #436275;
-  }
-`;
-
 export const Header = ({ icon = null, children }) => (
  <Subscriber channel="create-resource-group">
    {({ namespace }) => (
@ -68,7 +61,10 @@ export const Header = ({ icon = null, children }) => (
                </Flex>
              </FlexItem>
              <FlexItem alignCenter>
-                <Link to={expanded ? `/${namespace}` : `/${namespace}/${name}`}>
+                <Anchor>
+                  <Link
+                    to={expanded ? `/${namespace}` : `/${namespace}/${name}`}
+                  >
                    <Flex alignCenter>
                      {expanded ? 'Save and Collase' : 'Edit'}
                      <Margin left="1">
@ -81,6 +77,7 @@ export const Header = ({ icon = null, children }) => (
                      </Margin>
                    </Flex>
                  </Link>
+                </Anchor>
              </FlexItem>
              {!expanded && !isValid ? (
                <FlexItem>
@ -107,7 +104,14 @@ export const Description = ({ href = '', children }) => (
        <Row>
          <Col xs={12} sm={8}>
            <P>
-              {children} {href ? <Link to={href}>Read the docs</Link> : null}
+              {children}{' '}
+              {href ? (
+                <Anchor>
+                  <Link to={href} target={'_blank'}>
+                    Read the docs
+                  </Link>
+                </Anchor>
+              ) : null}
            </P>
          </Col>
        </Row>
--- a/packages/resource-step/src/status-icon.js
+++ b/packages/resource-step/src/status-icon.js
@ -60,7 +60,6 @@ export const Saved = ({ inverted, children }) => {
 export const Error = ({ inverted = false, noLabel = false, children }) => {
  const fill = inverted ? 'red' : 'white';
  const iconFill = inverted ? 'white' : 'redDark';
-  console.log(inverted, fill, iconFill);

  return (
    <StatusIcon
--- a/packages/resource-widgets/src/tests/snapshots/cns.spec.js.snap
+++ b/packages/resource-widgets/src/tests/snapshots/cns.spec.js.snap
@ -909,7 +909,7 @@ exports[`renders <Hostname values /> without throwing 1`] = `
  border-radius: 0.25rem;
  background-color: rgb(255,255,255);
  border: 0.0625rem solid rgb(216,216,216);
-  color: rgb(250,250,250);
+  color: rgb(73,73,73);
  font-size: 0.9375rem;
  line-height: normal !important;
  font-style: normal;
@ -918,9 +918,6 @@ exports[`renders <Hostname values /> without throwing 1`] = `
  -moz-appearance: none;
  appearance: none;
  outline: 0;
-  background-color: rgb(250,250,250);
-  color: rgb(216,216,216);
-  cursor: not-allowed;
  font-family: "Roboto Mono",monospace;
  width: 100%;
  min-width: 100%;
@ -947,18 +944,6 @@ exports[`renders <Hostname values /> without throwing 1`] = `
  box-shadow: none;
 }

-.c9::-webkit-input-placeholder {
-  color: rgb(216,216,216);
-}
-
-.c9::-moz-placeholder {
-  color: rgb(216,216,216);
-}
-
-.c9:-ms-input-placeholder {
-  color: rgb(216,216,216);
-}
-
 .c9:disabled {
  background-color: rgb(250,250,250);
  color: rgb(216,216,216);
@ -1052,7 +1037,7 @@ exports[`renders <Hostname values /> without throwing 1`] = `
  >
    <input
      className="c9"
-      disabled={true}
+      disabled={false}
      id=""
      onBlur={null}
      value="111"
@ -1063,7 +1048,7 @@ exports[`renders <Hostname values /> without throwing 1`] = `
  >
    <input
      className="c9"
-      disabled={true}
+      disabled={false}
      id=""
      onBlur={null}
      value="111"
--- a/packages/resource-widgets/src/cns/index.js
+++ b/packages/resource-widgets/src/cns/index.js
@ -170,9 +170,9 @@ export const Hostname = ({
          }
        >
          {copy ? (
-            <CopiableField disabled md={12} text={value} />
+            <CopiableField md={12} text={value} />
          ) : (
-            <Input onBlur={null} disabled monospace fluid value={value} />
+            <Input onBlur={null} monospace fluid value={value} />
          )}
        </Margin>
      ))}
--- a/packages/ui-toolkit/src/anchor/tests_/snapshots/anchor.spec.js.snap
+++ b/packages/ui-toolkit/src/anchor/tests_/snapshots/anchor.spec.js.snap
@ -21,6 +21,10 @@ exports[`Anchor Default Anchor 1`] = `
  text-decoration: none;
 }

+.c0 a:hover {
+  color: rgb(45,56,132);
+}
+
 <a
  className="c0 c1 c2"
  href="https://joyent.com"
@ -53,6 +57,10 @@ exports[`Anchor Disabled Anchor 1`] = `
  text-decoration: none;
 }

+.c0 a:hover {
+  color: rgb(45,56,132);
+}
+
 .c0:hover {
  -webkit-text-decoration: underline;
  text-decoration: underline;
@ -90,6 +98,10 @@ exports[`Anchor Reversed Anchor 1`] = `
  text-decoration: none;
 }

+.c0 a:hover {
+  color: rgb(45,56,132);
+}
+
 <a
  className="c0 c1 c2"
  href="https://joyent.com"
--- a/packages/ui-toolkit/src/anchor/index.js
+++ b/packages/ui-toolkit/src/anchor/index.js
@ -11,6 +11,7 @@ const A = styled(BaseA)`
 const BaseLink = styled(({ component, children, ...rest }) =>
  React.createElement(component, rest, children)
 )`
+  ${props => console.log(props.theme)}
  color: ${props => props.theme.primary};
  -webkit-text-fill-color: currentcolor;

@ -18,6 +19,10 @@ const BaseLink = styled(({ component, children, ...rest }) =>
    text-decoration: none;
  }

+  a:hover{
+    color: ${props => props.theme.primaryActive};
+  }
+
  ${isOr('secondary', 'reversed')`
    color: ${props => props.theme.white};
    -webkit-text-fill-color: currentcolor;
--- a/packages/ui-toolkit/src/base/global.js
+++ b/packages/ui-toolkit/src/base/global.js
@ -44,11 +44,18 @@ export default ({ theme }) => css`
  }

  .CodeMirror {
+    height: 130px;
    border: solid ${remcalc(1)} ${theme.grey};
    margin: ${remcalc(8)} 0 ${remcalc(8)} 0;
    font-family: "Roboto Mono", monospace !important;
  }
  
+  .CodeMirror.cm-s-eclipse.CodeMirror-wrap,
+  .CodeMirror-gutter,
+  .CodeMirror-scroll {
+    height: auto !important;
+  }
+  
  [name=user-script] .CodeMirror {
    margin: 0;
  }
--- a/packages/ui-toolkit/src/button/tests_/snapshots/button.spec.js.snap
+++ b/packages/ui-toolkit/src/button/tests_/snapshots/button.spec.js.snap
@ -21,6 +21,10 @@ exports[`Button Default Button 1`] = `
  text-decoration: none;
 }

+.c2 a:hover {
+  color: rgb(45,56,132);
+}
+
 .c1 {
  display: inline-block;
 }
@ -124,6 +128,10 @@ exports[`Button Disabled Button 1`] = `
  text-decoration: none;
 }

+.c2 a:hover {
+  color: rgb(45,56,132);
+}
+
 .c2:hover {
  -webkit-text-decoration: underline;
  text-decoration: underline;
@ -252,6 +260,10 @@ exports[`Button Error Button 1`] = `
  text-decoration: none;
 }

+.c2 a:hover {
+  color: rgb(45,56,132);
+}
+
 .c1 {
  display: inline-block;
 }
@ -378,6 +390,10 @@ exports[`Button Loading Button 1`] = `
  text-decoration: none;
 }

+.c2 a:hover {
+  color: rgb(45,56,132);
+}
+
 .c2:hover {
  -webkit-text-decoration: underline;
  text-decoration: underline;
@ -508,6 +524,10 @@ exports[`Button Secondary Button 1`] = `
  text-decoration: none;
 }

+.c2 a:hover {
+  color: rgb(45,56,132);
+}
+
 .c1 {
  display: inline-block;
 }