add restarting btn

coder · Kira-Pilot · Apr 28, 2023 · Apr 14, 2023 · Apr 25, 2023 · Apr 26, 2023
commit 2e2b89da760287733648dcd4a10f4c07ff23504c
diff --git a/site/src/components/Workspace/Workspace.tsx b/site/src/components/Workspace/Workspace.tsx
@@ -41,13 +41,14 @@ export interface WorkspaceProps {
   }
   handleStart: () => void
   handleStop: () => void
-  handleRestart: any
+  handleRestart: () => void
   handleDelete: () => void
   handleUpdate: () => void
   handleCancel: () => void
   handleSettings: () => void
   handleChangeVersion: () => void
   isUpdating: boolean
+  isRestarting: boolean
   workspace: TypesGen.Workspace
   resources?: TypesGen.WorkspaceResource[]
   builds?: TypesGen.WorkspaceBuild[]
@@ -81,6 +82,7 @@ export const Workspace: FC<React.PropsWithChildren<WorkspaceProps>> = ({
   handleChangeVersion,
   workspace,
   isUpdating,
+  isRestarting,
   resources,
   builds,
   canUpdateWorkspace,
@@ -142,6 +144,7 @@ export const Workspace: FC<React.PropsWithChildren<WorkspaceProps>> = ({
               handleChangeVersion={handleChangeVersion}
               canChangeVersions={canChangeVersions}
               isUpdating={isUpdating}
+              isRestarting={isRestarting}
             />
           </Stack>
         }

diff --git a/site/src/components/WorkspaceActions/Buttons.tsx b/site/src/components/WorkspaceActions/Buttons.tsx
@@ -8,8 +8,6 @@ import { LoadingButton } from "components/LoadingButton/LoadingButton"
 import { FC, PropsWithChildren } from "react"
 import { useTranslation } from "react-i18next"
 import { makeStyles } from "@material-ui/core/styles"
-// import { UseMutateFunction } from "@tanstack/react-query"
-// import { WorkspaceBuild } from "api/typesGenerated"
 
 interface WorkspaceAction {
   handleAction: () => void
@@ -69,7 +67,9 @@ export const StopButton: FC<PropsWithChildren<WorkspaceAction>> = ({
   )
 }
 
-export const RestartButton: FC<PropsWithChildren<any>> = ({ handleAction }) => {
+export const RestartButton: FC<PropsWithChildren<WorkspaceAction>> = ({
+  handleAction,
+}) => {
   const { t } = useTranslation("workspacePage")
   const styles = useStyles()
 

diff --git a/site/src/components/WorkspaceActions/WorkspaceActions.tsx b/site/src/components/WorkspaceActions/WorkspaceActions.tsx
@@ -29,13 +29,14 @@ export interface WorkspaceActionsProps {
   isOutdated: boolean
   handleStart: () => void
   handleStop: () => void
-  handleRestart: any
+  handleRestart: () => void
   handleDelete: () => void
   handleUpdate: () => void
   handleCancel: () => void
   handleSettings: () => void
   handleChangeVersion: () => void
   isUpdating: boolean
+  isRestarting: boolean
   children?: ReactNode
   canChangeVersions: boolean
 }
@@ -52,6 +53,7 @@ export const WorkspaceActions: FC<WorkspaceActionsProps> = ({
   handleSettings,
   handleChangeVersion,
   isUpdating,
+  isRestarting,
   canChangeVersions,
 }) => {
   const styles = useStyles()
@@ -95,6 +97,12 @@ export const WorkspaceActions: FC<WorkspaceActionsProps> = ({
       />
     ),
     [ButtonTypesEnum.restart]: <RestartButton handleAction={handleRestart} />,
+    [ButtonTypesEnum.restarting]: (
+      <ActionLoadingButton
+        label="Restarting"
+        key={ButtonTypesEnum.restarting}
+      />
+    ),
     [ButtonTypesEnum.deleting]: (
       <ActionLoadingButton
         label={t("actionButton.deleting")}
@@ -133,9 +141,11 @@ export const WorkspaceActions: FC<WorkspaceActionsProps> = ({
         (isUpdating
           ? buttonMapping[ButtonTypesEnum.updating]
           : buttonMapping[ButtonTypesEnum.update])}
-      {actionsByStatus.map((action) => (
-        <span key={action}>{buttonMapping[action]}</span>
-      ))}
+      {isRestarting && buttonMapping[ButtonTypesEnum.restarting]}
+      {!isRestarting &&
+        actionsByStatus.map((action) => (
+          <span key={action}>{buttonMapping[action]}</span>
+        ))}
       {canCancel && <CancelButton handleAction={handleCancel} />}
       <div>
         <Button

diff --git a/site/src/components/WorkspaceActions/constants.ts b/site/src/components/WorkspaceActions/constants.ts
@@ -8,6 +8,7 @@ export enum ButtonTypesEnum {
   stop = "stop",
   stopping = "stopping",
   restart = "restart",
+  restarting = "restarting",
   deleting = "deleting",
   update = "update",
   updating = "updating",

diff --git a/site/src/pages/WorkspacePage/WorkspaceReadyPage.tsx b/site/src/pages/WorkspacePage/WorkspaceReadyPage.tsx
@@ -82,7 +82,12 @@ export const WorkspaceReadyPage = ({
     Error | unknown | undefined
   >(undefined)
 
-  const { mutate: restartWorkspace } = useRestartWorkspace(setRestartBuildError)
+  const [isRestarting, setIsRestarting] = useState<boolean>(false)
+
+  const { mutate: restartWorkspace } = useRestartWorkspace(
+    setRestartBuildError,
+    setIsRestarting,
+  )
 
   // keep banner machine in sync with workspace
   useEffect(() => {
@@ -127,6 +132,7 @@ export const WorkspaceReadyPage = ({
           ),
         }}
         isUpdating={workspaceState.matches("ready.build.requestingUpdate")}
+        isRestarting={isRestarting}
         workspace={workspace}
         handleStart={() => workspaceSend({ type: "START" })}
         handleStop={() => workspaceSend({ type: "STOP" })}

diff --git a/site/src/pages/WorkspacePage/hooks.ts b/site/src/pages/WorkspacePage/hooks.ts
@@ -7,7 +7,7 @@ import { delay } from "utils/delay"
 import { ProvisionerJob, WorkspaceBuild } from "api/typesGenerated"
 import { useMutation } from "@tanstack/react-query"
 
-export function waitForStop(build: WorkspaceBuild) {
+export function waitForBuild(build: WorkspaceBuild) {
   return new Promise((res, reject) => {
     void (async () => {
       let latestJobInfo: ProvisionerJob | undefined = undefined
@@ -40,22 +40,28 @@ export function waitForStop(build: WorkspaceBuild) {
 }
 
 export const useRestartWorkspace = (
-  setRestartBuildError: (arg: Error | unknown | undefined) => void,
+  setBuildError: (arg: Error | unknown | undefined) => void,
+  setLoading: (arg: boolean) => void,
 ) => {
   return useMutation({
     mutationFn: stopWorkspace,
-    onSuccess: async (data) => {
+    onMutate: () => setLoading(true),
+    onSuccess: async (data: WorkspaceBuild) => {
       try {
-        await waitForStop(data)
-        await startWorkspace({
+        await waitForBuild(data)
+        const startBuild = await startWorkspace({
           workspaceId: data.workspace_id,
           templateVersionId: data.template_version_id,
         })
+        await waitForBuild(startBuild)
+
+        setLoading(false)
       } catch (error) {
         if ((error as WorkspaceBuild).status === "canceled") {
           return
         }
-        setRestartBuildError(error)
+        setBuildError(error)
+        setLoading(false)
       }
     },
   })