Skip to content

Commit 50d9d74

Browse files
BrunoQuaresmaBrunoQuaresma
committed
Refactor actions
1 parent 25d986e commit 50d9d74

File tree

1 file changed

+79
-101
lines changed

1 file changed

+79
-101
lines changed

‎site/src/pages/WorkspacesPage/WorkspacesTable.tsx

+79-101
Original file line numberDiff line numberDiff line change
@@ -38,7 +38,12 @@ import { useDashboard } from "modules/dashboard/useDashboard";
3838
import { WorkspaceAppStatus } from "modules/workspaces/WorkspaceAppStatus/WorkspaceAppStatus";
3939
import { WorkspaceDormantBadge } from "modules/workspaces/WorkspaceDormantBadge/WorkspaceDormantBadge";
4040
import { WorkspaceOutdatedTooltip } from "modules/workspaces/WorkspaceOutdatedTooltip/WorkspaceOutdatedTooltip";
41-
import { type FC, type ReactNode, useMemo } from "react";
41+
import {
42+
type FC,
43+
type PropsWithChildren,
44+
type ReactNode,
45+
useMemo,
46+
} from "react";
4247
import { useNavigate } from "react-router-dom";
4348
import { cn } from "utils/cn";
4449
import {
@@ -506,119 +511,92 @@ const WorkspaceActionsCell: FC<WorkspaceActionsCellProps> = ({
506511
return (
507512
<TableCell>
508513
{abilities.actions.includes("start") && (
509-
<TooltipProvider>
510-
<Tooltip>
511-
<TooltipTrigger asChild>
512-
<Button
513-
variant="outline"
514-
size="icon-lg"
515-
onClick={(e) => {
516-
e.stopPropagation();
517-
startWorkspaceMutation.mutate({});
518-
}}
519-
>
520-
<Spinner loading={startWorkspaceMutation.isLoading}>
521-
<PlayIcon />
522-
</Spinner>
523-
<span className="sr-only">Start workspace</span>
524-
</Button>
525-
</TooltipTrigger>
526-
<TooltipContent>Start workspace</TooltipContent>
527-
</Tooltip>
528-
</TooltipProvider>
514+
<PrimaryAction
515+
onClick={() => startWorkspaceMutation.mutate({})}
516+
isLoading={startWorkspaceMutation.isLoading}
517+
label="Start workspace"
518+
>
519+
<PlayIcon />
520+
</PrimaryAction>
529521
)}
530522

531523
{abilities.actions.includes("updateAndStart") && (
532-
<TooltipProvider>
533-
<Tooltip>
534-
<TooltipTrigger asChild>
535-
<Button
536-
variant="outline"
537-
size="icon-lg"
538-
onClick={(e) => {
539-
e.stopPropagation();
540-
updateWorkspaceMutation.mutate(undefined);
541-
}}
542-
>
543-
<Spinner loading={startWorkspaceMutation.isLoading}>
544-
<PlayIcon />
545-
</Spinner>
546-
<span className="sr-only">Update and start workspace</span>
547-
</Button>
548-
</TooltipTrigger>
549-
<TooltipContent>Update and start workspace</TooltipContent>
550-
</Tooltip>
551-
</TooltipProvider>
524+
<PrimaryAction
525+
onClick={() => {
526+
updateWorkspaceMutation.mutate(undefined);
527+
}}
528+
isLoading={updateWorkspaceMutation.isLoading}
529+
label="Update and start workspace"
530+
>
531+
<PlayIcon />
532+
</PrimaryAction>
552533
)}
553534

554535
{abilities.actions.includes("stop") && (
555-
<TooltipProvider>
556-
<Tooltip>
557-
<TooltipTrigger asChild>
558-
<Button
559-
variant="outline"
560-
size="icon-lg"
561-
onClick={(e) => {
562-
e.stopPropagation();
563-
stopWorkspaceMutation.mutate({});
564-
}}
565-
>
566-
<Spinner loading={stopWorkspaceMutation.isLoading}>
567-
<SquareIcon />
568-
</Spinner>
569-
<span className="sr-only">Stop workspace</span>
570-
</Button>
571-
</TooltipTrigger>
572-
<TooltipContent>Stop workspace</TooltipContent>
573-
</Tooltip>
574-
</TooltipProvider>
536+
<PrimaryAction
537+
onClick={() => {
538+
stopWorkspaceMutation.mutate({});
539+
}}
540+
isLoading={stopWorkspaceMutation.isLoading}
541+
label="Stop workspace"
542+
>
543+
<SquareIcon />
544+
</PrimaryAction>
575545
)}
576546

577547
{abilities.canCancel && (
578-
<TooltipProvider>
579-
<Tooltip>
580-
<TooltipTrigger asChild>
581-
<Button
582-
variant="outline"
583-
size="icon-lg"
584-
onClick={(e) => {
585-
e.stopPropagation();
586-
cancelBuildMutation.mutate();
587-
}}
588-
>
589-
<Spinner loading={cancelBuildMutation.isLoading}>
590-
<BanIcon />
591-
</Spinner>
592-
<span className="sr-only">Cancel current job</span>
593-
</Button>
594-
</TooltipTrigger>
595-
<TooltipContent>Cancel current job</TooltipContent>
596-
</Tooltip>
597-
</TooltipProvider>
548+
<PrimaryAction
549+
onClick={cancelBuildMutation.mutate}
550+
isLoading={cancelBuildMutation.isLoading}
551+
label="Cancel build"
552+
>
553+
<BanIcon />
554+
</PrimaryAction>
598555
)}
599556

600557
{abilities.actions.includes("retry") && (
601-
<TooltipProvider>
602-
<Tooltip>
603-
<TooltipTrigger asChild>
604-
<Button
605-
variant="outline"
606-
size="icon-lg"
607-
onClick={(e) => {
608-
e.stopPropagation();
609-
retry();
610-
}}
611-
>
612-
<Spinner loading={isRetrying}>
613-
<RefreshCcwIcon />
614-
</Spinner>
615-
<span className="sr-only">Retry</span>
616-
</Button>
617-
</TooltipTrigger>
618-
<TooltipContent>Retry</TooltipContent>
619-
</Tooltip>
620-
</TooltipProvider>
558+
<PrimaryAction
559+
onClick={retry}
560+
isLoading={isRetrying}
561+
label="Retry build"
562+
>
563+
<RefreshCcwIcon />
564+
</PrimaryAction>
621565
)}
622566
</TableCell>
623567
);
624568
};
569+
570+
type PrimaryActionProps = PropsWithChildren<{
571+
onClick: () => void;
572+
isLoading: boolean;
573+
label: string;
574+
}>;
575+
576+
const PrimaryAction: FC<PrimaryActionProps> = ({
577+
onClick,
578+
isLoading,
579+
label,
580+
children,
581+
}) => {
582+
return (
583+
<TooltipProvider>
584+
<Tooltip>
585+
<TooltipTrigger asChild>
586+
<Button
587+
variant="outline"
588+
size="icon-lg"
589+
onClick={(e) => {
590+
e.stopPropagation();
591+
onClick();
592+
}}
593+
>
594+
<Spinner loading={isLoading}>{children}</Spinner>
595+
<span className="sr-only">{label}</span>
596+
</Button>
597+
</TooltipTrigger>
598+
<TooltipContent>{label}</TooltipContent>
599+
</Tooltip>
600+
</TooltipProvider>
601+
);
602+
};

0 commit comments

Comments
 (0)