Skip to content

Commit 3910189

Browse files
matt-aitkenmatt-aitken
committed
WIP on completing waitpoint form
1 parent 053c650 commit 3910189

File tree

3 files changed

+73
-61
lines changed

3 files changed

+73
-61
lines changed

‎apps/webapp/app/assets/icons/WaitTokenIcon.tsx‎

Lines changed: 13 additions & 13 deletions
Original file line numberDiff line numberDiff line change
@@ -1,34 +1,34 @@
11
export function WaitTokenIcon({ className }: { className?: string }) {
22
return (
33
<svg className={className} viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
4-
<g clip-path="url(#clip0_16172_85184)">
4+
<g clipPath="url(#clip0_16172_85184)">
55
<path
66
d="M13.3335 8L6.66683 8"
77
stroke="currentColor"
8-
stroke-width="1.33333"
9-
stroke-linecap="round"
10-
stroke-linejoin="round"
8+
strokeWidth="1.33333"
9+
strokeLinecap="round"
10+
strokeLinejoin="round"
1111
/>
1212
<path
1313
d="M13.3335 8L10.6668 10.6667"
1414
stroke="currentColor"
15-
stroke-width="1.33333"
16-
stroke-linecap="round"
17-
stroke-linejoin="round"
15+
strokeWidth="1.33333"
16+
strokeLinecap="round"
17+
strokeLinejoin="round"
1818
/>
1919
<path
2020
d="M13.3335 7.99992L10.6668 5.33325"
2121
stroke="currentColor"
22-
stroke-width="1.33333"
23-
stroke-linecap="round"
24-
stroke-linejoin="round"
22+
strokeWidth="1.33333"
23+
strokeLinecap="round"
24+
strokeLinejoin="round"
2525
/>
2626
<path
2727
d="M3.6665 2.66675L3.6665 13.3334"
2828
stroke="currentColor"
29-
stroke-width="1.33333"
30-
stroke-linecap="round"
31-
stroke-linejoin="round"
29+
strokeWidth="1.33333"
30+
strokeLinecap="round"
31+
strokeLinejoin="round"
3232
/>
3333
</g>
3434
<defs>

‎apps/webapp/app/routes/api.v1.waitpoints.tokens.$waitpointFriendlyId.complete.ts‎

Lines changed: 0 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -3,16 +3,13 @@ import {
33
CompleteWaitpointTokenRequestBody,
44
CompleteWaitpointTokenResponseBody,
55
conditionallyExportPacket,
6-
CreateWaitpointTokenResponseBody,
76
stringifyIO,
87
} from "@trigger.dev/core/v3";
98
import { WaitpointId } from "@trigger.dev/core/v3/apps";
109
import { z } from "zod";
1110
import { $replica } from "~/db.server";
1211
import { logger } from "~/services/logger.server";
1312
import { createActionApiRoute } from "~/services/routeBuilders/apiBuilder.server";
14-
import { parseDelay } from "~/utils/delays";
15-
import { resolveIdempotencyKeyTTL } from "~/utils/idempotencyKeys.server";
1613
import { engine } from "~/v3/runEngine.server";
1714

1815
const { action } = createActionApiRoute(

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

Lines changed: 60 additions & 45 deletions
Original file line numberDiff line numberDiff line change
@@ -1,15 +1,20 @@
11
import { parse } from "@conform-to/zod";
2+
import { InformationCircleIcon } from "@heroicons/react/20/solid";
23
import { Form, useNavigation, useSubmit } from "@remix-run/react";
34
import { ActionFunctionArgs, json } from "@remix-run/server-runtime";
45
import { Waitpoint } from "@trigger.dev/database";
56
import { useCallback, useRef } from "react";
67
import { z } from "zod";
8+
import { CodeBlock } from "~/components/code/CodeBlock";
9+
import { InlineCode } from "~/components/code/InlineCode";
710
import { JSONEditor } from "~/components/code/JSONEditor";
811
import { Button } from "~/components/primitives/Buttons";
12+
import { Callout } from "~/components/primitives/Callout";
913
import { Fieldset } from "~/components/primitives/Fieldset";
10-
import { Header2 } from "~/components/primitives/Headers";
14+
import { Header3 } from "~/components/primitives/Headers";
1115
import { InputGroup } from "~/components/primitives/InputGroup";
1216
import { Label } from "~/components/primitives/Label";
17+
import { Paragraph } from "~/components/primitives/Paragraph";
1318
import { prisma } from "~/db.server";
1419
import { useOrganization } from "~/hooks/useOrganizations";
1520
import { useProject } from "~/hooks/useProject";
@@ -90,7 +95,7 @@ export function CompleteWaitpointForm({ waitpoint }: { waitpoint: FormWaitpoint
9095
const isLoading = navigation.state !== "idle";
9196
const organization = useOrganization();
9297
const project = useProject();
93-
const currentJson = useRef<string>("");
98+
const currentJson = useRef<string>("{\n\n}");
9499
const formAction = `/resources/orgs/${organization.slug}/projects/${project.slug}/waitpoints/${waitpoint.friendlyId}/complete`;
95100

96101
const submitForm = useCallback(
@@ -114,52 +119,62 @@ export function CompleteWaitpointForm({ waitpoint }: { waitpoint: FormWaitpoint
114119
);
115120

116121
return (
117-
<Form
118-
action={formAction}
119-
method="post"
120-
onSubmit={(e) => submitForm(e)}
121-
className="grid h-full max-h-full grid-rows-[2.5rem_1fr_3.25rem] overflow-hidden bg-background-bright"
122-
>
123-
<div className="mx-3 flex items-center justify-between gap-2 border-b border-grid-dimmed">
124-
<Header2 className={cn("whitespace-nowrap")}>Complete waitpoint</Header2>
125-
</div>
126-
<div className="overflow-y-scroll scrollbar-thin scrollbar-track-transparent scrollbar-thumb-charcoal-600">
127-
<div className="p-3">
122+
<div className="space-y-3">
123+
<Form
124+
action={formAction}
125+
method="post"
126+
onSubmit={(e) => submitForm(e)}
127+
className="grid h-full max-h-full grid-rows-[2.5rem_1fr_2.5rem] overflow-hidden rounded-md border border-grid-bright"
128+
>
129+
<div className="mx-3 flex items-center">
130+
<Header3 className={cn("whitespace-nowrap")}>Manually complete this waitpoint</Header3>
131+
</div>
132+
<div className="overflow-y-auto border-t border-grid-dimmed bg-charcoal-900 scrollbar-thin scrollbar-track-transparent scrollbar-thumb-charcoal-600">
128133
<input type="hidden" name="type" value={waitpoint.type} />
129-
<Fieldset>
130-
<InputGroup>
131-
<Label>Payload</Label>
132-
<JSONEditor
133-
autoFocus
134-
defaultValue={currentJson.current}
135-
readOnly={false}
136-
basicSetup
137-
onChange={(v) => {
138-
currentJson.current = v;
139-
}}
140-
showClearButton={false}
141-
showCopyButton={false}
142-
height="100%"
143-
min-height="100%"
144-
max-height="100%"
145-
/>
146-
</InputGroup>
147-
</Fieldset>
134+
<div className="max-h-[70vh] min-h-40 overflow-y-auto bg-charcoal-900 scrollbar-thin scrollbar-track-transparent scrollbar-thumb-charcoal-600">
135+
<JSONEditor
136+
autoFocus
137+
defaultValue={currentJson.current}
138+
readOnly={false}
139+
basicSetup
140+
onChange={(v) => {
141+
currentJson.current = v;
142+
}}
143+
showClearButton={false}
144+
showCopyButton={false}
145+
height="100%"
146+
min-height="100%"
147+
max-height="100%"
148+
/>
149+
</div>
148150
</div>
149-
</div>
150-
<div className="flex items-center justify-end gap-2 border-t border-grid-dimmed px-2">
151-
<div className="flex items-center gap-4">
152-
<Button
153-
variant="primary/medium"
154-
type="submit"
155-
disabled={isLoading}
156-
shortcut={{ key: "enter", modifiers: ["mod"] }}
157-
LeadingIcon={isLoading ? "spinner" : undefined}
158-
>
159-
{isLoading ? "Completing…" : "Complete"}
160-
</Button>
151+
<div className="bg-charcoal-900 px-2">
152+
<div className="mb-2 flex items-center justify-end gap-2 border-t border-grid-dimmed pt-2">
153+
<Button
154+
variant="secondary/small"
155+
type="submit"
156+
disabled={isLoading}
157+
LeadingIcon={isLoading ? "spinner" : undefined}
158+
>
159+
{isLoading ? "Completing…" : "Complete waitpoint"}
160+
</Button>
161+
</div>
162+
</div>
163+
</Form>
164+
<div className="rounded-md border border-charcoal-700 bg-charcoal-800">
165+
<div className="flex items-center gap-2 px-2 pt-2">
166+
<InformationCircleIcon className="h-5 w-5 shrink-0 text-text-dimmed" />
167+
<Paragraph variant="small">To complete this waitpoint in your code use:</Paragraph>
161168
</div>
169+
<CodeBlock
170+
code={`
171+
await wait.completeToken<YourType>(tokenId,
172+
output
173+
);`}
174+
className="mt-1 max-w-full border-0 pl-1"
175+
showLineNumbers={false}
176+
/>
162177
</div>
163-
</Form>
178+
</div>
164179
);
165180
}

0 commit comments

Comments
 (0)