chore: workflow builder: remove leftovers, unused imports, variables,…

… css (#2900)

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");
 

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

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

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.",
+};

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}
+    />
   );
 }

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 && (

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[];

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

@@ -1,5 +1,3 @@
-import { Dispatch, SetStateAction } from "react";
-
 import {
   Definition as FlowDefinition,
   ReactFlowDefinition,

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";

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>

keep-ui/app/(keep)/workflows/builder/alert.tsx → 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;

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>
   );
 }