feat(cell-action): add external linking as action

static/app/utils/discover/fieldRenderers.tsx

@@ -322,15 +322,19 @@ export const FIELD_FORMATTERS: FieldFormatters = {
   },
   string: {
     isSortable: true,
-    renderFunc: (field, data) => {
+    renderFunc: (field, data, baggage) => {
       // 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;
 
-      if (isUrl(value)) {
+      // 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)
+      ) {
         return (
           <Tooltip title={value} containerDisplayMode="block" showOnlyOnOverflow>
             <Container>
@@ -523,13 +527,7 @@ const SPECIAL_FIELDS: Record<string, SpecialField> = {
           showOnlyOnOverflow
           maxWidth={400}
         >
-          <Container>
-            {isUrl(value) ? (
-              <ExternalLink href={value}>{value}</ExternalLink>
-            ) : (
-              nullableValue(value)
-            )}
-          </Container>
+          <Container>{nullableValue(value)}</Container>
         </Tooltip>
       );
     },

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

@@ -9,10 +9,12 @@ import {t, tct} from 'sentry/locale';
 import {defined} from 'sentry/utils';
 import type {TableDataRow} from 'sentry/utils/discover/discoverQuery';
 import {
+  fieldAlignment,
   isEquationAlias,
   isRelativeSpanOperationBreakdownField,
 } from 'sentry/utils/discover/fields';
 import getDuration from 'sentry/utils/duration/getDuration';
+import {isUrl} from 'sentry/utils/string/isUrl';
 import type {MutableSearch} from 'sentry/utils/tokenizeSearch';
 import useOrganization from 'sentry/utils/useOrganization';
 
@@ -27,19 +29,7 @@ export enum Actions {
   DRILLDOWN = 'drilldown',
   EDIT_THRESHOLD = 'edit_threshold',
   COPY_TO_CLIPBOARD = 'copy_to_clipboard',
-}
-
-export function copyToClipBoard(data: any) {
-  function stringifyValue(value: any): string {
-    if (!value) return '';
-    if (typeof value !== 'object') {
-      return value.toString();
-    }
-    return JSON.stringify(value) ?? value.toString();
-  }
-  navigator.clipboard.writeText(stringifyValue(data)).catch(_ => {
-    addErrorMessage('Error copying to clipboard');
-  });
+  OPEN_EXTERNAL_LINK = 'open_external_link',
 }
 
 export function updateQuery(
@@ -97,14 +87,12 @@ export function updateQuery(
     }
     // these actions do not modify the query in any way,
     // instead they have side effects
-    case Actions.COPY_TO_CLIPBOARD:
-      copyToClipBoard(value);
-      break;
     case Actions.RELEASE:
     case Actions.DRILLDOWN:
       break;
     default:
-      throw new Error(`Unknown action type. ${action}`);
+      if (!handleCellActionFallback(action, value))
+        throw new Error(`Unknown action type. ${action}`);
   }
 }
 
@@ -251,6 +239,8 @@ 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;
   }
@@ -262,10 +252,11 @@ type Props = React.PropsWithoutRef<CellActionsOpts>;
 
 function CellAction(props: Props) {
   const organization = useOrganization();
-  const {children} = props;
+  const {children, column} = props;
   const cellActions = makeCellActions(props);
+  const align = fieldAlignment(column.key as string, column.type);
 
-  if (organization.features.includes('organizations:discover-cell-actions-v2'))
+  if (organization.features.includes('discover-cell-actions-v2'))
     return (
       <Container
         data-test-id={cellActions === null ? undefined : 'cell-action-container'}
@@ -276,10 +267,11 @@ function CellAction(props: Props) {
             usePortal
             size="sm"
             offset={4}
-            position="bottom-start"
+            position={align === 'left' ? 'bottom-start' : 'bottom-end'}
             preventOverflowOptions={{padding: 4}}
             flipOptions={{
               fallbackPlacements: [
+                'bottom-start',
                 'bottom-end',
                 'top',
                 'right-start',
@@ -337,6 +329,42 @@ function CellAction(props: Props) {
   );
 }
 
+/**
+ * A fallback that has default operations for some actions. E.g., copying to clipboard by default copies raw text, opening external link opens a new tab
+ * @param action
+ * @param value
+ * @returns true if a default action was executed, false otherwise
+ */
+export function handleCellActionFallback(
+  action: Actions,
+  value: string | number | string[]
+): boolean {
+  switch (action) {
+    case Actions.COPY_TO_CLIPBOARD: {
+      function stringifyValue(val: any): string {
+        if (!val) return '';
+        if (typeof val !== 'object') {
+          return val.toString();
+        }
+        return JSON.stringify(val) ?? val.toString();
+      }
+      navigator.clipboard.writeText(stringifyValue(value)).catch(_ => {
+        addErrorMessage('Error copying to clipboard');
+      });
+      return true;
+    }
+    case Actions.OPEN_EXTERNAL_LINK:
+      if (typeof value === 'string' && isUrl(value)) {
+        window.open(value, '_blank', 'noopener,noreferrer');
+      } else {
+        addErrorMessage('Could not open link');
+      }
+      return true;
+    default:
+      return false;
+  }
+}
+
 export default CellAction;
 
 const Container = styled('div')`

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

@@ -66,7 +66,7 @@ import {makeReleasesPathname} from 'sentry/views/releases/utils/pathnames';
 
 import {QuickContextHoverWrapper} from './quickContext/quickContextWrapper';
 import {ContextType} from './quickContext/utils';
-import CellAction, {Actions, copyToClipBoard, updateQuery} from './cellAction';
+import CellAction, {Actions, updateQuery} from './cellAction';
 import ColumnEditModal, {modalCss} from './columnEditModal';
 import TableActions from './tableActions';
 import {TopResultsIndicator} from './topResultsIndicator';
@@ -609,10 +609,6 @@ function TableView(props: TableViewProps) {
 
           return;
         }
-        case Actions.COPY_TO_CLIPBOARD: {
-          copyToClipBoard(value);
-          break;
-        }
         default: {
           // Some custom perf metrics have units.
           // These custom perf metrics need to be adjusted to the correct value.

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

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

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

@@ -17,7 +17,7 @@ import useOrganization from 'sentry/utils/useOrganization';
 import useProjectFromId from 'sentry/utils/useProjectFromId';
 import CellAction, {
   Actions,
-  copyToClipBoard,
+  handleCellActionFallback,
 } from 'sentry/views/discover/table/cellAction';
 import type {TableColumn} from 'sentry/views/discover/table/types';
 import {AttributesTree} from 'sentry/views/explore/components/traceItemAttributes/attributesTree';
@@ -304,10 +304,8 @@ export const LogRowContent = memo(function LogRowContent({
                           negated: true,
                         });
                         break;
-                      case Actions.COPY_TO_CLIPBOARD:
-                        copyToClipBoard(cellValue);
-                        break;
                       default:
+                        handleCellActionFallback(actions, cellValue);
                         break;
                     }
                   }}

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

@@ -5,7 +5,6 @@ import styled from '@emotion/styled';
 import {Link} from 'sentry/components/core/link';
 import {Tooltip} from 'sentry/components/core/tooltip';
 import ProjectBadge from 'sentry/components/idBadge/projectBadge';
-import ExternalLink from 'sentry/components/links/externalLink';
 import TimeSince from 'sentry/components/timeSince';
 import {space} from 'sentry/styles/space';
 import type {Project} from 'sentry/types/project';
@@ -18,7 +17,6 @@ import {Container} from 'sentry/utils/discover/styles';
 import {generateLinkToEventInTraceView} from 'sentry/utils/discover/urls';
 import {getShortEventId} from 'sentry/utils/events';
 import {generateProfileFlamechartRouteWithQuery} from 'sentry/utils/profiling/routes';
-import {isUrl} from 'sentry/utils/string/isUrl';
 import {MutableSearch} from 'sentry/utils/tokenizeSearch';
 import {useLocation} from 'sentry/utils/useLocation';
 import useOrganization from 'sentry/utils/useOrganization';
@@ -146,7 +144,7 @@ function BaseExploreFieldRenderer({
       source: TraceViewSources.TRACES,
     });
 
-    rendered = <Link to={target}>{rendered}</Link>;
+    return <Link to={target}>{rendered}</Link>;
   }
 
   if (['id', 'span_id', 'transaction.id'].includes(field)) {
@@ -162,7 +160,7 @@ function BaseExploreFieldRenderer({
       source: TraceViewSources.TRACES,
     });
 
-    rendered = <Link to={target}>{rendered}</Link>;
+    return <Link to={target}>{rendered}</Link>;
   }
 
   if (field === 'profile.id') {
@@ -171,7 +169,7 @@ function BaseExploreFieldRenderer({
       projectSlug: data.project,
       profileId: data['profile.id'],
     });
-    rendered = <Link to={target}>{rendered}</Link>;
+    return <Link to={target}>{rendered}</Link>;
   }
 
   return (
@@ -238,13 +236,7 @@ function spanDescriptionRenderFunc(projects: Record<string, Project>) {
                 hideName
               />
             )}
-            <WrappingText>
-              {isUrl(value) ? (
-                <ExternalLink href={value}>{value}</ExternalLink>
-              ) : (
-                nullableValue(value)
-              )}
-            </WrappingText>
+            <WrappingText>{nullableValue(value)}</WrappingText>
           </Description>
         </Tooltip>
       </span>

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

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