feat: add stop workspace button with confirmation dialog (#18372)

Co-authored-by: blink-so[bot] <211532188+blink-so[bot]@users.noreply.github.com>
Co-authored-by: matifali <10648092+matifali@users.noreply.github.com>

site/src/pages/WorkspacesPage/WorkspacesTable.tsx

@@ -18,6 +18,7 @@ import { Avatar } from "components/Avatar/Avatar";
 import { AvatarData } from "components/Avatar/AvatarData";
 import { AvatarDataSkeleton } from "components/Avatar/AvatarDataSkeleton";
 import { Button } from "components/Button/Button";
+import { ConfirmDialog } from "components/Dialogs/ConfirmDialog/ConfirmDialog";
 import { ExternalImage } from "components/ExternalImage/ExternalImage";
 import { VSCodeIcon } from "components/Icons/VSCodeIcon";
 import { VSCodeInsidersIcon } from "components/Icons/VSCodeInsidersIcon";
@@ -49,6 +50,7 @@ import {
 	BanIcon,
 	PlayIcon,
 	RefreshCcwIcon,
+	SquareIcon,
 	SquareTerminalIcon,
 } from "lucide-react";
 import {
@@ -74,6 +76,7 @@ import {
 	type PropsWithChildren,
 	type ReactNode,
 	useMemo,
+	useState,
 } from "react";
 import { useMutation, useQuery, useQueryClient } from "react-query";
 import { useNavigate } from "react-router-dom";
@@ -491,6 +494,9 @@ const WorkspaceActionsCell: FC<WorkspaceActionsCellProps> = ({
 		onError: onActionError,
 	});
 
+	// State for stop confirmation dialog
+	const [isStopConfirmOpen, setIsStopConfirmOpen] = useState(false);
+
 	const isRetrying =
 		startWorkspaceMutation.isPending ||
 		stopWorkspaceMutation.isPending ||
@@ -535,6 +541,16 @@ const WorkspaceActionsCell: FC<WorkspaceActionsCellProps> = ({
 					</PrimaryAction>
 				)}
 
+				{abilities.actions.includes("stop") && (
+					<PrimaryAction
+						onClick={() => setIsStopConfirmOpen(true)}
+						isLoading={stopWorkspaceMutation.isPending}
+						label="Stop workspace"
+					>
+						<SquareIcon />
+					</PrimaryAction>
+				)}
+
 				{abilities.actions.includes("updateAndStart") && (
 					<>
 						<PrimaryAction
@@ -573,6 +589,20 @@ const WorkspaceActionsCell: FC<WorkspaceActionsCellProps> = ({
 					disabled={!abilities.canAcceptJobs}
 				/>
 			</div>
+
+			{/* Stop workspace confirmation dialog */}
+			<ConfirmDialog
+				open={isStopConfirmOpen}
+				title="Stop workspace"
+				description={`Are you sure you want to stop the workspace "${workspace.name}"? This will terminate all running processes and disconnect any active sessions.`}
+				confirmText="Stop"
+				onClose={() => setIsStopConfirmOpen(false)}
+				onConfirm={() => {
+					stopWorkspaceMutation.mutate({});
+					setIsStopConfirmOpen(false);
+				}}
+				type="delete"
+			/>
 		</TableCell>
 	);
 };
@@ -593,7 +623,12 @@ const PrimaryAction: FC<PrimaryActionProps> = ({
 		<TooltipProvider>
 			<Tooltip>
 				<TooltipTrigger asChild>
-					<Button variant="outline" size="icon-lg" onClick={onClick}>
+					<Button
+						variant="outline"
+						size="icon-lg"
+						onClick={onClick}
+						disabled={isLoading}
+					>
 						<Spinner loading={isLoading}>{children}</Spinner>
 						<span className="sr-only">{label}</span>
 					</Button>