Extract retry button

coder · BrunoQuaresma · Mar 4, 2024 · Mar 1, 2024 · Mar 1, 2024 · Mar 1, 2024
commit ae3f3f04290c9cd695fce04a795aa0bb6705c928
diff --git a/site/src/pages/WorkspacePage/Workspace.tsx b/site/src/pages/WorkspacePage/Workspace.tsx
@@ -42,7 +42,7 @@ export interface WorkspaceProps {
   buildInfo?: TypesGen.BuildInfoResponse;
   sshPrefix?: string;
   template: TypesGen.Template;
-  canRetryDebugMode: boolean;
+  canDebugMode: boolean;
   handleRetry: (buildParameters?: TypesGen.WorkspaceBuildParameter[]) => void;
   handleDebug: (buildParameters?: TypesGen.WorkspaceBuildParameter[]) => void;
   buildLogs?: React.ReactNode;
@@ -74,7 +74,7 @@ export const Workspace: FC<WorkspaceProps> = ({
   buildInfo,
   sshPrefix,
   template,
-  canRetryDebugMode,
+  canDebugMode,
   handleRetry,
   handleDebug,
   buildLogs,
@@ -133,7 +133,7 @@ export const Workspace: FC<WorkspaceProps> = ({
         handleChangeVersion={handleChangeVersion}
         handleDormantActivate={handleDormantActivate}
         handleToggleFavorite={handleToggleFavorite}
-        canRetryDebugMode={canRetryDebugMode}
+        canDebugMode={canDebugMode}
         canChangeVersions={canChangeVersions}
         isUpdating={isUpdating}
         isRestarting={isRestarting}

diff --git a/site/src/pages/WorkspacePage/WorkspaceActions/Buttons.tsx b/site/src/pages/WorkspacePage/WorkspaceActions/Buttons.tsx
@@ -7,7 +7,6 @@ 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/CachedOutlined";
 import DebugIcon from "@mui/icons-material/BugReportOutlined";
 import Star from "@mui/icons-material/Star";
 import StarBorder from "@mui/icons-material/StarBorder";
@@ -16,7 +15,7 @@ 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;
@@ -175,42 +174,6 @@ export const DisabledButton: FC<DisabledButtonProps> = ({ label }) => {
   );
 };
 
-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 workspace={workspace} onSubmit={handleAction} />
-    </ButtonGroup>
-  );
-};
-
 type DebugButtonProps = Omit<ActionButtonProps, "loading"> & {
   workspace: Workspace;
   enableBuildParameters: boolean;

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 } 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,43 @@
+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 workspace={workspace} onSubmit={handleAction} />
+    </ButtonGroup>
+  );
+};
diff --git a/site/src/pages/WorkspacePage/WorkspaceActions/WorkspaceActions.tsx b/site/src/pages/WorkspacePage/WorkspaceActions/WorkspaceActions.tsx
@@ -11,7 +11,6 @@ import {
   RestartButton,
   UpdateButton,
   ActivateButton,
-  RetryButton,
   FavoriteButton,
   DebugButton,
 } from "./Buttons";
@@ -29,6 +28,7 @@ import {
 } from "components/MoreMenu/MoreMenu";
 import { TopbarIconButton } from "components/FullPageLayout/Topbar";
 import MoreVertOutlined from "@mui/icons-material/MoreVertOutlined";
+import { RetryButton } from "./RetryButton";
 
 export interface WorkspaceActionsProps {
   workspace: Workspace;
@@ -48,7 +48,7 @@ export interface WorkspaceActionsProps {
   isRestarting: boolean;
   children?: ReactNode;
   canChangeVersions: boolean;
-  canRetryDebug: boolean;
+  canDebug: boolean;
   isOwner: boolean;
 }
 
@@ -69,15 +69,15 @@ export const WorkspaceActions: FC<WorkspaceActionsProps> = ({
   isUpdating,
   isRestarting,
   canChangeVersions,
-  canRetryDebug,
+  canDebug,
   isOwner,
 }) => {
   const { duplicateWorkspace, isDuplicationReady } =
     useWorkspaceDuplication(workspace);
 
   const { actions, canCancel, canAcceptJobs } = abilitiesByWorkspaceStatus(
     workspace,
-    canRetryDebug,
+    canDebug,
   );
   const showCancel =
     canCancel &&

diff --git a/site/src/pages/WorkspacePage/WorkspaceReadyPage.tsx b/site/src/pages/WorkspacePage/WorkspaceReadyPage.tsx
@@ -227,7 +227,7 @@ export const WorkspaceReadyPage: FC<WorkspaceReadyPageProps> = ({
         handleSettings={() => navigate("settings")}
         handleRetry={handleRetry}
         handleDebug={handleDebug}
-        canRetryDebugMode={
+        canDebugMode={
           deploymentValues?.config.enable_terraform_debug_mode ?? false
         }
         handleChangeVersion={() => {

diff --git a/site/src/pages/WorkspacePage/WorkspaceTopbar.tsx b/site/src/pages/WorkspacePage/WorkspaceTopbar.tsx
@@ -52,7 +52,7 @@ export interface WorkspaceProps {
   workspace: TypesGen.Workspace;
   canUpdateWorkspace: boolean;
   canChangeVersions: boolean;
-  canRetryDebugMode: boolean;
+  canDebugMode: boolean;
   handleRetry: (buildParameters?: TypesGen.WorkspaceBuildParameter[]) => void;
   handleDebug: (buildParameters?: TypesGen.WorkspaceBuildParameter[]) => void;
   isOwner: boolean;
@@ -78,7 +78,7 @@ export const WorkspaceTopbar: FC<WorkspaceProps> = ({
   isRestarting,
   canUpdateWorkspace,
   canChangeVersions,
-  canRetryDebugMode,
+  canDebugMode,
   handleRetry,
   handleDebug,
   isOwner,
@@ -271,7 +271,7 @@ export const WorkspaceTopbar: FC<WorkspaceProps> = ({
           handleChangeVersion={handleChangeVersion}
           handleDormantActivate={handleDormantActivate}
           handleToggleFavorite={handleToggleFavorite}
-          canRetryDebug={canRetryDebugMode}
+          canDebug={canDebugMode}
           canChangeVersions={canChangeVersions}
           isUpdating={isUpdating}
           isRestarting={isRestarting}