Support build parameters on retry and debug actions

coder · BrunoQuaresma · Mar 4, 2024 · Mar 1, 2024 · Mar 1, 2024 · Mar 1, 2024
commit 1bbe8d0020e6b0becd98596ddf15cd5ee930b74e
diff --git a/site/src/pages/WorkspacePage/Workspace.tsx b/site/src/pages/WorkspacePage/Workspace.tsx
@@ -1,5 +1,4 @@
 import { type Interpolation, type Theme } from "@emotion/react";
-import Button from "@mui/material/Button";
 import AlertTitle from "@mui/material/AlertTitle";
 import { type FC } from "react";
 import { useNavigate } from "react-router-dom";
@@ -44,8 +43,8 @@ export interface WorkspaceProps {
   sshPrefix?: string;
   template: TypesGen.Template;
   canRetryDebugMode: boolean;
-  handleBuildRetry: () => void;
-  handleBuildRetryDebug: () => void;
+  handleRetry: (buildParameters?: TypesGen.WorkspaceBuildParameter[]) => void;
+  handleDebug: (buildParameters?: TypesGen.WorkspaceBuildParameter[]) => void;
   buildLogs?: React.ReactNode;
   latestVersion?: TypesGen.TemplateVersion;
   permissions: WorkspacePermissions;
@@ -76,8 +75,8 @@ export const Workspace: FC<WorkspaceProps> = ({
   sshPrefix,
   template,
   canRetryDebugMode,
-  handleBuildRetry,
-  handleBuildRetryDebug,
+  handleRetry,
+  handleDebug,
   buildLogs,
   latestVersion,
   permissions,
@@ -129,8 +128,8 @@ export const Workspace: FC<WorkspaceProps> = ({
         handleUpdate={handleUpdate}
         handleCancel={handleCancel}
         handleSettings={handleSettings}
-        handleBuildRetry={handleBuildRetry}
-        handleBuildRetryDebug={handleBuildRetryDebug}
+        handleRetry={handleRetry}
+        handleDebug={handleDebug}
         handleChangeVersion={handleChangeVersion}
         handleDormantActivate={handleDormantActivate}
         handleToggleFavorite={handleToggleFavorite}
@@ -208,20 +207,7 @@ export const Workspace: FC<WorkspaceProps> = ({
           )}
 
           {workspace.latest_build.job.error && (
-            <Alert
-              severity="error"
-              actions={
-                <Button
-                  onClick={
-                    canRetryDebugMode ? handleBuildRetryDebug : handleBuildRetry
-                  }
-                  variant="text"
-                  size="small"
-                >
-                  Retry{canRetryDebugMode && " in debug mode"}
-                </Button>
-              }
-            >
+            <Alert severity="error">
               <AlertTitle>Workspace build failed</AlertTitle>
               <AlertDetail>{workspace.latest_build.job.error}</AlertDetail>
             </Alert>

diff --git a/site/src/pages/WorkspacePage/WorkspaceActions/Buttons.tsx b/site/src/pages/WorkspacePage/WorkspaceActions/Buttons.tsx
@@ -175,24 +175,76 @@ export const DisabledButton: FC<DisabledButtonProps> = ({ label }) => {
   );
 };
 
-type RetryButtonProps = Omit<ActionButtonProps, "loading">;
+type RetryButtonProps = Omit<ActionButtonProps, "loading"> & {
+  enableBuildParameters: boolean;
+  workspace: Workspace;
+};
 
-export const RetryButton: FC<RetryButtonProps> = ({ handleAction }) => {
-  return (
+export const RetryButton: FC<RetryButtonProps> = ({
+  handleAction,
+  workspace,
+  enableBuildParameters,
+}) => {
+  const mainAction = (
     <TopbarButton startIcon={<RetryIcon />} onClick={() => handleAction()}>
       Retry
     </TopbarButton>
   );
-};
 
-type DebugButtonProps = Omit<ActionButtonProps, "loading">;
+  if (!enableBuildParameters) {
+    return mainAction;
+  }
 
-export const DebugButton: FC<DebugButtonProps> = ({ handleAction }) => {
   return (
+    <ButtonGroup
+      variant="outlined"
+      css={{
+        // Workaround to make the border transitions smoothly on button groups
+        "& > button:hover + button": {
+          borderLeft: "1px solid #FFF",
+        },
+      }}
+    >
+      {mainAction}
+      <BuildParametersPopover workspace={workspace} onSubmit={handleAction} />
+    </ButtonGroup>
+  );
+};
+
+type DebugButtonProps = Omit<ActionButtonProps, "loading"> & {
+  workspace: Workspace;
+  enableBuildParameters: boolean;
+};
+
+export const DebugButton: FC<DebugButtonProps> = ({
+  handleAction,
+  workspace,
+  enableBuildParameters,
+}) => {
+  const mainAction = (
     <TopbarButton startIcon={<DebugIcon />} onClick={() => handleAction()}>
       Debug
     </TopbarButton>
   );
+
+  if (!enableBuildParameters) {
+    return mainAction;
+  }
+
+  return (
+    <ButtonGroup
+      variant="outlined"
+      css={{
+        // Workaround to make the border transitions smoothly on button groups
+        "& > button:hover + button": {
+          borderLeft: "1px solid #FFF",
+        },
+      }}
+    >
+      {mainAction}
+      <BuildParametersPopover workspace={workspace} onSubmit={handleAction} />
+    </ButtonGroup>
+  );
 };
 
 interface FavoriteButtonProps {

diff --git a/site/src/pages/WorkspacePage/WorkspaceActions/WorkspaceActions.tsx b/site/src/pages/WorkspacePage/WorkspaceActions/WorkspaceActions.tsx
@@ -41,8 +41,8 @@ export interface WorkspaceActionsProps {
   handleCancel: () => void;
   handleSettings: () => void;
   handleChangeVersion: () => void;
-  handleRetry: () => void;
-  handleDebug: () => void;
+  handleRetry: (buildParameters?: WorkspaceBuildParameter[]) => void;
+  handleDebug: (buildParameters?: WorkspaceBuildParameter[]) => void;
   handleDormantActivate: () => void;
   isUpdating: boolean;
   isRestarting: boolean;
@@ -133,8 +133,20 @@ export const WorkspaceActions: FC<WorkspaceActionsProps> = ({
     pending: <DisabledButton label="Pending..." />,
     activate: <ActivateButton handleAction={handleDormantActivate} />,
     activating: <ActivateButton loading handleAction={handleDormantActivate} />,
-    retry: <RetryButton handleAction={handleRetry} />,
-    retryDebug: <DebugButton handleAction={handleDebug} />,
+    retry: (
+      <RetryButton
+        handleAction={handleRetry}
+        workspace={workspace}
+        enableBuildParameters={workspace.latest_build.transition === "start"}
+      />
+    ),
+    debug: (
+      <DebugButton
+        handleAction={handleDebug}
+        workspace={workspace}
+        enableBuildParameters={workspace.latest_build.transition === "start"}
+      />
+    ),
     toggleFavorite: (
       <FavoriteButton
         workspaceID={workspace.id}

diff --git a/site/src/pages/WorkspacePage/WorkspaceActions/constants.ts b/site/src/pages/WorkspacePage/WorkspaceActions/constants.ts
@@ -21,7 +21,7 @@ export const actionTypes = [
   // into one of the starting, stopping, or deleting states (based on the
   // WorkspaceTransition type)
   "retry",
-  "retryDebug",
+  "debug",
 
   // These are buttons that should be used with disabled UI elements
   "canceling",
@@ -39,7 +39,7 @@ type WorkspaceAbilities = {
 
 export const abilitiesByWorkspaceStatus = (
   workspace: Workspace,
-  canRetryDebug: boolean,
+  canDebug: boolean,
 ): WorkspaceAbilities => {
   if (workspace.dormant_at) {
     return {
@@ -50,10 +50,10 @@ export const abilitiesByWorkspaceStatus = (
   }
 
   const status = workspace.latest_build.status;
-  if (status === "failed" && canRetryDebug) {
+  if (status === "failed" && canDebug) {
     return {
       ...statusToAbility.failed,
-      actions: ["retry", "retryDebug"],
+      actions: ["retry", "debug"],
     };
   }
 

diff --git a/site/src/pages/WorkspacePage/WorkspaceReadyPage.tsx b/site/src/pages/WorkspacePage/WorkspaceReadyPage.tsx
@@ -153,12 +153,18 @@ export const WorkspaceReadyPage: FC<WorkspaceReadyPageProps> = ({
   // Cancel build
   const cancelBuildMutation = useMutation(cancelBuild(workspace, queryClient));
 
-  const handleBuildRetry = (debug = false) => {
+  const runLastBuild = (
+    buildParameters: TypesGen.WorkspaceBuildParameter[] | undefined,
+    debug: boolean,
+  ) => {
     const logLevel = debug ? "debug" : undefined;
 
     switch (workspace.latest_build.transition) {
       case "start":
-        startWorkspaceMutation.mutate({ logLevel });
+        startWorkspaceMutation.mutate({
+          logLevel,
+          buildParameters,
+        });
         break;
       case "stop":
         stopWorkspaceMutation.mutate({ logLevel });
@@ -169,6 +175,18 @@ export const WorkspaceReadyPage: FC<WorkspaceReadyPageProps> = ({
     }
   };
 
+  const handleRetry = (
+    buildParameters?: TypesGen.WorkspaceBuildParameter[],
+  ) => {
+    runLastBuild(buildParameters, false);
+  };
+
+  const handleDebug = (
+    buildParameters?: TypesGen.WorkspaceBuildParameter[],
+  ) => {
+    runLastBuild(buildParameters, true);
+  };
+
   return (
     <>
       <Helmet>
@@ -207,8 +225,8 @@ export const WorkspaceReadyPage: FC<WorkspaceReadyPageProps> = ({
         }}
         handleCancel={cancelBuildMutation.mutate}
         handleSettings={() => navigate("settings")}
-        handleBuildRetry={() => handleBuildRetry(false)}
-        handleBuildRetryDebug={() => handleBuildRetry(true)}
+        handleRetry={handleRetry}
+        handleDebug={handleDebug}
         canRetryDebugMode={
           deploymentValues?.config.enable_terraform_debug_mode ?? false
         }

diff --git a/site/src/pages/WorkspacePage/WorkspaceTopbar.tsx b/site/src/pages/WorkspacePage/WorkspaceTopbar.tsx
@@ -53,8 +53,8 @@ export interface WorkspaceProps {
   canUpdateWorkspace: boolean;
   canChangeVersions: boolean;
   canRetryDebugMode: boolean;
-  handleBuildRetry: () => void;
-  handleBuildRetryDebug: () => void;
+  handleRetry: (buildParameters?: TypesGen.WorkspaceBuildParameter[]) => void;
+  handleDebug: (buildParameters?: TypesGen.WorkspaceBuildParameter[]) => void;
   isOwner: boolean;
   template: TypesGen.Template;
   permissions: WorkspacePermissions;
@@ -79,8 +79,8 @@ export const WorkspaceTopbar: FC<WorkspaceProps> = ({
   canUpdateWorkspace,
   canChangeVersions,
   canRetryDebugMode,
-  handleBuildRetry,
-  handleBuildRetryDebug,
+  handleRetry,
+  handleDebug,
   isOwner,
   template,
   latestVersion,
@@ -266,8 +266,8 @@ export const WorkspaceTopbar: FC<WorkspaceProps> = ({
           handleUpdate={handleUpdate}
           handleCancel={handleCancel}
           handleSettings={handleSettings}
-          handleRetry={handleBuildRetry}
-          handleDebug={handleBuildRetryDebug}
+          handleRetry={handleRetry}
+          handleDebug={handleDebug}
           handleChangeVersion={handleChangeVersion}
           handleDormantActivate={handleDormantActivate}
           handleToggleFavorite={handleToggleFavorite}