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

resolves #16849 https://github.com/coder/internal/issues/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>

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();

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],
+			},
+		],
+	},
+};

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}