feat: improve the builder actions and form validations

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

@@ -214,7 +214,7 @@ export default function WorkflowOverview({
             </StatsCard>
             <StatsCard>
               <Title>Involved Services</Title>
-              <WorkflowSteps workflow={parsedWorkflowFile} />
+              <WorkflowSteps workflow={parsedWorkflowFile} key={workflow_id}/>
             </StatsCard>
           </div>
           <WorkflowGraph

keep-ui/app/(keep)/workflows/builder/ReactFlowEditor.tsx

@@ -1,7 +1,7 @@
 import { useState, useEffect, useRef } from "react";
 import { IoMdSettings, IoMdClose } from "react-icons/io";
+import { GlobalEditorV2, StepEditorV3 } from "./editors";
 import useStore from "./builder-store";
-import { GlobalEditorV2, StepEditorV2 } from "./editors";
 import { Divider } from "@tremor/react";
 import { Provider } from "@/app/(keep)/providers/providers";
 import { reConstructWorklowToDefinition } from "utils/reactFlow";
@@ -116,7 +116,7 @@ const ReactFlowEditor = ({
     };
     const debouncedHandleDefinitionChange = debounce(
       handleDefinitionChange,
-      300
+      1000
     );
 
     debouncedHandleDefinitionChange();
@@ -156,7 +156,7 @@ const ReactFlowEditor = ({
                 <Divider ref={stepEditorRef} />
               )}
               {!selectedNode?.includes("empty") && !isTrigger && (
-                <StepEditorV2
+                <StepEditorV3
                   providers={providers}
                   installedProviders={installedProviders}
                   setSynced={setSynced}

keep-ui/app/(keep)/workflows/builder/ToolBox.tsx

@@ -1,6 +1,6 @@
 import React, { useState, useEffect, useMemo } from "react";
 import { Disclosure } from "@headlessui/react";
-import { Subtitle } from "@tremor/react";
+import { Subtitle, Switch } from "@tremor/react";
 import { IoChevronUp, IoClose } from "react-icons/io5";
 import Image from "next/image";
 import { IoIosArrowDown } from "react-icons/io";
@@ -93,7 +93,7 @@ const GroupedMenu = ({
               {steps.length > 0 &&
                 steps.map((step: any) => (
                   <li
-                    key={step.type}
+                    key={`${step.type}__${step.id || step.name}`}
                     className="dndnode p-2 my-1 border border-gray-300 rounded cursor-pointer truncate flex justify-start gap-2 items-center"
                     onDragStart={(event) => handleDragStart(event, { ...step })}
                     draggable={isDraggable}
@@ -125,7 +125,8 @@ const DragAndDropSidebar = ({ isDraggable }: { isDraggable?: boolean }) => {
   const [searchTerm, setSearchTerm] = useState("");
   const [isVisible, setIsVisible] = useState(false);
   const [open, setOpen] = useState(false);
-  const { toolboxConfiguration, selectedNode, selectedEdge, nodes } =
+  const [showinstalled, setShowInstalled] = useState(true);
+  const { toolboxConfiguration, selectedNode, selectedEdge, nodes, edges } =
     useStore();
 
   useEffect(() => {
@@ -148,17 +149,46 @@ const DragAndDropSidebar = ({ isDraggable }: { isDraggable?: boolean }) => {
     );
 
   const filteredGroups = useMemo(() => {
-    return (
+    const checkInstalled = (step: V2Step, groupName: string) => {
+      if (!showinstalled) {
+        return true;
+      }
+
+      if (["Conditions", "Misc", "Triggers"].includes(groupName)) {
+        return true;
+      }
+
+      return step?.installed;
+    };
+    let finalGroups =
       toolboxConfiguration?.groups?.map((group: any) => ({
         ...group,
         steps: group?.steps?.filter(
           (step: any) =>
+            checkInstalled(step, group.name) &&
             step?.name?.toLowerCase().includes(searchTerm?.toLowerCase()) &&
             !triggerNodeMap[step?.id]
         ),
-      })) || []
-    );
-  }, [toolboxConfiguration, searchTerm, nodes?.length]);
+      })) || [];
+    const selectedAddEdge = edges.find((edge) => edge.id === selectedEdge);
+    if (selectedEdge && selectedAddEdge) {
+      finalGroups = finalGroups.filter(
+        (group: { name: string }) =>
+          (group?.name == "Triggers" &&
+            selectedAddEdge.source === "trigger_start") ||
+          (selectedAddEdge.source !== "trigger_start" &&
+            group?.name !== "Triggers")
+      );
+    }
+    return finalGroups;
+  }, [
+    toolboxConfiguration?.groups,
+    edges,
+    selectedEdge,
+    showinstalled,
+    searchTerm,
+    triggerNodeMap,
+  ]);
 
   const checkForSearchResults =
     searchTerm &&
@@ -178,7 +208,9 @@ const DragAndDropSidebar = ({ isDraggable }: { isDraggable?: boolean }) => {
       <div className="relative h-full flex flex-col">
         {/* Sticky header */}
         <div className="sticky top-0 left-0 z-10">
-          <h1 className="p-3 font-bold">Toolbox</h1>
+          <div className="flex justify-between">
+            <h1 className="p-3 font-bold">Toolbox</h1>
+          </div>
           <div className="flex items-center justify-between p-2 pt-0 border-b-2 bg-white">
             <input
               type="text"
@@ -205,17 +237,28 @@ const DragAndDropSidebar = ({ isDraggable }: { isDraggable?: boolean }) => {
 
         {/* Scrollable list */}
         {(isVisible || checkForSearchResults) && (
-          <div className="flex-1 overflow-y-auto pt-6 space-y-4 overflow-hidden">
-            {filteredGroups.length > 0 &&
-              filteredGroups.map((group: Record<string, any>) => (
-                <GroupedMenu
-                  key={group.name}
-                  name={group.name}
-                  steps={group.steps}
-                  searchTerm={searchTerm}
-                  isDraggable={isDraggable}
-                />
-              ))}
+          <div className="flex-1 overflow-y-auto overflow-hidden">
+            <div className="flex flex-col items-end mr-4">
+              <div>Installed</div>
+              <Switch
+                id="installed"
+                name="Installed"
+                checked={showinstalled}
+                onChange={setShowInstalled}
+              />
+            </div>
+            <div className="space-y-4 pt-4">
+              {filteredGroups.length > 0 &&
+                filteredGroups.map((group: Record<string, any>) => (
+                  <GroupedMenu
+                    key={group.name}
+                    name={group.name}
+                    steps={group.steps}
+                    searchTerm={searchTerm}
+                    isDraggable={isDraggable}
+                  />
+                ))}
+            </div>
           </div>
         )}
       </div>

keep-ui/app/(keep)/workflows/builder/builder-store.tsx

@@ -47,6 +47,7 @@ export type V2Step = {
   edgeSource?: string;
   edgeTarget?: string;
   notClickable?: boolean;
+  installed?: boolean;
 };
 
 export type NodeData = Node["data"] & Record<string, any>;
@@ -74,6 +75,10 @@ export type FlowState = {
   openGlobalEditor: boolean;
   stepEditorOpenForNode: string | null;
   toolboxConfiguration: Record<string, any>;
+  stepErrors: Record<string,string> | null;
+  globalErrors: Record<string,string> | null;
+  setStepErrors: (error: Record<string,string> | null) => void;
+  setGlobalErros: (error: Record<string,string> | null) => void;
   onNodesChange: OnNodesChange<FlowNode>;
   onEdgesChange: OnEdgesChange<Edge>;
   onConnect: OnConnect;
@@ -264,6 +269,8 @@ function addNodeBetween(
       break;
     }
   }
+  //on adding new node. highlight the added node and update the editor
+  set({selectedNode: newNodeId, stepEditorOpenForNode: newNodeId})
 }
 
 const useStore = create<FlowState>((set, get) => ({
@@ -282,6 +289,10 @@ const useStore = create<FlowState>((set, get) => ({
   errorNode: null,
   synced: true,
   canDeploy: false,
+  stepErrors: null,
+  globalErrors: null,
+  setGlobalErros: (errors:Record<string,string>|null)=>set({globalErrors: errors}),
+  setStepErrors: (errors:Record<string,string>|null)=>set({stepErrors: errors}),
   setCanDeploy: (deploy) => set({ canDeploy: deploy }),
   setSynced: (sync) => set({ synced: sync }),
   setErrorNode: (id) => set({ errorNode: id }),