fix: logs not showing for test runs

.gitignore

@@ -206,6 +206,7 @@ scripts/automatic_extraction_rules.py
 
 playwright_dump_*.html
 playwright_dump_*.png
+playwright_dump_*.txt
 
 ee/experimental/ai_temp/*
 ,e!ee/experimental/ai_temp/.gitkeep

keep-ui/entities/workflows/lib/yaml-utils.ts

@@ -1,4 +1,13 @@
-import { parseDocument, Document, YAMLMap, Pair, Scalar } from "yaml";
+import {
+  parseDocument,
+  Document,
+  YAMLMap,
+  Pair,
+  Scalar,
+  stringify,
+} from "yaml";
+import { Definition } from "../model/types";
+import { getYamlWorkflowDefinition } from "./parser";
 
 const YAML_STRINGIFY_OPTIONS = {
   indent: 2,
@@ -66,3 +75,17 @@ export function parseWorkflowYamlStringToJSON(yamlString: string) {
     : yamlString;
   return parseDocument(content).toJSON();
 }
+
+export function getBodyFromStringOrDefinitionOrObject(
+  definition: Definition | string | Record<string, unknown>
+) {
+  if (typeof definition === "string") {
+    return definition;
+  }
+  if (typeof definition === "object" && "workflow" in definition) {
+    return stringify(definition);
+  }
+  return stringify({
+    workflow: getYamlWorkflowDefinition(definition as Definition),
+  });
+}

keep-ui/entities/workflows/model/useWorkflowActions.ts

@@ -3,22 +3,9 @@ import { showSuccessToast } from "@/shared/ui/utils/showSuccessToast";
 import { useRevalidateMultiple } from "@/shared/lib/state-utils";
 import { showErrorToast } from "@/shared/ui";
 import { Definition } from "@/entities/workflows/model/types";
-import { stringify } from "yaml";
 import { useCallback } from "react";
-import { getYamlWorkflowDefinition } from "@/entities/workflows/lib/parser";
 import { KeepApiError } from "@/shared/api/KeepApiError";
-
-function getBodyFromStringOrDefinitionOrObject(
-  definition: Definition | string | Record<string, unknown>
-) {
-  if (typeof definition === "string") {
-    return definition;
-  }
-  if (typeof definition === "object" && "workflow" in definition) {
-    return stringify(definition);
-  }
-  return stringify(getYamlWorkflowDefinition(definition as Definition));
-}
+import { getBodyFromStringOrDefinitionOrObject } from "../lib/yaml-utils";
 
 type UseWorkflowActionsReturn = {
   uploadWorkflowFiles: (files: FileList) => Promise<string[]>;

keep-ui/features/workflow-execution-results/ui/WorkflowExecutionLogs.tsx

@@ -228,13 +228,15 @@ export function WorkflowExecutionLogs({
   checks,
   hoveredStep,
   selectedStep,
+  isLoading,
 }: {
   logs: LogEntry[] | null;
   results: Record<string, any> | null;
   status: WorkflowExecutionDetail["status"];
   checks: number;
   hoveredStep: string | null;
   selectedStep: string | null;
+  isLoading: boolean;
 }) {
   const groupedLogs = useMemo(() => {
     if (!logs) {
@@ -324,7 +326,7 @@ export function WorkflowExecutionLogs({
   return (
     <Card className="flex flex-col overflow-hidden p-2">
       <div className="flex-1 overflow-auto">
-        {status === "in_progress" ? (
+        {isLoading ? (
           <div>
             {Array.from({ length: 6 }).map((_, index) => (
               <div key={index} className="flex gap-2 h-10">
@@ -336,10 +338,12 @@ export function WorkflowExecutionLogs({
                 </div>
               </div>
             ))}
-            <p>
-              The workflow is in progress, will check again in one second (times
-              checked: {checks})
-            </p>
+            {status === "in_progress" && (
+              <p>
+                The workflow is in progress, will check again in one second
+                (times checked: {checks})
+              </p>
+            )}
           </div>
         ) : (
           <div className="flex flex-col gap-1">

keep-ui/features/workflow-execution-results/ui/WorkflowExecutionResults.tsx

@@ -1,7 +1,7 @@
 "use client";
 
 import React, { useEffect, useState, useMemo } from "react";
-import { Card, Title, Callout } from "@tremor/react";
+import { Card, Callout, Button } from "@tremor/react";
 import Loading from "@/app/(keep)/loading";
 import { ExclamationCircleIcon } from "@heroicons/react/24/outline";
 import { TabGroup, Tab, TabList, TabPanel, TabPanels } from "@tremor/react";
@@ -16,7 +16,8 @@ import MonacoYAMLEditor from "@/shared/ui/YAMLCodeblock/ui/MonacoYAMLEditor";
 import { WorkflowExecutionError } from "./WorkflowExecutionError";
 import { WorkflowExecutionLogs } from "./WorkflowExecutionLogs";
 import { setFavicon } from "@/shared/ui/utils/favicon";
-import { ResizableColumns } from "@/shared/ui";
+import { EmptyStateCard, ResizableColumns } from "@/shared/ui";
+import { useRevalidateMultiple } from "@/shared/lib/state-utils";
 
 const convertWorkflowStatusToFaviconStatus = (
   status: WorkflowExecutionDetail["status"]
@@ -35,18 +36,19 @@ interface WorkflowResultsProps {
     | WorkflowExecutionFailure
     | null;
   standalone?: boolean;
+  workflowYaml?: string;
 }
 
 export function WorkflowExecutionResults({
   workflowId,
   workflowExecutionId,
   initialWorkflowExecution,
   standalone = false,
+  workflowYaml,
 }: WorkflowResultsProps) {
   const api = useApi();
   const [refreshInterval, setRefreshInterval] = useState(1000);
-  const [checks, setChecks] = useState(1);
-  const [error, setError] = useState<string | null>(null);
+  const [checks, setChecks] = useState(0);
 
   const { data: executionData, error: executionError } = useSWR(
     api.isReady() && workflowExecutionId
@@ -60,26 +62,29 @@ export function WorkflowExecutionResults({
       return fetchedData;
     },
     {
+      dedupingInterval: 990,
       refreshInterval: refreshInterval,
       fallbackData: initialWorkflowExecution,
     }
   );
 
   const { data: workflowData, error: workflowError } = useSWR(
-    api.isReady() ? `/workflows/${workflowId}` : null,
+    api.isReady() && !workflowYaml ? `/workflows/${workflowId}` : null,
     (url) => api.get(url)
   );
 
+  const finalYaml = workflowYaml ?? workflowData?.workflow_raw;
+
   useEffect(() => {
-    if (!standalone || !workflowData) {
+    if (!standalone || !executionData) {
       return;
     }
-    const status = executionData?.error ? "failed" : executionData?.status;
-    document.title = `${workflowData.name} - Workflow Results - Keep`;
+    const status = executionData.error ? "failed" : executionData.status;
+    document.title = `${executionData.workflow_name} - Workflow Results - Keep`;
     if (status) {
       setFavicon(convertWorkflowStatusToFaviconStatus(status));
     }
-  }, [standalone, executionData, workflowData]);
+  }, [standalone, executionData]);
 
   useEffect(() => {
     if (!executionData) return;
@@ -89,15 +94,13 @@ export function WorkflowExecutionResults({
       setRefreshInterval(0);
     }
     if (executionData.error) {
-      setError(executionData?.error);
       setRefreshInterval(0);
     } else if (executionData?.status === "success") {
-      setError(executionData?.error);
       setRefreshInterval(0);
     }
   }, [executionData]);
 
-  if (!executionData || !workflowData) {
+  if (!executionData || !finalYaml) {
     return <Loading />;
   }
 
@@ -126,8 +129,9 @@ export function WorkflowExecutionResults({
     <WorkflowExecutionResultsInternal
       workflowId={workflowId}
       executionData={executionData}
-      workflowRaw={workflowData.workflow_raw}
+      workflowRaw={finalYaml}
       checks={checks}
+      isLoading={refreshInterval > 0}
     />
   );
 }
@@ -137,11 +141,13 @@ export function WorkflowExecutionResultsInternal({
   executionData,
   workflowRaw,
   checks,
+  isLoading,
 }: {
   executionData: WorkflowExecutionDetail | WorkflowExecutionFailure;
   workflowId: string;
   workflowRaw: string | undefined;
   checks: number;
+  isLoading: boolean;
 }) {
   const [hoveredStep, setHoveredStep] = useState<string | null>(null);
   const [selectedStep, setSelectedStep] = useState<string | null>(null);
@@ -151,7 +157,7 @@ export function WorkflowExecutionResultsInternal({
   let results: WorkflowExecutionDetail["results"] | undefined;
   let eventId: string | undefined;
   let eventType: string | undefined;
-
+  const revalidateMultiple = useRevalidateMultiple();
   if (isWorkflowExecution(executionData)) {
     status = executionData.status;
     logs = executionData.logs;
@@ -232,16 +238,35 @@ export function WorkflowExecutionResultsInternal({
       )}
       <ResizableColumns initialLeftWidth={50}>
         <div className="pr-2">
-          <Card className="p-0 overflow-hidden">
-            <WorkflowExecutionLogs
-              logs={logs ?? null}
-              results={results ?? null}
-              status={status ?? ""}
-              checks={checks}
-              hoveredStep={hoveredStep}
-              selectedStep={selectedStep}
-            />
-          </Card>
+          {logs ? (
+            <Card className="p-0 overflow-hidden">
+              <WorkflowExecutionLogs
+                logs={logs ?? null}
+                results={results ?? null}
+                status={status ?? ""}
+                checks={checks}
+                hoveredStep={hoveredStep}
+                selectedStep={selectedStep}
+                isLoading={isLoading}
+              />
+            </Card>
+          ) : (
+            <EmptyStateCard
+              title="No logs found"
+              description="The workflow is still running"
+            >
+              <Button
+                variant="primary"
+                color="orange"
+                size="sm"
+                onClick={() => {
+                  revalidateMultiple([`/workflows/${workflowId}/runs`]);
+                }}
+              >
+                Refresh
+              </Button>
+            </EmptyStateCard>
+          )}
         </div>
         <div className="px-2">
           <Card className="p-0 overflow-hidden">

keep-ui/features/workflows/builder/ui/Editor/StepTest.tsx

@@ -8,6 +8,7 @@ import { SparklesIcon } from "@heroicons/react/24/outline";
 import { useCopilotChat } from "@copilotkit/react-core";
 import { Role } from "@copilotkit/runtime-client-gql";
 import { TextMessage } from "@copilotkit/runtime-client-gql";
+import { useConfig } from "@/utils/hooks/useConfig";
 
 export function useTestStep() {
   const api = useApi();
@@ -38,6 +39,7 @@ const WFDebugWithAI = ({
   errors: { [key: string]: string };
   description: string;
 }) => {
+  // careful, useCopilotChat may not be available if user has not set an OpenAI API key
   const { appendMessage } = useCopilotChat();
   return (
     <Button
@@ -68,11 +70,11 @@ const WFDebugWithAIButton = ({
   errors: { [key: string]: string };
   description: string;
 }) => {
-  try {
-    return <WFDebugWithAI errors={errors} description={description} />;
-  } catch (e) {
+  const { data: config } = useConfig();
+  if (!config?.OPEN_AI_API_KEY_SET) {
     return null;
   }
+  return <WFDebugWithAI errors={errors} description={description} />;
 };
 
 const variablesRegex = /{{[\s]*.*?[\s]*}}/g;

keep-ui/features/workflows/test-run/ui/builder-workflow-testrun-modal-content.tsx

@@ -1,23 +1,19 @@
 import { Title } from "@tremor/react";
-import {
-  isWorkflowExecution,
-  WorkflowExecutionDetail,
-  WorkflowExecutionFailure,
-} from "@/shared/api/workflow-executions";
 import { WorkflowExecutionResults } from "@/features/workflow-execution-results";
 import { IoClose } from "react-icons/io5";
-import { KeepLoader } from "@/shared/ui";
 
 interface Props {
   closeModal: () => void;
   workflowId: string;
-  workflowExecution: WorkflowExecutionDetail | WorkflowExecutionFailure | null;
+  workflowExecutionId: string;
+  workflowYamlSent: string | null;
 }
 
 export function BuilderWorkflowTestRunModalContent({
   closeModal,
   workflowId,
-  workflowExecution,
+  workflowExecutionId,
+  workflowYamlSent,
 }: Props) {
   return (
     <div className="flex flex-col gap-4">
@@ -32,21 +28,11 @@ export function BuilderWorkflowTestRunModalContent({
         </div>
       </div>
       <div className="flex flex-col">
-        {workflowExecution ? (
-          <WorkflowExecutionResults
-            workflowId={workflowId}
-            initialWorkflowExecution={workflowExecution}
-            workflowExecutionId={
-              isWorkflowExecution(workflowExecution)
-                ? workflowExecution.id
-                : null
-            }
-          />
-        ) : (
-          <div className="flex justify-center">
-            <KeepLoader loadingText="Loading workflow execution results..." />
-          </div>
-        )}
+        <WorkflowExecutionResults
+          workflowId={workflowId}
+          workflowExecutionId={workflowExecutionId}
+          workflowYaml={workflowYamlSent ?? ""}
+        />
       </div>
     </div>
   );