ref(metrics): Metric detail action menu tweaks

static/app/components/events/metrics/metricsDrawer.tsx

@@ -64,7 +64,7 @@ export function MetricsDrawer({event, project, group}: MetricsIssueDrawerProps)
       </EventNavigator>
       <EventDrawerBody ref={containerRef}>
         <div>
-          <MetricsSamplesTable embedded />
+          <MetricsSamplesTable source="issueDetails" />
         </div>
       </EventDrawerBody>
     </EventDrawerContainer>

static/app/components/events/metrics/metricsSection.tsx

@@ -147,7 +147,10 @@ function MetricsSectionContent({
   return (
     <FoldSection sectionKey={SectionKey.METRICS} title={t('Application Metrics')}>
       <Flex direction="column" gap="xl">
-        <MetricsSamplesTable embedded overrideTableData={abbreviatedTableData} />
+        <MetricsSamplesTable
+          source="issueDetails"
+          overrideTableData={abbreviatedTableData}
+        />
         {result.data && result.data.length > NUMBER_ABBREVIATED_METRICS ? (
           <div>
             <Button

static/app/views/explore/metrics/metricInfoTabs/aggregatesTab.tsx

@@ -222,6 +222,7 @@ export function AggregatesTab({traceMetric, isMetricOptionsEmpty}: AggregatesTab
               isAggregate={
                 Boolean(func) || (isVisualizeEquation(visualize) && isEquation(field))
               }
+              source="metricsPage"
               sort={direction}
               handleSortClick={canSort ? updateSort : undefined}
             >
@@ -255,6 +256,7 @@ export function AggregatesTab({traceMetric, isMetricOptionsEmpty}: AggregatesTab
                     key={j}
                     isAggregate={Boolean(parseFunction(field))}
                     offset={j === 0 ? firstColumnOffset : undefined}
+                    source="metricsPage"
                   >
                     <FieldRenderer
                       column={displayColumns.find(column => column.key === field)}

static/app/views/explore/metrics/metricInfoTabs/metricInfoTabStyles.tsx

@@ -5,6 +5,10 @@ import {TabPanels} from '@sentry/scraps/tabs';
 import {SimpleTable} from 'sentry/components/tables/simpleTable';
 import {TopResultsIndicator} from 'sentry/views/discover/table/topResultsIndicator';
 import {DetailsWrapper} from 'sentry/views/explore/logs/styles';
+import {
+  isEmbeddedMetricsSamplesTableSource,
+  type MetricsSamplesTableSource,
+} from 'sentry/views/explore/metrics/types';
 import {StyledPanel} from 'sentry/views/explore/tables/tracesTable/styles';
 
 export const TabListWrapper = styled('div')`
@@ -41,34 +45,60 @@ export const WrappingText = styled('div')`
   align-items: center;
 `;
 
-export const ExpandedRowContainer = styled('div')<{embedded?: boolean}>`
+export const ExpandedRowContainer = styled('div')`
   grid-column: 1 / -1;
 `;
 
 export const StyledSimpleTableRowCell = styled(SimpleTable.RowCell)<{
-  embedded?: boolean;
+  source: MetricsSamplesTableSource;
   noPadding?: boolean;
 }>`
-  padding: ${p => (p.noPadding ? 0 : p.embedded ? p.theme.space.xl : p.theme.space.lg)};
+  padding: ${p =>
+    p.noPadding
+      ? 0
+      : isEmbeddedMetricsSamplesTableSource(p.source)
+        ? p.theme.space.xl
+        : p.theme.space.lg};
   padding-top: ${p =>
-    p.noPadding ? 0 : p.embedded ? p.theme.space.sm : p.theme.space.xs};
+    p.noPadding
+      ? 0
+      : isEmbeddedMetricsSamplesTableSource(p.source)
+        ? p.theme.space.sm
+        : p.theme.space.xs};
   padding-bottom: ${p =>
-    p.noPadding ? 0 : p.embedded ? p.theme.space.sm : p.theme.space.xs};
+    p.noPadding
+      ? 0
+      : isEmbeddedMetricsSamplesTableSource(p.source)
+        ? p.theme.space.sm
+        : p.theme.space.xs};
 
   font-size: ${p => p.theme.font.size.sm};
 `;
 
 export const StyledSimpleTableHeaderCell = styled(SimpleTable.HeaderCell)<{
-  embedded?: boolean;
+  source: MetricsSamplesTableSource;
   noPadding?: boolean;
 }>`
   font-size: ${p => p.theme.font.size.sm};
   white-space: nowrap;
-  padding: ${p => (p.noPadding ? 0 : p.embedded ? p.theme.space.xl : p.theme.space.lg)};
+  padding: ${p =>
+    p.noPadding
+      ? 0
+      : isEmbeddedMetricsSamplesTableSource(p.source)
+        ? p.theme.space.xl
+        : p.theme.space.lg};
   padding-top: ${p =>
-    p.noPadding ? 0 : p.embedded ? p.theme.space.sm : p.theme.space.xs};
+    p.noPadding
+      ? 0
+      : isEmbeddedMetricsSamplesTableSource(p.source)
+        ? p.theme.space.sm
+        : p.theme.space.xs};
   padding-bottom: ${p =>
-    p.noPadding ? 0 : p.embedded ? p.theme.space.sm : p.theme.space.xs};
+    p.noPadding
+      ? 0
+      : isEmbeddedMetricsSamplesTableSource(p.source)
+        ? p.theme.space.sm
+        : p.theme.space.xs};
 `;
 
 export const StyledSimpleTableBody = styled('div')`

static/app/views/explore/metrics/metricInfoTabs/metricsSamplesTable.tsx

@@ -22,6 +22,9 @@ import {MetricsSamplesTableHeader} from 'sentry/views/explore/metrics/metricInfo
 import {SampleTableRow} from 'sentry/views/explore/metrics/metricInfoTabs/metricsSamplesTableRow';
 import type {TraceMetric} from 'sentry/views/explore/metrics/metricQuery';
 import {
+  DEFAULT_METRICS_SAMPLES_TABLE_SOURCE,
+  isEmbeddedMetricsSamplesTableSource,
+  type MetricsSamplesTableSource,
   TraceMetricKnownFieldKey,
   type TraceMetricEventsResponseItem,
 } from 'sentry/views/explore/metrics/types';
@@ -33,19 +36,22 @@ const EMBEDDED_RESULT_LIMIT = 100;
 const TWO_MINUTE_DELAY = 120;
 
 interface MetricsSamplesTableProps {
-  embedded?: boolean;
   isMetricOptionsEmpty?: boolean;
   overrideTableData?: TraceMetricEventsResponseItem[];
+  source?: MetricsSamplesTableSource;
   traceMetric?: TraceMetric;
 }
 
 export function MetricsSamplesTable({
   traceMetric,
-  embedded = false,
+  source = DEFAULT_METRICS_SAMPLES_TABLE_SOURCE,
   isMetricOptionsEmpty,
   overrideTableData,
 }: MetricsSamplesTableProps) {
-  const columns = embedded ? TraceSamplesTableEmbeddedColumns : TraceSamplesTableColumns;
+  const isEmbedded = isEmbeddedMetricsSamplesTableSource(source);
+  const columns = isEmbedded
+    ? TraceSamplesTableEmbeddedColumns
+    : TraceSamplesTableColumns;
   const fields = getTraceSamplesTableFields(columns);
 
   const {
@@ -54,8 +60,10 @@ export function MetricsSamplesTable({
     error,
     isFetching,
   } = useMetricSamplesTable({
-    disabled: embedded ? !!overrideTableData : !traceMetric?.name || isMetricOptionsEmpty,
-    limit: embedded ? EMBEDDED_RESULT_LIMIT : RESULT_LIMIT,
+    disabled: isEmbedded
+      ? !!overrideTableData
+      : !traceMetric?.name || isMetricOptionsEmpty,
+    limit: isEmbedded ? EMBEDDED_RESULT_LIMIT : RESULT_LIMIT,
     traceMetric,
     fields,
     ingestionDelaySeconds: TWO_MINUTE_DELAY,
@@ -78,9 +86,9 @@ export function MetricsSamplesTable({
   }, [meta, traceMetric?.unit]);
 
   return (
-    <SimpleTableGrid embedded={embedded}>
+    <SimpleTableGrid source={source}>
       {isFetching && <TransparentLoadingMask />}
-      <MetricsSamplesTableHeader columns={columns} embedded={embedded} />
+      <MetricsSamplesTableHeader columns={columns} source={source} />
       <StyledSimpleTableBody>
         {!overrideTableData?.length && error ? (
           <SimpleTable.Empty style={{minHeight: '140px'}}>
@@ -93,7 +101,7 @@ export function MetricsSamplesTable({
               row={row}
               columns={columns}
               meta={metaWithValueUnit}
-              embedded={embedded}
+              source={source}
             />
           ))
         ) : isFetching ? (
@@ -111,10 +119,10 @@ export function MetricsSamplesTable({
 }
 
 const SimpleTableGrid = styled(StyledSimpleTable)<{
-  embedded: boolean;
+  source: MetricsSamplesTableSource;
 }>`
   grid-template-columns: ${p =>
-    p.embedded
+    isEmbeddedMetricsSamplesTableSource(p.source)
       ? `${p.theme.space['3xl']} min-content min-content minmax(0, 1fr) min-content min-content`
       : `${p.theme.space['3xl']} min-content minmax(0, 1fr) min-content min-content`};
   grid-column: 1 / -1;

static/app/views/explore/metrics/metricInfoTabs/metricsSamplesTableHeader.tsx

@@ -9,6 +9,9 @@ import {
   StyledSimpleTableHeaderCell,
 } from 'sentry/views/explore/metrics/metricInfoTabs/metricInfoTabStyles';
 import {
+  DEFAULT_METRICS_SAMPLES_TABLE_SOURCE,
+  isEmbeddedMetricsSamplesTableSource,
+  type MetricsSamplesTableSource,
   SORTABLE_SAMPLE_COLUMNS,
   TraceMetricKnownFieldKey,
   VirtualTableSampleColumnKey,
@@ -22,12 +25,12 @@ import {
 
 interface MetricsSamplesTableHeaderProps {
   columns: SampleTableColumnKey[];
-  embedded?: boolean;
+  source?: MetricsSamplesTableSource;
 }
 
 export function MetricsSamplesTableHeader({
   columns,
-  embedded,
+  source = DEFAULT_METRICS_SAMPLES_TABLE_SOURCE,
 }: MetricsSamplesTableHeaderProps) {
   const sorts = useQueryParamsSortBys();
   const setSorts = useSetQueryParamsSortBys();
@@ -44,7 +47,7 @@ export function MetricsSamplesTableHeader({
             index={i}
             sort={sorts.find(s => s.field === field)?.kind}
             setSorts={setSorts}
-            embedded={embedded}
+            source={source}
           >
             {label}
           </FieldHeaderCellWrapper>
@@ -60,19 +63,20 @@ function FieldHeaderCellWrapper({
   index,
   sort,
   setSorts,
-  embedded = false,
+  source = DEFAULT_METRICS_SAMPLES_TABLE_SOURCE,
 }: {
   children: ReactNode;
   field: SampleTableColumnKey;
   index: number;
   setSorts: (sorts: Sort[]) => void;
-  embedded?: boolean;
   sort?: 'asc' | 'desc';
+  source?: MetricsSamplesTableSource;
 }) {
   const columnType = getMetricTableColumnType(field);
   const label = getFieldLabel(field);
   const hasPadding = field !== VirtualTableSampleColumnKey.EXPAND_ROW;
-  const canSort = !embedded && SORTABLE_SAMPLE_COLUMNS.has(field);
+  const canSort =
+    !isEmbeddedMetricsSamplesTableSource(source) && SORTABLE_SAMPLE_COLUMNS.has(field);
 
   function handleSortClick() {
     const kind = sort === 'desc' ? 'asc' : 'desc';
@@ -89,7 +93,7 @@ function FieldHeaderCellWrapper({
           justifyContent: 'flex-end',
           paddingRight: 'calc(12px + 15px)', // 12px is the padding of the cell, 15px is the width of the scrollbar.
         }}
-        embedded={embedded}
+        source={source}
       >
         <Tooltip showOnlyOnOverflow title={label}>
           {children}
@@ -104,7 +108,7 @@ function FieldHeaderCellWrapper({
       sort={sort}
       handleSortClick={canSort ? handleSortClick : undefined}
       noPadding={!hasPadding}
-      embedded={embedded}
+      source={source}
     >
       <Tooltip showOnlyOnOverflow title={label}>
         {children}