@@ -18,6 +18,7 @@ import { Avatar } from "components/Avatar/Avatar";
1818import { AvatarData } from "components/Avatar/AvatarData" ;
1919import { AvatarDataSkeleton } from "components/Avatar/AvatarDataSkeleton" ;
2020import { Button } from "components/Button/Button" ;
21+ import { ConfirmDialog } from "components/Dialogs/ConfirmDialog/ConfirmDialog" ;
2122import { ExternalImage } from "components/ExternalImage/ExternalImage" ;
2223import { VSCodeIcon } from "components/Icons/VSCodeIcon" ;
2324import { VSCodeInsidersIcon } from "components/Icons/VSCodeInsidersIcon" ;
@@ -49,6 +50,7 @@ import {
4950BanIcon ,
5051PlayIcon ,
5152RefreshCcwIcon ,
53+ SquareIcon ,
5254SquareTerminalIcon ,
5355} from "lucide-react" ;
5456import {
@@ -74,6 +76,7 @@ import {
7476type PropsWithChildren ,
7577type ReactNode ,
7678useMemo ,
79+ useState ,
7780} from "react" ;
7881import { useMutation , useQuery , useQueryClient } from "react-query" ;
7982import { useNavigate } from "react-router-dom" ;
@@ -491,6 +494,9 @@ const WorkspaceActionsCell: FC<WorkspaceActionsCellProps> = ({
491494onError :onActionError ,
492495} ) ;
493496
497+ // State for stop confirmation dialog
498+ const [ isStopConfirmOpen , setIsStopConfirmOpen ] = useState ( false ) ;
499+
494500const isRetrying =
495501startWorkspaceMutation . isPending ||
496502stopWorkspaceMutation . isPending ||
@@ -535,6 +541,16 @@ const WorkspaceActionsCell: FC<WorkspaceActionsCellProps> = ({
535541</ PrimaryAction >
536542) }
537543
544+ { abilities . actions . includes ( "stop" ) && (
545+ < PrimaryAction
546+ onClick = { ( ) => setIsStopConfirmOpen ( true ) }
547+ isLoading = { stopWorkspaceMutation . isPending }
548+ label = "Stop workspace"
549+ >
550+ < SquareIcon />
551+ </ PrimaryAction >
552+ ) }
553+
538554{ abilities . actions . includes ( "updateAndStart" ) && (
539555< >
540556< PrimaryAction
@@ -573,6 +589,20 @@ const WorkspaceActionsCell: FC<WorkspaceActionsCellProps> = ({
573589disabled = { ! abilities . canAcceptJobs }
574590/>
575591</ div >
592+
593+ { /* Stop workspace confirmation dialog */ }
594+ < ConfirmDialog
595+ open = { isStopConfirmOpen }
596+ title = "Stop workspace"
597+ description = { `Are you sure you want to stop the workspace "${ workspace . name } }
598+ confirmText = "Stop"
599+ onClose = { ( ) => setIsStopConfirmOpen ( false ) }
600+ onConfirm = { ( ) => {
601+ stopWorkspaceMutation . mutate ( { } ) ;
602+ setIsStopConfirmOpen ( false ) ;
603+ } }
604+ type = "delete"
605+ />
576606</ TableCell >
577607) ;
578608} ;
@@ -593,7 +623,12 @@ const PrimaryAction: FC<PrimaryActionProps> = ({
593623< TooltipProvider >
594624< Tooltip >
595625< TooltipTrigger asChild >
596- < Button variant = "outline" size = "icon-lg" onClick = { onClick } >
626+ < Button
627+ variant = "outline"
628+ size = "icon-lg"
629+ onClick = { onClick }
630+ disabled = { isLoading }
631+ >
597632< Spinner loading = { isLoading } > { children } </ Spinner >
598633< span className = "sr-only" > { label } </ span >
599634</ Button >