Implement Workflow Diagnostics JSON viewer (#950)

Implement Workflow Diagnostics JSON viewer with Pretty JSON, copy, and download functionality.

Author: adhityamamallan

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

@@ -0,0 +1,116 @@
+import { ZodError } from 'zod';
+
+import { render, screen, userEvent } from '@/test-utils/rtl';
+
+import { mockWorkflowDiagnosticsResult } from '@/route-handlers/diagnose-workflow/__fixtures__/mock-workflow-diagnostics-result';
+import { type DiagnoseWorkflowResponse } from '@/route-handlers/diagnose-workflow/diagnose-workflow.types';
+
+import WorkflowDiagnosticsJson from '../workflow-diagnostics-json';
+
+const mockDownloadJson = jest.fn();
+jest.mock('@/utils/download-json', () =>
+  jest.fn((json, filename) => mockDownloadJson(json, filename))
+);
+
+jest.mock('@/components/copy-text-button/copy-text-button', () =>
+  jest.fn(({ textToCopy }) => (
+    <div data-testid="copy-text-button">{textToCopy}</div>
+  ))
+);
+
+jest.mock('@/components/pretty-json/pretty-json', () =>
+  jest.fn(({ json }) => (
+    <div data-testid="pretty-json">{JSON.stringify(json)}</div>
+  ))
+);
+
+const mockDiagnosticsResponse = {
+  result: mockWorkflowDiagnosticsResult,
+  parsingError: null,
+};
+
+describe(WorkflowDiagnosticsJson.name, () => {
+  beforeEach(() => {
+    jest.clearAllMocks();
+  });
+
+  it('renders the PrettyJson component with diagnostics result', () => {
+    setup({});
+    expect(screen.getByTestId('pretty-json')).toBeInTheDocument();
+    expect(screen.getByTestId('pretty-json')).toHaveTextContent(
+      '"DiagnosticsResult"'
+    );
+  });
+
+  it('renders copy text button with text to copy', () => {
+    setup({});
+    const copyButton = screen.getByTestId('copy-text-button');
+    expect(copyButton).toBeInTheDocument();
+    expect(copyButton).toHaveTextContent('"DiagnosticsResult"');
+  });
+
+  it('downloads JSON when download button is clicked', async () => {
+    const { user } = setup({});
+    const downloadButton = screen.getByTestId('download-json-button');
+    await user.click(downloadButton);
+
+    expect(mockDownloadJson).toHaveBeenCalledWith(
+      mockDiagnosticsResponse.result,
+      'diagnostics_test-workflow-id_test-run-id'
+    );
+  });
+
+  it('renders with empty diagnostics result', () => {
+    setup({
+      diagnosticsResponse: {
+        result: {
+          DiagnosticsResult: {},
+          DiagnosticsCompleted: true,
+        },
+        parsingError: null,
+      },
+    });
+
+    expect(screen.getByTestId('pretty-json')).toBeInTheDocument();
+    expect(screen.getByTestId('pretty-json')).toHaveTextContent(
+      '"DiagnosticsResult"'
+    );
+  });
+
+  it('renders JSON even if there is a parsing error', () => {
+    setup({
+      diagnosticsResponse: {
+        result: {
+          DiagnosticsResult: {
+            invalidParsedField: 'invalid-value',
+          },
+          DiagnosticsCompleted: true,
+        },
+        parsingError: new ZodError([]),
+      },
+    });
+
+    expect(screen.getByTestId('pretty-json')).toBeInTheDocument();
+    expect(screen.getByTestId('pretty-json')).toHaveTextContent(
+      '"invalid-value"'
+    );
+  });
+});
+
+function setup({
+  diagnosticsResponse = mockDiagnosticsResponse,
+}: {
+  diagnosticsResponse?: DiagnoseWorkflowResponse;
+}) {
+  const user = userEvent.setup();
+  const defaultProps = {
+    domain: 'test-domain',
+    cluster: 'test-cluster',
+    workflowId: 'test-workflow-id',
+    runId: 'test-run-id',
+    diagnosticsResponse,
+  };
+
+  const view = render(<WorkflowDiagnosticsJson {...defaultProps} />);
+  return { user, ...view };
+}

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

@@ -0,0 +1,31 @@
+import { styled as createStyled, type Theme } from 'baseui';
+import { type ButtonOverrides } from 'baseui/button';
+import { type StyleObject } from 'styletron-react';
+
+export const overrides = {
+  jsonButton: {
+    BaseButton: {
+      style: ({ $theme }: { $theme: Theme }): StyleObject => ({
+        width: $theme.sizing.scale950,
+        height: $theme.sizing.scale950,
+        backgroundColor: 'rgba(0, 0, 0, 0)',
+      }),
+    },
+  } satisfies ButtonOverrides,
+};
+
+export const styled = {
+  ViewContainer: createStyled('div', ({ $theme }) => ({
+    position: 'relative',
+    gap: $theme.sizing.scale600,
+    padding: $theme.sizing.scale600,
+    backgroundColor: $theme.colors.backgroundSecondary,
+    borderRadius: $theme.borders.radius300,
+  })),
+  ButtonsContainer: createStyled('div', {
+    position: 'absolute',
+    top: '10px',
+    right: '10px',
+    display: 'flex',
+  }),
+};

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

@@ -1,12 +1,54 @@
+import { useMemo } from 'react';
+
+import { Button } from 'baseui/button';
+import { MdCopyAll, MdOutlineCloudDownload } from 'react-icons/md';
+
+import CopyTextButton from '@/components/copy-text-button/copy-text-button';
+import PrettyJson from '@/components/pretty-json/pretty-json';
+import downloadJson from '@/utils/download-json';
+import losslessJsonStringify from '@/utils/lossless-json-stringify';
+
 import { type ViewComponentProps } from '../workflow-diagnostics-content/workflow-diagnostics-content.types';
 
+import { styled, overrides } from './workflow-diagnostics-json.styles';
+
 export default function WorkflowDiagnosticsJson({
+  workflowId,
+  runId,
   diagnosticsResponse,
 }: ViewComponentProps) {
+  const diagnosticsResult = diagnosticsResponse.result;
+
+  const textToCopy = useMemo(() => {
+    return losslessJsonStringify(diagnosticsResult, null, '\t');
+  }, [diagnosticsResult]);
+
   return (
-    <div>
-      <div>Diagnostics JSON (WIP)</div>
-      {JSON.stringify(diagnosticsResponse.result, null, 2)}
-    </div>
+    <styled.ViewContainer>
+      <PrettyJson json={diagnosticsResult as Record<string, any>} />
+      <styled.ButtonsContainer>
+        <Button
+          data-testid="download-json-button"
+          size="mini"
+          kind="secondary"
+          shape="circle"
+          overrides={overrides.jsonButton}
+          onClick={() =>
+            downloadJson(
+              diagnosticsResult,
+              `diagnostics_${workflowId}_${runId}`
+            )
+          }
+        >
+          <MdOutlineCloudDownload size={16} />
+        </Button>
+        <CopyTextButton
+          textToCopy={textToCopy}
+          overrides={overrides.jsonButton}
+        >
+          <MdCopyAll size={16} />
+        </CopyTextButton>
+      </styled.ButtonsContainer>
+    </styled.ViewContainer>
   );
 }