added stories and tests

coder · Kira-Pilot · Nov 14, 2023 · Nov 13, 2023 · Nov 13, 2023 · Nov 13, 2023
commit 16271f1235b00f3e4cea1009e1b54731bbae88f0
diff --git a/site/src/pages/WorkspacePage/WorkspaceDeleteDialog/WorkspaceDeleteDialog.stories.tsx b/site/src/pages/WorkspacePage/WorkspaceDeleteDialog/WorkspaceDeleteDialog.stories.tsx
@@ -0,0 +1,30 @@
+import { Meta, StoryObj } from "@storybook/react";
+import { WorkspaceDeleteDialog } from "./WorkspaceDeleteDialog";
+import { MockWorkspace } from "testHelpers/entities";
+
+const meta: Meta<typeof WorkspaceDeleteDialog> = {
+  title: "pages/WorkspacePage/WorkspaceDeleteDialog",
+  component: WorkspaceDeleteDialog,
+};
+
+export default meta;
+type Story = StoryObj<typeof WorkspaceDeleteDialog>;
+
+const args = {
+  workspace: MockWorkspace,
+  canUpdateTemplate: false,
+  isOpen: true,
+  onCancel: () => {},
+  onConfirm: () => {},
+};
+
+export const NotTemplateAdmin: Story = {
+  args,
+};
+
+export const TemplateAdmin: Story = {
+  args: {
+    ...args,
+    canUpdateTemplate: true,
+  },
+};
diff --git a/site/src/pages/WorkspacePage/WorkspaceDeleteDialog/WorkspaceDeleteDialog.tsx b/site/src/pages/WorkspacePage/WorkspaceDeleteDialog/WorkspaceDeleteDialog.tsx
@@ -1,5 +1,4 @@
 import { Workspace, CreateWorkspaceBuildRequest } from "api/typesGenerated";
-import { usePermissions } from "hooks/usePermissions";
 import { useId, useState, FormEvent } from "react";
 import { ConfirmDialog } from "components/Dialogs/ConfirmDialog/ConfirmDialog";
 import { type Interpolation, type Theme } from "@emotion/react";
@@ -65,14 +64,14 @@ const styles = {
 
 interface WorkspaceDeleteDialogProps {
   workspace: Workspace;
+  canUpdateTemplate: boolean;
   isOpen: boolean;
   onCancel: () => void;
   onConfirm: (arg: CreateWorkspaceBuildRequest["orphan"]) => void;
 }
 export const WorkspaceDeleteDialog = (props: WorkspaceDeleteDialogProps) => {
-  const { workspace, isOpen, onCancel, onConfirm } = props;
+  const { workspace, canUpdateTemplate, isOpen, onCancel, onConfirm } = props;
 
-  const permissions = usePermissions();
   const hookId = useId();
   const [userConfirmationText, setUserConfirmationText] = useState("");
   const [orphanWorkspace, setOrphanWorkspace] =
@@ -144,7 +143,7 @@ export const WorkspaceDeleteDialog = (props: WorkspaceDeleteDialogProps) => {
                 "data-testid": "delete-dialog-name-confirmation",
               }}
             />
-            {permissions.updateTemplates && (
+            {canUpdateTemplate && (
               <div css={styles.orphanContainer}>
                 <div css={{ flexDirection: "column" }}>
                   <Checkbox

diff --git a/site/src/pages/WorkspacePage/WorkspaceDeleteDialog/index.ts b/site/src/pages/WorkspacePage/WorkspaceDeleteDialog/index.ts
@@ -0,0 +1 @@
+export * from "./WorkspaceDeleteDialog";
diff --git a/site/src/pages/WorkspacePage/WorkspacePage.test.tsx b/site/src/pages/WorkspacePage/WorkspacePage.test.tsx
@@ -15,6 +15,7 @@ import {
   MockTemplateVersion3,
   MockUser,
   MockDeploymentConfig,
+  MockWorkspaceBuildDelete,
 } from "testHelpers/entities";
 import * as api from "api/api";
 import { renderWithAuth } from "testHelpers/renderHelpers";
@@ -90,7 +91,7 @@ describe("WorkspacePage", () => {
 
     // Get dialog and confirm
     const dialog = await screen.findByTestId("dialog");
-    const labelText = "Name of the workspace to delete";
+    const labelText = "Workspace name";
     const textField = within(dialog).getByLabelText(labelText);
     await user.type(textField, MockWorkspace.name);
     const confirmButton = within(dialog).getByRole("button", {
@@ -101,6 +102,45 @@ describe("WorkspacePage", () => {
     expect(deleteWorkspaceMock).toBeCalled();
   });
 
+  it("orphans the workspace on delete if option is selected", async () => {
+    const user = userEvent.setup({ delay: 0 });
+    const deleteWorkspaceMock = jest
+      .spyOn(api, "deleteWorkspace")
+      .mockResolvedValueOnce(MockWorkspaceBuildDelete);
+    await renderWorkspacePage();
+
+    // open the workspace action popover so we have access to all available ctas
+    const trigger = screen.getByTestId("workspace-options-button");
+    await user.click(trigger);
+
+    // Click on delete
+    const button = await screen.findByTestId("delete-button");
+    await user.click(button);
+
+    // Get dialog and enter confirmation text
+    const dialog = await screen.findByTestId("dialog");
+    const labelText = "Workspace name";
+    const textField = within(dialog).getByLabelText(labelText);
+    await user.type(textField, MockWorkspace.name);
+
+    // check orphan option
+    const orphanCheckbox = screen.getByRole("checkbox");
+    await user.click(orphanCheckbox);
+
+    // confirm
+    const confirmButton = within(dialog).getByRole("button", {
+      name: "Delete",
+      hidden: false,
+    });
+    await user.click(confirmButton);
+    // arguments are workspace.name, log level (undefined), and orphan
+    expect(deleteWorkspaceMock).toBeCalledWith(
+      MockWorkspace.id,
+      undefined,
+      true,
+    );
+  });
+
   it("requests a start job when the user presses Start", async () => {
     server.use(
       rest.get(

diff --git a/site/src/pages/WorkspacePage/WorkspaceReadyPage.tsx b/site/src/pages/WorkspacePage/WorkspaceReadyPage.tsx
@@ -32,7 +32,7 @@ import { templateVersion, templateVersions } from "api/queries/templates";
 import { Alert } from "components/Alert/Alert";
 import { Stack } from "components/Stack/Stack";
 import { useWorkspaceBuildLogs } from "hooks/useWorkspaceBuildLogs";
-import { WorkspaceDeleteDialog } from "./WorkspaceDeleteDialog/WorkspaceDeleteDialog";
+import { WorkspaceDeleteDialog } from "./WorkspaceDeleteDialog";
 
 interface WorkspaceReadyPageProps {
   workspaceState: StateFrom<typeof workspaceMachine>;
@@ -211,6 +211,7 @@ export const WorkspaceReadyPage = ({
       />
       <WorkspaceDeleteDialog
         workspace={workspace}
+        canUpdateTemplate={canUpdateTemplate}
         isOpen={workspaceState.matches({ ready: { build: "askingDelete" } })}
         onCancel={() => workspaceSend({ type: "CANCEL_DELETE" })}
         onConfirm={(orphan) => {