feat(ui-toolkit): add copiable field

packages/my-joy-beta/src/components/__tests__/__snapshots__/cns.spec.js.snap

@@ -53,25 +53,6 @@ exports[`renders <AddServiceForm /> without throwing 1`] = `
   display: block;
 }
 
-.c11 {
-  box-sizing: border-box;
-  display: -webkit-box;
-  display: -webkit-flex;
-  display: -ms-flexbox;
-  display: flex;
-  -webkit-flex: 1 1 auto;
-  -ms-flex: 1 1 auto;
-  flex: 1 1 auto;
-  -webkit-flex-direction: row;
-  -ms-flex-direction: row;
-  flex-direction: row;
-  -webkit-flex-wrap: wrap;
-  -ms-flex-wrap: wrap;
-  flex-wrap: wrap;
-  margin-right: -0.625rem;
-  margin-left: -0.625rem;
-}
-
 .c9 {
   font-family: sans-serif;
   font-size: 100%;
@@ -187,6 +168,25 @@ exports[`renders <AddServiceForm /> without throwing 1`] = `
   font-size: 0.8125rem;
 }
 
+.c11 {
+  box-sizing: border-box;
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: -ms-flexbox;
+  display: flex;
+  -webkit-flex: 1 1 auto;
+  -ms-flex: 1 1 auto;
+  flex: 1 1 auto;
+  -webkit-flex-direction: row;
+  -ms-flex-direction: row;
+  flex-direction: row;
+  -webkit-flex-wrap: wrap;
+  -ms-flex-wrap: wrap;
+  flex-wrap: wrap;
+  margin-right: -0.625rem;
+  margin-left: -0.625rem;
+}
+
 .c10 {
   background-color: rgb(216,216,216);
   margin: 0;
@@ -382,25 +382,6 @@ exports[`renders <AddServiceForm pristine /> without throwing 1`] = `
   display: block;
 }
 
-.c11 {
-  box-sizing: border-box;
-  display: -webkit-box;
-  display: -webkit-flex;
-  display: -ms-flexbox;
-  display: flex;
-  -webkit-flex: 1 1 auto;
-  -ms-flex: 1 1 auto;
-  flex: 1 1 auto;
-  -webkit-flex-direction: row;
-  -ms-flex-direction: row;
-  flex-direction: row;
-  -webkit-flex-wrap: wrap;
-  -ms-flex-wrap: wrap;
-  flex-wrap: wrap;
-  margin-right: -0.625rem;
-  margin-left: -0.625rem;
-}
-
 .c9 {
   font-family: sans-serif;
   font-size: 100%;
@@ -516,6 +497,25 @@ exports[`renders <AddServiceForm pristine /> without throwing 1`] = `
   font-size: 0.8125rem;
 }
 
+.c11 {
+  box-sizing: border-box;
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: -ms-flexbox;
+  display: flex;
+  -webkit-flex: 1 1 auto;
+  -ms-flex: 1 1 auto;
+  flex: 1 1 auto;
+  -webkit-flex-direction: row;
+  -ms-flex-direction: row;
+  flex-direction: row;
+  -webkit-flex-wrap: wrap;
+  -ms-flex-wrap: wrap;
+  flex-wrap: wrap;
+  margin-right: -0.625rem;
+  margin-left: -0.625rem;
+}
+
 .c10 {
   background-color: rgb(216,216,216);
   margin: 0;

packages/my-joy-beta/src/components/cns.js

@@ -4,7 +4,6 @@ import remcalc from 'remcalc';
 import { Margin, Padding } from 'styled-components-spacing';
 import Flex, { FlexItem } from 'styled-flex-component';
 import { Field } from 'redux-form';
-import { CopiableField } from '@components/instances/summary';
 
 import {
   P,
@@ -19,7 +18,8 @@ import {
   FormGroup,
   FormLabel,
   PublicIcon,
-  PrivateIcon
+  PrivateIcon,
+  CopiableField
 } from 'joyent-ui-toolkit';
 
 import Tag from '@components/tags';
@@ -142,8 +142,7 @@ export const Hostname = ({
             top={0.5}
             bottom={
               values.length !== 1 && values.length !== i + 1 ? '1' : undefined
-            }
+            }>
-          >
             {copy ? (
               <CopiableField disabled md={12} text={value} />
             ) : (
@@ -225,8 +224,7 @@ export default ({
           copy={copy}
           services={services}
           hostnames={hostnames.filter(({ service }) => service)}
-          onRemoveService={onRemoveService}
+          onRemoveService={onRemoveService}>
-        >
           {children}
         </CnsHostnames>
       </Margin>

packages/my-joy-beta/src/components/instances/__tests__/__snapshots__/summary.spec.js.snap

@@ -162,6 +162,10 @@ exports[`renders <Summary /> without throwing 1`] = `
   margin-right: 0.375rem;
 }
 
+.c31 {
+  cursor: pointer;
+}
+
 .c19 {
   display: inline-block;
 }
@@ -999,26 +1003,6 @@ exports[`renders <Summary /> without throwing 1`] = `
   outline: 0;
 }
 
-.c15 {
-  opacity: 0.5;
-  padding-right: 0.1875rem;
-}
-
-.c9 {
-  -webkit-align-items: center;
-  -webkit-box-align: center;
-  -ms-flex-align: center;
-  align-items: center;
-  display: -webkit-box;
-  display: -webkit-flex;
-  display: -ms-flexbox;
-  display: flex;
-  -webkit-box-pack: start;
-  -webkit-justify-content: flex-start;
-  -ms-flex-pack: start;
-  justify-content: flex-start;
-}
-
 .c29 {
   display: -webkit-box;
   display: -webkit-flex;
@@ -1040,6 +1024,26 @@ exports[`renders <Summary /> without throwing 1`] = `
   left: -1.625rem;
 }
 
+.c15 {
+  opacity: 0.5;
+  padding-right: 0.1875rem;
+}
+
+.c9 {
+  -webkit-align-items: center;
+  -webkit-box-align: center;
+  -ms-flex-align: center;
+  align-items: center;
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: -ms-flexbox;
+  display: flex;
+  -webkit-box-pack: start;
+  -webkit-justify-content: flex-start;
+  -ms-flex-pack: start;
+  justify-content: flex-start;
+}
+
 .c11 {
   width: 0.0625rem;
   background: rgb(216,216,216);
@@ -1054,10 +1058,6 @@ exports[`renders <Summary /> without throwing 1`] = `
   margin: 0 1.125rem;
 }
 
-.c31 {
-  cursor: pointer;
-}
-
 @media only screen and (min-width:0em) {
   .c5 {
     -webkit-align-items: center;
@@ -1959,6 +1959,10 @@ exports[`renders <Summary instance /> without throwing 1`] = `
   margin-right: 0.375rem;
 }
 
+.c33 {
+  cursor: pointer;
+}
+
 .c19 {
   display: inline-block;
 }
@@ -2883,26 +2887,6 @@ exports[`renders <Summary instance /> without throwing 1`] = `
   outline: 0;
 }
 
-.c15 {
-  opacity: 0.5;
-  padding-right: 0.1875rem;
-}
-
-.c9 {
-  -webkit-align-items: center;
-  -webkit-box-align: center;
-  -ms-flex-align: center;
-  align-items: center;
-  display: -webkit-box;
-  display: -webkit-flex;
-  display: -ms-flexbox;
-  display: flex;
-  -webkit-box-pack: start;
-  -webkit-justify-content: flex-start;
-  -ms-flex-pack: start;
-  justify-content: flex-start;
-}
-
 .c31 {
   display: -webkit-box;
   display: -webkit-flex;
@@ -2946,6 +2930,26 @@ exports[`renders <Summary instance /> without throwing 1`] = `
   left: -1.625rem;
 }
 
+.c15 {
+  opacity: 0.5;
+  padding-right: 0.1875rem;
+}
+
+.c9 {
+  -webkit-align-items: center;
+  -webkit-box-align: center;
+  -ms-flex-align: center;
+  align-items: center;
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: -ms-flexbox;
+  display: flex;
+  -webkit-box-pack: start;
+  -webkit-justify-content: flex-start;
+  -ms-flex-pack: start;
+  justify-content: flex-start;
+}
+
 .c11 {
   width: 0.0625rem;
   background: rgb(216,216,216);
@@ -2960,10 +2964,6 @@ exports[`renders <Summary instance /> without throwing 1`] = `
   margin: 0 1.125rem;
 }
 
-.c33 {
-  cursor: pointer;
-}
-
 @media only screen and (min-width:0em) {
   .c5 {
     -webkit-align-items: center;
@@ -4020,6 +4020,10 @@ exports[`renders <Summary instance /> without throwing 2`] = `
   margin-right: 0.375rem;
 }
 
+.c33 {
+  cursor: pointer;
+}
+
 .c19 {
   display: inline-block;
 }
@@ -4944,26 +4948,6 @@ exports[`renders <Summary instance /> without throwing 2`] = `
   outline: 0;
 }
 
-.c15 {
-  opacity: 0.5;
-  padding-right: 0.1875rem;
-}
-
-.c9 {
-  -webkit-align-items: center;
-  -webkit-box-align: center;
-  -ms-flex-align: center;
-  align-items: center;
-  display: -webkit-box;
-  display: -webkit-flex;
-  display: -ms-flexbox;
-  display: flex;
-  -webkit-box-pack: start;
-  -webkit-justify-content: flex-start;
-  -ms-flex-pack: start;
-  justify-content: flex-start;
-}
-
 .c31 {
   display: -webkit-box;
   display: -webkit-flex;
@@ -5007,6 +4991,26 @@ exports[`renders <Summary instance /> without throwing 2`] = `
   left: -1.625rem;
 }
 
+.c15 {
+  opacity: 0.5;
+  padding-right: 0.1875rem;
+}
+
+.c9 {
+  -webkit-align-items: center;
+  -webkit-box-align: center;
+  -ms-flex-align: center;
+  align-items: center;
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: -ms-flexbox;
+  display: flex;
+  -webkit-box-pack: start;
+  -webkit-justify-content: flex-start;
+  -ms-flex-pack: start;
+  justify-content: flex-start;
+}
+
 .c11 {
   width: 0.0625rem;
   background: rgb(216,216,216);
@@ -5021,10 +5025,6 @@ exports[`renders <Summary instance /> without throwing 2`] = `
   margin: 0 1.125rem;
 }
 
-.c33 {
-  cursor: pointer;
-}
-
 @media only screen and (min-width:0em) {
   .c5 {
     -webkit-align-items: center;
@@ -6081,6 +6081,10 @@ exports[`renders <Summary starting stopping rebooting removing /> without throwi
   margin-right: 0.375rem;
 }
 
+.c35 {
+  cursor: pointer;
+}
+
 .c22 {
   fill: rgb(59,70,204);
   stroke: rgb(59,70,204);
@@ -6971,26 +6975,6 @@ exports[`renders <Summary starting stopping rebooting removing /> without throwi
   outline: 0;
 }
 
-.c15 {
-  opacity: 0.5;
-  padding-right: 0.1875rem;
-}
-
-.c9 {
-  -webkit-align-items: center;
-  -webkit-box-align: center;
-  -ms-flex-align: center;
-  align-items: center;
-  display: -webkit-box;
-  display: -webkit-flex;
-  display: -ms-flexbox;
-  display: flex;
-  -webkit-box-pack: start;
-  -webkit-justify-content: flex-start;
-  -ms-flex-pack: start;
-  justify-content: flex-start;
-}
-
 .c33 {
   display: -webkit-box;
   display: -webkit-flex;
@@ -7012,6 +6996,26 @@ exports[`renders <Summary starting stopping rebooting removing /> without throwi
   left: -1.625rem;
 }
 
+.c15 {
+  opacity: 0.5;
+  padding-right: 0.1875rem;
+}
+
+.c9 {
+  -webkit-align-items: center;
+  -webkit-box-align: center;
+  -ms-flex-align: center;
+  align-items: center;
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: -ms-flexbox;
+  display: flex;
+  -webkit-box-pack: start;
+  -webkit-justify-content: flex-start;
+  -ms-flex-pack: start;
+  justify-content: flex-start;
+}
+
 .c11 {
   width: 0.0625rem;
   background: rgb(216,216,216);
@@ -7026,10 +7030,6 @@ exports[`renders <Summary starting stopping rebooting removing /> without throwi
   margin: 0 1.125rem;
 }
 
-.c35 {
-  cursor: pointer;
-}
-
 @media only screen and (min-width:0em) {
   .c5 {
     -webkit-align-items: center;
@@ -7983,6 +7983,10 @@ exports[`renders <Summary state /> without throwing 1`] = `
   margin-right: 0.375rem;
 }
 
+.c33 {
+  cursor: pointer;
+}
+
 .c19 {
   display: inline-block;
 }
@@ -8985,26 +8989,6 @@ exports[`renders <Summary state /> without throwing 1`] = `
   outline: 0;
 }
 
-.c15 {
-  opacity: 0.5;
-  padding-right: 0.1875rem;
-}
-
-.c9 {
-  -webkit-align-items: center;
-  -webkit-box-align: center;
-  -ms-flex-align: center;
-  align-items: center;
-  display: -webkit-box;
-  display: -webkit-flex;
-  display: -ms-flexbox;
-  display: flex;
-  -webkit-box-pack: start;
-  -webkit-justify-content: flex-start;
-  -ms-flex-pack: start;
-  justify-content: flex-start;
-}
-
 .c31 {
   display: -webkit-box;
   display: -webkit-flex;
@@ -9026,6 +9010,26 @@ exports[`renders <Summary state /> without throwing 1`] = `
   left: -1.625rem;
 }
 
+.c15 {
+  opacity: 0.5;
+  padding-right: 0.1875rem;
+}
+
+.c9 {
+  -webkit-align-items: center;
+  -webkit-box-align: center;
+  -ms-flex-align: center;
+  align-items: center;
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: -ms-flexbox;
+  display: flex;
+  -webkit-box-pack: start;
+  -webkit-justify-content: flex-start;
+  -ms-flex-pack: start;
+  justify-content: flex-start;
+}
+
 .c11 {
   width: 0.0625rem;
   background: rgb(216,216,216);
@@ -9040,10 +9044,6 @@ exports[`renders <Summary state /> without throwing 1`] = `
   margin: 0 1.125rem;
 }
 
-.c33 {
-  cursor: pointer;
-}
-
 @media only screen and (min-width:0em) {
   .c5 {
     -webkit-align-items: center;
@@ -9945,6 +9945,10 @@ exports[`renders <Summary state /> without throwing 2`] = `
   margin-right: 0.375rem;
 }
 
+.c33 {
+  cursor: pointer;
+}
+
 .c19 {
   display: inline-block;
 }
@@ -10947,26 +10951,6 @@ exports[`renders <Summary state /> without throwing 2`] = `
   outline: 0;
 }
 
-.c15 {
-  opacity: 0.5;
-  padding-right: 0.1875rem;
-}
-
-.c9 {
-  -webkit-align-items: center;
-  -webkit-box-align: center;
-  -ms-flex-align: center;
-  align-items: center;
-  display: -webkit-box;
-  display: -webkit-flex;
-  display: -ms-flexbox;
-  display: flex;
-  -webkit-box-pack: start;
-  -webkit-justify-content: flex-start;
-  -ms-flex-pack: start;
-  justify-content: flex-start;
-}
-
 .c31 {
   display: -webkit-box;
   display: -webkit-flex;
@@ -10988,6 +10972,26 @@ exports[`renders <Summary state /> without throwing 2`] = `
   left: -1.625rem;
 }
 
+.c15 {
+  opacity: 0.5;
+  padding-right: 0.1875rem;
+}
+
+.c9 {
+  -webkit-align-items: center;
+  -webkit-box-align: center;
+  -ms-flex-align: center;
+  align-items: center;
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: -ms-flexbox;
+  display: flex;
+  -webkit-box-pack: start;
+  -webkit-justify-content: flex-start;
+  -ms-flex-pack: start;
+  justify-content: flex-start;
+}
+
 .c11 {
   width: 0.0625rem;
   background: rgb(216,216,216);
@@ -11002,10 +11006,6 @@ exports[`renders <Summary state /> without throwing 2`] = `
   margin: 0 1.125rem;
 }
 
-.c33 {
-  cursor: pointer;
-}
-
 @media only screen and (min-width:0em) {
   .c5 {
     -webkit-align-items: center;
@@ -11907,6 +11907,10 @@ exports[`renders <Summary state /> without throwing 3`] = `
   margin-right: 0.375rem;
 }
 
+.c31 {
+  cursor: pointer;
+}
+
 .c19 {
   display: inline-block;
 }
@@ -12745,26 +12749,6 @@ exports[`renders <Summary state /> without throwing 3`] = `
   outline: 0;
 }
 
-.c15 {
-  opacity: 0.5;
-  padding-right: 0.1875rem;
-}
-
-.c9 {
-  -webkit-align-items: center;
-  -webkit-box-align: center;
-  -ms-flex-align: center;
-  align-items: center;
-  display: -webkit-box;
-  display: -webkit-flex;
-  display: -ms-flexbox;
-  display: flex;
-  -webkit-box-pack: start;
-  -webkit-justify-content: flex-start;
-  -ms-flex-pack: start;
-  justify-content: flex-start;
-}
-
 .c29 {
   display: -webkit-box;
   display: -webkit-flex;
@@ -12786,6 +12770,26 @@ exports[`renders <Summary state /> without throwing 3`] = `
   left: -1.625rem;
 }
 
+.c15 {
+  opacity: 0.5;
+  padding-right: 0.1875rem;
+}
+
+.c9 {
+  -webkit-align-items: center;
+  -webkit-box-align: center;
+  -ms-flex-align: center;
+  align-items: center;
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: -ms-flexbox;
+  display: flex;
+  -webkit-box-pack: start;
+  -webkit-justify-content: flex-start;
+  -ms-flex-pack: start;
+  justify-content: flex-start;
+}
+
 .c11 {
   width: 0.0625rem;
   background: rgb(216,216,216);
@@ -12800,10 +12804,6 @@ exports[`renders <Summary state /> without throwing 3`] = `
   margin: 0 1.125rem;
 }
 
-.c31 {
-  cursor: pointer;
-}
-
 @media only screen and (min-width:0em) {
   .c5 {
     -webkit-align-items: center;

packages/my-joy-beta/src/components/instances/summary.js

@@ -6,7 +6,6 @@ import remcalc from 'remcalc';
 import is from 'styled-is';
 import titleCase from 'title-case';
 import distanceInWordsToNow from 'date-fns/distance_in_words_to_now';
-import copy from 'clipboard-copy';
 
 import {
   Card,
@@ -14,7 +13,6 @@ import {
   Divider,
   ResetIcon,
   Button,
-  FormLabel,
   Input,
   H2,
   Label,
@@ -23,10 +21,7 @@ import {
   DeleteIcon,
   StartIcon,
   StopIcon,
-  TooltipContainer,
+  CopiableField
-  TooltipTarget,
-  Tooltip,
-  ClipboardIcon
 } from 'joyent-ui-toolkit';
 
 const { SmallOnly, Medium } = QueryBreakpoints;
@@ -55,24 +50,6 @@ const Flex = styled.div`
   }
 `;
 
-const InputIconWrapper = styled.div`
-  display: flex;
-  margin-bottom: ${remcalc(10)};
-  align-items: center;
-
-  ${is('noMargin')`
-    margin-bottom: ${remcalc(0)};
-  `};
-
-  input {
-    padding-right: ${remcalc(30)};
-  }
-
-  div {
-    position: relative;
-    left: ${remcalc(-26)};
-  }
-`;
 
 const VerticalDivider = styled.div`
   width: ${remcalc(1)};
@@ -87,61 +64,6 @@ const VerticalDivider = styled.div`
   }
 `;
 
-const ClipboardIconActionable = styled(ClipboardIcon)`
-  cursor: pointer;
-`;
-
-export class CopyToClipboardTooltip extends Component {
-  constructor() {
-    super();
-
-    this.state = {
-      copied: false
-    };
-  }
-
-  handleClick = () => {
-    const { children: text } = this.props;
-
-    copy(text);
-
-    this.setState(
-      {
-        copied: true
-      },
-      () => {
-        setTimeout(() => {
-          this.setState({
-            copied: false
-          });
-        }, 4000);
-      }
-    );
-  };
-
-  render = () => (
-    <TooltipContainer hoverable>
-      <TooltipTarget>
-        <ClipboardIconActionable onClick={this.handleClick} />
-      </TooltipTarget>
-      <Tooltip placement="top" success={Boolean(this.state.copied)}>
-        {this.state.copied ? 'Copied To Clipboard' : 'Copy To Clipboard'}
-      </Tooltip>
-    </TooltipContainer>
-  );
-}
-
-export const CopiableField = ({ md, label, text, ...rest }) => (
-  <Row>
-    <Col xs={12} md={md || 7}>
-      {label ? <FormLabel>{label}</FormLabel> : null}
-      <InputIconWrapper {...rest}>
-        <Input {...rest} monospace onBlur={null} fluid value={text} />
-        <CopyToClipboardTooltip>{text}</CopyToClipboardTooltip>
-      </InputIconWrapper>
-    </Col>
-  </Row>
-);
 
 export const Meta = ({
   created,

packages/my-joy-beta/src/containers/instances/__tests__/__snapshots__/cns.spec.js.snap

@@ -1248,6 +1248,10 @@ exports[`renders <Cns hostnames /> without throwing 1`] = `
   margin-left: 0.375rem;
 }
 
+.c22 {
+  cursor: pointer;
+}
+
 .c5 {
   color: rgba(73,73,73,1);
   line-height: 1.5rem;
@@ -1721,6 +1725,27 @@ exports[`renders <Cns hostnames /> without throwing 1`] = `
   display: none;
 }
 
+.c20 {
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: -ms-flexbox;
+  display: flex;
+  margin-bottom: 0.625rem;
+  -webkit-align-items: center;
+  -webkit-box-align: center;
+  -ms-flex-align: center;
+  align-items: center;
+}
+
+.c20 input {
+  padding-right: 1.875rem;
+}
+
+.c20 div {
+  position: relative;
+  left: -1.625rem;
+}
+
 .c15 {
   -webkit-order: 0;
   -ms-flex-order: 0;
@@ -1832,31 +1857,6 @@ exports[`renders <Cns hostnames /> without throwing 1`] = `
   align-content: stretch;
 }
 
-.c20 {
-  display: -webkit-box;
-  display: -webkit-flex;
-  display: -ms-flexbox;
-  display: flex;
-  margin-bottom: 0.625rem;
-  -webkit-align-items: center;
-  -webkit-box-align: center;
-  -ms-flex-align: center;
-  align-items: center;
-}
-
-.c20 input {
-  padding-right: 1.875rem;
-}
-
-.c20 div {
-  position: relative;
-  left: -1.625rem;
-}
-
-.c22 {
-  cursor: pointer;
-}
-
 .c13 {
   padding-right: 0.75rem;
   margin-right: 0.75rem;
@@ -3806,6 +3806,10 @@ exports[`renders <Cns mutating /> without throwing 1`] = `
   margin-left: 0.375rem;
 }
 
+.c22 {
+  cursor: pointer;
+}
+
 .c5 {
   color: rgba(73,73,73,1);
   line-height: 1.5rem;
@@ -4350,6 +4354,27 @@ exports[`renders <Cns mutating /> without throwing 1`] = `
   box-shadow: 0 0 0 0.0625rem rgb(216,216,216);
 }
 
+.c20 {
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: -ms-flexbox;
+  display: flex;
+  margin-bottom: 0.625rem;
+  -webkit-align-items: center;
+  -webkit-box-align: center;
+  -ms-flex-align: center;
+  align-items: center;
+}
+
+.c20 input {
+  padding-right: 1.875rem;
+}
+
+.c20 div {
+  position: relative;
+  left: -1.625rem;
+}
+
 .c15 {
   -webkit-order: 0;
   -ms-flex-order: 0;
@@ -4497,31 +4522,6 @@ exports[`renders <Cns mutating /> without throwing 1`] = `
   align-content: stretch;
 }
 
-.c20 {
-  display: -webkit-box;
-  display: -webkit-flex;
-  display: -ms-flexbox;
-  display: flex;
-  margin-bottom: 0.625rem;
-  -webkit-align-items: center;
-  -webkit-box-align: center;
-  -ms-flex-align: center;
-  align-items: center;
-}
-
-.c20 input {
-  padding-right: 1.875rem;
-}
-
-.c20 div {
-  position: relative;
-  left: -1.625rem;
-}
-
-.c22 {
-  cursor: pointer;
-}
-
 .c13 {
   padding-right: 0.75rem;
   margin-right: 0.75rem;

packages/my-joy-beta/src/containers/instances/__tests__/__snapshots__/summary.spec.js.snap

@@ -558,6 +558,10 @@ exports[`renders <Summary starting stopping rebooting removing /> without throwi
   margin-right: 0.375rem;
 }
 
+.c34 {
+  cursor: pointer;
+}
+
 .c20 {
   display: inline-block;
 }
@@ -1598,26 +1602,6 @@ exports[`renders <Summary starting stopping rebooting removing /> without throwi
   outline: 0;
 }
 
-.c16 {
-  opacity: 0.5;
-  padding-right: 0.1875rem;
-}
-
-.c10 {
-  -webkit-align-items: center;
-  -webkit-box-align: center;
-  -ms-flex-align: center;
-  align-items: center;
-  display: -webkit-box;
-  display: -webkit-flex;
-  display: -ms-flexbox;
-  display: flex;
-  -webkit-box-pack: start;
-  -webkit-justify-content: flex-start;
-  -ms-flex-pack: start;
-  justify-content: flex-start;
-}
-
 .c32 {
   display: -webkit-box;
   display: -webkit-flex;
@@ -1661,6 +1645,26 @@ exports[`renders <Summary starting stopping rebooting removing /> without throwi
   left: -1.625rem;
 }
 
+.c16 {
+  opacity: 0.5;
+  padding-right: 0.1875rem;
+}
+
+.c10 {
+  -webkit-align-items: center;
+  -webkit-box-align: center;
+  -ms-flex-align: center;
+  align-items: center;
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: -ms-flexbox;
+  display: flex;
+  -webkit-box-pack: start;
+  -webkit-justify-content: flex-start;
+  -ms-flex-pack: start;
+  justify-content: flex-start;
+}
+
 .c12 {
   width: 0.0625rem;
   background: rgb(216,216,216);
@@ -1675,10 +1679,6 @@ exports[`renders <Summary starting stopping rebooting removing /> without throwi
   margin: 0 1.125rem;
 }
 
-.c34 {
-  cursor: pointer;
-}
-
 @media only screen and (min-width:48em) {
   .c0 {
     width: 46rem;
@@ -2657,6 +2657,10 @@ exports[`renders <Summary starting stopping rebooting removing /> without throwi
   margin-right: 0.375rem;
 }
 
+.c34 {
+  cursor: pointer;
+}
+
 .c20 {
   display: inline-block;
 }
@@ -3697,26 +3701,6 @@ exports[`renders <Summary starting stopping rebooting removing /> without throwi
   outline: 0;
 }
 
-.c16 {
-  opacity: 0.5;
-  padding-right: 0.1875rem;
-}
-
-.c10 {
-  -webkit-align-items: center;
-  -webkit-box-align: center;
-  -ms-flex-align: center;
-  align-items: center;
-  display: -webkit-box;
-  display: -webkit-flex;
-  display: -ms-flexbox;
-  display: flex;
-  -webkit-box-pack: start;
-  -webkit-justify-content: flex-start;
-  -ms-flex-pack: start;
-  justify-content: flex-start;
-}
-
 .c32 {
   display: -webkit-box;
   display: -webkit-flex;
@@ -3760,6 +3744,26 @@ exports[`renders <Summary starting stopping rebooting removing /> without throwi
   left: -1.625rem;
 }
 
+.c16 {
+  opacity: 0.5;
+  padding-right: 0.1875rem;
+}
+
+.c10 {
+  -webkit-align-items: center;
+  -webkit-box-align: center;
+  -ms-flex-align: center;
+  align-items: center;
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: -ms-flexbox;
+  display: flex;
+  -webkit-box-pack: start;
+  -webkit-justify-content: flex-start;
+  -ms-flex-pack: start;
+  justify-content: flex-start;
+}
+
 .c12 {
   width: 0.0625rem;
   background: rgb(216,216,216);
@@ -3774,10 +3778,6 @@ exports[`renders <Summary starting stopping rebooting removing /> without throwi
   margin: 0 1.125rem;
 }
 
-.c34 {
-  cursor: pointer;
-}
-
 @media only screen and (min-width:48em) {
   .c0 {
     width: 46rem;

packages/ui-toolkit/package.json

@@ -21,8 +21,10 @@
   },
   "dependencies": {
     "camel-case": "^3.0.0",
+    "clipboard-copy": "^1.4.1",
     "joy-react-broadcast": "^0.6.9",
     "joyent-icons": "^4.0.0",
+    "joyent-react-styled-flexboxgrid": "^2.2.3",
     "lodash.assign": "^4.2.0",
     "lodash.isboolean": "^3.0.3",
     "lodash.isnan": "^3.0.2",
@@ -35,7 +37,6 @@
     "react-bundle": "^1.0.4",
     "react-popper": "^0.7.5",
     "react-responsive": "^4.0.3",
-    "joyent-react-styled-flexboxgrid": "^2.2.3",
     "remcalc": "^1.0.10",
     "rnd-id": "^2.0.2",
     "styled-components": "^3.1.4",

packages/ui-toolkit/src/form/__tests__/__snapshots__/form.spec.js.snap

@@ -159,13 +159,13 @@ exports[`Form Checkbox 1`] = `
       checked={false}
       className="c2"
       disabled={false}
-      id="b"
+      id="k"
       onBlur={undefined}
       type="checkbox"
     />
     <label
       className="c3"
-      htmlFor="b"
+      htmlFor="k"
     />
   </div>
   <div
@@ -177,7 +177,7 @@ exports[`Form Checkbox 1`] = `
   >
     <label
       className="c5"
-      htmlFor="b"
+      htmlFor="k"
     >
       Detailed explanations
     </label>
@@ -545,13 +545,13 @@ exports[`Form Radio 1`] = `
       checked={undefined}
       className="c2"
       disabled={false}
-      id="c"
+      id="l"
       onBlur={undefined}
       type="radio"
     />
     <label
       className="c3"
-      htmlFor="c"
+      htmlFor="l"
     />
   </div>
   <div
@@ -562,7 +562,7 @@ exports[`Form Radio 1`] = `
   >
     <label
       className="c5"
-      htmlFor="c"
+      htmlFor="l"
     >
       Detailed explanations
     </label>
@@ -946,7 +946,7 @@ exports[`Form Toggle 1`] = `
       checked={false}
       className="c2"
       disabled={true}
-      id="d"
+      id="m"
       onBlur={undefined}
       type="checkbox"
       value="video"
@@ -954,16 +954,16 @@ exports[`Form Toggle 1`] = `
     <label
       className="c3"
       disabled={true}
-      htmlFor="d"
+      htmlFor="m"
-      id="d"
+      id="m"
       onBlur={undefined}
       value="video"
     />
     <label
       className="c4"
       disabled={true}
-      htmlFor="d"
+      htmlFor="m"
-      id="d"
+      id="m"
       onBlur={undefined}
       value="video"
     >

packages/ui-toolkit/src/form/copiable-field.js

@@ -0,0 +1,94 @@
+import React, { Component } from 'react';
+import copy from 'clipboard-copy';
+import styled from 'styled-components';
+import remcalc from 'remcalc';
+import is from 'styled-is';
+import { Col, Row } from 'joyent-react-styled-flexboxgrid';
+
+import {
+  FormLabel,
+  Input,
+  TooltipContainer,
+  TooltipTarget,
+  Tooltip
+} from '../';
+
+import { Clipboard } from '../icons';
+
+const InputIconWrapper = styled.div`
+  display: flex;
+  margin-bottom: ${remcalc(10)};
+  align-items: center;
+
+  ${is('noMargin')`
+    margin-bottom: ${remcalc(0)};
+  `};
+
+  input {
+    padding-right: ${remcalc(30)};
+  }
+
+  div {
+    position: relative;
+    left: ${remcalc(-26)};
+  }
+`;
+
+
+const ClipboardIconActionable = Clipboard.extend`
+  cursor: pointer;
+`;
+
+class CopyToClipboardTooltip extends Component {
+  constructor() {
+    super();
+
+    this.state = {
+      copied: false
+    };
+  }
+
+  handleClick = () => {
+    const { children: text } = this.props;
+
+    copy(text);
+
+    this.setState(
+      {
+        copied: true
+      },
+      () => {
+        setTimeout(() => {
+          this.setState({
+            copied: false
+          });
+        }, 4000);
+      }
+    );
+  };
+
+  render = () => (
+    <TooltipContainer hoverable>
+      <TooltipTarget>
+        <ClipboardIconActionable onClick={this.handleClick} />
+      </TooltipTarget>
+      <Tooltip placement="top" success={Boolean(this.state.copied)}>
+        {this.state.copied ? 'Copied To Clipboard' : 'Copy To Clipboard'}
+      </Tooltip>
+    </TooltipContainer>
+  );
+}
+
+const CopiableField = ({ md, label, text, ...rest }) => (
+  <Row>
+    <Col xs={12} md={md || 7}>
+      {label ? <FormLabel>{label}</FormLabel> : null}
+      <InputIconWrapper {...rest}>
+        <Input {...rest} monospace onBlur={null} fluid value={text} />
+        <CopyToClipboardTooltip>{text}</CopyToClipboardTooltip>
+      </InputIconWrapper>
+    </Col>
+  </Row>
+);
+
+export default CopiableField;

packages/ui-toolkit/src/form/index.js

@@ -9,4 +9,5 @@ export { default as FormMeta } from './meta';
 export { default as Radio, RadioList } from './radio';
 export { default as Select } from './select';
 export { default as Toggle } from './toggle';
+export { default as CopiableField } from './copiable-field';
 export { default as InputDropdown } from './input-dropdown';

packages/ui-toolkit/src/index.js

@@ -43,7 +43,8 @@ export {
   RadioList,
   Select,
   Toggle,
-  InputDropdown
+  InputDropdown,
+  CopiableField
 } from './form';
 
 export {

yarn.lock

@@ -2376,7 +2376,7 @@ cli-width@^2.0.0:
   version "2.2.0"
   resolved "https://registry.yarnpkg.com/cli-width/-/cli-width-2.2.0.tgz#ff19ede8a9a5e579324147b0c11f0fbcbabed639"
 
-clipboard-copy@^1.2.0, clipboard-copy@^1.2.1:
+clipboard-copy@^1.2.0, clipboard-copy@^1.2.1, clipboard-copy@^1.4.1:
   version "1.4.1"
   resolved "https://registry.yarnpkg.com/clipboard-copy/-/clipboard-copy-1.4.1.tgz#f59f47e0295e5e7e474361c5f87f5fd6023c5001"