coder · aslilac · Feb 7, 2025 · Feb 5, 2025 · Feb 6, 2025 · Feb 6, 2025
@@ -698,7 +698,7 @@ class ApiMethods {
 		}
 
 		const response = await this.axios.get<TypesGen.ProvisionerDaemon[]>(
-			`/api/v2/organizations/${organization}/provisionerdaemons?${params.toString()}`,
+			`/api/v2/organizations/${organization}/provisionerdaemons?${params}`,
 		);
 		return response.data;
 	};
@@ -793,7 +793,7 @@ class ApiMethods {
 		const params = new URLSearchParams();
 		params.set("claimField", field);
 		const response = await this.axios.get<readonly string[]>(
-			`/api/v2/settings/idpsync/field-values?${params.toString}`,
+			`/api/v2/settings/idpsync/field-values?${params}`,
 		);
 		return response.data;
 	};
@@ -805,7 +805,7 @@ class ApiMethods {
 		const params = new URLSearchParams();
 		params.set("claimField", field);
 		const response = await this.axios.get<TypesGen.Response>(
-			`/api/v2/organizations/${organization}/settings/idpsync/field-values?${params.toString()}`,
+			`/api/v2/organizations/${organization}/settings/idpsync/field-values?${params}`,
 		);
 		return response.data;
 	};

diff --git a/site/src/pages/DeploymentSettingsPage/IdpOrgSyncPage/IdpOrgSyncPage.tsx b/site/src/pages/DeploymentSettingsPage/IdpOrgSyncPage/IdpOrgSyncPage.tsx
@@ -1,4 +1,5 @@
 import { getErrorMessage } from "api/errors";
+import { deploymentIdpSyncFieldValues } from "api/queries/deployment";
 import {
 	organizationIdpSyncSettings,
 	patchOrganizationSyncSettings,
@@ -18,7 +19,6 @@ import { docs } from "utils/docs";
 import { pageTitle } from "utils/page";
 import { ExportPolicyButton } from "./ExportPolicyButton";
 import IdpOrgSyncPageView from "./IdpOrgSyncPageView";
-import { deploymentIdpSyncFieldValues } from "api/queries/deployment";
 
 export const IdpOrgSyncPage: FC = () => {
 	const queryClient = useQueryClient();
@@ -55,7 +55,7 @@ export const IdpOrgSyncPage: FC = () => {
 		}
 	}, [patchOrganizationSyncSettingsMutation.error]);
 
-	if (settingsQuery.isLoading || fieldValuesQuery.isLoading) {
+	if (settingsQuery.isLoading) {
 		return <Loader />;
 	}
 
@@ -90,9 +90,9 @@ export const IdpOrgSyncPage: FC = () => {
 					<Cond>
 						<IdpOrgSyncPageView
 							organizationSyncSettings={settingsQuery.data}
-							fieldValues={fieldValuesQuery.data}
+							claimFieldValues={fieldValuesQuery.data}
 							organizations={organizations}
-							onSyncFieldChange={(field) => setField(field)}
+							onSyncFieldChange={setField}
 							onSubmit={async (data) => {
 								try {
 									await patchOrganizationSyncSettingsMutation.mutateAsync(data);
@@ -106,6 +106,7 @@ export const IdpOrgSyncPage: FC = () => {
 									);
 								}
 							}}
+							error={settingsQuery.error || fieldValuesQuery.error}
 						/>
 					</Cond>
 				</ChooseOne>

@@ -14,7 +14,7 @@ const meta: Meta<typeof IdpOrgSyncPageView> = {
 	component: IdpOrgSyncPageView,
 	args: {
 		organizationSyncSettings: MockOrganizationSyncSettings2,
-		fieldValues: Object.keys(MockOrganizationSyncSettings2.mapping),
+		claimFieldValues: Object.keys(MockOrganizationSyncSettings2.mapping),
 		organizations: [MockOrganization, MockOrganization2],
 		error: undefined,
 	},
@@ -40,14 +40,14 @@ export const HasError: Story = {
 export const MissingGroups: Story = {
 	args: {
 		organizationSyncSettings: MockOrganizationSyncSettings,
-		fieldValues: Object.keys(MockOrganizationSyncSettings.mapping),
+		claimFieldValues: Object.keys(MockOrganizationSyncSettings.mapping),
 		organizations: [],
 	},
 };
 
 export const MissingClaim: Story = {
 	args: {
-		fieldValues: [],
+		claimFieldValues: [],
 	},
 };
 

@@ -28,12 +28,6 @@ import {
 	MultiSelectCombobox,
 	type Option,
 } from "components/MultiSelectCombobox/MultiSelectCombobox";
-import {
-	Tooltip,
-	TooltipContent,
-	TooltipTrigger,
-	TooltipProvider,
-} from "components/Tooltip/Tooltip";
 import { Spinner } from "components/Spinner/Spinner";
 import { Switch } from "components/Switch/Switch";
 import {
@@ -43,18 +37,23 @@ import {
 	TableHeader,
 	TableRow,
 } from "components/Table/Table";
+import {
+	Tooltip,
+	TooltipContent,
+	TooltipTrigger,
+	TooltipProvider,
+} from "components/Tooltip/Tooltip";
 import { useFormik } from "formik";
 import { Plus, Trash, TriangleAlert } from "lucide-react";
 import { type FC, type KeyboardEventHandler, useId, useState } from "react";
 import { docs } from "utils/docs";
 import { isUUID } from "utils/uuid";
 import * as Yup from "yup";
 import { OrganizationPills } from "./OrganizationPills";
-import { Stack } from "components/Stack/Stack";
 
 interface IdpSyncPageViewProps {
 	organizationSyncSettings: OrganizationSyncSettings | undefined;
-	fieldValues: readonly string[] | undefined;
+	claimFieldValues: readonly string[] | undefined;
 	organizations: readonly Organization[];
 	onSubmit: (data: OrganizationSyncSettings) => void;
 	onSyncFieldChange: (value: string) => void;
@@ -85,7 +84,7 @@ const validationSchema = Yup.object({
 
 export const IdpOrgSyncPageView: FC<IdpSyncPageViewProps> = ({
 	organizationSyncSettings,
-	fieldValues,
+	claimFieldValues,
 	organizations,
 	onSubmit,
 	onSyncFieldChange,
@@ -137,7 +136,7 @@ export const IdpOrgSyncPageView: FC<IdpSyncPageViewProps> = ({
 		if (
 			event.key === "Enter" &&
 			inputValue &&
-			!fieldValues?.some((value) => value === inputValue.toLowerCase())
+			!claimFieldValues?.some((value) => value === inputValue.toLowerCase())
 		) {
 			event.preventDefault();
 			setIdpOrgName(inputValue);
@@ -220,10 +219,10 @@ export const IdpOrgSyncPageView: FC<IdpSyncPageViewProps> = ({
 									IdP organization name
 								</Label>
 
-								{fieldValues ? (
+								{claimFieldValues ? (
 									<Combobox
 										value={idpOrgName}
-										options={fieldValues}
+										options={claimFieldValues}
 										placeholder="Select IdP organization"
 										open={open}
 										onOpenChange={setOpen}
@@ -314,7 +313,7 @@ export const IdpOrgSyncPageView: FC<IdpSyncPageViewProps> = ({
 											idpOrg={idpOrg}
 											coderOrgs={getOrgNames(organizations)}
 											onDelete={handleDelete}
-											exists={fieldValues?.includes(idpOrg)}
+											exists={claimFieldValues?.includes(idpOrg)}
 										/>
 									))}
 						</IdpMappingTable>
@@ -414,28 +413,28 @@ const OrganizationRow: FC<OrganizationRowProps> = ({
 	return (
 		<TableRow data-testid={`idp-org-${idpOrg}`}>
 			<TableCell>
-				<Stack
-					direction="row"
-					alignItems="center"
-					spacing={1}
-					className="text-content-primary"
-				>
+				<div className="flex flex-row items-center gap-2 text-content-primary">
 					{idpOrg}
 					{!exists && (
 						<TooltipProvider>
 							<Tooltip>
 								<TooltipTrigger asChild>
-									<TriangleAlert className="size-icon-sm cursor-pointer text-content-warning" />
+									<TriangleAlert className="size-icon-xs cursor-pointer text-content-warning" />
 								</TooltipTrigger>
-								<TooltipContent className="p-2 text-xs text-content-secondary max-w-sm">
+								<TooltipContent
+									align="start"
+									alignOffset={-8}
+									sideOffset={8}
+									className="p-2 text-xs text-content-secondary max-w-sm"
+								>
 									This value has not be seen in the specified claim field
 									before. You might want to check your IdP configuration and
 									ensure that this value is not misspelled.
 								</TooltipContent>
 							</Tooltip>
 						</TooltipProvider>
 					)}
-				</Stack>
+				</div>
 			</TableCell>
 			<TableCell>
 				<OrganizationPills organizations={coderOrgs} />