chore(ui): Use ellipsize helper in more places (#95540)

I introduced the helper in #94935 but didn't actually propagate it. I
noticed another custom truncation recently, and decided now's the time
to actually fix this.

Author: gggritso

static/app/components/charts/eventsChart.tsx

@@ -46,6 +46,7 @@ import {
 } from 'sentry/utils/discover/fields';
 import type {DiscoverDatasets} from 'sentry/utils/discover/types';
 import {decodeList, decodeScalar} from 'sentry/utils/queryString';
+import {ellipsize} from 'sentry/utils/string/ellipsize';
 
 import EventsRequest from './eventsRequest';
 
@@ -553,11 +554,8 @@ class EventsChart extends Component<EventsChartProps> {
     const forceChartType = decodeScalar(location.query.forceChartType);
     const yAxisArray = decodeList(yAxis);
     const yAxisSeriesNames = yAxisArray.map(name => {
-      let yAxisLabel = name && isEquation(name) ? getEquation(name) : name;
-      if (yAxisLabel && yAxisLabel.length > 60) {
-        yAxisLabel = yAxisLabel.substring(0, 60) + '...';
-      }
-      return yAxisLabel;
+      const yAxisLabel = name && isEquation(name) ? getEquation(name) : name;
+      return ellipsize(yAxisLabel, 60);
     });
 
     const previousSeriesNames = previousName

static/app/components/events/autofix/autofixInsightCards.tsx

@@ -20,6 +20,7 @@ import {trackAnalytics} from 'sentry/utils/analytics';
 import {singleLineRenderer} from 'sentry/utils/marked/marked';
 import {MarkedText} from 'sentry/utils/marked/markedText';
 import {useMutation, useQueryClient} from 'sentry/utils/queryClient';
+import {ellipsize} from 'sentry/utils/string/ellipsize';
 import useApi from 'sentry/utils/useApi';
 import useOrganization from 'sentry/utils/useOrganization';
 
@@ -87,7 +88,7 @@ function AutofixInsightCard({
   const truncatedTitleHtml = useMemo(() => {
     let truncatedTitle = displayedInsightTitle;
     if (newlineIndex !== -1 && newlineIndex < displayedInsightTitle.length - 1) {
-      truncatedTitle = displayedInsightTitle.substring(0, newlineIndex) + '...';
+      truncatedTitle = ellipsize(truncatedTitle, newlineIndex);
     }
     return {
       __html: singleLineRenderer(truncatedTitle),

static/app/components/events/autofix/autofixInsightSources.tsx

@@ -19,6 +19,7 @@ import {t} from 'sentry/locale';
 import {space} from 'sentry/styles/space';
 import {defined} from 'sentry/utils';
 import {MarkedText} from 'sentry/utils/marked/markedText';
+import {ellipsize} from 'sentry/utils/string/ellipsize';
 import {SectionKey} from 'sentry/views/issueDetails/streamline/context';
 
 interface AutofixInsightSourcesProps {
@@ -63,7 +64,7 @@ function getCodeSourceName(url: string): string {
     // Fallback if URL parsing fails or path is simple
   }
   // Fallback to a truncated version of the URL
-  return url.length > 30 ? url.substring(0, 27) + '...' : url;
+  return ellipsize(url, 30);
 }
 
 function AutofixInsightSources({sources, title, codeUrls}: AutofixInsightSourcesProps) {

static/app/views/performance/newTraceDetails/traceDrawer/details/span/eapSections/attributes.tsx

@@ -14,6 +14,7 @@ import {trackAnalytics} from 'sentry/utils/analytics';
 import type {RenderFunctionBaggage} from 'sentry/utils/discover/fieldRenderers';
 import {FieldKey} from 'sentry/utils/fields';
 import {generateProfileFlamechartRoute} from 'sentry/utils/profiling/routes';
+import {ellipsize} from 'sentry/utils/string/ellipsize';
 import {looksLikeAJSONArray} from 'sentry/utils/string/looksLikeAJSONArray';
 import {useIsSentryEmployee} from 'sentry/utils/useIsSentryEmployee';
 import type {AttributesFieldRendererProps} from 'sentry/views/explore/components/traceItemAttributes/attributesTree';
@@ -75,9 +76,7 @@ const truncatedTextRenderer = (props: CustomRenderersProps) => {
   if (typeof props.item.value !== 'string') {
     return props.item.value;
   }
-  return props.item.value.length > 100
-    ? props.item.value.slice(0, 100) + '...'
-    : props.item.value;
+  return ellipsize(props.item.value, 100);
 };
 
 export function Attributes({

static/app/views/performance/newTraceDetails/traceDrawer/details/styles.tsx

@@ -47,6 +47,7 @@ import type {Organization} from 'sentry/types/organization';
 import type {Project} from 'sentry/types/project';
 import {trackAnalytics} from 'sentry/utils/analytics';
 import getDuration from 'sentry/utils/duration/getDuration';
+import {ellipsize} from 'sentry/utils/string/ellipsize';
 import type {Color, ColorOrAlias} from 'sentry/utils/theme';
 import {useLocation} from 'sentry/utils/useLocation';
 import useOrganization from 'sentry/utils/useOrganization';
@@ -1288,7 +1289,7 @@ function MultilineText({children}: {children: string}) {
       {isExpanded || !needsTruncation ? (
         children
       ) : (
-        <Fragment>{children.slice(0, truncatePosition) + '...'}</Fragment>
+        <Fragment>{ellipsize(children, truncatePosition)}</Fragment>
       )}
       {needsTruncation ? (
         <Flex style={{justifyContent: 'center', paddingTop: space(1)}}>