Add banner on workflow summary page to highlight diagnostics issues (#976)

Add banner that highlights issues on the Workflow Summary page and prompts the user to view the Diagnostics page (using the diagnostics issues count hook added in #975)

Author: adhityamamallan

src/views/workflow-summary-tab/__tests__/workflow-summary-tab.test.tsx

@@ -12,11 +12,17 @@ import WorkflowSummaryTab from '../workflow-summary-tab';
 jest.mock('../workflow-summary-tab-details/workflow-summary-tab-details', () =>
   jest.fn(() => <div>MockWorkflowSummaryTabDetails</div>)
 );
+
 jest.mock(
   '../workflow-summary-tab-json-view/workflow-summary-tab-json-view',
   () => jest.fn(() => <div>MockWorkflowSummaryTabJsonView</div>)
 );
 
+jest.mock(
+  '../workflow-summary-tab-diagnostics-banner/workflow-summary-tab-diagnostics-banner',
+  () => jest.fn(() => <div>MockWorkflowSummaryTabDiagnosticsBanner</div>)
+);
+
 describe('WorkflowSummaryTab', () => {
   beforeEach(() => {
     jest.clearAllMocks();
@@ -30,7 +36,7 @@ describe('WorkflowSummaryTab', () => {
     workflowTab: 'summary',
   };
 
-  it('should render WorkflowSummaryTabDetails and WorkflowSummaryTabJsonView', async () => {
+  it('should render tab deatils, JSON view, and diagnostics banner', async () => {
     render(
       <Suspense>
         <WorkflowSummaryTab params={params} />
@@ -69,5 +75,8 @@ describe('WorkflowSummaryTab', () => {
     expect(
       await screen.findByText('MockWorkflowSummaryTabJsonView')
     ).toBeInTheDocument();
+    expect(
+      await screen.findByText('MockWorkflowSummaryTabDiagnosticsBanner')
+    ).toBeInTheDocument();
   });
 });

src/views/workflow-summary-tab/workflow-summary-tab-diagnostics-banner/__tests__/workflow-summary-tab-diagnostics-banner.test.tsx

@@ -0,0 +1,76 @@
+import React from 'react';
+
+import { render, screen } from '@/test-utils/rtl';
+
+import * as useWorkflowDiagnosticsIssuesCountModule from '@/views/shared/hooks/use-workflow-diagnostics-issues-count';
+
+import WorkflowSummaryTabDiagnosticsBanner from '../workflow-summary-tab-diagnostics-banner';
+
+jest.mock('@/views/shared/hooks/use-workflow-diagnostics-issues-count', () =>
+  jest.fn(() => undefined)
+);
+
+describe(WorkflowSummaryTabDiagnosticsBanner.name, () => {
+  afterEach(() => {
+    jest.restoreAllMocks();
+  });
+
+  it('should render banner with singular issue text when count is 1', () => {
+    setup({ mockIssuesCount: 1 });
+
+    expect(
+      screen.getByText('1 issue was detected on this workflow')
+    ).toBeInTheDocument();
+    expect(screen.getByText('View issue')).toBeInTheDocument();
+  });
+
+  it('should render banner with plural issues text when count is greater than 1', () => {
+    setup({ mockIssuesCount: 5 });
+
+    expect(
+      screen.getByText('5 issues were detected on this workflow')
+    ).toBeInTheDocument();
+    expect(screen.getByText('View issues')).toBeInTheDocument();
+  });
+
+  it('should not render anything when issues count is undefined', () => {
+    const { container } = setup({ mockIssuesCount: undefined });
+
+    expect(container.firstChild?.firstChild).toBeNull();
+  });
+
+  it('should not render anything when there are 0 issues', () => {
+    const { container } = setup({ mockIssuesCount: 0 });
+
+    expect(container.firstChild?.firstChild).toBeNull();
+  });
+
+  it('should render link to diagnostics page with correct href', () => {
+    setup({ mockIssuesCount: 3 });
+
+    const link = screen.getByRole('link', { name: 'View issues' });
+    expect(link).toHaveAttribute(
+      'href',
+      '/domains/mock-domain/cluster_1/workflows/mock-workflow-id/mock-run-id/diagnostics'
+    );
+  });
+});
+
+function setup({ mockIssuesCount }: { mockIssuesCount?: number }) {
+  jest
+    .spyOn(useWorkflowDiagnosticsIssuesCountModule, 'default')
+    .mockReturnValue(mockIssuesCount);
+
+  const result = render(
+    <WorkflowSummaryTabDiagnosticsBanner
+      domain="mock-domain"
+      cluster="cluster_1"
+      workflowId="mock-workflow-id"
+      runId="mock-run-id"
+    />
+  );
+
+  return {
+    ...result,
+  };
+}

src/views/workflow-summary-tab/workflow-summary-tab-diagnostics-banner/workflow-summary-tab-diagnostics-banner.styles.ts

@@ -0,0 +1,25 @@
+import { styled as createStyled, type Theme } from 'baseui';
+import { type StyleObject } from 'styletron-react';
+
+export const styled = {
+  Banner: createStyled(
+    'div',
+    ({ $theme }: { $theme: Theme }): StyleObject => ({
+      display: 'flex',
+      backgroundColor: $theme.colors.backgroundWarningLight,
+      alignItems: 'center',
+      justifyContent: 'space-between',
+      padding: `${$theme.sizing.scale400} ${$theme.sizing.scale500}`,
+      borderRadius: $theme.borders.radius400,
+    })
+  ),
+  BannerTextContainer: createStyled(
+    'div',
+    ({ $theme }: { $theme: Theme }): StyleObject => ({
+      ...$theme.typography.LabelSmall,
+      display: 'flex',
+      gap: $theme.sizing.scale600,
+      alignItems: 'center',
+    })
+  ),
+};

src/views/workflow-summary-tab/workflow-summary-tab-diagnostics-banner/workflow-summary-tab-diagnostics-banner.tsx

@@ -0,0 +1,46 @@
+'use client';
+
+import React from 'react';
+
+import { Button } from 'baseui/button';
+import Link from 'next/link';
+import { RiStethoscopeLine } from 'react-icons/ri';
+
+import useWorkflowDiagnosticsIssuesCount from '@/views/shared/hooks/use-workflow-diagnostics-issues-count';
+
+import { styled } from './workflow-summary-tab-diagnostics-banner.styles';
+import { type Props } from './workflow-summary-tab-diagnostics-banner.types';
+
+export default function WorkflowSummaryTabDiagnosticsBanner({
+  domain,
+  cluster,
+  workflowId,
+  runId,
+}: Props) {
+  const issuesCount = useWorkflowDiagnosticsIssuesCount({
+    domain,
+    cluster,
+    workflowId,
+    runId,
+  });
+
+  if (issuesCount === undefined || issuesCount === 0) return null;
+
+  return (
+    <styled.Banner>
+      <styled.BannerTextContainer>
+        <RiStethoscopeLine size="20px" />
+        {`${
+          issuesCount === 1 ? '1 issue was' : `${issuesCount} issues were`
+        } detected on this workflow`}
+      </styled.BannerTextContainer>
+      <Button
+        size="mini"
+        $as={Link}
+        href={`/domains/${domain}/${cluster}/workflows/${workflowId}/${runId}/diagnostics`}
+      >
+        {`View ${issuesCount === 1 ? 'issue' : 'issues'}`}
+      </Button>
+    </styled.Banner>
+  );
+}

src/views/workflow-summary-tab/workflow-summary-tab-diagnostics-banner/workflow-summary-tab-diagnostics-banner.types.ts

@@ -0,0 +1,6 @@
+export type Props = {
+  domain: string;
+  cluster: string;
+  workflowId: string;
+  runId: string;
+};

src/views/workflow-summary-tab/workflow-summary-tab.styles.ts

@@ -13,7 +13,7 @@ const cssStylesObj = {
     flex: '1 0 300px',
     display: 'flex',
     flexDirection: 'column',
-    gap: theme.sizing.scale900,
+    gap: theme.sizing.scale800,
   }),
   jsonArea: {
     flex: '1 0 300px',

src/views/workflow-summary-tab/workflow-summary-tab.tsx

@@ -1,7 +1,7 @@
 'use client';
 import React from 'react';
 
-import { useQuery, useSuspenseQuery } from '@tanstack/react-query';
+import { useQuery } from '@tanstack/react-query';
 import queryString from 'query-string';
 
 import PageSection from '@/components/page-section/page-section';
@@ -22,6 +22,7 @@ import { useDescribeWorkflow } from '../workflow-page/hooks/use-describe-workflo
 
 import getWorkflowResultJson from './helpers/get-workflow-result-json';
 import WorkflowSummaryTabDetails from './workflow-summary-tab-details/workflow-summary-tab-details';
+import WorkflowSummaryTabDiagnosticsBanner from './workflow-summary-tab-diagnostics-banner/workflow-summary-tab-diagnostics-banner';
 import WorkflowSummaryTabJsonView from './workflow-summary-tab-json-view/workflow-summary-tab-json-view';
 import { cssStyles } from './workflow-summary-tab.styles';
 
@@ -86,6 +87,7 @@ export default function WorkflowSummaryTab({
     <PageSection>
       <div className={cls.pageContainer}>
         <div className={cls.mainContent}>
+          <WorkflowSummaryTabDiagnosticsBanner {...params} />
           <WorkflowSummaryTabDetails
             firstHistoryEvent={firstEvent}
             closeHistoryEvent={closeEvent}