From e5d88c8a02755fe10e5eccea7c5383cef63d1941 Mon Sep 17 00:00:00 2001
From: Jaayden Halko <jaayden.halko@gmail.com>
Date: Wed, 29 Jan 2025 22:52:16 +0000
Subject: [PATCH 1/9] feat: add dropdown to select claim field value when sync
 field is set

---
 site/src/api/api.ts                           | 17 +++++++
 site/src/api/queries/organizations.ts         | 32 +++++++++++++
 .../MultiSelectCombobox.tsx                   |  2 +-
 site/src/components/Select/Select.tsx         | 13 ++---
 .../management/OrganizationSidebarView.tsx    |  9 +++-
 .../IdpOrgSyncPage/IdpOrgSyncPage.tsx         | 14 +++++-
 .../IdpOrgSyncPage/IdpOrgSyncPageView.tsx     | 47 +++++++++++++++----
 7 files changed, 117 insertions(+), 17 deletions(-)

diff --git a/site/src/api/api.ts b/site/src/api/api.ts
index 26491efb10565..cd21b5b063ac6 100644
--- a/site/src/api/api.ts
+++ b/site/src/api/api.ts
@@ -787,6 +787,23 @@ class ApiMethods {
 		return response.data;
 	};
 
+	getIdpSyncClaimFieldValues = async (claimField: string) => {
+		const response = await this.axios.get<string[]>(
+			`/api/v2/settings/idpsync/field-values?claimField=${claimField}`,
+		);
+		return response.data;
+	};
+
+	getIdpSyncClaimFieldValuesByOrganization = async (
+		organization: string,
+		claimField: string,
+	) => {
+		const response = await this.axios.get<TypesGen.Response>(
+			`/api/v2/organizations/${organization}/settings/idpsync/field-values?claimField=${claimField}`,
+		);
+		return response.data;
+	};
+
 	getTemplate = async (templateId: string): Promise<TypesGen.Template> => {
 		const response = await this.axios.get<TypesGen.Template>(
 			`/api/v2/templates/${templateId}`,
diff --git a/site/src/api/queries/organizations.ts b/site/src/api/queries/organizations.ts
index 0cc8168243c16..33ef19f0d2654 100644
--- a/site/src/api/queries/organizations.ts
+++ b/site/src/api/queries/organizations.ts
@@ -338,3 +338,35 @@ export const organizationsPermissions = (
 		},
 	};
 };
+
+export const getOrganizationIdpSyncClaimFieldValuesKey = (
+	organization: string,
+	claimField: string,
+) => [organization, claimField, "organizationIdpSyncClaimFieldValues"];
+
+export const organizationIdpSyncClaimFieldValues = (
+	organization: string,
+	claimField: string,
+) => {
+	return {
+		queryKey: getOrganizationIdpSyncClaimFieldValuesKey(
+			organization,
+			claimField,
+		),
+		queryFn: () =>
+			API.getIdpSyncClaimFieldValuesByOrganization(organization, claimField),
+	};
+};
+
+export const getIdpSyncClaimFieldValuesKey = (claimField: string) => [
+	claimField,
+	"idpSyncClaimFieldValues",
+];
+
+export const idpSyncClaimFieldValues = (claimField: string) => {
+	return {
+		queryKey: getIdpSyncClaimFieldValuesKey(claimField),
+		queryFn: () => API.getIdpSyncClaimFieldValues(claimField),
+		enabled: !!claimField,
+	};
+};
diff --git a/site/src/components/MultiSelectCombobox/MultiSelectCombobox.tsx b/site/src/components/MultiSelectCombobox/MultiSelectCombobox.tsx
index 702be6a64d582..83f2aeed41cd4 100644
--- a/site/src/components/MultiSelectCombobox/MultiSelectCombobox.tsx
+++ b/site/src/components/MultiSelectCombobox/MultiSelectCombobox.tsx
@@ -572,7 +572,7 @@ export const MultiSelectCombobox = forwardRef<
 							>
 								<X className="h-5 w-5" />
 							</button>
-							<ChevronDown className="h-5	w-5 cursor-pointer text-content-secondary hover:text-content-primary" />
+							<ChevronDown className="size-icon-sm cursor-pointer text-content-secondary hover:text-content-primary" />
 						</div>
 					</div>
 				</div>
diff --git a/site/src/components/Select/Select.tsx b/site/src/components/Select/Select.tsx
index a0da638c907a2..ececcc2fc9950 100644
--- a/site/src/components/Select/Select.tsx
+++ b/site/src/components/Select/Select.tsx
@@ -20,17 +20,18 @@ export const SelectTrigger = React.forwardRef<
 	<SelectPrimitive.Trigger
 		ref={ref}
 		className={cn(
-			"flex h-10 w-full font-medium items-center justify-between whitespace-nowrap rounded-md ",
-			"border border-border border-solid bg-transparent px-3 py-2 text-sm shadow-sm ",
-			"ring-offset-background text-content-secondary placeholder:text-content-secondary focus:outline-none ",
-			"focus:ring-1 focus:ring-ring disabled:cursor-not-allowed disabled:opacity-50 [&>span]:line-clamp-1",
+			`flex h-10 w-full font-medium items-center justify-between whitespace-nowrap rounded-md
+			border border-border border-solid bg-transparent px-3 py-2 text-sm shadow-sm
+			ring-offset-background text-content-secondary placeholder:text-content-secondary focus:outline-none,
+			focus:ring-2 focus:ring-content-link disabled:cursor-not-allowed disabled:opacity-50 [&>span]:line-clamp-1
+			focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-content-link`,
 			className,
 		)}
 		{...props}
 	>
 		{children}
 		<SelectPrimitive.Icon asChild>
-			<ChevronDown className="size-icon-sm opacity-50" />
+			<ChevronDown className="size-icon-sm cursor-pointer text-content-secondary hover:text-content-primary" />
 		</SelectPrimitive.Icon>
 	</SelectPrimitive.Trigger>
 ));
@@ -65,7 +66,7 @@ export const SelectScrollDownButton = React.forwardRef<
 		)}
 		{...props}
 	>
-		<ChevronDown className="size-icon-sm" />
+		<ChevronDown className="size-icon-sm cursor-pointer text-content-secondary hover:text-content-primary" />
 	</SelectPrimitive.ScrollDownButton>
 ));
 SelectScrollDownButton.displayName =
diff --git a/site/src/modules/management/OrganizationSidebarView.tsx b/site/src/modules/management/OrganizationSidebarView.tsx
index ef805861d1543..8d913edf87df3 100644
--- a/site/src/modules/management/OrganizationSidebarView.tsx
+++ b/site/src/modules/management/OrganizationSidebarView.tsx
@@ -18,7 +18,7 @@ import {
 	SettingsSidebarNavItem,
 } from "components/Sidebar/Sidebar";
 import type { Permissions } from "contexts/auth/permissions";
-import { ChevronDown, Plus } from "lucide-react";
+import { Check, ChevronDown, Plus } from "lucide-react";
 import { useDashboard } from "modules/dashboard/useDashboard";
 import { type FC, useState } from "react";
 import { useNavigate } from "react-router-dom";
@@ -147,6 +147,13 @@ const OrganizationsSettingsNavigation: FC<
 												<span className="truncate">
 													{organization?.display_name || organization?.name}
 												</span>
+												{activeOrganization.name === organization.name && (
+													<Check
+														size={16}
+														strokeWidth={2}
+														className="ml-auto"
+													/>
+												)}
 											</CommandItem>
 										))}
 									</div>
diff --git a/site/src/pages/DeploymentSettingsPage/IdpOrgSyncPage/IdpOrgSyncPage.tsx b/site/src/pages/DeploymentSettingsPage/IdpOrgSyncPage/IdpOrgSyncPage.tsx
index d08b3aac4ab1a..923408fcc1575 100644
--- a/site/src/pages/DeploymentSettingsPage/IdpOrgSyncPage/IdpOrgSyncPage.tsx
+++ b/site/src/pages/DeploymentSettingsPage/IdpOrgSyncPage/IdpOrgSyncPage.tsx
@@ -3,6 +3,7 @@ import {
 	organizationIdpSyncSettings,
 	patchOrganizationSyncSettings,
 } from "api/queries/idpsync";
+import { idpSyncClaimFieldValues } from "api/queries/organizations";
 import { ChooseOne, Cond } from "components/Conditionals/ChooseOne";
 import { displayError } from "components/GlobalSnackbar/utils";
 import { displaySuccess } from "components/GlobalSnackbar/utils";
@@ -11,7 +12,7 @@ import { Loader } from "components/Loader/Loader";
 import { Paywall } from "components/Paywall/Paywall";
 import { useDashboard } from "modules/dashboard/useDashboard";
 import { useFeatureVisibility } from "modules/dashboard/useFeatureVisibility";
-import { type FC, useEffect } from "react";
+import { type FC, useEffect, useState } from "react";
 import { Helmet } from "react-helmet-async";
 import { useMutation, useQuery, useQueryClient } from "react-query";
 import { docs } from "utils/docs";
@@ -29,6 +30,11 @@ export const IdpOrgSyncPage: FC = () => {
 		isLoading,
 		error,
 	} = useQuery(organizationIdpSyncSettings(isIdpSyncEnabled));
+	const [claimField, setClaimField] = useState("");
+
+	const { data: claimFieldValues } = useQuery(
+		idpSyncClaimFieldValues(claimField),
+	);
 
 	const patchOrganizationSyncSettingsMutation = useMutation(
 		patchOrganizationSyncSettings(queryClient),
@@ -49,6 +55,10 @@ export const IdpOrgSyncPage: FC = () => {
 		return <Loader />;
 	}
 
+	const handleSyncFieldChange = (value: string) => {
+		setClaimField(value);
+	};
+
 	return (
 		<>
 			<Helmet>
@@ -94,6 +104,8 @@ export const IdpOrgSyncPage: FC = () => {
 									);
 								}
 							}}
+							onSyncFieldChange={handleSyncFieldChange}
+							claimFieldValues={claimFieldValues}
 							error={error || patchOrganizationSyncSettingsMutation.error}
 						/>
 					</Cond>
diff --git a/site/src/pages/DeploymentSettingsPage/IdpOrgSyncPage/IdpOrgSyncPageView.tsx b/site/src/pages/DeploymentSettingsPage/IdpOrgSyncPage/IdpOrgSyncPageView.tsx
index 7ed1b85e8c9dd..b51fd46e963a2 100644
--- a/site/src/pages/DeploymentSettingsPage/IdpOrgSyncPage/IdpOrgSyncPageView.tsx
+++ b/site/src/pages/DeploymentSettingsPage/IdpOrgSyncPage/IdpOrgSyncPageView.tsx
@@ -33,6 +33,13 @@ import {
 	MultiSelectCombobox,
 	type Option,
 } from "components/MultiSelectCombobox/MultiSelectCombobox";
+import {
+	Select,
+	SelectContent,
+	SelectItem,
+	SelectTrigger,
+	SelectValue,
+} from "components/Select/Select";
 import { Spinner } from "components/Spinner/Spinner";
 import { Switch } from "components/Switch/Switch";
 import { useFormik } from "formik";
@@ -47,6 +54,8 @@ interface IdpSyncPageViewProps {
 	organizationSyncSettings: OrganizationSyncSettings | undefined;
 	organizations: readonly Organization[];
 	onSubmit: (data: OrganizationSyncSettings) => void;
+	onSyncFieldChange: (value: string) => void;
+	claimFieldValues: string[] | undefined;
 	error?: unknown;
 }
 
@@ -76,6 +85,8 @@ export const IdpOrgSyncPageView: FC<IdpSyncPageViewProps> = ({
 	organizationSyncSettings,
 	organizations,
 	onSubmit,
+	onSyncFieldChange,
+	claimFieldValues,
 	error,
 }) => {
 	const form = useFormik<OrganizationSyncSettings>({
@@ -135,6 +146,7 @@ export const IdpOrgSyncPageView: FC<IdpSyncPageViewProps> = ({
 										value={form.values.field}
 										onChange={(event) => {
 											void form.setFieldValue("field", event.target.value);
+											onSyncFieldChange(event.target.value);
 										}}
 									/>
 									<Button
@@ -190,14 +202,33 @@ export const IdpOrgSyncPageView: FC<IdpSyncPageViewProps> = ({
 								<Label className="text-sm" htmlFor={`${id}-idp-org-name`}>
 									IdP organization name
 								</Label>
-								<Input
-									id={`${id}-idp-org-name`}
-									value={idpOrgName}
-									className="min-w-72 w-72"
-									onChange={(event) => {
-										setIdpOrgName(event.target.value);
-									}}
-								/>
+
+								{claimFieldValues ? (
+									<Select
+										onValueChange={(event) => setIdpOrgName(event)}
+										value={idpOrgName}
+									>
+										<SelectTrigger id={`${id}-idp-org-name`} className="w-72">
+											<SelectValue placeholder="Select IdP organization" />
+										</SelectTrigger>
+										<SelectContent className="[&_*[role=option]>span]:end-2 [&_*[role=option]>span]:start-auto [&_*[role=option]]:pe-8 [&_*[role=option]]:ps-2">
+											{claimFieldValues.map((value) => (
+												<SelectItem key={value} value={value}>
+													{value}
+												</SelectItem>
+											))}
+										</SelectContent>
+									</Select>
+								) : (
+									<Input
+										id={`${id}-idp-org-name`}
+										value={idpOrgName}
+										className="w-72"
+										onChange={(event) => {
+											setIdpOrgName(event.target.value);
+										}}
+									/>
+								)}
 							</div>
 							<div className="grid items-center gap-1 flex-1">
 								<Label className="text-sm" htmlFor={`${id}-coder-org`}>

From 47bf43152439877c3d2096cc3055612beed235bc Mon Sep 17 00:00:00 2001
From: Jaayden Halko <jaayden.halko@gmail.com>
Date: Mon, 3 Feb 2025 23:04:13 +0000
Subject: [PATCH 2/9] fix: update command styles

---
 site/src/components/Command/Command.tsx | 7 +++++--
 1 file changed, 5 insertions(+), 2 deletions(-)

diff --git a/site/src/components/Command/Command.tsx b/site/src/components/Command/Command.tsx
index bbdc5684cb19d..018f3da237e48 100644
--- a/site/src/components/Command/Command.tsx
+++ b/site/src/components/Command/Command.tsx
@@ -53,7 +53,7 @@ export const CommandInput = forwardRef<
 		<CommandPrimitive.Input
 			ref={ref}
 			className={cn(
-				`flex h-10 w-full rounded-md bg-transparent py-3 text-sm outline-none
+				`flex h-10 w-full rounded-md bg-transparent py-3 text-sm outline-none border-none
 				placeholder:text-content-secondary
 				disabled:cursor-not-allowed disabled:opacity-50`,
 				className,
@@ -69,7 +69,10 @@ export const CommandList = forwardRef<
 >(({ className, ...props }, ref) => (
 	<CommandPrimitive.List
 		ref={ref}
-		className={cn("max-h-96 overflow-y-auto overflow-x-hidden", className)}
+		className={cn(
+			"max-h-96 overflow-y-auto overflow-x-hidden border-0 border-t border-solid border-border",
+			className,
+		)}
 		{...props}
 	/>
 ));

From 0df2ddcee11597e3a46e196068d7a7fcde68363f Mon Sep 17 00:00:00 2001
From: Jaayden Halko <jaayden.halko@gmail.com>
Date: Mon, 3 Feb 2025 23:04:26 +0000
Subject: [PATCH 3/9] fix: replace dropdown with combobox

---
 .../IdpOrgSyncPage/IdpOrgSyncPageView.tsx     | 115 ++++++++++++++----
 1 file changed, 92 insertions(+), 23 deletions(-)

diff --git a/site/src/pages/DeploymentSettingsPage/IdpOrgSyncPage/IdpOrgSyncPageView.tsx b/site/src/pages/DeploymentSettingsPage/IdpOrgSyncPage/IdpOrgSyncPageView.tsx
index b51fd46e963a2..5d82cb08fa50d 100644
--- a/site/src/pages/DeploymentSettingsPage/IdpOrgSyncPage/IdpOrgSyncPageView.tsx
+++ b/site/src/pages/DeploymentSettingsPage/IdpOrgSyncPage/IdpOrgSyncPageView.tsx
@@ -10,6 +10,14 @@ import type {
 } from "api/typesGenerated";
 import { ErrorAlert } from "components/Alert/ErrorAlert";
 import { Button } from "components/Button/Button";
+import {
+	Command,
+	CommandEmpty,
+	CommandGroup,
+	CommandInput,
+	CommandItem,
+	CommandList,
+} from "components/Command/Command";
 import { ChooseOne, Cond } from "components/Conditionals/ChooseOne";
 import {
 	Dialog,
@@ -34,17 +42,16 @@ import {
 	type Option,
 } from "components/MultiSelectCombobox/MultiSelectCombobox";
 import {
-	Select,
-	SelectContent,
-	SelectItem,
-	SelectTrigger,
-	SelectValue,
-} from "components/Select/Select";
+	Popover,
+	PopoverContent,
+	PopoverTrigger,
+} from "components/Popover/Popover";
 import { Spinner } from "components/Spinner/Spinner";
 import { Switch } from "components/Switch/Switch";
 import { useFormik } from "formik";
-import { Plus, Trash } from "lucide-react";
-import { type FC, useId, useState } from "react";
+import { Check, ChevronDown, CornerDownLeft, Plus, Trash } from "lucide-react";
+import { type FC, type KeyboardEventHandler, useId, useState } from "react";
+import { cn } from "utils/cn";
 import { docs } from "utils/docs";
 import { isUUID } from "utils/uuid";
 import * as Yup from "yup";
@@ -102,11 +109,13 @@ export const IdpOrgSyncPageView: FC<IdpSyncPageViewProps> = ({
 	});
 	const [coderOrgs, setCoderOrgs] = useState<Option[]>([]);
 	const [idpOrgName, setIdpOrgName] = useState("");
+	const [inputValue, setInputValue] = useState("");
 	const organizationMappingCount = form.values.mapping
 		? Object.entries(form.values.mapping).length
 		: 0;
 	const [isDialogOpen, setIsDialogOpen] = useState(false);
 	const id = useId();
+	const [open, setOpen] = useState(false);
 
 	const getOrgNames = (orgIds: readonly string[]) => {
 		return orgIds.map(
@@ -129,6 +138,19 @@ export const IdpOrgSyncPageView: FC<IdpSyncPageViewProps> = ({
 		form.handleSubmit();
 	};
 
+	const handleKeyDown: KeyboardEventHandler<HTMLInputElement> = (e) => {
+		if (
+			e.key === "Enter" &&
+			inputValue &&
+			!claimFieldValues?.some((value) => value === inputValue.toLowerCase())
+		) {
+			e.preventDefault();
+			setIdpOrgName(inputValue);
+			setInputValue("");
+			setOpen(false);
+		}
+	};
+
 	return (
 		<div className="flex flex-col gap-2">
 			{Boolean(error) && <ErrorAlert error={error} />}
@@ -204,21 +226,68 @@ export const IdpOrgSyncPageView: FC<IdpSyncPageViewProps> = ({
 								</Label>
 
 								{claimFieldValues ? (
-									<Select
-										onValueChange={(event) => setIdpOrgName(event)}
-										value={idpOrgName}
-									>
-										<SelectTrigger id={`${id}-idp-org-name`} className="w-72">
-											<SelectValue placeholder="Select IdP organization" />
-										</SelectTrigger>
-										<SelectContent className="[&_*[role=option]>span]:end-2 [&_*[role=option]>span]:start-auto [&_*[role=option]]:pe-8 [&_*[role=option]]:ps-2">
-											{claimFieldValues.map((value) => (
-												<SelectItem key={value} value={value}>
-													{value}
-												</SelectItem>
-											))}
-										</SelectContent>
-									</Select>
+									<Popover open={open} onOpenChange={setOpen}>
+										<PopoverTrigger asChild>
+											<Button
+												variant="outline"
+												aria-expanded={open}
+												className="w-72 justify-between"
+											>
+												<span
+													className={cn(
+														!idpOrgName && "text-content-secondary",
+													)}
+												>
+													{idpOrgName || "Select IdP organization"}
+												</span>
+												<ChevronDown className="size-icon-sm cursor-pointer text-content-secondary hover:text-content-primary" />
+											</Button>
+										</PopoverTrigger>
+										<PopoverContent className="w-72">
+											<Command>
+												<CommandInput
+													placeholder="Search or enter custom value"
+													value={inputValue}
+													onValueChange={setInputValue}
+													onKeyDown={handleKeyDown}
+												/>
+												<CommandList>
+													<CommandEmpty>
+														<p>No results found</p>
+														<span className="flex flex-row items-center justify-center gap-1">
+															Enter custom value
+															<CornerDownLeft className="size-icon-sm bg-surface-tertiary rounded-sm p-1" />
+														</span>
+													</CommandEmpty>
+													<CommandGroup>
+														{claimFieldValues.map((value) => (
+															<CommandItem
+																key={value}
+																value={value}
+																onSelect={(currentValue) => {
+																	setIdpOrgName(
+																		currentValue === idpOrgName
+																			? ""
+																			: currentValue,
+																	);
+																	setOpen(false);
+																}}
+															>
+																{value}
+																{idpOrgName === value && (
+																	<Check
+																		size={16}
+																		strokeWidth={2}
+																		className="ml-auto"
+																	/>
+																)}
+															</CommandItem>
+														))}
+													</CommandGroup>
+												</CommandList>
+											</Command>
+										</PopoverContent>
+									</Popover>
 								) : (
 									<Input
 										id={`${id}-idp-org-name`}

From a11762ec3ac3fbb2fc415ba06c1dcc10306f2fa6 Mon Sep 17 00:00:00 2001
From: Jaayden Halko <jaayden.halko@gmail.com>
Date: Tue, 4 Feb 2025 17:20:28 +0000
Subject: [PATCH 4/9] chore: use shadcn table

---
 .../IdpOrgSyncPage/IdpOrgSyncPageView.tsx     | 81 +++++++++----------
 1 file changed, 40 insertions(+), 41 deletions(-)

diff --git a/site/src/pages/DeploymentSettingsPage/IdpOrgSyncPage/IdpOrgSyncPageView.tsx b/site/src/pages/DeploymentSettingsPage/IdpOrgSyncPage/IdpOrgSyncPageView.tsx
index 5d82cb08fa50d..a7b86f67f5ffb 100644
--- a/site/src/pages/DeploymentSettingsPage/IdpOrgSyncPage/IdpOrgSyncPageView.tsx
+++ b/site/src/pages/DeploymentSettingsPage/IdpOrgSyncPage/IdpOrgSyncPageView.tsx
@@ -1,9 +1,3 @@
-import Table from "@mui/material/Table";
-import TableBody from "@mui/material/TableBody";
-import TableCell from "@mui/material/TableCell";
-import TableContainer from "@mui/material/TableContainer";
-import TableHead from "@mui/material/TableHead";
-import TableRow from "@mui/material/TableRow";
 import type {
 	Organization,
 	OrganizationSyncSettings,
@@ -48,6 +42,13 @@ import {
 } from "components/Popover/Popover";
 import { Spinner } from "components/Spinner/Spinner";
 import { Switch } from "components/Switch/Switch";
+import {
+	Table,
+	TableBody,
+	TableCell,
+	TableHeader,
+	TableRow,
+} from "components/Table/Table";
 import { useFormik } from "formik";
 import { Check, ChevronDown, CornerDownLeft, Plus, Trash } from "lucide-react";
 import { type FC, type KeyboardEventHandler, useId, useState } from "react";
@@ -218,7 +219,7 @@ export const IdpOrgSyncPageView: FC<IdpSyncPageViewProps> = ({
 							{form.errors.field}
 						</p>
 					)}
-					<div className="flex flex-col gap-4">
+					<div className="flex flex-col gap-7">
 						<div className="flex flex-row pt-8 gap-2 justify-between items-start">
 							<div className="grid items-center gap-1">
 								<Label className="text-sm" htmlFor={`${id}-idp-org-name`}>
@@ -318,7 +319,7 @@ export const IdpOrgSyncPageView: FC<IdpSyncPageViewProps> = ({
 									placeholder="Select organization"
 									emptyIndicator={
 										<p className="text-center text-md text-content-primary">
-											All organizations selected
+											No organizations found
 										</p>
 									}
 								/>
@@ -415,40 +416,38 @@ interface IdpMappingTableProps {
 
 const IdpMappingTable: FC<IdpMappingTableProps> = ({ isEmpty, children }) => {
 	return (
-		<TableContainer>
-			<Table>
-				<TableHead>
-					<TableRow>
-						<TableCell width="45%">IdP organization</TableCell>
-						<TableCell width="55%">Coder organization</TableCell>
-						<TableCell width="10%" />
-					</TableRow>
-				</TableHead>
-				<TableBody>
-					<ChooseOne>
-						<Cond condition={isEmpty}>
-							<TableRow>
-								<TableCell colSpan={999}>
-									<EmptyState
-										message={"No organization mappings"}
-										isCompact
-										cta={
-											<Link
-												href={docs("/admin/users/idp-sync#organization-sync")}
-											>
-												How to set up IdP organization sync
-											</Link>
-										}
-									/>
-								</TableCell>
-							</TableRow>
-						</Cond>
+		<Table>
+			<TableHeader>
+				<TableRow>
+					<TableCell width="45%">IdP organization</TableCell>
+					<TableCell width="55%">Coder organization</TableCell>
+					<TableCell width="10%" />
+				</TableRow>
+			</TableHeader>
+			<TableBody>
+				<ChooseOne>
+					<Cond condition={isEmpty}>
+						<TableRow>
+							<TableCell colSpan={999}>
+								<EmptyState
+									message={"No organization mappings"}
+									isCompact
+									cta={
+										<Link
+											href={docs("/admin/users/idp-sync#organization-sync")}
+										>
+											How to set up IdP organization sync
+										</Link>
+									}
+								/>
+							</TableCell>
+						</TableRow>
+					</Cond>
 
-						<Cond>{children}</Cond>
-					</ChooseOne>
-				</TableBody>
-			</Table>
-		</TableContainer>
+					<Cond>{children}</Cond>
+				</ChooseOne>
+			</TableBody>
+		</Table>
 	);
 };
 

From e61b2dcd39434037955e81aef21bcdec055b78e5 Mon Sep 17 00:00:00 2001
From: Jaayden Halko <jaayden.halko@gmail.com>
Date: Tue, 4 Feb 2025 17:20:56 +0000
Subject: [PATCH 5/9] fix: set claim field when retrieving sync settings

---
 .../IdpOrgSyncPage/IdpOrgSyncPage.tsx              | 14 ++++++++++++--
 1 file changed, 12 insertions(+), 2 deletions(-)

diff --git a/site/src/pages/DeploymentSettingsPage/IdpOrgSyncPage/IdpOrgSyncPage.tsx b/site/src/pages/DeploymentSettingsPage/IdpOrgSyncPage/IdpOrgSyncPage.tsx
index 923408fcc1575..2897af32bbdb9 100644
--- a/site/src/pages/DeploymentSettingsPage/IdpOrgSyncPage/IdpOrgSyncPage.tsx
+++ b/site/src/pages/DeploymentSettingsPage/IdpOrgSyncPage/IdpOrgSyncPage.tsx
@@ -21,6 +21,7 @@ import { ExportPolicyButton } from "./ExportPolicyButton";
 import IdpOrgSyncPageView from "./IdpOrgSyncPageView";
 
 export const IdpOrgSyncPage: FC = () => {
+	const [claimField, setClaimField] = useState("");
 	const queryClient = useQueryClient();
 	// IdP sync does not have its own entitlement and is based on templace_rbac
 	const { template_rbac: isIdpSyncEnabled } = useFeatureVisibility();
@@ -29,8 +30,17 @@ export const IdpOrgSyncPage: FC = () => {
 		data: orgSyncSettingsData,
 		isLoading,
 		error,
-	} = useQuery(organizationIdpSyncSettings(isIdpSyncEnabled));
-	const [claimField, setClaimField] = useState("");
+	} = useQuery(
+		organizationIdpSyncSettings(isIdpSyncEnabled).queryKey,
+		organizationIdpSyncSettings(isIdpSyncEnabled).queryFn,
+		{
+			onSuccess: (data) => {
+				if (data?.field) {
+					setClaimField(data.field);
+				}
+			},
+		},
+	);
 
 	const { data: claimFieldValues } = useQuery(
 		idpSyncClaimFieldValues(claimField),

From 324f59440994bec012c6402d5e054961be859972 Mon Sep 17 00:00:00 2001
From: Jaayden Halko <jaayden.halko@gmail.com>
Date: Tue, 4 Feb 2025 17:41:30 +0000
Subject: [PATCH 6/9] chore: extract combobox component

---
 site/src/components/Combobox/Combobox.tsx     | 93 +++++++++++++++++++
 .../IdpOrgSyncPage/IdpOrgSyncPageView.tsx     | 85 +++--------------
 2 files changed, 108 insertions(+), 70 deletions(-)
 create mode 100644 site/src/components/Combobox/Combobox.tsx

diff --git a/site/src/components/Combobox/Combobox.tsx b/site/src/components/Combobox/Combobox.tsx
new file mode 100644
index 0000000000000..f5447b3a87062
--- /dev/null
+++ b/site/src/components/Combobox/Combobox.tsx
@@ -0,0 +1,93 @@
+import { Button } from "components/Button/Button";
+import {
+	Command,
+	CommandEmpty,
+	CommandGroup,
+	CommandInput,
+	CommandItem,
+	CommandList,
+} from "components/Command/Command";
+import {
+	Popover,
+	PopoverContent,
+	PopoverTrigger,
+} from "components/Popover/Popover";
+import { Check, ChevronDown, CornerDownLeft } from "lucide-react";
+import type { FC, KeyboardEventHandler } from "react";
+import { cn } from "utils/cn";
+
+interface ComboboxProps {
+	value: string;
+	options?: string[];
+	placeholder?: string;
+	open: boolean;
+	onOpenChange: (open: boolean) => void;
+	inputValue: string;
+	onInputChange: (value: string) => void;
+	onKeyDown?: KeyboardEventHandler<HTMLInputElement>;
+	onSelect: (value: string) => void;
+}
+
+export const Combobox: FC<ComboboxProps> = ({
+	value,
+	options = [],
+	placeholder = "Select option",
+	open,
+	onOpenChange,
+	inputValue,
+	onInputChange,
+	onKeyDown,
+	onSelect,
+}) => {
+	return (
+		<Popover open={open} onOpenChange={onOpenChange}>
+			<PopoverTrigger asChild>
+				<Button
+					variant="outline"
+					aria-expanded={open}
+					className="w-72 justify-between group"
+				>
+					<span className={cn(!value && "text-content-secondary")}>
+						{value || placeholder}
+					</span>
+					<ChevronDown className="size-icon-sm text-content-secondary group-hover:text-content-primary" />
+				</Button>
+			</PopoverTrigger>
+			<PopoverContent className="w-72">
+				<Command>
+					<CommandInput
+						placeholder="Search or enter custom value"
+						value={inputValue}
+						onValueChange={onInputChange}
+						onKeyDown={onKeyDown}
+					/>
+					<CommandList>
+						<CommandEmpty>
+							<p>No results found</p>
+							<span className="flex flex-row items-center justify-center gap-1">
+								Enter custom value
+								<CornerDownLeft className="size-icon-sm bg-surface-tertiary rounded-sm p-1" />
+							</span>
+						</CommandEmpty>
+						<CommandGroup>
+							{options.map((option) => (
+								<CommandItem
+									key={option}
+									value={option}
+									onSelect={(currentValue) => {
+										onSelect(currentValue === value ? "" : currentValue);
+									}}
+								>
+									{option}
+									{value === option && (
+										<Check className="size-icon-sm ml-auto" />
+									)}
+								</CommandItem>
+							))}
+						</CommandGroup>
+					</CommandList>
+				</Command>
+			</PopoverContent>
+		</Popover>
+	);
+};
diff --git a/site/src/pages/DeploymentSettingsPage/IdpOrgSyncPage/IdpOrgSyncPageView.tsx b/site/src/pages/DeploymentSettingsPage/IdpOrgSyncPage/IdpOrgSyncPageView.tsx
index a7b86f67f5ffb..284a1846a90e4 100644
--- a/site/src/pages/DeploymentSettingsPage/IdpOrgSyncPage/IdpOrgSyncPageView.tsx
+++ b/site/src/pages/DeploymentSettingsPage/IdpOrgSyncPage/IdpOrgSyncPageView.tsx
@@ -4,14 +4,7 @@ import type {
 } from "api/typesGenerated";
 import { ErrorAlert } from "components/Alert/ErrorAlert";
 import { Button } from "components/Button/Button";
-import {
-	Command,
-	CommandEmpty,
-	CommandGroup,
-	CommandInput,
-	CommandItem,
-	CommandList,
-} from "components/Command/Command";
+import { Combobox } from "components/Combobox/Combobox";
 import { ChooseOne, Cond } from "components/Conditionals/ChooseOne";
 import {
 	Dialog,
@@ -227,68 +220,20 @@ export const IdpOrgSyncPageView: FC<IdpSyncPageViewProps> = ({
 								</Label>
 
 								{claimFieldValues ? (
-									<Popover open={open} onOpenChange={setOpen}>
-										<PopoverTrigger asChild>
-											<Button
-												variant="outline"
-												aria-expanded={open}
-												className="w-72 justify-between"
-											>
-												<span
-													className={cn(
-														!idpOrgName && "text-content-secondary",
-													)}
-												>
-													{idpOrgName || "Select IdP organization"}
-												</span>
-												<ChevronDown className="size-icon-sm cursor-pointer text-content-secondary hover:text-content-primary" />
-											</Button>
-										</PopoverTrigger>
-										<PopoverContent className="w-72">
-											<Command>
-												<CommandInput
-													placeholder="Search or enter custom value"
-													value={inputValue}
-													onValueChange={setInputValue}
-													onKeyDown={handleKeyDown}
-												/>
-												<CommandList>
-													<CommandEmpty>
-														<p>No results found</p>
-														<span className="flex flex-row items-center justify-center gap-1">
-															Enter custom value
-															<CornerDownLeft className="size-icon-sm bg-surface-tertiary rounded-sm p-1" />
-														</span>
-													</CommandEmpty>
-													<CommandGroup>
-														{claimFieldValues.map((value) => (
-															<CommandItem
-																key={value}
-																value={value}
-																onSelect={(currentValue) => {
-																	setIdpOrgName(
-																		currentValue === idpOrgName
-																			? ""
-																			: currentValue,
-																	);
-																	setOpen(false);
-																}}
-															>
-																{value}
-																{idpOrgName === value && (
-																	<Check
-																		size={16}
-																		strokeWidth={2}
-																		className="ml-auto"
-																	/>
-																)}
-															</CommandItem>
-														))}
-													</CommandGroup>
-												</CommandList>
-											</Command>
-										</PopoverContent>
-									</Popover>
+									<Combobox
+										value={idpOrgName}
+										options={claimFieldValues}
+										placeholder="Select IdP organization"
+										open={open}
+										onOpenChange={setOpen}
+										inputValue={inputValue}
+										onInputChange={setInputValue}
+										onKeyDown={handleKeyDown}
+										onSelect={(value: string) => {
+											setIdpOrgName(value);
+											setOpen(false);
+										}}
+									/>
 								) : (
 									<Input
 										id={`${id}-idp-org-name`}

From 1f1086d702a4d64734c9686d52623cfb40aabd82 Mon Sep 17 00:00:00 2001
From: Jaayden Halko <jaayden.halko@gmail.com>
Date: Tue, 4 Feb 2025 23:19:13 +0000
Subject: [PATCH 7/9] chore: PR comments

---
 .../IdpOrgSyncPage/IdpOrgSyncPage.tsx           | 17 +++++++----------
 .../IdpOrgSyncPage/IdpOrgSyncPageView.tsx       |  6 +++---
 2 files changed, 10 insertions(+), 13 deletions(-)

diff --git a/site/src/pages/DeploymentSettingsPage/IdpOrgSyncPage/IdpOrgSyncPage.tsx b/site/src/pages/DeploymentSettingsPage/IdpOrgSyncPage/IdpOrgSyncPage.tsx
index 2897af32bbdb9..4d5b53e0f3ea2 100644
--- a/site/src/pages/DeploymentSettingsPage/IdpOrgSyncPage/IdpOrgSyncPage.tsx
+++ b/site/src/pages/DeploymentSettingsPage/IdpOrgSyncPage/IdpOrgSyncPage.tsx
@@ -30,17 +30,14 @@ export const IdpOrgSyncPage: FC = () => {
 		data: orgSyncSettingsData,
 		isLoading,
 		error,
-	} = useQuery(
-		organizationIdpSyncSettings(isIdpSyncEnabled).queryKey,
-		organizationIdpSyncSettings(isIdpSyncEnabled).queryFn,
-		{
-			onSuccess: (data) => {
-				if (data?.field) {
-					setClaimField(data.field);
-				}
-			},
+	} = useQuery({
+		...organizationIdpSyncSettings(isIdpSyncEnabled),
+		onSuccess: (data) => {
+			if (data?.field) {
+				setClaimField(data.field);
+			}
 		},
-	);
+	});
 
 	const { data: claimFieldValues } = useQuery(
 		idpSyncClaimFieldValues(claimField),
diff --git a/site/src/pages/DeploymentSettingsPage/IdpOrgSyncPage/IdpOrgSyncPageView.tsx b/site/src/pages/DeploymentSettingsPage/IdpOrgSyncPage/IdpOrgSyncPageView.tsx
index 284a1846a90e4..031234da0da25 100644
--- a/site/src/pages/DeploymentSettingsPage/IdpOrgSyncPage/IdpOrgSyncPageView.tsx
+++ b/site/src/pages/DeploymentSettingsPage/IdpOrgSyncPage/IdpOrgSyncPageView.tsx
@@ -132,13 +132,13 @@ export const IdpOrgSyncPageView: FC<IdpSyncPageViewProps> = ({
 		form.handleSubmit();
 	};
 
-	const handleKeyDown: KeyboardEventHandler<HTMLInputElement> = (e) => {
+	const handleKeyDown: KeyboardEventHandler<HTMLInputElement> = (event) => {
 		if (
-			e.key === "Enter" &&
+			event.key === "Enter" &&
 			inputValue &&
 			!claimFieldValues?.some((value) => value === inputValue.toLowerCase())
 		) {
-			e.preventDefault();
+			event.preventDefault();
 			setIdpOrgName(inputValue);
 			setInputValue("");
 			setOpen(false);

From 2d98f7e4350a3a70936c18414df8a16198c0908c Mon Sep 17 00:00:00 2001
From: Jaayden Halko <jaayden.halko@gmail.com>
Date: Tue, 4 Feb 2025 23:36:43 +0000
Subject: [PATCH 8/9] fix: update test

---
 site/e2e/tests/deployment/idpOrgSync.spec.ts | 12 +++++++++---
 1 file changed, 9 insertions(+), 3 deletions(-)

diff --git a/site/e2e/tests/deployment/idpOrgSync.spec.ts b/site/e2e/tests/deployment/idpOrgSync.spec.ts
index a5162d4055658..e43820ab8fbce 100644
--- a/site/e2e/tests/deployment/idpOrgSync.spec.ts
+++ b/site/e2e/tests/deployment/idpOrgSync.spec.ts
@@ -150,6 +150,11 @@ test.describe("IdpOrgSyncPage", () => {
 			waitUntil: "domcontentloaded",
 		});
 
+		const syncField = page.getByRole("textbox", {
+			name: "Organization sync field",
+		});
+		await syncField.fill("");
+
 		const idpOrgInput = page.getByLabel("IdP organization name");
 		const addButton = page.getByRole("button", {
 			name: /Add IdP organization/i,
@@ -157,7 +162,8 @@ test.describe("IdpOrgSyncPage", () => {
 
 		await expect(addButton).toBeDisabled();
 
-		await idpOrgInput.fill("new-idp-org");
+		const idpOrgName = randomName();
+		await idpOrgInput.fill(idpOrgName);
 
 		// Select Coder organization from combobox
 		const orgSelector = page.getByPlaceholder("Select organization");
@@ -177,10 +183,10 @@ test.describe("IdpOrgSyncPage", () => {
 		await addButton.click();
 
 		// Verify new mapping appears in table
-		const newRow = page.getByTestId("idp-org-new-idp-org");
+		const newRow = page.getByTestId(`idp-org-${idpOrgName}`);
 		await expect(newRow).toBeVisible();
 		await expect(
-			newRow.getByRole("cell", { name: "new-idp-org" }),
+			newRow.getByRole("cell", { name: idpOrgName }),
 		).toBeVisible();
 		await expect(newRow.getByRole("cell", { name: orgName })).toBeVisible();
 

From cff6e0188c15594fa088fc813a0eb721c63ec1ac Mon Sep 17 00:00:00 2001
From: Jaayden Halko <jaayden.halko@gmail.com>
Date: Wed, 5 Feb 2025 11:51:02 +0000
Subject: [PATCH 9/9] fix: format

---
 site/e2e/tests/deployment/idpOrgSync.spec.ts | 4 +---
 1 file changed, 1 insertion(+), 3 deletions(-)

diff --git a/site/e2e/tests/deployment/idpOrgSync.spec.ts b/site/e2e/tests/deployment/idpOrgSync.spec.ts
index e43820ab8fbce..d77ddb1593fd3 100644
--- a/site/e2e/tests/deployment/idpOrgSync.spec.ts
+++ b/site/e2e/tests/deployment/idpOrgSync.spec.ts
@@ -185,9 +185,7 @@ test.describe("IdpOrgSyncPage", () => {
 		// Verify new mapping appears in table
 		const newRow = page.getByTestId(`idp-org-${idpOrgName}`);
 		await expect(newRow).toBeVisible();
-		await expect(
-			newRow.getByRole("cell", { name: idpOrgName }),
-		).toBeVisible();
+		await expect(newRow.getByRole("cell", { name: idpOrgName })).toBeVisible();
 		await expect(newRow.getByRole("cell", { name: orgName })).toBeVisible();
 
 		await expect(