fix: prefer organization display name for workspaces table (#14617)

Parkreiner · web-flow · commit 9da646704b30 · 2024-09-09T11:35:28.000-04:00
* fix: prefer organization display name for workspaces table

* fix: update story to account for organization name changes

* fix: resolve typo in regex search for test
diff --git a/site/src/@types/storybook.d.ts b/site/src/@types/storybook.d.ts
@@ -3,6 +3,7 @@ import type {
 	DeploymentValues,
 	Experiments,
 	FeatureName,
+	Organization,
 	SerpentOption,
 	User,
 } from "api/typesGenerated";
@@ -17,6 +18,7 @@ declare module "@storybook/react" {
 		features?: FeatureName[];
 		experiments?: Experiments;
 		showOrganizations?: boolean;
+		organizations?: Organization[];
 		queries?: { key: QueryKey; data: unknown }[];
 		webSocket?: WebSocketEvent[];
 		user?: User;
diff --git a/site/src/pages/WorkspacesPage/WorkspacesPageView.stories.tsx b/site/src/pages/WorkspacesPage/WorkspacesPageView.stories.tsx
@@ -15,6 +15,7 @@ import uniqueId from "lodash/uniqueId";
 import type { ComponentProps } from "react";
 import {
 	MockBuildInfo,
+	MockOrganization,
 	MockPendingProvisionerJob,
 	MockTemplate,
 	MockUser,
@@ -269,25 +270,27 @@ export const InvalidPageNumber: Story = {
 
 export const ShowOrganizations: Story = {
 	args: {
-		workspaces: [
-			{
-				...MockWorkspace,
-				organization_name: "Limbus Co.",
-			},
-		],
+		workspaces: [{ ...MockWorkspace, organization_name: "limbus-co" }],
 	},
 
 	parameters: {
 		showOrganizations: true,
+		organizations: [
+			{
+				...MockOrganization,
+				name: "limbus-co",
+				display_name: "Limbus Company, LLC",
+			},
+		],
 	},
 
 	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,
+			// The organization label is always visually hidden, but the test
+			// makes sure that there's a screen reader hook to give the table
+			// cell more structured output
+			name: /organization: Limbus Company, LLC/i,
 		});
 
 		expect(accessibleTableCell).toBeDefined();
diff --git a/site/src/pages/WorkspacesPage/WorkspacesTable.tsx b/site/src/pages/WorkspacesPage/WorkspacesTable.tsx
@@ -115,6 +115,10 @@ export const WorkspacesTable: FC<WorkspacesTableProps> = ({
 						const checked = checkedWorkspaces.some(
 							(w) => w.id === workspace.id,
 						);
+						const activeOrg = dashboard.organizations.find(
+							(o) => o.id === workspace.organization_id,
+						);
+
 						return (
 							<WorkspacesRow
 								workspace={workspace}
@@ -208,7 +212,7 @@ export const WorkspacesTable: FC<WorkspacesTableProps> = ({
 											}}
 										>
 											<span css={{ ...visuallyHidden }}>Organization: </span>
-											{workspace.organization_name}
+											{activeOrg?.display_name || workspace.organization_name}
 										</div>
 									)}
 								</TableCell>
diff --git a/site/src/testHelpers/storybook.tsx b/site/src/testHelpers/storybook.tsx
@@ -24,6 +24,7 @@ export const withDashboardProvider = (
 		features = [],
 		experiments = [],
 		showOrganizations = false,
+		organizations = [MockDefaultOrganization],
 	} = parameters;
 
 	const entitlements: Entitlements = {
@@ -44,9 +45,9 @@ export const withDashboardProvider = (
 			value={{
 				entitlements,
 				experiments,
-				appearance: MockAppearanceConfig,
-				organizations: [MockDefaultOrganization],
+				organizations,
 				showOrganizations,
+				appearance: MockAppearanceConfig,
 			}}
 		>
 			<Story />
