ref(logs): Deduplicate cell action components and use design system

- Export CellActionContainer and CellActionMenuTrigger from cellAction.tsx
  instead of duplicating them in logsTableRow.tsx
- Extract EllipsisActionMenu as a shared presentational component for the
  ellipsis dropdown pattern used by both CellAction and LogCellAction
- Replace inline icon children with Button's built-in icon prop (4 instances)
- Replace custom LogDetailTableActionsButtonBar with Flex gap="xl"

Co-Authored-By: Claude Sonnet 4 <noreply@anthropic.com>
Made-with: Cursor

Author: JoshuaKGoldberg

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

@@ -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)`
+export 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/tables/logsTableRow.tsx

@@ -10,25 +10,16 @@ import React, {
   useState,
 } from 'react';
 import {useTheme} from '@emotion/react';
-import styled from '@emotion/styled';
 import classNames from 'classnames';
 import omit from 'lodash/omit';
 
 import {Button} from '@sentry/scraps/button';
 import {Flex} from '@sentry/scraps/layout';
 
-import {DropdownMenu} from 'sentry/components/dropdownMenu';
 import {EmptyStreamWrapper} from 'sentry/components/emptyStateWarning';
 import ProjectBadge from 'sentry/components/idBadge/projectBadge';
 import {LoadingIndicator} from 'sentry/components/loadingIndicator';
-import {
-  IconAdd,
-  IconCopy,
-  IconEllipsis,
-  IconJson,
-  IconSubtract,
-  IconWarning,
-} from 'sentry/icons';
+import {IconAdd, IconCopy, IconJson, IconSubtract, IconWarning} from 'sentry/icons';
 import {IconChevron} from 'sentry/icons/iconChevron';
 import {t} from 'sentry/locale';
 import {defined} from 'sentry/utils';
@@ -44,6 +35,10 @@ import {useLocation} from 'sentry/utils/useLocation';
 import {useOrganization} from 'sentry/utils/useOrganization';
 import {useProjectFromId} from 'sentry/utils/useProjectFromId';
 import {useProjects} from 'sentry/utils/useProjects';
+import {
+  CellActionContainer,
+  EllipsisActionMenu,
+} from 'sentry/views/discover/table/cellAction';
 import {AttributesTree} from 'sentry/views/explore/components/traceItemAttributes/attributesTree';
 import {
   useLogsAutoRefreshEnabled,
@@ -74,7 +69,6 @@ import {
   DetailsWrapper,
   getLogColors,
   LogAttributeTreeWrapper,
-  LogDetailTableActionsButtonBar,
   LogDetailTableActionsCell,
   LogDetailTableBodyCell,
   LogFirstCellContent,
@@ -578,26 +572,26 @@ function LogRowDetails({
 }
 
 function LogRowDetailsFilterActions({tableDataRow}: {tableDataRow: LogTableRowItem}) {
-  const theme = useTheme();
   const addSearchFilter = useAddSearchFilter();
   return (
-    <LogDetailTableActionsButtonBar>
+    <Flex gap="xl">
       <Button
         priority="link"
         size="sm"
+        icon={<IconAdd />}
         onClick={() => {
           addSearchFilter({
             key: OurLogKnownFieldKey.MESSAGE,
             value: tableDataRow[OurLogKnownFieldKey.MESSAGE],
           });
         }}
       >
-        <IconAdd size="md" style={{paddingRight: theme.space.xs}} />
         {t('Add to filter')}
       </Button>
       <Button
         priority="link"
         size="sm"
+        icon={<IconSubtract />}
         onClick={() => {
           addSearchFilter({
             key: OurLogKnownFieldKey.MESSAGE,
@@ -606,10 +600,9 @@ function LogRowDetailsFilterActions({tableDataRow}: {tableDataRow: LogTableRowIt
           });
         }}
       >
-        <IconSubtract size="md" style={{paddingRight: theme.space.xs}} />
         {t('Exclude from filter')}
       </Button>
-    </LogDetailTableActionsButtonBar>
+    </Flex>
   );
 }
 
@@ -620,7 +613,6 @@ function LogRowDetailsActions({
   fullLogDataResult: UseApiQueryResult<TraceItemDetailsResponse, RequestError>;
   tableDataRow: LogTableRowItem;
 }) {
-  const theme = useTheme();
   const {data, isPending, isError} = fullLogDataResult;
   const isFrozen = useLogsFrozenIsFrozen();
   const organization = useOrganization();
@@ -666,21 +658,26 @@ function LogRowDetailsActions({
       ) : (
         <span />
       )}
-      <LogDetailTableActionsButtonBar>
-        <Button priority="link" size="sm" onClick={copyText} disabled={!message}>
-          <IconCopy size="md" style={{paddingRight: theme.space.sm}} />
+      <Flex gap="xl">
+        <Button
+          priority="link"
+          size="sm"
+          icon={<IconCopy />}
+          onClick={copyText}
+          disabled={!message}
+        >
           {t('Copy message')}
         </Button>
         <Button
           priority="link"
           size="sm"
+          icon={<IconJson />}
           onClick={copyAsJson}
           disabled={isPending || isError || !json}
         >
-          <IconJson size="md" style={{paddingRight: theme.space.xs}} />
           {t('Copy as JSON')}
         </Button>
-      </LogDetailTableActionsButtonBar>
+      </Flex>
     </Fragment>
   );
 }
@@ -784,58 +781,7 @@ function LogCellAction({
   return (
     <CellActionContainer>
       {children}
-      <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"
-          />
-        )}
-      />
+      <EllipsisActionMenu items={items} />
     </CellActionContainer>
   );
 }
-
-const CellActionContainer = styled('div')`
-  position: relative;
-  width: 100%;
-  height: 100%;
-  display: flex;
-  flex-direction: column;
-  justify-content: center;
-`;
-
-const CellActionMenuTrigger = styled(Button)`
-  position: absolute;
-  top: 50%;
-  right: -1px;
-  transform: translateY(-50%);
-  padding: ${p => p.theme.space.xs};
-  display: flex;
-  align-items: center;
-  opacity: 0;
-  transition: opacity 0.1s;
-
-  &:focus-visible,
-  &[aria-expanded='true'],
-  ${CellActionContainer}:hover & {
-    opacity: 1;
-  }
-`;