Skip to content

Commit e076708

Browse files
samejrsamejr
committed
Nicely formatted idempotency tooltip information
1 parent d797cc0 commit e076708

File tree

1 file changed

+85
-17
lines changed
  • apps/webapp/app/routes/resources.orgs.$organizationSlug.projects.$projectParam.env.$envParam.runs.$runParam.spans.$spanParam

1 file changed

+85
-17
lines changed

‎apps/webapp/app/routes/resources.orgs.$organizationSlug.projects.$projectParam.env.$envParam.runs.$runParam.spans.$spanParam/route.tsx‎

Lines changed: 85 additions & 17 deletions
Original file line numberDiff line numberDiff line change
@@ -7,7 +7,10 @@ import {
77
ClockIcon,
88
CloudArrowDownIcon,
99
EnvelopeIcon,
10+
GlobeAltIcon,
11+
KeyIcon,
1012
QueueListIcon,
13+
SignalIcon,
1114
} from "@heroicons/react/20/solid";
1215
import { type LoaderFunctionArgs } from "@remix-run/server-runtime";
1316
import {
@@ -576,21 +579,85 @@ function RunBody({
576579
Idempotency
577580
<InfoIconTooltip
578581
content={
579-
<div className="flex max-w-xs flex-col gap-2 p-1">
580-
<Paragraph variant="small">
581-
Idempotency keys prevent duplicate task runs. If you trigger a task
582-
with the same key twice, the second request returns the original run.
583-
</Paragraph>
584-
<Paragraph variant="small">
585-
<strong>Scope:</strong> <strong>global</strong> applies across all
586-
runs, <strong>run</strong> is unique to a parent run, and{" "}
587-
<strong>attempt</strong> is unique to a specific attempt.
588-
</Paragraph>
589-
<Paragraph variant="small">
590-
<strong>Status:</strong> <strong>Active</strong> means duplicates are
591-
blocked, <strong>Expired</strong> means the TTL has passed, and{" "}
592-
<strong>Inactive</strong> means the key was reset or cleared.
593-
</Paragraph>
582+
<div className="flex max-w-xs flex-col gap-3 p-1 pb-2">
583+
<div>
584+
<div className="mb-0.5 flex items-center gap-1.5">
585+
<KeyIcon className="size-4 text-text-dimmed" />
586+
<Header3>Idempotency keys</Header3>
587+
</div>
588+
<Paragraph variant="small" className="!text-wrap text-text-dimmed">
589+
Prevent duplicate task runs. If you trigger a task with the same
590+
key twice, the second request returns the original run.
591+
</Paragraph>
592+
</div>
593+
<div>
594+
<div className="mb-1 flex items-center gap-1">
595+
<GlobeAltIcon className="size-4 text-blue-500" />
596+
<Header3>Scope</Header3>
597+
</div>
598+
<ul className="flex flex-col gap-0.5 text-sm">
599+
<li className="flex gap-1.5">
600+
<span className="text-text-dimmed">•</span>
601+
<span>
602+
<span className="text-text-bright">Global:</span>{" "}
603+
<span className="text-text-dimmed">
604+
applies across all runs
605+
</span>
606+
</span>
607+
</li>
608+
<li className="flex gap-1.5">
609+
<span className="text-text-dimmed">•</span>
610+
<span>
611+
<span className="text-text-bright">Run:</span>{" "}
612+
<span className="text-text-dimmed">
613+
unique to a parent run
614+
</span>
615+
</span>
616+
</li>
617+
<li className="flex gap-1.5">
618+
<span className="text-text-dimmed">•</span>
619+
<span>
620+
<span className="text-text-bright">Attempt:</span>{" "}
621+
<span className="text-text-dimmed">
622+
unique to a specific attempt
623+
</span>
624+
</span>
625+
</li>
626+
</ul>
627+
</div>
628+
<div>
629+
<div className="mb-1 flex items-center gap-1">
630+
<SignalIcon className="size-4 text-success" />
631+
<Header3>Status</Header3>
632+
</div>
633+
<ul className="flex flex-col gap-0.5 text-sm">
634+
<li className="flex gap-1.5">
635+
<span className="text-text-dimmed">•</span>
636+
<span>
637+
<span className="text-text-bright">Active:</span>{" "}
638+
<span className="text-text-dimmed">
639+
duplicates are blocked
640+
</span>
641+
</span>
642+
</li>
643+
<li className="flex gap-1.5">
644+
<span className="text-text-dimmed">•</span>
645+
<span>
646+
<span className="text-text-bright">Expired:</span>{" "}
647+
<span className="text-text-dimmed">the TTL has passed</span>
648+
</span>
649+
</li>
650+
<li className="flex gap-1.5">
651+
<span className="text-text-dimmed">•</span>
652+
<span>
653+
<span className="text-text-bright">Inactive:</span>{" "}
654+
<span className="text-text-dimmed">
655+
the key was reset or cleared
656+
</span>
657+
</span>
658+
</li>
659+
</ul>
660+
</div>
594661
<LinkButton
595662
to={docsPath("idempotency")}
596663
variant="docs/small"
@@ -630,14 +697,15 @@ function RunBody({
630697
</Property.Label>
631698
<Property.Value>
632699
{run.idempotencyKeyStatus ? (
633-
<>
700+
<div className="flex flex-col gap-0.5">
634701
<div>
635702
<span className="text-text-dimmed">Key: </span>
636703
{run.idempotencyKey ? (
637704
<CopyableText
638705
value={run.idempotencyKey}
639706
copyValue={run.idempotencyKey}
640707
asChild
708+
className="max-h-5"
641709
/>
642710
) : (
643711
"–"
@@ -657,7 +725,7 @@ function RunBody({
657725
"–"
658726
)}
659727
</div>
660-
</>
728+
</div>
661729
) : (
662730
"–"
663731
)}

0 commit comments

Comments
 (0)