From 97ee54a8c1224090e8fefadbd38679e5c54b77fd Mon Sep 17 00:00:00 2001
From: Atif Ali <atif@coder.com>
Date: Tue, 12 May 2026 18:45:20 +0500
Subject: [PATCH] fix(site): clarify deleted workspace actions (#25186)
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

## Summary
Updates the deleted workspace banner so its CTA recreates from the
original template instead of sending users to the generic templates
list.

## Changes
- Change the CTA to `Create another from <template>`.
- Link the CTA to the original template workspace create flow.
- Shorten the banner copy to `This workspace has been deleted.`

## Validation
- `pnpm exec biome check --error-on-warnings
src/pages/WorkspacePage/Workspace.tsx
src/pages/WorkspacePage/WorkspaceDeletedBanner.tsx
src/pages/WorkspacePage/WorkspaceDeletedBanner.stories.tsx`
- `pnpm run lint:types`
- `git diff --check`
- `git commit` pre-commit hooks

> 🤖 This PR was created with the help of Coder Agents, and needs a human
review. 🧑💻
---
 site/src/pages/WorkspacePage/Workspace.tsx    | 12 +++++++++---
 .../WorkspaceDeletedBanner.stories.tsx        |  4 ++++
 .../WorkspacePage/WorkspaceDeletedBanner.tsx  | 19 ++++++++++++-------
 3 files changed, 25 insertions(+), 10 deletions(-)

diff --git a/site/src/pages/WorkspacePage/Workspace.tsx b/site/src/pages/WorkspacePage/Workspace.tsx
index 8aa18a5277..9fa15df168 100644
--- a/site/src/pages/WorkspacePage/Workspace.tsx
+++ b/site/src/pages/WorkspacePage/Workspace.tsx
@@ -1,10 +1,10 @@
 import { BlocksIcon, HistoryIcon } from "lucide-react";
 import type { FC } from "react";
-import { useNavigate } from "react-router";
 import type * as TypesGen from "#/api/typesGenerated";
 import { Alert, AlertDescription, AlertTitle } from "#/components/Alert/Alert";
 import { SidebarIconButton } from "#/components/FullPageLayout/Sidebar";
 import { useSearchParamsKey } from "#/hooks/useSearchParamsKey";
+import { linkToTemplate, useLinks } from "#/modules/navigation";
 import { ProvisionerStatusAlert } from "#/modules/provisioners/ProvisionerStatusAlert";
 import { AgentRow } from "#/modules/resources/AgentRow";
 import { WorkspaceTimings } from "#/modules/workspaces/WorkspaceTiming/WorkspaceTimings";
@@ -64,7 +64,12 @@ export const Workspace: FC<WorkspaceProps> = ({
 	handleRetry,
 	handleDebug,
 }) => {
-	const navigate = useNavigate();
+	const getLink = useLinks();
+	const createWorkspaceLink = `${getLink(
+		linkToTemplate(workspace.organization_name, workspace.template_name),
+	)}/workspace`;
+	const templateName =
+		workspace.template_display_name || workspace.template_name;
 
 	const transitionStats =
 		template !== undefined
@@ -166,7 +171,8 @@ export const Workspace: FC<WorkspaceProps> = ({
 						<div className="flex flex-col gap-6 max-w-[1200px] m-auto">
 							{workspace.latest_build.status === "deleted" && (
 								<WorkspaceDeletedBanner
-									handleClick={() => navigate("/templates")}
+									createWorkspaceLink={createWorkspaceLink}
+									templateName={templateName}
 								/>
 							)}
 
diff --git a/site/src/pages/WorkspacePage/WorkspaceDeletedBanner.stories.tsx b/site/src/pages/WorkspacePage/WorkspaceDeletedBanner.stories.tsx
index 428ff85f6a..d37eb193f8 100644
--- a/site/src/pages/WorkspacePage/WorkspaceDeletedBanner.stories.tsx
+++ b/site/src/pages/WorkspacePage/WorkspaceDeletedBanner.stories.tsx
@@ -4,6 +4,10 @@ import { WorkspaceDeletedBanner } from "./WorkspaceDeletedBanner";
 const meta: Meta<typeof WorkspaceDeletedBanner> = {
 	title: "pages/WorkspacePage/WorkspaceDeletedBanner",
 	component: WorkspaceDeletedBanner,
+	args: {
+		createWorkspaceLink: "/templates/test-template/workspace",
+		templateName: "Test Template",
+	},
 };
 
 export default meta;
diff --git a/site/src/pages/WorkspacePage/WorkspaceDeletedBanner.tsx b/site/src/pages/WorkspacePage/WorkspaceDeletedBanner.tsx
index 189fa64e67..eca9c6eaae 100644
--- a/site/src/pages/WorkspacePage/WorkspaceDeletedBanner.tsx
+++ b/site/src/pages/WorkspacePage/WorkspaceDeletedBanner.tsx
@@ -1,23 +1,28 @@
 import type { FC } from "react";
+import { Link as RouterLink } from "react-router";
 import { Alert } from "#/components/Alert/Alert";
 import { Button } from "#/components/Button/Button";
 
 interface WorkspaceDeletedBannerProps {
-	handleClick: () => void;
+	createWorkspaceLink: string;
+	templateName: string;
 }
 
 export const WorkspaceDeletedBanner: FC<WorkspaceDeletedBannerProps> = ({
-	handleClick,
+	createWorkspaceLink,
+	templateName,
 }) => {
-	const NewWorkspaceButton = (
-		<Button onClick={handleClick} size="sm">
-			Create new workspace
+	const createWorkspaceButton = (
+		<Button asChild size="sm">
+			<RouterLink to={createWorkspaceLink}>
+				Create another from {templateName}
+			</RouterLink>
 		</Button>
 	);
 
 	return (
-		<Alert severity="warning" prominent actions={NewWorkspaceButton}>
-			This workspace has been deleted and cannot be edited.
+		<Alert severity="warning" prominent actions={createWorkspaceButton}>
+			This workspace has been deleted.
 		</Alert>
 	);
 };