Render cancel

Changes behavior of other buttons too
coder · presleyp · May 25, 2022 · May 23, 2022 · May 24, 2022 · May 24, 2022
commit 5b5219e131e467900fa9c34ba1cf6bd8c3daabbd
@@ -16,6 +16,7 @@ export interface WorkspaceProps {
   handleStop: () => void
   handleRetry: () => void
   handleUpdate: () => void
+  handleCancel: () => void
   workspace: TypesGen.Workspace
   resources?: TypesGen.WorkspaceResource[]
   getResourcesError?: Error
@@ -30,6 +31,7 @@ export const Workspace: React.FC<WorkspaceProps> = ({
   handleStop,
   handleRetry,
   handleUpdate,
+  handleCancel,
   workspace,
   resources,
   getResourcesError,
@@ -57,6 +59,7 @@ export const Workspace: React.FC<WorkspaceProps> = ({
             handleStop={handleStop}
             handleRetry={handleRetry}
             handleUpdate={handleUpdate}
+            handleCancel={handleCancel}
           />
         </div>
       </div>

@@ -5,8 +5,8 @@ import React from "react"
 
 export interface WorkspaceActionButtonProps {
   label: string
-  loadingLabel: string
-  isLoading: boolean
+  loadingLabel?: string
+  isLoading?: boolean
   icon: JSX.Element
   onClick: () => void
   className?: string

@@ -5,6 +5,7 @@ import CloudDownloadIcon from "@material-ui/icons/CloudDownload"
 import PlayArrowRoundedIcon from "@material-ui/icons/PlayArrowRounded"
 import ReplayIcon from "@material-ui/icons/Replay"
 import StopIcon from "@material-ui/icons/Stop"
+import CancelIcon from "@material-ui/icons/Cancel"
 import React from "react"
 import { Link as RouterLink } from "react-router-dom"
 import { Workspace } from "../../api/typesGenerated"
@@ -18,6 +19,7 @@ export const Language = {
   start: "Start workspace",
   starting: "Starting workspace",
   retry: "Retry",
+  cancel: "Cancel action",
   update: "Update workspace",
 }
 
@@ -28,12 +30,27 @@ export const Language = {
 const canAcceptJobs = (workspaceStatus: WorkspaceStatus) =>
   ["started", "stopped", "deleted", "error", "canceled"].includes(workspaceStatus)
 
+/**
+ *  Jobs that are in progress (queued or pending) can be canceled.
+ * @param workspaceStatus WorkspaceStatus
+ * @returns boolean
+ */
+const canCancelJobs = (workspaceStatus: WorkspaceStatus) =>
+  ["starting", "stopping", "deleting"].includes(workspaceStatus)
+
+const canStart = (workspaceStatus: WorkspaceStatus) =>
+  ["stopped", "canceled", "error"].includes(workspaceStatus)
+
+const canStop = (workspaceStatus: WorkspaceStatus) =>
+  ["started", "canceled", "error"].includes(workspaceStatus)
+
 export interface WorkspaceActionsProps {
   workspace: Workspace
   handleStart: () => void
   handleStop: () => void
   handleRetry: () => void
   handleUpdate: () => void
+  handleCancel: () => void
 }
 
 export const WorkspaceActions: React.FC<WorkspaceActionsProps> = ({
@@ -42,6 +59,7 @@ export const WorkspaceActions: React.FC<WorkspaceActionsProps> = ({
   handleStop,
   handleRetry,
   handleUpdate,
+  handleCancel
 }) => {
   const styles = useStyles()
   const workspaceStatus = getWorkspaceStatus(workspace.latest_build)
@@ -51,7 +69,17 @@ export const WorkspaceActions: React.FC<WorkspaceActionsProps> = ({
       <Link underline="none" component={RouterLink} to="edit">
         <Button variant="outlined">Settings</Button>
       </Link>
-      {(workspaceStatus === "started" || workspaceStatus === "stopping") && (
+      {canStart(workspaceStatus) && (
+        <WorkspaceActionButton
+          className={styles.actionButton}
+          icon={<PlayArrowRoundedIcon />}
+          onClick={handleStart}
+          label={Language.start}
+          loadingLabel={Language.starting}
+          isLoading={workspaceStatus === "starting"}
+        />
+      )}
+      {canStop(workspaceStatus) && (
         <WorkspaceActionButton
           className={styles.actionButton}
           icon={<StopIcon />}
@@ -61,21 +89,14 @@ export const WorkspaceActions: React.FC<WorkspaceActionsProps> = ({
           isLoading={workspaceStatus === "stopping"}
         />
       )}
-      {(workspaceStatus === "stopped" || workspaceStatus === "starting") && (
+      {canCancelJobs(workspaceStatus) &&
         <WorkspaceActionButton
           className={styles.actionButton}
-          icon={<PlayArrowRoundedIcon />}
-          onClick={handleStart}
-          label={Language.start}
-          loadingLabel={Language.starting}
-          isLoading={workspaceStatus === "starting"}
+          icon={<CancelIcon />}
+          onClick={handleCancel}
+          label={Language.cancel}
         />
-      )}
-      {workspaceStatus === "error" && (
-        <Button className={styles.actionButton} startIcon={<ReplayIcon />} onClick={handleRetry}>
-          {Language.retry}
-        </Button>
-      )}
+      }
       {workspace.outdated && canAcceptJobs(workspaceStatus) && (
         <Button className={styles.actionButton} startIcon={<CloudDownloadIcon />} onClick={handleUpdate}>
           {Language.update}

@@ -38,6 +38,7 @@ export const WorkspacePage: React.FC = () => {
             handleStop={() => workspaceSend("STOP")}
             handleRetry={() => workspaceSend("RETRY")}
             handleUpdate={() => workspaceSend("UPDATE")}
+            handleCancel={() => workspaceSend("CANCEL")}
             resources={resources}
             getResourcesError={getResourcesError instanceof Error ? getResourcesError : undefined}
             builds={builds}

@@ -58,8 +58,8 @@ export const DisplayStatusLanguage = {
   stopped: "Stopped",
   deleting: "Deleting",
   deleted: "Deleted",
-  canceling: "Canceling",
-  canceled: "Canceled",
+  canceling: "Canceling action",
+  canceled: "Canceled action",
   failed: "Failed",
   queued: "Queued",
 }

@@ -1,4 +1,3 @@
-import { ContextExclusionPlugin } from "webpack"
 import { assign, createMachine, send } from "xstate"
 import { pure } from "xstate/lib/actions"
 import * as API from "../../api/api"
@@ -42,6 +41,7 @@ export type WorkspaceEvent =
   | { type: "STOP" }
   | { type: "RETRY" }
   | { type: "UPDATE" }
+  | { type: "CANCEL" }
   | { type: "LOAD_MORE_BUILDS" }
   | { type: "REFRESH_TIMELINE" }
 
@@ -138,6 +138,7 @@ export const workspaceMachine = createMachine(
                   STOP: "requestingStop",
                   RETRY: [{ cond: "triedToStart", target: "requestingStart" }, { target: "requestingStop" }],
                   UPDATE: "refreshingTemplate",
+                  CANCEL: "requestingCancel"
                 },
               },
               requestingStart: {