feat: associate task icon with workspaces (#20834)

## Problem

Workspaces associated with tasks were not visually distinguishable in
the workspaces list view. Additionally, the list workspaces endpoint was
not returning the `task_id` field.

<img width="2784" height="864" alt="Screenshot 2025-11-20 at 10 32 22"
src="https://github.com/user-attachments/assets/60704f16-3c66-4553-9215-f10654998a38"
/>

## Changes

- Fix `ConvertWorkspaceRows` to include `task_id` in the list workspaces
endpoint response
- Add "Task" icon to the workspace list view for workspaces associated
with tasks
- Add test to verify `task_id` is correctly returned by the list
workspaces endpoint
- Add Storybook story to showcase the Task icon in the workspace list

Closes https://github.com/coder/coder/issues/20802
This commit is contained in:
Susana Ferreira
2025-11-21 11:47:10 +00:00
committed by GitHub
parent 2840fdcb54
commit 2a9afc77de
4 changed files with 81 additions and 0 deletions
@@ -2,6 +2,7 @@ import {
MockBuildInfo,
MockOrganization,
MockPendingProvisionerJob,
MockTaskWorkspace,
MockTemplate,
MockUserOwner,
MockWorkspace,
@@ -381,3 +382,18 @@ export const ShowOrganizations: Story = {
expect(accessibleTableCell).toBeDefined();
},
};
export const ShowWorkspaceTasks: Story = {
args: {
workspaces: [
{
...MockWorkspace,
name: "regular-user-workspace",
},
{
...MockTaskWorkspace,
name: "task-workspace",
},
],
},
};
@@ -17,6 +17,7 @@ import type {
import { Avatar } from "components/Avatar/Avatar";
import { AvatarData } from "components/Avatar/AvatarData";
import { AvatarDataSkeleton } from "components/Avatar/AvatarDataSkeleton";
import { Badge } from "components/Badge/Badge";
import { Button } from "components/Button/Button";
import { ConfirmDialog } from "components/Dialogs/ConfirmDialog/ConfirmDialog";
import { ExternalImage } from "components/ExternalImage/ExternalImage";
@@ -207,6 +208,11 @@ export const WorkspacesTable: FC<WorkspacesTableProps> = ({
{workspace.outdated && (
<WorkspaceOutdatedTooltip workspace={workspace} />
)}
{workspace.task_id && (
<Badge size="xs" variant="default">
Task
</Badge>
)}
</Stack>
}
subtitle={