fix: show task display name in task topbar (#20957) (#20980)

Related to PR: #20957

(cherry picked from commit 21efebe)

Author: ssncferreira

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

@@ -1,5 +1,6 @@
 import {
 	MockDeletedWorkspace,
+	MockDisplayNameTasks,
 	MockFailedWorkspace,
 	MockStartingWorkspace,
 	MockStoppedWorkspace,
@@ -561,6 +562,38 @@ export const WorkspaceStartFailureWithDialog: Story = {
 	},
 };
 
+const longDisplayName =
+	"Implement comprehensive authentication and authorization system with role-based access control";
+export const LongDisplayName: Story = {
+	parameters: {
+		queries: [
+			{
+				// Sidebar: uses getTasks() which returns an array
+				key: ["tasks", { owner: MockTask.owner_name }],
+				data: [
+					{ ...MockDisplayNameTasks[0], display_name: longDisplayName },
+					...MockDisplayNameTasks.slice(1),
+				],
+			},
+			{
+				// TaskTopbar: uses getTask() which returns a single task
+				key: ["tasks", MockTask.owner_name, MockTask.id],
+				data: { ...MockDisplayNameTasks[0], display_name: longDisplayName },
+			},
+			{
+				// Workspace data for the task
+				key: [
+					"workspace",
+					MockTask.owner_name,
+					MockTask.workspace_name,
+					"settings",
+				],
+				data: MockWorkspace,
+			},
+		],
+	},
+};
+
 function mockTaskWithWorkspace(
 	sidebarApp: WorkspaceApp,
 	activeApp: WorkspaceApp,

site/src/pages/TaskPage/TaskTopbar.tsx

@@ -23,7 +23,7 @@ type TaskTopbarProps = { task: Task; workspace: Workspace };
 
 export const TaskTopbar: FC<TaskTopbarProps> = ({ task, workspace }) => {
 	return (
-		<header className="flex flex-shrink-0 items-center p-3 border-solid border-border border-0 border-b">
+		<header className="flex flex-shrink-0 items-center gap-2 p-3 border-solid border-border border-0 border-b">
 			<TooltipProvider>
 				<Tooltip>
 					<TooltipTrigger asChild>
@@ -38,7 +38,9 @@ export const TaskTopbar: FC<TaskTopbarProps> = ({ task, workspace }) => {
 				</Tooltip>
 			</TooltipProvider>
 
-			<h1 className="m-0 pl-2 text-base font-medium truncate">{task.name}</h1>
+			<h1 className="m-0 pl-2 text-base font-medium max-w-[520px] truncate">
+				{task.display_name}
+			</h1>
 
 			{task.current_state?.uri && (
 				<div className="flex items-center gap-2 flex-wrap ml-4">

site/src/testHelpers/entities.ts

@@ -4971,8 +4971,8 @@ export const MockAIPromptPresets: TypesGen.Preset[] = [
 
 export const MockTask = {
 	id: "test-task",
-	name: "wild-test-123",
-	display_name: "Task wild test",
+	name: "perform-some-task-123",
+	display_name: "Perform some task",
 	organization_id: MockOrganization.id,
 	owner_id: MockUserOwner.id,
 	owner_name: MockUserOwner.username,