Mar 10, 2025 · Feb 20, 2025 · Feb 20, 2025 · Feb 20, 2025 · Feb 20, 2025 · Feb 21, 2025
diff --git a/site/e2e/helpers.ts b/site/e2e/helpers.ts
 );
 }

 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
 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
 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 = {
 : [];
 }

 // 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
Expand Up		@@ -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();
Expand Down
Original file line number	Diff line number	Diff line change
		@@ -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],
		},
		],
		},
		};
Original file line number	Diff line number	Diff line change
Expand Up		@@ -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 = {
Expand DownExpand Up		@@ -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}
Copy link MemberAuthor Kira-PilotMar 7, 2025• edited Loading Choose a reason for hiding this comment The reason will be displayed to describe this comment to others.Learn more. Populating`value` is necessary so that the selected org shows in the Autocomplete. aslilac reacted with thumbs up emoji
		loading={organizationsQuery.isLoading}
		data-testid="organization-autocomplete"
		open={open}
Expand Down