Add "No issues" panel when diagnostics does not find any issues with a workflow (#959)

* Move diagnostics layout components around to support error/info panels
* Add info panel that shows up if Workflow Diagnostics returns no issues

Author: adhityamamallan

src/assets/circle-check.svg

@@ -1,10 +1,29 @@
-import { styled as createStyled } from 'baseui';
+import { styled as createStyled, withStyle } from 'baseui';
 import { type Theme } from 'baseui/theme';
 
+import PageSection from '@/components/page-section/page-section';
+
 export const styled = {
   ButtonsContainer: createStyled('div', ({ $theme }: { $theme: Theme }) => ({
     display: 'flex',
     justifyContent: 'space-between',
     gap: $theme.sizing.scale300,
   })),
+  PageSection: withStyle(PageSection, ({ $theme }: { $theme: Theme }) => ({
+    display: 'flex',
+    flexDirection: 'column',
+    gap: $theme.sizing.scale800,
+  })),
+  NoIssuesContainer: createStyled('div', ({ $theme }: { $theme: Theme }) => ({
+    flex: 1,
+    display: 'flex',
+    flexDirection: 'column',
+    alignItems: 'center',
+    justifyContent: 'center',
+    gap: $theme.sizing.scale600,
+    padding: `${$theme.sizing.scale900} ${$theme.sizing.scale600}`,
+  })),
+  NoIssuesText: createStyled('div', ({ $theme }: { $theme: Theme }) => ({
+    ...$theme.typography.HeadingXSmall,
+  })),
 };

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

@@ -2,6 +2,11 @@
 
 import React, { useMemo, useState } from 'react';
 
+import Image from 'next/image';
+
+import circleCheck from '@/assets/circle-check.svg';
+import PanelSection from '@/components/panel-section/panel-section';
+
 import WorkflowDiagnosticsJson from '../workflow-diagnostics-json/workflow-diagnostics-json';
 import WorkflowDiagnosticsList from '../workflow-diagnostics-list/workflow-diagnostics-list';
 import WorkflowDiagnosticsViewToggle from '../workflow-diagnostics-view-toggle/workflow-diagnostics-view-toggle';
@@ -19,7 +24,7 @@ export default function WorkflowDiagnosticsContent({
 }: Props) {
   const [activeView, setActiveView] = useState<DiagnosticsViewMode>('list');
 
-  const issuesGroupsWithEntries: Array<string> = useMemo(
+  const nonEmptyIssueGroups: Array<string> = useMemo(
     () =>
       Object.entries(diagnosticsResult.DiagnosticsResult)
         .map(([name, issuesGroup]) => {
@@ -31,13 +36,21 @@ export default function WorkflowDiagnosticsContent({
     [diagnosticsResult.DiagnosticsResult]
   );
 
-  if (issuesGroupsWithEntries.length === 0) {
-    // TODO: Add a No Issues Found panel
-    return <div>No issues found with this workflow</div>;
+  if (nonEmptyIssueGroups.length === 0) {
+    return (
+      <PanelSection>
+        <styled.NoIssuesContainer>
+          <Image width={64} height={64} alt="No issues" src={circleCheck} />
+          <styled.NoIssuesText>
+            No issues found with this workflow
+          </styled.NoIssuesText>
+        </styled.NoIssuesContainer>
+      </PanelSection>
+    );
   }
 
   return (
-    <>
+    <styled.PageSection>
       <styled.ButtonsContainer>
         <WorkflowDiagnosticsViewToggle
           listEnabled
@@ -61,6 +74,6 @@ export default function WorkflowDiagnosticsContent({
           diagnosticsResult={diagnosticsResult}
         />
       )}
-    </>
+    </styled.PageSection>
   );
 }

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

@@ -2,4 +2,5 @@ import { styled as contentStyledComponents } from '../workflow-diagnostics-conte
 
 export const styled = {
   ButtonsContainer: contentStyledComponents.ButtonsContainer,
+  PageSection: contentStyledComponents.PageSection,
 };

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

@@ -10,7 +10,7 @@ export default function WorkflowDiagnosticsFallback({
   diagnosticsResult,
 }: Props) {
   return (
-    <>
+    <styled.PageSection>
       <styled.ButtonsContainer>
         <WorkflowDiagnosticsViewToggle listEnabled={false} />
       </styled.ButtonsContainer>
@@ -19,6 +19,6 @@ export default function WorkflowDiagnosticsFallback({
         runId={runId}
         diagnosticsResult={diagnosticsResult}
       />
-    </>
+    </styled.PageSection>
   );
 }

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

@@ -13,7 +13,6 @@ import workflowDiagnosticsDisabledErrorPanelConfig from './config/workflow-diagn
 import useDiagnoseWorkflow from './hooks/use-diagnose-workflow/use-diagnose-workflow';
 import WorkflowDiagnosticsContent from './workflow-diagnostics-content/workflow-diagnostics-content';
 import WorkflowDiagnosticsFallback from './workflow-diagnostics-fallback/workflow-diagnostics-fallback';
-import { styled } from './workflow-diagnostics.styles';
 
 export default function WorkflowDiagnostics({
   params,
@@ -41,19 +40,9 @@ export default function WorkflowDiagnostics({
     throw error;
   }
 
-  return (
-    <styled.PageSection>
-      {data.parsingError ? (
-        <WorkflowDiagnosticsFallback
-          {...params}
-          diagnosticsResult={data.result}
-        />
-      ) : (
-        <WorkflowDiagnosticsContent
-          {...params}
-          diagnosticsResult={data.result}
-        />
-      )}
-    </styled.PageSection>
+  return data.parsingError ? (
+    <WorkflowDiagnosticsFallback {...params} diagnosticsResult={data.result} />
+  ) : (
+    <WorkflowDiagnosticsContent {...params} diagnosticsResult={data.result} />
   );
 }