Skip to content

Commit 6080265

Browse files
myftijamyftija
committed
Rearrange the test page layout
1 parent 2da2516 commit 6080265

1 file changed

Lines changed: 89 additions & 90 deletions

File tree

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

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

Lines changed: 89 additions & 90 deletions
Original file line numberDiff line numberDiff line change
@@ -330,34 +330,96 @@ function StandardTaskForm({
330330
});
331331

332332
return (
333-
<Form className="grid h-full max-h-full grid-rows-[1fr_auto]" method="post" {...form.props}>
333+
<Form className="flex h-full max-h-full flex-col" method="post" {...form.props}>
334334
<input {...conform.input(taskIdentifier, { type: "hidden" })} value={task.taskIdentifier} />
335335
<input {...conform.input(environmentId, { type: "hidden" })} value={environment.id} />
336336
<input {...conform.input(triggerSource, { type: "hidden" })} value={"STANDARD"} />
337+
<TabContainer className="flex items-baseline justify-between pl-3 pr-2 pt-1.5">
338+
<div className="flex gap-5">
339+
<TabButton
340+
isActive={!tab || tab === "payload"}
341+
layoutId="test-editor"
342+
onClick={() => {
343+
replace({ tab: "payload" });
344+
}}
345+
>
346+
Payload
347+
</TabButton>
348+
349+
<TabButton
350+
isActive={tab === "metadata"}
351+
layoutId="test-editor"
352+
onClick={() => {
353+
replace({ tab: "metadata" });
354+
}}
355+
>
356+
Metadata
357+
</TabButton>
358+
</div>
359+
<div className="flex items-center gap-3">
360+
<Popover open={isRecentRunsPopoverOpen} onOpenChange={setIsRecentRunsPopoverOpen}>
361+
<PopoverTrigger asChild>
362+
{runs.length === 0 ? (
363+
<SimpleTooltip
364+
button={
365+
<Button
366+
type="button"
367+
variant="tertiary/small"
368+
LeadingIcon={ClockIcon}
369+
disabled={true}
370+
>
371+
Recent runs
372+
</Button>
373+
}
374+
content="No runs yet"
375+
/>
376+
) : (
377+
<Button type="button" variant="tertiary/small" LeadingIcon={ClockIcon}>
378+
Recent runs
379+
</Button>
380+
)}
381+
</PopoverTrigger>
382+
<PopoverContent className="min-w-[279px] p-0" align="end" sideOffset={6}>
383+
<div className="max-h-80 overflow-y-auto">
384+
<div className="p-1">
385+
{runs.map((run) => (
386+
<button
387+
key={run.id}
388+
type="button"
389+
onClick={() => {
390+
setPayload(run.payload);
391+
run.seedMetadata && setMetadata(run.seedMetadata);
392+
setSelectedCodeSampleId(run.id);
393+
setIsRecentRunsPopoverOpen(false);
394+
setTtlValue(run.ttlSeconds);
395+
setConcurrencyKeyValue(run.concurrencyKey);
396+
setMaxAttemptsValue(run.maxAttempts);
397+
setMaxDurationValue(run.maxDurationInSeconds);
398+
setTagsValue(run.runTags ?? []);
399+
setQueueValue(run.queue);
400+
}}
401+
className="flex w-full items-center gap-2 rounded-sm px-2 py-2 outline-none transition-colors focus-custom hover:bg-charcoal-900 "
402+
>
403+
<div className="flex flex-col items-start">
404+
<Paragraph variant="small">
405+
<DateTime date={run.createdAt} showTooltip={false} />
406+
</Paragraph>
407+
<div className="flex items-center gap-1 text-xs text-text-dimmed">
408+
<div>Run #{run.number}</div>
409+
<TaskRunStatusCombo status={run.status} />
410+
</div>
411+
</div>
412+
</button>
413+
))}
414+
</div>
415+
</div>
416+
</PopoverContent>
417+
</Popover>
418+
</div>
419+
</TabContainer>
337420
<ResizablePanelGroup orientation="horizontal">
338-
<ResizablePanel id="test-task-main" min="100px" default="60%">
421+
<ResizablePanel id="test-task-main" min="300px">
339422
<div className="flex h-full flex-col overflow-hidden bg-charcoal-900">
340-
<TabContainer className="px-3 pt-2">
341-
<TabButton
342-
isActive={!tab || tab === "payload"}
343-
layoutId="test-editor"
344-
onClick={() => {
345-
replace({ tab: "payload" });
346-
}}
347-
>
348-
Payload
349-
</TabButton>
350-
351-
<TabButton
352-
isActive={tab === "metadata"}
353-
layoutId="test-editor"
354-
onClick={() => {
355-
replace({ tab: "metadata" });
356-
}}
357-
>
358-
Metadata
359-
</TabButton>
360-
</TabContainer>
361423
<div className="flex-1 overflow-hidden">
362424
<JSONEditor
363425
defaultValue={defaultPayloadJson}
@@ -402,12 +464,9 @@ function StandardTaskForm({
402464
</div>
403465
</ResizablePanel>
404466
<ResizableHandle id="test-task-handle" />
405-
<ResizablePanel id="test-task-options" min="200px">
406-
<div className="flex h-full flex-col gap-2">
407-
<div className="flex min-h-[39px] items-center border-b border-grid-dimmed px-3">
408-
<Header2>Options</Header2>
409-
</div>
410-
<Fieldset className="grow overflow-y-scroll px-3 pb-4 pt-1">
467+
<ResizablePanel id="test-task-options" min="285px" default="285px" max="360px">
468+
<div className="h-full">
469+
<Fieldset className="grow overflow-y-scroll px-3 py-3">
411470
<InputGroup>
412471
<Label>Delay</Label>
413472
<DurationPicker name={delaySeconds.name} id={delaySeconds.id} />
@@ -557,67 +616,7 @@ function StandardTaskForm({
557616
</div>
558617
</ResizablePanel>
559618
</ResizablePanelGroup>
560-
<div className="flex items-center justify-between gap-3 border-t border-grid-bright bg-background-dimmed p-2">
561-
<div>
562-
<Popover open={isRecentRunsPopoverOpen} onOpenChange={setIsRecentRunsPopoverOpen}>
563-
<PopoverTrigger asChild>
564-
{runs.length === 0 ? (
565-
<SimpleTooltip
566-
button={
567-
<Button
568-
type="button"
569-
variant="tertiary/medium"
570-
LeadingIcon={ClockIcon}
571-
disabled={true}
572-
>
573-
Recent runs
574-
</Button>
575-
}
576-
content="No runs yet"
577-
/>
578-
) : (
579-
<Button type="button" variant="tertiary/medium" LeadingIcon={ClockIcon}>
580-
Recent runs
581-
</Button>
582-
)}
583-
</PopoverTrigger>
584-
<PopoverContent className="min-w-72 p-0" align="start">
585-
<div className="max-h-80 overflow-y-auto">
586-
<div className="p-1">
587-
{runs.map((run) => (
588-
<button
589-
key={run.id}
590-
type="button"
591-
onClick={() => {
592-
setPayload(run.payload);
593-
run.seedMetadata && setMetadata(run.seedMetadata);
594-
setSelectedCodeSampleId(run.id);
595-
setIsRecentRunsPopoverOpen(false);
596-
setTtlValue(run.ttlSeconds);
597-
setConcurrencyKeyValue(run.concurrencyKey);
598-
setMaxAttemptsValue(run.maxAttempts);
599-
setMaxDurationValue(run.maxDurationInSeconds);
600-
setTagsValue(run.runTags ?? []);
601-
setQueueValue(run.queue);
602-
}}
603-
className="flex w-full items-center gap-2 rounded-sm px-2 py-2 outline-none transition-colors focus-custom hover:bg-charcoal-900 "
604-
>
605-
<div className="flex flex-col items-start">
606-
<Paragraph variant="small">
607-
<DateTime date={run.createdAt} showTooltip={false} />
608-
</Paragraph>
609-
<div className="flex items-center gap-1 text-xs text-text-dimmed">
610-
<div>Run #{run.number}</div>
611-
<TaskRunStatusCombo status={run.status} />
612-
</div>
613-
</div>
614-
</button>
615-
))}
616-
</div>
617-
</div>
618-
</PopoverContent>
619-
</Popover>
620-
</div>
619+
<div className="flex items-center justify-end gap-3 border-t border-grid-bright bg-background-dimmed p-2">
621620
<div className="flex items-center gap-3">
622621
<div className="flex items-center gap-1">
623622
<Paragraph variant="small" className="whitespace-nowrap">

0 commit comments

Comments
 (0)