feat(logs): Add "Copy message" and "Copy as JSON" to log row actions

Replace the single "Copy to clipboard" option in the log row ellipsis
dropdown with two distinct actions: "Copy message" (copies the cell
value) and "Copy as JSON" (copies the full log payload as formatted
JSON). The JSON option is always clickable and defers the copy until
data finishes loading if needed.

Also add a "Copy message" button alongside the existing "Copy as JSON"
button in the expanded row details view.

Refs LINEAR-LOGS-637
Co-Authored-By: Claude Sonnet 4 <noreply@anthropic.com>

Made-with: Cursor

Author: JoshuaKGoldberg

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

@@ -327,7 +327,7 @@ function getInternalLinkActionLabel(field: string): string {
  * Potentially temporary as design and product need more time to determine how logs table should trigger the dropdown.
  * Currently, the agreed default for every table should be bold hover. Logs is the only table to use the ellipsis trigger.
  */
-export enum ActionTriggerType {
+enum ActionTriggerType {
   ELLIPSIS = 'ellipsis',
   BOLD_HOVER = 'bold_hover',
 }
@@ -357,7 +357,7 @@ export function CellAction({
 
   if (triggerType === ActionTriggerType.BOLD_HOVER) {
     return (
-      <Container
+      <CellActionContainer
         data-test-id={cellActions === null ? undefined : 'cell-action-container'}
       >
         {cellActions?.length ? (
@@ -413,45 +413,45 @@ export function CellAction({
         ) : (
           children
         )}
-      </Container>
+      </CellActionContainer>
     );
   }
 
   return (
-    <Container data-test-id={cellActions === null ? undefined : 'cell-action-container'}>
+    <CellActionContainer
+      data-test-id={cellActions === null ? undefined : 'cell-action-container'}
+    >
       {children}
-      {cellActions?.length && (
-        <DropdownMenu
-          items={cellActions}
-          usePortal
-          size="sm"
-          offset={4}
-          position="bottom"
-          preventOverflowOptions={{padding: 4}}
-          flipOptions={{
-            fallbackPlacements: [
-              'top',
-              'right-start',
-              'right-end',
-              'left-start',
-              'left-end',
-            ],
-          }}
-          trigger={triggerProps => (
-            <ActionMenuTrigger
-              {...triggerProps}
-              aria-label={t('Actions')}
-              icon={<IconEllipsis size="xs" />}
-              size="zero"
-            />
-          )}
+      {cellActions?.length && <EllipsisActionMenu items={cellActions} />}
+    </CellActionContainer>
+  );
+}
+
+export function EllipsisActionMenu({items}: {items: MenuItemProps[]}) {
+  return (
+    <DropdownMenu
+      items={items}
+      usePortal
+      size="sm"
+      offset={4}
+      position="bottom"
+      preventOverflowOptions={{padding: 4}}
+      flipOptions={{
+        fallbackPlacements: ['top', 'right-start', 'right-end', 'left-start', 'left-end'],
+      }}
+      trigger={triggerProps => (
+        <CellActionMenuTrigger
+          {...triggerProps}
+          aria-label={t('Actions')}
+          icon={<IconEllipsis size="xs" />}
+          size="zero"
         />
       )}
-    </Container>
+    />
   );
 }
 
-const Container = styled('div')`
+export const CellActionContainer = styled('div')`
   position: relative;
   width: 100%;
   height: 100%;
@@ -460,7 +460,7 @@ const Container = styled('div')`
   justify-content: center;
 `;
 
-const ActionMenuTrigger = styled(Button)`
+const CellActionMenuTrigger = styled(Button)`
   position: absolute;
   top: 50%;
   right: -1px;
@@ -474,7 +474,7 @@ const ActionMenuTrigger = styled(Button)`
   transition: opacity 0.1s;
   &:focus-visible,
   &[aria-expanded='true'],
-  ${Container}:hover & {
+  ${CellActionContainer}:hover & {
     opacity: 1;
   }
 `;

static/app/views/explore/logs/styles.tsx

@@ -160,14 +160,6 @@ export const LogDetailTableActionsCell = styled(TableBodyCell)`
     padding: ${p => p.theme.space.xs} ${p => p.theme.space.xl};
   }
 `;
-export const LogDetailTableActionsButtonBar = styled('div')`
-  display: flex;
-  gap: ${p => p.theme.space.md};
-  & button {
-    font-weight: ${p => p.theme.font.weight.sans.regular};
-  }
-`;
-
 export const DetailsWrapper = styled('tr')`
   align-items: center;
   background-color: ${p => p.theme.colors.gray100};

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

@@ -522,9 +522,9 @@ describe('logsTableRow', () => {
     const actionsButton = screen.getAllByRole('button', {name: 'Actions'})[0]!;
     await userEvent.click(actionsButton);
 
-    // Click "Copy to clipboard" in the dropdown menu
+    // Click "Copy message" in the dropdown menu
     const copyItem = await screen.findByRole('menuitemradio', {
-      name: 'Copy to clipboard',
+      name: 'Copy message',
     });
     await userEvent.click(copyItem);