-
+
+ {title}
+
+
+ Download
+
+
+ );
+ }
+ case "text/plain": {
+ return (
+
-
-
- ),
+ icon: setIsHovered(false)}>
+ {tagContent}
+
+ );
+}
+
+function CopyButton({ textToCopy, isHovered }: { textToCopy: string; isHovered: boolean }) {
+ const [copied, setCopied] = useState(false);
+
+ const copy = useCallback(
+ (e: React.MouseEvent) => {
+ e.preventDefault();
+ e.stopPropagation();
+ navigator.clipboard.writeText(textToCopy);
+ setCopied(true);
+ setTimeout(() => {
+ setCopied(false);
+ }, 1500);
+ },
+ [textToCopy]
+ );
+
+ return (
+
{run.tags.map((tag) =>
diff --git a/apps/webapp/app/components/runs/v3/WaitpointDetails.tsx b/apps/webapp/app/components/runs/v3/WaitpointDetails.tsx
new file mode 100644
index 0000000000..95331c6e37
--- /dev/null
+++ b/apps/webapp/app/components/runs/v3/WaitpointDetails.tsx
@@ -0,0 +1,130 @@
+import { DateTime, DateTimeAccurate } from "~/components/primitives/DateTime";
+import { Paragraph } from "~/components/primitives/Paragraph";
+import * as Property from "~/components/primitives/PropertyTable";
+import { TextLink } from "~/components/primitives/TextLink";
+import { useEnvironment } from "~/hooks/useEnvironment";
+import { useOrganization } from "~/hooks/useOrganizations";
+import { useProject } from "~/hooks/useProject";
+import { type WaitpointDetail } from "~/presenters/v3/WaitpointPresenter.server";
+import { ForceTimeout } from "~/routes/resources.orgs.$organizationSlug.projects.$projectParam.env.$envParam.waitpoints.$waitpointFriendlyId.complete/route";
+import { v3WaitpointTokenPath, v3WaitpointTokensPath } from "~/utils/pathBuilder";
+import { PacketDisplay } from "./PacketDisplay";
+import { WaitpointStatusCombo } from "./WaitpointStatus";
+import { RunTag } from "./RunTag";
+
+export function WaitpointDetailTable({
+ waitpoint,
+ linkToList = false,
+}: {
+ waitpoint: WaitpointDetail;
+ linkToList?: boolean;
+}) {
+ const organization = useOrganization();
+ const project = useProject();
+ const environment = useEnvironment();
+
+ const hasExpired =
+ waitpoint.idempotencyKeyExpiresAt && waitpoint.idempotencyKeyExpiresAt < new Date();
+
+ return (
+
+
+
+ {waitpoint.userProvidedIdempotencyKey
+ ? waitpoint.inactiveIdempotencyKey ?? waitpoint.idempotencyKey
+ : "–"}
+
+
+ {waitpoint.idempotencyKeyExpiresAt ? (
+ <>
+ {hasExpired ? "Expired" : "Expires at"}:{" "}
+
+
+
+ {waitpoint.status === "TIMED_OUT"
+ ? "The waitpoint timed out"
+ : waitpoint.status === "COMPLETED"
+ ? "The waitpoint completed before this timeout was reached"
+ : "The waitpoint is still waiting"}
+
+
+
+ {waitpoint.completedAfter ? (
+ <>
+
+
+ {waitpoint.tags.map((tag) => (
+
+
+
+ );
+}
+
+const filterTypes = [
+ {
+ name: "statuses",
+ title: "Status",
+ icon:
+
+ {fetcher.state === "loading" &&
+ )}
+ />
+
+
+
+
+ setId(e.target.value)}
+ variant="small"
+ className="w-[27ch] font-mono"
+ spellCheck={false}
+ />
+ {error ? {error} : null}
+
+
+
+
+
+
+
+
+
+ setIdempotencyKey(e.target.value)}
+ variant="small"
+ className="w-[27ch] font-mono"
+ spellCheck={false}
+ />
+ {error ? {error} : null}
+
+
+
+
+
+
+
+ );
+}
diff --git a/apps/webapp/app/routes/_app.orgs.$organizationSlug.projects.$projectParam.env.$envParam.waitpoints.tokens/route.tsx b/apps/webapp/app/routes/_app.orgs.$organizationSlug.projects.$projectParam.env.$envParam.waitpoints.tokens/route.tsx
new file mode 100644
index 0000000000..ad3cccab3f
--- /dev/null
+++ b/apps/webapp/app/routes/_app.orgs.$organizationSlug.projects.$projectParam.env.$envParam.waitpoints.tokens/route.tsx
@@ -0,0 +1,247 @@
+import upgradeForWaitpointsPath from "~/assets/images/waitpoints-dashboard.png";
+import { BookOpenIcon } from "@heroicons/react/20/solid";
+import { Outlet, useParams, type MetaFunction } from "@remix-run/react";
+import { type LoaderFunctionArgs } from "@remix-run/server-runtime";
+import { typedjson, useTypedLoaderData } from "remix-typedjson";
+import { AdminDebugTooltip } from "~/components/admin/debugTooltip";
+import { NoWaitpointTokens } from "~/components/BlankStatePanels";
+import { MainCenteredContainer, PageBody, PageContainer } from "~/components/layout/AppLayout";
+import { ListPagination } from "~/components/ListPagination";
+import { LinkButton } from "~/components/primitives/Buttons";
+import { DateTime } from "~/components/primitives/DateTime";
+import { NavBar, PageAccessories, PageTitle } from "~/components/primitives/PageHeader";
+import { Paragraph } from "~/components/primitives/Paragraph";
+import {
+ ResizableHandle,
+ ResizablePanel,
+ ResizablePanelGroup,
+} from "~/components/primitives/Resizable";
+import {
+ Table,
+ TableBody,
+ TableCell,
+ TableHeader,
+ TableHeaderCell,
+ TableRow,
+} from "~/components/primitives/Table";
+import { SimpleTooltip } from "~/components/primitives/Tooltip";
+import { RunTag } from "~/components/runs/v3/RunTag";
+import { WaitpointStatusCombo } from "~/components/runs/v3/WaitpointStatus";
+import {
+ WaitpointSearchParamsSchema,
+ WaitpointTokenFilters,
+} from "~/components/runs/v3/WaitpointTokenFilters";
+import { useEnvironment } from "~/hooks/useEnvironment";
+import { useOrganization } from "~/hooks/useOrganizations";
+import { useProject } from "~/hooks/useProject";
+import { findProjectBySlug } from "~/models/project.server";
+import { findEnvironmentBySlug } from "~/models/runtimeEnvironment.server";
+import { WaitpointTokenListPresenter } from "~/presenters/v3/WaitpointTokenListPresenter.server";
+import { requireUserId } from "~/services/session.server";
+import { docsPath, EnvironmentParamSchema, v3WaitpointTokenPath } from "~/utils/pathBuilder";
+import { determineEngineVersion } from "~/v3/engineVersion.server";
+import { CopyableText } from "~/components/primitives/CopyableText";
+
+export const meta: MetaFunction = () => {
+ return [
+ {
+ title: `Waitpoint tokens | Trigger.dev`,
+ },
+ ];
+};
+
+export const loader = async ({ request, params }: LoaderFunctionArgs) => {
+ const userId = await requireUserId(request);
+ const { organizationSlug, projectParam, envParam } = EnvironmentParamSchema.parse(params);
+
+ const url = new URL(request.url);
+ const s = {
+ id: url.searchParams.get("id") ?? undefined,
+ statuses: url.searchParams.getAll("statuses"),
+ idempotencyKey: url.searchParams.get("idempotencyKey") ?? undefined,
+ tags: url.searchParams.getAll("tags"),
+ period: url.searchParams.get("period") ?? undefined,
+ from: url.searchParams.get("from") ?? undefined,
+ to: url.searchParams.get("to") ?? undefined,
+ cursor: url.searchParams.get("cursor") ?? undefined,
+ direction: url.searchParams.get("direction") ?? undefined,
+ };
+
+ const searchParams = WaitpointSearchParamsSchema.parse(s);
+
+ const project = await findProjectBySlug(organizationSlug, projectParam, userId);
+ if (!project) {
+ throw new Response(undefined, {
+ status: 404,
+ statusText: "Project not found",
+ });
+ }
+
+ const environment = await findEnvironmentBySlug(project.id, envParam, userId);
+ if (!environment) {
+ throw new Response(undefined, {
+ status: 404,
+ statusText: "Environment not found",
+ });
+ }
+
+ try {
+ const presenter = new WaitpointTokenListPresenter();
+ const result = await presenter.call({
+ environment,
+ ...searchParams,
+ });
+
+ return typedjson(result);
+ } catch (error) {
+ console.error(error);
+ throw new Response(undefined, {
+ status: 400,
+ statusText: "Something went wrong, if this problem persists please contact support.",
+ });
+ }
+};
+
+export default function Page() {
+ const { success, tokens, pagination, hasFilters, filters } = useTypedLoaderData
+ {waitpoint.id}
+
+
+
+ {waitpoint.status === "WAITING" && (
+
+
+
+
+
+ 5 related runs
+
+
+
+ )}
+
+
+
+
+
+
+
+
+
+
+ {(pagination.next || pagination.previous) && (
+
+
+
+ )}
+
-
{/* Letters */}
@@ -447,8 +448,9 @@ function LogoForm({ organization }: { organization: { avatar: Avatar } }) {
name,
hex,
}}
- className="size-10"
+ size={2.5}
includePadding
+ orgName={organization.title}
/>
diff --git a/apps/webapp/app/routes/api.v1.waitpoints.tokens.$waitpointFriendlyId.complete.ts b/apps/webapp/app/routes/api.v1.waitpoints.tokens.$waitpointFriendlyId.complete.ts
index ace2e80cf6..1a13324f60 100644
--- a/apps/webapp/app/routes/api.v1.waitpoints.tokens.$waitpointFriendlyId.complete.ts
+++ b/apps/webapp/app/routes/api.v1.waitpoints.tokens.$waitpointFriendlyId.complete.ts
@@ -1,7 +1,7 @@
import { json } from "@remix-run/server-runtime";
import {
CompleteWaitpointTokenRequestBody,
- CompleteWaitpointTokenResponseBody,
+ type CompleteWaitpointTokenResponseBody,
conditionallyExportPacket,
stringifyIO,
} from "@trigger.dev/core/v3";
diff --git a/apps/webapp/app/routes/api.v1.waitpoints.tokens.$waitpointFriendlyId.ts b/apps/webapp/app/routes/api.v1.waitpoints.tokens.$waitpointFriendlyId.ts
new file mode 100644
index 0000000000..be91b35b08
--- /dev/null
+++ b/apps/webapp/app/routes/api.v1.waitpoints.tokens.$waitpointFriendlyId.ts
@@ -0,0 +1,23 @@
+import { json } from "@remix-run/server-runtime";
+import { type WaitpointRetrieveTokenResponse } from "@trigger.dev/core/v3";
+import { WaitpointId } from "@trigger.dev/core/v3/isomorphic";
+import { z } from "zod";
+import { ApiWaitpointPresenter } from "~/presenters/v3/ApiWaitpointPresenter.server";
+import { createLoaderApiRoute } from "~/services/routeBuilders/apiBuilder.server";
+
+export const loader = createLoaderApiRoute(
+ {
+ params: z.object({
+ waitpointFriendlyId: z.string(),
+ }),
+ findResource: async () => 1, // This is a dummy function, we don't need to find a resource
+ },
+ async ({ params, authentication }) => {
+ const presenter = new ApiWaitpointPresenter();
+ const result: WaitpointRetrieveTokenResponse = await presenter.call(
+ authentication.environment,
+ WaitpointId.toId(params.waitpointFriendlyId)
+ );
+ return json(result);
+ }
+);
diff --git a/apps/webapp/app/routes/api.v1.waitpoints.tokens.ts b/apps/webapp/app/routes/api.v1.waitpoints.tokens.ts
index 23da42ca0b..296c006f45 100644
--- a/apps/webapp/app/routes/api.v1.waitpoints.tokens.ts
+++ b/apps/webapp/app/routes/api.v1.waitpoints.tokens.ts
@@ -1,13 +1,35 @@
import { json } from "@remix-run/server-runtime";
import {
CreateWaitpointTokenRequestBody,
- CreateWaitpointTokenResponseBody,
+ type CreateWaitpointTokenResponseBody,
} from "@trigger.dev/core/v3";
import { WaitpointId } from "@trigger.dev/core/v3/isomorphic";
-import { createActionApiRoute } from "~/services/routeBuilders/apiBuilder.server";
+import { createWaitpointTag, MAX_TAGS_PER_WAITPOINT } from "~/models/waitpointTag.server";
+import {
+ ApiWaitpointTokenListPresenter,
+ ApiWaitpointTokenListSearchParams,
+} from "~/presenters/v3/ApiWaitpointTokenListPresenter.server";
+import {
+ createActionApiRoute,
+ createLoaderApiRoute,
+} from "~/services/routeBuilders/apiBuilder.server";
import { parseDelay } from "~/utils/delays";
import { resolveIdempotencyKeyTTL } from "~/utils/idempotencyKeys.server";
import { engine } from "~/v3/runEngine.server";
+import { ServiceValidationError } from "~/v3/services/baseService.server";
+
+export const loader = createLoaderApiRoute(
+ {
+ searchParams: ApiWaitpointTokenListSearchParams,
+ findResource: async () => 1, // This is a dummy function, we don't need to find a resource
+ },
+ async ({ searchParams, authentication }) => {
+ const presenter = new ApiWaitpointTokenListPresenter();
+ const result = await presenter.call(authentication.environment, searchParams);
+
+ return json(result);
+ }
+);
const { action } = createActionApiRoute(
{
@@ -16,27 +38,61 @@ const { action } = createActionApiRoute(
method: "POST",
},
async ({ authentication, body }) => {
- const idempotencyKeyExpiresAt = body.idempotencyKeyTTL
- ? resolveIdempotencyKeyTTL(body.idempotencyKeyTTL)
- : undefined;
-
- const timeout = await parseDelay(body.timeout);
-
- const result = await engine.createManualWaitpoint({
- environmentId: authentication.environment.id,
- projectId: authentication.environment.projectId,
- idempotencyKey: body.idempotencyKey,
- idempotencyKeyExpiresAt,
- timeout,
- });
-
- return json
{run.tags.map((tag: string) => (
-
-
@@ -833,53 +831,6 @@ function RunError({ error }: { error: TaskRunError }) {
}
}
-function PacketDisplay({
- data,
- dataType,
- title,
-}: {
- data: string;
- dataType: string;
- title: string;
-}) {
- switch (dataType) {
- case "application/store": {
- return (
-
-
- {title}
-
-
- Download
-
-
- );
- }
- case "text/plain": {
- return (
-
-
-
- {span.entity.object.userProvidedIdempotencyKey
- ? span.entity.object.idempotencyKey
- : "–"}
-
-
- {span.entity.object.idempotencyKeyExpiresAt ? (
- <>
- TTL:
-
- {span.entity.object.completedAfter ? (
-
-
+ {span.entity.object.status === "WAITING" && (
+
;
+type FormWaitpoint = Pick & {
+ status: WaitpointTokenStatus;
+};
export function CompleteWaitpointForm({ waitpoint }: { waitpoint: FormWaitpoint }) {
return (
@@ -198,7 +201,7 @@ export function CompleteWaitpointForm({ waitpoint }: { waitpoint: FormWaitpoint
waitpoint.completedAfter ? (
("{\n\n}");
- const formAction = `/resources/orgs/${organization.slug}/projects/${project.slug}/env/${environment.slug}/waitpoints/${waitpoint.friendlyId}/complete`;
+ const formAction = `/resources/orgs/${organization.slug}/projects/${project.slug}/env/${environment.slug}/waitpoints/${waitpoint.id}/complete`;
const submitForm = useCallback(
(e: React.FormEvent) => {
@@ -374,7 +377,7 @@ function CompleteManualWaitpointForm({ waitpoint }: { waitpoint: { friendlyId: s
);
}
-export function ForceTimeout({ waitpoint }: { waitpoint: { friendlyId: string } }) {
+export function ForceTimeout({ waitpoint }: { waitpoint: { id: string } }) {
const location = useLocation();
const navigation = useNavigation();
const isLoading = navigation.state !== "idle";
@@ -382,7 +385,7 @@ export function ForceTimeout({ waitpoint }: { waitpoint: { friendlyId: string }
const project = useProject();
const environment = useEnvironment();
- const formAction = `/resources/orgs/${organization.slug}/projects/${project.slug}/env/${environment.slug}/waitpoints/${waitpoint.friendlyId}/complete`;
+ const formAction = `/resources/orgs/${organization.slug}/projects/${project.slug}/env/${environment.slug}/waitpoints/${waitpoint.id}/complete`;
return (
@@ -30,7 +30,7 @@ export default function Story() {
Size 12
{avatars.map((avatar, index) => (
-