Skip to content

Commit 365adc2

Browse files
samejrsamejr
authored
Chore(webapp): adds more copy buttons (#2529)
* Pass up asChild * Include padding when asChild specified * Adds copy buttons to useful data in Details tab * Improve view batch tooltip message
1 parent 7d17730 commit 365adc2

File tree

2 files changed

+140
-68
lines changed
  • apps/webapp/app
    • components/primitives
    • routes/resources.orgs.$organizationSlug.projects.$projectParam.env.$envParam.runs.$runParam.spans.$spanParam

2 files changed

+140
-68
lines changed

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

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -8,10 +8,12 @@ export function CopyableText({
88
value,
99
copyValue,
1010
className,
11+
asChild,
1112
}: {
1213
value: string;
1314
copyValue?: string;
1415
className?: string;
16+
asChild?: boolean;
1517
}) {
1618
const [isHovered, setIsHovered] = useState(false);
1719
const { copy, copied } = useCopy(copyValue ?? value);
@@ -35,6 +37,7 @@ export function CopyableText({
3537
<span
3638
className={cn(
3739
"ml-1 flex size-6 items-center justify-center rounded border border-charcoal-650 bg-charcoal-750",
40+
asChild && "p-1",
3841
copied
3942
? "text-green-500"
4043
: "text-text-dimmed hover:border-charcoal-600 hover:bg-charcoal-700 hover:text-text-bright"
@@ -50,6 +53,7 @@ export function CopyableText({
5053
content={copied ? "Copied!" : "Copy"}
5154
className="font-sans"
5255
disableHoverableContent
56+
asChild={asChild}
5357
/>
5458
</span>
5559
</span>

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

Lines changed: 136 additions & 68 deletions
Original file line numberDiff line numberDiff line change
@@ -14,6 +14,7 @@ import { assertNever } from "assert-never";
1414
import { useEffect } from "react";
1515
import { typedjson, useTypedFetcher } from "remix-typedjson";
1616
import { ExitIcon } from "~/assets/icons/ExitIcon";
17+
import { FlagIcon } from "~/assets/icons/RegionIcons";
1718
import { AdminDebugRun } from "~/components/admin/debugRun";
1819
import { CodeBlock } from "~/components/code/CodeBlock";
1920
import { EnvironmentCombo } from "~/components/environments/EnvironmentLabel";
@@ -22,6 +23,7 @@ import { MachineLabelCombo } from "~/components/MachineLabelCombo";
2223
import { MachineTooltipInfo } from "~/components/MachineTooltipInfo";
2324
import { Button, LinkButton } from "~/components/primitives/Buttons";
2425
import { Callout } from "~/components/primitives/Callout";
26+
import { CopyableText } from "~/components/primitives/CopyableText";
2527
import { DateTime, DateTimeAccurate } from "~/components/primitives/DateTime";
2628
import { Header2, Header3 } from "~/components/primitives/Headers";
2729
import { Paragraph } from "~/components/primitives/Paragraph";
@@ -76,7 +78,6 @@ import {
7678
} from "~/utils/pathBuilder";
7779
import { createTimelineSpanEventsFromSpanEvents } from "~/utils/timelineSpanEvents";
7880
import { CompleteWaitpointForm } from "../resources.orgs.$organizationSlug.projects.$projectParam.env.$envParam.waitpoints.$waitpointFriendlyId.complete/route";
79-
import { FlagIcon } from "~/assets/icons/RegionIcons";
8081

8182
export const loader = async ({ request, params }: LoaderFunctionArgs) => {
8283
const { projectParam, organizationSlug, envParam, runParam, spanParam } =
@@ -409,6 +410,7 @@ function RunBody({
409410
<SimpleTooltip
410411
button={<TaskRunStatusCombo status={run.status} />}
411412
content={descriptionForTaskRunStatus(run.status)}
413+
disableHoverableContent
412414
/>
413415
</Property.Value>
414416
</Property.Item>
@@ -422,82 +424,129 @@ function RunBody({
422424
tasks: [run.taskIdentifier],
423425
})}
424426
>
425-
{run.taskIdentifier}
427+
<CopyableText
428+
value={run.taskIdentifier}
429+
copyValue={run.taskIdentifier}
430+
asChild
431+
/>
426432
</TextLink>
427433
}
428-
content={`Filter runs by ${run.taskIdentifier}`}
434+
content={`View runs filtered by ${run.taskIdentifier}`}
435+
disableHoverableContent
429436
/>
430437
</Property.Value>
431438
</Property.Item>
432439
{run.relationships.root ? (
433440
run.relationships.root.isParent ? (
434441
<Property.Item>
435-
<Property.Label>Root & Parent</Property.Label>
442+
<Property.Label>Root & Parent run</Property.Label>
436443
<Property.Value>
437-
<TextLink
438-
to={v3RunSpanPath(
439-
organization,
440-
project,
441-
environment,
442-
{
443-
friendlyId: run.relationships.root.friendlyId,
444-
},
445-
{ spanId: run.relationships.root.spanId }
446-
)}
447-
className="group flex flex-wrap items-center gap-x-1 gap-y-0"
448-
>
449-
{run.relationships.root.taskIdentifier}
450-
<span className="break-all text-text-dimmed transition-colors group-hover:text-text-bright/80">
451-
({run.relationships.root.friendlyId})
452-
</span>
453-
</TextLink>
454-
</Property.Value>
455-
</Property.Item>
456-
) : (
457-
<>
458-
<Property.Item>
459-
<Property.Label>Root</Property.Label>
460-
<Property.Value>
461-
<TextLink
462-
to={v3RunSpanPath(
463-
organization,
464-
project,
465-
environment,
466-
{
467-
friendlyId: run.relationships.root.friendlyId,
468-
},
469-
{ spanId: run.relationships.root.spanId }
470-
)}
471-
className="group flex flex-wrap items-center gap-x-1 gap-y-0"
472-
>
473-
{run.relationships.root.taskIdentifier}
474-
<span className="break-all text-text-dimmed transition-colors group-hover:text-text-bright/80">
475-
({run.relationships.root.friendlyId})
476-
</span>
477-
</TextLink>
478-
</Property.Value>
479-
</Property.Item>
480-
{run.relationships.parent ? (
481-
<Property.Item>
482-
<Property.Label>Parent</Property.Label>
483-
<Property.Value>
444+
<SimpleTooltip
445+
button={
484446
<TextLink
485447
to={v3RunSpanPath(
486448
organization,
487449
project,
488450
environment,
489451
{
490-
friendlyId: run.relationships.parent.friendlyId,
452+
friendlyId: run.relationships.root.friendlyId,
491453
},
492-
{ spanId: run.relationships.parent.spanId }
454+
{ spanId: run.relationships.root.spanId }
493455
)}
494456
className="group flex flex-wrap items-center gap-x-1 gap-y-0"
495457
>
496-
{run.relationships.parent.taskIdentifier}
458+
<CopyableText
459+
value={run.relationships.root.taskIdentifier}
460+
copyValue={run.relationships.root.taskIdentifier}
461+
asChild
462+
/>
497463
<span className="break-all text-text-dimmed transition-colors group-hover:text-text-bright/80">
498-
({run.relationships.parent.friendlyId})
464+
<CopyableText
465+
value={run.relationships.root.friendlyId}
466+
copyValue={run.relationships.root.friendlyId}
467+
asChild
468+
/>
499469
</span>
500470
</TextLink>
471+
}
472+
content={`Jump to root/parent run`}
473+
disableHoverableContent
474+
/>
475+
</Property.Value>
476+
</Property.Item>
477+
) : (
478+
<>
479+
<Property.Item>
480+
<Property.Label>Root run</Property.Label>
481+
<Property.Value>
482+
<SimpleTooltip
483+
button={
484+
<TextLink
485+
to={v3RunSpanPath(
486+
organization,
487+
project,
488+
environment,
489+
{
490+
friendlyId: run.relationships.root.friendlyId,
491+
},
492+
{ spanId: run.relationships.root.spanId }
493+
)}
494+
className="group flex flex-wrap items-center gap-x-1 gap-y-0"
495+
>
496+
<CopyableText
497+
value={run.relationships.root.taskIdentifier}
498+
copyValue={run.relationships.root.taskIdentifier}
499+
asChild
500+
/>
501+
<span className="break-all text-text-dimmed transition-colors group-hover:text-text-bright/80">
502+
<CopyableText
503+
value={run.relationships.root.friendlyId}
504+
copyValue={run.relationships.root.friendlyId}
505+
asChild
506+
/>
507+
</span>
508+
</TextLink>
509+
}
510+
content={`Jump to root run`}
511+
disableHoverableContent
512+
/>
513+
</Property.Value>
514+
</Property.Item>
515+
{run.relationships.parent ? (
516+
<Property.Item>
517+
<Property.Label>Parent run</Property.Label>
518+
<Property.Value>
519+
<SimpleTooltip
520+
button={
521+
<TextLink
522+
to={v3RunSpanPath(
523+
organization,
524+
project,
525+
environment,
526+
{
527+
friendlyId: run.relationships.parent.friendlyId,
528+
},
529+
{ spanId: run.relationships.parent.spanId }
530+
)}
531+
className="group flex flex-wrap items-center gap-x-1 gap-y-0"
532+
>
533+
<CopyableText
534+
value={run.relationships.parent.taskIdentifier}
535+
copyValue={run.relationships.parent.taskIdentifier}
536+
asChild
537+
/>
538+
<span className="break-all text-text-dimmed transition-colors group-hover:text-text-bright/80">
539+
<CopyableText
540+
value={run.relationships.parent.friendlyId}
541+
copyValue={run.relationships.parent.friendlyId}
542+
asChild
543+
/>
544+
</span>
545+
</TextLink>
546+
}
547+
content={`Jump to parent run`}
548+
disableHoverableContent
549+
/>
501550
</Property.Value>
502551
</Property.Item>
503552
) : null}
@@ -511,10 +560,15 @@ function RunBody({
511560
<SimpleTooltip
512561
button={
513562
<TextLink to={v3BatchPath(organization, project, environment, run.batch)}>
514-
{run.batch.friendlyId}
563+
<CopyableText
564+
value={run.batch.friendlyId}
565+
copyValue={run.batch.friendlyId}
566+
asChild
567+
/>
515568
</TextLink>
516569
}
517-
content={`Jump to ${run.batch.friendlyId}`}
570+
content={`View batches filtered by ${run.batch.friendlyId}`}
571+
disableHoverableContent
518572
/>
519573
</Property.Value>
520574
</Property.Item>
@@ -540,7 +594,7 @@ function RunBody({
540594
<Property.Value>
541595
{run.version ? (
542596
environment.type === "DEVELOPMENT" ? (
543-
run.version
597+
<CopyableText value={run.version} copyValue={run.version} asChild />
544598
) : (
545599
<SimpleTooltip
546600
button={
@@ -553,7 +607,7 @@ function RunBody({
553607
)}
554608
className="group flex flex-wrap items-center gap-x-1 gap-y-0"
555609
>
556-
{run.version}
610+
<CopyableText value={run.version} copyValue={run.version} asChild />
557611
</TextLink>
558612
}
559613
content={"Jump to deployment"}
@@ -606,13 +660,23 @@ function RunBody({
606660
<Property.Item>
607661
<Property.Label>Replayed from</Property.Label>
608662
<Property.Value>
609-
<TextLink
610-
to={v3RunRedirectPath(organization, project, {
611-
friendlyId: run.replayedFromTaskRunFriendlyId,
612-
})}
613-
>
614-
{run.replayedFromTaskRunFriendlyId}
615-
</TextLink>
663+
<SimpleTooltip
664+
button={
665+
<TextLink
666+
to={v3RunRedirectPath(organization, project, {
667+
friendlyId: run.replayedFromTaskRunFriendlyId,
668+
})}
669+
>
670+
<CopyableText
671+
value={run.replayedFromTaskRunFriendlyId}
672+
copyValue={run.replayedFromTaskRunFriendlyId}
673+
asChild
674+
/>
675+
</TextLink>
676+
}
677+
content={`Jump to replayed run`}
678+
disableHoverableContent
679+
/>
616680
</Property.Value>
617681
</Property.Item>
618682
)}
@@ -747,11 +811,15 @@ function RunBody({
747811
</Property.Item>
748812
<Property.Item>
749813
<Property.Label>Run ID</Property.Label>
750-
<Property.Value>{run.friendlyId}</Property.Value>
814+
<Property.Value>
815+
<CopyableText value={run.friendlyId} copyValue={run.friendlyId} asChild />
816+
</Property.Value>
751817
</Property.Item>
752818
<Property.Item>
753819
<Property.Label>Internal ID</Property.Label>
754-
<Property.Value>{run.id}</Property.Value>
820+
<Property.Value>
821+
<CopyableText value={run.id} copyValue={run.id} asChild />
822+
</Property.Value>
755823
</Property.Item>
756824
<Property.Item>
757825
<Property.Label>Run Engine</Property.Label>

0 commit comments

Comments
 (0)