Brett/bq 19573

site/src/api/api.ts

@@ -2695,7 +2695,7 @@ class ExperimentalApiMethods {
 		return response.data;
 	};
 
-	getTasks = async (filter: TasksFilter): Promise<Task[]> => {
+	getTasks = async (filter: TasksFilter = {}): Promise<Task[]> => {
 		const queryExpressions = ["has-ai-task:true"];
 
 		if (filter.username) {

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

@@ -2,6 +2,8 @@ import {
 	MockFailedWorkspace,
 	MockStartingWorkspace,
 	MockStoppedWorkspace,
+	MockTasks,
+	MockUserOwner,
 	MockWorkspace,
 	MockWorkspaceAgentLogSource,
 	MockWorkspaceAgentReady,
@@ -13,20 +15,55 @@ import {
 } from "testHelpers/entities";
 import { withProxyProvider, withWebSocket } from "testHelpers/storybook";
 import type { Meta, StoryObj } from "@storybook/react-vite";
+import { API } from "api/api";
+import { getAuthorizationKey } from "api/queries/authCheck";
+import { meKey } from "api/queries/users";
 import type {
 	Workspace,
 	WorkspaceApp,
 	WorkspaceResource,
 } from "api/typesGenerated";
+import { AuthProvider } from "contexts/auth/AuthProvider";
+import { permissionChecks } from "modules/permissions";
+import TasksLayout from "pages/TasksLayout/TasksLayout";
 import { expect, spyOn, within } from "storybook/test";
+import {
+	reactRouterNestedAncestors,
+	reactRouterParameters,
+} from "storybook-addon-remix-react-router";
 import TaskPage, { data, WorkspaceDoesNotHaveAITaskError } from "./TaskPage";
 
+const MockTaskWorkspace = MockTasks[0].workspace;
+
 const meta: Meta<typeof TaskPage> = {
 	title: "pages/TaskPage",
 	component: TaskPage,
 	decorators: [withProxyProvider()],
+	beforeEach: () => {
+		spyOn(API.experimental, "getTasks").mockResolvedValue(MockTasks);
+	},
 	parameters: {
 		layout: "fullscreen",
+		queries: [
+			{ key: meKey, data: MockUserOwner },
+			{ key: getAuthorizationKey({ checks: permissionChecks }), data: {} },
+		],
+		reactRouter: reactRouterParameters({
+			location: {
+				pathParams: {
+					user: MockTaskWorkspace.owner_name,
+					workspace: MockTaskWorkspace.name,
+				},
+			},
+			routing: reactRouterNestedAncestors({
+				path: "/tasks/:user/:workspace",
+				element: (
+					<AuthProvider>
+						<TasksLayout />
+					</AuthProvider>
+				),
+			}),
+		}),
 	},
 };
 
@@ -96,7 +133,7 @@ export const WaitingOnStatus: Story = {
 		spyOn(data, "fetchTask").mockResolvedValue({
 			prompt: "Create competitors page",
 			workspace: {
-				...MockWorkspace,
+				...MockTaskWorkspace,
 				latest_app_status: null,
 				latest_build: {
 					...MockWorkspace.latest_build,
@@ -114,7 +151,7 @@ export const WaitingStartupScripts: Story = {
 		spyOn(data, "fetchTask").mockResolvedValue({
 			prompt: "Create competitors page",
 			workspace: {
-				...MockWorkspace,
+				...MockTaskWorkspace,
 				latest_build: {
 					...MockWorkspace.latest_build,
 					has_ai_task: true,
@@ -150,12 +187,12 @@ export const WaitingStartupScripts: Story = {
 	},
 };
 
-export const SidebarAppHealthDisabled: Story = {
+export const ChatAppHealthDisabled: Story = {
 	beforeEach: () => {
 		spyOn(data, "fetchTask").mockResolvedValue({
 			prompt: "Create competitors page",
 			workspace: {
-				...MockWorkspace,
+				...MockTaskWorkspace,
 				latest_build: {
 					...MockWorkspace.latest_build,
 					has_ai_task: true,
@@ -171,12 +208,12 @@ export const SidebarAppHealthDisabled: Story = {
 	},
 };
 
-export const SidebarAppLoading: Story = {
+export const ChatAppLoading: Story = {
 	beforeEach: () => {
 		spyOn(data, "fetchTask").mockResolvedValue({
 			prompt: "Create competitors page",
 			workspace: {
-				...MockWorkspace,
+				...MockTaskWorkspace,
 				latest_build: {
 					...MockWorkspace.latest_build,
 					has_ai_task: true,
@@ -192,12 +229,12 @@ export const SidebarAppLoading: Story = {
 	},
 };
 
-export const SidebarAppHealthy: Story = {
+export const ChatAppHealthy: Story = {
 	beforeEach: () => {
 		spyOn(data, "fetchTask").mockResolvedValue({
 			prompt: "Create competitors page",
 			workspace: {
-				...MockWorkspace,
+				...MockTaskWorkspace,
 				latest_build: {
 					...MockWorkspace.latest_build,
 					has_ai_task: true,
@@ -218,7 +255,7 @@ const mainAppHealthStory = (health: WorkspaceApp["health"]) => ({
 		spyOn(data, "fetchTask").mockResolvedValue({
 			prompt: "Create competitors page",
 			workspace: {
-				...MockWorkspace,
+				...MockTaskWorkspace,
 				latest_build: {
 					...MockWorkspace.latest_build,
 					resources: mockResources({
@@ -302,7 +339,7 @@ const mockResources = (
 
 const activeWorkspace = (apps: WorkspaceApp[]): Workspace => {
 	return {
-		...MockWorkspace,
+		...MockTaskWorkspace,
 		latest_build: {
 			...MockWorkspace.latest_build,
 			resources: mockResources({ apps }),

site/src/pages/TaskPage/TaskPage.tsx

@@ -88,7 +88,7 @@ const TaskPage = () => {
 				<Helmet>
 					<title>{pageTitle("Loading task")}</title>
 				</Helmet>
-				<Loader fullscreen />
+				<Loader className="h-full" />
 			</>
 		);
 	}

site/src/pages/TaskPage/TaskTopbar.tsx

@@ -7,7 +7,6 @@ import {
 } from "components/Tooltip/Tooltip";
 import { useClipboard } from "hooks";
 import {
-	ArrowLeftIcon,
 	CheckIcon,
 	CopyIcon,
 	LaptopMinimalIcon,
@@ -22,21 +21,7 @@ type TaskTopbarProps = { task: Task };
 
 export const TaskTopbar: FC<TaskTopbarProps> = ({ task }) => {
 	return (
-		<header className="flex flex-shrink-0 items-center px-3 py-4 border-solid border-border border-0 border-b">
-			<TooltipProvider>
-				<Tooltip>
-					<TooltipTrigger asChild>
-						<Button size="icon" variant="subtle" asChild>
-							<RouterLink to="/tasks">
-								<ArrowLeftIcon />
-								<span className="sr-only">Back to tasks</span>
-							</RouterLink>
-						</Button>
-					</TooltipTrigger>
-					<TooltipContent>Back to tasks</TooltipContent>
-				</Tooltip>
-			</TooltipProvider>
-
+		<header className="flex flex-shrink-0 items-center px-3 py-2 border-solid border-border border-0 border-b">
 			<h1 className="m-0 pl-2 text-base font-medium truncate">
 				{task.workspace.name}
 			</h1>

site/src/pages/TasksLayout/TasksLayout.tsx

@@ -0,0 +1,16 @@
+import type { FC } from "react";
+import { Outlet } from "react-router";
+import { TasksSidebar } from "./TasksSidebar";
+
+const TasksLayout: FC = () => {
+	return (
+		<div className="flex flex-1 min-h-0 h-full">
+			<TasksSidebar />
+			<main className="flex-1">
+				<Outlet />
+			</main>
+		</div>
+	);
+};
+
+export default TasksLayout;