fix: show paywall and correctly display auto create groups for IDP sync (#14800)

jaaydenh · web-flow · commit 9ea2f6f2671c · 2024-09-26T12:12:04.000-04:00
* fix: show paywall and correctly display auto create groups

* fix: update stories

* fix: format

* chore: cleanup

* fix: update stories
diff --git a/site/src/pages/ManagementSettingsPage/IdpSyncPage/IdpSyncPage.tsx b/site/src/pages/ManagementSettingsPage/IdpSyncPage/IdpSyncPage.tsx
@@ -5,11 +5,12 @@ import {
 	groupIdpSyncSettings,
 	roleIdpSyncSettings,
 } from "api/queries/organizations";
-import { ErrorAlert } from "components/Alert/ErrorAlert";
+import { ChooseOne, Cond } from "components/Conditionals/ChooseOne";
 import { EmptyState } from "components/EmptyState/EmptyState";
-import { Loader } from "components/Loader/Loader";
+import { Paywall } from "components/Paywall/Paywall";
 import { SettingsHeader } from "components/SettingsHeader/SettingsHeader";
 import { Stack } from "components/Stack/Stack";
+import { useFeatureVisibility } from "modules/dashboard/useFeatureVisibility";
 import type { FC } from "react";
 import { Helmet } from "react-helmet-async";
 import { useQueries } from "react-query";
@@ -24,6 +25,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);
 
@@ -40,26 +43,10 @@ export const IdpSyncPage: FC = () => {
 		return <EmptyState message="Organization not found" />;
 	}
 
-	if (
-		groupsQuery.isLoading ||
-		groupIdpSyncSettingsQuery.isLoading ||
-		roleIdpSyncSettingsQuery.isLoading
-	) {
-		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) {
@@ -84,25 +71,34 @@ export const IdpSyncPage: FC = () => {
 					description="Group and role sync mappings (configured using Coder CLI)."
 					tooltip={<IdpSyncHelpTooltip />}
 				/>
-				<Stack direction="row" spacing={2}>
-					<Button
-						startIcon={<LaunchOutlined />}
-						component="a"
-						href={docs("/admin/auth#group-sync-enterprise")}
-						target="_blank"
-					>
-						Setup IdP Sync
-					</Button>
-				</Stack>
+				<Button
+					startIcon={<LaunchOutlined />}
+					component="a"
+					href={docs("/admin/auth#group-sync-enterprise")}
+					target="_blank"
+				>
+					Setup IdP Sync
+				</Button>
 			</Stack>
-
-			<IdpSyncPageView
-				groupSyncSettings={groupIdpSyncSettingsQuery.data}
-				roleSyncSettings={roleIdpSyncSettingsQuery.data}
-				groups={groupsQuery.data}
-				groupsMap={groupsMap}
-				organization={organization}
-			/>
+			<ChooseOne>
+				<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."
+						documentationLink={docs("/admin/groups")}
+					/>
+				</Cond>
+				<Cond>
+					<IdpSyncPageView
+						groupSyncSettings={groupIdpSyncSettingsQuery.data}
+						roleSyncSettings={roleIdpSyncSettingsQuery.data}
+						groups={groupsQuery.data}
+						groupsMap={groupsMap}
+						organization={organization}
+						error={error}
+					/>
+				</Cond>
+			</ChooseOne>
 		</>
 	);
 };
diff --git a/site/src/pages/ManagementSettingsPage/IdpSyncPage/IdpSyncPageView.stories.tsx b/site/src/pages/ManagementSettingsPage/IdpSyncPage/IdpSyncPageView.stories.tsx
@@ -4,6 +4,7 @@ import {
 	MockGroup2,
 	MockGroupSyncSettings,
 	MockGroupSyncSettings2,
+	MockOrganization,
 	MockRoleSyncSettings,
 } from "testHelpers/entities";
 import { IdpSyncPageView } from "./IdpSyncPageView";
@@ -24,24 +25,52 @@ for (const group of [MockGroup, MockGroup2]) {
 
 export const Empty: Story = {
 	args: {
-		groupSyncSettings: undefined,
-		roleSyncSettings: undefined,
+		groupSyncSettings: {
+			field: "",
+			mapping: {},
+			regex_filter: "",
+			auto_create_missing_groups: false,
+		},
+		roleSyncSettings: {
+			field: "",
+			mapping: {},
+		},
+		groups: [],
 		groupsMap: undefined,
+		organization: MockOrganization,
+		error: undefined,
+	},
+};
+
+export const HasError: Story = {
+	args: {
+		groupSyncSettings: MockGroupSyncSettings,
+		roleSyncSettings: MockRoleSyncSettings,
+		groups: [MockGroup, MockGroup2],
+		groupsMap,
+		organization: MockOrganization,
+		error: "This is a test error",
 	},
 };
 
 export const Default: Story = {
 	args: {
 		groupSyncSettings: MockGroupSyncSettings,
 		roleSyncSettings: MockRoleSyncSettings,
+		groups: [MockGroup, MockGroup2],
 		groupsMap,
+		organization: MockOrganization,
+		error: undefined,
 	},
 };
 
 export const MissingGroups: Story = {
 	args: {
 		groupSyncSettings: MockGroupSyncSettings2,
 		roleSyncSettings: MockRoleSyncSettings,
+		groups: [MockGroup, MockGroup2],
 		groupsMap,
+		organization: MockOrganization,
+		error: undefined,
 	},
 };
diff --git a/site/src/pages/ManagementSettingsPage/IdpSyncPage/IdpSyncPageView.tsx b/site/src/pages/ManagementSettingsPage/IdpSyncPage/IdpSyncPageView.tsx
