Allow truncating long activity names (#918)

Author: adhityamamallan

src/views/workflow-history/config/workflow-history-should-shorten-group-labels.config.ts

@@ -0,0 +1,3 @@
+const WORKFLOW_HISTORY_SHOULD_SHORTEN_GROUP_LABELS_CONFIG: boolean = false;
+
+export default WORKFLOW_HISTORY_SHOULD_SHORTEN_GROUP_LABELS_CONFIG;

src/views/workflow-history/helpers/get-history-group-from-events/__tests__/get-activity-group-from-events.test.ts

@@ -10,13 +10,28 @@ import {
   pendingActivityTaskStartEvent,
   pendingActivityTaskStartEventWithStartedState,
 } from '@/views/workflow-history/__fixtures__/workflow-history-pending-events';
+import * as shortenGroupLabelsConfigModule from '@/views/workflow-history/config/workflow-history-should-shorten-group-labels.config';
 
 import type { ExtendedActivityHistoryEvent } from '../../../workflow-history.types';
 import getActivityGroupFromEvents from '../get-activity-group-from-events';
 
 jest.useFakeTimers().setSystemTime(new Date('2024-05-25'));
 
+jest.mock(
+  '@/views/workflow-history/config/workflow-history-should-shorten-group-labels.config',
+  () => ({
+    __esModule: true,
+    get default() {
+      return false;
+    },
+  })
+);
+
 describe('getActivityGroupFromEvents', () => {
+  beforeEach(() => {
+    jest.clearAllMocks();
+  });
+
   it('should return a group with a proper label when scheduled event exists', () => {
     const events: ExtendedActivityHistoryEvent[] = [scheduleActivityTaskEvent];
 
@@ -254,4 +269,46 @@ describe('getActivityGroupFromEvents', () => {
     ]);
     expect(groupWithMissingCloseEvent.closeTimeMs).toEqual(null);
   });
+
+  it('should return a short label when short names are enabled and activityName contains a dot', () => {
+    jest
+      .spyOn(shortenGroupLabelsConfigModule, 'default', 'get')
+      .mockReturnValueOnce(true);
+
+    const events: ExtendedActivityHistoryEvent[] = [scheduleActivityTaskEvent];
+
+    const group = getActivityGroupFromEvents(events);
+
+    expect(group.shortLabel).toBe('Activity 0: Start');
+
+    const eventsWithoutDot: ExtendedActivityHistoryEvent[] = [
+      {
+        ...scheduleActivityTaskEvent,
+        activityTaskScheduledEventAttributes: {
+          ...scheduleActivityTaskEvent.activityTaskScheduledEventAttributes,
+          activityType: {
+            ...scheduleActivityTaskEvent.activityTaskScheduledEventAttributes
+              .activityType,
+            name: 'name-without-dot',
+          },
+        },
+      },
+    ];
+
+    const groupWithoutDot = getActivityGroupFromEvents(eventsWithoutDot);
+
+    expect(groupWithoutDot.shortLabel).toBeUndefined();
+  });
+
+  it('should return no short label when short names are disabled', () => {
+    jest
+      .spyOn(shortenGroupLabelsConfigModule, 'default', 'get')
+      .mockReturnValueOnce(false);
+
+    const events: ExtendedActivityHistoryEvent[] = [scheduleActivityTaskEvent];
+
+    const group = getActivityGroupFromEvents(events);
+
+    expect(group.shortLabel).toBeUndefined();
+  });
 });

src/views/workflow-history/helpers/get-history-group-from-events/get-activity-group-from-events.ts

@@ -1,3 +1,4 @@
+import WORKFLOW_HISTORY_SHOULD_SHORTEN_GROUP_LABELS_CONFIG from '../../config/workflow-history-should-shorten-group-labels.config';
 import type {
   ActivityHistoryGroup,
   ExtendedActivityHistoryEvent,
@@ -11,6 +12,7 @@ export default function getActivityGroupFromEvents(
   events: ExtendedActivityHistoryEvent[]
 ): ActivityHistoryGroup {
   let label = '';
+  let shortLabel = undefined;
   const groupType = 'Activity';
   const badges = [];
 
@@ -44,7 +46,18 @@ export default function getActivityGroupFromEvents(
 
   // getting group label
   if (scheduleEvent && scheduleAttr in scheduleEvent) {
-    label = `Activity ${scheduleEvent[scheduleAttr]?.activityId}: ${scheduleEvent[scheduleAttr]?.activityType?.name}`;
+    const activityName = scheduleEvent[scheduleAttr]?.activityType?.name;
+    const activityId = scheduleEvent[scheduleAttr]?.activityId;
+    label = `Activity ${activityId}: ${activityName}`;
+
+    if (
+      WORKFLOW_HISTORY_SHOULD_SHORTEN_GROUP_LABELS_CONFIG &&
+      activityName?.includes('.')
+    ) {
+      shortLabel = `Activity ${activityId}: ${(activityName || '')
+        .split(/[./]/g)
+        .pop()}`;
+    }
   }
 
   // getting retry badge
@@ -97,6 +110,7 @@ export default function getActivityGroupFromEvents(
 
   return {
     label,
+    shortLabel,
     hasMissingEvents,
     groupType,
     badges,

src/views/workflow-history/workflow-history-compact-event-card/__tests__/workflow-history-compact-event-card.test.tsx

@@ -18,6 +18,11 @@ jest.mock<typeof WorkflowHistoryEventsDurationBadge>(
   () => jest.fn(() => <div>Duration Badge</div>)
 );
 
+jest.mock(
+  '../../workflow-history-group-label/workflow-history-group-label',
+  () => jest.fn((props) => <>{props.label}</>)
+);
+
 describe('WorkflowHistoryCompactEventCard', () => {
   beforeEach(() => {
     jest.clearAllMocks();

src/views/workflow-history/workflow-history-compact-event-card/workflow-history-compact-event-card.tsx

@@ -9,6 +9,7 @@ import useStyletronClasses from '@/hooks/use-styletron-classes';
 
 import WorkflowHistoryEventStatusBadge from '../workflow-history-event-status-badge/workflow-history-event-status-badge';
 import WorkflowHistoryEventsDurationBadge from '../workflow-history-events-duration-badge/workflow-history-events-duration-badge';
+import WorkflowHistoryGroupLabel from '../workflow-history-group-label/workflow-history-group-label';
 
 import {
   cssStyles,
@@ -20,6 +21,7 @@ export default function WorkflowHistoryCompactEventCard({
   status,
   statusReady,
   label,
+  shortLabel,
   showLabelPlaceholder,
   selected,
   disabled,
@@ -54,7 +56,7 @@ export default function WorkflowHistoryCompactEventCard({
       <div className={cls.textContainer}>
         {label && !showLabelPlaceholder && (
           <div className={cls.label}>
-            {label}
+            <WorkflowHistoryGroupLabel label={label} shortLabel={shortLabel} />
             {hasBadges &&
               badges.map((badge) => (
                 <Badge

src/views/workflow-history/workflow-history-compact-event-card/workflow-history-compact-event-card.types.ts

@@ -14,6 +14,7 @@ export type Props = Pick<
   | 'resetToDecisionEventId'
   | 'startTimeMs'
   | 'closeTimeMs'
+  | 'shortLabel'
 > & {
   statusReady: boolean;
   showLabelPlaceholder?: boolean;

src/views/workflow-history/workflow-history-export-json-button/workflow-history-export-json-button.tsx

@@ -66,7 +66,9 @@ export default function WorkflowHistoryExportJsonButton(props: Props) {
         kind="secondary"
         startEnhancer={<MdOutlineCloudDownload size={16} />}
         onClick={handleExport}
-        endEnhancer={loadingState === 'loading' && <Spinner $size={16} />}
+        endEnhancer={
+          loadingState === 'loading' ? <Spinner $size={16} /> : undefined
+        }
       >
         Export JSON
       </Button>

src/views/workflow-history/workflow-history-group-label/__tests__/workflow-history-group-label.test.tsx

@@ -0,0 +1,36 @@
+import React from 'react';
+
+import { render, screen, userEvent } from '@/test-utils/rtl';
+
+import WorkflowHistoryGroupLabel from '../workflow-history-group-label';
+
+describe('WorkflowHistoryGroupLabel', () => {
+  it('renders just the label when shortLabel is not provided', () => {
+    render(
+      <WorkflowHistoryGroupLabel label="Activity 0: activity.cron.Start" />
+    );
+    expect(
+      screen.getByText('Activity 0: activity.cron.Start')
+    ).toBeInTheDocument();
+  });
+
+  it('renders shortLabel with tooltip containing full label when shortLabel is provided', async () => {
+    const user = userEvent.setup();
+
+    render(
+      <WorkflowHistoryGroupLabel
+        label="Activity 0: activity.cron.Start"
+        shortLabel="Activity 0: Start"
+      />
+    );
+
+    const label = await screen.findByText('Activity 0: Start');
+    expect(label).toBeInTheDocument();
+
+    await user.hover(label);
+
+    expect(
+      await screen.findByText('Activity 0: activity.cron.Start')
+    ).toBeInTheDocument();
+  });
+});

src/views/workflow-history/workflow-history-group-label/workflow-history-group-label.tsx

@@ -0,0 +1,24 @@
+import { StatefulTooltip } from 'baseui/tooltip';
+
+import { type Props } from './workflow-history-group-label.types';
+
+export default function WorkflowHistoryGroupLabel({
+  label,
+  shortLabel,
+}: Props) {
+  if (!shortLabel) return <>{label}</>;
+
+  return (
+    <StatefulTooltip
+      showArrow
+      placement="bottom"
+      popoverMargin={8}
+      accessibilityType="tooltip"
+      content={() => label}
+      returnFocus
+      autoFocus
+    >
+      {shortLabel}
+    </StatefulTooltip>
+  );
+}

src/views/workflow-history/workflow-history-group-label/workflow-history-group-label.types.ts

@@ -0,0 +1,4 @@
+export type Props = {
+  label: string;
+  shortLabel?: string;
+};