Add Workflow Diagnostics tab with placeholder content (#945)

* Add useIsWorkflowDiagnosticsEnabled hook
* Add Workflow Diagnostics tab to tabs config
* Show tab depending on config value
* Create Workflow Diagnostics root component with placeholder, and error panel if diagnostics is disabled

Author: adhityamamallan

src/views/workflow-diagnostics/config/workflow-diagnostics-disabled-error-panel.config.ts

@@ -0,0 +1,15 @@
+import { type Props as ErrorPanelProps } from '@/components/error-panel/error-panel.types';
+
+const workflowDiagnosticsDisabledErrorPanelConfig: ErrorPanelProps = {
+  message: 'Workflow Diagnostics is currently disabled',
+  omitLogging: true,
+  actions: [
+    {
+      kind: 'link-internal',
+      link: './summary',
+      label: 'Go to workflow summary',
+    },
+  ],
+};
+
+export default workflowDiagnosticsDisabledErrorPanelConfig;

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

@@ -0,0 +1,31 @@
+'use client';
+
+import React from 'react';
+
+import ErrorPanel from '@/components/error-panel/error-panel';
+import PageSection from '@/components/page-section/page-section';
+import PanelSection from '@/components/panel-section/panel-section';
+import { type WorkflowPageTabContentProps } from '@/views/workflow-page/workflow-page-tab-content/workflow-page-tab-content.types';
+
+import useSuspenseIsWorkflowDiagnosticsEnabled from '../workflow-page/hooks/use-is-workflow-diagnostics-enabled/use-suspense-is-workflow-diagnostics-enabled';
+
+import workflowDiagnosticsDisabledErrorPanelConfig from './config/workflow-diagnostics-disabled-error-panel.config';
+
+export default function WorkflowDiagnostics(_: WorkflowPageTabContentProps) {
+  const { data: isWorkflowDiagnosticsEnabled } =
+    useSuspenseIsWorkflowDiagnosticsEnabled();
+
+  if (!isWorkflowDiagnosticsEnabled) {
+    return (
+      <PanelSection>
+        <ErrorPanel {...workflowDiagnosticsDisabledErrorPanelConfig} />
+      </PanelSection>
+    );
+  }
+
+  return (
+    <PageSection>
+      <div>Workflow Diagnostics (WIP)</div>
+    </PageSection>
+  );
+}

src/views/workflow-page/__fixtures__/workflow-page-tabs-config.ts

@@ -4,7 +4,7 @@ import type { WorkflowPageTabContentProps } from '../workflow-page-tab-content/w
 import { type WorkflowPageTabsConfig } from '../workflow-page-tabs/workflow-page-tabs.types';
 
 export const mockWorkflowPageTabsConfig: WorkflowPageTabsConfig<
-  'summary' | 'history' | 'queries' | 'stack-trace'
+  'summary' | 'history' | 'queries' | 'stack-trace' | 'diagnostics'
 > = {
   summary: {
     title: 'Summary',
@@ -22,6 +22,14 @@ export const mockWorkflowPageTabsConfig: WorkflowPageTabsConfig<
       createElement('div', {}, JSON.stringify(params)),
     getErrorConfig: () => ({ message: 'history error' }),
   },
+  diagnostics: {
+    title: 'Diagnostics',
+    artwork: () =>
+      createElement('div', { 'data-testid': 'diagnostics-artwork' }),
+    content: ({ params }: WorkflowPageTabContentProps) =>
+      createElement('div', {}, JSON.stringify(params)),
+    getErrorConfig: () => ({ message: 'diagnostics error' }),
+  },
   queries: {
     title: 'Queries',
     artwork: () => createElement('div', { 'data-testid': 'queries-artwork' }),

src/views/workflow-page/config/workflow-page-tabs.config.ts

@@ -4,7 +4,9 @@ import {
   MdOutlineManageSearch,
   MdOutlineTerminal,
 } from 'react-icons/md';
+import { RiStethoscopeLine } from 'react-icons/ri';
 
+import WorkflowDiagnostics from '@/views/workflow-diagnostics/workflow-diagnostics';
 import WorkflowHistory from '@/views/workflow-history/workflow-history';
 import WorkflowQueries from '@/views/workflow-queries/workflow-queries';
 import WorkflowStackTrace from '@/views/workflow-stack-trace/workflow-stack-trace';
@@ -15,7 +17,7 @@ import WorkflowPagePendingEventsBadge from '../workflow-page-pending-events-badg
 import type { WorkflowPageTabsConfig } from '../workflow-page-tabs/workflow-page-tabs.types';
 
 const workflowPageTabsConfig: WorkflowPageTabsConfig<
-  'summary' | 'history' | 'queries' | 'stack-trace'
+  'summary' | 'history' | 'queries' | 'stack-trace' | 'diagnostics'
 > = {
   summary: {
     title: 'Summary',
@@ -40,6 +42,17 @@ const workflowPageTabsConfig: WorkflowPageTabsConfig<
         'history'
       ),
   },
+  diagnostics: {
+    title: 'Diagnostics',
+    artwork: RiStethoscopeLine,
+    content: WorkflowDiagnostics,
+    getErrorConfig: (err) =>
+      getWorkflowPageErrorConfig(
+        err,
+        'Failed to load workflow diagnostics',
+        'diagnostics'
+      ),
+  },
   queries: {
     title: 'Queries',
     artwork: MdOutlineManageSearch,

src/views/workflow-page/hooks/use-is-workflow-diagnostics-enabled/get-is-workflow-diagnostics-enabled-query-options.ts

@@ -0,0 +1,30 @@
+import { type UseQueryOptions } from '@tanstack/react-query';
+import queryString from 'query-string';
+
+import { type GetConfigResponse } from '@/route-handlers/get-config/get-config.types';
+import request from '@/utils/request';
+import { type RequestError } from '@/utils/request/request-error';
+
+export default function getIsWorkflowDiagnosticsEnabledQueryOptions(): UseQueryOptions<
+  GetConfigResponse<'WORKFLOW_DIAGNOSTICS_ENABLED'>,
+  RequestError,
+  GetConfigResponse<'WORKFLOW_DIAGNOSTICS_ENABLED'>,
+  [string, { configKey: 'WORKFLOW_DIAGNOSTICS_ENABLED' }]
+> {
+  return {
+    queryKey: ['dynamic_config', { configKey: 'WORKFLOW_DIAGNOSTICS_ENABLED' }],
+    queryFn: ({
+      queryKey: [_, { configKey }],
+    }: {
+      queryKey: [string, { configKey: 'WORKFLOW_DIAGNOSTICS_ENABLED' }];
+    }): Promise<GetConfigResponse<'WORKFLOW_DIAGNOSTICS_ENABLED'>> =>
+      request(
+        queryString.stringifyUrl({
+          url: '/api/config',
+          query: {
+            configKey,
+          },
+        })
+      ).then((res) => res.json()),
+  };
+}

src/views/workflow-page/hooks/use-is-workflow-diagnostics-enabled/use-suspense-is-workflow-diagnostics-enabled.ts

@@ -0,0 +1,7 @@
+import { useSuspenseQuery } from '@tanstack/react-query';
+
+import getIsWorkflowDiagnosticsEnabledQueryOptions from './get-is-workflow-diagnostics-enabled-query-options';
+
+export default function useSuspenseIsWorkflowDiagnosticsEnabled() {
+  return useSuspenseQuery(getIsWorkflowDiagnosticsEnabledQueryOptions());
+}

src/views/workflow-page/workflow-page-tabs/__tests__/workflow-page-tabs.test.tsx

@@ -1,9 +1,12 @@
-import React from 'react';
+import React, { Suspense } from 'react';
 
-import { render, screen } from '@/test-utils/rtl';
+import { HttpResponse } from 'msw';
+
+import { render, screen, act, fireEvent } from '@/test-utils/rtl';
+
+import ErrorBoundary from '@/components/error-boundary/error-boundary';
 
 import { mockWorkflowPageTabsConfig } from '../../__fixtures__/workflow-page-tabs-config';
-import workflowPageTabsConfig from '../../config/workflow-page-tabs.config';
 import WorkflowPageTabs from '../workflow-page-tabs';
 
 const mockPushFn = jest.fn();
@@ -46,30 +49,111 @@ describe('WorkflowPageTabs', () => {
     jest.clearAllMocks();
   });
 
-  it('renders tabs titles correctly', () => {
-    setup();
-    Object.values(workflowPageTabsConfig).forEach(({ title }) => {
-      expect(screen.getByText(title)).toBeInTheDocument();
-    });
+  it('renders tabs titles correctly with diagnostics disabled', async () => {
+    await setup({ enableDiagnostics: false });
+
+    expect(screen.getByText('Summary')).toBeInTheDocument();
+    expect(screen.getByText('History')).toBeInTheDocument();
+    expect(screen.getByText('Queries')).toBeInTheDocument();
+    expect(screen.getByText('Stack Trace')).toBeInTheDocument();
+    expect(screen.queryByText('Diagnostics')).toBeNull();
+  });
+
+  it('renders tabs with diagnostics enabled', async () => {
+    await setup({ enableDiagnostics: true });
+
+    expect(screen.getByText('Summary')).toBeInTheDocument();
+    expect(screen.getByText('History')).toBeInTheDocument();
+    expect(screen.getByText('Queries')).toBeInTheDocument();
+    expect(screen.getByText('Stack Trace')).toBeInTheDocument();
+    expect(screen.getByText('Diagnostics')).toBeInTheDocument();
   });
 
-  it('renders tabs buttons correctly', () => {
-    setup();
+  it('renders tabs buttons correctly', async () => {
+    await setup({ enableDiagnostics: false });
+
     expect(screen.getByText('CLI Commands')).toBeInTheDocument();
     expect(screen.getByText('Actions')).toBeInTheDocument();
   });
 
-  it('renders tabs artworks correctly', () => {
-    setup();
-    Object.entries(workflowPageTabsConfig).forEach(([key, { artwork }]) => {
-      if (typeof artwork !== 'undefined')
-        expect(screen.getByTestId(`${key}-artwork`)).toBeInTheDocument();
-      else
-        expect(screen.queryByTestId(`${key}-artwork`)).not.toBeInTheDocument();
+  it('renders tabs artworks correctly with diagnostics disabled', async () => {
+    await setup({ enableDiagnostics: false });
+
+    expect(screen.getByTestId('summary-artwork')).toBeInTheDocument();
+    expect(screen.getByTestId('history-artwork')).toBeInTheDocument();
+    expect(screen.getByTestId('queries-artwork')).toBeInTheDocument();
+    expect(screen.getByTestId('stack-trace-artwork')).toBeInTheDocument();
+    expect(screen.queryByTestId('diagnostics-artwork')).toBeNull();
+  });
+
+  it('renders tabs artworks correctly with diagnostics enabled', async () => {
+    await setup({ enableDiagnostics: true });
+
+    expect(screen.getByTestId('summary-artwork')).toBeInTheDocument();
+    expect(screen.getByTestId('history-artwork')).toBeInTheDocument();
+    expect(screen.getByTestId('queries-artwork')).toBeInTheDocument();
+    expect(screen.getByTestId('stack-trace-artwork')).toBeInTheDocument();
+    expect(screen.getByTestId('diagnostics-artwork')).toBeInTheDocument();
+  });
+
+  it('reroutes when new tab is clicked', async () => {
+    await setup({ enableDiagnostics: false });
+
+    const historyTab = await screen.findByText('History');
+    act(() => {
+      fireEvent.click(historyTab);
     });
+
+    expect(mockPushFn).toHaveBeenCalledWith('history');
+  });
+
+  it('handles errors gracefully', async () => {
+    await setup({ error: true });
+
+    expect(
+      await screen.findByText('Error: Failed to fetch config')
+    ).toBeInTheDocument();
   });
 });
 
-function setup() {
-  return render(<WorkflowPageTabs />);
+async function setup({
+  error,
+  enableDiagnostics,
+}: {
+  error?: boolean;
+  enableDiagnostics?: boolean;
+}) {
+  render(
+    <ErrorBoundary
+      fallbackRender={({ error }) => <div>Error: {error.message}</div>}
+    >
+      <Suspense fallback={<div>Loading...</div>}>
+        <WorkflowPageTabs />
+      </Suspense>
+    </ErrorBoundary>,
+    {
+      endpointsMocks: [
+        {
+          path: '/api/config',
+          httpMethod: 'GET',
+          mockOnce: false,
+          httpResolver: async () => {
+            if (error) {
+              return HttpResponse.json(
+                { message: 'Failed to fetch config' },
+                { status: 500 }
+              );
+            } else {
+              return HttpResponse.json(enableDiagnostics ?? false);
+            }
+          },
+        },
+      ],
+    }
+  );
+
+  if (!error) {
+    // Wait for the first tab to load
+    await screen.findByText('Summary');
+  }
 }

src/views/workflow-page/workflow-page-tabs/workflow-page-tabs.tsx

@@ -1,6 +1,7 @@
 'use client';
 import React, { useMemo } from 'react';
 
+import omit from 'lodash/omit';
 import { useRouter, useParams } from 'next/navigation';
 
 import ErrorBoundary from '@/components/error-boundary/error-boundary';
@@ -9,6 +10,7 @@ import decodeUrlParams from '@/utils/decode-url-params';
 import WorkflowActions from '@/views/workflow-actions/workflow-actions';
 
 import workflowPageTabsConfig from '../config/workflow-page-tabs.config';
+import useSuspenseIsWorkflowDiagnosticsEnabled from '../hooks/use-is-workflow-diagnostics-enabled/use-suspense-is-workflow-diagnostics-enabled';
 import WorkflowPageCliCommandsButton from '../workflow-page-cli-commands-button/workflow-page-cli-commands-button';
 
 import { styled } from './workflow-page-tabs.styles';
@@ -19,15 +21,26 @@ export default function WorkflowPageTabs() {
   const params = useParams<WorkflowPageTabsParams>();
   const decodedParams = decodeUrlParams(params) as WorkflowPageTabsParams;
 
+  const { data: isWorkflowDiagnosticsEnabled } =
+    useSuspenseIsWorkflowDiagnosticsEnabled();
+
+  const filteredTabsConfig = useMemo(
+    () =>
+      isWorkflowDiagnosticsEnabled
+        ? workflowPageTabsConfig
+        : omit(workflowPageTabsConfig, 'diagnostics'),
+    [isWorkflowDiagnosticsEnabled]
+  );
+
   const tabList = useMemo(
     () =>
-      Object.entries(workflowPageTabsConfig).map(([key, tabConfig]) => ({
+      Object.entries(filteredTabsConfig).map(([key, tabConfig]) => ({
         key,
         title: tabConfig.title,
         artwork: tabConfig.artwork,
         endEnhancer: tabConfig.endEnhancer,
       })),
-    []
+    [filteredTabsConfig]
   );
 
   return (