this is something

coder · aslilac · Feb 7, 2025 · Feb 5, 2025 · Feb 6, 2025 · Feb 6, 2025
commit 96006242cfca1f22a89f880edef8a468b447731f
diff --git a/site/src/pages/DeploymentSettingsPage/IdpOrgSyncPage/IdpOrgSyncPageView.tsx b/site/src/pages/DeploymentSettingsPage/IdpOrgSyncPage/IdpOrgSyncPageView.tsx
@@ -32,6 +32,7 @@ import {
 	Tooltip,
 	TooltipContent,
 	TooltipTrigger,
+	TooltipProvider,
 } from "components/Tooltip/Tooltip";
 import { Spinner } from "components/Spinner/Spinner";
 import { Switch } from "components/Switch/Switch";
@@ -50,7 +51,6 @@ 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;

diff --git a/site/src/pages/OrganizationSettingsPage/IdpSyncPage/IdpGroupSyncForm.tsx b/site/src/pages/OrganizationSettingsPage/IdpSyncPage/IdpGroupSyncForm.tsx
@@ -65,15 +65,15 @@ const groupSyncValidationSchema = Yup.object({
 		.default({}),
 });
 
-export const IdpGroupSyncForm = ({
+export const IdpGroupSyncForm: FC<IdpGroupSyncFormProps> = ({
 	groupSyncSettings,
 	groupMappingCount,
 	legacyGroupMappingCount,
 	groups,
 	groupsMap,
 	organization,
 	onSubmit,
-}: IdpGroupSyncFormProps) => {
+}) => {
 	const form = useFormik<GroupSyncSettings>({
 		initialValues: {
 			field: groupSyncSettings?.field ?? "",

diff --git a/site/src/pages/OrganizationSettingsPage/IdpSyncPage/IdpRoleSyncForm.tsx b/site/src/pages/OrganizationSettingsPage/IdpSyncPage/IdpRoleSyncForm.tsx
@@ -10,20 +10,19 @@ import {
 } from "components/MultiSelectCombobox/MultiSelectCombobox";
 import { Spinner } from "components/Spinner/Spinner";
 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 * as Yup from "yup";
 import { ExportPolicyButton } from "./ExportPolicyButton";
 import { IdpMappingTable } from "./IdpMappingTable";
 import { IdpPillList } from "./IdpPillList";
-
-interface IdpRoleSyncFormProps {
-	roleSyncSettings: RoleSyncSettings;
-	roleMappingCount: number;
-	organization: Organization;
-	roles: Role[];
-	onSubmit: (data: RoleSyncSettings) => void;
-}
+import { Stack } from "components/Stack/Stack";
+import {
+	Tooltip,
+	TooltipContent,
+	TooltipTrigger,
+	TooltipProvider,
+} from "components/Tooltip/Tooltip";
 
 const roleSyncValidationSchema = Yup.object({
 	field: Yup.string().trim(),
@@ -48,13 +47,23 @@ const roleSyncValidationSchema = Yup.object({
 		.default({}),
 });
 
-export const IdpRoleSyncForm = ({
+interface IdpRoleSyncFormProps {
+	roleSyncSettings: RoleSyncSettings;
+	fieldValues: string[] | undefined;
+	roleMappingCount: number;
+	organization: Organization;
+	roles: Role[];
+	onSubmit: (data: RoleSyncSettings) => void;
+}
+
+export const IdpRoleSyncForm: FC<IdpRoleSyncFormProps> = ({
 	roleSyncSettings,
+	fieldValues,
 	roleMappingCount,
 	organization,
 	roles,
 	onSubmit,
-}: IdpRoleSyncFormProps) => {
+}) => {
 	const form = useFormik<RoleSyncSettings>({
 		initialValues: {
 			field: roleSyncSettings?.field ?? "",
@@ -210,6 +219,7 @@ export const IdpRoleSyncForm = ({
 								<RoleRow
 									key={idpRole}
 									idpRole={idpRole}
+									exists={fieldValues?.includes(idpRole)}
 									coderRoles={roles}
 									onDelete={handleDelete}
 								/>
@@ -222,14 +232,43 @@ export const IdpRoleSyncForm = ({
 
 interface RoleRowProps {
 	idpRole: string;
+	exists: boolean | undefined;
 	coderRoles: readonly string[];
 	onDelete: (idpOrg: string) => void;
 }
 
-const RoleRow: FC<RoleRowProps> = ({ idpRole, coderRoles, onDelete }) => {
+const RoleRow: FC<RoleRowProps> = ({
+	idpRole,
+	exists = true,
+	coderRoles,
+	onDelete,
+}) => {
 	return (
 		<TableRow data-testid={`role-${idpRole}`}>
-			<TableCell>{idpRole}</TableCell>
+			<TableCell>
+				<Stack
+					direction="row"
+					alignItems="center"
+					spacing={1}
+					className="text-content-primary"
+				>
+					{idpRole}
+					{!exists && (
+						<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>
 			<TableCell>
 				<IdpPillList roles={coderRoles} />
 			</TableCell>

diff --git a/site/src/pages/OrganizationSettingsPage/IdpSyncPage/IdpSyncPage.tsx b/site/src/pages/OrganizationSettingsPage/IdpSyncPage/IdpSyncPage.tsx
@@ -2,6 +2,7 @@ import { getErrorMessage } from "api/errors";
 import { groupsByOrganization } from "api/queries/groups";
 import {
 	groupIdpSyncSettings,
+	organizationIdpSyncClaimFieldValues,
 	patchGroupSyncSettings,
 	patchRoleSyncSettings,
 	roleIdpSyncSettings,
@@ -17,8 +18,8 @@ import { useFeatureVisibility } from "modules/dashboard/useFeatureVisibility";
 import { useOrganizationSettings } from "modules/management/OrganizationSettingsLayout";
 import type { FC } from "react";
 import { Helmet } from "react-helmet-async";
-import { useMutation, useQueries, useQueryClient } from "react-query";
-import { useParams } from "react-router-dom";
+import { useMutation, useQueries, useQuery, useQueryClient } from "react-query";
+import { useParams, useSearchParams } from "react-router-dom";
 import { docs } from "utils/docs";
 import { pageTitle } from "utils/page";
 import IdpSyncPageView from "./IdpSyncPageView";
@@ -47,6 +48,19 @@ export const IdpSyncPage: FC = () => {
 		],
 	});
 
+	const [searchParams] = useSearchParams();
+	const tab = searchParams.get("tab") || "groups";
+	const field =
+		tab === "groups"
+			? groupIdpSyncSettingsQuery.data?.field
+			: roleIdpSyncSettingsQuery.data?.field;
+
+	const fieldValuesQuery = useQuery(
+		field
+			? organizationIdpSyncClaimFieldValues(organizationName, field)
+			: { enabled: false },
+	);
+
 	if (!organization) {
 		return <EmptyState message="Organization not found" />;
 	}
@@ -99,8 +113,10 @@ export const IdpSyncPage: FC = () => {
 					</Cond>
 					<Cond>
 						<IdpSyncPageView
+							tab={tab}
 							groupSyncSettings={groupIdpSyncSettingsQuery.data}
 							roleSyncSettings={roleIdpSyncSettingsQuery.data}
+							fieldValues={fieldValuesQuery.data}
 							groups={groupsQuery.data}
 							groupsMap={groupsMap}
 							roles={rolesQuery.data}

diff --git a/site/src/pages/OrganizationSettingsPage/IdpSyncPage/IdpSyncPageView.tsx b/site/src/pages/OrganizationSettingsPage/IdpSyncPage/IdpSyncPageView.tsx
@@ -9,13 +9,14 @@ import { ErrorAlert } from "components/Alert/ErrorAlert";
 import { Loader } from "components/Loader/Loader";
 import { TabLink, Tabs, TabsList } from "components/Tabs/Tabs";
 import type { FC } from "react";
-import { useSearchParams } from "react-router-dom";
 import { IdpGroupSyncForm } from "./IdpGroupSyncForm";
 import { IdpRoleSyncForm } from "./IdpRoleSyncForm";
 
 interface IdpSyncPageViewProps {
+	tab: string;
 	groupSyncSettings: GroupSyncSettings | undefined;
 	roleSyncSettings: RoleSyncSettings | undefined;
+	fieldValues: string[] | undefined;
 	groups: Group[] | undefined;
 	groupsMap: Map<string, string>;
 	roles: Role[] | undefined;
@@ -26,8 +27,10 @@ interface IdpSyncPageViewProps {
 }
 
 export const IdpSyncPageView: FC<IdpSyncPageViewProps> = ({
+	tab
 	groupSyncSettings,
 	roleSyncSettings,
+	fieldValues,
 	groups,
 	groupsMap,
 	roles,
@@ -36,8 +39,6 @@ export const IdpSyncPageView: FC<IdpSyncPageViewProps> = ({
 	onSubmitGroupSyncSettings,
 	onSubmitRoleSyncSettings,
 }) => {
-	const [searchParams] = useSearchParams();
-	const tab = searchParams.get("tab") || "groups";
 	const groupMappingCount = groupSyncSettings?.mapping
 		? Object.entries(groupSyncSettings.mapping).length
 		: 0;
@@ -78,6 +79,7 @@ export const IdpSyncPageView: FC<IdpSyncPageViewProps> = ({
 			) : (
 				<IdpRoleSyncForm
 					roleSyncSettings={roleSyncSettings}
+					fieldValues={fieldValues}
 					roleMappingCount={roleMappingCount}
 					roles={roles || []}
 					organization={organization}