fix: add in retry button for failed workspaces

coder · Parkreiner · Nov 22, 2023 · Nov 15, 2023 · Nov 15, 2023 · Nov 15, 2023
commit 718972ffca1a73973d051419bcb5430768b0c892
diff --git a/site/src/pages/WorkspacePage/Workspace.tsx b/site/src/pages/WorkspacePage/Workspace.tsx
@@ -201,6 +201,7 @@ export const Workspace: FC<React.PropsWithChildren<WorkspaceProps>> = ({
               handleUpdate={handleUpdate}
               handleCancel={handleCancel}
               handleSettings={handleSettings}
+              handleRetry={handleBuildRetry}
               handleChangeVersion={handleChangeVersion}
               handleDormantActivate={handleDormantActivate}
               canChangeVersions={canChangeVersions}
@@ -308,7 +309,6 @@ export const Workspace: FC<React.PropsWithChildren<WorkspaceProps>> = ({
               actions={
                 canRetryDebugMode && (
                   <Button
-                    key={0}
                     onClick={handleBuildRetry}
                     variant="text"
                     size="small"

diff --git a/site/src/pages/WorkspacePage/WorkspaceActions/Buttons.tsx b/site/src/pages/WorkspacePage/WorkspaceActions/Buttons.tsx
@@ -1,23 +1,25 @@
+import { type FC } from "react";
+import type { Workspace, WorkspaceBuildParameter } from "api/typesGenerated";
+import { BuildParametersPopover } from "./BuildParametersPopover";
+
 import Button from "@mui/material/Button";
-import BlockIcon from "@mui/icons-material/Block";
+import LoadingButton from "@mui/lab/LoadingButton";
+import ButtonGroup from "@mui/material/ButtonGroup";
 import CloudQueueIcon from "@mui/icons-material/CloudQueue";
 import CropSquareIcon from "@mui/icons-material/CropSquare";
 import PlayCircleOutlineIcon from "@mui/icons-material/PlayCircleOutline";
 import ReplayIcon from "@mui/icons-material/Replay";
-import { FC } from "react";
-import BlockOutlined from "@mui/icons-material/BlockOutlined";
-import ButtonGroup from "@mui/material/ButtonGroup";
-import { Workspace, WorkspaceBuildParameter } from "api/typesGenerated";
-import { BuildParametersPopover } from "./BuildParametersPopover";
+import BlockIcon from "@mui/icons-material/Block";
+import OutlinedBlockIcon from "@mui/icons-material/BlockOutlined";
 import PowerSettingsNewIcon from "@mui/icons-material/PowerSettingsNew";
-import LoadingButton from "@mui/lab/LoadingButton";
+import RetryIcon from "@mui/icons-material/BuildOutlined";
 
-interface WorkspaceAction {
+interface WorkspaceActionProps {
   loading?: boolean;
   handleAction: () => void;
 }
 
-export const UpdateButton: FC<WorkspaceAction> = ({
+export const UpdateButton: FC<WorkspaceActionProps> = ({
   handleAction,
   loading,
 }) => {
@@ -34,7 +36,7 @@ export const UpdateButton: FC<WorkspaceAction> = ({
   );
 };
 
-export const ActivateButton: FC<WorkspaceAction> = ({
+export const ActivateButton: FC<WorkspaceActionProps> = ({
   handleAction,
   loading,
 }) => {
@@ -51,7 +53,7 @@ export const ActivateButton: FC<WorkspaceAction> = ({
 };
 
 export const StartButton: FC<
-  Omit<WorkspaceAction, "handleAction"> & {
+  Omit<WorkspaceActionProps, "handleAction"> & {
     workspace: Workspace;
     handleAction: (buildParameters?: WorkspaceBuildParameter[]) => void;
   }
@@ -83,7 +85,10 @@ export const StartButton: FC<
   );
 };
 
-export const StopButton: FC<WorkspaceAction> = ({ handleAction, loading }) => {
+export const StopButton: FC<WorkspaceActionProps> = ({
+  handleAction,
+  loading,
+}) => {
   return (
     <LoadingButton
       loading={loading}
@@ -98,7 +103,7 @@ export const StopButton: FC<WorkspaceAction> = ({ handleAction, loading }) => {
 };
 
 export const RestartButton: FC<
-  Omit<WorkspaceAction, "handleAction"> & {
+  Omit<WorkspaceActionProps, "handleAction"> & {
     workspace: Workspace;
     handleAction: (buildParameters?: WorkspaceBuildParameter[]) => void;
   }
@@ -131,7 +136,7 @@ export const RestartButton: FC<
   );
 };
 
-export const CancelButton: FC<WorkspaceAction> = ({ handleAction }) => {
+export const CancelButton: FC<WorkspaceActionProps> = ({ handleAction }) => {
   return (
     <Button startIcon={<BlockIcon />} onClick={handleAction}>
       Cancel
@@ -145,7 +150,7 @@ interface DisabledProps {
 
 export const DisabledButton: FC<DisabledProps> = ({ label }) => {
   return (
-    <Button startIcon={<BlockOutlined />} disabled>
+    <Button startIcon={<OutlinedBlockIcon />} disabled>
       {label}
     </Button>
   );
@@ -162,3 +167,13 @@ export const ActionLoadingButton: FC<LoadingProps> = ({ label }) => {
     </LoadingButton>
   );
 };
+
+export function RetryButton({
+  handleAction,
+}: Omit<WorkspaceActionProps, "loading">) {
+  return (
+    <Button startIcon={<RetryIcon />} onClick={handleAction}>
+      Retry
+    </Button>
+  );
+}
diff --git a/site/src/pages/WorkspacePage/WorkspaceActions/WorkspaceActions.tsx b/site/src/pages/WorkspacePage/WorkspaceActions/WorkspaceActions.tsx
@@ -1,4 +1,4 @@
-import { FC, Fragment, ReactNode } from "react";
+import { type FC, type ReactNode, Fragment } from "react";
 import { Workspace, WorkspaceBuildParameter } from "api/typesGenerated";
 import { useWorkspaceDuplication } from "pages/CreateWorkspacePage/useWorkspaceDuplication";
 import {
@@ -10,12 +10,9 @@ import {
   RestartButton,
   UpdateButton,
   ActivateButton,
+  RetryButton,
 } from "./Buttons";
-import {
-  ButtonMapping,
-  ButtonTypesEnum,
-  actionsByWorkspaceStatus,
-} from "./constants";
+import { type ButtonType, actionsByWorkspaceStatus } from "./constants";
 
 import Divider from "@mui/material/Divider";
 import DuplicateIcon from "@mui/icons-material/FileCopyOutlined";
@@ -41,6 +38,7 @@ export interface WorkspaceActionsProps {
   handleCancel: () => void;
   handleSettings: () => void;
   handleChangeVersion: () => void;
+  handleRetry: () => void;
   handleDormantActivate: () => void;
   isUpdating: boolean;
   isRestarting: boolean;
@@ -57,81 +55,72 @@ export const WorkspaceActions: FC<WorkspaceActionsProps> = ({
   handleUpdate,
   handleCancel,
   handleSettings,
+  handleRetry,
   handleChangeVersion,
   handleDormantActivate: handleDormantActivate,
   isUpdating,
   isRestarting,
   canChangeVersions,
 }) => {
-  const {
-    canCancel,
-    canAcceptJobs,
-    actions: actionsByStatus,
-  } = actionsByWorkspaceStatus(
-    workspace,
-    workspace.latest_build.status,
-    canChangeVersions,
-  );
-  const canBeUpdated = workspace.outdated && canAcceptJobs;
   const { duplicateWorkspace, isDuplicationReady } =
     useWorkspaceDuplication(workspace);
 
-  // A mapping of button type to the corresponding React component
-  const buttonMapping: ButtonMapping = {
-    [ButtonTypesEnum.update]: <UpdateButton handleAction={handleUpdate} />,
-    [ButtonTypesEnum.updating]: (
-      <UpdateButton loading handleAction={handleUpdate} />
-    ),
-    [ButtonTypesEnum.start]: (
-      <StartButton workspace={workspace} handleAction={handleStart} />
-    ),
-    [ButtonTypesEnum.starting]: (
+  // A mapping of button type to their corresponding React components
+  const buttonMapping: Record<ButtonType, ReactNode> = {
+    update: <UpdateButton handleAction={handleUpdate} />,
+    updating: <UpdateButton loading handleAction={handleUpdate} />,
+    start: <StartButton workspace={workspace} handleAction={handleStart} />,
+    starting: (
       <StartButton loading workspace={workspace} handleAction={handleStart} />
     ),
-    [ButtonTypesEnum.stop]: <StopButton handleAction={handleStop} />,
-    [ButtonTypesEnum.stopping]: (
-      <StopButton loading handleAction={handleStop} />
-    ),
-    [ButtonTypesEnum.restart]: (
+    stop: <StopButton handleAction={handleStop} />,
+    stopping: <StopButton loading handleAction={handleStop} />,
+    restart: (
       <RestartButton workspace={workspace} handleAction={handleRestart} />
     ),
-    [ButtonTypesEnum.restarting]: (
+    restarting: (
       <RestartButton
         loading
         workspace={workspace}
         handleAction={handleRestart}
       />
     ),
-    [ButtonTypesEnum.deleting]: <ActionLoadingButton label="Deleting" />,
-    [ButtonTypesEnum.canceling]: <DisabledButton label="Canceling..." />,
-    [ButtonTypesEnum.deleted]: <DisabledButton label="Deleted" />,
-    [ButtonTypesEnum.pending]: <ActionLoadingButton label="Pending..." />,
-    [ButtonTypesEnum.activate]: (
-      <ActivateButton handleAction={handleDormantActivate} />
-    ),
-    [ButtonTypesEnum.activating]: (
-      <ActivateButton loading handleAction={handleDormantActivate} />
-    ),
+    deleting: <ActionLoadingButton label="Deleting" />,
+    canceling: <DisabledButton label="Canceling..." />,
+    deleted: <DisabledButton label="Deleted" />,
+    pending: <ActionLoadingButton label="Pending..." />,
+    activate: <ActivateButton handleAction={handleDormantActivate} />,
+    activating: <ActivateButton loading handleAction={handleDormantActivate} />,
+    retry: <RetryButton handleAction={handleRetry} />,
   };
 
+  const { actions, canCancel, canAcceptJobs } = actionsByWorkspaceStatus(
+    workspace,
+    workspace.latest_build.status,
+    canChangeVersions,
+  );
+  const canBeUpdated = workspace.outdated && canAcceptJobs;
+
   return (
     <div
       css={{ display: "flex", alignItems: "center", gap: 12 }}
       data-testid="workspace-actions"
     >
+      {/*
+       * Parentheses important – if canBeUpdated is false, nothing should
+       * appear in the UI
+       */}
       {canBeUpdated &&
-        (isUpdating
-          ? buttonMapping[ButtonTypesEnum.updating]
-          : buttonMapping[ButtonTypesEnum.update])}
+        (isUpdating ? buttonMapping.updating : buttonMapping.update)}
 
-      {isRestarting && buttonMapping[ButtonTypesEnum.restarting]}
-
-      {!isRestarting &&
-        actionsByStatus.map((action) => (
-          <Fragment key={action}>{buttonMapping[action]}</Fragment>
-        ))}
+      {isRestarting
+        ? buttonMapping.restarting
+        : actions.map((action) => (
+            <Fragment key={action}>{buttonMapping[action]}</Fragment>
+          ))}
 
       {canCancel && <CancelButton handleAction={handleCancel} />}
+
       <MoreMenu>
         <MoreMenuTrigger>
           <ThreeDotsButton