fix: delete related task when deleting workspace (#20567)

* Instead of prompting the user to start a deleted workspace (which is
silly), prompt them to create a new task instead.
* Adds a warning dialog when deleting a workspace
* Updates provisionerdserver to delete the related task if a workspace
is related to a task

site/src/modules/workspaces/WorkspaceMoreActions/WorkspaceDeleteDialog.stories.tsx

@@ -1,4 +1,8 @@
-import { MockFailedWorkspace, MockWorkspace } from "testHelpers/entities";
+import {
+	MockFailedWorkspace,
+	MockTaskWorkspace,
+	MockWorkspace,
+} from "testHelpers/entities";
 import type { Meta, StoryObj } from "@storybook/react-vite";
 import { daysAgo } from "utils/time";
 import { WorkspaceDeleteDialog } from "./WorkspaceDeleteDialog";
@@ -45,3 +49,9 @@ export const UnhealthyAdminView: Story = {
 		canDeleteFailedWorkspace: true,
 	},
 };
+
+export const WithTask: Story = {
+	args: {
+		workspace: MockTaskWorkspace,
+	},
+};

site/src/modules/workspaces/WorkspaceMoreActions/WorkspaceDeleteDialog.tsx

@@ -56,6 +56,8 @@ export const WorkspaceDeleteDialog: FC<WorkspaceDeleteDialogProps> = ({
 		(workspace.latest_build.status === "failed" ||
 			workspace.latest_build.status === "canceled");
 
+	const hasTask = !!workspace.task_id;
+
 	return (
 		<ConfirmDialog
 			type="delete"
@@ -109,8 +111,24 @@ export const WorkspaceDeleteDialog: FC<WorkspaceDeleteDialogProps> = ({
 								"data-testid": "delete-dialog-name-confirmation",
 							}}
 						/>
+						{hasTask && (
+							<div css={styles.warnContainer}>
+								<div css={{ flexDirection: "column" }}>
+									<p className="info">This workspace is related to a task</p>
+									<span css={{ fontSize: 12, marginTop: 4, display: "block" }}>
+										Deleting this workspace will also delete{" "}
+										<Link
+											href={`/tasks/${workspace.owner_name}/${workspace.task_id}`}
+										>
+											this task
+										</Link>
+										.
+									</span>
+								</div>
+							</div>
+						)}
 						{canOrphan && (
-							<div css={styles.orphanContainer}>
+							<div css={styles.warnContainer}>
 								<div css={{ flexDirection: "column" }}>
 									<Checkbox
 										id="orphan_resources"
@@ -178,7 +196,7 @@ const styles = {
 			color: theme.palette.text.primary,
 		},
 	}),
-	orphanContainer: (theme) => ({
+	warnContainer: (theme) => ({
 		marginTop: 24,
 		display: "flex",
 		backgroundColor: theme.roles.danger.background,

site/src/pages/TaskPage/TaskPage.stories.tsx

@@ -1,4 +1,5 @@
 import {
+	MockDeletedWorkspace,
 	MockFailedWorkspace,
 	MockStartingWorkspace,
 	MockStoppedWorkspace,
@@ -169,6 +170,15 @@ export const TerminatedBuildWithStatus: Story = {
 	},
 };
 
+export const DeletedWorkspace: Story = {
+	beforeEach: () => {
+		spyOn(API.experimental, "getTask").mockResolvedValue(MockTask);
+		spyOn(API, "getWorkspaceByOwnerAndName").mockResolvedValue(
+			MockDeletedWorkspace,
+		);
+	},
+};
+
 export const WaitingStartupScripts: Story = {
 	beforeEach: () => {
 		spyOn(API.experimental, "getTask").mockResolvedValue(MockTask);

site/src/pages/TaskPage/TaskPage.tsx

@@ -221,7 +221,27 @@ const WorkspaceNotRunning: FC<WorkspaceNotRunningProps> = ({ workspace }) => {
 		? mutateStartWorkspace.error
 		: undefined;
 
-	return (
+	const deleted = workspace.latest_build?.transition === ("delete" as const);
+
+	return deleted ? (
+		<Margins>
+			<div className="w-full min-h-80 flex items-center justify-center">
+				<div className="flex flex-col items-center">
+					<h3 className="m-0 font-medium text-content-primary text-base">
+						Task workspace was deleted.
+					</h3>
+					<span className="text-content-secondary text-sm">
+						This task cannot be resumed. Delete this task and create a new one.
+					</span>
+					<Button size="sm" variant="outline" asChild className="mt-4">
+						<RouterLink to="/tasks" data-testid="task-create-new">
+							Create a new task
+						</RouterLink>
+					</Button>
+				</div>
+			</div>
+		</Margins>
+	) : (
 		<Margins>
 			<div className="w-full min-h-80 flex items-center justify-center">
 				<div className="flex flex-col items-center">