Add single line summary for history events in Workflow History UI (#996)

* Use summaryFields in event metadata to display a one-line event summary in Workflow History
* Create a parser config that runs on top of history event details to get summary fields to render
* Render summary fields with tooltips (if not disabled)
* Create custom one-line JSON component which shows the full JSON in a custom tooltip
* Update grouped event card header styling to accommodate event summary
* Update grouped event card props to accept entire eventMetadata (and update tests)
* Hide summary when panel is expanded
* Update ungrouped view grid template to add space for event summary
* Hide summary when panel is expanded

Author: adhityamamallan

src/views/workflow-history/config/workflow-history-event-summary-field-parsers.config.ts

@@ -0,0 +1,32 @@
+import { MdOutlineMonitorHeart, MdOutlineTimer } from 'react-icons/md';
+
+import { type WorkflowHistoryEventSummaryFieldParser } from '../workflow-history-event-summary/workflow-history-event-summary.types';
+import WorkflowHistoryEventSummaryJson from '../workflow-history-event-summary-json/workflow-history-event-summary-json';
+
+const workflowHistoryEventSummaryFieldParsersConfig: Array<WorkflowHistoryEventSummaryFieldParser> =
+  [
+    {
+      name: 'Heartbeat time',
+      matcher: (name) => name === 'lastHeartbeatTime',
+      icon: MdOutlineMonitorHeart,
+    },
+    {
+      name: 'Json as PrettyJson',
+      matcher: (name, value) =>
+        value !== null &&
+        new RegExp(
+          '(input|result|details|failureDetails|Error|lastCompletionResult|heartbeatDetails)$'
+        ).test(name),
+      icon: null,
+      customRenderValue: WorkflowHistoryEventSummaryJson,
+      hideDefaultTooltip: true,
+    },
+    {
+      name: 'Timeouts with timer icon',
+      matcher: (name) =>
+        new RegExp('(TimeoutSeconds|BackoffSeconds|InSeconds)$').test(name),
+      icon: MdOutlineTimer,
+    },
+  ];
+
+export default workflowHistoryEventSummaryFieldParsersConfig;

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

@@ -410,8 +410,8 @@ describe('getActivityGroupFromEvents', () => {
       (metadata) => metadata.label === 'Started'
     );
     expect(startedEventMetadata?.summaryFields).toEqual([
-      'lastHeartbeatTime',
       'heartbeatDetails',
+      'lastHeartbeatTime',
     ]);
 
     // The completed event should also have summaryFields

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

@@ -159,8 +159,8 @@ export default function getActivityGroupFromEvents(
         'scheduleToCloseTimeoutSeconds',
       ],
       activityTaskStartedEventAttributes: [
-        'lastHeartbeatTime',
         'heartbeatDetails',
+        'lastHeartbeatTime',
       ],
       activityTaskCompletedEventAttributes: ['result'],
       activityTaskFailedEventAttributes: ['details', 'reason'],

src/views/workflow-history/workflow-history-event-details/workflow-history-event-details.types.ts

@@ -1,4 +1,4 @@
-import { type WorkflowPageTabsParams } from '@/views/workflow-page/workflow-page-tabs/workflow-page-tabs.types';
+import { type WorkflowPageParams } from '@/views/workflow-page/workflow-page.types';
 
 import type {
   ExtendedHistoryEvent,
@@ -23,7 +23,7 @@ export type WorkflowHistoryEventDetailsValueComponentProps = {
   entryPath: string;
   entryValue: any;
   isNegative?: boolean;
-} & WorkflowPageTabsParams;
+} & WorkflowPageParams;
 
 export type WorkflowHistoryEventDetailsConfig = {
   name: string;

src/views/workflow-history/workflow-history-event-summary-json/__tests__/workflow-history-event-summary-json.test.tsx

@@ -0,0 +1,85 @@
+import React from 'react';
+
+import { render, screen, userEvent, waitFor } from '@/test-utils/rtl';
+
+import WorkflowHistoryEventSummaryJson from '../workflow-history-event-summary-json';
+
+jest.mock(
+  '../../workflow-history-event-details-json/workflow-history-event-details-json',
+  () =>
+    jest.fn(({ entryValue, isNegative }) => (
+      <div data-testid="mock-details-json" data-negative={isNegative ?? false}>
+        {JSON.stringify(entryValue)}
+      </div>
+    ))
+);
+
+describe(WorkflowHistoryEventSummaryJson.name, () => {
+  it('renders correctly with default props', () => {
+    setup();
+
+    expect(screen.getByText(/{"test":"data"}/)).toBeInTheDocument();
+  });
+
+  it('renders the label correctly in tooltip', async () => {
+    const { user } = setup();
+
+    const jsonContainer = screen.getByText(/{"test":"data"}/);
+    await user.hover(jsonContainer);
+
+    expect(await screen.findByText('Test Field')).toBeInTheDocument();
+  });
+
+  it('passes isNegative prop correctly to details component', async () => {
+    const { user } = setup({ isNegative: true });
+
+    const jsonContainer = screen.getByText(/{"test":"data"}/);
+    await user.hover(jsonContainer);
+
+    const detailsJson = await screen.findByTestId('mock-details-json');
+    expect(detailsJson).toHaveAttribute('data-negative', 'true');
+  });
+
+  it('shows tooltip content on hover', async () => {
+    const { user } = setup();
+
+    const jsonContainer = screen.getByText(/{"test":"data"}/);
+    await user.hover(jsonContainer);
+
+    expect(await screen.findByText('Test Field')).toBeInTheDocument();
+    expect(await screen.findByTestId('mock-details-json')).toBeInTheDocument();
+  });
+
+  it('hides tooltip on unhover', async () => {
+    const { user } = setup();
+
+    const jsonContainer = screen.getByText(/{"test":"data"}/);
+    await user.hover(jsonContainer);
+
+    expect(await screen.findByText('Test Field')).toBeInTheDocument();
+
+    await user.unhover(jsonContainer);
+
+    await waitFor(() => {
+      expect(screen.queryByText('Test Field')).not.toBeInTheDocument();
+    });
+  });
+});
+
+function setup({ isNegative = false }: { isNegative?: boolean } = {}) {
+  const user = userEvent.setup();
+
+  const renderResult = render(
+    <WorkflowHistoryEventSummaryJson
+      label="Test Field"
+      value={{ test: 'data' }}
+      isNegative={isNegative}
+      domain="test-domain"
+      cluster="test-cluster"
+      workflowId="test-workflow-id"
+      runId="test-run-id"
+    />
+  );
+
+  return { user, ...renderResult };
+}

src/views/workflow-history/workflow-history-event-summary-json/workflow-history-event-summary-json.styles.ts

@@ -0,0 +1,49 @@
+import { styled as createStyled, type Theme } from 'baseui';
+import { type PopoverOverrides } from 'baseui/popover';
+import { type StyleObject } from 'styletron-react';
+
+export const styled = {
+  JsonViewContainer: createStyled<'div', { $isNegative: boolean }>(
+    'div',
+    ({ $theme, $isNegative }) => ({
+      padding: `${$theme.sizing.scale0} ${$theme.sizing.scale300}`,
+      color: $isNegative ? $theme.colors.contentNegative : '#A964F7',
+      backgroundColor: $isNegative
+        ? $theme.colors.backgroundNegativeLight
+        : $theme.colors.backgroundSecondary,
+      borderRadius: $theme.borders.radius300,
+      maxHeight: $theme.sizing.scale800,
+      maxWidth: '360px',
+      overflow: 'hidden',
+      whiteSpace: 'nowrap',
+      textOverflow: 'ellipsis',
+      ...$theme.typography.MonoParagraphXSmall,
+    })
+  ),
+  JsonPreviewContainer: createStyled('div', ({ $theme }) => ({
+    display: 'flex',
+    flexDirection: 'column',
+    alignItems: 'flex-start',
+    gap: $theme.sizing.scale200,
+  })),
+  JsonPreviewLabel: createStyled('div', ({ $theme }) => ({
+    ...$theme.typography.LabelXSmall,
+  })),
+};
+
+export const overrides = {
+  popover: {
+    Arrow: {
+      style: ({ $theme }: { $theme: Theme }): StyleObject => ({
+        backgroundColor: $theme.colors.backgroundPrimary,
+      }),
+    },
+    Inner: {
+      style: ({ $theme }: { $theme: Theme }): StyleObject => ({
+        backgroundColor: $theme.colors.backgroundPrimary,
+        color: $theme.colors.contentPrimary,
+        maxWidth: '500px',
+      }),
+    },
+  } satisfies PopoverOverrides,
+};

src/views/workflow-history/workflow-history-event-summary-json/workflow-history-event-summary-json.tsx

@@ -0,0 +1,39 @@
+import { StatefulTooltip } from 'baseui/tooltip';
+
+import losslessJsonStringify from '@/utils/lossless-json-stringify';
+
+import WorkflowHistoryEventDetailsJson from '../workflow-history-event-details-json/workflow-history-event-details-json';
+import { type EventSummaryValueComponentProps } from '../workflow-history-event-summary/workflow-history-event-summary.types';
+
+import {
+  overrides,
+  styled,
+} from './workflow-history-event-summary-json.styles';
+
+export default function WorkflowHistoryEventSummaryJson({
+  value,
+  label,
+  isNegative,
+}: EventSummaryValueComponentProps) {
+  return (
+    <StatefulTooltip
+      content={
+        <styled.JsonPreviewContainer>
+          <styled.JsonPreviewLabel>{label}</styled.JsonPreviewLabel>
+          <WorkflowHistoryEventDetailsJson
+            entryValue={value}
+            isNegative={isNegative}
+          />
+        </styled.JsonPreviewContainer>
+      }
+      ignoreBoundary
+      placement="bottom"
+      showArrow
+      overrides={overrides.popover}
+    >
+      <styled.JsonViewContainer $isNegative={isNegative ?? false}>
+        {losslessJsonStringify(value)}
+      </styled.JsonViewContainer>
+    </StatefulTooltip>
+  );
+}