feat: show organization name in workspaces table (coder#14547)

Parkreiner · web-flow · commit c2491746bac9 · 2024-09-05T12:32:21.000-04:00
* chore: add organization label to workspace template column

* chore: add test for presence of showOrganizations context value

* fix: organize imports

* fix: expose table row subtitles only to screen readers
diff --git a/site/src/components/AvatarData/AvatarData.tsx b/site/src/components/AvatarData/AvatarData.tsx
@@ -54,7 +54,7 @@ export const AvatarData: FC<AvatarDataProps> = ({
 						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
@@ -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
@@ -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<WorkspacesTableProps> = ({
 	canCreateTemplate,
 }) => {
 	const theme = useTheme();
+	const dashboard = useDashboard();
 
 	return (
 		<TableContainer>
@@ -172,7 +175,12 @@ export const WorkspacesTable: FC<WorkspacesTableProps> = ({
 													)}
 												</Stack>
 											}
-											subtitle={workspace.owner_name}
+											subtitle={
+												<div>
+													<span css={{ ...visuallyHidden }}>User: </span>
+													{workspace.owner_name}
+												</div>
+											}
 											avatar={
 												<ExternalAvatar
 													src={workspace.template_icon}
@@ -189,7 +197,20 @@ export const WorkspacesTable: FC<WorkspacesTableProps> = ({
 								</TableCell>
 
 								<TableCell>
-									{getDisplayWorkspaceTemplateName(workspace)}
+									<div>{getDisplayWorkspaceTemplateName(workspace)}</div>
+
+									{dashboard.showOrganizations && (
+										<div
+											css={{
+												fontSize: 13,
+												color: theme.palette.text.secondary,
+												lineHeight: 1.5,
+											}}
+										>
+											<span css={{ ...visuallyHidden }}>Organization: </span>
+											{workspace.organization_name}
+										</div>
+									)}
 								</TableCell>
 
 								<TableCell>

Original file line number	Diff line number	Diff line change
`@@ -54,7 +54,7 @@ export const AvatarData: FC<AvatarDataProps> = ({`
`54`	`54`	`css={{`
`55`	`55`	`fontSize: 13,`
`56`	`56`	`color: theme.palette.text.secondary,`
`57`		`- lineHeight: "150%",`
	`57`	`+ lineHeight: 1.5,`
`58`	`58`	`maxWidth: 540,`
`59`	`59`	`}}`
`60`	`60`	`>`