diff --git a/site/src/components/AvatarData/AvatarData.tsx b/site/src/components/AvatarData/AvatarData.tsx index 7ec8daa25a6fb..e1598feb29d4b 100644 --- a/site/src/components/AvatarData/AvatarData.tsx +++ b/site/src/components/AvatarData/AvatarData.tsx @@ -54,7 +54,7 @@ export const AvatarData: FC = ({ css={{ fontSize: 13, color: theme.palette.text.secondary, - lineHeight: "150%", + lineHeight: 1.5, maxWidth: 540, }} > diff --git a/site/src/pages/WorkspacesPage/WorkspacesPageView.stories.tsx b/site/src/pages/WorkspacesPage/WorkspacesPageView.stories.tsx index f3607cbe00f06..503c76b24d0e1 100644 --- a/site/src/pages/WorkspacesPage/WorkspacesPageView.stories.tsx +++ b/site/src/pages/WorkspacesPage/WorkspacesPageView.stories.tsx @@ -1,4 +1,5 @@ import type { Meta, StoryObj } from "@storybook/react"; +import { expect, within } from "@storybook/test"; import { type Workspace, type WorkspaceStatus, @@ -265,3 +266,30 @@ export const InvalidPageNumber: Story = { page: 1000, }, }; + +export const ShowOrganizations: Story = { + args: { + workspaces: [ + { + ...MockWorkspace, + organization_name: "Limbus Co.", + }, + ], + }, + + parameters: { + showOrganizations: true, + }, + + play: async ({ canvasElement }) => { + const canvas = within(canvasElement); + const accessibleTableCell = await canvas.findByRole("cell", { + // Need whitespace classes because different parts of the element + // are going in different spans, and Storybook doesn't consolidate + // these + name: /org\s?(?:anization)?\s?:\s?Limbus Co\./i, + }); + + expect(accessibleTableCell).toBeDefined(); + }, +}; diff --git a/site/src/pages/WorkspacesPage/WorkspacesTable.tsx b/site/src/pages/WorkspacesPage/WorkspacesTable.tsx index 77f2d26685640..8998d0d6ac314 100644 --- a/site/src/pages/WorkspacesPage/WorkspacesTable.tsx +++ b/site/src/pages/WorkspacesPage/WorkspacesTable.tsx @@ -9,6 +9,7 @@ import TableCell from "@mui/material/TableCell"; import TableContainer from "@mui/material/TableContainer"; import TableHead from "@mui/material/TableHead"; import TableRow from "@mui/material/TableRow"; +import { visuallyHidden } from "@mui/utils"; import type { Template, Workspace } from "api/typesGenerated"; import { ExternalAvatar } from "components/Avatar/Avatar"; import { AvatarData } from "components/AvatarData/AvatarData"; @@ -20,6 +21,7 @@ import { TableRowSkeleton, } from "components/TableLoader/TableLoader"; import { useClickableTableRow } from "hooks/useClickableTableRow"; +import { useDashboard } from "modules/dashboard/useDashboard"; import { WorkspaceDormantBadge } from "modules/workspaces/WorkspaceDormantBadge/WorkspaceDormantBadge"; import { WorkspaceOutdatedTooltip } from "modules/workspaces/WorkspaceOutdatedTooltip/WorkspaceOutdatedTooltip"; import { WorkspaceStatusBadge } from "modules/workspaces/WorkspaceStatusBadge/WorkspaceStatusBadge"; @@ -52,6 +54,7 @@ export const WorkspacesTable: FC = ({ canCreateTemplate, }) => { const theme = useTheme(); + const dashboard = useDashboard(); return ( @@ -172,7 +175,12 @@ export const WorkspacesTable: FC = ({ )} } - subtitle={workspace.owner_name} + subtitle={ +
+ User: + {workspace.owner_name} +
+ } avatar={ = ({ - {getDisplayWorkspaceTemplateName(workspace)} +
{getDisplayWorkspaceTemplateName(workspace)}
+ + {dashboard.showOrganizations && ( +
+ Organization: + {workspace.organization_name} +
+ )}