Merge branch 'main' into feature/apps

Signed-off-by: Tal <[email protected]>

keep-ui/app/(keep)/incidents/[id]/workflows/incident-workflow-sidebar.tsx

@@ -2,18 +2,18 @@ import { Fragment } from "react";
 import { Dialog, Transition } from "@headlessui/react";
 import { Text, Button, TextInput, Badge, Title, Card } from "@tremor/react";
 import { IoMdClose } from "react-icons/io";
-import { WorkflowExecution } from "@/app/(keep)/workflows/builder/types";
 import {
   getIcon,
   getTriggerIcon,
   extractTriggerValue,
 } from "@/app/(keep)/workflows/[workflow_id]/workflow-execution-table";
 import { useWorkflowExecution } from "utils/hooks/useWorkflowExecutions";
+import { WorkflowExecutionDetail } from "@/shared/api/workflow-executions";
 
 interface IncidentWorkflowSidebarProps {
   isOpen: boolean;
   toggle: VoidFunction;
-  selectedExecution: WorkflowExecution;
+  selectedExecution: WorkflowExecutionDetail;
 }
 
 const IncidentWorkflowSidebar: React.FC<IncidentWorkflowSidebarProps> = ({
@@ -60,8 +60,8 @@ const IncidentWorkflowSidebar: React.FC<IncidentWorkflowSidebarProps> = ({
                       selectedExecution.status === "error"
                         ? "red"
                         : selectedExecution.status === "success"
-                        ? "green"
-                        : "orange"
+                          ? "green"
+                          : "orange"
                     }
                   >
                     {selectedExecution.status}

keep-ui/app/(keep)/incidents/[id]/workflows/incident-workflow-table.tsx

@@ -26,7 +26,7 @@ import {
   getIcon,
   getTriggerIcon,
 } from "@/app/(keep)/workflows/[workflow_id]/workflow-execution-table";
-import { WorkflowExecution } from "@/app/(keep)/workflows/builder/types";
+import { WorkflowExecutionDetail } from "@/shared/api/workflow-executions";
 import { useEffect, useState } from "react";
 import Skeleton from "react-loading-skeleton";
 import "react-loading-skeleton/dist/skeleton.css";
@@ -44,7 +44,7 @@ interface Pagination {
   offset: number;
 }
 
-const columnHelper = createColumnHelper<WorkflowExecution>();
+const columnHelper = createColumnHelper<WorkflowExecutionDetail>();
 
 export default function IncidentWorkflowTable({ incident }: Props) {
   const [workflowsPagination, setWorkflowsPagination] = useState<Pagination>({
@@ -53,7 +53,7 @@ export default function IncidentWorkflowTable({ incident }: Props) {
   });
   const [isSidebarOpen, setIsSidebarOpen] = useState(false);
   const [selectedExecution, setSelectedExecution] =
-    useState<WorkflowExecution | null>(null);
+    useState<WorkflowExecutionDetail | null>(null);
 
   const {
     data: workflows,
@@ -94,7 +94,7 @@ export default function IncidentWorkflowTable({ incident }: Props) {
     setIsSidebarOpen(!isSidebarOpen);
   };
 
-  const handleRowClick = (execution: WorkflowExecution) => {
+  const handleRowClick = (execution: WorkflowExecutionDetail) => {
     setSelectedExecution(execution);
     toggleSidebar();
   };

keep-ui/app/(keep)/workflows/[workflow_id]/runs/[workflow_execution_id]/page.tsx

@@ -1,6 +1,6 @@
-"use client";
 import React from "react";
-import WorkflowExecutionResults from "@/app/(keep)/workflows/builder/workflow-execution-results";
+import { Metadata } from "next";
+import { WorkflowExecutionResults } from "@/features/workflow-execution-results";
 
 export default function WorkflowExecutionPage({
   params,
@@ -9,8 +9,13 @@ export default function WorkflowExecutionPage({
 }) {
   return (
     <WorkflowExecutionResults
-      workflow_id={params.workflow_id}
-      workflow_execution_id={params.workflow_execution_id}
+      standalone
+      workflowId={params.workflow_id}
+      workflowExecutionId={params.workflow_execution_id}
     />
   );
 }
+
+export const metadata: Metadata = {
+  title: "Keep - Workflow Execution Results",
+};

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

@@ -1,8 +1,7 @@
 "use client";
 
 import { useApi } from "@/shared/lib/hooks/useApi";
-import { Workflow } from "../models";
-
+import { Workflow } from "@/shared/api/workflows";
 import useSWR from "swr";
 import Skeleton from "react-loading-skeleton";
 import { Button, Text } from "@tremor/react";
@@ -53,9 +52,7 @@ export default function WorkflowDetailHeader({
     <div>
       <div className="flex justify-between items-end text-sm gap-2">
         <div>
-          <h1 className="text-2xl line-clamp-2 font-extrabold">
-            {workflow.name}
-          </h1>
+          <h1 className="text-2xl line-clamp-2 font-bold">{workflow.name}</h1>
           {workflow.description && (
             <Text className="line-clamp-5">
               <span>{workflow.description}</span>

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

@@ -15,7 +15,7 @@ import {
   WrenchIcon,
 } from "@heroicons/react/24/outline";
 import Loading from "@/app/(keep)/loading";
-import { Workflow } from "../models";
+import { Workflow } from "@/shared/api/workflows";
 import useSWR from "swr";
 import { WorkflowBuilderPageClient } from "../builder/page.client";
 import WorkflowOverview from "./workflow-overview";

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

@@ -5,8 +5,8 @@ import {
 } from "@tanstack/react-table";
 import {
   PaginatedWorkflowExecutionDto,
-  WorkflowExecution,
-} from "../builder/types";
+  WorkflowExecutionDetail,
+} from "@/shared/api/workflow-executions";
 import { GenericTable } from "@/components/table/GenericTable";
 import Link from "next/link";
 import { Dispatch, Fragment, SetStateAction } from "react";
@@ -34,7 +34,7 @@ interface Props {
   setPagination: Dispatch<SetStateAction<Pagination>>;
 }
 
-function ExecutionRowMenu({ row }: { row: Row<WorkflowExecution> }) {
+function ExecutionRowMenu({ row }: { row: Row<WorkflowExecutionDetail> }) {
   const stopPropagation = (e: React.MouseEvent<HTMLButtonElement>) => {
     e.stopPropagation();
   };
@@ -180,7 +180,7 @@ export function extractTriggerDetails(
 }
 
 export function ExecutionTable({ executions, setPagination }: Props) {
-  const columnHelper = createColumnHelper<WorkflowExecution>();
+  const columnHelper = createColumnHelper<WorkflowExecutionDetail>();
   const router = useRouter();
 
   const columns = [
@@ -289,11 +289,11 @@ export function ExecutionTable({ executions, setPagination }: Props) {
       header: "",
       cell: ({ row }) => <ExecutionRowMenu row={row} />,
     }),
-  ] as DisplayColumnDef<WorkflowExecution>[];
+  ] as DisplayColumnDef<WorkflowExecutionDetail>[];
 
   //To DO pagiantion limit and offest can also be added to url searchparams
   return (
-    <GenericTable<WorkflowExecution>
+    <GenericTable<WorkflowExecutionDetail>
       data={executions.items}
       columns={columns}
       rowCount={executions.count ?? 0} // Assuming pagination is not needed, you can adjust this if you have pagination
@@ -302,7 +302,7 @@ export function ExecutionTable({ executions, setPagination }: Props) {
       onPaginationChange={(newLimit: number, newOffset: number) =>
         setPagination({ limit: newLimit, offset: newOffset })
       }
-      onRowClick={(row: WorkflowExecution) => {
+      onRowClick={(row: WorkflowExecutionDetail) => {
         router.push(`/workflows/${row.workflow_id}/runs/${row.id}`);
       }}
     />

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

@@ -6,7 +6,7 @@ import { useSearchParams } from "next/navigation";
 import { useState, useEffect } from "react";
 import Loading from "@/app/(keep)/loading";
 import { WorkflowSteps } from "../mockworkflows";
-import { Workflow } from "../models";
+import { Workflow } from "@/shared/api/workflows";
 import WorkflowGraph from "../workflow-graph";
 import { TableFilters } from "./table-filters";
 import { ExecutionTable } from "./workflow-execution-table";

keep-ui/app/(keep)/workflows/builder/builder-workflow-testrun-modal.tsx

@@ -1,13 +1,17 @@
 import { XMarkIcon } from "@heroicons/react/24/outline";
 import { Button, Title } from "@tremor/react";
 import ReactLoading from "react-loading";
-import { ExecutionResults } from "./workflow-execution-results";
-import { WorkflowExecution, WorkflowExecutionFailure } from "./types";
+import {
+  isWorkflowExecution,
+  WorkflowExecutionDetail,
+  WorkflowExecutionFailure,
+} from "@/shared/api/workflow-executions";
+import { WorkflowExecutionResults } from "@/features/workflow-execution-results";
 
 interface Props {
   closeModal: () => void;
   workflowId: string;
-  workflowExecution: WorkflowExecution | WorkflowExecutionFailure | null;
+  workflowExecution: WorkflowExecutionDetail | WorkflowExecutionFailure | null;
   workflowRaw: string;
 }
 
@@ -37,10 +41,14 @@ export default function BuilderWorkflowTestRunModalContent({
       </div>
       <div className="flex flex-col">
         {workflowExecution ? (
-          <ExecutionResults
+          <WorkflowExecutionResults
             workflowId={workflowId}
-            workflowRaw={workflowRaw}
-            executionData={workflowExecution}
+            initialWorkflowExecution={workflowExecution}
+            workflowExecutionId={
+              isWorkflowExecution(workflowExecution)
+                ? workflowExecution.id
+                : null
+            }
           />
         ) : (
           <div className="flex justify-center">

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

@@ -1,4 +1,4 @@
-import { useEffect, useState } from "react";
+import { useCallback, useEffect, useState } from "react";
 import { Callout, Card } from "@tremor/react";
 import { Provider } from "../../providers/providers";
 import {
@@ -17,16 +17,18 @@ import { Alert } from "./legacy-workflow.types";
 import BuilderModalContent from "./builder-modal";
 import Loader from "./loader";
 import { stringify } from "yaml";
-import { useSearchParams } from "next/navigation";
+import { useRouter, useSearchParams } from "next/navigation";
 import { v4 as uuidv4 } from "uuid";
 import BuilderWorkflowTestRunModalContent from "./builder-workflow-testrun-modal";
 import {
   Definition as FlowDefinition,
   ReactFlowDefinition,
   V2Step,
-  WorkflowExecution,
-  WorkflowExecutionFailure,
 } from "./types";
+import {
+  WorkflowExecutionDetail,
+  WorkflowExecutionFailure,
+} from "@/shared/api/workflow-executions";
 import ReactFlowBuilder from "./ReactFlowBuilder";
 import { ReactFlowProvider } from "@xyflow/react";
 import useStore from "./builder-store";
@@ -35,7 +37,6 @@ import { useApi } from "@/shared/lib/hooks/useApi";
 import { KeepApiError } from "@/shared/api";
 import { showErrorToast, showSuccessToast } from "@/shared/ui";
 import { YAMLException } from "js-yaml";
-import WorkflowDefinitionYAML from "../workflow-definition-yaml";
 import { revalidatePath } from "next/cache";
 import Modal from "@/components/ui/Modal";
 
@@ -59,15 +60,6 @@ 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,
@@ -93,9 +85,10 @@ function Builder({
   const [generateModalIsOpen, setGenerateModalIsOpen] = useState(false);
   const [testRunModalOpen, setTestRunModalOpen] = useState(false);
   const [runningWorkflowExecution, setRunningWorkflowExecution] = useState<
-    WorkflowExecution | WorkflowExecutionFailure | null
+    WorkflowExecutionDetail | WorkflowExecutionFailure | null
   >(null);
   const [compiledAlert, setCompiledAlert] = useState<Alert | null>(null);
+  const router = useRouter();
 
   const searchParams = useSearchParams();
   const { errorNode, setErrorNode, canDeploy, synced } = useStore();
@@ -119,7 +112,7 @@ function Builder({
     setErrorNode(null);
   };
 
-  const updateWorkflow = () => {
+  const updateWorkflow = useCallback(() => {
     const body = stringify(buildAlert(definition.value));
     api
       .request(`/workflows/${workflowId}`, {
@@ -133,7 +126,7 @@ function Builder({
       .catch((error: any) => {
         showErrorToast(error, "Failed to add workflow");
       });
-  };
+  }, [api, definition.value, workflowId]);
 
   const testRunWorkflow = () => {
     setTestRunModalOpen(true);
@@ -157,24 +150,25 @@ function Builder({
       });
   };
 
-  const addWorkflow = () => {
+  const addWorkflow = useCallback(() => {
     const body = stringify(buildAlert(definition.value));
     api
       .request(`/workflows/json`, {
         method: "POST",
         body,
         headers: { "Content-Type": "text/html" },
       })
-      .then(() => {
+      .then(({ workflow_id }) => {
         // This is important because it makes sure we will re-fetch the workflow if we get to this page again.
         // router.push for instance, optimizes re-render of same pages and we don't want that here because of "cache".
         showSuccessToast("Workflow added successfully");
         revalidatePath("/workflows/builder");
+        router.push(`/workflows/${workflow_id}`);
       })
       .catch((error) => {
         alert(`Error: ${error}`);
       });
-  };
+  }, [api, definition.value, router]);
 
   useEffect(() => {
     setIsLoading(true);
@@ -265,7 +259,15 @@ function Builder({
         addWorkflow();
       }
     }
-  }, [canDeploy, errorNode, definition.isValid, synced, workflowId]);
+  }, [
+    canDeploy,
+    errorNode,
+    definition.isValid,
+    synced,
+    workflowId,
+    updateWorkflow,
+    addWorkflow,
+  ]);
 
   useEffect(() => {
     enableGenerate(