fix: select default org in template form if only one exists (#16639)

Kira-Pilot · aslilac · web-flow · commit 191b0efb803f · 2025-03-10T11:56:08.000-04:00
resolves #16849 coder/internal#147 ![Screenshot 2025-02-19 at 9 06 16 PM](https://github.com/user-attachments/assets/2973d81d-7a74-4c82-aa6b-16d4a41eeb9a) --------- Co-authored-by: ケイラ <mckayla@hey.com>
diff --git a/site/e2e/helpers.ts b/site/e2e/helpers.ts
@@ -267,8 +267,13 @@ export const createTemplate = async (
 			);
 		}
 
-		await orgPicker.click();
-		await page.getByText(orgName, { exact: true }).click();
+		// picker is disabled if only one org is available
+		const pickerIsDisabled = await orgPicker.isDisabled();
+
+		if (!pickerIsDisabled) {
+			await orgPicker.click();
+			await page.getByText(orgName, { exact: true }).click();
+		}
 	}
 
 	const name = randomName();
diff --git a/site/src/components/OrganizationAutocomplete/OrganizationAutocomplete.stories.tsx b/site/src/components/OrganizationAutocomplete/OrganizationAutocomplete.stories.tsx
@@ -0,0 +1,55 @@
+import { action } from "@storybook/addon-actions";
+import type { Meta, StoryObj } from "@storybook/react";
+import { userEvent, within } from "@storybook/test";
+import {
+	MockOrganization,
+	MockOrganization2,
+	MockUser,
+} from "testHelpers/entities";
+import { OrganizationAutocomplete } from "./OrganizationAutocomplete";
+
+const meta: Meta<typeof OrganizationAutocomplete> = {
+	title: "components/OrganizationAutocomplete",
+	component: OrganizationAutocomplete,
+	args: {
+		onChange: action("Selected organization"),
+	},
+};
+
+export default meta;
+type Story = StoryObj<typeof OrganizationAutocomplete>;
+
+export const ManyOrgs: Story = {
+	parameters: {
+		showOrganizations: true,
+		user: MockUser,
+		features: ["multiple_organizations"],
+		permissions: { viewDeploymentConfig: true },
+		queries: [
+			{
+				key: ["organizations"],
+				data: [MockOrganization, MockOrganization2],
+			},
+		],
+	},
+	play: async ({ canvasElement }) => {
+		const canvas = within(canvasElement);
+		const button = canvas.getByRole("button");
+		await userEvent.click(button);
+	},
+};
+
+export const OneOrg: Story = {
+	parameters: {
+		showOrganizations: true,
+		user: MockUser,
+		features: ["multiple_organizations"],
+		permissions: { viewDeploymentConfig: true },
+		queries: [
+			{
+				key: ["organizations"],
+				data: [MockOrganization],
+			},
+		],
+	},
+};
diff --git a/site/src/components/OrganizationAutocomplete/OrganizationAutocomplete.tsx b/site/src/components/OrganizationAutocomplete/OrganizationAutocomplete.tsx
@@ -7,7 +7,7 @@ import { organizations } from "api/queries/organizations";
 import type { AuthorizationCheck, Organization } from "api/typesGenerated";
 import { Avatar } from "components/Avatar/Avatar";
 import { AvatarData } from "components/Avatar/AvatarData";
-import { type ComponentProps, type FC, useState } from "react";
+import { type ComponentProps, type FC, useEffect, useState } from "react";
 import { useQuery } from "react-query";
 
 export type OrganizationAutocompleteProps = {
@@ -57,11 +57,26 @@ export const OrganizationAutocomplete: FC<OrganizationAutocompleteProps> = ({
 			: [];
 	}
 
+	// Unfortunate: this useEffect sets a default org value
+	// if only one is available and is necessary as the autocomplete loads
+	// its own data. Until we refactor, proceed cautiously!
+	useEffect(() => {
+		const org = options[0];
+		if (options.length !== 1 || org === selected) {
+			return;
+		}
+
+		setSelected(org);
+		onChange(org);
+	}, [options, selected, onChange]);
+
 	return (
 		<Autocomplete
 			noOptionsText="No organizations found"
 			className={className}
 			options={options}
+			disabled={options.length === 1}
+			value={selected}
 			loading={organizationsQuery.isLoading}
 			data-testid="organization-autocomplete"
 			open={open}

Original file line number	Diff line number	Diff line change
`@@ -267,8 +267,13 @@ export const createTemplate = async (`
`267`	`267`	`);`
`268`	`268`	`}`
`269`	`269`
`270`		`- await orgPicker.click();`
`271`		`- await page.getByText(orgName, { exact: true }).click();`
	`270`	`+ // picker is disabled if only one org is available`
	`271`	`+ const pickerIsDisabled = await orgPicker.isDisabled();`
	`272`	`+`
	`273`	`+ if (!pickerIsDisabled) {`
	`274`	`+ await orgPicker.click();`
	`275`	`+ await page.getByText(orgName, { exact: true }).click();`
	`276`	`+ }`
`272`	`277`	`}`
`273`	`278`
`274`	`279`	`const name = randomName();`