Add notification when text is copied to clipboard

ui/src/onboarding/components/verifyStep/DataStreaming.tsx

@@ -16,7 +16,11 @@ import {StepStatus} from 'src/clockface/constants/wizard'
 // Decorator
 import {ErrorHandling} from 'src/shared/decorators/errors'
 
+// Types
+import {NotificationAction} from 'src/types'
+
 interface Props {
+  notify: NotificationAction
   bucket: string
   org: string
   configID: string
@@ -37,6 +41,7 @@ class DataStreaming extends PureComponent<Props> {
       onSetStepStatus,
       bucket,
       stepIndex,
+      notify,
     } = this.props
 
     return (
@@ -47,7 +52,11 @@ class DataStreaming extends PureComponent<Props> {
           onSaveTelegrafConfig={onSaveTelegrafConfig}
         >
           {() => (
-            <TelegrafInstructions authToken={authToken} configID={configID} />
+            <TelegrafInstructions
+              notify={notify}
+              authToken={authToken}
+              configID={configID}
+            />
           )}
         </CreateOrUpdateConfig>
 

ui/src/onboarding/components/verifyStep/TelegrafInstructions.test.tsx

@@ -7,6 +7,7 @@ let wrapper
 
 const setup = (override = {}) => {
   const props = {
+    notify: jest.fn(),
     authToken: '',
     configID: '',
     ...override,

ui/src/onboarding/components/verifyStep/TelegrafInstructions.tsx

@@ -9,7 +9,15 @@ import {ErrorHandling} from 'src/shared/decorators/errors'
 // Components
 import {Button, ComponentSize, ComponentColor} from 'src/clockface'
 
+// Types
+import {NotificationAction} from 'src/types'
+import {
+  copyToClipboardSuccess,
+  copyToClipboardFailed,
+} from 'src/shared/copy/notifications'
+
 export interface Props {
+  notify: NotificationAction
   authToken: string
   configID: string
 }
@@ -41,7 +49,7 @@ class TelegrafInstructions extends PureComponent<Props> {
           </p>
           <p className="wizard-step--body-snippet">
             {exportToken}
-            <CopyToClipboard text={exportToken}>
+            <CopyToClipboard text={exportToken} onCopy={this.handleCopyAttempt}>
               <Button
                 customClass="wizard-step--body-copybutton"
                 size={ComponentSize.Small}
@@ -55,7 +63,10 @@ class TelegrafInstructions extends PureComponent<Props> {
           <p>Run the following command.</p>
           <p className="wizard-step--body-snippet">
             {configScript}
-            <CopyToClipboard text={configScript}>
+            <CopyToClipboard
+              text={configScript}
+              onCopy={this.handleCopyAttempt}
+            >
               <Button
                 customClass="wizard-step--body-copybutton"
                 size={ComponentSize.Small}
@@ -70,10 +81,27 @@ class TelegrafInstructions extends PureComponent<Props> {
       </>
     )
   }
-  private handleClickCopy(e: MouseEvent<HTMLButtonElement>) {
+
+  private handleClickCopy = (e: MouseEvent<HTMLButtonElement>) => {
     e.stopPropagation()
     e.preventDefault()
   }
+
+  private handleCopyAttempt = (
+    copiedText: string,
+    isSuccessful: boolean
+  ): void => {
+    const {notify} = this.props
+    const text = copiedText.slice(0, 30).trimRight()
+    const truncatedText = `${text}...`
+    const title = 'Script '
+
+    if (isSuccessful) {
+      notify(copyToClipboardSuccess(truncatedText, title))
+    } else {
+      notify(copyToClipboardFailed(truncatedText, title))
+    }
+  }
 }
 
 export default TelegrafInstructions

ui/src/onboarding/components/verifyStep/VerifyDataStep.tsx

@@ -18,8 +18,10 @@ import {
 import {OnboardingStepProps} from 'src/onboarding/containers/OnboardingWizard'
 import {DataLoaderType, TelegrafPlugin} from 'src/types/v2/dataLoaders'
 import {Form} from 'src/clockface'
+import {NotificationAction} from 'src/types'
 
 export interface Props extends OnboardingStepProps {
+  notify: NotificationAction
   type: DataLoaderType
   authToken: string
   telegrafConfigID: string
@@ -52,12 +54,14 @@ class VerifyDataStep extends PureComponent<Props> {
       onIncrementCurrentStepIndex,
       onSetStepStatus,
       stepIndex,
+      notify,
     } = this.props
 
     return (
       <Form onSubmit={onIncrementCurrentStepIndex}>
         <div className="onboarding-step">
           <VerifyDataSwitcher
+            notify={notify}
             type={type}
             telegrafConfigID={telegrafConfigID}
             authToken={authToken}

ui/src/onboarding/components/verifyStep/VerifyDataSwitcher.test.tsx

@@ -11,6 +11,7 @@ import {DataLoaderType} from 'src/types/v2/dataLoaders'
 
 const setup = (override = {}) => {
   const props = {
+    notify: jest.fn(),
     type: DataLoaderType.Empty,
     org: '',
     username: '',

ui/src/onboarding/components/verifyStep/VerifyDataSwitcher.tsx

@@ -13,8 +13,10 @@ import {StepStatus} from 'src/clockface/constants/wizard'
 
 // Types
 import {DataLoaderType} from 'src/types/v2/dataLoaders'
+import {NotificationAction} from 'src/types'
 
 export interface Props {
+  notify: NotificationAction
   type: DataLoaderType
   org: string
   bucket: string
@@ -37,12 +39,14 @@ class VerifyDataSwitcher extends PureComponent<Props> {
       authToken,
       telegrafConfigID,
       onSaveTelegrafConfig,
+      notify,
     } = this.props
 
     switch (type) {
       case DataLoaderType.Streaming:
         return (
           <DataStreaming
+            notify={notify}
             org={org}
             configID={telegrafConfigID}
             authToken={authToken}

ui/src/onboarding/components/verifyStep/__snapshots__/TelegrafInstructions.test.tsx.snap

@@ -33,6 +33,7 @@ exports[`TelegrafInstructions matches snapshot 1`] = `
     >
       export INFLUX_TOKEN=
       <CopyToClipboard
+        onCopy={[Function]}
         text="export INFLUX_TOKEN="
       >
         <Button
@@ -57,6 +58,7 @@ exports[`TelegrafInstructions matches snapshot 1`] = `
     >
       telegraf -config http://localhost:9999/api/v2/telegrafs/
       <CopyToClipboard
+        onCopy={[Function]}
         text="telegraf -config http://localhost:9999/api/v2/telegrafs/"
       >
         <Button