Skip to content

Commit 2f399ea

Browse files
ssncferreirassncferreira
authored
feat(site): use display name field for tasks (#20918)
## Description This PR updates the frontend to use the new `display_name` field for tasks. In the tasks list view, `display_name` replaces `initial_prompt`, and in the tasks sidebar, `display_name` replaces `name`. This is a follow-up to #20856, which introduced the `display_name` field in the backend. ## Changes - Display `task.display_name` instead of `task.initial_prompt` in the tasks table - Display `task.display_name` instead of `task.name` in the task sidebar view - Updated mock data to include `display_name` for all test tasks - Added Storybook story to showcase display name rendering with different lengths (short, max length with ellipsis, and edge cases) Follow-up: #20856 Closes: #20801
1 parent 02bac71 commit 2f399ea

File tree

5 files changed

+84
-11
lines changed

5 files changed

+84
-11
lines changed

‎site/src/modules/tasks/TasksSidebar/TasksSidebar.stories.tsx‎

Lines changed: 17 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,9 @@
1-
import { MockTasks, MockUserOwner, mockApiError } from "testHelpers/entities";
1+
import {
2+
MockDisplayNameTasks,
3+
MockTasks,
4+
MockUserOwner,
5+
mockApiError,
6+
} from "testHelpers/entities";
27
import { withAuthProvider } from "testHelpers/storybook";
38
import type { Meta, StoryObj } from "@storybook/react-vite";
49
import { API } from "api/api";
@@ -64,6 +69,17 @@ export const Loaded: Story = {
6469
},
6570
};
6671

72+
export const DisplayName: Story = {
73+
parameters: {
74+
queries: [
75+
{
76+
key: ["tasks", { owner: MockUserOwner.username }],
77+
data: MockDisplayNameTasks,
78+
},
79+
],
80+
},
81+
};
82+
6783
export const Empty: Story = {
6884
beforeEach: () => {
6985
spyOn(API.experimental, "getTasks").mockResolvedValue([]);

‎site/src/modules/tasks/TasksSidebar/TasksSidebar.tsx‎

Lines changed: 3 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -203,7 +203,9 @@ const TaskSidebarMenuItem: FC<TaskSidebarMenuItemProps> = ({ task }) => {
203203
}}
204204
>
205205
<TaskSidebarMenuItemStatus task={task} />
206-
<span className="truncate">{task.name}</span>
206+
<span className="block max-w-[220px] truncate">
207+
{task.display_name}
208+
</span>
207209
<DropdownMenu>
208210
<DropdownMenuTrigger asChild>
209211
<Button

‎site/src/pages/TasksPage/TasksPage.stories.tsx‎

Lines changed: 16 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,5 @@
11
import {
2+
MockDisplayNameTasks,
23
MockInitializingTasks,
34
MockTasks,
45
MockTemplate,
@@ -122,6 +123,21 @@ export const LoadedTasks: Story = {
122123
},
123124
};
124125

126+
export const DisplayName: Story = {
127+
parameters: {
128+
queries: [
129+
{
130+
key: ["tasks", { owner: MockUserOwner.username }],
131+
data: MockDisplayNameTasks,
132+
},
133+
{
134+
key: getTemplatesQueryKey({ q: "has-ai-task:true" }),
135+
data: [MockTemplate],
136+
},
137+
],
138+
},
139+
};
140+
125141
export const LoadedTasksWaitingForInputTab: Story = {
126142
beforeEach: () => {
127143
const [firstTask, ...otherTasks] = MockTasks;

‎site/src/pages/TasksPage/TasksTable.tsx‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -135,8 +135,8 @@ const TaskRow: FC<TaskRowProps> = ({ task }) => {
135135
<TableCell>
136136
<AvatarData
137137
title={
138-
<span className="block max-w-[520px] overflow-hidden text-ellipsis whitespace-nowrap">
139-
{task.initial_prompt}
138+
<span className="block max-w-[520px] truncate">
139+
{task.display_name}
140140
</span>
141141
}
142142
subtitle={templateDisplayName}

‎site/src/testHelpers/entities.ts‎

Lines changed: 46 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -4996,8 +4996,8 @@ export const MockAIPromptPresets: TypesGen.Preset[] = [
49964996

49974997
export const MockTask = {
49984998
id: "test-task",
4999-
name: "task-wild-test-123",
5000-
display_name: "Task wild test 123",
4999+
name: "wild-test-123",
5000+
display_name: "Task wild test",
50015001
organization_id: MockOrganization.id,
50025002
owner_id: MockUserOwner.id,
50035003
owner_name: MockUserOwner.username,
@@ -5038,6 +5038,7 @@ export const MockTasks = [
50385038
...MockTask,
50395039
id: "task-2",
50405040
name: "fix-avatar-size",
5041+
display_name: "Fix avatar size",
50415042
current_state: {
50425043
...MockTask.current_state,
50435044
message: "Avatar size fixed!",
@@ -5048,6 +5049,7 @@ export const MockTasks = [
50485049
...MockTask,
50495050
id: "task-3",
50505051
name: "fix-accessibility-issues",
5052+
display_name: "Fix accessibility issues",
50515053
current_state: {
50525054
...MockTask.current_state,
50535055
message: "Accessibility issues fixed!",
@@ -5060,7 +5062,8 @@ export const MockInitializingTasks = [
50605062
{
50615063
...MockTask,
50625064
id: "task-1",
5063-
name: "task-workspace-pending",
5065+
name: "workspace-pending",
5066+
display_name: "Workspace pending",
50645067
initial_prompt: "Task Workspace Pending",
50655068
status: "initializing",
50665069
current_state: {
@@ -5073,7 +5076,8 @@ export const MockInitializingTasks = [
50735076
{
50745077
...MockTask,
50755078
id: "task-2",
5076-
name: "task-workspace-starting",
5079+
name: "workspace-starting",
5080+
display_name: "Workspace starting",
50775081
initial_prompt: "Task Workspace Starting",
50785082
status: "initializing",
50795083
current_state: {
@@ -5086,7 +5090,8 @@ export const MockInitializingTasks = [
50865090
{
50875091
...MockTask,
50885092
id: "task-3",
5089-
name: "task-agent-connecting",
5093+
name: "agent-connecting",
5094+
display_name: "Agent connecting",
50905095
initial_prompt: "Task Agent Connecting",
50915096
status: "initializing",
50925097
current_state: {
@@ -5099,7 +5104,8 @@ export const MockInitializingTasks = [
50995104
{
51005105
...MockTask,
51015106
id: "task-4",
5102-
name: "task-agent-starting",
5107+
name: "agent-starting",
5108+
display_name: "Agent Starting",
51035109
initial_prompt: "Task Agent Starting",
51045110
status: "initializing",
51055111
current_state: {
@@ -5112,7 +5118,8 @@ export const MockInitializingTasks = [
51125118
{
51135119
...MockTask,
51145120
id: "task-5",
5115-
name: "task-app-initializing",
5121+
name: "app-initializing",
5122+
display_name: "App Initializing",
51165123
initial_prompt: "Task App Initializing",
51175124
status: "initializing",
51185125
current_state: {
@@ -5124,6 +5131,38 @@ export const MockInitializingTasks = [
51245131
},
51255132
] satisfies TypesGen.Task[];
51265133

5134+
export const MockDisplayNameTasks = [
5135+
{
5136+
...MockTask,
5137+
},
5138+
{
5139+
...MockTask,
5140+
id: "task-4",
5141+
name: "validate-email-regex",
5142+
// Display name with 64 characters with ellipsis
5143+
display_name:
5144+
"Write a function to validate email addresses using regular expr…",
5145+
current_state: {
5146+
...MockTask.current_state,
5147+
message: "Email validation complete!",
5148+
state: "complete",
5149+
},
5150+
},
5151+
{
5152+
...MockTask,
5153+
id: "payment-api-tests",
5154+
name: "payment-api-tests",
5155+
// Display name with 81 characters
5156+
display_name:
5157+
"Create a comprehensive test suite for the new payment processing microservice API",
5158+
current_state: {
5159+
...MockTask.current_state,
5160+
message: "Test suite created!",
5161+
state: "complete",
5162+
},
5163+
},
5164+
] satisfies TypesGen.Task[];
5165+
51275166
export const MockInterception: TypesGen.AIBridgeInterception = {
51285167
id: "5c1da48a-9eb0-440e-9c82-5bc5692a603d",
51295168
initiator: {

0 commit comments

Comments
 (0)