fix: show paywall and correctly display auto create groups

jaaydenh · jaaydenh · commit 66152e4430c4 · 2024-09-25T15:38:51.000Z
diff --git a/site/src/pages/ManagementSettingsPage/IdpSyncPage/IdpSyncPage.tsx b/site/src/pages/ManagementSettingsPage/IdpSyncPage/IdpSyncPage.tsx
@@ -1,17 +1,19 @@
 import LaunchOutlined from "@mui/icons-material/LaunchOutlined";
 import Button from "@mui/material/Button";
+import { getErrorMessage } from "api/errors";
 import { groupsByOrganization } from "api/queries/groups";
 import {
 	groupIdpSyncSettings,
 	roleIdpSyncSettings,
 } from "api/queries/organizations";
-import { ErrorAlert } from "components/Alert/ErrorAlert";
 import { EmptyState } from "components/EmptyState/EmptyState";
 import { FeatureStageBadge } from "components/FeatureStageBadge/FeatureStageBadge";
+import { displayError } from "components/GlobalSnackbar/utils";
 import { Loader } from "components/Loader/Loader";
 import { SettingsHeader } from "components/SettingsHeader/SettingsHeader";
 import { Stack } from "components/Stack/Stack";
-import type { FC } from "react";
+import { useFeatureVisibility } from "modules/dashboard/useFeatureVisibility";
+import { type FC, useEffect } from "react";
 import { Helmet } from "react-helmet-async";
 import { useQueries } from "react-query";
 import { useParams } from "react-router-dom";
@@ -25,6 +27,8 @@ export const IdpSyncPage: FC = () => {
 	const { organization: organizationName } = useParams() as {
 		organization: string;
 	};
+	// IdP sync does not have its own entitlement and is based on templace_rbac
+	const { template_rbac: isIdpSyncEnabled } = useFeatureVisibility();
 	const { organizations } = useOrganizationSettings();
 	const organization = organizations?.find((o) => o.name === organizationName);
 
@@ -37,6 +41,36 @@ export const IdpSyncPage: FC = () => {
 			],
 		});
 
+	useEffect(() => {
+		if (groupIdpSyncSettingsQuery.error) {
+			displayError(
+				getErrorMessage(
+					groupIdpSyncSettingsQuery.error,
+					"Unable to load group IdP sync settings.",
+				),
+			);
+		}
+	}, [groupIdpSyncSettingsQuery.error]);
+
+	useEffect(() => {
+		if (roleIdpSyncSettingsQuery.error) {
+			displayError(
+				getErrorMessage(
+					roleIdpSyncSettingsQuery.error,
+					"Unable to load role IdP sync settings.",
+				),
+			);
+		}
+	}, [roleIdpSyncSettingsQuery.error]);
+
+	useEffect(() => {
+		if (groupsQuery.error) {
+			displayError(
+				getErrorMessage(groupsQuery.error, "Unable to load groups."),
+			);
+		}
+	}, [groupsQuery.error]);
+
 	if (!organization) {
 		return <EmptyState message="Organization not found" />;
 	}
@@ -49,19 +83,6 @@ export const IdpSyncPage: FC = () => {
 		return <Loader />;
 	}
 
-	const error =
-		groupIdpSyncSettingsQuery.error ||
-		roleIdpSyncSettingsQuery.error ||
-		groupsQuery.error;
-	if (
-		error ||
-		!groupIdpSyncSettingsQuery.data ||
-		!roleIdpSyncSettingsQuery.data ||
-		!groupsQuery.data
-	) {
-		return <ErrorAlert error={error} />;
-	}
-
 	const groupsMap = new Map<string, string>();
 	if (groupsQuery.data) {
 		for (const group of groupsQuery.data) {
@@ -104,6 +125,7 @@ export const IdpSyncPage: FC = () => {
 				groups={groupsQuery.data}
 				groupsMap={groupsMap}
 				organization={organization}
+				isIdpSyncEnabled={isIdpSyncEnabled}
 			/>
 		</>
 	);
diff --git a/site/src/pages/ManagementSettingsPage/IdpSyncPage/IdpSyncPageView.tsx b/site/src/pages/ManagementSettingsPage/IdpSyncPage/IdpSyncPageView.tsx
@@ -37,13 +37,15 @@ interface IdpSyncPageViewProps {
 	groups: Group[] | undefined;
 	groupsMap: Map<string, string>;
 	organization: Organization;
+	isIdpSyncEnabled: boolean;
 }
 
 export const IdpSyncPageView: FC<IdpSyncPageViewProps> = ({
 	groupSyncSettings,
 	roleSyncSettings,
 	groupsMap,
 	organization,
+	isIdpSyncEnabled,
 }) => {
 	const [searchParams] = useSearchParams();
 
@@ -63,7 +65,7 @@ export const IdpSyncPageView: FC<IdpSyncPageViewProps> = ({
 	return (
 		<>
 			<ChooseOne>
-				<Cond condition={false}>
+				<Cond condition={!isIdpSyncEnabled}>
 					<Paywall
 						message="IdP Sync"
 						description="Configure group and role mappings to manage permissions outside of Coder. You need an Premium license to use this feature."
@@ -101,9 +103,13 @@ export const IdpSyncPageView: FC<IdpSyncPageViewProps> = ({
 										/>
 										<IdpField
 											name={"Auto Create"}
-											fieldText={String(
-												groupSyncSettings?.auto_create_missing_groups || "n/a",
-											)}
+											fieldText={
+												groupSyncSettings?.field
+													? String(
+															groupSyncSettings?.auto_create_missing_groups,
+														)
+													: "n/a"
+											}
 										/>
 									</Stack>
 								</div>
