Group history fields (#694)

* init commit for grouping

* Clean up UI for grouping and fix issues

* Add unit tests

* remove unused fixture

* Temp commit

* Fix implementation

* Code cleanup

* Remove need for label, and rename components

* remove label from fixture too

Author: adhityamamallan

src/views/workflow-history/__fixtures__/mock-workflow-history-details-entries.ts

@@ -0,0 +1,77 @@
+import { type WorkflowHistoryEventDetailsEntries } from '../workflow-history-event-details/workflow-history-event-details.types';
+
+export const mockWorkflowHistoryDetailsEntries: WorkflowHistoryEventDetailsEntries =
+  [
+    {
+      key: 'version',
+      path: 'version',
+      isGroup: false,
+      value: 1,
+      renderConfig: null,
+    },
+    {
+      key: 'taskId',
+      path: 'taskId',
+      isGroup: false,
+      value: '1234567890',
+      renderConfig: null,
+    },
+    {
+      key: 'eventId',
+      path: 'eventId',
+      isGroup: false,
+      value: 1,
+      renderConfig: null,
+    },
+    {
+      key: 'timestamp',
+      path: 'timestamp',
+      isGroup: false,
+      value: new Date('2024-10-14T12:34:18.721Z'),
+      renderConfig: null,
+    },
+    {
+      key: 'fields',
+      path: 'header.fields',
+      isGroup: true,
+      renderConfig: null,
+      groupEntries: [
+        {
+          key: 'data',
+          path: 'header.fields.mockField1.data',
+          isGroup: false,
+          value: 'mock-data-1',
+          renderConfig: null,
+        },
+        {
+          key: 'data',
+          path: 'header.fields.mockField2.data',
+          isGroup: false,
+          value: 'mock-data-2',
+          renderConfig: null,
+        },
+        {
+          key: 'data',
+          path: 'header.fields.mockField3.data',
+          isGroup: true,
+          renderConfig: null,
+          groupEntries: [
+            {
+              key: 'subField',
+              path: 'header.fields.mockField3.data.subField',
+              isGroup: false,
+              value: 'mock-data-3.1',
+              renderConfig: null,
+            },
+            {
+              key: 'subTimestamp',
+              path: 'header.fields.mockField3.data.subTimestamp',
+              isGroup: false,
+              value: new Date('2024-10-14T11:34:18.721Z'),
+              renderConfig: null,
+            },
+          ],
+        },
+      ],
+    },
+  ];

src/views/workflow-history/__fixtures__/workflow-page-url-params.ts

@@ -0,0 +1,9 @@
+import { type WorkflowPageTabsParams } from '@/views/workflow-page/workflow-page-tabs/workflow-page-tabs.types';
+
+export const workflowPageUrlParams: WorkflowPageTabsParams = {
+  cluster: 'testCluster',
+  domain: 'testDomain',
+  workflowId: 'testWorkflowId',
+  runId: 'testRunId',
+  workflowTab: 'history',
+};

src/views/workflow-history/workflow-history-event-details-entry/__tests__/workflow-history-event-details-entry.test.tsx

@@ -0,0 +1,59 @@
+import React from 'react';
+
+import { render } from '@/test-utils/rtl';
+
+import { workflowPageUrlParams } from '../../__fixtures__/workflow-page-url-params';
+import { type WorkflowHistoryEventDetailsValueComponentProps } from '../../workflow-history-event-details/workflow-history-event-details.types';
+import WorkflowHistoryEventDetailsEntry from '../workflow-history-event-details-entry';
+import { type Props } from '../workflow-history-event-details-entry.types';
+
+describe(WorkflowHistoryEventDetailsEntry.name, () => {
+  it('renders the custom ValueComponent when provided', () => {
+    const CustomComponent = ({
+      entryKey,
+      entryPath,
+      entryValue,
+    }: WorkflowHistoryEventDetailsValueComponentProps) => (
+      <div>
+        {entryKey} - {entryPath} - {entryValue}
+      </div>
+    );
+
+    const props: Props = {
+      entryKey: 'key1',
+      entryPath: 'path1',
+      entryValue: 'value1',
+      renderConfig: {
+        name: 'Mock render config with custom component',
+        customMatcher: () => true,
+        valueComponent: CustomComponent,
+      },
+      ...workflowPageUrlParams,
+    };
+
+    const { getByText } = render(
+      <WorkflowHistoryEventDetailsEntry {...props} />
+    );
+
+    expect(getByText('key1 - path1 - value1')).toBeInTheDocument();
+  });
+
+  it('renders the entryValue as a string when ValueComponent is not provided', () => {
+    const props: Props = {
+      entryKey: 'key2',
+      entryPath: 'path2',
+      entryValue: 'value2',
+      renderConfig: {
+        name: 'Mock render config without custom component',
+        customMatcher: () => true,
+      },
+      ...workflowPageUrlParams,
+    };
+
+    const { getByText } = render(
+      <WorkflowHistoryEventDetailsEntry {...props} />
+    );
+
+    expect(getByText('value2')).toBeInTheDocument();
+  });
+});

src/views/workflow-history/workflow-history-event-details-entry/workflow-history-event-details-entry.tsx

@@ -0,0 +1,24 @@
+import { type Props } from './workflow-history-event-details-entry.types';
+
+export default function WorkflowHistoryEventDetailsEntry({
+  entryKey,
+  entryPath,
+  entryValue,
+  renderConfig,
+  ...decodedPageUrlParams
+}: Props) {
+  const ValueComponent = renderConfig?.valueComponent;
+
+  if (ValueComponent !== undefined) {
+    return (
+      <ValueComponent
+        entryKey={entryKey}
+        entryPath={entryPath}
+        entryValue={entryValue}
+        {...decodedPageUrlParams}
+      />
+    );
+  }
+
+  return String(entryValue);
+}

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

@@ -0,0 +1,8 @@
+import {
+  type WorkflowHistoryEventDetailsConfig,
+  type WorkflowHistoryEventDetailsValueComponentProps,
+} from '../workflow-history-event-details/workflow-history-event-details.types';
+
+export type Props = WorkflowHistoryEventDetailsValueComponentProps & {
+  renderConfig: WorkflowHistoryEventDetailsConfig | null;
+};

src/views/workflow-history/workflow-history-event-details-group/__tests__/workflow-history-event-details-group.test.tsx

@@ -0,0 +1,80 @@
+import React from 'react';
+
+import { render, screen, within } from '@/test-utils/rtl';
+
+import { mockWorkflowHistoryDetailsEntries } from '../../__fixtures__/mock-workflow-history-details-entries';
+import { workflowPageUrlParams } from '../../__fixtures__/workflow-page-url-params';
+import WorkflowHistoryEventDetailsGroup from '../workflow-history-event-details-group';
+
+jest.mock('../helpers/get-details-field-label', () =>
+  jest.fn().mockImplementation(({ label }) => label)
+);
+
+jest.mock(
+  '../../workflow-history-event-details-entry/workflow-history-event-details-entry',
+  () => jest.fn(({ entryValue }) => <div>{String(entryValue)}</div>)
+);
+
+describe(WorkflowHistoryEventDetailsGroup.name, () => {
+  it('renders without crashing', () => {
+    render(
+      <WorkflowHistoryEventDetailsGroup
+        entries={mockWorkflowHistoryDetailsEntries}
+        decodedPageUrlParams={workflowPageUrlParams}
+      />
+    );
+  });
+
+  it('renders the correct number of divs', () => {
+    render(
+      <WorkflowHistoryEventDetailsGroup
+        entries={mockWorkflowHistoryDetailsEntries}
+        decodedPageUrlParams={workflowPageUrlParams}
+      />
+    );
+
+    const detailsRows = screen.getAllByTestId('details-row');
+    // The mock details object has 10 key-value pairs in total, including children
+    expect(detailsRows).toHaveLength(10);
+  });
+
+  it('stops recursion if an object has a value component defined in its render config', () => {
+    render(
+      <WorkflowHistoryEventDetailsGroup
+        entries={mockWorkflowHistoryDetailsEntries}
+        decodedPageUrlParams={workflowPageUrlParams}
+      />
+    );
+
+    const detailsRows = screen.getAllByTestId('details-row');
+
+    const firstDate = detailsRows[3];
+    expect(
+      within(firstDate).getByText(/Mon Oct 14 2024 12:34:18/)
+    ).toBeDefined();
+
+    const secondDate = detailsRows[9];
+    expect(
+      within(secondDate).getByText(/Mon Oct 14 2024 11:34:18/)
+    ).toBeDefined();
+  });
+
+  it('renders nested details correctly', () => {
+    render(
+      <WorkflowHistoryEventDetailsGroup
+        entries={mockWorkflowHistoryDetailsEntries}
+        decodedPageUrlParams={workflowPageUrlParams}
+      />
+    );
+
+    const detailsRows = screen.getAllByTestId('details-row');
+
+    const headerSubRows = within(detailsRows[4]).getAllByTestId('details-row');
+    expect(headerSubRows).toHaveLength(5);
+
+    const field3SubRows = within(headerSubRows[2]).getAllByTestId(
+      'details-row'
+    );
+    expect(field3SubRows).toHaveLength(2);
+  });
+});

src/views/workflow-history/workflow-history-event-details-group/helpers/__tests__/get-details-field-label.test.ts

@@ -0,0 +1,92 @@
+import {
+  type WorkflowHistoryEventDetailsGroupEntry,
+  type WorkflowHistoryEventDetailsEntry,
+} from '../../../workflow-history-event-details/workflow-history-event-details.types';
+import getDetailsFieldLabel from '../get-details-field-label';
+
+const singleEntry: WorkflowHistoryEventDetailsEntry = {
+  key: 'testKey',
+  path: 'testKey',
+  isGroup: false,
+  value: 'testValue',
+  renderConfig: {
+    name: 'Mock render config without custom label',
+    customMatcher: () => true,
+  },
+};
+
+const groupEntry: WorkflowHistoryEventDetailsGroupEntry = {
+  key: 'testKey',
+  path: 'testKey',
+  isGroup: true,
+  groupEntries: [
+    {
+      key: 'testKey1',
+      path: 'testKey.testKey1',
+      isGroup: false,
+      value: 'testValue1',
+      renderConfig: null,
+    },
+    {
+      key: 'testKey2',
+      path: 'testKey.testKey2',
+      isGroup: false,
+      value: 'testValue2',
+      renderConfig: null,
+    },
+  ],
+  renderConfig: {
+    name: 'Mock render config without custom label',
+    customMatcher: () => true,
+  },
+};
+
+describe('getDetailsFieldLabel', () => {
+  it('should return the label from renderConfig if getLabel is defined', () => {
+    const mockGetLabel = jest.fn().mockReturnValue('Custom Label');
+
+    const entry = {
+      ...singleEntry,
+      renderConfig: {
+        name: 'Mock render config with custom label',
+        customMatcher: () => true,
+        getLabel: mockGetLabel,
+      },
+    };
+
+    expect(getDetailsFieldLabel(entry)).toBe('Custom Label');
+
+    expect(mockGetLabel).toHaveBeenCalledWith({
+      key: 'testKey',
+      path: 'testKey',
+      value: 'testValue',
+    });
+  });
+
+  it('should return the default label if renderConfig.getLabel is not defined', () => {
+    expect(getDetailsFieldLabel(singleEntry)).toBe('testKey');
+  });
+
+  it('should append the number of entries to label for group entries', () => {
+    const entry = {
+      ...groupEntry,
+      renderConfig: {
+        name: 'Mock render config with custom label',
+        customMatcher: () => true,
+        getLabel: jest.fn().mockReturnValue('Custom Label'),
+      },
+    };
+
+    expect(getDetailsFieldLabel(entry)).toBe('Custom Label (2)');
+  });
+
+  it('should append the number of entries to default label for group entries', () => {
+    expect(getDetailsFieldLabel(groupEntry)).toBe('testKey (2)');
+  });
+
+  it('should subtract the parent path correctly for a child path', () => {
+    expect(getDetailsFieldLabel(groupEntry.groupEntries[0], 'testKey')).toBe(
+      'testKey1'
+    );
+  });
+});

src/views/workflow-history/workflow-history-event-details-group/helpers/get-details-field-label.ts

@@ -0,0 +1,30 @@
+import {
+  type WorkflowHistoryEventDetailsGroupEntry,
+  type WorkflowHistoryEventDetailsEntry,
+} from '../../workflow-history-event-details/workflow-history-event-details.types';
+
+export default function getDetailsFieldLabel(
+  entry:
+    | WorkflowHistoryEventDetailsEntry
+    | WorkflowHistoryEventDetailsGroupEntry,
+  parentGroupPath: string = ''
+) {
+  const defaultLabel =
+    parentGroupPath && entry.path.startsWith(parentGroupPath + '.')
+      ? entry.path.slice(parentGroupPath.length + 1)
+      : entry.path;
+
+  const mainLabel = entry.renderConfig?.getLabel
+    ? entry.renderConfig.getLabel({
+        key: entry.key,
+        path: entry.path,
+        value: entry.isGroup ? undefined : entry.value,
+      })
+    : defaultLabel;
+
+  const groupSuffix = entry.isGroup
+    ? ' ' + `(${entry.groupEntries.length})`
+    : '';
+
+  return mainLabel + groupSuffix;
+}