Form action for skipping a datetime waitpoint

Author: matt-aitken

apps/webapp/app/presenters/v3/SpanPresenter.server.ts

@@ -447,6 +447,7 @@ export class SpanPresenter extends BasePresenter {
             output: true,
             outputType: true,
             outputIsError: true,
+            completedAfter: true,
           },
         });
 

apps/webapp/app/routes/resources.orgs.$organizationSlug.projects.$projectParam.waitpoints.$waitpointFriendlyId.complete/route.tsx

@@ -1,7 +1,8 @@
 import { parse } from "@conform-to/zod";
 import { InformationCircleIcon } from "@heroicons/react/20/solid";
-import { Form, useNavigation, useSubmit } from "@remix-run/react";
+import { Form, useLocation, useNavigation, useSubmit } from "@remix-run/react";
 import { ActionFunctionArgs, json } from "@remix-run/server-runtime";
+import { WaitpointId } from "@trigger.dev/core/v3/apps";
 import { Waitpoint } from "@trigger.dev/database";
 import { motion } from "framer-motion";
 import { useCallback, useRef } from "react";
@@ -13,40 +14,49 @@ import { Button } from "~/components/primitives/Buttons";
 import { DateTime } from "~/components/primitives/DateTime";
 import { Paragraph } from "~/components/primitives/Paragraph";
 import { LiveCountdown } from "~/components/runs/v3/LiveTimer";
-import { prisma } from "~/db.server";
+import { $replica, prisma } from "~/db.server";
 import { useOrganization } from "~/hooks/useOrganizations";
 import { useProject } from "~/hooks/useProject";
 import { redirectWithErrorMessage, redirectWithSuccessMessage } from "~/models/message.server";
 import { logger } from "~/services/logger.server";
 import { requireUserId } from "~/services/session.server";
-import { ProjectParamSchema, v3SchedulesPath } from "~/utils/pathBuilder";
+import { ProjectParamSchema, v3RunsPath, v3SchedulesPath } from "~/utils/pathBuilder";
+import { engine } from "~/v3/runEngine.server";
 import { UpsertSchedule } from "~/v3/schedules";
 import { UpsertTaskScheduleService } from "~/v3/services/upsertTaskSchedule.server";
 
 const CompleteWaitpointFormData = z.discriminatedUnion("type", [
   z.object({
     type: z.literal("MANUAL"),
     payload: z.string(),
+    successRedirect: z.string(),
+    failureRedirect: z.string(),
   }),
   z.object({
     type: z.literal("DATETIME"),
+    successRedirect: z.string(),
+    failureRedirect: z.string(),
   }),
 ]);
 
+const Params = ProjectParamSchema.extend({
+  waitpointFriendlyId: z.string(),
+});
+
 export const action = async ({ request, params }: ActionFunctionArgs) => {
   const userId = await requireUserId(request);
-  const { organizationSlug, projectParam } = ProjectParamSchema.parse(params);
+  const { organizationSlug, projectParam, waitpointFriendlyId } = Params.parse(params);
 
   const formData = await request.formData();
-  const submission = parse(formData, { schema: UpsertSchedule });
+  const submission = parse(formData, { schema: CompleteWaitpointFormData });
 
   if (!submission.value) {
     return json(submission);
   }
 
   try {
     //first check that the user has access to the project
-    const project = await prisma.project.findUnique({
+    const project = await $replica.project.findUnique({
       where: {
         slug: projectParam,
         organization: {
@@ -64,27 +74,49 @@ export const action = async ({ request, params }: ActionFunctionArgs) => {
       throw new Error("Project not found");
     }
 
-    const createSchedule = new UpsertTaskScheduleService();
-    const result = await createSchedule.call(project.id, submission.value);
+    switch (submission.value.type) {
+      case "DATETIME": {
+        const waitpointId = WaitpointId.toId(waitpointFriendlyId);
 
-    return redirectWithSuccessMessage(
-      v3SchedulesPath({ slug: organizationSlug }, { slug: projectParam }),
-      request,
-      submission.value?.friendlyId === result.id ? "Schedule updated" : "Schedule created"
-    );
+        const waitpoint = await $replica.waitpoint.findFirst({
+          select: {
+            projectId: true,
+          },
+          where: {
+            id: waitpointId,
+          },
+        });
+
+        if (waitpoint?.projectId !== project.id) {
+          throw new Error("Waitpoint not found");
+        }
+
+        const result = await engine.completeWaitpoint({
+          id: waitpointId,
+        });
+
+        return redirectWithSuccessMessage(
+          submission.value.successRedirect,
+          request,
+          "Waitpoint skipped"
+        );
+      }
+      case "MANUAL": {
+      }
+    }
   } catch (error: any) {
-    logger.error("Failed to create schedule", error);
+    logger.error("Failed to complete waitpoint", error);
 
     const errorMessage = `Something went wrong. Please try again.`;
     return redirectWithErrorMessage(
-      v3SchedulesPath({ slug: organizationSlug }, { slug: projectParam }),
+      v3RunsPath({ slug: organizationSlug }, { slug: projectParam }),
       request,
       errorMessage
     );
   }
 };
 
-type FormWaitpoint = Pick<Waitpoint, "friendlyId" | "type">;
+type FormWaitpoint = Pick<Waitpoint, "friendlyId" | "type" | "completedAfter" | "status">;
 
 export function CompleteWaitpointForm({ waitpoint }: { waitpoint: FormWaitpoint }) {
   const navigation = useNavigation();
@@ -115,101 +147,148 @@ export function CompleteWaitpointForm({ waitpoint }: { waitpoint: FormWaitpoint
     [currentJson]
   );
 
-  const endTime = new Date(Date.now() + 60_000 * 113);
-
   return (
     <div className="space-y-3">
-      <Form
-        action={formAction}
-        method="post"
-        onSubmit={(e) => submitForm(e)}
-        className="grid h-full max-h-full grid-rows-[2.5rem_1fr_2.5rem] overflow-hidden rounded-md border border-grid-bright"
-      >
-        <div className="mx-3 flex items-center">
-          <Paragraph variant="small/bright">Manually complete this waitpoint</Paragraph>
-        </div>
-        <div className="overflow-y-auto border-t border-grid-dimmed bg-charcoal-900 scrollbar-thin scrollbar-track-transparent scrollbar-thumb-charcoal-600">
-          <input type="hidden" name="type" value={waitpoint.type} />
-          <div className="max-h-[70vh] min-h-40 overflow-y-auto bg-charcoal-900 scrollbar-thin scrollbar-track-transparent scrollbar-thumb-charcoal-600">
-            <JSONEditor
-              autoFocus
-              defaultValue={currentJson.current}
-              readOnly={false}
-              basicSetup
-              onChange={(v) => {
-                currentJson.current = v;
-              }}
-              showClearButton={false}
-              showCopyButton={false}
-              height="100%"
-              min-height="100%"
-              max-height="100%"
-            />
-          </div>
-        </div>
-        <div className="bg-charcoal-900 px-2">
-          <div className="mb-2 flex items-center justify-end gap-2 border-t border-grid-dimmed pt-2">
-            <Button
-              variant="secondary/small"
-              type="submit"
-              disabled={isLoading}
-              LeadingIcon={isLoading ? "spinner" : undefined}
-            >
-              {isLoading ? "Completing…" : "Complete waitpoint"}
-            </Button>
-          </div>
-        </div>
-      </Form>
-      <CodeBlock
-        rowTitle={
-          <span className="-ml-1 flex items-center gap-1 text-text-dimmed">
-            <InformationCircleIcon className="size-5 shrink-0 text-text-dimmed" />
-            To complete this waitpoint in your code use:
-          </span>
-        }
-        code={`
+      {waitpoint.type === "DATETIME" ? (
+        waitpoint.completedAfter ? (
+          <CompleteDateTimeWaitpointForm
+            waitpoint={{
+              friendlyId: waitpoint.friendlyId,
+              completedAfter: waitpoint.completedAfter,
+            }}
+          />
+        ) : (
+          <>Waitpoint doesn't have a complete date</>
+        )
+      ) : (
+        <>
+          <Form
+            action={formAction}
+            method="post"
+            onSubmit={(e) => submitForm(e)}
+            className="grid h-full max-h-full grid-rows-[2.5rem_1fr_2.5rem] overflow-hidden rounded-md border border-grid-bright"
+          >
+            <input type="hidden" name="type" value={waitpoint.type} />
+            <div className="mx-3 flex items-center">
+              <Paragraph variant="small/bright">Manually complete this waitpoint</Paragraph>
+            </div>
+            <div className="overflow-y-auto border-t border-grid-dimmed bg-charcoal-900 scrollbar-thin scrollbar-track-transparent scrollbar-thumb-charcoal-600">
+              <div className="max-h-[70vh] min-h-40 overflow-y-auto bg-charcoal-900 scrollbar-thin scrollbar-track-transparent scrollbar-thumb-charcoal-600">
+                <JSONEditor
+                  autoFocus
+                  defaultValue={currentJson.current}
+                  readOnly={false}
+                  basicSetup
+                  onChange={(v) => {
+                    currentJson.current = v;
+                  }}
+                  showClearButton={false}
+                  showCopyButton={false}
+                  height="100%"
+                  min-height="100%"
+                  max-height="100%"
+                />
+              </div>
+            </div>
+            <div className="bg-charcoal-900 px-2">
+              <div className="mb-2 flex items-center justify-end gap-2 border-t border-grid-dimmed pt-2">
+                <Button
+                  variant="secondary/small"
+                  type="submit"
+                  disabled={isLoading}
+                  LeadingIcon={isLoading ? "spinner" : undefined}
+                >
+                  {isLoading ? "Completing…" : "Complete waitpoint"}
+                </Button>
+              </div>
+            </div>
+          </Form>
+          <CodeBlock
+            rowTitle={
+              <span className="-ml-1 flex items-center gap-1 text-text-dimmed">
+                <InformationCircleIcon className="size-5 shrink-0 text-text-dimmed" />
+                To complete this waitpoint in your code use:
+              </span>
+            }
+            code={`
 await wait.completeToken<YourType>(tokenId,
   output
 );`}
-        showLineNumbers={false}
-      />
-      <Form
-        action={formAction}
-        method="post"
-        onSubmit={(e) => submitForm(e)}
-        className="grid h-full max-h-full grid-rows-[2.5rem_1fr_2.5rem] overflow-hidden rounded-md border border-grid-bright"
-      >
-        <div className="mx-3 flex items-center">
-          <Paragraph variant="small/bright">Manually skip this waitpoint</Paragraph>
-        </div>
-        <div className="border-t border-grid-dimmed">
-          <input type="hidden" name="type" value={waitpoint.type} />
-          <div className="flex flex-wrap items-center justify-between gap-1 p-2 text-sm tabular-nums">
-            <div className="flex items-center gap-1">
-              <AnimatedHourglassIcon
-                className="text-dimmed-dimmed size-4"
-                delay={(endTime.getMilliseconds() - Date.now()) / 1000}
-              />
-              <span className="mt-0.5 ">
-                <LiveCountdown endTime={endTime} />
-              </span>
-            </div>
-            <DateTime date={endTime} />
+            showLineNumbers={false}
+          />
+        </>
+      )}
+    </div>
+  );
+}
+
+function CompleteDateTimeWaitpointForm({
+  waitpoint,
+}: {
+  waitpoint: { friendlyId: string; completedAfter: Date };
+}) {
+  const location = useLocation();
+  const navigation = useNavigation();
+  const submit = useSubmit();
+  const isLoading = navigation.state !== "idle";
+  const organization = useOrganization();
+  const project = useProject();
+
+  const timeToComplete = waitpoint.completedAfter.getTime() - Date.now();
+  if (timeToComplete < 0) {
+    return (
+      <div className="flex items-center justify-center">
+        <Paragraph variant="small/bright">Waitpoint completed</Paragraph>
+      </div>
+    );
+  }
+
+  return (
+    <Form
+      action={`/resources/orgs/${organization.slug}/projects/${project.slug}/waitpoints/${waitpoint.friendlyId}/complete`}
+      method="post"
+      className="grid h-full max-h-full grid-rows-[2.5rem_1fr_2.5rem] overflow-hidden rounded-md border border-grid-bright"
+    >
+      <div className="mx-3 flex items-center">
+        <Paragraph variant="small/bright">Manually skip this waitpoint</Paragraph>
+      </div>
+      <div className="border-t border-grid-dimmed">
+        <input type="hidden" name="type" value={"DATETIME"} />
+        <input
+          type="hidden"
+          name="successRedirect"
+          value={`${location.pathname}${location.search}`}
+        />
+        <input
+          type="hidden"
+          name="failureRedirect"
+          value={`${location.pathname}${location.search}`}
+        />
+        <div className="flex flex-wrap items-center justify-between gap-1 p-2 text-sm tabular-nums">
+          <div className="flex items-center gap-1">
+            <AnimatedHourglassIcon
+              className="text-dimmed-dimmed size-4"
+              delay={(waitpoint.completedAfter.getMilliseconds() - Date.now()) / 1000}
+            />
+            <span className="mt-0.5 ">
+              <LiveCountdown endTime={waitpoint.completedAfter} />
+            </span>
           </div>
+          <DateTime date={waitpoint.completedAfter} />
         </div>
-        <div className="px-2">
-          <div className="mb-2 flex items-center justify-end gap-2 border-t border-grid-dimmed pt-2">
-            <Button
-              variant="secondary/small"
-              type="submit"
-              disabled={isLoading}
-              LeadingIcon={isLoading ? "spinner" : undefined}
-            >
-              {isLoading ? "Completing…" : "Skip waitpoint"}
-            </Button>
-          </div>
+      </div>
+      <div className="px-2">
+        <div className="mb-2 flex items-center justify-end gap-2 border-t border-grid-dimmed pt-2">
+          <Button
+            variant="secondary/small"
+            type="submit"
+            disabled={isLoading}
+            LeadingIcon={isLoading ? "spinner" : undefined}
+          >
+            {isLoading ? "Completing…" : "Skip waitpoint"}
+          </Button>
         </div>
-      </Form>
-    </div>
+      </div>
+    </Form>
   );
 }