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">
-            Read the docs
-          </a>
+          <Anchor>
+            <Link target="__blank" to={href} rel="noopener noreferrer">
+              Read the docs
+            </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
@ -5,14 +5,38 @@ exports[`renders <Networks /> without throwing 1`] = `
  margin-bottom: 1.125rem;
 }

-.c12 {
+.c15 {
  margin-bottom: 0.75rem;
 }

-.c10 {
+.c13 {
  padding: 8rem;
 }

+.c9 {
+  background-color: transparent;
+  -webkit-text-decoration-skip: objects;
+  text-decoration-skip: objects;
+}
+
+.c8 {
+  font-family: "Libre Franklin",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,Helvetica,sans-serif;
+}
+
+.c7 {
+  color: rgb(59,70,204);
+  -webkit-text-fill-color: currentcolor;
+}
+
+.c7:hover {
+  -webkit-text-decoration: none;
+  text-decoration: none;
+}
+
+.c7 a:hover {
+  color: rgb(45,56,132);
+}
+
 .c6 {
  color: rgb(73,73,73);
  margin: 0;
@ -61,7 +85,7 @@ exports[`renders <Networks /> without throwing 1`] = `
  padding-bottom: 1.125rem;
 }

-.c7 {
+.c10 {
  margin: 0;
  color: rgb(73,73,73);
  font-weight: normal;
@ -69,7 +93,7 @@ exports[`renders <Networks /> without throwing 1`] = `
  font-size: 1.3125rem;
 }

-.c11 {
+.c14 {
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
@ -100,7 +124,7 @@ exports[`renders <Networks /> without throwing 1`] = `
  align-items: center;
 }

-.c9 {
+.c12 {
  box-sizing: content-box;
  display: -webkit-box;
  display: -webkit-flex;
@ -122,12 +146,12 @@ exports[`renders <Networks /> without throwing 1`] = `
  border-color: rgb(216,216,216);
 }

-.c13 {
+.c16 {
  color: rgb(151,151,151);
  text-align: center;
 }

-.c8 {
+.c11 {
  width: calc(100% - 0.125rem);
  background: transparent;
 }
@ -197,11 +221,15 @@ exports[`renders <Networks /> without throwing 1`] = `
          Use predefined or customized fabric networks which can be public-facing or private. All fabrics are isolated from other customers giving you complete control over the network environment. Read more on fabrics.
           
          <a
-            href="https://docs.joyent.com/public-cloud/network/sdn"
-            rel="noopener noreferrer"
-            target="__blank"
+            className="c7 c8 c9"
          >
-            Read the docs
+            <a
+              rel="noopener noreferrer"
+              target="__blank"
+              to="https://docs.joyent.com/public-cloud/network/sdn"
+            >
+              Read the docs
+            </a>
          </a>
        </p>
      </div>
@ -211,24 +239,24 @@ exports[`renders <Networks /> without throwing 1`] = `
    className="c2"
  >
    <h3
-      className="c7"
+      className="c10"
    >
      Networks attached to this instance
    </h3>
  </div>
  <div
-    className="c8 c9"
+    className="c11 c12"
    disabled={false}
    name="card"
  >
    <div
-      className="c10"
+      className="c13"
    >
      <div
-        className="c11"
+        className="c14"
      >
        <div
-          className="c12"
+          className="c15"
        >
          <svg
            height={109}
@ -517,7 +545,7 @@ exports[`renders <Networks /> without throwing 1`] = `
          </svg>
        </div>
        <h3
-          className="c13 c7"
+          className="c16 c10"
        >
          You have no networks attached to this instance
        </h3>
@ -532,10 +560,34 @@ exports[`renders <Networks error /> without throwing 1`] = `
  margin-bottom: 1.125rem;
 }

-.c8 {
+.c11 {
  margin-bottom: 1.875rem;
 }

+.c9 {
+  background-color: transparent;
+  -webkit-text-decoration-skip: objects;
+  text-decoration-skip: objects;
+}
+
+.c8 {
+  font-family: "Libre Franklin",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,Helvetica,sans-serif;
+}
+
+.c7 {
+  color: rgb(59,70,204);
+  -webkit-text-fill-color: currentcolor;
+}
+
+.c7:hover {
+  -webkit-text-decoration: none;
+  text-decoration: none;
+}
+
+.c7 a:hover {
+  color: rgb(45,56,132);
+}
+
 .c6 {
  color: rgb(73,73,73);
  margin: 0;
@ -584,7 +636,7 @@ exports[`renders <Networks error /> without throwing 1`] = `
  padding-bottom: 1.125rem;
 }

-.c7 {
+.c10 {
  margin: 0;
  color: rgb(73,73,73);
  font-weight: normal;
@ -592,7 +644,7 @@ exports[`renders <Networks error /> without throwing 1`] = `
  font-size: 1.3125rem;
 }

-.c12 {
+.c15 {
  margin: 0;
  color: rgb(73,73,73);
  font-weight: 600;
@ -600,7 +652,7 @@ exports[`renders <Networks error /> without throwing 1`] = `
  font-size: 0.9375rem;
 }

-.c9 {
+.c12 {
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
@ -613,18 +665,18 @@ exports[`renders <Networks error /> without throwing 1`] = `
  width: 100%;
 }

-.c10 {
+.c13 {
  border-radius: 0.1875rem 0 0 0.1875rem;
  min-width: 0.75rem;
  background-color: rgb(0,152,88);
  background-color: rgb(210,67,58);
 }

-.c11 {
+.c14 {
  padding: 1.125rem 1.125rem;
 }

-.c13 {
+.c16 {
  line-height: 0.875rem;
  font-size: 0.8125rem;
 }
@ -694,11 +746,15 @@ exports[`renders <Networks error /> without throwing 1`] = `
          Use predefined or customized fabric networks which can be public-facing or private. All fabrics are isolated from other customers giving you complete control over the network environment. Read more on fabrics.
           
          <a
-            href="https://docs.joyent.com/public-cloud/network/sdn"
-            rel="noopener noreferrer"
-            target="__blank"
+            className="c7 c8 c9"
          >
-            Read the docs
+            <a
+              rel="noopener noreferrer"
+              target="__blank"
+              to="https://docs.joyent.com/public-cloud/network/sdn"
+            >
+              Read the docs
+            </a>
          </a>
        </p>
      </div>
@ -708,30 +764,30 @@ exports[`renders <Networks error /> without throwing 1`] = `
    className="c2"
  >
    <h3
-      className="c7"
+      className="c10"
    >
      Networks attached to this instance
    </h3>
  </div>
  <div
-    className="c8"
+    className="c11"
  >
    <div
-      className="c9"
+      className="c12"
    >
      <div
-        className="c10"
+        className="c13"
      />
      <div
-        className="c11"
+        className="c14"
      >
        <h4
-          className="c12"
+          className="c15"
        >
          Ooops!
        </h4>
        <p
-          className="c13 c6"
+          className="c16 c6"
        >
          An error occurred while loading your networks
        </p>
@ -747,18 +803,42 @@ exports[`renders <Networks loading /> without throwing 1`] = `
 }

 .c9 {
+  background-color: transparent;
+  -webkit-text-decoration-skip: objects;
+  text-decoration-skip: objects;
+}
+
+.c8 {
+  font-family: "Libre Franklin",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,Helvetica,sans-serif;
+}
+
+.c7 {
+  color: rgb(59,70,204);
+  -webkit-text-fill-color: currentcolor;
+}
+
+.c7:hover {
+  -webkit-text-decoration: none;
+  text-decoration: none;
+}
+
+.c7 a:hover {
+  color: rgb(45,56,132);
+}
+
+.c12 {
  fill: rgb(59,70,204);
  stroke: rgb(59,70,204);
  -webkit-animation: iCqDak 1.5s ease-out 0s infinite;
  animation: iCqDak 1.5s ease-out 0s infinite;
 }

-.c10 {
+.c13 {
  -webkit-animation-delay: 0.5s;
  animation-delay: 0.5s;
 }

-.c11 {
+.c14 {
  -webkit-animation-delay: 1s;
  animation-delay: 1s;
 }
@ -770,7 +850,7 @@ exports[`renders <Networks loading /> without throwing 1`] = `
  font-size: 0.9375rem;
 }

-.c8 {
+.c11 {
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
@ -798,7 +878,7 @@ exports[`renders <Networks loading /> without throwing 1`] = `
  flex: 1 0 auto;
 }

-.c12 {
+.c15 {
  -webkit-flex: 0 0 auto;
  -ms-flex: 0 0 auto;
  flex: 0 0 auto;
@ -849,7 +929,7 @@ exports[`renders <Networks loading /> without throwing 1`] = `
  padding-bottom: 1.125rem;
 }

-.c7 {
+.c10 {
  margin: 0;
  color: rgb(73,73,73);
  font-weight: normal;
@ -922,11 +1002,15 @@ exports[`renders <Networks loading /> without throwing 1`] = `
          Use predefined or customized fabric networks which can be public-facing or private. All fabrics are isolated from other customers giving you complete control over the network environment. Read more on fabrics.
           
          <a
-            href="https://docs.joyent.com/public-cloud/network/sdn"
-            rel="noopener noreferrer"
-            target="__blank"
+            className="c7 c8 c9"
          >
-            Read the docs
+            <a
+              rel="noopener noreferrer"
+              target="__blank"
+              to="https://docs.joyent.com/public-cloud/network/sdn"
+            >
+              Read the docs
+            </a>
          </a>
        </p>
      </div>
@ -936,34 +1020,34 @@ exports[`renders <Networks loading /> without throwing 1`] = `
    className="c2"
  >
    <h3
-      className="c7"
+      className="c10"
    >
      Networks attached to this instance
    </h3>
  </div>
  <div
-    className="c8"
+    className="c11"
  >
    <svg
      height="10"
      width="28"
    >
      <rect
-        className="c9"
+        className="c12"
        height="6"
        width="6"
        x="2"
        y="2"
      />
      <rect
-        className="c10 c9"
+        className="c13 c12"
        height="6"
        width="6"
        x="11"
        y="2"
      />
      <rect
-        className="c11 c9"
+        className="c14 c12"
        height="6"
        width="6"
        x="20"
@ -971,7 +1055,7 @@ exports[`renders <Networks loading /> without throwing 1`] = `
      />
    </svg>
    <p
-      className="c12 c6"
+      className="c15 c6"
    >
      Loading...
    </p>
@ -984,31 +1068,55 @@ exports[`renders <Networks networks /> without throwing 1`] = `
  margin-bottom: 1.125rem;
 }

-.c9 {
+.c12 {
  margin-bottom: 1.875rem;
 }

-.c19 {
+.c22 {
  margin-right: 1.875rem;
 }

-.c22 {
+.c25 {
  margin-right: 0.375rem;
 }

-.c23 {
+.c26 {
  margin-top: 1.125rem;
 }

-.c14 {
+.c17 {
  padding-right: 1.125rem;
  padding-left: 1.125rem;
 }

-.c17 {
+.c20 {
  padding: 1.875rem;
 }

+.c9 {
+  background-color: transparent;
+  -webkit-text-decoration-skip: objects;
+  text-decoration-skip: objects;
+}
+
+.c8 {
+  font-family: "Libre Franklin",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,Helvetica,sans-serif;
+}
+
+.c7 {
+  color: rgb(59,70,204);
+  -webkit-text-fill-color: currentcolor;
+}
+
+.c7:hover {
+  -webkit-text-decoration: none;
+  text-decoration: none;
+}
+
+.c7 a:hover {
+  color: rgb(45,56,132);
+}
+
 .c6 {
  color: rgb(73,73,73);
  margin: 0;
@ -1050,7 +1158,7 @@ exports[`renders <Networks networks /> without throwing 1`] = `
  display: block;
 }

-.c8 {
+.c11 {
  box-sizing: border-box;
  -webkit-flex: 0 0 auto;
  -ms-flex: 0 0 auto;
@ -1067,7 +1175,7 @@ exports[`renders <Networks networks /> without throwing 1`] = `
  padding-bottom: 1.125rem;
 }

-.c7 {
+.c10 {
  margin: 0;
  color: rgb(73,73,73);
  font-weight: normal;
@ -1075,7 +1183,7 @@ exports[`renders <Networks networks /> without throwing 1`] = `
  font-size: 1.3125rem;
 }

-.c15 {
+.c18 {
  margin: 0;
  color: rgb(73,73,73);
  font-weight: 600;
@ -1085,7 +1193,7 @@ exports[`renders <Networks networks /> without throwing 1`] = `
  color: rgb(255,255,255);
 }

-.c18 {
+.c21 {
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
@ -1105,7 +1213,7 @@ exports[`renders <Networks networks /> without throwing 1`] = `
  align-content: stretch;
 }

-.c21 {
+.c24 {
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
@ -1129,7 +1237,7 @@ exports[`renders <Networks networks /> without throwing 1`] = `
  align-items: center;
 }

-.c20 {
+.c23 {
  -webkit-order: 0;
  -ms-flex-order: 0;
  order: 0;
@ -1146,7 +1254,7 @@ exports[`renders <Networks networks /> without throwing 1`] = `
  display: block;
 }

-.c10 {
+.c13 {
  box-sizing: content-box;
  display: -webkit-box;
  display: -webkit-flex;
@ -1168,7 +1276,7 @@ exports[`renders <Networks networks /> without throwing 1`] = `
  border-color: rgb(216,216,216);
 }

-.c12 {
+.c15 {
  box-sizing: content-box;
  display: -webkit-box;
  display: -webkit-flex;
@ -1198,7 +1306,7 @@ exports[`renders <Networks networks /> without throwing 1`] = `
  flex: 0 0 2.875rem;
 }

-.c24 {
+.c27 {
  box-sizing: content-box;
  display: -webkit-box;
  display: -webkit-flex;
@ -1226,7 +1334,7 @@ exports[`renders <Networks networks /> without throwing 1`] = `
  flex: 0 0 2.875rem;
 }

-.c27 {
+.c30 {
  box-sizing: content-box;
  display: -webkit-box;
  display: -webkit-flex;
@ -1253,7 +1361,7 @@ exports[`renders <Networks networks /> without throwing 1`] = `
  flex: 0 0 2.875rem;
 }

-.c16 {
+.c19 {
  box-sizing: border-box;
  display: -webkit-inline-box;
  display: -webkit-inline-flex;
@ -1269,7 +1377,7 @@ exports[`renders <Networks networks /> without throwing 1`] = `
  background-color: transparent;
 }

-.c11 {
+.c14 {
  -webkit-flex-direction: row;
  -ms-flex-direction: row;
  flex-direction: row;
@ -1281,7 +1389,7 @@ exports[`renders <Networks networks /> without throwing 1`] = `
  border-right: 0;
 }

-.c25 {
+.c28 {
  -webkit-flex-direction: row;
  -ms-flex-direction: row;
  flex-direction: row;
@ -1294,7 +1402,7 @@ exports[`renders <Networks networks /> without throwing 1`] = `
  box-shadow: none;
 }

-.c26 {
+.c29 {
  width: 2.875rem;
  min-width: 2.875rem;
  min-height: 2.875rem;
@ -1323,7 +1431,7 @@ exports[`renders <Networks networks /> without throwing 1`] = `
  box-shadow: none;
 }

-.c13 {
+.c16 {
  box-sizing: border-box;
  min-height: 2.9375rem;
  max-width: 100%;
@ -1398,7 +1506,7 @@ exports[`renders <Networks networks /> without throwing 1`] = `
 }

@media only screen and (min-width:0em) {
-  .c8 {
+  .c11 {
    -webkit-flex-basis: 100%;
    -ms-flex-preferred-size: 100%;
    flex-basis: 100%;
@ -1407,7 +1515,7 @@ exports[`renders <Networks networks /> without throwing 1`] = `
 }

@media only screen and (min-width:48em) {
-  .c8 {
+  .c11 {
    -webkit-flex-basis: 66.66666666666667%;
    -ms-flex-preferred-size: 66.66666666666667%;
    flex-basis: 66.66666666666667%;
@ -1440,11 +1548,15 @@ exports[`renders <Networks networks /> without throwing 1`] = `
          Use predefined or customized fabric networks which can be public-facing or private. All fabrics are isolated from other customers giving you complete control over the network environment. Read more on fabrics.
           
          <a
-            href="https://docs.joyent.com/public-cloud/network/sdn"
-            rel="noopener noreferrer"
-            target="__blank"
+            className="c7 c8 c9"
          >
-            Read the docs
+            <a
+              rel="noopener noreferrer"
+              target="__blank"
+              to="https://docs.joyent.com/public-cloud/network/sdn"
+            >
+              Read the docs
+            </a>
          </a>
        </p>
      </div>
@ -1454,7 +1566,7 @@ exports[`renders <Networks networks /> without throwing 1`] = `
    className="c2"
  >
    <h3
-      className="c7"
+      className="c10"
    >
      Networks attached to this instance
    </h3>
@ -1463,31 +1575,31 @@ exports[`renders <Networks networks /> without throwing 1`] = `
    className="c3"
  >
    <div
-      className="c8"
+      className="c11"
    >
      <div
-        className="c9"
+        className="c12"
      >
        <div
-          className="c10"
+          className="c13"
          disabled={false}
          name="card"
        >
          <div
-            className="c11 c12"
+            className="c14 c15"
            disabled={false}
            name="card-header"
          >
            <div
-              className="c13 c12"
+              className="c16 c15"
              disabled={false}
              name="card-header-meta"
            >
              <div
-                className="c14"
+                className="c17"
              >
                <h4
-                  className="c15"
+                  className="c18"
                >
                  name
                </h4>
@ -1495,12 +1607,12 @@ exports[`renders <Networks networks /> without throwing 1`] = `
            </div>
          </div>
          <div
-            className="c16 c10"
+            className="c19 c13"
            disabled={false}
            name="card-outlet"
          >
            <div
-              className="c17"
+              className="c20"
            >
              <div
                className="c2"
@ -1512,22 +1624,22 @@ exports[`renders <Networks networks /> without throwing 1`] = `
                </p>
              </div>
              <div
-                className="c18"
+                className="c21"
              >
                <div
-                  className="c19"
+                  className="c22"
                >
                  <div
-                    className="c20"
+                    className="c23"
                  >
                    <div
-                      className="c21"
+                      className="c24"
                    >
                      <div
-                        className="c20"
+                        className="c23"
                      >
                        <div
-                          className="c22"
+                          className="c25"
                        >
                          <svg
                            height="16"
@ -1548,7 +1660,7 @@ exports[`renders <Networks networks /> without throwing 1`] = `
                        </div>
                      </div>
                      <div
-                        className="c20"
+                        className="c23"
                      >
                        <p
                          className="c6"
@ -1560,19 +1672,19 @@ exports[`renders <Networks networks /> without throwing 1`] = `
                  </div>
                </div>
                <div
-                  className="c19"
+                  className="c22"
                >
                  <div
-                    className="c20"
+                    className="c23"
                  >
                    <div
-                      className="c21"
+                      className="c24"
                    >
                      <div
-                        className="c20"
+                        className="c23"
                      >
                        <div
-                          className="c22"
+                          className="c25"
                        >
                          <svg
                            height="16.2"
@ -1588,7 +1700,7 @@ exports[`renders <Networks networks /> without throwing 1`] = `
                        </div>
                      </div>
                      <div
-                        className="c20"
+                        className="c23"
                      >
                        <p
                          className="c6"
@ -1600,19 +1712,19 @@ exports[`renders <Networks networks /> without throwing 1`] = `
                  </div>
                </div>
                <div
-                  className="c19"
+                  className="c22"
                >
                  <div
-                    className="c20"
+                    className="c23"
                  >
                    <div
-                      className="c21"
+                      className="c24"
                    >
                      <div
-                        className="c20"
+                        className="c23"
                      >
                        <div
-                          className="c22"
+                          className="c25"
                        >
                          <svg
                            height="17"
@ -1720,7 +1832,7 @@ exports[`renders <Networks networks /> without throwing 1`] = `
                        </div>
                      </div>
                      <div
-                        className="c20"
+                        className="c23"
                      >
                        <p
                          className="c6"
@ -1733,26 +1845,26 @@ exports[`renders <Networks networks /> without throwing 1`] = `
                </div>
              </div>
              <div
-                className="c23"
+                className="c26"
              >
                <div
-                  className="c24"
+                  className="c27"
                  disabled={false}
                  name="card"
                >
                  <div
-                    className="c25 c24"
+                    className="c28 c27"
                    disabled={false}
                    name="card-header"
                    onClick={[Function]}
                  >
                    <div
-                      className="c13 c24"
+                      className="c16 c27"
                      disabled={false}
                      name="card-header-meta"
                    >
                      <div
-                        className="c14"
+                        className="c17"
                      >
                        <p
                          className="c6"
@ -1762,7 +1874,7 @@ exports[`renders <Networks networks /> without throwing 1`] = `
                      </div>
                    </div>
                    <div
-                      className="c26 c27"
+                      className="c29 c30"
                      disabled={false}
                      name="card-header-box"
                    >
@ -1787,26 +1899,26 @@ exports[`renders <Networks networks /> without throwing 1`] = `
                </div>
              </div>
              <div
-                className="c23"
+                className="c26"
              >
                <div
-                  className="c24"
+                  className="c27"
                  disabled={false}
                  name="card"
                >
                  <div
-                    className="c25 c24"
+                    className="c28 c27"
                    disabled={false}
                    name="card-header"
                    onClick={[Function]}
                  >
                    <div
-                      className="c13 c24"
+                      className="c16 c27"
                      disabled={false}
                      name="card-header-meta"
                    >
                      <div
-                        className="c14"
+                        className="c17"
                      >
                        <p
                          className="c6"
@ -1816,7 +1928,7 @@ exports[`renders <Networks networks /> without throwing 1`] = `
                      </div>
                    </div>
                    <div
-                      className="c26 c27"
+                      className="c29 c30"
                      disabled={false}
                      name="card-header-box"
                    >
@ -1850,31 +1962,31 @@ exports[`renders <Networks networks /> without throwing 1`] = `
    className="c3"
  >
    <div
-      className="c8"
+      className="c11"
    >
      <div
-        className="c9"
+        className="c12"
      >
        <div
-          className="c10"
+          className="c13"
          disabled={false}
          name="card"
        >
          <div
-            className="c11 c12"
+            className="c14 c15"
            disabled={false}
            name="card-header"
          >
            <div
-              className="c13 c12"
+              className="c16 c15"
              disabled={false}
              name="card-header-meta"
            >
              <div
-                className="c14"
+                className="c17"
              >
                <h4
-                  className="c15"
+                  className="c18"
                >
                  name2
                </h4>
@ -1882,12 +1994,12 @@ exports[`renders <Networks networks /> without throwing 1`] = `
            </div>
          </div>
          <div
-            className="c16 c10"
+            className="c19 c13"
            disabled={false}
            name="card-outlet"
          >
            <div
-              className="c17"
+              className="c20"
            >
              <div
                className="c2"
@ -1899,22 +2011,22 @@ exports[`renders <Networks networks /> without throwing 1`] = `
                </p>
              </div>
              <div
-                className="c18"
+                className="c21"
              >
                <div
-                  className="c19"
+                  className="c22"
                >
                  <div
-                    className="c20"
+                    className="c23"
                  >
                    <div
-                      className="c21"
+                      className="c24"
                    >
                      <div
-                        className="c20"
+                        className="c23"
                      >
                        <div
-                          className="c22"
+                          className="c25"
                        >
                          <svg
                            height="16"
@ -1935,7 +2047,7 @@ exports[`renders <Networks networks /> without throwing 1`] = `
                        </div>
                      </div>
                      <div
-                        className="c20"
+                        className="c23"
                      >
                        <p
                          className="c6"
@ -1947,19 +2059,19 @@ exports[`renders <Networks networks /> without throwing 1`] = `
                  </div>
                </div>
                <div
-                  className="c19"
+                  className="c22"
                >
                  <div
-                    className="c20"
+                    className="c23"
                  >
                    <div
-                      className="c21"
+                      className="c24"
                    >
                      <div
-                        className="c20"
+                        className="c23"
                      >
                        <div
-                          className="c22"
+                          className="c25"
                        >
                          <svg
                            height="13"
@ -1975,7 +2087,7 @@ exports[`renders <Networks networks /> without throwing 1`] = `
                        </div>
                      </div>
                      <div
-                        className="c20"
+                        className="c23"
                      >
                        <p
                          className="c6"
--- 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,19 +61,23 @@ export const Header = ({ icon = null, children }) => (
                </Flex>
              </FlexItem>
              <FlexItem alignCenter>
-                <Link to={expanded ? `/${namespace}` : `/${namespace}/${name}`}>
-                  <Flex alignCenter>
-                    {expanded ? 'Save and Collase' : 'Edit'}
-                    <Margin left="1">
-                      <Flex>
-                        <ArrowIcon
-                          fill="primary"
-                          direction={expanded ? 'up' : 'down'}
-                        />
-                      </Flex>
-                    </Margin>
-                  </Flex>
-                </Link>
+                <Anchor>
+                  <Link
+                    to={expanded ? `/${namespace}` : `/${namespace}/${name}`}
+                  >
+                    <Flex alignCenter>
+                      {expanded ? 'Save and Collase' : 'Edit'}
+                      <Margin left="1">
+                        <Flex>
+                          <ArrowIcon
+                            fill="primary"
+                            direction={expanded ? 'up' : 'down'}
+                          />
+                        </Flex>
+                      </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;
 }