feat(cell-actions): add back cell actions for internal links (#97381)

### Changes

See #96897 for details

Author: lzhao-sentry

static/app/utils/discover/fieldRenderers.tsx

@@ -327,19 +327,15 @@ export const FIELD_FORMATTERS: FieldFormatters = {
   },
   string: {
     isSortable: true,
-    renderFunc: (field, data, baggage) => {
+    renderFunc: (field, data) => {
       // Some fields have long arrays in them, only show the tail of the data.
       const value = Array.isArray(data[field])
         ? data[field].slice(-1)
         : defined(data[field])
           ? data[field]
           : emptyValue;
 
-      // In the future, external linking will be done through CellAction component instead of the default renderer
-      if (
-        !baggage?.organization.features.includes('discover-cell-actions-v2') &&
-        isUrl(value)
-      ) {
+      if (isUrl(value)) {
         return (
           <Tooltip title={value} containerDisplayMode="block" showOnlyOnOverflow>
             <Container>
@@ -505,7 +501,7 @@ const SPECIAL_FIELDS: Record<string, SpecialField> = {
   },
   'span.description': {
     sortField: 'span.description',
-    renderFunc: (data, {organization}) => {
+    renderFunc: data => {
       const value = data[SpanFields.SPAN_DESCRIPTION];
       const op: string = data[SpanFields.SPAN_OP];
       const projectId =
@@ -533,8 +529,7 @@ const SPECIAL_FIELDS: Record<string, SpecialField> = {
           maxWidth={400}
         >
           <Container>
-            {!organization.features.includes('discover-cell-actions-v2') &&
-            isUrl(value) ? (
+            {isUrl(value) ? (
               <ExternalLink href={value}>{value}</ExternalLink>
             ) : (
               nullableValue(value)

static/app/views/dashboards/widgets/tableWidget/tableWidgetVisualization.tsx

@@ -145,7 +145,11 @@ export function TableWidgetVisualization(props: TableWidgetVisualizationProps) {
     onResizeColumn,
     resizable = true,
     onTriggerCellAction,
-    allowedCellActions = [Actions.COPY_TO_CLIPBOARD, Actions.OPEN_EXTERNAL_LINK],
+    allowedCellActions = [
+      Actions.COPY_TO_CLIPBOARD,
+      Actions.OPEN_EXTERNAL_LINK,
+      Actions.OPEN_INTERNAL_LINK,
+    ],
   } = props;
 
   const theme = useTheme();

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

@@ -1,3 +1,4 @@
+import {useState} from 'react';
 import styled from '@emotion/styled';
 
 import {addErrorMessage} from 'sentry/actionCreators/indicator';
@@ -14,8 +15,10 @@ import {
   isRelativeSpanOperationBreakdownField,
 } from 'sentry/utils/discover/fields';
 import getDuration from 'sentry/utils/duration/getDuration';
+import {FieldKey} from 'sentry/utils/fields';
 import {isUrl} from 'sentry/utils/string/isUrl';
 import type {MutableSearch} from 'sentry/utils/tokenizeSearch';
+import stripURLOrigin from 'sentry/utils/url/stripURLOrigin';
 import useOrganization from 'sentry/utils/useOrganization';
 
 import type {TableColumn} from './types';
@@ -30,6 +33,7 @@ export enum Actions {
   EDIT_THRESHOLD = 'edit_threshold',
   COPY_TO_CLIPBOARD = 'copy_to_clipboard',
   OPEN_EXTERNAL_LINK = 'open_external_link',
+  OPEN_INTERNAL_LINK = 'open_internal_link',
 }
 
 export function updateQuery(
@@ -95,6 +99,7 @@ export function updateQuery(
       break;
     case Actions.RELEASE:
     case Actions.DRILLDOWN:
+    case Actions.OPEN_INTERNAL_LINK:
       break;
     default:
       throw new Error(`Unknown action type. ${action}`);
@@ -182,13 +187,18 @@ type CellActionsOpts = {
    */
   allowActions?: Actions[];
   children?: React.ReactNode;
+  /**
+   * Any parsed out internal links that should be added to the menu as an option
+   */
+  to?: string;
 };
 
 function makeCellActions({
   dataRow,
   column,
   handleCellAction,
   allowActions,
+  to,
 }: CellActionsOpts) {
   // Do not render context menu buttons for the span op breakdown field.
   if (isRelativeSpanOperationBreakdownField(column.name)) {
@@ -224,10 +234,22 @@ function makeCellActions({
         label: itemLabel,
         textValue: itemTextValue,
         onAction: () => handleCellAction(action, value!),
+        to: action === Actions.OPEN_INTERNAL_LINK && to ? stripURLOrigin(to) : undefined,
       });
     }
   }
 
+  if (to && to !== value) {
+    const field = String(column.key);
+    addMenuItem(Actions.OPEN_INTERNAL_LINK, getInternalLinkActionLabel(field));
+  }
+
+  if (isUrl(value)) {
+    addMenuItem(Actions.OPEN_EXTERNAL_LINK, t('Open external link'));
+  }
+
+  if (value) addMenuItem(Actions.COPY_TO_CLIPBOARD, t('Copy to clipboard'));
+
   if (
     !['duration', 'number', 'percentage'].includes(column.type) ||
     (value === null && column.column.kind === 'field')
@@ -271,17 +293,39 @@ function makeCellActions({
     );
   }
 
-  if (value) addMenuItem(Actions.COPY_TO_CLIPBOARD, t('Copy to clipboard'));
-
-  if (isUrl(value)) addMenuItem(Actions.OPEN_EXTERNAL_LINK, t('Open external link'));
-
   if (actions.length === 0) {
     return null;
   }
 
   return actions;
 }
 
+/**
+ * Provides the correct text for the dropdown menu based on the field.
+ * @param field column field name
+ */
+function getInternalLinkActionLabel(field: string): string {
+  switch (field) {
+    case FieldKey.ID:
+      return t('Open view');
+    case FieldKey.TRACE:
+      return t('Open trace');
+    case FieldKey.PROJECT:
+    case 'project_id':
+    case 'project.id':
+      return t('Open project');
+    case FieldKey.RELEASE:
+      return t('View details');
+    case FieldKey.ISSUE:
+      return t('Open issue');
+    case FieldKey.REPLAY_ID:
+      return t('Open replay');
+    default:
+      break;
+  }
+  return t('Open link');
+}
+
 /**
  * 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.
@@ -291,7 +335,7 @@ export enum ActionTriggerType {
   BOLD_HOVER = 'bold_hover',
 }
 
-type Props = React.PropsWithoutRef<CellActionsOpts> & {
+type Props = React.PropsWithoutRef<Omit<CellActionsOpts, 'to'>> & {
   triggerType?: ActionTriggerType;
 };
 
@@ -302,15 +346,24 @@ function CellAction({
 }: Props) {
   const organization = useOrganization();
   const {children, column} = props;
+  // The menu is activated by clicking the value, which doesn't work if the value is rendered as a link
+  // So, `target` contains an internal link extracted from the DOM on click and that link is added dropdown menu.
+  const [target, setTarget] = useState<string>();
 
   const useCellActionsV2 = organization.features.includes('discover-cell-actions-v2');
   let filteredActions = allowActions;
-  if (!useCellActionsV2)
-    filteredActions = filteredActions?.filter(
-      action => action !== Actions.OPEN_EXTERNAL_LINK
+  if (!useCellActionsV2 && filteredActions) {
+    // New dropdown menu options should not be allowed if the feature flag is not on
+    filteredActions = filteredActions.filter(
+      action =>
+        action !== Actions.OPEN_EXTERNAL_LINK && action !== Actions.OPEN_INTERNAL_LINK
     );
-
-  const cellActions = makeCellActions({...props, allowActions: filteredActions});
+  }
+  const cellActions = makeCellActions({
+    ...props,
+    allowActions: filteredActions,
+    to: target,
+  });
   const align = fieldAlignment(column.key as string, column.type);
 
   if (useCellActionsV2 && triggerType === ActionTriggerType.BOLD_HOVER)
@@ -338,11 +391,26 @@ function CellAction({
               ],
             }}
             trigger={triggerProps => (
-              <ActionMenuTriggerV2 {...triggerProps} aria-label={t('Actions')}>
+              <ActionMenuTriggerV2
+                {...triggerProps}
+                aria-label={t('Actions')}
+                onClickCapture={e => {
+                  // Allow for users to hold shift, ctrl or cmd to open links instead of the menu
+                  if (e.metaKey || e.shiftKey || e.ctrlKey) {
+                    e.stopPropagation();
+                  } else {
+                    const aTags = e.currentTarget.getElementsByTagName('a');
+                    if (aTags?.[0]) {
+                      const href = aTags[0].href;
+                      setTarget(href);
+                    }
+                    e.preventDefault();
+                  }
+                }}
+              >
                 {children}
               </ActionMenuTriggerV2>
             )}
-            // So the menu doesn't fill the entire row which can lead to extremely wide menus
             minMenuWidth={0}
           />
         ) : (

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

@@ -55,6 +55,7 @@ export const ALLOWED_CELL_ACTIONS: Actions[] = [
   Actions.SHOW_LESS_THAN,
   Actions.COPY_TO_CLIPBOARD,
   Actions.OPEN_EXTERNAL_LINK,
+  Actions.OPEN_INTERNAL_LINK,
 ];
 
 const MINIMUM_COLUMN_WIDTH = COL_WIDTH_MINIMUM;

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

@@ -7,7 +7,6 @@ import {Tooltip} from 'sentry/components/core/tooltip';
 import ProjectBadge from 'sentry/components/idBadge/projectBadge';
 import TimeSince from 'sentry/components/timeSince';
 import {space} from 'sentry/styles/space';
-import type {Organization} from 'sentry/types/organization';
 import type {Project} from 'sentry/types/project';
 import {defined} from 'sentry/utils';
 import type {TableDataRow} from 'sentry/utils/discover/discoverQuery';
@@ -122,7 +121,7 @@ function BaseExploreFieldRenderer({
 
   const field = String(column.key);
 
-  const renderer = getExploreFieldRenderer(field, meta, projectsMap, organization);
+  const renderer = getExploreFieldRenderer(field, meta, projectsMap);
 
   let rendered = renderer(data, {
     location,
@@ -192,14 +191,13 @@ function BaseExploreFieldRenderer({
 function getExploreFieldRenderer(
   field: string,
   meta: MetaType,
-  projects: Record<string, Project>,
-  organization: Organization
+  projects: Record<string, Project>
 ): ReturnType<typeof getFieldRenderer> {
   if (field === 'id' || field === 'span_id') {
     return eventIdRenderFunc(field);
   }
   if (field === 'span.description') {
-    return spanDescriptionRenderFunc(projects, organization);
+    return spanDescriptionRenderFunc(projects);
   }
   return getFieldRenderer(field, meta, false);
 }
@@ -216,10 +214,7 @@ function eventIdRenderFunc(field: string) {
   return renderer;
 }
 
-function spanDescriptionRenderFunc(
-  projects: Record<string, Project>,
-  organization: Organization
-) {
+function spanDescriptionRenderFunc(projects: Record<string, Project>) {
   function renderer(data: EventData) {
     const project = projects[data.project];
 
@@ -243,8 +238,7 @@ function spanDescriptionRenderFunc(
               />
             )}
             <WrappingText>
-              {!organization.features.includes('discover-cell-actions-v2') &&
-              isUrl(value) ? (
+              {isUrl(value) ? (
                 <ExternalLink href={value}>{value}</ExternalLink>
               ) : (
                 nullableValue(value)

static/app/views/insights/pages/platform/shared/table/TransactionCell.tsx

@@ -50,7 +50,7 @@ export function TransactionCell({
         column: {kind: 'field', field: 'transaction'},
       }}
       dataRow={dataRow as any}
-      allowActions={[Actions.ADD]}
+      allowActions={[Actions.ADD, Actions.OPEN_INTERNAL_LINK]}
       handleCellAction={() => setTransactionFilter(transaction)}
     >
       <CellWrapper>

static/app/views/performance/table.tsx

@@ -280,6 +280,8 @@ class _Table extends Component<Props, State> {
       Actions.SHOW_GREATER_THAN,
       Actions.SHOW_LESS_THAN,
       Actions.EDIT_THRESHOLD,
+      Actions.OPEN_EXTERNAL_LINK,
+      Actions.OPEN_INTERNAL_LINK,
     ];
 
     const cellActions = withStaticFilters ? [] : allowActions;

static/app/views/performance/transactionSummary/transactionEvents/eventsTable.tsx

@@ -221,6 +221,7 @@ function EventsTable({
         Actions.SHOW_GREATER_THAN,
         Actions.SHOW_LESS_THAN,
         Actions.OPEN_EXTERNAL_LINK,
+        Actions.OPEN_INTERNAL_LINK,
       ];
 
       if (['attachments', 'minidump'].includes(field)) {

static/app/views/performance/transactionSummary/transactionTags/tagValueTable.tsx

@@ -182,7 +182,7 @@ export function TagValueTable({
       return dataRow.tags_key;
     }
 
-    const allowActions = [Actions.ADD, Actions.EXCLUDE];
+    const allowActions = [Actions.ADD, Actions.EXCLUDE, Actions.OPEN_INTERNAL_LINK];
 
     if (column.key === 'tagValue') {
       const actionRow = {...dataRow, id: dataRow.tags_key};

static/app/views/performance/vitalDetail/table.tsx

@@ -153,6 +153,8 @@ class Table extends Component<Props, State> {
       Actions.EXCLUDE,
       Actions.SHOW_GREATER_THAN,
       Actions.SHOW_LESS_THAN,
+      Actions.OPEN_EXTERNAL_LINK,
+      Actions.OPEN_INTERNAL_LINK,
     ];
 
     if (field === 'transaction') {