feat: add stop workspace button with confirmation dialog

blink-so[bot] · matifali · blink-so[bot] · commit 8e10cf7887d4 · 2025-06-13T20:07:41.000Z
- Add stop workspace button with square icon that replaces start button for running workspaces - Implement confirmation dialog for stop operation to prevent accidental stops - Button shows only when workspace status allows stop action - Uses existing stopWorkspace API mutation - Follows existing UI patterns for workspace actions Fixes #18298 Co-authored-by: matifali <10648092+matifali@users.noreply.github.com>
diff --git a/site/src/pages/WorkspacesPage/WorkspacesTable.tsx b/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,21 @@ 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"
+				loading={stopWorkspaceMutation.isPending}
+			/>
 		</TableCell>
 	);
 };
