Feat: Display Tests Report when running plan (#666)

Author: mykalmax

web/client/src/library/components/banner/Banner.tsx

@@ -0,0 +1,39 @@
+import clsx from 'clsx'
+import { EnumVariant, type Variant } from '~/types/enum'
+
+export default function Banner({
+  variant,
+  headline,
+  description,
+}: {
+  variant: Variant
+  description?: string
+  headline?: string
+}): JSX.Element {
+  return (
+    <div className="mt-4 mb-2 flex items-center w-full text-sm">
+      <div
+        className={clsx(
+          'p-4 w-full h-full border-2 rounded-lg',
+          variant === EnumVariant.Primary &&
+            'bg-primary-10 border-primary-400 text-primary-600',
+          variant === EnumVariant.Secondary &&
+            'bg-secondary-10 border-secondary-400 text-secondary-600',
+          variant === EnumVariant.Success &&
+            'bg-success-10 border-success-400 text-success-600',
+          variant === EnumVariant.Warning &&
+            'bg-warning-10 border-warning-400 text-warning-600',
+          variant === EnumVariant.Danger &&
+            'bg-danger-10 border-danger-400 text-danger-600',
+          variant === EnumVariant.Info &&
+            'bg-neutral-10 border-neutral-400 text-neutral-400',
+        )}
+      >
+        {headline != null && (
+          <h4 className="mb-2 font-bold text-lg">{headline}</h4>
+        )}
+        {description != null && <p className="text-prose">{description}</p>}
+      </div>
+    </div>
+  )
+}

web/client/src/library/components/plan/PlanHeader.tsx

@@ -1,6 +1,6 @@
-import clsx from 'clsx'
+import Banner from '@components/banner/Banner'
 import { useStoreContext } from '~/context/context'
-import { EnumVariant, type Variant } from '~/types/enum'
+import { EnumVariant } from '~/types/enum'
 
 export default function Plan({ error }: { error?: Error }): JSX.Element {
   const environment = useStoreContext(s => s.environment)
@@ -32,40 +32,3 @@ export default function Plan({ error }: { error?: Error }): JSX.Element {
     </div>
   )
 }
-
-function Banner({
-  variant,
-  headline,
-  description,
-}: {
-  variant: Variant
-  description?: string
-  headline?: string
-}): JSX.Element {
-  return (
-    <div className="mt-4 mb-2 flex items-center w-full text-sm">
-      <div
-        className={clsx(
-          'p-4 w-full h-full border-2 rounded-lg',
-          variant === EnumVariant.Primary &&
-            'bg-primary-10 border-primary-400 text-primary-600',
-          variant === EnumVariant.Secondary &&
-            'bg-secondary-10 border-secondary-400 text-secondary-600',
-          variant === EnumVariant.Success &&
-            'bg-success-10 border-success-400 text-success-600',
-          variant === EnumVariant.Warning &&
-            'bg-warning-10 border-warning-400 text-warning-600',
-          variant === EnumVariant.Danger &&
-            'bg-danger-10 border-danger-400 text-danger-600',
-          variant === EnumVariant.Info &&
-            'bg-neutral-10 border-neutral-400 text-neutral-400',
-        )}
-      >
-        {headline != null && (
-          <h4 className="mb-2 font-bold text-lg">{headline}</h4>
-        )}
-        {description != null && <p className="text-prose">{description}</p>}
-      </div>
-    </div>
-  )
-}

web/client/src/library/components/plan/PlanWizard.tsx

@@ -1,7 +1,14 @@
 import { Disclosure } from '@headlessui/react'
 import { MinusCircleIcon, PlusCircleIcon } from '@heroicons/react/24/solid'
 import clsx from 'clsx'
-import { type RefObject, Suspense, useCallback, useMemo } from 'react'
+import {
+  type RefObject,
+  Suspense,
+  useCallback,
+  useMemo,
+  useEffect,
+  useState,
+} from 'react'
 import { type ContextEnvironmentBackfill } from '~/api/client'
 import { useStoreContext } from '~/context/context'
 import {
@@ -23,12 +30,17 @@ import { EnumPlanChangeType, usePlan } from './context'
 import { getBackfillStepHeadline, isModified } from './help'
 import Plan from './Plan'
 import PlanChangePreview from './PlanChangePreview'
+import { useChannelEvents } from '@api/channels'
+import { EnumVariant } from '~/types/enum'
+import Banner from '@components/banner/Banner'
 
 export default function PlanWizard({
   setRefTaskProgress,
 }: {
   setRefTaskProgress: RefObject<HTMLDivElement>
 }): JSX.Element {
+  const [subscribe] = useChannelEvents()
+
   const {
     backfills,
     hasChanges,
@@ -39,6 +51,7 @@ export default function PlanWizard({
     removed,
     virtualUpdateDescription,
     skip_backfill,
+    skip_tests,
     change_categorization,
     hasVirtualUpdate,
   } = usePlan()
@@ -48,6 +61,12 @@ export default function PlanWizard({
   const planState = useStorePlan(s => s.state)
   const planAction = useStorePlan(s => s.action)
 
+  const [testsReport, setTestsReport] = useState<{
+    ok: boolean
+    time: number
+    message: string
+  }>()
+
   const categories = useMemo(
     () =>
       Array.from(change_categorization.values()).reduce<
@@ -123,6 +142,14 @@ export default function PlanWizard({
     [backfills, change_categorization, activeBackfill],
   )
 
+  useEffect(() => {
+    const unsubscribeTasks = subscribe('tests', setTestsReport)
+
+    return () => {
+      unsubscribeTasks?.()
+    }
+  }, [])
+
   const isFinished = planState === EnumPlanState.Finished
   const hasNoChanges = [
     hasChanges,
@@ -151,6 +178,28 @@ export default function PlanWizard({
         <Plan.StepOptions className="w-full" />
       ) : (
         <>
+          <PlanWizardStep
+            headline="Tests"
+            description="Report"
+            disabled={environment == null}
+          >
+            {planAction === EnumPlanAction.Running ? (
+              <PlanWizardStepMessage hasSpinner>
+                Running Tests ...
+              </PlanWizardStepMessage>
+            ) : testsReport == null ? (
+              <PlanWizardStepMessage>
+                {skip_tests ? 'Tests Skipped' : 'No Tests'}
+              </PlanWizardStepMessage>
+            ) : (
+              <Banner
+                variant={
+                  testsReport.ok ? EnumVariant.Success : EnumVariant.Danger
+                }
+                description={testsReport.message}
+              />
+            )}
+          </PlanWizardStep>
           <PlanWizardStep
             headline="Models"
             description="Review Changes"

web/client/src/library/components/plan/hooks.ts

@@ -40,7 +40,7 @@ export function usePlanPayload({
   }, [environment, start, end, isInitialPlanRun, restate_models])
 
   const planOptions = useMemo(() => {
-    if (environment.isInitial) return { skip_tests: true }
+    if (environment.isInitial) return { skip_tests: false }
     if (environment.isDefault) return { skip_tests }
 
     return {