Add JSON viewer for objects in workflow diagnostics metadata (#967)

Add simple JSON viewer for object types in Workflow Diagnostics metadata, adapted from WorkflowHistoryEventDetailsJson

Author: adhityamamallan

src/views/workflow-diagnostics/workflow-diagnostics-metadata-json/__tests__/workflow-diagnostics-metadata-json.test.tsx

@@ -0,0 +1,42 @@
+import React from 'react';
+
+import { render } from '@/test-utils/rtl';
+
+import losslessJsonStringify from '@/utils/lossless-json-stringify';
+
+import WorkflowDiagnosticsMetadataJson from '../workflow-diagnostics-metadata-json';
+
+jest.mock('@/components/copy-text-button/copy-text-button', () =>
+  jest.fn(({ textToCopy }) => <div>Copy Button: {textToCopy}</div>)
+);
+
+jest.mock('@/components/pretty-json/pretty-json', () =>
+  jest.fn(() => <div>PrettyJson Mock</div>)
+);
+
+describe('WorkflowDiagnosticsMetadataJson', () => {
+  const losslessInputJson = {
+    input: 'inputJson',
+    long: BigInt('9007199254740991345435'),
+  };
+
+  it('renders correctly with initial props', () => {
+    const { getByText } = render(
+      <WorkflowDiagnosticsMetadataJson value={losslessInputJson} />
+    );
+
+    expect(getByText('PrettyJson Mock')).toBeInTheDocument();
+  });
+
+  it('renders copy text button and pass the correct text', () => {
+    const { getByText } = render(
+      <WorkflowDiagnosticsMetadataJson value={losslessInputJson} />
+    );
+
+    const copyButton = getByText(/Copy Button/);
+    expect(copyButton).toBeInTheDocument();
+    expect(copyButton.innerHTML).toMatch(
+      losslessJsonStringify(losslessInputJson, null, '\t')
+    );
+  });
+});

src/views/workflow-diagnostics/workflow-diagnostics-metadata-json/workflow-diagnostics-metadata-json.styles.ts

@@ -0,0 +1,32 @@
+import { styled as createStyled, type Theme } from 'baseui';
+import type { ButtonOverrides } from 'baseui/button';
+
+export const styled = {
+  JsonViewWrapper: createStyled('div', {
+    position: 'relative',
+    width: '100%',
+  }),
+  JsonViewContainer: createStyled('div', ({ $theme }: { $theme: Theme }) => ({
+    padding: $theme.sizing.scale600,
+    backgroundColor: $theme.colors.backgroundSecondary,
+    borderRadius: $theme.borders.radius300,
+    maxHeight: '50vh',
+    overflow: 'auto',
+  })),
+  JsonViewHeader: createStyled('div', ({ $theme }: { $theme: Theme }) => ({
+    display: 'flex',
+    position: 'absolute',
+    right: $theme.sizing.scale400,
+    top: $theme.sizing.scale400,
+  })),
+};
+
+export const overrides = {
+  copyButton: {
+    BaseButton: {
+      style: {
+        backgroundColor: 'rgba(0, 0, 0, 0)',
+      },
+    },
+  } satisfies ButtonOverrides,
+};

src/views/workflow-diagnostics/workflow-diagnostics-metadata-json/workflow-diagnostics-metadata-json.tsx

@@ -0,0 +1,31 @@
+'use client';
+import React, { useMemo } from 'react';
+
+import CopyTextButton from '@/components/copy-text-button/copy-text-button';
+import PrettyJson from '@/components/pretty-json/pretty-json';
+import losslessJsonStringify from '@/utils/lossless-json-stringify';
+
+import { styled, overrides } from './workflow-diagnostics-metadata-json.styles';
+import type { Props } from './workflow-diagnostics-metadata-json.types';
+
+// This component is currently adapted from the WorkflowHistoryEventDetailsJson viewer.
+// TODO: Create a shared JSON viewer component to handle the different JSON display requirements throughout the codebase.
+export default function WorkflowDiagnosticsMetadataJson({ value }: Props) {
+  const textToCopy = useMemo(() => {
+    return losslessJsonStringify(value, null, '\t');
+  }, [value]);
+
+  return (
+    <styled.JsonViewWrapper>
+      <styled.JsonViewContainer>
+        <styled.JsonViewHeader>
+          <CopyTextButton
+            textToCopy={textToCopy}
+            overrides={overrides.copyButton}
+          />
+        </styled.JsonViewHeader>
+        <PrettyJson json={value} />
+      </styled.JsonViewContainer>
+    </styled.JsonViewWrapper>
+  );
+}

src/views/workflow-diagnostics/workflow-diagnostics-metadata-json/workflow-diagnostics-metadata-json.types.ts

@@ -0,0 +1,3 @@
+export type Props = {
+  value: any;
+};