fix: default org selection in template form if only one

Kira-Pilot · Kira-Pilot · commit a656cb84b4c4 · 2025-02-20T02:05:03.000Z
diff --git a/site/src/components/OrganizationAutocomplete/OrganizationAutocomplete.stories.tsx b/site/src/components/OrganizationAutocomplete/OrganizationAutocomplete.stories.tsx
@@ -0,0 +1,61 @@
+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: {
+		value: null,
+		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: { viewDeploymentValues: 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: { viewDeploymentValues: true },
+		queries: [
+			{
+				key: ["organizations"],
+				data: [MockOrganization],
+			},
+		],
+	},
+	play: async ({ canvasElement }) => {
+		const canvas = within(canvasElement);
+		const button = canvas.getByRole("button");
+		await userEvent.click(button);
+	},
+};
diff --git a/site/src/components/OrganizationAutocomplete/OrganizationAutocomplete.tsx b/site/src/components/OrganizationAutocomplete/OrganizationAutocomplete.tsx
@@ -85,7 +85,8 @@ export const OrganizationAutocomplete: FC<OrganizationAutocompleteProps> = ({
 			className={className}
 			options={options}
 			loading={organizationsQuery.isLoading}
-			value={value}
+			value={options.length === 1 ? options[0] : value}
+			disabled={options.length === 1}
 			data-testid="organization-autocomplete"
 			open={autoComplete.open}
 			isOptionEqualToValue={(a, b) => a.name === b.name}
@@ -154,6 +155,6 @@ export const OrganizationAutocomplete: FC<OrganizationAutocompleteProps> = ({
 };
 
 const root = css`
-  padding-left: 14px !important; // Same padding left as input
-  gap: 4px;
+	padding-left: 14px !important; // Same padding left as input
+	gap: 4px;
 `;
