Skip to content

Commit c05f60b

Browse files
samejrsamejr
committed
Right align the columns and fix the dropdown menu item styles
1 parent 5993ea1 commit c05f60b

1 file changed

Lines changed: 64 additions & 66 deletions

File tree

  • apps/webapp/app/routes/_app.orgs.$organizationSlug.projects.$projectParam.env.$envParam.queues

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

Lines changed: 64 additions & 66 deletions
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,5 @@
11
import {
2+
AdjustmentsHorizontalIcon,
23
ArrowUpCircleIcon,
34
BookOpenIcon,
45
ChatBubbleLeftEllipsisIcon,
@@ -71,6 +72,7 @@ import { useThrottle } from "~/hooks/useThrottle";
7172
import { RunsIcon } from "~/assets/icons/RunsIcon";
7273
import { useAutoRevalidate } from "~/hooks/useAutoRevalidate";
7374
import { env } from "~/env.server";
75+
import { PopoverMenuItem } from "~/components/primitives/Popover";
7476

7577
const SearchParamsSchema = z.object({
7678
query: z.string().optional(),
@@ -475,7 +477,7 @@ export default function Page() {
475477
</Paragraph>
476478
</div>
477479
<div className="space-y-0.5">
478-
<Header3>Overridden</Header3>
480+
<Header3>Override</Header3>
479481
<Paragraph
480482
variant="small"
481483
className="!text-wrap text-text-dimmed"
@@ -549,14 +551,17 @@ export default function Page() {
549551
</TableCell>
550552
<TableCell
551553
alignment="right"
552-
className={queue.paused ? "opacity-50" : undefined}
554+
className={cn(
555+
"w-[1%] tabular-nums",
556+
queue.paused ? "opacity-50" : undefined
557+
)}
553558
>
554559
{queue.queued}
555560
</TableCell>
556561
<TableCell
557562
alignment="right"
558563
className={cn(
559-
"tabular-nums",
564+
"w-[1%] tabular-nums",
560565
queue.paused ? "opacity-50" : undefined,
561566
queue.running > 0 && "text-text-bright",
562567
isAtLimit && "text-warning"
@@ -567,26 +572,32 @@ export default function Page() {
567572
<TableCell
568573
alignment="right"
569574
className={cn(
570-
"tabular-nums",
575+
"w-[1%] tabular-nums",
571576
queue.paused ? "opacity-50" : undefined,
572-
queue.concurrency?.overriddenAt && "text-indigo-500"
577+
queue.concurrency?.overriddenAt && "font-medium text-text-bright"
573578
)}
574579
>
575580
{limit}
576581
</TableCell>
577582
<TableCell
578583
alignment="right"
579584
className={cn(
585+
"w-[1%]",
580586
queue.paused ? "opacity-50" : undefined,
581587
isAtLimit && "text-warning",
582-
queue.concurrency?.overriddenAt && "text-indigo-500"
588+
queue.concurrency?.overriddenAt && "font-medium text-text-bright"
583589
)}
584590
>
585-
{queue.concurrency?.overriddenAt
586-
? "Overridden"
587-
: queue.concurrencyLimit
588-
? "User"
589-
: "Environment"}
591+
{queue.concurrency?.overriddenAt ? (
592+
<div className="flex items-center justify-end gap-1">
593+
<AdjustmentsHorizontalIcon className="size-3.5 text-text-dimmed" />
594+
Override
595+
</div>
596+
) : queue.concurrencyLimit ? (
597+
"User"
598+
) : (
599+
"Environment"
600+
)}
590601
</TableCell>
591602
<TableCellMenu
592603
isSticky
@@ -613,55 +624,44 @@ export default function Page() {
613624
showTooltip={false}
614625
/>
615626
)}
616-
<QueueOverrideConcurrencyButton
617-
queue={queue}
618-
environmentConcurrencyLimit={environment.concurrencyLimit}
619-
fullWidth
620-
/>
621-
<LinkButton
622-
variant="minimal/small"
627+
628+
<PopoverMenuItem
629+
icon={RunsIcon}
630+
leadingIconClassName="text-runs"
631+
title="View all runs"
623632
to={v3RunsPath(organization, project, env, {
624633
queues: [queueFilterableName],
625634
period: "30d",
626635
rootOnly: false,
627636
})}
628-
fullWidth
629-
textAlignLeft
630-
LeadingIcon={RunsIcon}
631-
leadingIconClassName="text-indigo-500"
632-
>
633-
View all runs
634-
</LinkButton>
635-
<LinkButton
636-
variant="minimal/small"
637+
/>
638+
<PopoverMenuItem
639+
icon={RectangleStackIcon}
640+
leadingIconClassName="text-queues"
641+
title="View queued runs"
637642
to={v3RunsPath(organization, project, env, {
638643
queues: [queueFilterableName],
639644
statuses: ["PENDING"],
640645
period: "30d",
641646
rootOnly: false,
642647
})}
643-
fullWidth
644-
textAlignLeft
645-
LeadingIcon={RectangleStackIcon}
648+
/>
649+
<PopoverMenuItem
650+
icon={RectangleStackIcon}
646651
leadingIconClassName="text-queues"
647-
>
648-
View queued runs
649-
</LinkButton>
650-
<LinkButton
651-
variant="minimal/small"
652+
title="View running runs"
652653
to={v3RunsPath(organization, project, env, {
653654
queues: [queueFilterableName],
654655
statuses: ["DEQUEUED", "EXECUTING"],
655656
period: "30d",
656657
rootOnly: false,
657658
})}
659+
/>
660+
<QueueOverrideConcurrencyButton
661+
queue={queue}
662+
environmentConcurrencyLimit={environment.concurrencyLimit}
658663
fullWidth
659-
textAlignLeft
660-
LeadingIcon={Spinner}
661-
leadingIconClassName="size-4 animate-none"
662-
>
663-
View running runs
664-
</LinkButton>
664+
/>
665665
</>
666666
}
667667
/>
@@ -827,29 +827,26 @@ function QueuePauseResumeButton({
827827
fullWidth?: boolean;
828828
showTooltip?: boolean;
829829
}) {
830-
const navigation = useNavigation();
831830
const [isOpen, setIsOpen] = useState(false);
832831

833-
const button = (
834-
<Button
835-
type="button"
836-
variant={variant}
837-
LeadingIcon={queue.paused ? PlayIcon : PauseIcon}
838-
leadingIconClassName={queue.paused ? "text-success" : "text-warning"}
839-
fullWidth={fullWidth}
840-
textAlignLeft={fullWidth}
841-
>
842-
{queue.paused ? "Resume..." : "Pause..."}
843-
</Button>
844-
);
845-
846832
const trigger = showTooltip ? (
847833
<div>
848834
<TooltipProvider disableHoverableContent={true}>
849835
<Tooltip>
850836
<TooltipTrigger asChild>
851837
<div>
852-
<DialogTrigger asChild>{button}</DialogTrigger>
838+
<DialogTrigger asChild>
839+
<Button
840+
type="button"
841+
variant={variant}
842+
LeadingIcon={queue.paused ? PlayIcon : PauseIcon}
843+
leadingIconClassName={queue.paused ? "text-success" : "text-warning"}
844+
fullWidth={fullWidth}
845+
textAlignLeft={fullWidth}
846+
>
847+
{queue.paused ? "Resume..." : "Pause..."}
848+
</Button>
849+
</DialogTrigger>
853850
</div>
854851
</TooltipTrigger>
855852
<TooltipContent side="right" className={"text-xs"}>
@@ -861,7 +858,13 @@ function QueuePauseResumeButton({
861858
</TooltipProvider>
862859
</div>
863860
) : (
864-
<DialogTrigger asChild>{button}</DialogTrigger>
861+
<DialogTrigger asChild>
862+
<PopoverMenuItem
863+
icon={queue.paused ? PlayIcon : PauseIcon}
864+
leadingIconClassName={queue.paused ? "text-success" : "text-warning"}
865+
title={queue.paused ? "Resume..." : "Pause..."}
866+
/>
867+
</DialogTrigger>
865868
);
866869

867870
return (
@@ -947,15 +950,10 @@ function QueueOverrideConcurrencyButton({
947950
return (
948951
<Dialog open={isOpen} onOpenChange={setIsOpen}>
949952
<DialogTrigger asChild>
950-
<Button
951-
type="button"
952-
variant={variant}
953-
LeadingIcon={WrenchScrewdriverIcon}
954-
fullWidth={fullWidth}
955-
textAlignLeft={fullWidth}
956-
>
957-
{isOverridden ? "Edit override…" : "Override limit…"}
958-
</Button>
953+
<PopoverMenuItem
954+
icon={AdjustmentsHorizontalIcon}
955+
title={isOverridden ? "Edit override…" : "Override limit…"}
956+
/>
959957
</DialogTrigger>
960958
<DialogContent>
961959
<DialogHeader>

0 commit comments

Comments
 (0)