Polish/code snippets (#12302)

* Refactor CopyText component into CodeSnippet component * Update instances of code snippet * Force code snippet contents to wrap * Update changelog
influxdata · Mar 1, 2019 · 86f5753 · 86f5753
1 parent 290d06f
commit 86f5753
Show file tree

Hide file tree

Showing 9 changed files with 166 additions and 80 deletions.
diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -6,8 +6,10 @@
 
 ### Bug Fixes
 
+1. [12302](https://github.com/influxdata/influxdb/pull/12302): Prevent clipping of code snippets in Firefox
 ### UI Improvements
 
+1. [12302](https://github.com/influxdata/influxdb/pull/12302): Make code snippet copy functionality easier to use
 ## v2.0.0-alpha.4 [2019-02-21]
 
 ### Features

diff --git a/ui/src/dataLoaders/components/verifyStep/TelegrafInstructions.tsx b/ui/src/dataLoaders/components/verifyStep/TelegrafInstructions.tsx
@@ -6,7 +6,7 @@ import _ from 'lodash'
 import {ErrorHandling} from 'src/shared/decorators/errors'
 
 // Components
-import CopyText from 'src/shared/components/CopyText'
+import CodeSnippet from 'src/shared/components/CodeSnippet'
 
 // Types
 import {NotificationAction} from 'src/types'
@@ -45,13 +45,13 @@ class TelegrafInstructions extends PureComponent<Props> {
           copy the following command to your terminal window to set an
           environment variable with your token.
         </p>
-        <CopyText copyText={exportToken} notify={notify} />
+        <CodeSnippet copyText={exportToken} notify={notify} label="CLI" />
         <h6>3. Start Telegraf</h6>
         <p>
           Finally, you can run the following command the start Telegraf agent
           running on your machine.
         </p>
-        <CopyText copyText={configScript} notify={notify} />
+        <CodeSnippet copyText={configScript} notify={notify} label="CLI" />
       </div>
     )
   }

diff --git a/ui/src/dataLoaders/components/verifyStep/__snapshots__/TelegrafInstructions.test.tsx.snap b/ui/src/dataLoaders/components/verifyStep/__snapshots__/TelegrafInstructions.test.tsx.snap
@@ -25,8 +25,9 @@ exports[`TelegrafInstructions matches snapshot 1`] = `
   <p>
     Your API token is required for pushing data into InfluxDB. You can copy the following command to your terminal window to set an environment variable with your token.
   </p>
-  <CopyText
+  <CodeSnippet
     copyText="export INFLUX_TOKEN="
+    label="CLI"
     notify={[MockFunction]}
   />
   <h6>
@@ -35,8 +36,9 @@ exports[`TelegrafInstructions matches snapshot 1`] = `
   <p>
     Finally, you can run the following command the start Telegraf agent running on your machine.
   </p>
-  <CopyText
+  <CodeSnippet
     copyText="telegraf -config http://localhost:9999/api/v2/telegrafs/"
+    label="CLI"
     notify={[MockFunction]}
   />
 </div>

diff --git a/ui/src/me/components/account/ViewTokenOverlay.tsx b/ui/src/me/components/account/ViewTokenOverlay.tsx
@@ -7,7 +7,7 @@ import PermissionsWidget, {
   PermissionsWidgetMode,
   PermissionsWidgetSelection,
 } from 'src/shared/components/permissionsWidget/PermissionsWidget'
-import CopyText from 'src/shared/components/CopyText'
+import CodeSnippet from 'src/shared/components/CodeSnippet'
 
 // Types
 import {Authorization, Permission} from '@influxdata/influx'
@@ -43,7 +43,7 @@ export default class ViewTokenOverlay extends PureComponent<Props> {
       <OverlayContainer>
         <OverlayHeading title={description} onDismiss={this.handleDismiss} />
         <OverlayBody>
-          <CopyText copyText={this.props.auth.token} notify={onNotify} />
+          <CodeSnippet copyText={this.props.auth.token} notify={onNotify} />
           <PermissionsWidget
             mode={PermissionsWidgetMode.Read}
             heightPixels={500}

diff --git a/ui/src/me/components/account/__snapshots__/ViewTokenOverlay.test.tsx.snap b/ui/src/me/components/account/__snapshots__/ViewTokenOverlay.test.tsx.snap
@@ -66,15 +66,17 @@ exports[`Account rendering renders! 1`] = `
         <div
           className="overlay--body"
         >
-          <CopyText
+          <CodeSnippet
             copyText="ohEmfY80A9UsW_cicNXgOMIPIsUvU6K9YcpTfCPQE3NV8Y6nTsCwVghczATBPyQh96CoZkOW5DIKldya6Y84KA=="
+            label="Code Snippet"
           >
             <div
-              className="script-snippet--container"
+              className="code-snippet"
             >
               <FancyScrollbar
                 autoHeight={true}
                 autoHide={false}
+                className="code-snippet--scroll"
                 hideTracksWhenNotNeeded={true}
                 maxHeight={400}
                 setScrollTop={[Function]}
@@ -87,7 +89,7 @@ exports[`Account rendering renders! 1`] = `
                   autoHide={false}
                   autoHideDuration={250}
                   autoHideTimeout={1000}
-                  className="fancy-scroll--container"
+                  className="fancy-scroll--container code-snippet--scroll"
                   hideTracksWhenNotNeeded={true}
                   onScroll={[Function]}
                   style={Object {}}
@@ -98,7 +100,7 @@ exports[`Account rendering renders! 1`] = `
                   universal={false}
                 >
                   <div
-                    className="fancy-scroll--container"
+                    className="fancy-scroll--container code-snippet--scroll"
                     style={
                       Object {
                         "height": "auto",
@@ -129,9 +131,15 @@ exports[`Account rendering renders! 1`] = `
                         }
                       }
                     >
-                      <p>
-                        ohEmfY80A9UsW_cicNXgOMIPIsUvU6K9YcpTfCPQE3NV8Y6nTsCwVghczATBPyQh96CoZkOW5DIKldya6Y84KA==
-                      </p>
+                      <div
+                        className="code-snippet--text"
+                      >
+                        <pre>
+                          <code>
+                            ohEmfY80A9UsW_cicNXgOMIPIsUvU6K9YcpTfCPQE3NV8Y6nTsCwVghczATBPyQh96CoZkOW5DIKldya6Y84KA==
+                          </code>
+                        </pre>
+                      </div>
                     </div>
                     <div
                       className="fancy-scroll--track-h"
@@ -192,38 +200,46 @@ exports[`Account rendering renders! 1`] = `
                   </div>
                 </Scrollbars>
               </FancyScrollbar>
-              <CopyToClipboard
-                onCopy={[Function]}
-                text="ohEmfY80A9UsW_cicNXgOMIPIsUvU6K9YcpTfCPQE3NV8Y6nTsCwVghczATBPyQh96CoZkOW5DIKldya6Y84KA=="
+              <div
+                className="code-snippet--footer"
               >
-                <t
-                  active={false}
-                  color="default"
-                  customClass="copy-button"
-                  onClick={[Function]}
-                  shape="none"
-                  size="sm"
-                  status="default"
-                  testID="button"
-                  text="Copy"
-                  titleText="copy to clipboard"
-                  type="button"
+                <CopyToClipboard
+                  onCopy={[Function]}
+                  text="ohEmfY80A9UsW_cicNXgOMIPIsUvU6K9YcpTfCPQE3NV8Y6nTsCwVghczATBPyQh96CoZkOW5DIKldya6Y84KA=="
                 >
-                  <button
-                    className="button button-sm button-default copy-button"
-                    data-testid="button"
-                    disabled={false}
+                  <t
+                    active={false}
+                    color="secondary"
                     onClick={[Function]}
-                    tabIndex={0}
-                    title="copy to clipboard"
+                    shape="none"
+                    size="xs"
+                    status="default"
+                    testID="button"
+                    text="Copy to Clipboard"
+                    titleText="Copy to Clipboard"
                     type="button"
                   >
-                    Copy
-                  </button>
-                </t>
-              </CopyToClipboard>
+                    <button
+                      className="button button-xs button-secondary"
+                      data-testid="button"
+                      disabled={false}
+                      onClick={[Function]}
+                      tabIndex={0}
+                      title="Copy to Clipboard"
+                      type="button"
+                    >
+                      Copy to Clipboard
+                    </button>
+                  </t>
+                </CopyToClipboard>
+                <label
+                  className="code-snippet--label"
+                >
+                  Code Snippet
+                </label>
+              </div>
             </div>
-          </CopyText>
+          </CodeSnippet>
           <PermissionsWidget
             heightPixels={500}
             mode="read"

diff --git a/ui/src/shared/components/CodeSnippet.scss b/ui/src/shared/components/CodeSnippet.scss
@@ -0,0 +1,65 @@
+@import 'src/style/modules';
+/*
+  Code Snippet Widget
+  ------------------------------------------------------------------------------
+*/
+
+.code-snippet {
+  margin: $ix-marg-a 0;
+  border-radius: $ix-radius;
+  overflow: hidden;
+}
+
+.code-snippet--scroll {
+  min-height: 26px !important;
+  background-color: $g4-onyx;
+}
+
+.code-snippet--text {
+  font-size: 13px;
+  line-height: 20px;
+  color: $c-potassium;
+  font-weight: 600;
+  font-family: $code-font;
+  padding: $ix-marg-a $ix-marg-c;
+
+  pre {
+    display: inline-block;
+    white-space: pre-wrap;
+  }
+
+  pre,
+  code {
+    word-wrap: break-word;
+    word-break: break-all;
+  }
+}
+
+.code-snippet--footer {
+  background-color: rgba($g4-onyx, 0.5);
+  display: flex;
+  border-top: $ix-border solid $g5-pepper;
+  align-items: center;
+  justify-content: space-between;
+  padding: $ix-marg-b $ix-marg-c;
+}
+
+.code-snippet--label {
+  font-size: $ix-text-base;
+  color: $g11-sidewalk;
+  margin: 0;
+}
+
+.copy-button {
+  position: absolute;
+  right: $ix-marg-b;
+  top: calc(50% - 15px);
+  opacity: 0;
+  transition: opacity 0.2s ease-in-out;
+}
+
+.script-snippet--container:hover {
+  .copy-button {
+    opacity: 1;
+  }
+}
diff --git a/ui/src/shared/components/CopyText.tsx → ui/src/shared/components/CodeSnippet.tsx b/ui/src/shared/components/CopyText.tsx → ui/src/shared/components/CodeSnippet.tsx
@@ -17,30 +17,54 @@ import {
   copyToClipboardFailed,
 } from 'src/shared/copy/notifications'
 
-export interface Props {
+// Styles
+import 'src/shared/components/CodeSnippet.scss'
+
+export interface PassedProps {
   copyText: string
   notify: NotificationAction
 }
 
+interface DefaultProps {
+  label?: string
+}
+
+type Props = PassedProps & DefaultProps
+
 @ErrorHandling
-class CopyText extends PureComponent<Props> {
+class CodeSnippet extends PureComponent<Props> {
+  public static defaultProps: DefaultProps = {
+    label: 'Code Snippet',
+  }
+
   public render() {
-    const {copyText} = this.props
+    const {copyText, label} = this.props
     return (
-      <div className="script-snippet--container">
-        <FancyScrollbar autoHide={false} autoHeight={true} maxHeight={400}>
-          <p>{copyText}</p>
+      <div className="code-snippet">
+        <FancyScrollbar
+          autoHide={false}
+          autoHeight={true}
+          maxHeight={400}
+          className="code-snippet--scroll"
+        >
+          <div className="code-snippet--text">
+            <pre>
+              <code>{copyText}</code>
+            </pre>
+          </div>
         </FancyScrollbar>
-        <CopyToClipboard text={copyText} onCopy={this.handleCopyAttempt}>
-          <Button
-            customClass="copy-button"
-            size={ComponentSize.Small}
-            color={ComponentColor.Default}
-            titleText="copy to clipboard"
-            text="Copy"
-            onClick={this.handleClickCopy}
-          />
-        </CopyToClipboard>
+        <div className="code-snippet--footer">
+          <CopyToClipboard text={copyText} onCopy={this.handleCopyAttempt}>
+            <Button
+              size={ComponentSize.ExtraSmall}
+              color={ComponentColor.Secondary}
+              titleText="Copy to Clipboard"
+              text="Copy to Clipboard"
+              onClick={this.handleClickCopy}
+            />
+          </CopyToClipboard>
+          <label className="code-snippet--label">{label}</label>
+        </div>
       </div>
     )
   }
@@ -67,4 +91,4 @@ class CopyText extends PureComponent<Props> {
   }
 }
 
-export default CopyText
+export default CodeSnippet
diff --git a/ui/src/shared/components/CopyText.scss b/ui/src/shared/components/CopyText.scss
diff --git a/ui/src/style/chronograf.scss b/ui/src/style/chronograf.scss
@@ -31,7 +31,6 @@
 @import 'src/shared/components/custom_singular_time/CustomSingularTime';
 @import 'src/onboarding/OnboardingWizard.scss';
 @import 'src/shared/components/columns_options/ColumnsOptions';
-@import 'src/shared/components/CopyText';
 
 // External
 @import '../../node_modules/@influxdata/react-custom-scrollbars/dist/styles.css';