From 5c09338f7e8166fc07db3686d7ecef9fe2ab13ae Mon Sep 17 00:00:00 2001
From: McKayla Washburn <mckayla@hey.com>
Date: Wed, 5 Feb 2025 00:24:50 +0000
Subject: [PATCH 01/14] hoot

---
 .../IdpOrgSyncPage/IdpOrgSyncPageView.stories.tsx  |  7 +++++++
 .../IdpOrgSyncPage/IdpOrgSyncPageView.tsx          | 14 ++++++++++++--
 site/tailwind.config.js                            |  1 +
 3 files changed, 20 insertions(+), 2 deletions(-)

diff --git a/site/src/pages/DeploymentSettingsPage/IdpOrgSyncPage/IdpOrgSyncPageView.stories.tsx b/site/src/pages/DeploymentSettingsPage/IdpOrgSyncPage/IdpOrgSyncPageView.stories.tsx
index 8d02e1f248833..ff65a634ec61b 100644
--- a/site/src/pages/DeploymentSettingsPage/IdpOrgSyncPage/IdpOrgSyncPageView.stories.tsx
+++ b/site/src/pages/DeploymentSettingsPage/IdpOrgSyncPage/IdpOrgSyncPageView.stories.tsx
@@ -50,6 +50,13 @@ export const MissingGroups: Story = {
 	},
 };
 
+export const MissingClaim: Story = {
+	args: {
+		...Default.args,
+		organizationSyncSettings: MockOrganizationSyncSettings,
+	},
+};
+
 export const AssignDefaultOrgWarningDialog: Story = {
 	args: {
 		organizationSyncSettings: MockOrganizationSyncSettings,
diff --git a/site/src/pages/DeploymentSettingsPage/IdpOrgSyncPage/IdpOrgSyncPageView.tsx b/site/src/pages/DeploymentSettingsPage/IdpOrgSyncPage/IdpOrgSyncPageView.tsx
index 7ed1b85e8c9dd..9b7528dfc1250 100644
--- a/site/src/pages/DeploymentSettingsPage/IdpOrgSyncPage/IdpOrgSyncPageView.tsx
+++ b/site/src/pages/DeploymentSettingsPage/IdpOrgSyncPage/IdpOrgSyncPageView.tsx
@@ -36,12 +36,13 @@ import {
 import { Spinner } from "components/Spinner/Spinner";
 import { Switch } from "components/Switch/Switch";
 import { useFormik } from "formik";
-import { Plus, Trash } from "lucide-react";
+import { Plus, Trash, TriangleAlert } from "lucide-react";
 import { type FC, 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;
@@ -354,18 +355,27 @@ const IdpMappingTable: FC<IdpMappingTableProps> = ({ isEmpty, children }) => {
 
 interface OrganizationRowProps {
 	idpOrg: string;
+	doesIdpOrgEvenExistLol: boolean;
 	coderOrgs: readonly string[];
 	onDelete: (idpOrg: string) => void;
 }
 
 const OrganizationRow: FC<OrganizationRowProps> = ({
 	idpOrg,
+	doesIdpOrgEvenExistLol,
 	coderOrgs,
 	onDelete,
 }) => {
 	return (
 		<TableRow data-testid={`idp-org-${idpOrg}`}>
-			<TableCell>{idpOrg}</TableCell>
+			<TableCell>
+				<Stack direction="row" alignItems="center" spacing={1}>
+					{idpOrg}{" "}
+					{!doesIdpOrgEvenExistLol && (
+						<TriangleAlert className="size-icon-sm cursor-pointer text-content-warning" />
+					)}
+				</Stack>
+			</TableCell>
 			<TableCell>
 				<OrganizationPills organizations={coderOrgs} />
 			</TableCell>
diff --git a/site/tailwind.config.js b/site/tailwind.config.js
index 7c07eed4bd3a2..0eb7e5176f8d8 100644
--- a/site/tailwind.config.js
+++ b/site/tailwind.config.js
@@ -33,6 +33,7 @@ module.exports = {
 					success: "hsl(var(--content-success))",
 					danger: "hsl(var(--content-danger))",
 					link: "hsl(var(--content-link))",
+					warning: "hsl(var(--content-warning))",
 				},
 				surface: {
 					primary: "hsl(var(--surface-primary))",

From c52982e3bf2d7fc48a41160ac5fd811a61c068d2 Mon Sep 17 00:00:00 2001
From: McKayla Washburn <mckayla@hey.com>
Date: Thu, 6 Feb 2025 18:36:41 +0000
Subject: [PATCH 02/14] feat: show warning on unrecognized idp org mapping
 claims

---
 site/src/api/api.ts                           | 11 +++++++
 site/src/api/queries/deployment.ts            |  7 +++++
 .../IdpOrgSyncPage/IdpOrgSyncPage.tsx         | 25 ++++++++++------
 .../IdpOrgSyncPageView.stories.tsx            | 30 ++++++++-----------
 .../IdpOrgSyncPage/IdpOrgSyncPageView.tsx     |  9 ++++--
 site/src/testHelpers/entities.ts              |  7 +++++
 6 files changed, 59 insertions(+), 30 deletions(-)

diff --git a/site/src/api/api.ts b/site/src/api/api.ts
index 26491efb10565..7b29313e08118 100644
--- a/site/src/api/api.ts
+++ b/site/src/api/api.ts
@@ -787,6 +787,17 @@ class ApiMethods {
 		return response.data;
 	};
 
+	getDeploymentIdpSyncFieldValues = async (
+		field: string,
+	): Promise<readonly string[]> => {
+		const params = new URLSearchParams();
+		params.set("claimField", field);
+		const response = await this.axios.get<readonly string[]>(
+			`/api/v2/settings/idpsync/field-values?${params.toString}`,
+		);
+		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
index 62449af12fccf..69668c6fd04e3 100644
--- a/site/src/api/queries/deployment.ts
+++ b/site/src/api/queries/deployment.ts
@@ -29,3 +29,10 @@ export const deploymentSSHConfig = () => {
 		queryFn: API.getDeploymentSSHConfig,
 	};
 };
+
+export const deploymentIdpSyncFieldValues = (field: string) => {
+	return {
+		queryKey: ["deployment", "idpSync", "fieldValues"],
+		queryFn: () => API.getDeploymentIdpSyncFieldValues(field),
+	};
+};
diff --git a/site/src/pages/DeploymentSettingsPage/IdpOrgSyncPage/IdpOrgSyncPage.tsx b/site/src/pages/DeploymentSettingsPage/IdpOrgSyncPage/IdpOrgSyncPage.tsx
index d08b3aac4ab1a..fcce79e031de1 100644
--- a/site/src/pages/DeploymentSettingsPage/IdpOrgSyncPage/IdpOrgSyncPage.tsx
+++ b/site/src/pages/DeploymentSettingsPage/IdpOrgSyncPage/IdpOrgSyncPage.tsx
@@ -18,17 +18,20 @@ 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();
 	// IdP sync does not have its own entitlement and is based on templace_rbac
 	const { template_rbac: isIdpSyncEnabled } = useFeatureVisibility();
 	const { organizations } = useDashboard();
-	const {
-		data: orgSyncSettingsData,
-		isLoading,
-		error,
-	} = useQuery(organizationIdpSyncSettings(isIdpSyncEnabled));
+	const settingsQuery = useQuery(organizationIdpSyncSettings(isIdpSyncEnabled));
+
+	const fieldValuesQuery = useQuery(
+		settingsQuery.data
+			? deploymentIdpSyncFieldValues(settingsQuery.data.field)
+			: { enabled: false },
+	);
 
 	const patchOrganizationSyncSettingsMutation = useMutation(
 		patchOrganizationSyncSettings(queryClient),
@@ -45,7 +48,7 @@ export const IdpOrgSyncPage: FC = () => {
 		}
 	}, [patchOrganizationSyncSettingsMutation.error]);
 
-	if (isLoading) {
+	if (settingsQuery.isLoading || fieldValuesQuery.isLoading) {
 		return <Loader />;
 	}
 
@@ -67,7 +70,7 @@ export const IdpOrgSyncPage: FC = () => {
 							</Link>
 						</p>
 					</div>
-					<ExportPolicyButton syncSettings={orgSyncSettingsData} />
+					<ExportPolicyButton syncSettings={settingsQuery.data} />
 				</header>
 				<ChooseOne>
 					<Cond condition={!isIdpSyncEnabled}>
@@ -79,7 +82,8 @@ export const IdpOrgSyncPage: FC = () => {
 					</Cond>
 					<Cond>
 						<IdpOrgSyncPageView
-							organizationSyncSettings={orgSyncSettingsData}
+							organizationSyncSettings={settingsQuery.data}
+							fieldValues={fieldValuesQuery.data}
 							organizations={organizations}
 							onSubmit={async (data) => {
 								try {
@@ -94,7 +98,10 @@ export const IdpOrgSyncPage: FC = () => {
 									);
 								}
 							}}
-							error={error || patchOrganizationSyncSettingsMutation.error}
+							error={
+								settingsQuery.error ||
+								patchOrganizationSyncSettingsMutation.error
+							}
 						/>
 					</Cond>
 				</ChooseOne>
diff --git a/site/src/pages/DeploymentSettingsPage/IdpOrgSyncPage/IdpOrgSyncPageView.stories.tsx b/site/src/pages/DeploymentSettingsPage/IdpOrgSyncPage/IdpOrgSyncPageView.stories.tsx
index ff65a634ec61b..576c887a1a3bc 100644
--- a/site/src/pages/DeploymentSettingsPage/IdpOrgSyncPage/IdpOrgSyncPageView.stories.tsx
+++ b/site/src/pages/DeploymentSettingsPage/IdpOrgSyncPage/IdpOrgSyncPageView.stories.tsx
@@ -5,12 +5,19 @@ import {
 	MockOrganization2,
 	MockOrganizationSyncSettings,
 	MockOrganizationSyncSettings2,
+	MockOrganizationSyncSettingsEmpty,
 } from "testHelpers/entities";
 import { IdpOrgSyncPageView } from "./IdpOrgSyncPageView";
 
 const meta: Meta<typeof IdpOrgSyncPageView> = {
 	title: "pages/IdpOrgSyncPageView",
 	component: IdpOrgSyncPageView,
+	args: {
+		organizationSyncSettings: MockOrganizationSyncSettings2,
+		fieldValues: Object.keys(MockOrganizationSyncSettings2.mapping),
+		organizations: [MockOrganization, MockOrganization2],
+		error: undefined,
+	},
 };
 
 export default meta;
@@ -18,42 +25,29 @@ type Story = StoryObj<typeof IdpOrgSyncPageView>;
 
 export const Empty: Story = {
 	args: {
-		organizationSyncSettings: {
-			field: "",
-			mapping: {},
-			organization_assign_default: true,
-		},
-		organizations: [MockOrganization, MockOrganization2],
-		error: undefined,
+		organizationSyncSettings: MockOrganizationSyncSettingsEmpty,
 	},
 };
 
-export const Default: Story = {
-	args: {
-		organizationSyncSettings: MockOrganizationSyncSettings2,
-		organizations: [MockOrganization, MockOrganization2],
-		error: undefined,
-	},
-};
+export const Default: Story = {};
 
 export const HasError: Story = {
 	args: {
-		...Default.args,
 		error: "This is a test error",
 	},
 };
 
 export const MissingGroups: Story = {
 	args: {
-		...Default.args,
 		organizationSyncSettings: MockOrganizationSyncSettings,
+		fieldValues: Object.keys(MockOrganizationSyncSettings.mapping),
+		organizations: [],
 	},
 };
 
 export const MissingClaim: Story = {
 	args: {
-		...Default.args,
-		organizationSyncSettings: MockOrganizationSyncSettings,
+		fieldValues: [],
 	},
 };
 
diff --git a/site/src/pages/DeploymentSettingsPage/IdpOrgSyncPage/IdpOrgSyncPageView.tsx b/site/src/pages/DeploymentSettingsPage/IdpOrgSyncPage/IdpOrgSyncPageView.tsx
index 9b7528dfc1250..ee5a2399faaff 100644
--- a/site/src/pages/DeploymentSettingsPage/IdpOrgSyncPage/IdpOrgSyncPageView.tsx
+++ b/site/src/pages/DeploymentSettingsPage/IdpOrgSyncPage/IdpOrgSyncPageView.tsx
@@ -46,6 +46,7 @@ import { Stack } from "components/Stack/Stack";
 
 interface IdpSyncPageViewProps {
 	organizationSyncSettings: OrganizationSyncSettings | undefined;
+	fieldValues: readonly string[] | undefined;
 	organizations: readonly Organization[];
 	onSubmit: (data: OrganizationSyncSettings) => void;
 	error?: unknown;
@@ -75,6 +76,7 @@ const validationSchema = Yup.object({
 
 export const IdpOrgSyncPageView: FC<IdpSyncPageViewProps> = ({
 	organizationSyncSettings,
+	fieldValues,
 	organizations,
 	onSubmit,
 	error,
@@ -268,6 +270,7 @@ export const IdpOrgSyncPageView: FC<IdpSyncPageViewProps> = ({
 											idpOrg={idpOrg}
 											coderOrgs={getOrgNames(organizations)}
 											onDelete={handleDelete}
+											exists={fieldValues?.includes(idpOrg)}
 										/>
 									))}
 						</IdpMappingTable>
@@ -355,14 +358,14 @@ const IdpMappingTable: FC<IdpMappingTableProps> = ({ isEmpty, children }) => {
 
 interface OrganizationRowProps {
 	idpOrg: string;
-	doesIdpOrgEvenExistLol: boolean;
+	exists: boolean | undefined;
 	coderOrgs: readonly string[];
 	onDelete: (idpOrg: string) => void;
 }
 
 const OrganizationRow: FC<OrganizationRowProps> = ({
 	idpOrg,
-	doesIdpOrgEvenExistLol,
+	exists = true,
 	coderOrgs,
 	onDelete,
 }) => {
@@ -371,7 +374,7 @@ const OrganizationRow: FC<OrganizationRowProps> = ({
 			<TableCell>
 				<Stack direction="row" alignItems="center" spacing={1}>
 					{idpOrg}{" "}
-					{!doesIdpOrgEvenExistLol && (
+					{!exists && (
 						<TriangleAlert className="size-icon-sm cursor-pointer text-content-warning" />
 					)}
 				</Stack>
diff --git a/site/src/testHelpers/entities.ts b/site/src/testHelpers/entities.ts
index c522457a63c1d..d8ce878bdef6e 100644
--- a/site/src/testHelpers/entities.ts
+++ b/site/src/testHelpers/entities.ts
@@ -2720,6 +2720,13 @@ export const MockOrganizationSyncSettings2: TypesGen.OrganizationSyncSettings =
 		organization_assign_default: true,
 	};
 
+export const MockOrganizationSyncSettingsEmpty: TypesGen.OrganizationSyncSettings =
+	{
+		field: "",
+		mapping: {},
+		organization_assign_default: true,
+	};
+
 export const MockGroup: TypesGen.Group = {
 	id: "fbd2116a-8961-4954-87ae-e4575bd29ce0",
 	name: "Front-End",

From 63ca7630cbc5c949485c2b68d2bf89851d990d65 Mon Sep 17 00:00:00 2001
From: McKayla Washburn <mckayla@hey.com>
Date: Thu, 6 Feb 2025 19:14:51 +0000
Subject: [PATCH 03/14] =?UTF-8?q?=F0=9F=A7=B9?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 site/src/api/api.ts                               | 15 +++++----------
 site/src/api/queries/organizations.ts             | 13 +++++--------
 .../IdpOrgSyncPage/IdpOrgSyncPageView.tsx         |  2 +-
 3 files changed, 11 insertions(+), 19 deletions(-)

diff --git a/site/src/api/api.ts b/site/src/api/api.ts
index 310e4e6b3798f..cbde6cd022924 100644
--- a/site/src/api/api.ts
+++ b/site/src/api/api.ts
@@ -798,19 +798,14 @@ 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 (
+	getOrganizationIdpSyncClaimFieldValues = async (
 		organization: string,
-		claimField: string,
+		field: string,
 	) => {
+		const params = new URLSearchParams();
+		params.set("claimField", field);
 		const response = await this.axios.get<TypesGen.Response>(
-			`/api/v2/organizations/${organization}/settings/idpsync/field-values?claimField=${claimField}`,
+			`/api/v2/organizations/${organization}/settings/idpsync/field-values?${params.toString()}`,
 		);
 		return response.data;
 	};
diff --git a/site/src/api/queries/organizations.ts b/site/src/api/queries/organizations.ts
index 4dad5d2af51e6..6246664e6ecf0 100644
--- a/site/src/api/queries/organizations.ts
+++ b/site/src/api/queries/organizations.ts
@@ -341,19 +341,16 @@ export const organizationsPermissions = (
 
 export const getOrganizationIdpSyncClaimFieldValuesKey = (
 	organization: string,
-	claimField: string,
-) => [organization, claimField, "organizationIdpSyncClaimFieldValues"];
+	field: string,
+) => [organization, "idpSync", "fieldValues", field];
 
 export const organizationIdpSyncClaimFieldValues = (
 	organization: string,
-	claimField: string,
+	field: string,
 ) => {
 	return {
-		queryKey: getOrganizationIdpSyncClaimFieldValuesKey(
-			organization,
-			claimField,
-		),
+		queryKey: getOrganizationIdpSyncClaimFieldValuesKey(organization, field),
 		queryFn: () =>
-			API.getIdpSyncClaimFieldValuesByOrganization(organization, claimField),
+			API.getOrganizationIdpSyncClaimFieldValues(organization, field),
 	};
 };
diff --git a/site/src/pages/DeploymentSettingsPage/IdpOrgSyncPage/IdpOrgSyncPageView.tsx b/site/src/pages/DeploymentSettingsPage/IdpOrgSyncPage/IdpOrgSyncPageView.tsx
index 144beb7501bf6..a08395985b938 100644
--- a/site/src/pages/DeploymentSettingsPage/IdpOrgSyncPage/IdpOrgSyncPageView.tsx
+++ b/site/src/pages/DeploymentSettingsPage/IdpOrgSyncPage/IdpOrgSyncPageView.tsx
@@ -414,7 +414,7 @@ const OrganizationRow: FC<OrganizationRowProps> = ({
 		<TableRow data-testid={`idp-org-${idpOrg}`}>
 			<TableCell>
 				<Stack direction="row" alignItems="center" spacing={1}>
-					{idpOrg}{" "}
+					{idpOrg}
 					{!exists && (
 						<TriangleAlert className="size-icon-sm cursor-pointer text-content-warning" />
 					)}

From e55e0a8446e8323b993306678f4b09177be61c60 Mon Sep 17 00:00:00 2001
From: McKayla Washburn <mckayla@hey.com>
Date: Thu, 6 Feb 2025 19:23:44 +0000
Subject: [PATCH 04/14] add warning description

---
 .../IdpOrgSyncPage/IdpOrgSyncPageView.tsx             | 11 ++++++++++-
 1 file changed, 10 insertions(+), 1 deletion(-)

diff --git a/site/src/pages/DeploymentSettingsPage/IdpOrgSyncPage/IdpOrgSyncPageView.tsx b/site/src/pages/DeploymentSettingsPage/IdpOrgSyncPage/IdpOrgSyncPageView.tsx
index a08395985b938..061a4ad4b1ba6 100644
--- a/site/src/pages/DeploymentSettingsPage/IdpOrgSyncPage/IdpOrgSyncPageView.tsx
+++ b/site/src/pages/DeploymentSettingsPage/IdpOrgSyncPage/IdpOrgSyncPageView.tsx
@@ -416,7 +416,16 @@ const OrganizationRow: FC<OrganizationRowProps> = ({
 				<Stack direction="row" alignItems="center" spacing={1}>
 					{idpOrg}
 					{!exists && (
-						<TriangleAlert className="size-icon-sm cursor-pointer text-content-warning" />
+						<Popover>
+							<PopoverTrigger asChild>
+								<TriangleAlert className="size-icon-sm cursor-pointer text-content-warning" />
+							</PopoverTrigger>
+							<PopoverContent className="p-2 text-xs text-content-secondary">
+								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.
+							</PopoverContent>
+						</Popover>
 					)}
 				</Stack>
 			</TableCell>

From 72a7986188cd139a9bc1c916c30f5c2fa92c27ab Mon Sep 17 00:00:00 2001
From: McKayla Washburn <mckayla@hey.com>
Date: Thu, 6 Feb 2025 20:07:31 +0000
Subject: [PATCH 05/14] toolptipp

---
 .../components/Tooltip/Tooltip.stories.tsx    | 16 ++++------
 .../IdpOrgSyncPage/IdpOrgSyncPageView.tsx     | 31 ++++++++++---------
 2 files changed, 23 insertions(+), 24 deletions(-)

diff --git a/site/src/components/Tooltip/Tooltip.stories.tsx b/site/src/components/Tooltip/Tooltip.stories.tsx
index 68561b6a189e3..9af79ca76c099 100644
--- a/site/src/components/Tooltip/Tooltip.stories.tsx
+++ b/site/src/components/Tooltip/Tooltip.stories.tsx
@@ -12,16 +12,12 @@ const meta: Meta<typeof TooltipProvider> = {
 	component: TooltipProvider,
 	args: {
 		children: (
-			<>
-				<TooltipProvider>
-					<Tooltip open>
-						<TooltipTrigger asChild>
-							<Button variant="outline">Hover</Button>
-						</TooltipTrigger>
-						<TooltipContent>Add to library</TooltipContent>
-					</Tooltip>
-				</TooltipProvider>
-			</>
+			<Tooltip open>
+				<TooltipTrigger asChild>
+					<Button variant="outline">Hover</Button>
+				</TooltipTrigger>
+				<TooltipContent>Add to library</TooltipContent>
+			</Tooltip>
 		),
 	},
 };
diff --git a/site/src/pages/DeploymentSettingsPage/IdpOrgSyncPage/IdpOrgSyncPageView.tsx b/site/src/pages/DeploymentSettingsPage/IdpOrgSyncPage/IdpOrgSyncPageView.tsx
index 061a4ad4b1ba6..ebd9742f94688 100644
--- a/site/src/pages/DeploymentSettingsPage/IdpOrgSyncPage/IdpOrgSyncPageView.tsx
+++ b/site/src/pages/DeploymentSettingsPage/IdpOrgSyncPage/IdpOrgSyncPageView.tsx
@@ -29,10 +29,10 @@ import {
 	type Option,
 } from "components/MultiSelectCombobox/MultiSelectCombobox";
 import {
-	Popover,
-	PopoverContent,
-	PopoverTrigger,
-} from "components/Popover/Popover";
+	Tooltip,
+	TooltipContent,
+	TooltipTrigger,
+} from "components/Tooltip/Tooltip";
 import { Spinner } from "components/Spinner/Spinner";
 import { Switch } from "components/Switch/Switch";
 import {
@@ -50,6 +50,7 @@ import { isUUID } from "utils/uuid";
 import * as Yup from "yup";
 import { OrganizationPills } from "./OrganizationPills";
 import { Stack } from "components/Stack/Stack";
+import { TooltipProvider } from "@radix-ui/react-tooltip";
 
 interface IdpSyncPageViewProps {
 	organizationSyncSettings: OrganizationSyncSettings | undefined;
@@ -416,16 +417,18 @@ const OrganizationRow: FC<OrganizationRowProps> = ({
 				<Stack direction="row" alignItems="center" spacing={1}>
 					{idpOrg}
 					{!exists && (
-						<Popover>
-							<PopoverTrigger asChild>
-								<TriangleAlert className="size-icon-sm cursor-pointer text-content-warning" />
-							</PopoverTrigger>
-							<PopoverContent className="p-2 text-xs text-content-secondary">
-								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.
-							</PopoverContent>
-						</Popover>
+						<TooltipProvider>
+							<Tooltip>
+								<TooltipTrigger asChild>
+									<TriangleAlert className="size-icon-sm cursor-pointer text-content-warning" />
+								</TooltipTrigger>
+								<TooltipContent 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>
 			</TableCell>

From eedf797b1c32729e0993fca8126e20a7dcd9c741 Mon Sep 17 00:00:00 2001
From: McKayla Washburn <mckayla@hey.com>
Date: Thu, 6 Feb 2025 20:10:26 +0000
Subject: [PATCH 06/14] tweak text colors

---
 .../IdpOrgSyncPage/IdpOrgSyncPageView.tsx                  | 7 ++++++-
 1 file changed, 6 insertions(+), 1 deletion(-)

diff --git a/site/src/pages/DeploymentSettingsPage/IdpOrgSyncPage/IdpOrgSyncPageView.tsx b/site/src/pages/DeploymentSettingsPage/IdpOrgSyncPage/IdpOrgSyncPageView.tsx
index ebd9742f94688..979b1830d7d38 100644
--- a/site/src/pages/DeploymentSettingsPage/IdpOrgSyncPage/IdpOrgSyncPageView.tsx
+++ b/site/src/pages/DeploymentSettingsPage/IdpOrgSyncPage/IdpOrgSyncPageView.tsx
@@ -414,7 +414,12 @@ const OrganizationRow: FC<OrganizationRowProps> = ({
 	return (
 		<TableRow data-testid={`idp-org-${idpOrg}`}>
 			<TableCell>
-				<Stack direction="row" alignItems="center" spacing={1}>
+				<Stack
+					direction="row"
+					alignItems="center"
+					spacing={1}
+					className="text-content-primary"
+				>
 					{idpOrg}
 					{!exists && (
 						<TooltipProvider>

From 06ba32deefe1e4ff24ef16df32b3394e67b0206d Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E3=82=B1=E3=82=A4=E3=83=A9?= <mckayla@hey.com>
Date: Thu, 6 Feb 2025 15:17:32 -0700
Subject: [PATCH 07/14] Update
 site/src/pages/DeploymentSettingsPage/IdpOrgSyncPage/IdpOrgSyncPageView.tsx

Co-authored-by: Jaayden Halko <jaayden.halko@gmail.com>
---
 .../IdpOrgSyncPage/IdpOrgSyncPageView.tsx                       | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/site/src/pages/DeploymentSettingsPage/IdpOrgSyncPage/IdpOrgSyncPageView.tsx b/site/src/pages/DeploymentSettingsPage/IdpOrgSyncPage/IdpOrgSyncPageView.tsx
index 979b1830d7d38..fb64dbde04955 100644
--- a/site/src/pages/DeploymentSettingsPage/IdpOrgSyncPage/IdpOrgSyncPageView.tsx
+++ b/site/src/pages/DeploymentSettingsPage/IdpOrgSyncPage/IdpOrgSyncPageView.tsx
@@ -425,7 +425,7 @@ const OrganizationRow: FC<OrganizationRowProps> = ({
 						<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">
 									This value has not be seen in the specified claim field

From 6ffcc94c9decc1a229948115e366866ab4283a29 Mon Sep 17 00:00:00 2001
From: McKayla Washburn <mckayla@hey.com>
Date: Thu, 6 Feb 2025 22:23:48 +0000
Subject: [PATCH 08/14] - `toString()`

---
 site/src/api/api.ts | 6 +++---
 1 file changed, 3 insertions(+), 3 deletions(-)

diff --git a/site/src/api/api.ts b/site/src/api/api.ts
index cbde6cd022924..5a314ddde151a 100644
--- a/site/src/api/api.ts
+++ b/site/src/api/api.ts
@@ -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;
 	};

From 506cca107cdde33dc90da80de45f854c19670641 Mon Sep 17 00:00:00 2001
From: McKayla Washburn <mckayla@hey.com>
Date: Thu, 6 Feb 2025 22:35:56 +0000
Subject: [PATCH 09/14] polish

---
 .../IdpOrgSyncPage/IdpOrgSyncPageView.tsx        | 16 ++++++++--------
 1 file changed, 8 insertions(+), 8 deletions(-)

diff --git a/site/src/pages/DeploymentSettingsPage/IdpOrgSyncPage/IdpOrgSyncPageView.tsx b/site/src/pages/DeploymentSettingsPage/IdpOrgSyncPage/IdpOrgSyncPageView.tsx
index fb64dbde04955..e0ce569b36592 100644
--- a/site/src/pages/DeploymentSettingsPage/IdpOrgSyncPage/IdpOrgSyncPageView.tsx
+++ b/site/src/pages/DeploymentSettingsPage/IdpOrgSyncPage/IdpOrgSyncPageView.tsx
@@ -414,12 +414,7 @@ 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>
@@ -427,7 +422,12 @@ const OrganizationRow: FC<OrganizationRowProps> = ({
 								<TooltipTrigger asChild>
 									<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.
@@ -435,7 +435,7 @@ const OrganizationRow: FC<OrganizationRowProps> = ({
 							</Tooltip>
 						</TooltipProvider>
 					)}
-				</Stack>
+				</div>
 			</TableCell>
 			<TableCell>
 				<OrganizationPills organizations={coderOrgs} />

From c91cd1adc91f9d23b974f648c7f21ddd70fd418a Mon Sep 17 00:00:00 2001
From: McKayla Washburn <mckayla@hey.com>
Date: Thu, 6 Feb 2025 22:38:07 +0000
Subject: [PATCH 10/14] =?UTF-8?q?=F0=9F=A7=BC?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../IdpOrgSyncPage/IdpOrgSyncPage.tsx              |  2 +-
 .../IdpOrgSyncPage/IdpOrgSyncPageView.tsx          | 14 +++++++-------
 2 files changed, 8 insertions(+), 8 deletions(-)

diff --git a/site/src/pages/DeploymentSettingsPage/IdpOrgSyncPage/IdpOrgSyncPage.tsx b/site/src/pages/DeploymentSettingsPage/IdpOrgSyncPage/IdpOrgSyncPage.tsx
index faf5e8dd3450e..5149e4f6d9792 100644
--- 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();
diff --git a/site/src/pages/DeploymentSettingsPage/IdpOrgSyncPage/IdpOrgSyncPageView.tsx b/site/src/pages/DeploymentSettingsPage/IdpOrgSyncPage/IdpOrgSyncPageView.tsx
index e0ce569b36592..394909656dec8 100644
--- a/site/src/pages/DeploymentSettingsPage/IdpOrgSyncPage/IdpOrgSyncPageView.tsx
+++ b/site/src/pages/DeploymentSettingsPage/IdpOrgSyncPage/IdpOrgSyncPageView.tsx
@@ -1,3 +1,4 @@
+import { TooltipProvider } from "@radix-ui/react-tooltip";
 import type {
 	Organization,
 	OrganizationSyncSettings,
@@ -28,12 +29,8 @@ import {
 	MultiSelectCombobox,
 	type Option,
 } from "components/MultiSelectCombobox/MultiSelectCombobox";
-import {
-	Tooltip,
-	TooltipContent,
-	TooltipTrigger,
-} from "components/Tooltip/Tooltip";
 import { Spinner } from "components/Spinner/Spinner";
+import { Stack } from "components/Stack/Stack";
 import { Switch } from "components/Switch/Switch";
 import {
 	Table,
@@ -42,6 +39,11 @@ import {
 	TableHeader,
 	TableRow,
 } from "components/Table/Table";
+import {
+	Tooltip,
+	TooltipContent,
+	TooltipTrigger,
+} from "components/Tooltip/Tooltip";
 import { useFormik } from "formik";
 import { Plus, Trash, TriangleAlert } from "lucide-react";
 import { type FC, type KeyboardEventHandler, useId, useState } from "react";
@@ -49,8 +51,6 @@ 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";
-import { TooltipProvider } from "@radix-ui/react-tooltip";
 
 interface IdpSyncPageViewProps {
 	organizationSyncSettings: OrganizationSyncSettings | undefined;

From 97de7f4b72fb31b96de2ad0352eabaf5515d1d40 Mon Sep 17 00:00:00 2001
From: McKayla Washburn <mckayla@hey.com>
Date: Thu, 6 Feb 2025 22:40:01 +0000
Subject: [PATCH 11/14] rename

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

diff --git a/site/src/pages/DeploymentSettingsPage/IdpOrgSyncPage/IdpOrgSyncPageView.tsx b/site/src/pages/DeploymentSettingsPage/IdpOrgSyncPage/IdpOrgSyncPageView.tsx
index 394909656dec8..f6822ba0a60ef 100644
--- a/site/src/pages/DeploymentSettingsPage/IdpOrgSyncPage/IdpOrgSyncPageView.tsx
+++ b/site/src/pages/DeploymentSettingsPage/IdpOrgSyncPage/IdpOrgSyncPageView.tsx
@@ -54,7 +54,7 @@ import { OrganizationPills } from "./OrganizationPills";
 
 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 +85,7 @@ const validationSchema = Yup.object({
 
 export const IdpOrgSyncPageView: FC<IdpSyncPageViewProps> = ({
 	organizationSyncSettings,
-	fieldValues,
+	claimFieldValues,
 	organizations,
 	onSubmit,
 	onSyncFieldChange,
@@ -137,7 +137,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 +220,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 +314,7 @@ export const IdpOrgSyncPageView: FC<IdpSyncPageViewProps> = ({
 											idpOrg={idpOrg}
 											coderOrgs={getOrgNames(organizations)}
 											onDelete={handleDelete}
-											exists={fieldValues?.includes(idpOrg)}
+											exists={claimFieldValues?.includes(idpOrg)}
 										/>
 									))}
 						</IdpMappingTable>

From 06715fab96991811ae2f4d5128cadbe21bf479bb Mon Sep 17 00:00:00 2001
From: McKayla Washburn <mckayla@hey.com>
Date: Thu, 6 Feb 2025 22:46:16 +0000
Subject: [PATCH 12/14] sad moment

---
 .../DeploymentSettingsPage/IdpOrgSyncPage/IdpOrgSyncPage.tsx    | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/site/src/pages/DeploymentSettingsPage/IdpOrgSyncPage/IdpOrgSyncPage.tsx b/site/src/pages/DeploymentSettingsPage/IdpOrgSyncPage/IdpOrgSyncPage.tsx
index 5149e4f6d9792..4d8ae28e81eee 100644
--- a/site/src/pages/DeploymentSettingsPage/IdpOrgSyncPage/IdpOrgSyncPage.tsx
+++ b/site/src/pages/DeploymentSettingsPage/IdpOrgSyncPage/IdpOrgSyncPage.tsx
@@ -90,7 +90,7 @@ export const IdpOrgSyncPage: FC = () => {
 					<Cond>
 						<IdpOrgSyncPageView
 							organizationSyncSettings={settingsQuery.data}
-							fieldValues={fieldValuesQuery.data}
+							claimFieldValues={fieldValuesQuery.data}
 							organizations={organizations}
 							onSyncFieldChange={(field) => setField(field)}
 							onSubmit={async (data) => {

From 42ceb1b50dc672325c4d3ea701577a99777dfeb0 Mon Sep 17 00:00:00 2001
From: McKayla Washburn <mckayla@hey.com>
Date: Thu, 6 Feb 2025 22:47:15 +0000
Subject: [PATCH 13/14] cntnd.

---
 .../IdpOrgSyncPage/IdpOrgSyncPageView.stories.tsx           | 6 +++---
 1 file changed, 3 insertions(+), 3 deletions(-)

diff --git a/site/src/pages/DeploymentSettingsPage/IdpOrgSyncPage/IdpOrgSyncPageView.stories.tsx b/site/src/pages/DeploymentSettingsPage/IdpOrgSyncPage/IdpOrgSyncPageView.stories.tsx
index 576c887a1a3bc..78842737e5baf 100644
--- a/site/src/pages/DeploymentSettingsPage/IdpOrgSyncPage/IdpOrgSyncPageView.stories.tsx
+++ b/site/src/pages/DeploymentSettingsPage/IdpOrgSyncPage/IdpOrgSyncPageView.stories.tsx
@@ -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: [],
 	},
 };
 

From 820cca33ef7535a3e11aba47b717ebec0406fc87 Mon Sep 17 00:00:00 2001
From: McKayla Washburn <mckayla@hey.com>
Date: Thu, 6 Feb 2025 23:32:59 +0000
Subject: [PATCH 14/14] huh

---
 .../DeploymentSettingsPage/IdpOrgSyncPage/IdpOrgSyncPage.tsx | 5 +++--
 1 file changed, 3 insertions(+), 2 deletions(-)

diff --git a/site/src/pages/DeploymentSettingsPage/IdpOrgSyncPage/IdpOrgSyncPage.tsx b/site/src/pages/DeploymentSettingsPage/IdpOrgSyncPage/IdpOrgSyncPage.tsx
index 4d8ae28e81eee..295b482f94286 100644
--- a/site/src/pages/DeploymentSettingsPage/IdpOrgSyncPage/IdpOrgSyncPage.tsx
+++ b/site/src/pages/DeploymentSettingsPage/IdpOrgSyncPage/IdpOrgSyncPage.tsx
@@ -55,7 +55,7 @@ export const IdpOrgSyncPage: FC = () => {
 		}
 	}, [patchOrganizationSyncSettingsMutation.error]);
 
-	if (settingsQuery.isLoading || fieldValuesQuery.isLoading) {
+	if (settingsQuery.isLoading) {
 		return <Loader />;
 	}
 
@@ -92,7 +92,7 @@ export const IdpOrgSyncPage: FC = () => {
 							organizationSyncSettings={settingsQuery.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>

<!DOCTYPE html PUBLIC '-//W3C//DTD XHTML 1.0 Transitional//EN' 'http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd'>
<html xmlns='http://www.w3.org/1999/xhtml'>
<head>
<title>pFad - Phonifier reborn</title>
<meta http-equiv='Content-Type' content='text/html; charset=utf-8' />
</head>
<body>
<h1>Pfad - The Proxy pFad of &#169; 2024 Garber Painting. All rights reserved.</h1>


<!-- Disclaimer -->
<p>Note: This service is not intended for secure transactions such as banking, social media, email, or purchasing. Use at your own risk. We assume no liability whatsoever for broken pages.</p>
<br>
<p>Alternative Proxies:</p><p><a href="http://rainy.clevelandohioweatherforecast.com/php-proxy/index.php?q=https://patch-diff.githubusercontent.com/raw/coder/coder/pull/16478.patch" target="_blank">Alternative Proxy</a></p><p><a href="http://rainy.clevelandohioweatherforecast.com/pFad/index.php?u=https://patch-diff.githubusercontent.com/raw/coder/coder/pull/16478.patch" target="_blank">pFad Proxy</a></p><p><a href="http://rainy.clevelandohioweatherforecast.com/pFad/v3index.php?u=https://patch-diff.githubusercontent.com/raw/coder/coder/pull/16478.patch" target="_blank">pFad v3 Proxy</a></p><p><a href="http://rainy.clevelandohioweatherforecast.com/pFad/v4index.php?u=https://patch-diff.githubusercontent.com/raw/coder/coder/pull/16478.patch" target="_blank">pFad v4 Proxy</a></p></body>
</html>