feat(explore): Adding cell actions to explore tables

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

@@ -16,6 +16,7 @@ import {
   HeaderButtonContainer,
   HeaderTitle,
 } from 'sentry/components/gridEditable/styles';
+import {Actions} from 'sentry/views/discover/table/cellAction';
 
 interface TableProps extends React.ComponentProps<typeof _TableWrapper> {}
 
@@ -39,6 +40,13 @@ export function TableStatus({children}: TableStatusProps) {
   );
 }
 
+export const ALLOWED_CELL_ACTIONS: Actions[] = [
+  Actions.ADD,
+  Actions.EXCLUDE,
+  Actions.SHOW_GREATER_THAN,
+  Actions.SHOW_LESS_THAN,
+];
+
 const MINIMUM_COLUMN_WIDTH = COL_WIDTH_MINIMUM;
 
 type Item = {

static/app/views/explore/tables/aggregatesTable.tsx

@@ -118,12 +118,14 @@ export function AggregatesTable({}: AggregatesTableProps) {
             result.data?.map((row, i) => (
               <TableRow key={i}>
                 {fields.map((field, j) => {
+                  const column = eventView.getColumns()[j];
                   return (
                     <TableBodyCell key={j}>
                       {topEvents && i < topEvents && j === 0 && (
                         <TopResultsIndicator index={i} />
                       )}
                       <FieldRenderer
+                        column={column}
                         dataset={dataset}
                         data={row}
                         field={field}

static/app/views/explore/tables/fieldRenderer.spec.tsx

@@ -1,7 +1,10 @@
+import type {Location} from 'history';
+import {LocationFixture} from 'sentry-fixture/locationFixture';
 import {OrganizationFixture} from 'sentry-fixture/organization';
 
 import {render, screen} from 'sentry-test/reactTestingLibrary';
 
+import EventView from 'sentry/utils/discover/eventView';
 import {DiscoverDatasets} from 'sentry/utils/discover/types';
 
 import {FieldRenderer} from './fieldRenderer';
@@ -19,6 +22,16 @@ describe('FieldRenderer tests', function () {
     features: ['trace-view-v1'],
   });
 
+  const location: Location = LocationFixture({
+    query: {
+      id: '42',
+      name: 'best query',
+      field: ['id', 'timestamp', 'trace', 'span.op', 'transaction.id'],
+    },
+  });
+
+  const eventView = EventView.fromLocation(location);
+
   beforeAll(() => {
     const mockTimestamp = new Date('2024-10-06T00:00:00').getTime();
     jest.spyOn(global.Date, 'now').mockImplementation(() => mockTimestamp);
@@ -31,6 +44,7 @@ describe('FieldRenderer tests', function () {
   it('renders span.op', function () {
     render(
       <FieldRenderer
+        column={eventView.getColumns()[3]}
         data={mockedEventData}
         dataset={DiscoverDatasets.SPANS_INDEXED}
         field="span.op"
@@ -45,6 +59,7 @@ describe('FieldRenderer tests', function () {
   it('renders span id link to traceview', function () {
     render(
       <FieldRenderer
+        column={eventView.getColumns()[0]}
         data={mockedEventData}
         dataset={DiscoverDatasets.SPANS_INDEXED}
         field="id"
@@ -63,6 +78,7 @@ describe('FieldRenderer tests', function () {
   it('renders transaction id link to traceview', function () {
     render(
       <FieldRenderer
+        column={eventView.getColumns()[4]}
         data={mockedEventData}
         dataset={DiscoverDatasets.SPANS_INDEXED}
         field="transaction.id"
@@ -81,6 +97,7 @@ describe('FieldRenderer tests', function () {
   it('renders trace id link to traceview', function () {
     render(
       <FieldRenderer
+        column={eventView.getColumns()[2]}
         data={mockedEventData}
         dataset={DiscoverDatasets.SPANS_INDEXED}
         field="trace"
@@ -99,6 +116,7 @@ describe('FieldRenderer tests', function () {
   it('renders timestamp', function () {
     render(
       <FieldRenderer
+        column={eventView.getColumns()[1]}
         data={mockedEventData}
         dataset={DiscoverDatasets.SPANS_INDEXED}
         field="timestamp"

static/app/views/explore/tables/fieldRenderer.tsx

@@ -1,30 +1,39 @@
-import {Fragment} from 'react';
 import styled from '@emotion/styled';
 
 import Link from 'sentry/components/links/link';
 import TimeSince from 'sentry/components/timeSince';
+import type {TableDataRow} from 'sentry/utils/discover/discoverQuery';
 import type {EventData, MetaType} from 'sentry/utils/discover/eventView';
 import EventView from 'sentry/utils/discover/eventView';
 import {getFieldRenderer} from 'sentry/utils/discover/fieldRenderers';
 import {DiscoverDatasets} from 'sentry/utils/discover/types';
 import {generateLinkToEventInTraceView} from 'sentry/utils/discover/urls';
+import {MutableSearch} from 'sentry/utils/tokenizeSearch';
 import {useLocation} from 'sentry/utils/useLocation';
 import useOrganization from 'sentry/utils/useOrganization';
+import CellAction, {updateQuery} from 'sentry/views/discover/table/cellAction';
+import type {TableColumn} from 'sentry/views/discover/table/types';
 import {TraceViewSources} from 'sentry/views/performance/newTraceDetails/traceMetadataHeader';
 import {getTraceDetailsUrl} from 'sentry/views/performance/traceDetails/utils';
 
+import {ALLOWED_CELL_ACTIONS} from '../components/table';
+import {useUserQuery} from '../hooks/useUserQuery';
+
 interface FieldProps {
+  column: TableColumn<keyof TableDataRow>;
   data: EventData;
   dataset: DiscoverDatasets;
   field: string;
   meta: MetaType;
   unit?: string;
 }
 
-export function FieldRenderer({data, dataset, field, meta, unit}: FieldProps) {
+export function FieldRenderer({data, dataset, field, meta, unit, column}: FieldProps) {
   const location = useLocation();
   const organization = useOrganization();
+  const [userQuery, setUserQuery] = useUserQuery();
   const dateSelection = EventView.fromLocation(location).normalizeDateSelection(location);
+  const query = new MutableSearch(userQuery);
 
   const renderer = getFieldRenderer(field, meta, false);
 
@@ -69,7 +78,19 @@ export function FieldRenderer({data, dataset, field, meta, unit}: FieldProps) {
     rendered = <Link to={target}>{rendered}</Link>;
   }
 
-  return <Fragment>{rendered}</Fragment>;
+  return (
+    <CellAction
+      column={column}
+      dataRow={data as TableDataRow}
+      handleCellAction={(actions, value) => {
+        updateQuery(query, actions, column, value);
+        setUserQuery(query.formatString());
+      }}
+      allowActions={ALLOWED_CELL_ACTIONS}
+    >
+      {rendered}
+    </CellAction>
+  );
 }
 
 const StyledTimeSince = styled(TimeSince)`

static/app/views/explore/tables/spansTable.tsx

@@ -111,9 +111,11 @@ export function SpansTable({}: SpansTableProps) {
             result.data?.map((row, i) => (
               <TableRow key={i}>
                 {fields.map((field, j) => {
+                  const column = eventView.getColumns()[j];
                   return (
                     <TableBodyCell key={j}>
                       <FieldRenderer
+                        column={column}
                         dataset={dataset}
                         data={row}
                         field={field}