fix: workflow step validation

.gitignore

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

examples/workflows/http_example.yml

@@ -23,7 +23,8 @@ workflow:
              Alert details: {{ alert }}"
           # enrich the incident with the current tier
           enrich_incident:
-            current_tier: 0
+            - key: current_tier
+              value: 0
     - name: send-slack-message-tier-1
       if: "{{ incident.current_tier == 0 && alert.name == 'alert1' }}"
       provider:
@@ -36,4 +37,5 @@ workflow:
              Alert: {{ alert.name }} - {{ alert.description }}
              Alert details: {{ alert }}"
           enrich_incident:
-            current_tier: 1
+            - key: current_tier
+              value: 1

keep-ui/.gitignore

@@ -46,3 +46,6 @@ app/topology/mock-topology-data.tsx
 
 # Sentry Config File
 .env.sentry-build-plugin
+
+# Monaco workers (generated at build time for turbopack dev)
+public/monaco-workers/

keep-ui/app/(keep)/topology/ui/map/topology-map.tsx

@@ -61,10 +61,15 @@ import { getNodesAndEdgesFromTopologyData } from "@/app/(keep)/topology/ui/map/g
 import { useIncidents } from "@/utils/hooks/useIncidents";
 import { EdgeBase, Connection } from "@xyflow/system";
 import { AddEditNodeSidePanel } from "./AddEditNodeSidePanel";
-import { toast } from "react-toastify";
 import { useApi } from "@/shared/lib/hooks/useApi";
-import { DropdownMenu, EmptyStateCard, ErrorComponent } from "@/shared/ui";
-import { downloadFileFromString } from "@/shared/ui/YAMLCodeblock/ui/YAMLCodeblock";
+import {
+  DropdownMenu,
+  EmptyStateCard,
+  ErrorComponent,
+  showErrorToast,
+  showSuccessToast,
+} from "@/shared/ui";
+import { downloadFileFromString } from "@/shared/lib/downloadFileFromString";
 import { PlusIcon } from "@heroicons/react/20/solid";
 import { TbTopologyRing } from "react-icons/tb";
 
@@ -176,11 +181,11 @@ export function TopologyMap({
         method: "POST",
         body: formData,
       });
-      toast.success("Topology imported Successfully!");
+      showSuccessToast("Topology imported Successfully!");
       mutateApplications();
       mutateTopologyData();
     } catch (error) {
-      toast.error(`Error uploading file: ${error}`);
+      showErrorToast(error, "Error uploading file");
     }
   };
 
@@ -209,9 +214,13 @@ export function TopologyMap({
               Accept: "application/x-yaml",
             },
           });
-          downloadFileFromString(response, "topology-export.yaml");
+          downloadFileFromString({
+            data: response,
+            filename: "topology-export.yaml",
+            contentType: "application/x-yaml",
+          });
         } catch (error) {
-          console.log(error);
+          showErrorToast(error, "Error exporting topology");
         }
       },
     },
@@ -270,7 +279,8 @@ export function TopologyMap({
         } catch (error) {
           const edgeIdToRevert = `xy-edge__${sourceService.id}right-${targetService.id}left`;
           setEdges((eds) => eds.filter((e) => e.id !== edgeIdToRevert));
-          toast.error(
+          showErrorToast(
+            error,
             `Error while adding connection from ${params.source} to ${params.target}: ${error}`
           );
         }
@@ -311,8 +321,9 @@ export function TopologyMap({
         } catch (error) {
           setEdges((eds) => eds.filter((e) => e.id !== oldEdge.id));
           setEdges((eds) => addEdge(oldEdge, eds));
-          toast.error(
-            `Error while adding (re)connection from ${newConnection.source} to ${newConnection.target}: ${error}`
+          showErrorToast(
+            error,
+            `Error while adding (re)connection from ${newConnection.source} to ${newConnection.target}`
           );
         }
       }
@@ -349,8 +360,9 @@ export function TopologyMap({
           // setEdges((eds) => eds.filter((e) => e.id !== edge.id));
         } catch (error) {
           setEdges((eds) => addEdge(edge, eds));
-          toast.error(
-            `Failed to delete connection from ${edge.source} to ${edge.target}: ${error}`
+          showErrorToast(
+            error,
+            `Failed to delete connection from ${edge.source} to ${edge.target}`
           );
         }
       }

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

@@ -22,10 +22,12 @@ import WorkflowSecrets from "./workflow-secrets";
 import { useConfig } from "utils/hooks/useConfig";
 import { AiOutlineSwap } from "react-icons/ai";
 import { ErrorComponent, TabNavigationLink } from "@/shared/ui";
-import MonacoYAMLEditor from "@/shared/ui/YAMLCodeblock/ui/MonacoYAMLEditor";
+import { WorkflowYAMLEditor } from "@/shared/ui";
 import Skeleton from "react-loading-skeleton";
 import { useRouter, useSearchParams } from "next/navigation";
 import { useWorkflowDetail } from "@/utils/hooks/useWorkflowDetail";
+import { WorkflowYAMLEditorStandalone } from "@/shared/ui/WorkflowYAMLEditor/ui/WorkflowYAMLEditorStandalone";
+import { getOrderedWorkflowYamlString } from "@/entities/workflows/lib/yaml-utils";
 
 export default function WorkflowDetailPage({
   params,
@@ -129,12 +131,12 @@ export default function WorkflowDetailPage({
             {!workflow ? (
               <Skeleton className="w-full h-full" />
             ) : (
-              <Card className="h-[calc(100vh-12rem)] p-0 overflow-hidden">
-                <MonacoYAMLEditor
-                  key={workflow.workflow_raw!}
-                  workflowRaw={workflow.workflow_raw!}
-                  filename={workflow.id ?? "workflow"}
+              <Card className="h-[calc(100vh-12rem)] p-0">
+                <WorkflowYAMLEditorStandalone
                   workflowId={workflow.id}
+                  yamlString={getOrderedWorkflowYamlString(
+                    workflow.workflow_raw!
+                  )}
                   data-testid="wf-detail-yaml-editor"
                 />
               </Card>

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

@@ -4,13 +4,13 @@ import { PlusIcon, TrashIcon } from "@heroicons/react/24/outline";
 import { EyeOff, Eye } from "lucide-react";
 import { GenericTable } from "@/components/table/GenericTable";
 import { DisplayColumnDef } from "@tanstack/react-table";
-import { useSecrets } from "@/utils/hooks/useWorkFlowSecrets";
+import { useWorkflowSecrets } from "@/utils/hooks/useWorkflowSecrets";
 import { Button } from "@/components/ui";
 import { Input } from "@/shared/ui";
 
 const WorkflowSecrets = ({ workflowId }: { workflowId: string }) => {
   const { getSecrets, error, addOrUpdateSecret, deleteSecret } =
-    useSecrets(workflowId);
+    useWorkflowSecrets(workflowId);
   const [newSecret, setNewSecret] = useState({ name: "", value: "" });
   const [showValues, setShowValues] = useState<Record<string, boolean>>({});
   const { data: secrets, mutate: mutateSecrets } = getSecrets;

keep-ui/app/(keep)/workflows/[workflow_id]/workflow-sync-status.tsx

@@ -1,14 +1,19 @@
-import { useWorkflowStore } from "@/entities/workflows";
 import { CloudIcon, ExclamationTriangleIcon } from "@heroicons/react/20/solid";
 import { Tooltip } from "@/shared/ui";
 import { useEffect } from "react";
 import TimeAgo from "react-timeago";
-import { useWorkflowEditorChangesSaved } from "@/entities/workflows/model/workflow-store";
 
-export function WorkflowSyncStatus() {
-  const { isInitialized, lastDeployedAt } = useWorkflowStore();
-  const isChangesSaved = useWorkflowEditorChangesSaved();
+interface WorkflowSyncStatusProps {
+  isInitialized: boolean;
+  lastDeployedAt: number | null;
+  isChangesSaved: boolean;
+}
 
+export function WorkflowSyncStatus({
+  isInitialized,
+  lastDeployedAt,
+  isChangesSaved,
+}: WorkflowSyncStatusProps) {
   useEffect(() => {
     const handler = (e: BeforeUnloadEvent) => {
       if (!isChangesSaved) {

keep-ui/entities/workflows/index.ts

@@ -2,3 +2,4 @@ export { useWorkflowActions } from "./model/useWorkflowActions";
 export { useWorkflowStore } from "./model/workflow-store";
 
 export * from "./model/types";
+export * from "./model/schema";

keep-ui/entities/workflows/lib/__tests__/getCurrentPath.test.ts

@@ -0,0 +1,44 @@
+import { parseDocument } from "yaml";
+import { getCurrentPath } from "../yaml-utils";
+
+const yaml = `
+workflow:
+  steps:
+    - name: step1
+      provider:
+        type: test
+`;
+
+describe("getCurrentPath", () => {
+  const doc = parseDocument(yaml);
+
+  it("should get nested path at provider.type field", () => {
+    // workflow:
+    //   steps:
+    //     - name: step1
+    //       provider:
+    //         type: t<cursor here>est
+    const path = getCurrentPath(doc, 69);
+    expect(path).toEqual(["workflow", "steps", 0, "provider", "type"]);
+  });
+
+  it("should get root path", () => {
+    // w<cursor here>orkflow:
+    //   steps:
+    //     - name: step1
+    //       provider:
+    //         type: test
+    const path = getCurrentPath(doc, 1);
+    expect(path).toEqual(["workflow"]);
+  });
+
+  it("should get nested path, at name field", () => {
+    // workflow:
+    //   steps:
+    //     - name<cursor here>: step1
+    //       provider:
+    //         type: test
+    const path = getCurrentPath(doc, 30);
+    expect(path).toEqual(["workflow", "steps", 0, "name"]);
+  });
+});