Polish/code snippets (#12302)

* Refactor CopyText component into CodeSnippet component * Update instances of code snippet * Force code snippet contents to wrap * Update changelog
2019-03-01 12:33:37 -08:00 · 2019-03-01 12:33:37 -08:00 · 86f5753b55
parent 290d06f98f
commit 86f5753b55
9 changed files with 166 additions and 80 deletions
--- 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
--- 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>
    )
  }
--- 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>
--- 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}
--- 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"
--- 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;
+  }
+}
--- a/ui/src/shared/components/CodeSnippet.tsx
+++ b/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
--- a/ui/src/shared/components/CopyText.scss
+++ b/ui/src/shared/components/CopyText.scss
@ -1,22 +0,0 @@
-.script-snippet--container {
-  position: relative;
-  margin: $ix-marg-a 0;
-  padding: $ix-marg-a $ix-marg-c;
-  font-family: 'RobotoMono', monospace;
-  background-color: $g4-onyx;
-  border-radius: $ix-radius;
-}
-
-.copy-button {
-  position: absolute;
-  right: $ix-marg-b;
-  top: calc(50% - 15px);
-  opacity: 0;
-  transition: opacity .2s ease-in-out;
-}
-
-.script-snippet--container:hover {
-  .copy-button {
-    opacity: 1;
-  }
-}
--- 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';