Json history event details (#688)

* history event details list

* fix typecheck

* use format in export json and move tasklist link dir

* fix type check

* json details viewer

Author: Assem-Hafez

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

@@ -1,9 +1,7 @@
-import { createElement } from 'react';
-
-import PrettyJson from '@/components/pretty-json/pretty-json';
 import formatDate from '@/utils/data-formatters/format-date';
 
 import { type WorkflowHistoryEventDetailsConfig } from '../workflow-history-event-details/workflow-history-event-details.types';
+import WorkflowHistoryEventDetailsJson from '../workflow-history-event-details-json/workflow-history-event-details-json';
 import WorkflowHistoryEventDetailsTaskListLink from '../workflow-history-event-details-task-list-link/workflow-history-event-details-task-list-link';
 
 const workflowHistoryEventDetailsConfig = [
@@ -25,11 +23,8 @@ const workflowHistoryEventDetailsConfig = [
   {
     name: 'Json as PrettyJson',
     pathRegex: '.*(input|result|details|Error)$',
-    valueComponent: ({ entryValue }) => {
-      return createElement(PrettyJson, {
-        json: entryValue,
-      });
-    },
+    valueComponent: WorkflowHistoryEventDetailsJson,
+    forceWrap: true,
   },
   {
     name: 'Duration timeout & backoff seconds',

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

@@ -0,0 +1,56 @@
+import React from 'react';
+
+import copy from 'copy-to-clipboard';
+
+import { render, fireEvent, screen, act } from '@/test-utils/rtl';
+
+import WorkflowSummaryTabJsonView from '../workflow-history-event-details-json';
+
+// Mock dependencies
+jest.mock('copy-to-clipboard', jest.fn);
+
+jest.mock('@/components/pretty-json/pretty-json', () =>
+  jest.fn(() => <div>PrettyJson Mock</div>)
+);
+
+describe('WorkflowSummaryTabJsonView Component', () => {
+  const inputJson = { input: 'inputJson' };
+
+  it('renders correctly with initial props', () => {
+    const { getByText } = render(
+      <WorkflowSummaryTabJsonView entryValue={inputJson} />
+    );
+
+    expect(getByText('PrettyJson Mock')).toBeInTheDocument();
+  });
+
+  it('copies JSON to clipboard', () => {
+    render(<WorkflowSummaryTabJsonView entryValue={inputJson} />);
+
+    const copyButton = screen.getByRole('button');
+    fireEvent.click(copyButton);
+
+    expect(copy).toHaveBeenCalledWith(JSON.stringify(inputJson, null, '\t'));
+  });
+
+  it('show tooltip for 1 second and remove it', () => {
+    jest.useFakeTimers();
+
+    render(<WorkflowSummaryTabJsonView entryValue={inputJson} />);
+
+    const copyButton = screen.getByRole('button');
+    fireEvent.click(copyButton);
+    const visibleTooltip = screen.getByText('Copied');
+    expect(visibleTooltip).toBeInTheDocument();
+
+    act(() => {
+      jest.advanceTimersByTime(1000 + 500); //hide + animation duration
+    });
+
+    // Ensure the tooltip is hidden after 1000ms
+    const hiddenTooltip = screen.queryByText('Copied');
+    expect(hiddenTooltip).not.toBeInTheDocument();
+
+    jest.useRealTimers();
+  });
+});

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

@@ -0,0 +1,27 @@
+import type {
+  StyletronCSSObject,
+  StyletronCSSObjectOf,
+} from '@/hooks/use-styletron-classes';
+
+const cssStylesObj = {
+  jsonViewWrapper: {
+    position: 'relative',
+    width: '100%',
+  },
+  jsonViewContainer: (theme) => ({
+    padding: theme.sizing.scale600,
+    backgroundColor: theme.colors.backgroundSecondary,
+    borderRadius: theme.borders.radius300,
+    maxHeight: '50vh',
+    overflow: 'auto',
+  }),
+  jsonViewHeader: (theme) => ({
+    display: 'flex',
+    position: 'absolute',
+    right: theme.sizing.scale400,
+    top: theme.sizing.scale400,
+  }),
+} satisfies StyletronCSSObject;
+
+export const cssStyles: StyletronCSSObjectOf<typeof cssStylesObj> =
+  cssStylesObj;

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

@@ -0,0 +1,56 @@
+'use client';
+import React, { useEffect, useState } from 'react';
+
+import { Button, KIND as BUTTON_KIND, SHAPE, SIZE } from 'baseui/button';
+import { ACCESSIBILITY_TYPE, Tooltip } from 'baseui/tooltip';
+import copy from 'copy-to-clipboard';
+import { MdCopyAll } from 'react-icons/md';
+
+import PrettyJson from '@/components/pretty-json/pretty-json';
+import useStyletronClasses from '@/hooks/use-styletron-classes';
+
+import { cssStyles } from './workflow-history-event-details-json.styles';
+import type { Props } from './workflow-history-event-details-json.types';
+
+export default function WorkflowHistoryEventDetailsJson({ entryValue }: Props) {
+  const { cls } = useStyletronClasses(cssStyles);
+  const [showTooltip, setShowTooltip] = useState(false);
+
+  useEffect(() => {
+    if (showTooltip) {
+      const timer = setTimeout(() => {
+        setShowTooltip(false);
+      }, 1000);
+      return () => clearTimeout(timer);
+    }
+  }, [showTooltip]);
+  return (
+    <div className={cls.jsonViewWrapper}>
+      <div className={cls.jsonViewContainer}>
+        <div className={cls.jsonViewHeader}>
+          <Tooltip
+            animateOutTime={400}
+            isOpen={showTooltip}
+            showArrow
+            placement="bottom"
+            accessibilityType={ACCESSIBILITY_TYPE.tooltip}
+            content={() => <>Copied</>}
+          >
+            <Button
+              onClick={() => {
+                copy(JSON.stringify(entryValue, null, '\t'));
+                setShowTooltip(true);
+              }}
+              size={SIZE.mini}
+              shape={SHAPE.circle}
+              kind={BUTTON_KIND.secondary}
+            >
+              <MdCopyAll />
+            </Button>
+          </Tooltip>
+        </div>
+        <PrettyJson json={entryValue} />
+      </div>
+    </div>
+  );
+}

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

@@ -0,0 +1,6 @@
+import { type WorkflowHistoryEventDetailsValueComponentProps } from '../workflow-history-event-details/workflow-history-event-details.types';
+
+export type Props = Pick<
+  WorkflowHistoryEventDetailsValueComponentProps,
+  'entryValue'
+>;

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

@@ -1,37 +1,48 @@
+import { styled as createStyled, type Theme } from 'baseui';
+
 import type {
   StyletronCSSObject,
   StyletronCSSObjectOf,
 } from '@/hooks/use-styletron-classes';
 
+export const styled = {
+  DetailsRow: createStyled<'div', { $forceWrap?: boolean }>(
+    'div',
+    ({ $theme, $forceWrap }: { $theme: Theme; $forceWrap?: boolean }) => ({
+      gap: $theme.sizing.scale300,
+      paddingTop: $theme.sizing.scale200,
+      paddingBottom: $theme.sizing.scale200,
+      wordBreak: 'break-word',
+      display: 'flex',
+      flexDirection: $forceWrap ? 'column' : 'row',
+      ...(!$forceWrap && { flexWrap: 'wrap' }),
+    })
+  ),
+  DetailsValue: createStyled<'div', { $forceWrap?: boolean }>(
+    'div',
+    ({ $theme, $forceWrap }: { $theme: Theme; $forceWrap?: boolean }) => ({
+      color: $theme.colors.contentPrimary,
+      ...$theme.typography.LabelXSmall,
+      display: 'flex',
+      ...(!$forceWrap && { flex: '1 0 300px' }),
+    })
+  ),
+};
+
 const cssStylesObj = {
   emptyDetails: (theme) => ({
     ...theme.typography.LabelXSmall,
     color: theme.colors.contentTertiary,
     textAlign: 'center',
     padding: `${theme.sizing.scale700} 0`,
   }),
-  detailsRow: (theme) => ({
-    display: 'flex',
-    flexDirection: 'row',
-    gap: theme.sizing.scale300,
-    flexWrap: 'wrap',
-    paddingTop: theme.sizing.scale200,
-    paddingBottom: theme.sizing.scale200,
-    wordBreak: 'break-word',
-  }),
   detailsLabel: (theme) => ({
     minWidth: '150px',
     maxWidth: '150px',
     display: 'flex',
     color: theme.colors.contentTertiary,
     ...theme.typography.LabelXSmall,
   }),
-  detailsValue: (theme) => ({
-    color: theme.colors.contentPrimary,
-    ...theme.typography.LabelXSmall,
-    display: 'flex',
-    flex: '1 0 300px',
-  }),
 } satisfies StyletronCSSObject;
 
 export const cssStyles: StyletronCSSObjectOf<typeof cssStylesObj> =

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

@@ -5,7 +5,7 @@ import useStyletronClasses from '@/hooks/use-styletron-classes';
 import formatWorkflowHistoryEvent from '@/utils/data-formatters/format-workflow-history-event';
 
 import generateHistoryEventDetails from './helpers/generate-history-event-details';
-import { cssStyles } from './workflow-history-event-details.styles';
+import { cssStyles, styled } from './workflow-history-event-details.styles';
 import type {
   WorkflowHistoryEventDetailsEntry,
   Props,
@@ -28,8 +28,11 @@ export default function WorkflowHistoryEventDetails({
 
   return (
     <div>
-      {detailsEntries.map((entry) => (
-        <div className={cls.detailsRow} key={entry.key}>
+      {detailsEntries.map((entry, index) => (
+        <styled.DetailsRow
+          $forceWrap={entry.renderConfig?.forceWrap}
+          key={`${entry.key}-${entry.path}-${entry.renderConfig?.name}-${index}`}
+        >
           <div className={cls.detailsLabel}>
             {entry.renderConfig?.getLabel
               ? entry.renderConfig.getLabel({
@@ -39,7 +42,7 @@ export default function WorkflowHistoryEventDetails({
                 })
               : entry.path}
           </div>
-          <div className={cls.detailsValue}>
+          <styled.DetailsValue $forceWrap={entry.renderConfig?.forceWrap}>
             {entry.renderConfig?.valueComponent ? (
               <entry.renderConfig.valueComponent
                 entryKey={entry.key}
@@ -50,8 +53,8 @@ export default function WorkflowHistoryEventDetails({
             ) : (
               String(entry.value)
             )}
-          </div>
-        </div>
+          </styled.DetailsValue>
+        </styled.DetailsRow>
       ))}
     </div>
   );

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

@@ -13,17 +13,18 @@ export type WorkflowHistoryEventDetailsFuncArgs = {
   value: any;
 };
 
+export type WorkflowHistoryEventDetailsValueComponentProps = {
+  entryKey: string;
+  entryPath: string;
+  entryValue: any;
+} & WorfklowHistoryProps['params'];
+
 export type WorkflowHistoryEventDetailsConfig = {
   name: string;
   getLabel?: (args: WorkflowHistoryEventDetailsFuncArgs) => string;
-  valueComponent?: React.ComponentType<
-    {
-      entryKey: string;
-      entryPath: string;
-      entryValue: any;
-    } & WorfklowHistoryProps['params']
-  >;
+  valueComponent?: React.ComponentType<WorkflowHistoryEventDetailsValueComponentProps>;
   hide?: (args: WorkflowHistoryEventDetailsFuncArgs) => boolean;
+  forceWrap?: boolean;
 } & (
   | { key: string }
   | { path: string }