Add copy to clipboard to tag list items

ui/src/flux/components/DatabaseListItem.tsx

@@ -64,7 +64,7 @@ class DatabaseListItem extends PureComponent<Props, State> {
             </div>
           </CopyToClipboard>
         </div>
-        {this.filter}
+        {this.filterAndTagList}
       </div>
     )
   }
@@ -81,7 +81,7 @@ class DatabaseListItem extends PureComponent<Props, State> {
     })
   }
 
-  private get filter(): JSX.Element {
+  private get filterAndTagList(): JSX.Element {
     const {db, service} = this.props
     const {isOpen, searchTerm} = this.state
 

ui/src/flux/components/TagList.tsx

@@ -1,7 +1,9 @@
 import React, {PureComponent, MouseEvent} from 'react'
 
-import {SchemaFilter, Service} from 'src/types'
 import TagListItem from 'src/flux/components/TagListItem'
+import {NotificationContext} from 'src/flux/containers/CheckServices'
+
+import {SchemaFilter, Service} from 'src/types'
 
 interface Props {
   db: string
@@ -28,13 +30,17 @@ export default class TagList extends PureComponent<Props, State> {
       return (
         <>
           {tags.map(t => (
-            <TagListItem
-              key={t}
-              db={db}
-              tagKey={t}
-              service={service}
-              filter={filter}
-            />
+            <NotificationContext.Consumer key={t}>
+              {({notify}) => (
+                <TagListItem
+                  db={db}
+                  tagKey={t}
+                  service={service}
+                  filter={filter}
+                  notify={notify}
+                />
+              )}
+            </NotificationContext.Consumer>
           ))}
         </>
       )

ui/src/flux/components/TagListItem.tsx

@@ -6,6 +6,7 @@ import React, {
 } from 'react'
 
 import _ from 'lodash'
+import {CopyToClipboard} from 'react-copy-to-clipboard'
 
 import {Service, SchemaFilter, RemoteDataState} from 'src/types'
 import {tagValues as fetchTagValues} from 'src/shared/apis/flux/metaQueries'
@@ -14,12 +15,19 @@ import parseValuesColumn from 'src/shared/parsing/flux/values'
 import TagValueList from 'src/flux/components/TagValueList'
 import LoaderSkeleton from 'src/flux/components/LoaderSkeleton'
 import LoadingSpinner from 'src/flux/components/LoadingSpinner'
+import {
+  notifyCopyToClipboardSuccess,
+  notifyCopyToClipboardFailed,
+} from 'src/shared/copy/notifications'
+
+import {Notification} from 'src/types'
 
 interface Props {
   tagKey: string
   db: string
   service: Service
   filter: SchemaFilter[]
+  notify: (message: Notification) => void
 }
 
 interface State {
@@ -61,9 +69,17 @@ export default class TagListItem extends PureComponent<Props, State> {
     return (
       <div className={this.className}>
         <div className="flux-schema-item" onClick={this.handleClick}>
-          <div className="flux-schema-item-toggle" />
-          {tagKey}
-          <span className="flux-schema-type">Tag Key</span>
+          <div className="flex-schema-item-group">
+            <div className="flux-schema-item-toggle" />
+            {tagKey}
+            <span className="flux-schema-type">Tag Key</span>{' '}
+          </div>
+          <CopyToClipboard text={tagKey} onCopy={this.handleCopy}>
+            <div className="flux-schema-copy" onClick={this.handleCopyClick}>
+              <span className="icon duplicate" title="copy to clipboard" />
+              Copy
+            </div>
+          </CopyToClipboard>
         </div>
         {this.state.isOpen && (
           <>
@@ -220,6 +236,19 @@ export default class TagListItem extends PureComponent<Props, State> {
     )
   }
 
+  private handleCopyClick = e => {
+    e.stopPropagation()
+  }
+
+  private handleCopy = (copiedText: string, isSuccessful: boolean): void => {
+    const {notify} = this.props
+    if (isSuccessful) {
+      notify(notifyCopyToClipboardSuccess(copiedText))
+    } else {
+      notify(notifyCopyToClipboardFailed(copiedText))
+    }
+  }
+
   private async getCount() {
     const {service, db, filter, tagKey} = this.props
     const {limit, searchTerm} = this.state