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

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;

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

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;
 }

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>

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;
 }

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;
 }

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, [])
   })),

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>

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

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>

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

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"

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>
       ))}

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"

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;

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;
   }

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;
 }