Send notification when copying to clipbaord

ui/src/flux/components/DatabaseList.tsx

@@ -1,5 +1,6 @@
 import React, {PureComponent} from 'react'
 
+import {NotificationContext} from 'src/flux/containers/CheckServices'
 import DatabaseListItem from 'src/flux/components/DatabaseListItem'
 
 import {showDatabases} from 'src/shared/apis/metaQuery'
@@ -49,7 +50,13 @@ class DatabaseList extends PureComponent<Props, State> {
     const {service} = this.props
 
     return databases.map(db => {
-      return <DatabaseListItem db={db} key={db} service={service} />
+      return (
+        <NotificationContext.Consumer key={db}>
+          {({notify}) => (
+            <DatabaseListItem db={db} service={service} notify={notify} />
+          )}
+        </NotificationContext.Consumer>
+      )
     })
   }
 }

ui/src/flux/components/DatabaseListItem.tsx

@@ -1,23 +1,27 @@
 import React, {PureComponent, ChangeEvent, MouseEvent} from 'react'
 import classnames from 'classnames'
-
 import {CopyToClipboard} from 'react-copy-to-clipboard'
+
 import {tagKeys as fetchTagKeys} from 'src/shared/apis/flux/metaQueries'
 import parseValuesColumn from 'src/shared/parsing/flux/values'
 import TagList from 'src/flux/components/TagList'
-import {Service} from 'src/types'
+import {
+  notifyCopyToClipboardSuccess,
+  notifyCopyToClipboardFailed,
+} from 'src/shared/copy/notifications'
+
+import {Service, Notification} from 'src/types'
 
 interface Props {
   db: string
   service: Service
+  notify: (message: Notification) => void
 }
 
 interface State {
   isOpen: boolean
   tags: string[]
   searchTerm: string
-  isCopied: boolean
-  copiedText: string
 }
 
 class DatabaseListItem extends PureComponent<Props, State> {
@@ -27,8 +31,6 @@ class DatabaseListItem extends PureComponent<Props, State> {
       isOpen: false,
       tags: [],
       searchTerm: '',
-      isCopied: false,
-      copiedText: '',
     }
   }
 
@@ -106,8 +108,13 @@ class DatabaseListItem extends PureComponent<Props, State> {
     e.stopPropagation()
   }
 
-  private handleCopy = (copiedText: string): void => {
-    this.setState({isCopied: true, copiedText})
+  private handleCopy = (copiedText: string, isSuccessful: boolean): void => {
+    const {notify} = this.props
+    if (isSuccessful) {
+      notify(notifyCopyToClipboardSuccess(copiedText))
+    } else {
+      notify(notifyCopyToClipboardFailed(copiedText))
+    }
   }
 
   private onSearch = (e: ChangeEvent<HTMLInputElement>) => {

ui/src/flux/containers/CheckServices.tsx

@@ -15,6 +15,8 @@ import {
 import * as a from 'src/shared/actions/overlayTechnology'
 import * as b from 'src/shared/actions/services'
 
+export const NotificationContext = React.createContext()
+
 const actions = {...a, ...b}
 
 interface Props {
@@ -54,14 +56,16 @@ export class CheckServices extends PureComponent<Props & WithRouterProps> {
     }
 
     return (
-      <FluxPage
-        source={this.source}
-        services={services}
-        links={links}
-        script={script}
-        notify={notify}
-        updateScript={updateScript}
-      />
+      <NotificationContext.Provider value={{notify}}>
+        <FluxPage
+          source={this.source}
+          services={services}
+          links={links}
+          script={script}
+          notify={notify}
+          updateScript={updateScript}
+        />
+      </NotificationContext.Provider>
     )
   }
 

ui/src/shared/copy/notifications.ts

@@ -639,6 +639,17 @@ export const analyzeSuccess = {
   message: 'No errors found. Happy Happy Joy Joy!',
 }
 
+export const notifyCopyToClipboardSuccess = text => ({
+  ...defaultSuccessNotification,
+  icon: 'dash-h',
+  message: `'${text}' has been copied to clipboard.`,
+})
+
+export const notifyCopyToClipboardFailed = text => ({
+  ...defaultErrorNotification,
+  message: `'${text}' was not copied to clipboard.`,
+})
+
 // Service notifications
 export const couldNotGetServices = {
   ...defaultErrorNotification,