Skip to content

Commit dbcf632

Browse files
myftijamyftija
authored
fix: add missing field descriptions in the test page (#2251)
* Switch to sexy scrollbars in the options pane * Add missing field descriptions * Add a run options link to the docs * Make the copy for the field descriptions more concise * Fix tooltip issue in the Select component
1 parent 3cfde48 commit dbcf632

File tree

2 files changed

+39
-23
lines changed
  • apps/webapp/app
    • components/primitives
    • routes/_app.orgs.$organizationSlug.projects.$projectParam.env.$envParam.test.tasks.$taskParam

2 files changed

+39
-23
lines changed

‎apps/webapp/app/components/primitives/Select.tsx

Lines changed: 0 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -199,7 +199,6 @@ export function Select<TValue extends string | string[], TItem>({
199199
text={text}
200200
placeholder={placeholder}
201201
shortcut={shortcut}
202-
tooltipTitle={heading}
203202
disabled={disabled}
204203
dropdownIcon={dropdownIcon}
205204
{...props}

‎apps/webapp/app/routes/_app.orgs.$organizationSlug.projects.$projectParam.env.$envParam.test.tasks.$taskParam/route.tsx

Lines changed: 39 additions & 22 deletions
Original file line numberDiff line numberDiff line change
@@ -19,7 +19,6 @@ import { Label } from "~/components/primitives/Label";
1919
import { DurationPicker } from "~/components/primitives/DurationPicker";
2020
import { Paragraph } from "~/components/primitives/Paragraph";
2121
import { Popover, PopoverContent, PopoverTrigger } from "~/components/primitives/Popover";
22-
import { SimpleTooltip } from "~/components/primitives/Tooltip";
2322
import {
2423
ResizableHandle,
2524
ResizablePanel,
@@ -60,6 +59,7 @@ import { TaskRunStatusCombo } from "~/components/runs/v3/TaskRunStatus";
6059
import { ClockRotateLeftIcon } from "~/assets/icons/ClockRotateLeftIcon";
6160
import { MachinePresetName } from "@trigger.dev/core/v3";
6261
import { TaskTriggerSourceIcon } from "~/components/runs/v3/TaskTriggerSource";
62+
import { Callout } from "~/components/primitives/Callout";
6363

6464
export const loader = async ({ request, params }: LoaderFunctionArgs) => {
6565
const userId = await requireUserId(request);
@@ -412,12 +412,17 @@ function StandardTaskForm({
412412
</div>
413413
</ResizablePanel>
414414
<ResizableHandle id="test-task-handle" />
415-
<ResizablePanel id="test-task-options" min="285px" default="285px" max="360px">
416-
<div className="h-full overflow-y-scroll">
415+
<ResizablePanel id="test-task-options" min="300px" default="300px" max="360px">
416+
<div className="h-full overflow-y-scroll scrollbar-thin scrollbar-track-transparent scrollbar-thumb-charcoal-600">
417417
<Fieldset className="px-3 py-3">
418+
<Hint>
419+
Options enable you to control the execution behavior of your task.{" "}
420+
<TextLink to={docsPath("triggering#options")}>Read the docs.</TextLink>
421+
</Hint>
418422
<InputGroup>
419423
<Label variant="small">Delay</Label>
420424
<DurationPicker name={delaySeconds.name} id={delaySeconds.id} />
425+
<Hint>Delays run by a specific duration.</Hint>
421426
<FormError id={delaySeconds.errorId}>{delaySeconds.error}</FormError>
422427
</InputGroup>
423428
<InputGroup>
@@ -428,7 +433,7 @@ function StandardTaskForm({
428433
value={ttlValue}
429434
onChange={setTtlValue}
430435
/>
431-
<Hint>The run will expire if it hasn't started within the TTL (time to live).</Hint>
436+
<Hint>Expires the run if it hasn't started within the TTL.</Hint>
432437
<FormError id={ttlSeconds.errorId}>{ttlSeconds.error}</FormError>
433438
</InputGroup>
434439
<InputGroup>
@@ -447,6 +452,7 @@ function StandardTaskForm({
447452
name={queue.name}
448453
id={queue.id}
449454
placeholder="Select queue"
455+
heading="Filter queues"
450456
variant="tertiary/small"
451457
dropdownIcon
452458
items={queueItems}
@@ -481,6 +487,7 @@ function StandardTaskForm({
481487
}
482488
</Select>
483489
)}
490+
<Hint>Assign run to a specific queue.</Hint>
484491
<FormError id={queue.errorId}>{queue.error}</FormError>
485492
</InputGroup>
486493
<InputGroup>
@@ -494,7 +501,7 @@ function StandardTaskForm({
494501
tags={tagsValue}
495502
onTagsChange={setTagsValue}
496503
/>
497-
<Hint>Tags enable you to easily filter runs.</Hint>
504+
<Hint>Add tags to easily filter runs.</Hint>
498505
<FormError id={tags.errorId}>{tags.error}</FormError>
499506
</InputGroup>
500507
<InputGroup>
@@ -523,6 +530,7 @@ function StandardTaskForm({
523530
}
524531
}}
525532
/>
533+
<Hint>Retries failed runs up to the specified number of attempts.</Hint>
526534
<FormError id={maxAttempts.errorId}>{maxAttempts.error}</FormError>
527535
</InputGroup>
528536
<InputGroup>
@@ -533,6 +541,7 @@ function StandardTaskForm({
533541
value={maxDurationValue}
534542
onChange={setMaxDurationValue}
535543
/>
544+
<Hint>Overrides the maximum compute time limit for the run.</Hint>
536545
<FormError id={maxDurationSeconds.errorId}>{maxDurationSeconds.error}</FormError>
537546
</InputGroup>
538547
<InputGroup>
@@ -552,7 +561,7 @@ function StandardTaskForm({
552561
name={idempotencyKeyTTLSeconds.name}
553562
id={idempotencyKeyTTLSeconds.id}
554563
/>
555-
<Hint>By default, idempotency keys expire after 30 days.</Hint>
564+
<Hint>Keys expire after 30 days by default.</Hint>
556565
<FormError id={idempotencyKeyTTLSeconds.errorId}>
557566
{idempotencyKeyTTLSeconds.error}
558567
</FormError>
@@ -568,8 +577,7 @@ function StandardTaskForm({
568577
onChange={(e) => setConcurrencyKeyValue(e.target.value)}
569578
/>
570579
<Hint>
571-
Concurrency keys enable you limit concurrency by creating a separate queue for
572-
each value of the key.
580+
Limits concurrency by creating a separate queue for each value of the key.
573581
</Hint>
574582
<FormError id={concurrencyKey.errorId}>{concurrencyKey.error}</FormError>
575583
</InputGroup>
@@ -596,7 +604,7 @@ function StandardTaskForm({
596604
</SelectItem>
597605
))}
598606
</Select>
599-
<Hint>This lets you override the machine preset specified in the task.</Hint>
607+
<Hint>Overrides the machine preset.</Hint>
600608
<FormError id={machine.errorId}>{machine.error}</FormError>
601609
</InputGroup>
602610
<InputGroup>
@@ -617,8 +625,10 @@ function StandardTaskForm({
617625
</SelectItem>
618626
))}
619627
</Select>
620-
{disableVersionSelection && (
628+
{disableVersionSelection ? (
621629
<Hint>Only the latest version is available in the development environment.</Hint>
630+
) : (
631+
<Hint>Runs task on a specific version.</Hint>
622632
)}
623633
<FormError id={version.errorId}>{version.error}</FormError>
624634
</InputGroup>
@@ -869,7 +879,11 @@ function ScheduledTaskForm({
869879
</Hint>
870880
<FormError id={externalId.errorId}>{externalId.error}</FormError>
871881
</InputGroup>
872-
<div className="w-full border-b border-grid-bright"></div>
882+
<div className="w-full border-b border-grid-bright" />
883+
<Hint>
884+
Options enable you to control the execution behavior of your task.{" "}
885+
<TextLink to={docsPath("triggering#options")}>Read the docs.</TextLink>
886+
</Hint>
873887
<InputGroup>
874888
<Label htmlFor={ttlSeconds.id} variant="small">
875889
TTL
@@ -880,7 +894,7 @@ function ScheduledTaskForm({
880894
value={ttlValue}
881895
onChange={setTtlValue}
882896
/>
883-
<Hint>The run will expire if it hasn't started within the TTL (time to live).</Hint>
897+
<Hint>Expires the run if it hasn't started within the TTL.</Hint>
884898
<FormError id={ttlSeconds.errorId}>{ttlSeconds.error}</FormError>
885899
</InputGroup>
886900
<InputGroup>
@@ -899,6 +913,7 @@ function ScheduledTaskForm({
899913
name={queue.name}
900914
id={queue.id}
901915
placeholder="Select queue"
916+
heading="Filter queues"
902917
variant="tertiary/small"
903918
dropdownIcon
904919
items={queueItems}
@@ -933,6 +948,7 @@ function ScheduledTaskForm({
933948
}
934949
</Select>
935950
)}
951+
<Hint>Assign run to a specific queue.</Hint>
936952
<FormError id={queue.errorId}>{queue.error}</FormError>
937953
</InputGroup>
938954
<InputGroup>
@@ -946,7 +962,7 @@ function ScheduledTaskForm({
946962
tags={tagsValue}
947963
onTagsChange={setTagsValue}
948964
/>
949-
<Hint>Tags enable you to easily filter runs.</Hint>
965+
<Hint>Add tags to easily filter runs.</Hint>
950966
<FormError id={tags.errorId}>{tags.error}</FormError>
951967
</InputGroup>
952968
<InputGroup>
@@ -975,6 +991,7 @@ function ScheduledTaskForm({
975991
}
976992
}}
977993
/>
994+
<Hint>Retries failed runs up to the specified number of attempts.</Hint>
978995
<FormError id={maxAttempts.errorId}>{maxAttempts.error}</FormError>
979996
</InputGroup>
980997
<InputGroup>
@@ -987,6 +1004,7 @@ function ScheduledTaskForm({
9871004
value={maxDurationValue}
9881005
onChange={setMaxDurationValue}
9891006
/>
1007+
<Hint>Overrides the maximum compute time limit for the run.</Hint>
9901008
<FormError id={maxDurationSeconds.errorId}>{maxDurationSeconds.error}</FormError>
9911009
</InputGroup>
9921010
<InputGroup>
@@ -1005,7 +1023,7 @@ function ScheduledTaskForm({
10051023
Idempotency key TTL
10061024
</Label>
10071025
<DurationPicker name={idempotencyKeyTTLSeconds.name} id={idempotencyKeyTTLSeconds.id} />
1008-
<Hint>By default, idempotency keys expire after 30 days.</Hint>
1026+
<Hint>Keys expire after 30 days by default.</Hint>
10091027
<FormError id={idempotencyKeyTTLSeconds.errorId}>
10101028
{idempotencyKeyTTLSeconds.error}
10111029
</FormError>
@@ -1020,10 +1038,7 @@ function ScheduledTaskForm({
10201038
value={concurrencyKeyValue ?? ""}
10211039
onChange={(e) => setConcurrencyKeyValue(e.target.value)}
10221040
/>
1023-
<Hint>
1024-
Concurrency keys enable you limit concurrency by creating a separate queue for each
1025-
value of the key.
1026-
</Hint>
1041+
<Hint>Limits concurrency by creating a separate queue for each value of the key.</Hint>
10271042
<FormError id={concurrencyKey.errorId}>{concurrencyKey.error}</FormError>
10281043
</InputGroup>
10291044
<InputGroup>
@@ -1049,7 +1064,7 @@ function ScheduledTaskForm({
10491064
</SelectItem>
10501065
))}
10511066
</Select>
1052-
<Hint>This lets you override the machine preset specified in the task.</Hint>
1067+
<Hint>Overrides the machine preset.</Hint>
10531068
<FormError id={machine.errorId}>{machine.error}</FormError>
10541069
</InputGroup>
10551070
<InputGroup>
@@ -1070,8 +1085,10 @@ function ScheduledTaskForm({
10701085
</SelectItem>
10711086
))}
10721087
</Select>
1073-
{disableVersionSelection && (
1088+
{disableVersionSelection ? (
10741089
<Hint>Only the latest version is available in the development environment.</Hint>
1090+
) : (
1091+
<Hint>Runs task on a specific version.</Hint>
10751092
)}
10761093
<FormError id={version.errorId}>{version.error}</FormError>
10771094
</InputGroup>
@@ -1120,7 +1137,7 @@ function RecentRunsPopover<T extends StandardRun | ScheduledRun>({
11201137
Recent runs
11211138
</Button>
11221139
</PopoverTrigger>
1123-
<PopoverContent className="min-w-[279px] p-0" align="end" sideOffset={6}>
1140+
<PopoverContent className="min-w-[294px] p-0" align="end" sideOffset={6}>
11241141
<div className="max-h-80 overflow-y-auto">
11251142
<div className="p-1">
11261143
{runs.map((run) => (
@@ -1134,7 +1151,7 @@ function RecentRunsPopover<T extends StandardRun | ScheduledRun>({
11341151
className="flex w-full items-center gap-2 rounded-sm px-2 py-2 outline-none transition-colors focus-custom hover:bg-charcoal-900 "
11351152
>
11361153
<div className="flex flex-col items-start">
1137-
<Paragraph variant="small">
1154+
<Paragraph variant="small/bright">
11381155
<DateTime date={run.createdAt} showTooltip={false} />
11391156
</Paragraph>
11401157
<div className="flex items-center gap-2 text-xs text-text-dimmed">

0 commit comments

Comments
 (0)