feat: idp sync initial commit

jaaydenh · jaaydenh · commit a40ba7d3de28 · 2024-09-20T22:29:07.000Z
diff --git a/site/src/api/api.ts b/site/src/api/api.ts
@@ -704,6 +704,27 @@ class ApiMethods {
 		return response.data;
 	};
 
+	getGroupIdpSyncSettingsByOrganization = async (
+		organization: string,
+	): Promise<TypesGen.GroupSyncSettings> => {
+		const response = await this.axios.get<TypesGen.GroupSyncSettings>(
+			`/api/v2/organizations/${organization}/settings/idpsync/groups`,
+		);
+		return response.data;
+	};
+
+	/**
+	 * @param organization Can be the organization's ID or name
+	 */
+	getRoleIdpSyncSettingsByOrganization = async (
+		organization: string,
+	): Promise<TypesGen.RoleSyncSettings> => {
+		const response = await this.axios.get<TypesGen.RoleSyncSettings>(
+			`/api/v2/organizations/${organization}/settings/idpsync/roles`,
+		);
+		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/organizations.ts b/site/src/api/queries/organizations.ts
@@ -141,6 +141,32 @@ export const provisionerDaemonGroups = (organization: string) => {
 	};
 };
 
+export const getGroupIdpSyncSettingsKey = (organization: string) => [
+	"organization",
+	organization,
+	"groupIdpSyncSettings",
+];
+
+export const groupIdpSyncSettings = (organization: string) => {
+	return {
+		queryKey: getGroupIdpSyncSettingsKey(organization),
+		queryFn: () => API.getGroupIdpSyncSettingsByOrganization(organization),
+	};
+};
+
+export const getRoleIdpSyncSettingsKey = (organization: string) => [
+	"organization",
+	organization,
+	"roleIdpSyncSettings",
+];
+
+export const roleIdpSyncSettings = (organization: string) => {
+	return {
+		queryKey: getRoleIdpSyncSettingsKey(organization),
+		queryFn: () => API.getRoleIdpSyncSettingsByOrganization(organization),
+	};
+};
+
 /**
  * Fetch permissions for a single organization.
  *
diff --git a/site/src/pages/DeploySettingsPage/AppearanceSettingsPage/AppearanceSettingsPageView.tsx b/site/src/pages/DeploySettingsPage/AppearanceSettingsPage/AppearanceSettingsPageView.tsx
@@ -74,7 +74,7 @@ export const AppearanceSettingsPageView: FC<
 					<PopoverContent css={{ transform: "translateY(-28px)" }}>
 						<PopoverPaywall
 							message="Appearance"
-							description="With a Premium license, you can customize the appearance of your deployment."
+							description="With a Premium license, you can customize the appearance and branding of your deployment."
 							documentationLink="https://coder.com/docs/admin/appearance"
 						/>
 					</PopoverContent>
diff --git a/site/src/pages/ManagementSettingsPage/IdpSyncPage/IdpSyncPage.tsx b/site/src/pages/ManagementSettingsPage/IdpSyncPage/IdpSyncPage.tsx
@@ -6,11 +6,20 @@ import { SettingsHeader } from "components/SettingsHeader/SettingsHeader";
 import { Stack } from "components/Stack/Stack";
 import type { FC } from "react";
 import { Helmet } from "react-helmet-async";
-import { Link as RouterLink } from "react-router-dom";
+import { Link as RouterLink, useParams } from "react-router-dom";
 import { docs } from "utils/docs";
 import { pageTitle } from "utils/page";
 import { IdpSyncHelpTooltip } from "./IdpSyncHelpTooltip";
 import IdpSyncPageView from "./IdpSyncPageView";
+import {
+	organizationsPermissions,
+	groupIdpSyncSettings,
+	roleIdpSyncSettings,
+} from "api/queries/organizations";
+import { useQuery } from "react-query";
+import { useOrganizationSettings } from "../ManagementSettingsLayout";
+import { Loader } from "components/Loader/Loader";
+import { EmptyState } from "components/EmptyState/EmptyState";
 
 const mockOIDCConfig = {
 	allow_signups: true,
@@ -45,19 +54,39 @@ const mockOIDCConfig = {
 };
 
 export const IdpSyncPage: FC = () => {
+	const { organization: organizationName } = useParams() as {
+		organization: string;
+	};
+
 	// feature visibility and permissions to be implemented when integrating with backend
 	// const feats = useFeatureVisibility();
 	// const { organization: organizationName } = useParams() as {
 	// 	organization: string;
 	// };
-	// const { organizations } = useOrganizationSettings();
-	// const organization = organizations?.find((o) => o.name === organizationName);
-	// const permissionsQuery = useQuery(organizationPermissions(organization?.id));
+	const { organizations } = useOrganizationSettings();
+	const organization = organizations?.find((o) => o.name === organizationName);
+	const permissionsQuery = useQuery(
+		organizationsPermissions(organizations?.map((o) => o.id)),
+	);
+	const groupIdpSyncSettingsQuery = useQuery(
+		groupIdpSyncSettings(organizationName),
+	);
+	const roleIdpSyncSettingsQuery = useQuery(
+		roleIdpSyncSettings(organizationName),
+	);
 	// const permissions = permissionsQuery.data;
 
-	// if (!permissions) {
-	// 	return <Loader />;
-	// }
+	if (!organization) {
+		return <EmptyState message="Organization not found" />;
+	}
+
+	if (
+		permissionsQuery.isLoading ||
+		groupIdpSyncSettingsQuery.isLoading ||
+		roleIdpSyncSettingsQuery.isLoading
+	) {
+		return <Loader />;
+	}
 
 	return (
 		<>
@@ -91,7 +120,11 @@ export const IdpSyncPage: FC = () => {
 				</Stack>
 			</Stack>
 
-			<IdpSyncPageView oidcConfig={mockOIDCConfig} />
+			<IdpSyncPageView
+				oidcConfig={mockOIDCConfig}
+				groupSyncSettings={groupIdpSyncSettingsQuery.data}
+				roleSyncSettings={roleIdpSyncSettingsQuery.data}
+			/>
 		</>
 	);
 };
diff --git a/site/src/pages/ManagementSettingsPage/IdpSyncPage/IdpSyncPageView.tsx b/site/src/pages/ManagementSettingsPage/IdpSyncPage/IdpSyncPageView.tsx
@@ -9,7 +9,11 @@ import TableCell from "@mui/material/TableCell";
 import TableContainer from "@mui/material/TableContainer";
 import TableHead from "@mui/material/TableHead";
 import TableRow from "@mui/material/TableRow";
-import type { OIDCConfig } from "api/typesGenerated";
+import type {
+	OIDCConfig,
+	GroupSyncSettings,
+	RoleSyncSettings,
+} from "api/typesGenerated";
 import { ChooseOne, Cond } from "components/Conditionals/ChooseOne";
 import { EmptyState } from "components/EmptyState/EmptyState";
 import { Paywall } from "components/Paywall/Paywall";
@@ -25,16 +29,17 @@ import { docs } from "utils/docs";
 
 export type IdpSyncPageViewProps = {
 	oidcConfig: OIDCConfig | undefined;
+	groupSyncSettings: GroupSyncSettings | undefined;
+	roleSyncSettings: RoleSyncSettings | undefined;
 };
 
-export const IdpSyncPageView: FC<IdpSyncPageViewProps> = ({ oidcConfig }) => {
+export const IdpSyncPageView: FC<IdpSyncPageViewProps> = ({
+	oidcConfig,
+	groupSyncSettings,
+	roleSyncSettings,
+}) => {
 	const theme = useTheme();
-	const {
-		groups_field,
-		user_role_field,
-		group_regex_filter,
-		group_auto_create,
-	} = oidcConfig || {};
+	const { user_role_field } = oidcConfig || {};
 	return (
 		<>
 			<ChooseOne>
@@ -54,16 +59,22 @@ export const IdpSyncPageView: FC<IdpSyncPageViewProps> = ({ oidcConfig }) => {
 							<Stack direction={"row"} alignItems={"center"} spacing={8}>
 								<IdpField
 									name={"Sync Field"}
-									fieldText={groups_field}
+									fieldText={groupSyncSettings?.field}
 									showStatusIndicator
 								/>
 								<IdpField
 									name={"Regex Filter"}
-									fieldText={group_regex_filter}
+									fieldText={
+										typeof groupSyncSettings?.regex_filter === "string"
+											? groupSyncSettings?.regex_filter
+											: ""
+									}
 								/>
 								<IdpField
 									name={"Auto Create"}
-									fieldText={group_auto_create?.toString()}
+									fieldText={String(
+										groupSyncSettings?.auto_create_missing_groups,
+									)}
 								/>
 							</Stack>
 						</fieldset>
