UI for workflow templates (#1715)

Co-authored-by: Muhammed Salih Altun <muhammedsalihaltun@gmail.com>

skyvern-frontend/src/routes/discover/DiscoverPage.tsx

@@ -0,0 +1,13 @@
+import { PromptBox } from "../tasks/create/PromptBox";
+import { WorkflowTemplates } from "./WorkflowTemplates";
+
+function DiscoverPage() {
+  return (
+    <div className="space-y-10">
+      <PromptBox />
+      <WorkflowTemplates />
+    </div>
+  );
+}
+
+export { DiscoverPage };

skyvern-frontend/src/routes/discover/DiscoverPageLayout.tsx

@@ -0,0 +1,13 @@
+import { Outlet } from "react-router-dom";
+
+function DiscoverPageLayout() {
+  return (
+    <div className="container mx-auto">
+      <main>
+        <Outlet />
+      </main>
+    </div>
+  );
+}
+
+export { DiscoverPageLayout };

skyvern-frontend/src/routes/discover/TemporaryTemplateImages.ts

@@ -0,0 +1,6 @@
+import jobApplicationImage from "@/assets/job-application.png";
+
+export const TEMPORARY_TEMPLATE_IMAGES: Record<string, string> = {
+  wpid_353862309074493424: jobApplicationImage,
+  wpid_351487857063054716: jobApplicationImage,
+};

skyvern-frontend/src/routes/discover/WorkflowTemplateCard.tsx

@@ -0,0 +1,30 @@
+type Props = {
+  title: string;
+  image: string;
+  onClick: () => void;
+};
+
+function WorkflowTemplateCard({ title, image, onClick }: Props) {
+  return (
+    <div className="h-48 w-56 cursor-pointer rounded-xl" onClick={onClick}>
+      <div className="h-28 bg-slate-elevation1 px-6 pt-6">
+        <img
+          src={image}
+          alt={title}
+          className="h-full w-full rounded-t-xl object-cover"
+        />
+      </div>
+      <div className="h-20 space-y-1 rounded-b-xl bg-slate-elevation2 p-3">
+        <h1
+          className="overflow-hidden text-ellipsis whitespace-nowrap"
+          title={title}
+        >
+          {title}
+        </h1>
+        <p className="text-sm text-slate-400">Template</p>
+      </div>
+    </div>
+  );
+}
+
+export { WorkflowTemplateCard };

skyvern-frontend/src/routes/discover/WorkflowTemplates.tsx

@@ -0,0 +1,50 @@
+import { Skeleton } from "@/components/ui/skeleton";
+import { useGlobalWorkflowsQuery } from "../workflows/hooks/useGlobalWorkflowsQuery";
+import { useNavigate } from "react-router-dom";
+import { WorkflowTemplateCard } from "./WorkflowTemplateCard";
+import testImg from "@/assets/promptBoxBg.png";
+import { TEMPORARY_TEMPLATE_IMAGES } from "./TemporaryTemplateImages";
+
+function WorkflowTemplates() {
+  const { data: workflowTemplates, isLoading } = useGlobalWorkflowsQuery();
+  const navigate = useNavigate();
+
+  if (isLoading) {
+    return (
+      <div className="flex gap-6">
+        <Skeleton className="h-48 w-56 rounded-xl" />
+        <Skeleton className="h-48 w-56 rounded-xl" />
+        <Skeleton className="h-48 w-56 rounded-xl" />
+      </div>
+    );
+  }
+
+  if (!workflowTemplates) {
+    return null;
+  }
+
+  return (
+    <div className="space-y-5">
+      <h1 className="text-xl">Start Simple</h1>
+      <div className="flex gap-6">
+        {workflowTemplates.map((workflow) => {
+          return (
+            <WorkflowTemplateCard
+              key={workflow.workflow_permanent_id}
+              title={workflow.title}
+              image={
+                TEMPORARY_TEMPLATE_IMAGES[workflow.workflow_permanent_id] ??
+                testImg
+              }
+              onClick={() => {
+                navigate(`/workflows/${workflow.workflow_permanent_id}/edit`);
+              }}
+            />
+          );
+        })}
+      </div>
+    </div>
+  );
+}
+
+export { WorkflowTemplates };