feat(dnd-transaction-links): Should truncate. (#49620)

Before: 
<img width="535" alt="Screenshot 2023-05-23 at 12 15 29 PM"
src="https://github.com/getsentry/sentry/assets/60121741/33387e3a-a75a-48d4-93c1-5c2a81f703cc">
After:
<img width="501" alt="Screenshot 2023-05-23 at 12 16 01 PM"
src="https://github.com/getsentry/sentry/assets/60121741/92709736-6207-4df0-b042-0e5665a26b70">

Fixed for widget preview and modal too.

---------

Co-authored-by: Abdullah Khan <abdullahkhan@PG9Y57YDXQ.local>

static/app/components/charts/simpleTableChart.tsx

@@ -16,7 +16,7 @@ import {getFieldRenderer} from 'sentry/utils/discover/fieldRenderers';
 import {fieldAlignment} from 'sentry/utils/discover/fields';
 import useProjects from 'sentry/utils/useProjects';
 import withOrganization from 'sentry/utils/withOrganization';
-import {StyledLink} from 'sentry/views/discover/table/tableView';
+import {TransactionLink} from 'sentry/views/discover/table/tableView';
 import TopResultsIndicator from 'sentry/views/discover/table/topResultsIndicator';
 import {
   decodeColumnOrder,
@@ -79,7 +79,7 @@ function SimpleTableChart({
 
       if (column.key === 'transaction' && row.transaction) {
         cell = (
-          <StyledLink
+          <TransactionLink
             to={getTargetForTransactionSummaryLink(
               row,
               organization,
@@ -89,7 +89,7 @@ function SimpleTableChart({
             )}
           >
             {cell}
-          </StyledLink>
+          </TransactionLink>
         );
       }
 

static/app/components/modals/widgetViewerModal/widgetViewerTableCell.tsx

@@ -33,7 +33,7 @@ import {
 import {DisplayType, Widget, WidgetType} from 'sentry/views/dashboards/types';
 import {eventViewFromWidget} from 'sentry/views/dashboards/utils';
 import {ISSUE_FIELDS} from 'sentry/views/dashboards/widgetBuilder/issueWidget/fields';
-import {StyledLink} from 'sentry/views/discover/table/tableView';
+import {TransactionLink} from 'sentry/views/discover/table/tableView';
 import TopResultsIndicator from 'sentry/views/discover/table/topResultsIndicator';
 import {TableColumn} from 'sentry/views/discover/table/types';
 import {getTargetForTransactionSummaryLink} from 'sentry/views/discover/utils';
@@ -231,7 +231,7 @@ export const renderGridBodyCell = ({
 
     if (columnKey === 'transaction' && dataRow.transaction) {
       cell = (
-        <StyledLink
+        <TransactionLink
           data-test-id="widget-viewer-transaction-link"
           to={getTargetForTransactionSummaryLink(
             dataRow,
@@ -241,7 +241,7 @@ export const renderGridBodyCell = ({
           )}
         >
           {cell}
-        </StyledLink>
+        </TransactionLink>
       );
     }
 

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

@@ -323,7 +323,7 @@ function TableView(props: TableViewProps) {
       );
     } else if (columnKey === 'transaction' && dataRow.transaction) {
       cell = (
-        <StyledLink
+        <TransactionLink
           data-test-id="tableView-transaction-link"
           to={getTargetForTransactionSummaryLink(
             dataRow,
@@ -334,7 +334,7 @@ function TableView(props: TableViewProps) {
           )}
         >
           {cell}
-        </StyledLink>
+        </TransactionLink>
       );
     } else if (columnKey === 'trace') {
       const dateSelection = eventView.normalizeDateSelection(location);
@@ -646,6 +646,10 @@ export const StyledLink = styled(Link)`
   }
 `;
 
+export const TransactionLink = styled(Link)`
+  ${p => p.theme.overflowEllipsis}
+`;
+
 const StyledIcon = styled(IconStack)`
   vertical-align: middle;
 `;