feat: add form and mutation queries

jaaydenh · jaaydenh · commit ea0099560659 · 2025-01-10T17:03:40.000Z
diff --git a/site/src/api/api.ts b/site/src/api/api.ts
@@ -733,6 +733,36 @@ class ApiMethods {
 		return response.data;
 	};
 
+	/**
+	 * @param data
+	 * @param organization Can be the organization's ID or name
+	 */
+	patchGroupIdpSyncSettings = async (
+		data: TypesGen.GroupSyncSettings,
+		organization: string,
+	) => {
+		const response = await this.axios.patch<TypesGen.Response>(
+			`/api/v2/organizations/${organization}/settings/idpsync/groups"`,
+			data,
+		);
+		return response.data;
+	};
+
+	/**
+	 * @param data
+	 * @param organization Can be the organization's ID or name
+	 */
+	patchRoleIdpSyncSettings = async (
+		data: TypesGen.RoleSyncSettings,
+		organization: string,
+	) => {
+		const response = await this.axios.patch<TypesGen.Response>(
+			`/api/v2/organizations/${organization}/settings/idpsync/roles"`,
+			data,
+		);
+		return response.data;
+	};
+
 	/**
 	 * @param organization Can be the organization's ID or name
 	 */
diff --git a/site/src/api/queries/organizations.ts b/site/src/api/queries/organizations.ts
@@ -2,6 +2,8 @@ import { API } from "api/api";
 import type {
 	AuthorizationResponse,
 	CreateOrganizationRequest,
+	GroupSyncSettings,
+	RoleSyncSettings,
 	UpdateOrganizationRequest,
 } from "api/typesGenerated";
 import type { QueryClient } from "react-query";
@@ -156,6 +158,18 @@ export const groupIdpSyncSettings = (organization: string) => {
 	};
 };
 
+export const patchGroupSyncSettings = (
+	organization: string,
+	queryClient: QueryClient,
+) => {
+	return {
+		mutationFn: (request: GroupSyncSettings) =>
+			API.patchGroupIdpSyncSettings(request, organization),
+		onSuccess: async () =>
+			await queryClient.invalidateQueries(groupIdpSyncSettings(organization)),
+	};
+};
+
 export const getRoleIdpSyncSettingsKey = (organization: string) => [
 	"organizations",
 	organization,
@@ -169,6 +183,20 @@ export const roleIdpSyncSettings = (organization: string) => {
 	};
 };
 
+export const patchRoleSyncSettings = (
+	organization: string,
+	queryClient: QueryClient,
+) => {
+	return {
+		mutationFn: (request: RoleSyncSettings) =>
+			API.patchRoleIdpSyncSettings(request, organization),
+		onSuccess: async () =>
+			await queryClient.invalidateQueries(
+				getRoleIdpSyncSettingsKey(organization),
+			),
+	};
+};
+
 /**
  * Fetch permissions for a single organization.
  *
diff --git a/site/src/pages/ManagementSettingsPage/IdpSyncPage/IdpSyncPage.tsx b/site/src/pages/ManagementSettingsPage/IdpSyncPage/IdpSyncPage.tsx
@@ -1,24 +1,30 @@
+import { getErrorMessage } from "api/errors";
 import { groupsByOrganization } from "api/queries/groups";
 import {
 	groupIdpSyncSettings,
+	patchGroupSyncSettings,
+	patchRoleSyncSettings,
 	roleIdpSyncSettings,
 } from "api/queries/organizations";
 import { organizationRoles } from "api/queries/roles";
 import { ChooseOne, Cond } from "components/Conditionals/ChooseOne";
 import { EmptyState } from "components/EmptyState/EmptyState";
+import { displayError } from "components/GlobalSnackbar/utils";
+import { displaySuccess } from "components/GlobalSnackbar/utils";
 import { Paywall } from "components/Paywall/Paywall";
 import { SquareArrowOutUpRight } from "lucide-react";
 import { useFeatureVisibility } from "modules/dashboard/useFeatureVisibility";
 import { useOrganizationSettings } from "modules/management/OrganizationSettingsLayout";
-import type { FC } from "react";
+import { type FC, useEffect } from "react";
 import { Helmet } from "react-helmet-async";
-import { useQueries } from "react-query";
+import { useMutation, useQueries, useQueryClient } from "react-query";
 import { useParams } from "react-router-dom";
 import { docs } from "utils/docs";
 import { pageTitle } from "utils/page";
 import IdpSyncPageView from "./IdpSyncPageView";
 
 export const IdpSyncPage: FC = () => {
+	const queryClient = useQueryClient();
 	const { organization: organizationName } = useParams() as {
 		organization: string;
 	};
@@ -45,10 +51,41 @@ export const IdpSyncPage: FC = () => {
 		return <EmptyState message="Organization not found" />;
 	}
 
+	const patchGroupSyncSettingsMutation = useMutation(
+		patchGroupSyncSettings(organizationName, queryClient),
+	);
+	const patchRoleSyncSettingsMutation = useMutation(
+		patchRoleSyncSettings(organizationName, queryClient),
+	);
+
+	useEffect(() => {
+		if (patchGroupSyncSettingsMutation.error) {
+			displayError(
+				getErrorMessage(
+					patchGroupSyncSettingsMutation.error,
+					"Error updating IdP group sync settings.",
+				),
+			);
+		}
+	}, [patchGroupSyncSettingsMutation.error]);
+
+	useEffect(() => {
+		if (patchRoleSyncSettingsMutation.error) {
+			displayError(
+				getErrorMessage(
+					patchRoleSyncSettingsMutation.error,
+					"Error updating IdP role sync settings.",
+				),
+			);
+		}
+	}, [patchRoleSyncSettingsMutation.error]);
+
 	const error =
 		groupIdpSyncSettingsQuery.error ||
 		roleIdpSyncSettingsQuery.error ||
-		groupsQuery.error;
+		groupsQuery.error ||
+		patchGroupSyncSettingsMutation.error ||
+		patchRoleSyncSettingsMutation.error;
 
 	const groupsMap = new Map<string, string>();
 	if (groupsQuery.data) {
@@ -98,6 +135,32 @@ export const IdpSyncPage: FC = () => {
 							roles={rolesQuery.data}
 							organization={organization}
 							error={error}
+							onSubmitGroupSyncSettings={async (data) => {
+								try {
+									await patchGroupSyncSettingsMutation.mutateAsync(data);
+									displaySuccess("IdP Group sync settings updated.");
+								} catch (error) {
+									displayError(
+										getErrorMessage(
+											error,
+											"Failed to update IdP group sync settings",
+										),
+									);
+								}
+							}}
+							onSubmitRoleSyncSettings={async (data) => {
+								try {
+									await patchRoleSyncSettingsMutation.mutateAsync(data);
+									displaySuccess("IdP Role sync settings updated.");
+								} catch (error) {
+									displayError(
+										getErrorMessage(
+											error,
+											"Failed to update IdP role sync settings",
+										),
+									);
+								}
+							}}
 						/>
 					</Cond>
 				</ChooseOne>
diff --git a/site/src/pages/ManagementSettingsPage/IdpSyncPage/IdpSyncPageView.tsx b/site/src/pages/ManagementSettingsPage/IdpSyncPage/IdpSyncPageView.tsx
