Merge branch 'main' into lilac/idp-sync-missing-given-warning

coder · aslilac · Feb 6, 2025 · Feb 5, 2025 · Feb 6, 2025 · Feb 6, 2025
commit 5634be195458d3a816a714332b3660132a10c2a7
diff --git a/site/src/api/api.ts b/site/src/api/api.ts
@@ -798,6 +798,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/deployment.ts b/site/src/api/queries/deployment.ts
@@ -32,7 +32,7 @@ export const deploymentSSHConfig = () => {
 
 export const deploymentIdpSyncFieldValues = (field: string) => {
 	return {
-		queryKey: ["deployment", "idpSync", "fieldValues"],
+		queryKey: ["deployment", "idpSync", "fieldValues", field],
 		queryFn: () => API.getDeploymentIdpSyncFieldValues(field),
 	};
 };
diff --git a/site/src/api/queries/organizations.ts b/site/src/api/queries/organizations.ts
@@ -357,16 +357,3 @@ export const organizationIdpSyncClaimFieldValues = (
 			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/Combobox/Combobox.tsx b/site/src/components/Combobox/Combobox.tsx
@@ -18,7 +18,7 @@ import { cn } from "utils/cn";
 
 interface ComboboxProps {
 	value: string;
-	options?: string[];
+	options?: readonly string[];
 	placeholder?: string;
 	open: boolean;
 	onOpenChange: (open: boolean) => void;

diff --git a/site/src/pages/DeploymentSettingsPage/IdpOrgSyncPage/IdpOrgSyncPage.tsx b/site/src/pages/DeploymentSettingsPage/IdpOrgSyncPage/IdpOrgSyncPage.tsx
@@ -3,7 +3,6 @@ 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";
@@ -22,17 +21,23 @@ import IdpOrgSyncPageView from "./IdpOrgSyncPageView";
 import { deploymentIdpSyncFieldValues } from "api/queries/deployment";
 
 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();
 	const { organizations } = useDashboard();
 	const settingsQuery = useQuery(organizationIdpSyncSettings(isIdpSyncEnabled));
 
+	const [field, setField] = useState("");
+	useEffect(() => {
+		if (!settingsQuery.data) {
+			return;
+		}
+
+		setField(settingsQuery.data.field);
+	}, [settingsQuery.data]);
+
 	const fieldValuesQuery = useQuery(
-		settingsQuery.data
-			? deploymentIdpSyncFieldValues(settingsQuery.data.field)
-			: { enabled: false },
+		field ? deploymentIdpSyncFieldValues(field) : { enabled: false },
 	);
 
 	const patchOrganizationSyncSettingsMutation = useMutation(
@@ -54,10 +59,6 @@ export const IdpOrgSyncPage: FC = () => {
 		return <Loader />;
 	}
 
-	const handleSyncFieldChange = (value: string) => {
-		setClaimField(value);
-	};
-
 	return (
 		<>
 			<Helmet>
@@ -91,6 +92,7 @@ export const IdpOrgSyncPage: FC = () => {
 							organizationSyncSettings={settingsQuery.data}
 							fieldValues={fieldValuesQuery.data}
 							organizations={organizations}
+							onSyncFieldChange={(field) => setField(field)}
 							onSubmit={async (data) => {
 								try {
 									await patchOrganizationSyncSettingsMutation.mutateAsync(data);
@@ -104,10 +106,6 @@ export const IdpOrgSyncPage: FC = () => {
 									);
 								}
 							}}
-							error={
-								settingsQuery.error ||
-								patchOrganizationSyncSettingsMutation.error
-							}
 						/>
 					</Cond>
 				</ChooseOne>

diff --git a/site/src/pages/DeploymentSettingsPage/IdpOrgSyncPage/IdpOrgSyncPageView.tsx b/site/src/pages/DeploymentSettingsPage/IdpOrgSyncPage/IdpOrgSyncPageView.tsx
@@ -44,7 +44,7 @@ import {
 } from "components/Table/Table";
 import { useFormik } from "formik";
 import { Plus, Trash, TriangleAlert } from "lucide-react";
-import { type FC, useId, useState } from "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";
@@ -57,7 +57,6 @@ interface IdpSyncPageViewProps {
 	organizations: readonly Organization[];
 	onSubmit: (data: OrganizationSyncSettings) => void;
 	onSyncFieldChange: (value: string) => void;
-	claimFieldValues: string[] | undefined;
 	error?: unknown;
 }
 
@@ -89,7 +88,6 @@ export const IdpOrgSyncPageView: FC<IdpSyncPageViewProps> = ({
 	organizations,
 	onSubmit,
 	onSyncFieldChange,
-	claimFieldValues,
 	error,
 }) => {
 	const form = useFormik<OrganizationSyncSettings>({
@@ -138,7 +136,7 @@ export const IdpOrgSyncPageView: FC<IdpSyncPageViewProps> = ({
 		if (
 			event.key === "Enter" &&
 			inputValue &&
-			!claimFieldValues?.some((value) => value === inputValue.toLowerCase())
+			!fieldValues?.some((value) => value === inputValue.toLowerCase())
 		) {
 			event.preventDefault();
 			setIdpOrgName(inputValue);
@@ -221,10 +219,10 @@ export const IdpOrgSyncPageView: FC<IdpSyncPageViewProps> = ({
 									IdP organization name
 								</Label>
 
-								{claimFieldValues ? (
+								{fieldValues ? (
 									<Combobox
 										value={idpOrgName}
-										options={claimFieldValues}
+										options={fieldValues}
 										placeholder="Select IdP organization"
 										open={open}
 										onOpenChange={setOpen}