fix(ui): saving workflow doesn't refresh cache (#3336)

keep-ui/app/(keep)/workflows/[workflow_id]/workflow-detail-page.tsx

@@ -25,6 +25,7 @@ import { ErrorComponent, TabNavigationLink, YAMLCodeblock } from "@/shared/ui";
 import MonacoYAMLEditor from "@/shared/ui/YAMLCodeblock/ui/MonacoYAMLEditor";
 import Skeleton from "react-loading-skeleton";
 import { usePathname, useRouter, useSearchParams } from "next/navigation";
+import { useWorkflowDetail } from "@/utils/hooks/useWorkflowDetail";
 
 export default function WorkflowDetailPage({
   params,
@@ -51,18 +52,23 @@ export default function WorkflowDetailPage({
     }
   }, [searchParams]);
 
-  const {
-    data: workflow,
-    isLoading,
-    error,
-  } = useSWR<Workflow>(
-    api.isReady() ? `/workflows/${params.workflow_id}` : null,
-    (url: string) => api.get(url),
-    {
-      fallbackData: initialData,
-    }
+  const { workflow, isLoading, error } = useWorkflowDetail(
+    params.workflow_id,
+    initialData
   );
 
+  // Set initial tab based on URL query param
+  useEffect(() => {
+    const tab = searchParams.get("tab");
+    if (tab === "yaml") {
+      setTabIndex(2);
+    } else if (tab === "builder") {
+      setTabIndex(1);
+    } else {
+      setTabIndex(0);
+    }
+  }, [searchParams]);
+
   const docsUrl = configData?.KEEP_DOCS_URL || "https://docs.keephq.dev";
 
   if (error) {

keep-ui/app/(keep)/workflows/workflows.client.tsx

@@ -20,6 +20,7 @@ import { useApi } from "@/shared/lib/hooks/useApi";
 import { KeepApiError } from "@/shared/api";
 import { showErrorToast, Input, ErrorComponent } from "@/shared/ui";
 import { Textarea } from "@/components/ui";
+import { useWorkflowsV2 } from "utils/hooks/useWorkflowsV2";
 
 const EXAMPLE_WORKFLOW_DEFINITIONS = {
   slack: `
@@ -82,16 +83,13 @@ export default function WorkflowsPage() {
           -> last_executions: Used for the workflow execution graph.
           ->last_execution_started: Used for showing the start time of execution in real-time.
   **/
-  const { data, error, isLoading } = useSWR<Workflow[]>(
-    api.isReady() ? `/workflows?is_v2=true` : null,
-    (url: string) => api.get(url)
-  );
+  const { workflows, error, isLoading } = useWorkflowsV2();
 
   if (error) {
     return <ErrorComponent error={error} reset={() => {}} />;
   }
 
-  if (isLoading || !data) {
+  if (isLoading || !workflows) {
     return <Loading />;
   }
 
@@ -208,11 +206,11 @@ export default function WorkflowsPage() {
               </Button>
             </div>
           </div>
-          {data.length === 0 ? (
+          {workflows.length === 0 ? (
             <WorkflowsEmptyState isNewUI={true} />
           ) : (
             <div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4 w-full gap-4">
-              {data.map((workflow) => (
+              {workflows.map((workflow) => (
                 <WorkflowTile key={workflow.id} workflow={workflow} />
               ))}
             </div>

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

@@ -76,6 +76,7 @@ export function useWorkflowActions(): UseWorkflowActionsReturn {
         );
         showSuccessToast("Workflow updated successfully");
         refreshWorkflows();
+        revalidateMultiple([`/workflows/${workflowId}`], { isExact: true });
         return response;
       } catch (error) {
         showErrorToast(error, "Failed to update workflow");

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

@@ -139,7 +139,7 @@ export function WorkflowExecutionResultsInternal({
   checks,
 }: {
   executionData: WorkflowExecutionDetail | WorkflowExecutionFailure;
-  workflowId: string | undefined;
+  workflowId: string;
   workflowRaw: string | undefined;
   checks: number;
 }) {
@@ -189,6 +189,7 @@ export function WorkflowExecutionResultsInternal({
         <div className="h-[calc(100vh-300px)]">
           <MonacoYAMLEditor
             workflowRaw={workflowRaw ?? ""}
+            workflowId={workflowId}
             executionLogs={logs}
             executionStatus={status}
             hoveredStep={hoveredStep}

keep-ui/shared/ui/YAMLCodeblock/ui/MonacoYAMLEditor.tsx

@@ -9,11 +9,12 @@ import { getStepStatus } from "@/shared/lib/logs-utils";
 import yaml from "js-yaml";
 import { useWorkflowActions } from "@/entities/workflows/model/useWorkflowActions";
 import "./MonacoYAMLEditor.css";
+import { useWorkflowDetail } from "@/utils/hooks/useWorkflowDetail";
 
 interface Props {
   workflowRaw: string;
   filename?: string;
-  workflowId?: string;
+  workflowId: string;
   executionLogs?: LogEntry[] | null;
   executionStatus?: string;
   hoveredStep?: string | null;
@@ -37,6 +38,7 @@ const MonacoYAMLEditor = ({
 }: Props) => {
   const editorRef = useRef<editor.IStandaloneCodeEditor | null>(null);
   const { updateWorkflow } = useWorkflowActions();
+  const { mutateWorkflowDetail } = useWorkflowDetail(workflowId || "");
 
   const findStepNameForPosition = (
     lineNumber: number,
@@ -444,7 +446,7 @@ const MonacoYAMLEditor = ({
         workflow: Record<string, unknown>;
       };
       // update workflow
-      await updateWorkflow(workflowId!, parsedYaml);
+      await updateWorkflow(workflowId, parsedYaml);
 
       setOriginalContent(content);
       setHasChanges(false);

keep-ui/utils/hooks/useWorkflowDetail.ts

@@ -0,0 +1,34 @@
+import useSWR, { mutate } from "swr";
+import { useApi } from "@/shared/lib/hooks/useApi";
+import { Workflow } from "@/shared/api/workflows";
+
+export function useWorkflowDetail(workflowId: string, initialData?: Workflow) {
+  const api = useApi();
+
+  const workflowKey = `/workflows/${workflowId}`;
+
+  const {
+    data: workflow,
+    error,
+    isLoading,
+  } = useSWR<Workflow>(
+    api.isReady() ? workflowKey : null,
+    (url: string) => api.get(url),
+    {
+      fallbackData: initialData,
+    }
+  );
+
+  const mutateWorkflowDetail = async () => {
+    await mutate(workflowKey);
+    // Also mutate the workflows list if it exists in the cache
+    await mutate("/workflows?is_v2=true");
+  };
+
+  return {
+    workflow,
+    isLoading,
+    error,
+    mutateWorkflowDetail,
+  };
+}

keep-ui/utils/hooks/useWorkflowsV2.ts

@@ -0,0 +1,25 @@
+import useSWR, { mutate } from "swr";
+import { useApi } from "@/shared/lib/hooks/useApi";
+import { Workflow } from "@/shared/api/workflows";
+
+const WORKFLOWS_KEY = "/workflows?is_v2=true";
+
+export function useWorkflowsV2() {
+  const api = useApi();
+
+  const { data, error, isLoading } = useSWR<Workflow[]>(
+    api.isReady() ? WORKFLOWS_KEY : null,
+    (url: string) => api.get(url)
+  );
+
+  const mutateWorkflows = () => {
+    return mutate(WORKFLOWS_KEY);
+  };
+
+  return {
+    workflows: data,
+    isLoading,
+    error,
+    mutateWorkflows,
+  };
+}

pyproject.toml

@@ -1,6 +1,6 @@
 [tool.poetry]
 name = "keep"
-version = "0.35.16"
+version = "0.35.17"
 description = "Alerting. for developers, by developers."
 authors = ["Keep Alerting LTD"]
 packages = [{include = "keep"}]