feat(explore): add copy to clipboard to cell actions (#93907)

### Changes
Add a copy to clipboard option to the tables that use the cell action
dropdown. Option does not render if the value is empty/undefined.
Currently only enabled for tables in explore.

### Video


https://github.com/user-attachments/assets/b1b06b33-c566-40ff-9986-19c30fa7d9e2

Author: lzhao-sentry

static/app/views/discover/table/cellAction.tsx

@@ -1,6 +1,7 @@
 import {Component} from 'react';
 import styled from '@emotion/styled';
 
+import {addErrorMessage} from 'sentry/actionCreators/indicator';
 import {Button} from 'sentry/components/core/button';
 import type {MenuItemProps} from 'sentry/components/dropdownMenu';
 import {DropdownMenu} from 'sentry/components/dropdownMenu';
@@ -26,6 +27,20 @@ export enum Actions {
   RELEASE = 'release',
   DRILLDOWN = 'drilldown',
   EDIT_THRESHOLD = 'edit_threshold',
+  COPY_TO_CLIPBOARD = 'copy_to_clipboard',
+}
+
+export function copyToClipBoard(data: any) {
+  function stringifyValue(value: any): string {
+    if (!value) return '';
+    if (typeof value !== 'object') {
+      return value.toString();
+    }
+    return JSON.stringify(value) ?? value.toString();
+  }
+  navigator.clipboard.writeText(stringifyValue(data)).catch(_ => {
+    addErrorMessage('Error copying to clipboard');
+  });
 }
 
 export function updateQuery(
@@ -83,6 +98,9 @@ export function updateQuery(
     }
     // these actions do not modify the query in any way,
     // instead they have side effects
+    case Actions.COPY_TO_CLIPBOARD:
+      copyToClipBoard(value);
+      break;
     case Actions.RELEASE:
     case Actions.DRILLDOWN:
       break;
@@ -232,6 +250,8 @@ function makeCellActions({
     );
   }
 
+  if (value) addMenuItem(Actions.COPY_TO_CLIPBOARD, t('Copy to clipboard'));
+
   if (actions.length === 0) {
     return null;
   }

static/app/views/discover/table/tableView.tsx

@@ -66,7 +66,7 @@ import {makeReleasesPathname} from 'sentry/views/releases/utils/pathnames';
 
 import {QuickContextHoverWrapper} from './quickContext/quickContextWrapper';
 import {ContextType} from './quickContext/utils';
-import CellAction, {Actions, updateQuery} from './cellAction';
+import CellAction, {Actions, copyToClipBoard, updateQuery} from './cellAction';
 import ColumnEditModal, {modalCss} from './columnEditModal';
 import TableActions from './tableActions';
 import {TopResultsIndicator} from './topResultsIndicator';
@@ -623,6 +623,10 @@ function TableView(props: TableViewProps) {
 
           return;
         }
+        case Actions.COPY_TO_CLIPBOARD: {
+          copyToClipBoard(value);
+          break;
+        }
         default: {
           // Some custom perf metrics have units.
           // These custom perf metrics need to be adjusted to the correct value.

static/app/views/explore/components/table.tsx

@@ -53,6 +53,7 @@ export const ALLOWED_CELL_ACTIONS: Actions[] = [
   Actions.EXCLUDE,
   Actions.SHOW_GREATER_THAN,
   Actions.SHOW_LESS_THAN,
+  Actions.COPY_TO_CLIPBOARD,
 ];
 
 const MINIMUM_COLUMN_WIDTH = COL_WIDTH_MINIMUM;

static/app/views/explore/logs/tables/logsTableRow.tsx

@@ -15,7 +15,10 @@ import {FieldValueType} from 'sentry/utils/fields';
 import {useLocation} from 'sentry/utils/useLocation';
 import useOrganization from 'sentry/utils/useOrganization';
 import useProjectFromId from 'sentry/utils/useProjectFromId';
-import CellAction, {Actions} from 'sentry/views/discover/table/cellAction';
+import CellAction, {
+  Actions,
+  copyToClipBoard,
+} from 'sentry/views/discover/table/cellAction';
 import type {TableColumn} from 'sentry/views/discover/table/types';
 import {AttributesTree} from 'sentry/views/explore/components/traceItemAttributes/attributesTree';
 import {
@@ -74,7 +77,11 @@ type LogsRowProps = {
   onExpandHeight?: (logItemId: string, estimatedHeight: number) => void;
 };
 
-const ALLOWED_CELL_ACTIONS: Actions[] = [Actions.ADD, Actions.EXCLUDE];
+const ALLOWED_CELL_ACTIONS: Actions[] = [
+  Actions.ADD,
+  Actions.EXCLUDE,
+  Actions.COPY_TO_CLIPBOARD,
+];
 
 function isInsideButton(element: Element | null): boolean {
   let i = 10;
@@ -298,6 +305,9 @@ export const LogRowContent = memo(function LogRowContent({
                           negated: true,
                         });
                         break;
+                      case Actions.COPY_TO_CLIPBOARD:
+                        copyToClipBoard(cellValue);
+                        break;
                       default:
                         break;
                     }