feat: add public share options for workflow

web/src/app/(app)/api/[[...routes]]/route.ts

@@ -3,9 +3,8 @@ import { db } from "@/db/db";
 import { deploymentsTable, workflowRunsTable } from "@/db/schema";
 import { createSelectSchema } from "@/lib/drizzle-zod-hono";
 import { isKeyRevoked } from "@/server/curdApiKeys";
-import { getRunsData } from "@/server/getRunsOutput";
+import { getRunsData } from "@/server/getRunsData";
 import { parseJWT } from "@/server/parseJWT";
-import { replaceCDNUrl } from "@/server/replaceCDNUrl";
 import type { ResponseConfig } from "@asteasolutions/zod-to-openapi";
 import { z, createRoute } from "@hono/zod-openapi";
 import { OpenAPIHono } from "@hono/zod-openapi";
@@ -122,7 +121,7 @@ app.openapi(getOutputRoute, async (c) => {
   const apiKeyTokenData = c.get("apiKeyTokenData")!;
 
   try {
-    const run = await getRunsData(apiKeyTokenData, data.run_id);
+    const run = await getRunsData(data.run_id, apiKeyTokenData);
 
     if (!run)
       return c.json(
@@ -133,29 +132,6 @@ app.openapi(getOutputRoute, async (c) => {
         400
       );
 
-    // Fill in the CDN url
-    if (run?.status === "success" && run?.outputs?.length > 0) {
-      for (let i = 0; i < run.outputs.length; i++) {
-        const output = run.outputs[i];
-
-        if (output.data?.images !== undefined) {
-          for (let j = 0; j < output.data?.images.length; j++) {
-            const element = output.data?.images[j];
-            element.url = replaceCDNUrl(
-              `${process.env.SPACES_ENDPOINT}/${process.env.SPACES_BUCKET}/outputs/runs/${run.id}/${element.filename}`
-            );
-          }
-        } else if (output.data?.files !== undefined) {
-          for (let j = 0; j < output.data?.files.length; j++) {
-            const element = output.data?.files[j];
-            element.url = replaceCDNUrl(
-              `${process.env.SPACES_ENDPOINT}/${process.env.SPACES_BUCKET}/outputs/runs/${run.id}/${element.filename}`
-            );
-          }
-        }
-      }
-    }
-
     return c.json(run, 200);
   } catch (error: any) {
     return c.json(

web/src/app/(app)/share/[share_id]/loading.tsx

@@ -0,0 +1,9 @@
+"use client";
+
+import { LoadingPageWrapper } from "@/components/LoadingWrapper";
+import { usePathname } from "next/navigation";
+
+export default function Loading() {
+  const pathName = usePathname();
+  return <LoadingPageWrapper className="h-full" tag={pathName.toLowerCase()} />;
+}

web/src/app/(app)/share/[share_id]/page.tsx

@@ -0,0 +1,87 @@
+import {
+  PublicRunOutputs,
+  RunWorkflowInline,
+} from "@/components/VersionSelect";
+import {
+  Card,
+  CardContent,
+  CardDescription,
+  CardHeader,
+  CardTitle,
+} from "@/components/ui/card";
+import { db } from "@/db/db";
+import { usersTable } from "@/db/schema";
+import { getInputsFromWorkflow } from "@/lib/getInputsFromWorkflow";
+import { getRelativeTime } from "@/lib/getRelativeTime";
+import { setInitialUserData } from "@/lib/setInitialUserData";
+import { findSharedDeployment } from "@/server/curdDeploments";
+import { auth, clerkClient } from "@clerk/nextjs/server";
+import { eq } from "drizzle-orm";
+import { redirect } from "next/navigation";
+
+export default async function Page({
+  params,
+}: {
+  params: { share_id: string };
+}) {
+  const { userId } = await auth();
+
+  // If there is user, check if the user data is present
+  if (userId) {
+    const user = await db.query.usersTable.findFirst({
+      where: eq(usersTable.id, userId),
+    });
+
+    if (!user) {
+      await setInitialUserData(userId);
+    }
+  }
+
+  const sharedDeployment = await findSharedDeployment(params.share_id);
+
+  if (!sharedDeployment) return redirect("/");
+
+  const userName = sharedDeployment.workflow.org_id
+    ? await clerkClient.organizations
+        .getOrganization({
+          organizationId: sharedDeployment.workflow.org_id,
+        })
+        .then((x) => x.name)
+    : sharedDeployment.user.name;
+
+  const inputs = getInputsFromWorkflow(sharedDeployment.version);
+
+  return (
+    <div className="mt-4 w-full grid grid-rows-[1fr,1fr] lg:grid-cols-[minmax(auto,500px),1fr] gap-4 max-h-[calc(100dvh-100px)]">
+      <Card className="w-full h-fit mt-4">
+        <CardHeader>
+          <CardTitle>
+            {userName}
+            {" / "}
+            {sharedDeployment.workflow.name}
+          </CardTitle>
+          <CardDescription suppressHydrationWarning={true}>
+            {getRelativeTime(sharedDeployment?.updated_at)}
+          </CardDescription>
+        </CardHeader>
+
+        <CardContent>
+          <RunWorkflowInline
+            inputs={inputs}
+            machine_id={sharedDeployment.machine_id}
+            workflow_version_id={sharedDeployment.workflow_version_id}
+          />
+        </CardContent>
+      </Card>
+      <Card className="w-full h-fit mt-4">
+        <CardHeader>
+          <CardDescription>Run outputs</CardDescription>
+        </CardHeader>
+
+        <CardContent>
+          <PublicRunOutputs />
+        </CardContent>
+      </Card>
+    </div>
+  );
+}

web/src/app/(app)/workflows/[workflow_id]/@workflow/page.tsx

@@ -3,6 +3,7 @@ import { VersionDetails } from "@/components/VersionDetails";
 import {
   CopyWorkflowVersion,
   CreateDeploymentButton,
+  CreateShareButton,
   MachineSelect,
   RunWorkflowButton,
   VersionSelect,
@@ -18,7 +19,6 @@ import {
 import { getRelativeTime } from "@/lib/getRelativeTime";
 import { getMachines } from "@/server/curdMachine";
 import { findFirstTableWithVersion } from "@/server/findFirstTableWithVersion";
-import { redirect } from "next/navigation";
 
 export default async function Page({
   params,
@@ -45,6 +45,7 @@ export default async function Page({
           <MachineSelect machines={machines} />
           <RunWorkflowButton workflow={workflow} machines={machines} />
           <CreateDeploymentButton workflow={workflow} machines={machines} />
+          <CreateShareButton workflow={workflow} machines={machines} />
           <CopyWorkflowVersion workflow={workflow} />
           <ViewWorkflowDetailsButton workflow={workflow} />
         </div>

web/src/app/(app)/workflows/page.tsx

@@ -1,7 +1,8 @@
+import { setInitialUserData } from "../../../lib/setInitialUserData";
 import { WorkflowList } from "@/components/WorkflowList";
 import { db } from "@/db/db";
 import { usersTable, workflowTable, workflowVersionTable } from "@/db/schema";
-import { auth, clerkClient } from "@clerk/nextjs";
+import { auth } from "@clerk/nextjs";
 import { and, desc, eq, isNull } from "drizzle-orm";
 
 export default function Home() {
@@ -55,26 +56,3 @@ async function WorkflowServer() {
     />
   );
 }
-
-async function setInitialUserData(userId: string) {
-  const user = await clerkClient.users.getUser(userId);
-
-  // incase we dont have username such as google login, fallback to first name + last name
-  const usernameFallback =
-    user.username ?? (user.firstName ?? "") + (user.lastName ?? "");
-
-  // For the display name, if it for some reason is empty, fallback to username
-  let nameFallback = (user.firstName ?? "") + (user.lastName ?? "");
-  if (nameFallback === "") {
-    nameFallback = usernameFallback;
-  }
-
-  const result = await db.insert(usersTable).values({
-    id: userId,
-    // this is used for path, make sure this is unique
-    username: usernameFallback,
-
-    // this is for display name, maybe different from username
-    name: nameFallback,
-  });
-}