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

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

@@ -1,21 +1,28 @@
 import { useApi } from "@/shared/lib/hooks/useApi";
 import { showSuccessToast } from "@/shared/ui/utils/showSuccessToast";
-import { useRevalidateMultiple } from "@/shared/lib/state-utils";
 import { showErrorToast } from "@/shared/ui";
 import { Definition } from "@/app/(keep)/workflows/builder/builder-store";
 import { getWorkflowFromDefinition } from "@/app/(keep)/workflows/builder/utils";
 import { stringify } from "yaml";
 import { useCallback } from "react";
+import { useWorkflowsV2 } from "utils/hooks/useWorkflowsV2";
 
 type UseWorkflowActionsReturn = {
   createWorkflow: (
     definition: Definition
   ) => Promise<CreateOrUpdateWorkflowResponse | null>;
   updateWorkflow: (
     workflowId: string,
-    definition: Definition | Record<string, unknown>
+    definition: Definition | Record<string, unknown>,
+    options?: { mutateWorkflowDetail?: () => Promise<any> }
   ) => Promise<CreateOrUpdateWorkflowResponse | null>;
-  deleteWorkflow: (workflowId: string) => void;
+  deleteWorkflow: (
+    workflowId: string,
+    options?: {
+      skipConfirmation?: boolean;
+      mutateWorkflowDetail?: () => Promise<any>;
+    }
+  ) => void;
 };
 
 type CreateOrUpdateWorkflowResponse = {
@@ -26,10 +33,7 @@ type CreateOrUpdateWorkflowResponse = {
 
 export function useWorkflowActions(): UseWorkflowActionsReturn {
   const api = useApi();
-  const revalidateMultiple = useRevalidateMultiple();
-  const refreshWorkflows = useCallback(() => {
-    revalidateMultiple(["/workflows?is_v2=true"], { isExact: true });
-  }, [revalidateMultiple]);
+  const { mutateWorkflows } = useWorkflowsV2();
 
   const createWorkflow = useCallback(
     async (definition: Definition) => {
@@ -45,20 +49,21 @@ export function useWorkflowActions(): UseWorkflowActionsReturn {
           }
         );
         showSuccessToast("Workflow created successfully");
-        refreshWorkflows();
+        await mutateWorkflows();
         return response;
       } catch (error) {
         showErrorToast(error, "Failed to create workflow");
         return null;
       }
     },
-    [api, refreshWorkflows]
+    [api, mutateWorkflows]
   );
 
   const updateWorkflow = useCallback(
     async (
       workflowId: string,
-      definition: Definition | Record<string, unknown>
+      definition: Definition | Record<string, unknown>,
+      options?: { mutateWorkflowDetail?: () => Promise<any> }
     ) => {
       try {
         const body = stringify(
@@ -75,36 +80,50 @@ export function useWorkflowActions(): UseWorkflowActionsReturn {
           }
         );
         showSuccessToast("Workflow updated successfully");
-        refreshWorkflows();
+
+        const mutations = [mutateWorkflows()];
+        if (options?.mutateWorkflowDetail) {
+          mutations.push(options.mutateWorkflowDetail());
+        }
+        await Promise.all(mutations);
+
         return response;
       } catch (error) {
         showErrorToast(error, "Failed to update workflow");
         return null;
       }
     },
-    [api, refreshWorkflows]
+    [api, mutateWorkflows]
   );
 
   const deleteWorkflow = useCallback(
     async (
       workflowId: string,
-      { skipConfirmation = false }: { skipConfirmation?: boolean } = {}
+      options?: {
+        skipConfirmation?: boolean;
+        mutateWorkflowDetail?: () => Promise<any>;
+      }
     ) => {
       if (
-        !skipConfirmation &&
+        !options?.skipConfirmation &&
         !confirm("Are you sure you want to delete this workflow?")
       ) {
         return false;
       }
       try {
         await api.delete(`/workflows/${workflowId}`);
         showSuccessToast("Workflow deleted successfully");
-        refreshWorkflows();
+
+        const mutations = [mutateWorkflows()];
+        if (options?.mutateWorkflowDetail) {
+          mutations.push(options.mutateWorkflowDetail());
+        }
+        await Promise.all(mutations);
       } catch (error) {
         showErrorToast(error, "An error occurred while deleting workflow");
       }
     },
-    [api, refreshWorkflows]
+    [api, mutateWorkflows]
   );
 
   return {

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, { mutateWorkflowDetail });
 
       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"}]