fix: test run bug and feat: general UI/UX improvements (#2993)

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

@@ -1,7 +1,10 @@
 "use client";
+
 import { Link } from "@/components/ui";
 import { ArrowRightIcon } from "@heroicons/react/16/solid";
 import { Icon, Subtitle } from "@tremor/react";
+import { useParams } from "next/navigation";
+import WorkflowDetailHeader from "./workflow-detail-header";
 
 export default function Layout({
   children,
@@ -10,12 +13,25 @@ export default function Layout({
   children: any;
   params: { workflow_id: string };
 }) {
+  const clientParams = useParams();
   return (
     <div className="flex flex-col mb-4 h-full gap-6">
       <Subtitle className="text-sm">
         <Link href="/workflows">All Workflows</Link>{" "}
-        <Icon icon={ArrowRightIcon} color="gray" size="xs" /> Workflow Details
+        <Icon icon={ArrowRightIcon} color="gray" size="xs" />{" "}
+        {clientParams.workflow_execution_id ? (
+          <>
+            <Link href={`/workflows/${params.workflow_id}`}>
+              Workflow Details
+            </Link>
+            <Icon icon={ArrowRightIcon} color="gray" size="xs" /> Workflow
+            Execution Details
+          </>
+        ) : (
+          "Workflow Details"
+        )}
       </Subtitle>
+      <WorkflowDetailHeader workflow_id={params.workflow_id} />
       <div className="flex-1 h-full">{children}</div>
     </div>
   );

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

@@ -1,5 +1,5 @@
 import { Metadata } from "next";
-import WorkflowDetailPage from "./executions";
+import WorkflowDetailPage from "./workflow-detail-page";
 
 export default function Page({ params }: { params: { workflow_id: string } }) {
   return <WorkflowDetailPage params={params} />;

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

@@ -1,5 +1,5 @@
 import GenericPopover from "@/components/popover/GenericPopover";
-import { Textarea, Badge, Button } from "@tremor/react";
+import { Textarea, Button } from "@tremor/react";
 import { usePathname, useSearchParams, useRouter } from "next/navigation";
 import { useRef, useState, useEffect, ChangeEvent } from "react";
 import { GoPlusCircle } from "react-icons/go";
@@ -210,13 +210,14 @@ export const TableFilters: React.FC<TableFiltersProps> = ({ workflowId }) => {
         />
       </div>
       <Button
-        className="shadow-lg p-2"
+        color="orange"
+        variant="secondary"
         onClick={() => {
           filterRef.current = { trigger: [], status: [], execution_id: "" };
           setApply(true);
         }}
       >
-        Clear Filters
+        Clear filters
       </Button>
     </div>
   );

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

@@ -0,0 +1,87 @@
+"use client";
+
+import { useApi } from "@/shared/lib/hooks/useApi";
+import { Workflow } from "../models";
+
+import useSWR from "swr";
+import Skeleton from "react-loading-skeleton";
+import { Button, Text } from "@tremor/react";
+import { useWorkflowRun } from "@/utils/hooks/useWorkflowRun";
+import AlertTriggerModal from "../workflow-run-with-alert-modal";
+
+export default function WorkflowDetailHeader({
+  workflow_id,
+}: {
+  workflow_id: string;
+}) {
+  const api = useApi();
+  const {
+    data: workflow,
+    isLoading,
+    error,
+  } = useSWR<Partial<Workflow>>(
+    api.isReady() ? `/workflows/${workflow_id}` : null,
+    (url: string) => api.get(url)
+  );
+
+
+  const {
+    isRunning,
+    handleRunClick,
+    getTriggerModalProps,
+    isRunButtonDisabled,
+    message,
+  } = useWorkflowRun(workflow as Workflow);
+
+  if (error) {
+    return <div>Error loading workflow</div>;
+  }
+
+  if (isLoading || !workflow) {
+    return (
+      <div>
+        <h1 className="text-2xl line-clamp-2 font-extrabold">
+          <Skeleton className="w-1/2 h-4" />
+        </h1>
+        <Skeleton className="w-3/4 h-4" />
+        <Skeleton className="w-1/2 h-4" />
+      </div>
+    );
+  }
+
+  return (
+    <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>
+          {workflow.description && (
+            <Text className="line-clamp-5">
+              <span>{workflow.description}</span>
+            </Text>
+          )}
+        </div>
+        {!!workflow && (
+          <Button
+            color="orange"
+            disabled={isRunning || isRunButtonDisabled}
+            className="p-2 px-4"
+            onClick={(e: React.MouseEvent<HTMLButtonElement>) => {
+              e.stopPropagation();
+              e.preventDefault();
+              handleRunClick?.();
+            }}
+            tooltip={message}
+          >
+            {isRunning ? "Running..." : "Run now"}
+          </Button>
+        )}
+      </div>
+
+      {!!workflow && !!getTriggerModalProps && (
+        <AlertTriggerModal {...getTriggerModalProps()} />
+      )}
+    </div>
+  );
+}