feat: show warning on unrecognized idp org mapping claims

coder · aslilac · Feb 7, 2025 · Feb 5, 2025 · Feb 6, 2025 · Feb 6, 2025
commit c52982e3bf2d7fc48a41160ac5fd811a61c068d2
@@ -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
@@ -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
@@ -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>

@@ -5,55 +5,49 @@ 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;
 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: [],
 	},
 };
 

@@ -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<Org
BB4D
anizationRowProps> = ({
 			<TableCell>
 				<Stack direction="row" alignItems="center" spacing={1}>
 					{idpOrg}{" "}
-					{!doesIdpOrgEvenExistLol && (
+					{!exists && (
 						<TriangleAlert className="size-icon-sm cursor-pointer text-content-warning" />
 					)}
 				</Stack>

@@ -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",