coder · BrunoQuaresma · Mar 4, 2024 · Mar 1, 2024 · Mar 1, 2024 · Mar 1, 2024
diff --git a/site/src/components/FullPageLayout/Sidebar.tsx b/site/src/components/FullPageLayout/Sidebar.tsx
@@ -74,14 +74,17 @@ interface SidebarIconButton extends ComponentProps<typeof TopbarIconButton> {
   isActive: boolean;
 }
 
-export const SidebarIconButton: FC<SidebarIconButton> = (props) => {
+export const SidebarIconButton: FC<SidebarIconButton> = ({
+  isActive,
+  ...buttonProps
+}) => {
   return (
     <TopbarIconButton
       css={[
         { opacity: 0.75, "&:hover": { opacity: 1 } },
-        props.isActive && styles.activeSidebarIconButton,
+        isActive && styles.activeSidebarIconButton,
       ]}
-      {...props}
+      {...buttonProps}
     />
   );
 };

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";
@@ -43,9 +42,9 @@ export interface WorkspaceProps {
   buildInfo?: TypesGen.BuildInfoResponse;
   sshPrefix?: string;
   template: TypesGen.Template;
-  canRetryDebugMode: boolean;
-  handleBuildRetry: () => void;
-  handleBuildRetryDebug: () => void;
+  canDebugMode: boolean;
+  handleRetry: (buildParameters?: TypesGen.WorkspaceBuildParameter[]) => void;
+  handleDebug: (buildParameters?: TypesGen.WorkspaceBuildParameter[]) => void;
   buildLogs?: React.ReactNode;
   latestVersion?: TypesGen.TemplateVersion;
   permissions: WorkspacePermissions;
@@ -75,9 +74,9 @@ export const Workspace: FC<WorkspaceProps> = ({
   buildInfo,
   sshPrefix,
   template,
-  canRetryDebugMode,
-  handleBuildRetry,
-  handleBuildRetryDebug,
+  canDebugMode,
+  handleRetry,
+  handleDebug,
   buildLogs,
   latestVersion,
   permissions,
@@ -129,12 +128,12 @@ 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}
-        canRetryDebugMode={canRetryDebugMode}
+        canDebugMode={canDebugMode}
         canChangeVersions={canChangeVersions}
         isUpdating={isUpdating}
         isRestarting={isRestarting}
@@ -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/BuildParametersPopover.tsx b/site/src/pages/WorkspacePage/WorkspaceActions/BuildParametersPopover.tsx
@@ -32,16 +32,19 @@ import {
   usePopover,
 } from "components/Popover/Popover";
 import { TopbarButton } from "components/FullPageLayout/Topbar";
+import visuallyHidden from "@mui/utils/visuallyHidden";
 
 interface BuildParametersPopoverProps {
   workspace: Workspace;
   disabled?: boolean;
   onSubmit: (buildParameters: WorkspaceBuildParameter[]) => void;
+  label: string;
 }
 
 export const BuildParametersPopover: FC<BuildParametersPopoverProps> = ({
   workspace,
   disabled,
+  label,
   onSubmit,
 }) => {
   const { data: parameters } = useQuery({
@@ -62,6 +65,7 @@ export const BuildParametersPopover: FC<BuildParametersPopoverProps> = ({
           css={{ paddingLeft: 0, paddingRight: 0, minWidth: "28px !important" }}
         >
           <ExpandMoreOutlined css={{ fontSize: 14 }} />
+          <span css={{ ...visuallyHidden }}>{label}</span>
         </TopbarButton>
       </PopoverTrigger>
       <PopoverContent

diff --git a/site/src/pages/WorkspacePage/WorkspaceActions/Buttons.tsx b/site/src/pages/WorkspacePage/WorkspaceActions/Buttons.tsx
@@ -7,16 +7,14 @@ import ReplayIcon from "@mui/icons-material/Replay";
 import BlockIcon from "@mui/icons-material/Block";
 import OutlinedBlockIcon from "@mui/icons-material/BlockOutlined";
 import PowerSettingsNewIcon from "@mui/icons-material/PowerSettingsNew";
-import RetryIcon from "@mui/icons-material/BuildOutlined";
-import RetryDebugIcon from "@mui/icons-material/BugReportOutlined";
 import Star from "@mui/icons-material/Star";
 import StarBorder from "@mui/icons-material/StarBorder";
 import { type FC } from "react";
 import type { Workspace, WorkspaceBuildParameter } from "api/typesGenerated";
 import { BuildParametersPopover } from "./BuildParametersPopover";
 import { TopbarButton } from "components/FullPageLayout/Topbar";
 
-interface ActionButtonProps {
+export interface ActionButtonProps {
   loading?: boolean;
   handleAction: (buildParameters?: WorkspaceBuildParameter[]) => void;
   disabled?: boolean;
@@ -84,6 +82,7 @@ export const StartButton: FC<ActionButtonPropsWithWorkspace> = ({
         {loading ? <>Starting&hellip;</> : "Start"}
       </TopbarButton>
       <BuildParametersPopover
+        label="Start with build parameters"
         workspace={workspace}
         disabled={loading}
         onSubmit={handleAction}
@@ -141,6 +140,7 @@ export const RestartButton: FC<ActionButtonPropsWithWorkspace> = ({
         {loading ? <>Restarting&hellip;</> : <>Restart&hellip;</>}
       </TopbarButton>
       <BuildParametersPopover
+        label="Restart with build parameters"
         workspace={workspace}
         disabled={loading}
         onSubmit={handleAction}
@@ -175,24 +175,6 @@ export const DisabledButton: FC<DisabledButtonProps> = ({ label }) => {
   );
 };
 
-type RetryButtonProps = Omit<ActionButtonProps, "loading"> & {
-  debug?: boolean;
-};
-
-export const RetryButton: FC<RetryButtonProps> = ({
-  handleAction,
-  debug = false,
-}) => {
-  return (
-    <TopbarButton
-      startIcon={debug ? <RetryDebugIcon /> : <RetryIcon />}
-      onClick={() => handleAction()}
-    >
-      Retry{debug && " (Debug)"}
-    </TopbarButton>
-  );
-};
-
 interface FavoriteButtonProps {
   onToggle: (workspaceID: string) => void;
   workspaceID: string;

diff --git a/site/src/pages/WorkspacePage/WorkspaceActions/DebugButton.stories.tsx b/site/src/pages/WorkspacePage/WorkspaceActions/DebugButton.stories.tsx
@@ -0,0 +1,54 @@
+import { Meta, StoryObj } from "@storybook/react";
+import { DebugButton } from "./DebugButton";
+import { MockWorkspace } from "testHelpers/entities";
+import { userEvent, waitFor, within, expect } from "@storybook/test";
+
+const meta: Meta<typeof DebugButton> = {
+  title: "pages/WorkspacePage/DebugButton",
+  component: DebugButton,
+};
+
+export default meta;
+type Story = StoryObj<typeof DebugButton>;
+
+export const Default: Story = {};
+
+export const WithBuildParameters: Story = {
+  args: {
+    enableBuildParameters: true,
+    workspace: MockWorkspace,
+  },
+  parameters: {
+    queries: [
+      {
+        key: ["workspace", MockWorkspace.id, "parameters"],
+        data: { templateVersionRichParameters: [], buildParameters: [] },
+      },
+    ],
+  },
+};
+
+export const WithOpenBuildParameters: Story = {
+  args: {
+    enableBuildParameters: true,
+    workspace: MockWorkspace,
+  },
+  parameters: {
+    queries: [
+      {
+        key: ["workspace", MockWorkspace.id, "parameters"],
+        data: { templateVersionRichParameters: [], buildParameters: [] },
+      },
+    ],
+  },
+  play: async ({ canvasElement, step }) => {
+    const screen = within(canvasElement);
+
+    await step("open popover", async () => {
+      await userEvent.click(screen.getByTestId("build-parameters-button"));
+      await waitFor(() =>
+        expect(screen.getByText("Build Options")).toBeInTheDocument(),
+      );
+    });
+  },
+};
diff --git a/site/src/pages/WorkspacePage/WorkspaceActions/DebugButton.tsx b/site/src/pages/WorkspacePage/WorkspaceActions/DebugButton.tsx
@@ -0,0 +1,47 @@
+import ButtonGroup from "@mui/material/ButtonGroup";
+import DebugIcon from "@mui/icons-material/BugReportOutlined";
+import { type FC } from "react";
+import type { Workspace } from "api/typesGenerated";
+import { BuildParametersPopover } from "./BuildParametersPopover";
+import { TopbarButton } from "components/FullPageLayout/Topbar";
+import { ActionButtonProps } from "./Buttons";
+
+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
+        label="Debug with build parameters"
+        workspace={workspace}
+        onSubmit={handleAction}
+      />
+    </ButtonGroup>
+  );
+};
diff --git a/site/src/pages/WorkspacePage/WorkspaceActions/RetryButton.stories.tsx b/site/src/pages/WorkspacePage/WorkspaceActions/RetryButton.stories.tsx
@@ -0,0 +1,54 @@
+import { Meta, StoryObj } from "@storybook/react";
+import { RetryButton } from "./RetryButton";
+import { MockWorkspace } from "testHelpers/entities";
+import { userEvent, waitFor, within, expect } from "@storybook/test";
+
+const meta: Meta<typeof RetryButton> = {
+  title: "pages/WorkspacePage/RetryButton",
+  component: RetryButton,
+};
+
+export default meta;
+type Story = StoryObj<typeof RetryButton>;
+
+export const Default: Story = {};
+
+export const WithBuildParameters: Story = {
+  args: {
+    enableBuildParameters: true,
+    workspace: MockWorkspace,
+  },
+  parameters: {
+    queries: [
+      {
+        key: ["workspace", MockWorkspace.id, "parameters"],
+        data: { templateVersionRichParameters: [], buildParameters: [] },
+      },
+    ],
+  },
+};
+
+export const WithOpenBuildParameters: Story = {
+  args: {
+    enableBuildParameters: true,
+    workspace: MockWorkspace,
+  },
+  parameters: {
+    queries: [
+      {
+        key: ["workspace", MockWorkspace.id, "parameters"],
+        data: { templateVersionRichParameters: [], buildParameters: [] },
+      },
+    ],
+  },
+  play: async ({ canvasElement, step }) => {
+    const screen = within(canvasElement);
+
+    await step("open popover", async () => {
+      await userEvent.click(screen.getByTestId("build-parameters-button"));
+      await waitFor(() =>
+        expect(screen.getByText("Build Options")).toBeInTheDocument(),
+      );
+    });
+  },
+};
diff --git a/site/src/pages/WorkspacePage/WorkspaceActions/RetryButton.tsx b/site/src/pages/WorkspacePage/WorkspaceActions/RetryButton.tsx
@@ -0,0 +1,47 @@
+import ButtonGroup from "@mui/material/ButtonGroup";
+import RetryIcon from "@mui/icons-material/CachedOutlined";
+import { type FC } from "react";
+import type { Workspace } from "api/typesGenerated";
+import { BuildParametersPopover } from "./BuildParametersPopover";
+import { TopbarButton } from "components/FullPageLayout/Topbar";
+import { ActionButtonProps } from "./Buttons";
+
+type RetryButtonProps = Omit<ActionButtonProps, "loading"> & {
+  enableBuildParameters: boolean;
+  workspace: Workspace;
+};
+
+export const RetryButton: FC<RetryButtonProps> = ({
+  handleAction,
+  workspace,
+  enableBuildParameters,
+}) => {
+  const mainAction = (
+    <TopbarButton startIcon={<RetryIcon />} onClick={() => handleAction()}>
+      Retry
+    </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
+        label="Retry with build parameters"
+        workspace={workspace}
+        onSubmit={handleAction}
+      />
+    </ButtonGroup>
+  );
+};
diff --git a/site/src/pages/WorkspacePage/WorkspaceActions/WorkspaceActions.stories.tsx b/site/src/pages/WorkspacePage/WorkspaceActions/WorkspaceActions.stories.tsx
@@ -73,6 +73,13 @@ export const Failed: Story = {
   },
 };
 
+export const FailedWithDebug: Story = {
+  args: {
+    workspace: Mocks.MockFailedWorkspace,
+    canDebug: true,
+  },
+};
+
 export const Updating: Story = {
   args: {
     isUpdating: true,