From 55cb0e5aabf8f74493c779ae838671c1fa9b399b Mon Sep 17 00:00:00 2001
From: Kirill Chernakov <yakiryous@gmail.com>
Date: Wed, 25 Dec 2024 16:51:39 +0400
Subject: [PATCH] chore: workflow builder: remove leftovers, unused imports,
 variables, css (#2900)

---
 .../workflows/[workflow_id]/executions.tsx    |  1 -
 .../builder/BuilderChanagesTracker.tsx        | 55 ------------------
 .../(keep)/workflows/builder/CustomEdge.tsx   | 12 ++--
 .../workflows/builder/ReactFlowBuilder.tsx    |  8 +--
 .../workflows/builder/[workflowId]/page.tsx   |  6 ++
 .../(keep)/workflows/builder/builder-card.tsx | 57 +++++++++---------
 .../workflows/builder/builder-modal.tsx       |  6 +-
 .../workflows/builder/builder-store.tsx       | 26 ---------
 .../workflows/builder/builder-validators.tsx  |  2 -
 .../builder-workflow-testrun-modal.tsx        |  2 +-
 .../app/(keep)/workflows/builder/builder.tsx  | 58 ++++++++++++-------
 .../{alert.tsx => legacy-workflow.types.ts}   |  2 -
 .../app/(keep)/workflows/builder/loader.tsx   |  6 +-
 .../(keep)/workflows/builder/page.client.tsx  | 27 +++++----
 keep-ui/app/(keep)/workflows/builder/page.css | 27 ---------
 keep-ui/app/(keep)/workflows/builder/page.tsx |  7 ++-
 .../app/(keep)/workflows/builder/utils.tsx    |  3 +-
 .../app/(keep)/workflows/workflow-menu.tsx    |  7 +--
 18 files changed, 108 insertions(+), 204 deletions(-)
 delete mode 100644 keep-ui/app/(keep)/workflows/builder/BuilderChanagesTracker.tsx
 rename keep-ui/app/(keep)/workflows/builder/{alert.tsx => legacy-workflow.types.ts} (91%)
 delete mode 100644 keep-ui/app/(keep)/workflows/builder/page.css

diff --git a/keep-ui/app/(keep)/workflows/[workflow_id]/executions.tsx b/keep-ui/app/(keep)/workflows/[workflow_id]/executions.tsx
index a5ac90629..eb4ae1851 100644
--- a/keep-ui/app/(keep)/workflows/[workflow_id]/executions.tsx
+++ b/keep-ui/app/(keep)/workflows/[workflow_id]/executions.tsx
@@ -18,7 +18,6 @@ export default function WorkflowDetailPage({
 }: {
   params: { workflow_id: string };
 }) {
-  const router = useRouter();
   const api = useApi();
   const [navlink, setNavLink] = useState("overview");
 
diff --git a/keep-ui/app/(keep)/workflows/builder/BuilderChanagesTracker.tsx b/keep-ui/app/(keep)/workflows/builder/BuilderChanagesTracker.tsx
deleted file mode 100644
index 8ecc1feb5..000000000
--- a/keep-ui/app/(keep)/workflows/builder/BuilderChanagesTracker.tsx
+++ /dev/null
@@ -1,55 +0,0 @@
-import React from "react";
-import useStore from "./builder-store";
-import { Button } from "@tremor/react";
-import { reConstructWorklowToDefinition } from "utils/reactFlow";
-
-export default function BuilderChanagesTracker({
-  onDefinitionChange,
-}: {
-  onDefinitionChange: (def: Record<string, any>) => void;
-}) {
-  const {
-    nodes,
-    edges,
-    setEdges,
-    setNodes,
-    isLayouted,
-    setIsLayouted,
-    v2Properties,
-    changes,
-    setChanges,
-    lastSavedChanges,
-    setLastSavedChanges,
-  } = useStore();
-  const handleDiscardChanges = (e: React.MouseEvent<HTMLButtonElement>) => {
-    if (!isLayouted) return;
-    setEdges(lastSavedChanges.edges || []);
-    setNodes(lastSavedChanges.nodes || []);
-    setChanges(0);
-    setIsLayouted(false);
-  };
-
-  const handleSaveChanges = (e: React.MouseEvent<HTMLButtonElement>) => {
-    e.preventDefault();
-    e.stopPropagation();
-    setLastSavedChanges({ nodes: nodes, edges: edges });
-    const value = reConstructWorklowToDefinition({
-      nodes: nodes,
-      edges: edges,
-      properties: v2Properties,
-    });
-    onDefinitionChange(value);
-    setChanges(0);
-  };
-
-  return (
-    <div className="flex gap-2.5">
-      <Button onClick={handleDiscardChanges} disabled={changes === 0}>
-        Discard{changes ? `(${changes})` : ""}
-      </Button>
-      <Button onClick={handleSaveChanges} disabled={changes === 0}>
-        Save
-      </Button>
-    </div>
-  );
-}
diff --git a/keep-ui/app/(keep)/workflows/builder/CustomEdge.tsx b/keep-ui/app/(keep)/workflows/builder/CustomEdge.tsx
index f1d17c72e..502f3b90b 100644
--- a/keep-ui/app/(keep)/workflows/builder/CustomEdge.tsx
+++ b/keep-ui/app/(keep)/workflows/builder/CustomEdge.tsx
@@ -1,6 +1,6 @@
 import React from "react";
 import { BaseEdge, EdgeLabelRenderer, getSmoothStepPath } from "@xyflow/react";
-import type { Edge, EdgeProps } from "@xyflow/react";
+import type { EdgeProps } from "@xyflow/react";
 import useStore from "./builder-store";
 import { PlusIcon } from "@radix-ui/react-icons";
 import { Button } from "@tremor/react";
@@ -24,7 +24,7 @@ const CustomEdge: React.FC<CustomEdgeProps> = ({
   data,
   style,
 }: CustomEdgeProps) => {
-  const { deleteEdges, edges, setSelectedEdge, selectedEdge } = useStore();
+  const { setSelectedEdge, selectedEdge } = useStore();
 
   // Calculate the path and midpoint
   const [edgePath, labelX, labelY] = getSmoothStepPath({
@@ -35,9 +35,6 @@ const CustomEdge: React.FC<CustomEdgeProps> = ({
     borderRadius: 10,
   });
 
-  const midpointX = (sourceX + targetX) / 2;
-  const midpointY = (sourceY + targetY) / 2;
-
   let dynamicLabel = label;
   const isLayouted = !!data?.isLayouted;
   let showAddButton =
@@ -54,8 +51,9 @@ const CustomEdge: React.FC<CustomEdgeProps> = ({
     dynamicLabel === "True"
       ? "left-0 bg-green-500"
       : dynamicLabel === "False"
-      ? "bg-red-500"
-      : "bg-orange-500";
+        ? "bg-red-500"
+        : "bg-orange-500";
+
   return (
     <>
       <BaseEdge
diff --git a/keep-ui/app/(keep)/workflows/builder/ReactFlowBuilder.tsx b/keep-ui/app/(keep)/workflows/builder/ReactFlowBuilder.tsx
index cf89455b3..4ffa779b7 100644
--- a/keep-ui/app/(keep)/workflows/builder/ReactFlowBuilder.tsx
+++ b/keep-ui/app/(keep)/workflows/builder/ReactFlowBuilder.tsx
@@ -1,11 +1,9 @@
-import React, { useEffect, useState } from "react";
+import React from "react";
 import {
   ReactFlow,
   Background,
   Controls,
   EdgeTypes as EdgeTypesType,
-  Edge,
-  useReactFlow,
 } from "@xyflow/react";
 import CustomNode from "./CustomNode";
 import CustomEdge from "./CustomEdge";
@@ -60,8 +58,8 @@ const ReactFlowBuilder = ({
   } = useWorkflowInitialization(definition, toolboxConfiguration);
 
   return (
-    <div className="sqd-designer-react">
-      <div className="sqd-designer sqd-theme-light sqd-layout-desktop">
+    <div className="h-[inherit] rounded-lg">
+      <div className="h-full sqd-theme-light sqd-layout-desktop">
         <DragAndDropSidebar isDraggable={false} />
         {!isLoading && (
           <ReactFlow
diff --git a/keep-ui/app/(keep)/workflows/builder/[workflowId]/page.tsx b/keep-ui/app/(keep)/workflows/builder/[workflowId]/page.tsx
index 2b705fd2f..7968073fe 100644
--- a/keep-ui/app/(keep)/workflows/builder/[workflowId]/page.tsx
+++ b/keep-ui/app/(keep)/workflows/builder/[workflowId]/page.tsx
@@ -1,3 +1,4 @@
+import { Metadata } from "next";
 import PageClient from "../page.client";
 import { createServerApiClient } from "@/shared/api/server";
 
@@ -21,3 +22,8 @@ export default async function PageWithId({
     <PageClient workflow={text.workflow_raw} workflowId={params.workflowId} />
   );
 }
+
+export const metadata: Metadata = {
+  title: "Keep - Workflow Builder",
+  description: "Build workflows with a UI builder.",
+};
diff --git a/keep-ui/app/(keep)/workflows/builder/builder-card.tsx b/keep-ui/app/(keep)/workflows/builder/builder-card.tsx
index 851f9fd00..a26c93c25 100644
--- a/keep-ui/app/(keep)/workflows/builder/builder-card.tsx
+++ b/keep-ui/app/(keep)/workflows/builder/builder-card.tsx
@@ -5,7 +5,6 @@ import { useEffect, useState } from "react";
 import Loader from "./loader";
 import { Provider } from "../../providers/providers";
 import { useProviders } from "utils/hooks/useProviders";
-import clsx from "clsx";
 
 const Builder = dynamic(() => import("./builder"), {
   ssr: false, // Prevents server-side rendering
@@ -53,20 +52,14 @@ export function BuilderCard({
 
   if (!providers || isLoading)
     return (
-      <Card className="mt-10 p-4 md:p-10 mx-auto">
+      <Card className="mt-2 p-4 mx-auto">
         <Loader />
       </Card>
     );
 
-  return (
-    <Card
-      className={clsx(
-        "mt-2 p-0 mx-auto",
-        error ? null : "h-[95%]",
-        workflow ? "h-full" : "h-[95%]"
-      )}
-    >
-      {error ? (
+  if (error) {
+    return (
+      <Card className="mt-2 p-4 mx-auto">
         <Callout
           className="mt-4"
           title="Error"
@@ -75,23 +68,31 @@ export function BuilderCard({
         >
           Failed to load providers
         </Callout>
-      ) : fileContents == "" && !workflow ? (
+      </Card>
+    );
+  }
+
+  if (fileContents == "" && !workflow) {
+    return (
+      <Card className="mt-2 p-4 mx-auto h-[95%]">
         <Loader />
-      ) : (
-        <Builder
-          providers={providers}
-          installedProviders={installedProviders}
-          loadedAlertFile={fileContents}
-          fileName={fileName}
-          enableGenerate={enableGenerate}
-          triggerGenerate={triggerGenerate}
-          triggerSave={triggerSave}
-          triggerRun={triggerRun}
-          workflow={workflow}
-          workflowId={workflowId}
-          isPreview={isPreview}
-        />
-      )}
-    </Card>
+      </Card>
+    );
+  }
+
+  return (
+    <Builder
+      providers={providers}
+      installedProviders={installedProviders}
+      loadedAlertFile={fileContents}
+      fileName={fileName}
+      enableGenerate={enableGenerate}
+      triggerGenerate={triggerGenerate}
+      triggerSave={triggerSave}
+      triggerRun={triggerRun}
+      workflow={workflow}
+      workflowId={workflowId}
+      isPreview={isPreview}
+    />
   );
 }
diff --git a/keep-ui/app/(keep)/workflows/builder/builder-modal.tsx b/keep-ui/app/(keep)/workflows/builder/builder-modal.tsx
index 1bbfd35ae..44eb01855 100644
--- a/keep-ui/app/(keep)/workflows/builder/builder-modal.tsx
+++ b/keep-ui/app/(keep)/workflows/builder/builder-modal.tsx
@@ -2,7 +2,7 @@ import { XMarkIcon } from "@heroicons/react/24/outline";
 import { Button, Card, Subtitle, Title } from "@tremor/react";
 import { CopyBlock, a11yLight } from "react-code-blocks";
 import { stringify } from "yaml";
-import { Alert } from "./alert";
+import { Alert } from "./legacy-workflow.types";
 import { useState } from "react";
 import ReactLoading from "react-loading";
 import { ArrowDownTrayIcon } from "@heroicons/react/20/solid";
@@ -56,8 +56,8 @@ export default function BuilderModalContent({
     <>
       <div className="flex justify-between items-center">
         <div>
-          <Title>Generated Alert</Title>
-          <Subtitle>Keep alert specification ready to use</Subtitle>
+          <Title>Generated Workflow YAML</Title>
+          <Subtitle>Keep workflow specification ready to use</Subtitle>
         </div>
         <div>
           {!hideCloseButton && (
diff --git a/keep-ui/app/(keep)/workflows/builder/builder-store.tsx b/keep-ui/app/(keep)/workflows/builder/builder-store.tsx
index 551242cd7..d16d3b2b5 100644
--- a/keep-ui/app/(keep)/workflows/builder/builder-store.tsx
+++ b/keep-ui/app/(keep)/workflows/builder/builder-store.tsx
@@ -66,32 +66,6 @@ export type FlowNode = Node & {
   isNested: boolean;
 };
 
-const initialNodes: Partial<FlowNode>[] = [
-  {
-    id: "a",
-    position: { x: 0, y: 0 },
-    data: { label: "Node A", type: "custom" },
-    type: "custom",
-  },
-  {
-    id: "b",
-    position: { x: 0, y: 100 },
-    data: { label: "Node B", type: "custom" },
-    type: "custom",
-  },
-  {
-    id: "c",
-    position: { x: 0, y: 200 },
-    data: { label: "Node C", type: "custom" },
-    type: "custom",
-  },
-];
-
-const initialEdges: Edge[] = [
-  { id: "a->b", type: "custom-edge", source: "a", target: "b" },
-  { id: "b->c", type: "custom-edge", source: "b", target: "c" },
-];
-
 export type FlowState = {
   nodes: FlowNode[];
   edges: Edge[];
diff --git a/keep-ui/app/(keep)/workflows/builder/builder-validators.tsx b/keep-ui/app/(keep)/workflows/builder/builder-validators.tsx
index 600ae004a..fc04f87ea 100644
--- a/keep-ui/app/(keep)/workflows/builder/builder-validators.tsx
+++ b/keep-ui/app/(keep)/workflows/builder/builder-validators.tsx
@@ -1,5 +1,3 @@
-import { Dispatch, SetStateAction } from "react";
-
 import {
   Definition as FlowDefinition,
   ReactFlowDefinition,
diff --git a/keep-ui/app/(keep)/workflows/builder/builder-workflow-testrun-modal.tsx b/keep-ui/app/(keep)/workflows/builder/builder-workflow-testrun-modal.tsx
index 94e0ae849..ca7c5d57e 100644
--- a/keep-ui/app/(keep)/workflows/builder/builder-workflow-testrun-modal.tsx
+++ b/keep-ui/app/(keep)/workflows/builder/builder-workflow-testrun-modal.tsx
@@ -1,5 +1,5 @@
 import { XMarkIcon } from "@heroicons/react/24/outline";
-import { Button, Card, Subtitle, Title } from "@tremor/react";
+import { Button, Card, Title } from "@tremor/react";
 import ReactLoading from "react-loading";
 import { ExecutionResults } from "./workflow-execution-results";
 import { WorkflowExecution, WorkflowExecutionFailure } from "./types";
diff --git a/keep-ui/app/(keep)/workflows/builder/builder.tsx b/keep-ui/app/(keep)/workflows/builder/builder.tsx
index 0a9e2918d..8f6553f06 100644
--- a/keep-ui/app/(keep)/workflows/builder/builder.tsx
+++ b/keep-ui/app/(keep)/workflows/builder/builder.tsx
@@ -14,7 +14,7 @@ import {
 } from "@heroicons/react/20/solid";
 import { globalValidatorV2, stepValidatorV2 } from "./builder-validators";
 import Modal from "react-modal";
-import { Alert } from "./alert";
+import { Alert } from "./legacy-workflow.types";
 import BuilderModalContent from "./builder-modal";
 import Loader from "./loader";
 import { stringify } from "yaml";
@@ -35,8 +35,8 @@ import { toast } from "react-toastify";
 import { useApi } from "@/shared/lib/hooks/useApi";
 import { KeepApiError } from "@/shared/api";
 import { showErrorToast } from "@/shared/ui";
-import "./page.css";
 import { YAMLException } from "js-yaml";
+import WorkflowDefinitionYAML from "../workflow-definition-yaml";
 
 interface Props {
   loadedAlertFile: string | null;
@@ -58,6 +58,15 @@ const INITIAL_DEFINITION = wrapDefinitionV2({
   isValid: false,
 });
 
+const YAMLSidebar = ({ yaml }: { yaml?: string }) => {
+  return (
+    <div className="bg-gray-700 h-full w-[600px] text-white">
+      <h2 className="text-2xl font-bold">YAML</h2>
+      {yaml && <WorkflowDefinitionYAML workflowRaw={yaml} />}
+    </div>
+  );
+};
+
 function Builder({
   loadedAlertFile,
   fileName,
@@ -349,26 +358,31 @@ function Builder({
       {generateModalIsOpen || testRunModalOpen ? null : (
         <>
           {getworkflowStatus()}
-          <div className="h-[94%]">
-            <ReactFlowProvider>
-              <ReactFlowBuilder
-                providers={providers}
-                installedProviders={installedProviders}
-                definition={definition}
-                validatorConfiguration={ValidatorConfigurationV2}
-                onDefinitionChange={(def: any) => {
-                  setDefinition({
-                    value: {
-                      sequence: def?.sequence || [],
-                      properties: def?.properties || {},
-                    },
-                    isValid: def?.isValid || false,
-                  });
-                }}
-                toolboxConfiguration={getToolboxConfiguration(providers)}
-              />
-            </ReactFlowProvider>
-          </div>
+          <Card className="mt-2 p-0 h-[93%]">
+            <div className="flex h-full">
+              <div className="flex-1 h-full">
+                <ReactFlowProvider>
+                  <ReactFlowBuilder
+                    providers={providers}
+                    installedProviders={installedProviders}
+                    definition={definition}
+                    validatorConfiguration={ValidatorConfigurationV2}
+                    onDefinitionChange={(def: any) => {
+                      setDefinition({
+                        value: {
+                          sequence: def?.sequence || [],
+                          properties: def?.properties || {},
+                        },
+                        isValid: def?.isValid || false,
+                      });
+                    }}
+                    toolboxConfiguration={getToolboxConfiguration(providers)}
+                  />
+                </ReactFlowProvider>
+              </div>
+              {/* TODO: Add AI chat sidebar */}
+            </div>
+          </Card>
         </>
       )}
     </div>
diff --git a/keep-ui/app/(keep)/workflows/builder/alert.tsx b/keep-ui/app/(keep)/workflows/builder/legacy-workflow.types.ts
similarity index 91%
rename from keep-ui/app/(keep)/workflows/builder/alert.tsx
rename to keep-ui/app/(keep)/workflows/builder/legacy-workflow.types.ts
index 47447bce9..4fa28c200 100644
--- a/keep-ui/app/(keep)/workflows/builder/alert.tsx
+++ b/keep-ui/app/(keep)/workflows/builder/legacy-workflow.types.ts
@@ -1,5 +1,3 @@
-import { V2Step } from "@/app/(keep)/workflows/builder/types";
-
 interface Provider {
   type: string;
   config: string;
diff --git a/keep-ui/app/(keep)/workflows/builder/loader.tsx b/keep-ui/app/(keep)/workflows/builder/loader.tsx
index 3775c32bb..48a485c4e 100644
--- a/keep-ui/app/(keep)/workflows/builder/loader.tsx
+++ b/keep-ui/app/(keep)/workflows/builder/loader.tsx
@@ -3,8 +3,10 @@ import { Title, Text } from "@tremor/react";
 export default function Loader() {
   return (
     <div className="flex flex-col h-full justify-center items-center">
-      <Title>Please start by loading or creating a new alert</Title>
-      <Text>You can use the `Load` or `+` button from the top right menu</Text>
+      <Title>Please start by loading or creating a new workflow</Title>
+      <Text>
+        Load YAML or use the &quot;New &quot; button from the top right menu
+      </Text>
     </div>
   );
 }
diff --git a/keep-ui/app/(keep)/workflows/builder/page.client.tsx b/keep-ui/app/(keep)/workflows/builder/page.client.tsx
index 3982dcaaa..24fcde10b 100644
--- a/keep-ui/app/(keep)/workflows/builder/page.client.tsx
+++ b/keep-ui/app/(keep)/workflows/builder/page.client.tsx
@@ -1,10 +1,9 @@
 "use client";
 
-import { Title, Button, Subtitle, Badge } from "@tremor/react";
+import { Title, Button } from "@tremor/react";
 import { useEffect, useRef, useState } from "react";
 import {
   PlusIcon,
-  ArrowDownOnSquareIcon,
   BoltIcon,
   ArrowUpOnSquareIcon,
   PlayIcon,
@@ -37,13 +36,17 @@ export default function PageClient({
     setFileName("");
   }, []);
 
-  function loadAlert() {
-    document.getElementById("alertFile")?.click();
+  function loadWorkflow() {
+    document.getElementById("workflowFile")?.click();
   }
 
-  function newAlert() {
-    const confirmed = confirm("Are you sure you want to create a new alert?");
-    if (confirmed) window.location.reload();
+  function createNewWorkflow() {
+    const confirmed = confirm(
+      "Are you sure you want to create a new workflow?"
+    );
+    if (confirmed) {
+      window.location.reload();
+    }
   }
 
   const enableButtons = () => setButtonsEnabled(true);
@@ -87,7 +90,7 @@ export default function PageClient({
               <Button
                 color="orange"
                 size="md"
-                onClick={newAlert}
+                onClick={createNewWorkflow}
                 icon={PlusIcon}
                 className="min-w-28"
                 variant="secondary"
@@ -98,17 +101,17 @@ export default function PageClient({
               <Button
                 color="orange"
                 size="md"
-                onClick={loadAlert}
+                onClick={loadWorkflow}
                 className="min-w-28"
                 variant="secondary"
-                icon={ArrowDownOnSquareIcon}
+                icon={ArrowUpOnSquareIcon}
                 disabled={!buttonsEnabled}
               >
                 Load
               </Button>
               <input
                 type="file"
-                id="alertFile"
+                id="workflowFile"
                 style={{ display: "none" }}
                 ref={fileInputRef}
                 onChange={handleFileChange}
@@ -144,7 +147,7 @@ export default function PageClient({
               icon={BoltIcon}
               onClick={() => setTriggerGenerate(incrementState)}
             >
-              Generate
+              Get YAML
             </Button>
           )}
         </div>
diff --git a/keep-ui/app/(keep)/workflows/builder/page.css b/keep-ui/app/(keep)/workflows/builder/page.css
deleted file mode 100644
index 8d1c3cd58..000000000
--- a/keep-ui/app/(keep)/workflows/builder/page.css
+++ /dev/null
@@ -1,27 +0,0 @@
-.sqd-designer-react {
-  height: inherit;
-  border-radius: 10px;
-}
-
-.sqd-designer {
-  height: 100%;
-}
-
-.sqd-root-start-stop-circle,
-.sqd-label-rect {
-  fill: rgb(255, 132, 16) !important;
-}
-
-.sqd-smart-editor {
-  overflow: scroll;
-}
-
-.sqd-toolbox-item-text {
-  text-transform: capitalize;
-}
-
-.tooltip {
-  position: relative;
-  display: inline-block;
-  border-bottom: 1px dotted black; /* If you want dots under the hoverable text */
-}
diff --git a/keep-ui/app/(keep)/workflows/builder/page.tsx b/keep-ui/app/(keep)/workflows/builder/page.tsx
index 25ca84cde..cd81fc373 100644
--- a/keep-ui/app/(keep)/workflows/builder/page.tsx
+++ b/keep-ui/app/(keep)/workflows/builder/page.tsx
@@ -1,6 +1,7 @@
 import PageClient from "./page.client";
 import { Suspense } from "react";
 import Loading from "@/app/(keep)/loading";
+import { Metadata } from "next";
 
 type PageProps = {
   params: { workflow: string; workflowId: string };
@@ -15,7 +16,7 @@ export default function Page({ params, searchParams }: PageProps) {
   );
 }
 
-export const metadata = {
-  title: "Keep - Builder",
-  description: "Build alerts with a visual workflow designer.",
+export const metadata: Metadata = {
+  title: "Keep - Workflow Builder",
+  description: "Build workflows with a UI builder.",
 };
diff --git a/keep-ui/app/(keep)/workflows/builder/utils.tsx b/keep-ui/app/(keep)/workflows/builder/utils.tsx
index 728765031..2b7eb7c21 100644
--- a/keep-ui/app/(keep)/workflows/builder/utils.tsx
+++ b/keep-ui/app/(keep)/workflows/builder/utils.tsx
@@ -1,7 +1,6 @@
 import { load, JSON_SCHEMA } from "js-yaml";
 import { Provider } from "../../providers/providers";
-import { Action, Alert } from "./alert";
-import { stringify } from "yaml";
+import { Action, Alert } from "./legacy-workflow.types";
 import { v4 as uuidv4 } from "uuid";
 import {
   Definition,
diff --git a/keep-ui/app/(keep)/workflows/workflow-menu.tsx b/keep-ui/app/(keep)/workflows/workflow-menu.tsx
index ee89eb84d..f3438bdb4 100644
--- a/keep-ui/app/(keep)/workflows/workflow-menu.tsx
+++ b/keep-ui/app/(keep)/workflows/workflow-menu.tsx
@@ -4,16 +4,11 @@ import { EllipsisHorizontalIcon } from "@heroicons/react/20/solid";
 import { Icon } from "@tremor/react";
 import {
   EyeIcon,
-  PencilIcon,
   PlayIcon,
   TrashIcon,
   WrenchIcon,
 } from "@heroicons/react/24/outline";
-import {
-  DownloadIcon,
-  LockClosedIcon,
-  LockOpen1Icon,
-} from "@radix-ui/react-icons";
+import { DownloadIcon } from "@radix-ui/react-icons";
 import React from "react";
 
 interface WorkflowMenuProps {