From caf8d0f4f5326071de7b4b2ae505de4d4fdb127b Mon Sep 17 00:00:00 2001
From: Danielle Maywood <danielle@themaywoods.com>
Date: Thu, 20 Nov 2025 12:54:27 +0000
Subject: [PATCH] fix(site): hide empty tasks list when templates are empty

Don't show the empty tasks section when there are no AI-enabled templates.
This prevents showing both empty states simultaneously.

Also add a Storybook story for the empty templates scenario.

Closes https://github.com/coder/internal/issues/1085
---
 .../src/pages/TasksPage/TasksPage.stories.tsx | 15 ++++
 site/src/pages/TasksPage/TasksPage.tsx        | 90 ++++++++++---------
 2 files changed, 61 insertions(+), 44 deletions(-)

diff --git a/site/src/pages/TasksPage/TasksPage.stories.tsx b/site/src/pages/TasksPage/TasksPage.stories.tsx
index 9bc3a82ad05d9..51d9acae88aad 100644
--- a/site/src/pages/TasksPage/TasksPage.stories.tsx
+++ b/site/src/pages/TasksPage/TasksPage.stories.tsx
@@ -51,6 +51,21 @@ export const LoadingTemplates: Story = {
 	},
 };
 
+export const EmptyTemplates: Story = {
+	parameters: {
+		queries: [
+			{
+				key: ["templates", { q: "has-ai-task:true" }],
+				data: [],
+			},
+			{
+				key: ["tasks", { owner: MockUserOwner.username }],
+				data: [],
+			},
+		],
+	},
+};
+
 export const LoadingTemplatesError: Story = {
 	beforeEach: () => {
 		spyOn(API, "getTemplates").mockRejectedValue(
diff --git a/site/src/pages/TasksPage/TasksPage.tsx b/site/src/pages/TasksPage/TasksPage.tsx
index f87c6af39f54d..e2b1e9712f229 100644
--- a/site/src/pages/TasksPage/TasksPage.tsx
+++ b/site/src/pages/TasksPage/TasksPage.tsx
@@ -68,52 +68,54 @@ const TasksPage: FC = () => {
 						error={aiTemplatesQuery.error}
 						onRetry={aiTemplatesQuery.refetch}
 					/>
-					{aiTemplatesQuery.isSuccess && (
-						<section className="py-8">
-							{permissions.viewDeploymentConfig && (
-								<section
-									className="mt-6 flex justify-between"
-									aria-label="Controls"
-								>
-									<div className="flex items-center bg-surface-secondary rounded p-1">
-										<PillButton
-											active={tab.value === "all"}
-											onClick={() => tab.setValue("all")}
-										>
-											All tasks
-										</PillButton>
-										<PillButton
-											disabled={!idleTasks || idleTasks.length === 0}
-											active={tab.value === "waiting-for-input"}
-											onClick={() => tab.setValue("waiting-for-input")}
-										>
-											Waiting for input
-											{idleTasks && idleTasks.length > 0 && (
-												<Badge className="-mr-0.5" size="xs" variant="info">
-													{idleTasks.length}
-												</Badge>
-											)}
-										</PillButton>
-									</div>
+					{aiTemplatesQuery.isSuccess &&
+						aiTemplatesQuery.data &&
+						aiTemplatesQuery.data.length > 0 && (
+							<section className="py-8">
+								{permissions.viewDeploymentConfig && (
+									<section
+										className="mt-6 flex justify-between"
+										aria-label="Controls"
+									>
+										<div className="flex items-center bg-surface-secondary rounded p-1">
+											<PillButton
+												active={tab.value === "all"}
+												onClick={() => tab.setValue("all")}
+											>
+												All tasks
+											</PillButton>
+											<PillButton
+												disabled={!idleTasks || idleTasks.length === 0}
+												active={tab.value === "waiting-for-input"}
+												onClick={() => tab.setValue("waiting-for-input")}
+											>
+												Waiting for input
+												{idleTasks && idleTasks.length > 0 && (
+													<Badge className="-mr-0.5" size="xs" variant="info">
+														{idleTasks.length}
+													</Badge>
+												)}
+											</PillButton>
+										</div>
 
-									<UsersCombobox
-										value={ownerFilter.value}
-										onValueChange={(username) => {
-											ownerFilter.setValue(
-												username === ownerFilter.value ? "" : username,
-											);
-										}}
-									/>
-								</section>
-							)}
+										<UsersCombobox
+											value={ownerFilter.value}
+											onValueChange={(username) => {
+												ownerFilter.setValue(
+													username === ownerFilter.value ? "" : username,
+												);
+											}}
+										/>
+									</section>
+								)}
 
-							<TasksTable
-								tasks={displayedTasks}
-								error={tasksQuery.error}
-								onRetry={tasksQuery.refetch}
-							/>
-						</section>
-					)}
+								<TasksTable
+									tasks={displayedTasks}
+									error={tasksQuery.error}
+									onRetry={tasksQuery.refetch}
+								/>
+							</section>
+						)}
 				</main>
 			</Margins>
 		</>