Extract debug button

coder · BrunoQuaresma · Mar 4, 2024 · Mar 1, 2024 · Mar 1, 2024 · Mar 1, 2024
commit c3a8dd93f5fc5236ca0b19b84f8b62dc476c9105
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 DebugIcon from "@mui/icons-material/BugReportOutlined";
 import Star from "@mui/icons-material/Star";
 import StarBorder from "@mui/icons-material/StarBorder";
 import { type FC } from "react";
@@ -174,42 +173,6 @@ export const DisabledButton: FC<DisabledButtonProps> = ({ label }) => {
   );
 };
 
-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 {
   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 } 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,43 @@
+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 workspace={workspace} onSubmit={handleAction} />
+    </ButtonGroup>
+  );
+};
diff --git a/site/src/pages/WorkspacePage/WorkspaceActions/WorkspaceActions.tsx b/site/src/pages/WorkspacePage/WorkspaceActions/WorkspaceActions.tsx
@@ -12,7 +12,6 @@ import {
   UpdateButton,
   ActivateButton,
   FavoriteButton,
-  DebugButton,
 } from "./Buttons";
 
 import Divider from "@mui/material/Divider";
@@ -29,6 +28,7 @@ import {
 import { TopbarIconButton } from "components/FullPageLayout/Topbar";
 import MoreVertOutlined from "@mui/icons-material/MoreVertOutlined";
 import { RetryButton } from "./RetryButton";
+import { DebugButton } from "./DebugButton";
 
 export interface WorkspaceActionsProps {
   workspace: Workspace;