Sep 9, 2024 · Sep 9, 2024 · Sep 9, 2024 · Sep 9, 2024
diff --git a/site/src/@types/storybook.d.ts b/site/src/@types/storybook.d.ts
 DeploymentValues,
 Experiments,
 FeatureName,
 Organization,
 SerpentOption,
 User,
 } from "api/typesGenerated";
 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
 import type { ComponentProps } from "react";
 import {
 MockBuildInfo,
 MockOrganization,
 MockPendingProvisionerJob,
 MockTemplate,
 MockUser,

 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 oftheelement
 //are going in different spans, and Storybook doesn't consolidate
 //these
 name: /org\s?(?:anization)?\s?:\s?LimbusCo\./i,
 //The organization label is always visually hidden, butthetest
 //makes sure that there's a screen reader hook to give the table
 //cell more structured output
 name: /organization:LimbusCompany, LLC/i,
 });

 expect(accessibleTableCell).toBeDefined();
diff --git a/site/src/pages/WorkspacesPage/WorkspacesTable.tsx b/site/src/pages/WorkspacesPage/WorkspacesTable.tsx
 const checked = checkedWorkspaces.some(
 (w) => w.id === workspace.id,
 );
 const activeOrg = dashboard.organizations.find(
 (o) => o.id === workspace.organization_id,
 );

 return (
 <WorkspacesRow
 workspace={workspace}
 }}
 >
 <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
 features = [],
 experiments = [],
 showOrganizations = false,
 organizations = [MockDefaultOrganization],
 } = parameters;

 const entitlements: Entitlements = {
 value={{
 entitlements,
 experiments,
 appearance: MockAppearanceConfig,
 organizations: [MockDefaultOrganization],
 organizations,
 showOrganizations,
 appearance: MockAppearanceConfig,
 }}
 >
 <Story />
Original file line number	Diff line number	Diff line change
Expand Up		@@ -3,6 +3,7 @@ import type {
		DeploymentValues,
		Experiments,
		FeatureName,
		Organization,
		SerpentOption,
		User,
		} from "api/typesGenerated";
Expand All		@@ -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;
Expand Down
Original file line number	Diff line number	Diff line change
Expand Up		@@ -15,6 +15,7 @@ import uniqueId from "lodash/uniqueId";
		import type { ComponentProps } from "react";
		import {
		MockBuildInfo,
		MockOrganization,
		MockPendingProvisionerJob,
		MockTemplate,
		MockUser,
Expand DownExpand Up		@@ -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 oftheelement
		//are going in different spans, and Storybook doesn't consolidate
		//these
		name: /org\s?(?:anization)?\s?:\s?LimbusCo\./i,
		//The organization label is always visually hidden, butthetest
		//makes sure that there's a screen reader hook to give the table
		//cell more structured output
		name: /organization:LimbusCompany, LLC/i,
		});

		expect(accessibleTableCell).toBeDefined();
Expand Down
Original file line number	Diff line number	Diff line change
Expand Up		@@ -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}
Expand DownExpand Up		@@ -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>
Expand Down
Original file line number	Diff line number	Diff line change
Expand Up		@@ -24,6 +24,7 @@ export const withDashboardProvider = (
		features = [],
		experiments = [],
		showOrganizations = false,
		organizations = [MockDefaultOrganization],
		} = parameters;

		const entitlements: Entitlements = {
Expand All		@@ -44,9 +45,9 @@ export const withDashboardProvider = (
		value={{
		entitlements,
		experiments,
		appearance: MockAppearanceConfig,
		organizations: [MockDefaultOrganization],
		organizations,
		showOrganizations,
		appearance: MockAppearanceConfig,
		}}
		>
		<Story />
Expand Down