feat(dashboards): add copy query item to cell context menu (#5875)

Author: hoorayimhelping

src/shared/components/CopyToClipboard.tsx

@@ -1,7 +1,7 @@
 // Libraries
 import React, {FC, ChangeEvent} from 'react'
 
-const copy = async (text: string): Promise<boolean> => {
+export const copy = async (text: string): Promise<boolean> => {
   let result: boolean
   try {
     if (navigator.clipboard) {

src/shared/components/cells/CellContext.tsx

@@ -7,6 +7,11 @@ import classnames from 'classnames'
 
 // Utils
 import {event} from 'src/cloud/utils/reporting'
+import {copy} from 'src/shared/components/CopyToClipboard'
+import {
+  copyQuerySuccess,
+  copyQueryFailure,
+} from 'src/shared/copy/notifications/categories/dashboard'
 
 // Components
 import {
@@ -22,6 +27,7 @@ import CellContextDangerItem from 'src/shared/components/cells/CellContextDanger
 // Actions
 import {deleteCellAndView, createCellWithView} from 'src/cells/actions/thunks'
 import {showOverlay, dismissOverlay} from 'src/overlays/actions/overlays'
+import {notify} from 'src/shared/actions/notifications'
 
 // Types
 import {Cell, View} from 'src/types'
@@ -76,6 +82,20 @@ const CellContext: FC<Props> = ({
     event('editCell button Click')
   }
 
+  const handleCopyQuery = async () => {
+    let result = false
+    // this 'in' check satisfies TypeScript saying `property queries does not exist in ViewProperties` (which is a lie)
+    if ('queries' in view.properties) {
+      result = await copy(view.properties.queries?.[0]?.text)
+    }
+
+    if (!result) {
+      dispatch(notify(copyQueryFailure(cell.name)))
+      return
+    }
+    dispatch(notify(copyQuerySuccess(cell.name)))
+  }
+
   const popoverContents = (onHide): JSX.Element => {
     if (view.properties.type === 'markdown') {
       return (
@@ -185,6 +205,15 @@ const CellContext: FC<Props> = ({
           onHide={onHide}
           testID="cell-context--copy"
         />
+        {view.properties?.queries?.length && (
+          <CellContextItem
+            label="Copy Query"
+            onClick={handleCopyQuery}
+            icon={IconFont.Clipboard_New}
+            onHide={onHide}
+            testID="cell-context--copy-query"
+          />
+        )}
       </div>
     )
   }

src/shared/copy/notifications/categories/dashboard.ts

@@ -117,3 +117,26 @@ export const removedDashboardLabelFailed = (): Notification => ({
   ...defaultErrorNotification,
   message: 'Failed to remove label from dashboard',
 })
+
+export const copyQuerySuccess = (cellName?: string): Notification => {
+  let fromCellName = ''
+  if (cellName) {
+    fromCellName = ` from '${cellName}'`
+  }
+  return {
+    ...defaultSuccessNotification,
+    icon: IconFont.DashH,
+    message: `The query${fromCellName} was copied to your clipboard.`,
+  }
+}
+
+export const copyQueryFailure = (cellName: string = ''): Notification => {
+  let fromCellName = '.'
+  if (cellName) {
+    fromCellName = ` from '${cellName}.'`
+  }
+  return {
+    ...defaultErrorNotification,
+    message: `There was an error copying the query${fromCellName}. Please try again.`,
+  }
+}

src/types/dashboards.ts

@@ -36,6 +36,7 @@ export type BuilderConfigAggregateWindow = BuilderConfig['aggregateWindow']
 export interface Cell extends GenCell {
   dashboardID: string
   status: RemoteDataState
+  name?: string
   minH?: number
   minW?: number
   maxW?: number