fix: Send consistent payloads when creating and updating roles

dawsontoth · dawsontoth · commit c0811d5c8020 · 2025-12-19T14:32:09.000-05:00
https://harperdb.atlassian.net/browse/FAB-402
diff --git a/src/features/organization/mutations/OrganizationRoleFormSchema.ts b/src/features/organization/mutations/OrganizationRoleFormSchema.ts
@@ -0,0 +1,50 @@
+import { z } from 'zod';
+
+export const OrganizationRoleOverviewSchema = z.object({
+	name: z
+		.string()
+		.nonempty({
+			error: 'Please enter a role name.',
+		})
+		.regex(/^[a-zA-Z_]*$/, {
+			error: 'Role must contain only letters and underscores.',
+		})
+		.max(30, { error: 'Role name cannot be longer than 30 characters.' }),
+	update: z.boolean(),
+	delete: z.boolean(),
+});
+
+export const OrganizationRoleSpecificPermissionsSchema = z.object({
+	roles: z.object({
+		create: z.boolean(),
+		delete: z.boolean(),
+		update: z.boolean(),
+		view: z.boolean(),
+	}),
+	clusters: z.object({
+		create: z.boolean(),
+		delete: z.boolean(),
+		update: z.boolean(),
+		view: z.boolean(),
+		resources: z.array(z.object({
+			id: z.string(),
+			delete: z.boolean(),
+			update: z.boolean(),
+			view: z.boolean(),
+			instances: z.object({
+				create: z.boolean(),
+				delete: z.boolean(),
+				update: z.boolean(),
+				view: z.boolean(),
+			}),
+		})),
+	}),
+});
+
+export type OrganizationRoleUpdatePayloadType =
+	& z.infer<typeof OrganizationRoleOverviewSchema>
+	& z.infer<typeof OrganizationRoleSpecificPermissionsSchema>
+	& { organizationId: string };
+
+export type OrganizationRoleOverviewType = z.infer<typeof OrganizationRoleOverviewSchema>;
+export type OrganizationRoleSpecificPermissionsType = z.infer<typeof OrganizationRoleSpecificPermissionsSchema>;
diff --git a/src/features/organization/mutations/addOrganizationRole.ts b/src/features/organization/mutations/addOrganizationRole.ts
@@ -1,29 +1,14 @@
 import { apiClient } from '@/config/apiClient';
-import { SchemaRole } from '@/integrations/api/api.gen';
 import { useMutation } from '@tanstack/react-query';
-import z from 'zod';
+import { OrganizationRoleUpdatePayloadType } from './OrganizationRoleFormSchema';
 
-export const AddOrganizationRoleSchema = z.object({
-	roleName: z
-		.string()
-		.nonempty({
-			error: 'Please enter a role name.',
-		})
-		.regex(/^[a-zA-Z_]*$/, {
-			error: 'Role must contain only letters and underscores.',
-		})
-		.max(30, { error: 'Role name cannot be longer than 30 characters.' }),
-	updateOrganization: z.boolean(),
-	deleteOrganization: z.boolean(),
-});
-
-export async function onAddOrganizationRoleSubmit(formData: SchemaRole) {
+export async function onAddOrganizationRoleSubmit(formData: OrganizationRoleUpdatePayloadType) {
 	const { data } = await apiClient.post('/Role/', formData);
 	return data;
 }
 
 export function useAddOrganizationRole() {
 	return useMutation({
-		mutationFn: (formData: SchemaRole) => onAddOrganizationRoleSubmit(formData),
+		mutationFn: onAddOrganizationRoleSubmit,
 	});
 }
diff --git a/src/features/organization/mutations/updateOrganizationRole.ts b/src/features/organization/mutations/updateOrganizationRole.ts
@@ -1,36 +1,28 @@
 import { apiClient } from '@/config/apiClient';
 import { SchemaRole } from '@/integrations/api/api.gen';
 import { useMutation } from '@tanstack/react-query';
-import z from 'zod';
+import { OrganizationRoleUpdatePayloadType } from './OrganizationRoleFormSchema';
 
-export const UpdateOrganizationRoleSchema = z.object({
-	roleName: z
-		.string()
-		.nonempty({
-			error: 'Please enter a role name.',
-		})
-		.regex(/^[a-zA-Z_]*$/, {
-			error: 'Role must contain only letters and underscores.',
-		})
-		.max(30, { error: 'Role name cannot be longer than 30 characters.' }),
-	updateOrganization: z.boolean(),
-	deleteOrganization: z.boolean(),
-});
+interface UpdateOrganizationRoleParams {
+	roleId: string;
+	updatedRoleInfo: OrganizationRoleUpdatePayloadType;
+}
 
 export async function onUpdateOrganizationRole({
 	roleId,
 	updatedRoleInfo,
-}: {
-	roleId: string;
-	updatedRoleInfo: SchemaRole;
-}) {
+}: UpdateOrganizationRoleParams) {
 	const { data } = await apiClient.put(`/Role/${roleId}` as '/Role/{id}', updatedRoleInfo);
 	return data as SchemaRole;
 }
 
 export function useUpdateOrganizationRole() {
-	return useMutation<SchemaRole, Error, { roleId: string; updatedRoleInfo: SchemaRole }>({
-		mutationFn: ({ roleId, updatedRoleInfo }: { roleId: string; updatedRoleInfo: SchemaRole }) =>
+	return useMutation<
+		SchemaRole,
+		Error,
+		UpdateOrganizationRoleParams
+	>({
+		mutationFn: ({ roleId, updatedRoleInfo }: UpdateOrganizationRoleParams) =>
 			onUpdateOrganizationRole({ roleId, updatedRoleInfo }),
 	});
 }
diff --git a/src/features/organization/roles/index.tsx b/src/features/organization/roles/index.tsx
@@ -3,20 +3,22 @@ import { SimpleBrowseDataTable } from '@/components/SimpleBrowseDataTable';
 import { SubNavMenu } from '@/components/SubNavMenu';
 import { Button } from '@/components/ui/button';
 import { getOrganizationRolesQueryOptions } from '@/features/organization/queries/getOrganizationRoles';
-import { dataTableColumns } from '@/features/organization/roles/constants/tableDefinition';
-import { AddOrganizationRoleModal } from '@/features/organization/roles/modals/AddOrganizationRoleModal';
-import { EditOrganizationRoleModal } from '@/features/organization/roles/modals/EditOrganizationRoleModal';
 import { useOrganizationRolePermissions } from '@/hooks/usePermissions';
 import { useRefreshClick } from '@/hooks/useRefreshClick';
 import { SchemaOrganizationRole } from '@/integrations/api/api.gen';
-import { useSuspenseQuery } from '@tanstack/react-query';
+import { useQueryClient, useSuspenseQuery } from '@tanstack/react-query';
 import { useNavigate, useParams } from '@tanstack/react-router';
 import { Row } from '@tanstack/react-table';
 import { PlusIcon, RefreshCwIcon } from 'lucide-react';
 import { Suspense, useCallback, useMemo, useState } from 'react';
+import { dataTableColumns } from './constants/tableDefinition';
+import { AddOrganizationRoleModal } from './modals/AddOrganizationRoleModal';
+import { EditOrganizationRoleModal } from './modals/EditOrganizationRoleModal';
 
 export function OrgConfigRolesIndex() {
 	const navigate = useNavigate();
+	const queryClient = useQueryClient();
+
 	const { organizationId, orgRoleId }: { organizationId: string; orgRoleId?: string } = useParams({ strict: false });
 	const { create } = useOrganizationRolePermissions(organizationId);
 
@@ -37,43 +39,40 @@ export function OrgConfigRolesIndex() {
 	const [isAddModalOpen, setIsAddModalOpen] = useState(false);
 
 	const onSelectOrgRole = useCallback(
-		(newOrgRole: string | undefined) => {
+		async (newOrgRole: string | undefined, madeChanges: boolean) => {
 			const parts = [orgRoleId ? '..' : '', newOrgRole].filter(Boolean);
-			void navigate({ to: parts.join('/') });
+			await navigate({ to: parts.join('/') });
+			if (madeChanges) {
+				await queryClient.invalidateQueries({
+					queryKey: [organizationId, 'roles'],
+					refetchType: 'active',
+				});
+			}
 		},
-		[orgRoleId, navigate],
+		[orgRoleId, navigate, queryClient],
 	);
 
-	const onRoleDeleted = useCallback(() => {
-		void refetch();
-		setIsAddModalOpen(false);
-	}, [refetch, setIsAddModalOpen]);
-
 	const onAddClicked = useCallback(() => {
 		setIsAddModalOpen(true);
 	}, [setIsAddModalOpen]);
-	const onRoleAdded = useCallback(() => {
-		void refetch();
-		setIsAddModalOpen(false);
-	}, [refetch, setIsAddModalOpen]);
 
 	const onRowClick = useCallback(
 		(rowData: Row<SchemaOrganizationRole>) => {
-			onSelectOrgRole(rowData.original.id);
+			return onSelectOrgRole(rowData.original.id, false);
 		},
 		[onSelectOrgRole],
 	);
 
-	const closeEditModal = useCallback(() => {
-		onSelectOrgRole(undefined);
+	const closeEditModal = useCallback((madeChanges: boolean) => {
+		return onSelectOrgRole(undefined, madeChanges);
 	}, [onSelectOrgRole]);
 
 	const onRefreshClick = useRefreshClick(refetch);
 
 	return (
 		<>
 			<SubNavMenu />
-			<div className="mt-32 px-4 pt-4 md:px-12 min-h-[calc(100vh-theme(spacing.32))]">
+			<div className="mt-32 px-4 pt-4 md:px-12 min-h-[calc(100vh-(--spacing(32)))]">
 				<Suspense fallback={<Loading className="flex flex-col items-center justify-center h-full" text="Loading..." />}>
 					<SimpleBrowseDataTable data={orgRoles} columns={dataTableColumns} onRowClick={onRowClick}>
 						<Button
@@ -99,13 +98,11 @@ export function OrgConfigRolesIndex() {
 					{create && (
 						<AddOrganizationRoleModal
 							isModalOpen={isAddModalOpen}
-							onChangesSaved={onRoleAdded}
 							setIsModalOpen={setIsAddModalOpen}
 						/>
 					)}
 					{isEditOrgRoleModalOpen && (
 						<EditOrganizationRoleModal
-							roleDeleted={onRoleDeleted}
 							data={selectedOrgRole}
 							isModalOpen={isEditOrgRoleModalOpen}
 							closeModal={closeEditModal}
diff --git a/src/features/organization/roles/modals/AddOrganizationRoleModal.tsx b/src/features/organization/roles/modals/AddOrganizationRoleModal.tsx
@@ -7,20 +7,23 @@ import { FormItem } from '@/components/ui/form/FormItem';
 import { FormLabel } from '@/components/ui/form/FormLabel';
 import { FormMessage } from '@/components/ui/form/FormMessage';
 import { Input } from '@/components/ui/input';
+import { useAddOrganizationRole } from '@/features/organization/mutations/addOrganizationRole';
 import {
-	AddOrganizationRoleSchema,
-	useAddOrganizationRole,
-} from '@/features/organization/mutations/addOrganizationRole';
-import { SchemaRoleOrganizationPermissions } from '@/integrations/api/api.gen';
+	OrganizationRoleOverviewSchema,
+	OrganizationRoleOverviewType,
+	OrganizationRoleSpecificPermissionsType,
+	OrganizationRoleUpdatePayloadType,
+} from '@/features/organization/mutations/OrganizationRoleFormSchema';
+import { safeParse } from '@/lib/string/safeParse';
 import { zodResolver } from '@hookform/resolvers/zod';
 import { Editor } from '@monaco-editor/react';
+import { useQueryClient } from '@tanstack/react-query';
 import { useParams } from '@tanstack/react-router';
 import { useCallback, useState } from 'react';
 import { useForm } from 'react-hook-form';
 import { toast } from 'sonner';
-import z from 'zod';
 
-const defaultPermissions: Pick<SchemaRoleOrganizationPermissions, 'roles' | 'clusters'> = {
+const defaultPermissions: OrganizationRoleSpecificPermissionsType = {
 	roles: {
 		create: true,
 		view: true,
@@ -38,25 +41,24 @@ const defaultPermissions: Pick<SchemaRoleOrganizationPermissions, 'roles' | 'clu
 
 export function AddOrganizationRoleModal({
 	isModalOpen,
-	onChangesSaved,
 	setIsModalOpen,
 }: {
-	onChangesSaved: () => void;
 	isModalOpen: boolean;
 	setIsModalOpen: (isOpen: boolean) => void;
 }) {
+	const queryClient = useQueryClient();
 	const { organizationId }: { organizationId: string } = useParams({ strict: false });
 	const [isValidJSON, setIsValidJSON] = useState(true);
 	const [updatedPermissions, setUpdatedPermissions] = useState<string>(JSON.stringify(defaultPermissions, null, 2));
 
 	const { mutate: addOrganizationRole, isPending } = useAddOrganizationRole();
 
 	const form = useForm({
-		resolver: zodResolver(AddOrganizationRoleSchema),
+		resolver: zodResolver(OrganizationRoleOverviewSchema),
 		defaultValues: {
-			roleName: '',
-			updateOrganization: false,
-			deleteOrganization: false,
+			name: '',
+			update: false,
+			delete: false,
 		},
 	});
 
@@ -68,28 +70,34 @@ export function AddOrganizationRoleModal({
 	);
 
 	const onSubmitRoleEdits = useCallback(
-		async (formData: z.infer<typeof AddOrganizationRoleSchema>) => {
-			const updatedFormData = {
+		async (formData: OrganizationRoleOverviewType) => {
+			const parsedPermissions = safeParse<OrganizationRoleSpecificPermissionsType>(updatedPermissions);
+			if (!parsedPermissions) {
+				return;
+			}
+			const updatedFormData: OrganizationRoleUpdatePayloadType = {
+				...formData,
+				...parsedPermissions,
 				organizationId: organizationId,
-				name: formData.roleName,
-				update: formData.updateOrganization,
-				delete: formData.deleteOrganization,
-				...JSON.parse(updatedPermissions),
 			};
 			if (formData && isValidJSON) {
 				addOrganizationRole(updatedFormData, {
 					onSuccess: () => {
-						form.reset();
-						onChangesSaved();
 						toast.success('Organization role added successfully!');
+						setIsModalOpen(false);
+						void queryClient.invalidateQueries({
+							queryKey: [organizationId, 'roles'],
+							refetchType: 'active',
+						});
+						form.reset();
 					},
 					onError: (error: Error) => {
 						toast.error(`Failed to add organization role: ${error.message}`);
 					},
 				});
 			}
 		},
-		[isValidJSON, updatedPermissions, addOrganizationRole, form, onChangesSaved, organizationId],
+		[isValidJSON, updatedPermissions, addOrganizationRole, form, queryClient, setIsModalOpen, organizationId],
 	);
 
 	return (
@@ -101,20 +109,20 @@ export function AddOrganizationRoleModal({
 					<form className="grid grid-cols-2 gap-4 my-4" onSubmit={form.handleSubmit(onSubmitRoleEdits)}>
 						<FormField
 							control={form.control}
-							name="roleName"
+							name="name"
 							render={({ field }) => (
 								<FormItem className="col-span-2">
 									<FormLabel className="pb-1">Role Name</FormLabel>
 									<FormControl>
-										<Input type="text" placeholder="Developer" className="" {...field} />
+										<Input type="text" className="" {...field} />
 									</FormControl>
 									<FormMessage />
 								</FormItem>
 							)}
 						/>
 						<FormField
 							control={form.control}
-							name="updateOrganization"
+							name="update"
 							render={({ field }) => (
 								<FormItem>
 									<FormLabel className="pb-1">Can Update Organization</FormLabel>
@@ -132,7 +140,7 @@ export function AddOrganizationRoleModal({
 						/>
 						<FormField
 							control={form.control}
-							name="deleteOrganization"
+							name="delete"
 							render={({ field }) => (
 								<FormItem>
 									<FormLabel className="pb-1">Can Delete Organization</FormLabel>
@@ -173,7 +181,11 @@ export function AddOrganizationRoleModal({
 								>
 									Cancel
 								</Button>
-								<Button variant="submit" className="rounded-full" disabled={isPending || !isValidJSON}>
+								<Button
+									variant="submit"
+									className="rounded-full"
+									disabled={isPending || !isValidJSON || !form.formState.isValid}
+								>
 									Save Changes
 								</Button>
 							</div>
diff --git a/src/features/organization/roles/modals/ConfirmDeletionContent.tsx b/src/features/organization/roles/modals/ConfirmDeletionContent.tsx
diff --git a/src/features/organization/roles/modals/EditOrganizationRoleModal.tsx b/src/features/organization/roles/modals/EditOrganizationRoleModal.tsx
