diff --git a/site/src/pages/AgentsPage/AgentsPage.stories.tsx b/site/src/pages/AgentsPage/AgentsPage.stories.tsx index 7e9891af8d..8bae8797c4 100644 --- a/site/src/pages/AgentsPage/AgentsPage.stories.tsx +++ b/site/src/pages/AgentsPage/AgentsPage.stories.tsx @@ -1,3 +1,4 @@ +import { MockWorkspace } from "testHelpers/entities"; import type { Meta, StoryObj } from "@storybook/react-vite"; import { API } from "api/api"; import { useRef } from "react"; @@ -76,6 +77,48 @@ type Story = StoryObj; export const Default: Story = {}; +export const WithWorkspaces: Story = { + beforeEach: () => { + localStorage.clear(); + spyOn(API, "getWorkspaces").mockResolvedValue({ + workspaces: [ + { + ...MockWorkspace, + id: "ws-1", + name: "my-project", + owner_name: "johndoe", + owner_id: "user-1", + }, + { + ...MockWorkspace, + id: "ws-2", + name: "my-project", + owner_name: "janedoe", + owner_id: "user-2", + }, + { + ...MockWorkspace, + id: "ws-3", + name: "backend-api", + owner_name: "johndoe", + owner_id: "user-1", + }, + ], + count: 3, + }); + }, + play: async ({ canvasElement }) => { + const canvas = within(canvasElement); + await waitFor(() => { + const trigger = canvas.getByText("Workspace").closest("button")!; + expect(trigger).toBeEnabled(); + }); + await userEvent.click(canvas.getByText("Workspace").closest("button")!); + // Wait for the portalled dropdown to appear so Chromatic captures it. + await within(canvasElement.ownerDocument.body).findByRole("listbox"); + }, +}; + export const SavesBehaviorPromptAndRestores: Story = { play: async ({ canvasElement }) => { const host = canvasElement.ownerDocument.querySelector( diff --git a/site/src/pages/AgentsPage/AgentsPage.tsx b/site/src/pages/AgentsPage/AgentsPage.tsx index 1f66979e83..370932287c 100644 --- a/site/src/pages/AgentsPage/AgentsPage.tsx +++ b/site/src/pages/AgentsPage/AgentsPage.tsx @@ -597,7 +597,7 @@ export const AgentsEmptyState: FC = ({ useState(initialSystemPrompt); const [isConfigureAgentsDialogOpen, setConfigureAgentsDialogOpen] = useState(false); - const workspacesQuery = useQuery(workspaces({ limit: 50 })); + const workspacesQuery = useQuery(workspaces({ q: "owner:me", limit: 50 })); const [selectedWorkspaceId, setSelectedWorkspaceId] = useState( () => { if (typeof window === "undefined") return null; @@ -711,9 +711,12 @@ export const AgentsEmptyState: FC = ({ [onCreateChat], ); - const selectedWorkspaceName = selectedWorkspaceId - ? workspaceOptions.find((ws) => ws.id === selectedWorkspaceId)?.name - : null; + const selectedWorkspace = selectedWorkspaceId + ? workspaceOptions.find((ws) => ws.id === selectedWorkspaceId) + : undefined; + const selectedWorkspaceLabel = selectedWorkspace + ? `${selectedWorkspace.owner_name}/${selectedWorkspace.name}` + : undefined; return (
@@ -760,7 +763,7 @@ export const AgentsEmptyState: FC = ({ - {selectedWorkspaceName ?? "Workspace"} + {selectedWorkspaceLabel ?? "Workspace"} = ({ {workspaceOptions.map((workspace) => ( - {workspace.name} + {workspace.owner_name}/{workspace.name} ))} {workspaceOptions.length === 0 &&