ref(ui): Add ellipsize string helper (#94935)

Was surprised that this helper doesn't exist? Maybe it does, but
somewhere I didn't see it? Anyway I added a new one, y'all let me know
what you want to call this thing, and if all the behaviour makes sense.

---------

Co-authored-by: Jonas <jonas.badalic@sentry.io>
Co-authored-by: getsantry[bot] <66042841+getsantry[bot]@users.noreply.github.com>

Author: 3 people

static/app/components/events/breadcrumbs/breadcrumbItemContent.tsx

@@ -15,6 +15,7 @@ import {
   type RawCrumb,
 } from 'sentry/types/breadcrumbs';
 import {defined} from 'sentry/utils';
+import {ellipsize} from 'sentry/utils/string/ellipsize';
 import {isUrl} from 'sentry/utils/string/isUrl';
 import {usePrismTokens} from 'sentry/utils/usePrismTokens';
 
@@ -55,11 +56,7 @@ export default function BreadcrumbItemContent({
         />
       ) : (
         <StructuredData
-          value={
-            bc.message.length > MESSAGE_PREVIEW_CHAR_LIMIT
-              ? bc.message.substring(0, MESSAGE_PREVIEW_CHAR_LIMIT) + '\u2026'
-              : bc.message
-          }
+          value={ellipsize(bc.message, MESSAGE_PREVIEW_CHAR_LIMIT)}
           // Note: Annotations applying to trimmed content will not be applied.
           meta={meta?.message}
           {...structuredDataProps}

static/app/utils/string/ellipsize.spec.tsx

@@ -0,0 +1,39 @@
+import {ellipsize} from 'sentry/utils/string/ellipsize';
+
+describe('ellipsize', () => {
+  it.each([
+    ['hello', 10, 'hello'],
+    ['test', 5, 'test'],
+    ['a', 2, 'a'],
+    ['hello', 5, 'hello'],
+    ['hello', Infinity, 'hello'],
+    ['test', 4, 'test'],
+    ['a', 1, 'a'],
+    ['hello world', 8, 'hello wo…'],
+    ['this is a long string', 10, 'this is a…'],
+    ['abcdefghijk', 5, 'abcde…'],
+    ['hello', 1, 'h…'],
+    ['ab', 1, 'a…'],
+    ['abc', 1, 'a…'],
+    ['abc', 0, '…'],
+    ['hello there', 6, 'hello…'],
+    ['  hello there', 6, '  hell…'],
+    ['hello@world.com', 10, 'hello@worl…'],
+    ['line1\nline2\nline3', 12, 'line1\nline2…'],
+    ['café', 3, 'caf…'],
+    ['résumé', 5, 'résum…'],
+    ['👋 hello world', 8, '👋 hello…'],
+    ['   ', 7, '   '],
+    ['   ', 2, '  …'],
+    ['  hello  ', 6, '  hell…'],
+    ['\t\n\r', 2, '\t\n…'],
+  ])('should truncate "%s" with maxLength %d to "%s"', (input, maxLength, expected) => {
+    expect(ellipsize(input, maxLength)).toBe(expected);
+  });
+
+  it.each([[NaN], [-Infinity], [-5]])('throws an error if the input is %s', input => {
+    expect(() => {
+      ellipsize('string', input);
+    }).toThrow();
+  });
+});

static/app/utils/string/ellipsize.tsx

@@ -0,0 +1,26 @@
+/**
+ * Truncates a string to a maximum length and adds an ellipsis character (…) if truncated. Similar to the Python `truncatechars`. Does not trim the string, please trim before calling this function. Does right-trim the string before output to avoid having whitespace followed by an ellipsis, unless the string is only whitespace.
+ *
+ * @example
+ * ellipsize('hello world', 8) // returns 'hello wo…'
+ * ellipsize('hello world', 6) // returns 'hello…'
+ * ellipsize('    ', 6) // returns ''
+ * ellipsize('short', 10) // returns 'short'
+ */
+export function ellipsize(str: string, length: number): string {
+  if (length < 0 || isNaN(length))
+    throw new TypeError(
+      `Invalid string length argument value of ${length} provided to ellipsize`
+    );
+
+  if (str.length <= length) return str;
+
+  // If the string is only whitespace, skip `trimRight` since trimming will completely erase the string. If the string was a long sequence of whitespace characters, that would return a loose ellipsis
+  const trimmed = str.trim();
+  if (trimmed.length === 0) return `${str.slice(0, length)}${ELLIPSIS}`;
+
+  // Otherwise, trim normally
+  return `${str.slice(0, length).trimEnd()}${ELLIPSIS}`;
+}
+
+const ELLIPSIS = `\u2026`;

static/app/views/performance/newTraceDetails/traceDrawer/tabs/traceProfiles.tsx

@@ -10,6 +10,7 @@ import {
   generateContinuousProfileFlamechartRouteWithQuery,
   generateProfileFlamechartRouteWithQuery,
 } from 'sentry/utils/profiling/routes';
+import {ellipsize} from 'sentry/utils/string/ellipsize';
 import useOrganization from 'sentry/utils/useOrganization';
 import useProjects from 'sentry/utils/useProjects';
 import {traceAnalytics} from 'sentry/views/performance/newTraceDetails/traceAnalytics';
@@ -128,9 +129,7 @@ export function TraceProfiles({tree}: {tree: TraceTree}) {
               <span>{node.value.op ?? '<unknown>'}</span> —{' '}
               <span className="TraceDescription" title={node.value.description}>
                 {node.value.description
-                  ? node.value.description.length > 100
-                    ? node.value.description.slice(0, 100).trim() + '\u2026'
-                    : node.value.description
+                  ? ellipsize(node.value.description, 100)
                   : (spanId ?? 'unknown')}
               </span>
             </Fragment>

static/app/views/performance/newTraceDetails/traceRow/traceSpanRow.tsx

@@ -1,6 +1,7 @@
 import React from 'react';
 import {PlatformIcon} from 'platformicons';
 
+import {ellipsize} from 'sentry/utils/string/ellipsize';
 import {isEAPSpanNode} from 'sentry/views/performance/newTraceDetails/traceGuards';
 import {TraceIcons} from 'sentry/views/performance/newTraceDetails/traceIcons';
 import type {TraceTree} from 'sentry/views/performance/newTraceDetails/traceModels/traceTree';
@@ -83,9 +84,7 @@ export function TraceSpanRow(
           <span className="TraceDescription" title={props.node.value.description}>
             {getNodeDescriptionPrefix(props.node)}
             {props.node.value.description
-              ? props.node.value.description.length > 100
-                ? props.node.value.description.slice(0, 100).trim() + '\u2026'
-                : props.node.value.description
+              ? ellipsize(props.node.value.description, 100)
               : (spanId ?? 'unknown')}
           </span>
         </div>