Feat: Access requests group support

frontend/src/hooks/api/accessApproval/mutation.tsx

@@ -16,12 +16,20 @@ export const useCreateAccessApprovalPolicy = () => {
   const queryClient = useQueryClient();
 
   return useMutation<{}, {}, TCreateAccessPolicyDTO>({
-    mutationFn: async ({ environment, projectSlug, approvals, approvers, name, secretPath, enforcementLevel }) => {
+    mutationFn: async ({
+      environment,
+      projectSlug,
+      approvals,
+      approverUserIds,
+      name,
+      secretPath,
+      enforcementLevel
+    }) => {
       const { data } = await apiRequest.post("/api/v1/access-approvals/policies", {
         environment,
         projectSlug,
         approvals,
-        approvers,
+        approverUserIds,
         secretPath,
         name,
         enforcementLevel

frontend/src/hooks/api/accessApproval/types.ts

@@ -23,7 +23,14 @@ export type TAccessApprovalRequest = {
   id: string;
   policyId: string;
   privilegeId: string | null;
-  requestedBy: string;
+  requestedByUserId: string;
+  requestedByUser: {
+    email: string;
+    firstName?: string;
+    lastName?: string;
+    userId: string;
+    username: string;
+  };
   createdAt: Date;
   updatedAt: Date;
   isTemporary: boolean;
@@ -123,7 +130,7 @@ export type TCreateAccessPolicyDTO = {
   projectSlug: string;
   name?: string;
   environment: string;
-  approvers?: string[];
+  approverUserIds?: string[];
   approvals?: number;
   secretPath?: string;
   enforcementLevel?: EnforcementLevel;

frontend/src/hooks/api/users/types.ts

@@ -83,6 +83,7 @@ export type TWorkspaceUser = {
     publicKey: string;
   };
   projectId: string;
+  isGroupMember: boolean;
   project: {
     id: string;
     name: string;

frontend/src/hooks/api/workspace/queries.tsx

@@ -377,14 +377,19 @@ export const useDeleteWsEnvironment = () => {
   });
 };
 
-export const useGetWorkspaceUsers = (workspaceId: string) => {
+export const useGetWorkspaceUsers = (workspaceId: string, includeGroupMembers?: boolean) => {
   return useQuery({
     queryKey: workspaceKeys.getWorkspaceUsers(workspaceId),
     queryFn: async () => {
       const {
         data: { users }
       } = await apiRequest.get<{ users: TWorkspaceUser[] }>(
-        `/api/v1/workspace/${workspaceId}/users`
+        `/api/v1/workspace/${workspaceId}/users`,
+        {
+          params: {
+            includeGroupMembers
+          }
+        }
       );
       return users;
     },

frontend/src/views/SecretApprovalPage/components/AccessApprovalRequest/AccessApprovalRequest.tsx

@@ -29,6 +29,7 @@ import {
   ProjectPermissionSub,
   useProjectPermission,
   useSubscription,
+  useUser,
   useWorkspace
 } from "@app/context";
 import { usePopUp } from "@app/hooks";
@@ -47,7 +48,7 @@ import { queryClient } from "@app/reactQuery";
 import { RequestAccessModal } from "./components/RequestAccessModal";
 import { ReviewAccessRequestModal } from "./components/ReviewAccessModal";
 
-const generateRequestText = (request: TAccessApprovalRequest, membershipId: string) => {
+const generateRequestText = (request: TAccessApprovalRequest, userId: string) => {
   const { isTemporary } = request;
 
   return (
@@ -63,7 +64,7 @@ const generateRequestText = (request: TAccessApprovalRequest, membershipId: stri
         </code>
       </div>
       <div>
-        {request.requestedBy === membershipId && (
+        {request.requestedByUserId === userId && (
           <span className="text-xs text-gray-500">
             <Badge className="ml-1">Requested By You</Badge>
           </span>
@@ -81,11 +82,11 @@ export const AccessApprovalRequest = ({
   projectId: string;
 }) => {
   const [selectedRequest, setSelectedRequest] = useState<
-    (TAccessApprovalRequest & {
-      user: TWorkspaceUser["user"] | null;
-      isRequestedByCurrentUser: boolean;
-      isApprover: boolean;
-    })
+    | (TAccessApprovalRequest & {
+        user: TWorkspaceUser["user"] | null;
+        isRequestedByCurrentUser: boolean;
+        isApprover: boolean;
+      })
     | null
   >(null);
 
@@ -94,16 +95,19 @@ export const AccessApprovalRequest = ({
     "reviewRequest",
     "upgradePlan"
   ] as const);
-  const { membership, permission } = useProjectPermission();
+  const { permission } = useProjectPermission();
+  const { user } = useUser();
   const { subscription } = useSubscription();
   const { currentWorkspace } = useWorkspace();
 
-  const { data: members } = useGetWorkspaceUsers(projectId);
+  const { data: members } = useGetWorkspaceUsers(projectId, true);
   const membersGroupById = members?.reduce<Record<string, TWorkspaceUser>>(
-    (prev, curr) => ({ ...prev, [curr.id]: curr }),
+    (prev, curr) => ({ ...prev, [curr.user.id]: curr }),
     {}
   );
 
+  console.log("membersGroupById", membersGroupById);
+
   const [statusFilter, setStatusFilter] = useState<"open" | "close">("open");
   const [requestedByFilter, setRequestedByFilter] = useState<string | undefined>(undefined);
   const [envFilter, setEnvFilter] = useState<string | undefined>(undefined);
@@ -140,19 +144,18 @@ export const AccessApprovalRequest = ({
   }, [requests, statusFilter, requestedByFilter, envFilter]);
 
   const generateRequestDetails = (request: TAccessApprovalRequest) => {
-    const isReviewedByUser =
-      request.reviewers.findIndex(({ member }) => member === membership.id) !== -1;
+    console.log(request);
+
+    const isReviewedByUser = request.reviewers.findIndex(({ member }) => member === user.id) !== -1;
     const isRejectedByAnyone = request.reviewers.some(
       ({ status }) => status === ApprovalStatus.REJECTED
     );
-    const isApprover = request.policy.approvers.indexOf(membership.id || "") !== -1;
+    const isApprover = request.policy.approvers.indexOf(user.id || "") !== -1;
     const isAccepted = request.isApproved;
     const isSoftEnforcement = request.policy.enforcementLevel === EnforcementLevel.Soft;
-    const isRequestedByCurrentUser = request.requestedBy === membership.id;
+    const isRequestedByCurrentUser = request.requestedByUserId === user.id;
 
-    const userReviewStatus = request.reviewers.find(
-      ({ member }) => member === membership.id
-    )?.status;
+    const userReviewStatus = request.reviewers.find(({ member }) => member === user.id)?.status;
 
     let displayData: { label: string; type: "primary" | "danger" | "success" } = {
       label: "",
@@ -303,7 +306,7 @@ export const AccessApprovalRequest = ({
                   </DropdownMenuTrigger>
                   <DropdownMenuContent align="end">
                     <DropdownMenuLabel>Select an author</DropdownMenuLabel>
-                    {members?.map(({ user, id }) => (
+                    {members?.map(({ user: membershipUser, id }) => (
                       <DropdownMenuItem
                         onClick={() =>
                           setRequestedByFilter((state) => (state === id ? undefined : id))
@@ -312,7 +315,7 @@ export const AccessApprovalRequest = ({
                         icon={requestedByFilter === id && <FontAwesomeIcon icon={faCheckCircle} />}
                         iconPos="right"
                       >
-                        {user.username}
+                        {membershipUser.username}
                       </DropdownMenuItem>
                     ))}
                   </DropdownMenuContent>
@@ -341,22 +344,21 @@ export const AccessApprovalRequest = ({
                     tabIndex={0}
                     onClick={() => {
                       if (
-                        (
-                          !details.isApprover
-                          || details.isReviewedByUser
-                          || details.isRejectedByAnyone
-                          || details.isAccepted
-                        ) && !(
-                          details.isSoftEnforcement
-                          && details.isRequestedByCurrentUser
-                          && !details.isAccepted
+                        (!details.isApprover ||
+                          details.isReviewedByUser ||
+                          details.isRejectedByAnyone ||
+                          details.isAccepted) &&
+                        !(
+                          details.isSoftEnforcement &&
+                          details.isRequestedByCurrentUser &&
+                          !details.isAccepted
                         )
                       )
                         return;
 
                       setSelectedRequest({
                         ...request,
-                        user: membersGroupById?.[request.requestedBy].user!,
+                        user: membersGroupById?.[request.requestedByUserId].user!,
                         isRequestedByCurrentUser: details.isRequestedByCurrentUser,
                         isApprover: details.isApprover
                       });
@@ -373,7 +375,7 @@ export const AccessApprovalRequest = ({
                       if (evt.key === "Enter") {
                         setSelectedRequest({
                           ...request,
-                          user: membersGroupById?.[request.requestedBy].user!,
+                          user: membersGroupById?.[request.requestedByUserId].user!,
                           isRequestedByCurrentUser: details.isRequestedByCurrentUser,
                           isApprover: details.isApprover
                         });
@@ -385,16 +387,17 @@ export const AccessApprovalRequest = ({
                       <div className="flex w-full flex-col justify-between">
                         <div className="mb-1 flex w-full items-center">
                           <FontAwesomeIcon icon={faLock} className="mr-2" />
-                          {generateRequestText(request, membership.id)}
+                          {generateRequestText(request, user.id)}
                         </div>
                         <div className="flex items-center justify-between">
                           <div className="text-xs text-gray-500">
-                            {membersGroupById?.[request.requestedBy]?.user && (
+                            {membersGroupById?.[request.requestedByUserId]?.user && (
                               <>
                                 Requested {formatDistance(new Date(request.createdAt), new Date())}{" "}
-                                ago by {membersGroupById?.[request.requestedBy]?.user?.firstName}{" "}
-                                {membersGroupById?.[request.requestedBy]?.user?.lastName} (
-                                {membersGroupById?.[request.requestedBy]?.user?.email}){" "}
+                                ago by{" "}
+                                {membersGroupById?.[request.requestedByUserId]?.user?.firstName}{" "}
+                                {membersGroupById?.[request.requestedByUserId]?.user?.lastName} (
+                                {membersGroupById?.[request.requestedByUserId]?.user?.email}){" "}
                               </>
                             )}
                           </div>

frontend/src/views/SecretApprovalPage/components/ApprovalPolicyList/ApprovalPolicyList.tsx

@@ -1,5 +1,10 @@
-import { useMemo,useState } from "react";
-import { faCheckCircle,faChevronDown, faFileShield, faPlus } from "@fortawesome/free-solid-svg-icons";
+import { useMemo, useState } from "react";
+import {
+  faCheckCircle,
+  faChevronDown,
+  faFileShield,
+  faPlus
+} from "@fortawesome/free-solid-svg-icons";
 import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
 
 import { createNotification } from "@app/components/notifications";
@@ -32,7 +37,12 @@ import {
   useWorkspace
 } from "@app/context";
 import { usePopUp } from "@app/hooks";
-import { useDeleteAccessApprovalPolicy, useDeleteSecretApprovalPolicy, useGetSecretApprovalPolicies, useGetWorkspaceUsers } from "@app/hooks/api";
+import {
+  useDeleteAccessApprovalPolicy,
+  useDeleteSecretApprovalPolicy,
+  useGetSecretApprovalPolicies,
+  useGetWorkspaceUsers
+} from "@app/hooks/api";
 import { useGetAccessApprovalPolicies } from "@app/hooks/api/accessApproval/queries";
 import { PolicyType } from "@app/hooks/api/policies/enums";
 import { TAccessApprovalPolicy, Workspace } from "@app/hooks/api/types";
@@ -45,27 +55,32 @@ interface IProps {
 }
 
 const useApprovalPolicies = (permission: TProjectPermission, currentWorkspace?: Workspace) => {
-  const { data: accessPolicies, isLoading: isAccessPoliciesLoading } = useGetAccessApprovalPolicies({
-    projectSlug: currentWorkspace?.slug as string,
-    options: {
-      enabled:
-        permission.can(ProjectPermissionActions.Read, ProjectPermissionSub.SecretApproval) &&
-        !!currentWorkspace?.slug
+  const { data: accessPolicies, isLoading: isAccessPoliciesLoading } = useGetAccessApprovalPolicies(
+    {
+      projectSlug: currentWorkspace?.slug as string,
+      options: {
+        enabled:
+          permission.can(ProjectPermissionActions.Read, ProjectPermissionSub.SecretApproval) &&
+          !!currentWorkspace?.slug
+      }
     }
-  });
-  const { data: secretPolicies, isLoading: isSecretPoliciesLoading } = useGetSecretApprovalPolicies({
-    workspaceId: currentWorkspace?.id as string,
-    options: {
-      enabled:
-        permission.can(ProjectPermissionActions.Read, ProjectPermissionSub.SecretApproval) &&
-        !!currentWorkspace?.id
+  );
+  const { data: secretPolicies, isLoading: isSecretPoliciesLoading } = useGetSecretApprovalPolicies(
+    {
+      workspaceId: currentWorkspace?.id as string,
+      options: {
+        enabled:
+          permission.can(ProjectPermissionActions.Read, ProjectPermissionSub.SecretApproval) &&
+          !!currentWorkspace?.id
+      }
     }
-  });
+  );
 
   // merge data sorted by updatedAt
   const policies = [
-    ...(accessPolicies?.map(policy => ({ ...policy, policyType: PolicyType.AccessPolicy })) || []),
-    ...(secretPolicies?.map(policy => ({ ...policy, policyType: PolicyType.ChangePolicy })) || [])
+    ...(accessPolicies?.map((policy) => ({ ...policy, policyType: PolicyType.AccessPolicy })) ||
+      []),
+    ...(secretPolicies?.map((policy) => ({ ...policy, policyType: PolicyType.ChangePolicy })) || [])
   ].sort((a, b) => {
     return new Date(b.updatedAt).getTime() - new Date(a.updatedAt).getTime();
   });
@@ -86,15 +101,16 @@ export const ApprovalPolicyList = ({ workspaceId }: IProps) => {
   const { subscription } = useSubscription();
   const { currentWorkspace } = useWorkspace();
 
-  const { data: members } = useGetWorkspaceUsers(workspaceId);
-  const { policies, isLoading: isPoliciesLoading } = useApprovalPolicies(permission, currentWorkspace);
+  const { data: members } = useGetWorkspaceUsers(workspaceId, true);
+  const { policies, isLoading: isPoliciesLoading } = useApprovalPolicies(
+    permission,
+    currentWorkspace
+  );
 
   const [filterType, setFilterType] = useState<string | null>(null);
 
   const filteredPolicies = useMemo(() => {
-    return filterType
-      ? policies.filter(policy => policy.policyType === filterType)
-      : policies;
+    return filterType ? policies.filter((policy) => policy.policyType === filterType) : policies;
   }, [policies, filterType]);
 
   const { mutateAsync: deleteSecretApprovalPolicy } = useDeleteSecretApprovalPolicy();
@@ -177,8 +193,10 @@ export const ApprovalPolicyList = ({ workspaceId }: IProps) => {
                     <Button
                       variant="plain"
                       colorSchema="secondary"
-                      className="text-bunker-300 uppercase text-xs font-semibold"
-                      rightIcon={<FontAwesomeIcon icon={faChevronDown} size="sm" className="ml-2" />}
+                      className="text-xs font-semibold uppercase text-bunker-300"
+                      rightIcon={
+                        <FontAwesomeIcon icon={faChevronDown} size="sm" className="ml-2" />
+                      }
                     >
                       Type
                     </Button>
@@ -194,14 +212,22 @@ export const ApprovalPolicyList = ({ workspaceId }: IProps) => {
                     </DropdownMenuItem>
                     <DropdownMenuItem
                       onClick={() => setFilterType(PolicyType.AccessPolicy)}
-                      icon={filterType === PolicyType.AccessPolicy && <FontAwesomeIcon icon={faCheckCircle} />}
+                      icon={
+                        filterType === PolicyType.AccessPolicy && (
+                          <FontAwesomeIcon icon={faCheckCircle} />
+                        )
+                      }
                       iconPos="right"
                     >
                       Access Policy
                     </DropdownMenuItem>
                     <DropdownMenuItem
                       onClick={() => setFilterType(PolicyType.ChangePolicy)}
-                      icon={filterType === PolicyType.ChangePolicy && <FontAwesomeIcon icon={faCheckCircle} />}
+                      icon={
+                        filterType === PolicyType.ChangePolicy && (
+                          <FontAwesomeIcon icon={faCheckCircle} />
+                        )
+                      }
                       iconPos="right"
                     >
                       Change Policy

frontend/src/views/SecretApprovalPage/components/ApprovalPolicyList/components/AccessPolicyModal.tsx

@@ -7,363 +7,398 @@ import { z } from "zod";
 
 import { createNotification } from "@app/components/notifications";
 import {
-	Button,
-	DropdownMenu,
-	DropdownMenuContent,
-	DropdownMenuItem,
-	DropdownMenuLabel,
-	DropdownMenuTrigger,
-	FormControl,
-	Input,
-	Modal,
-	ModalContent,
-	Select,
-	SelectItem
+  Button,
+  DropdownMenu,
+  DropdownMenuContent,
+  DropdownMenuItem,
+  DropdownMenuLabel,
+  DropdownMenuTrigger,
+  FormControl,
+  Input,
+  Modal,
+  ModalContent,
+  Select,
+  SelectItem
 } from "@app/components/v2";
 import { useWorkspace } from "@app/context";
 import { policyDetails } from "@app/helpers/policies";
 import { useCreateSecretApprovalPolicy, useUpdateSecretApprovalPolicy } from "@app/hooks/api";
 import {
-	useCreateAccessApprovalPolicy,
-	useUpdateAccessApprovalPolicy
+  useCreateAccessApprovalPolicy,
+  useUpdateAccessApprovalPolicy
 } from "@app/hooks/api/accessApproval";
 import { TAccessApprovalPolicy } from "@app/hooks/api/accessApproval/types";
 import { EnforcementLevel, PolicyType } from "@app/hooks/api/policies/enums";
 import { TWorkspaceUser } from "@app/hooks/api/users/types";
 
 type Props = {
-	isOpen?: boolean;
-	onToggle: (isOpen: boolean) => void;
-	members?: TWorkspaceUser[];
-	projectSlug: string;
-	editValues?: TAccessApprovalPolicy;
+  isOpen?: boolean;
+  onToggle: (isOpen: boolean) => void;
+  members?: TWorkspaceUser[];
+  projectSlug: string;
+  editValues?: TAccessApprovalPolicy;
 };
 
 const formSchema = z
-.object({
-	environment: z.string(),
-	name: z.string().optional(),
-	secretPath: z.string().optional(),
-	approvals: z.number().min(1),
-	approvers: z.string().array().min(1),
-	policyType: z.nativeEnum(PolicyType),
-	enforcementLevel: z.nativeEnum(EnforcementLevel)
-})
-.refine((data) => data.approvals <= data.approvers.length, {
-	path: ["approvals"],
-	message: "The number of approvals should be lower than the number of approvers."
-});
+  .object({
+    environment: z.string(),
+    name: z.string().optional(),
+    secretPath: z.string().optional(),
+    approvals: z.number().min(1),
+    approverUserIds: z.string().array().min(1),
+    policyType: z.nativeEnum(PolicyType),
+    enforcementLevel: z.nativeEnum(EnforcementLevel)
+  })
+  .refine((data) => data.approvals <= data.approverUserIds.length, {
+    path: ["approvals"],
+    message: "The number of approvals should be lower than the number of approvers."
+  });
 
 type TFormSchema = z.infer<typeof formSchema>;
 
 export const AccessPolicyForm = ({
-	isOpen,
-	onToggle,
-	members = [],
-	projectSlug,
-	editValues
+  isOpen,
+  onToggle,
+  members = [],
+  projectSlug,
+  editValues
 }: Props) => {
-	const {
-		control,
-		handleSubmit,
-		reset,
-		watch,
-		formState: { isSubmitting }
-	} = useForm<TFormSchema>({
-		resolver: zodResolver(formSchema),
-		values: editValues ? { 
-			...editValues, 
-			environment: editValues.environment.slug, 
-			approvers: editValues?.userApprovers?.map((user) => user.userId) || editValues?.approvers
-		} : undefined
-	});
-	const { currentWorkspace } = useWorkspace();
-	
-	const environments = currentWorkspace?.environments || [];
-	const isEditMode = Boolean(editValues);
-	
-	useEffect(() => {
-		if (!isOpen || !isEditMode) reset({});
-	}, [isOpen, isEditMode]);
-	
-	const { mutateAsync: createAccessApprovalPolicy } = useCreateAccessApprovalPolicy();
-	const { mutateAsync: updateAccessApprovalPolicy } = useUpdateAccessApprovalPolicy();
-	
-	const { mutateAsync: createSecretApprovalPolicy } = useCreateSecretApprovalPolicy();
-	const { mutateAsync: updateSecretApprovalPolicy } = useUpdateSecretApprovalPolicy();
+  const {
+    control,
+    handleSubmit,
+    reset,
+    watch,
+    formState: { isSubmitting }
+  } = useForm<TFormSchema>({
+    resolver: zodResolver(formSchema),
+    values: editValues
+      ? {
+          ...editValues,
+          environment: editValues.environment.slug,
+          approverUserIds:
+            editValues?.userApprovers?.map((user) => user.userId) || editValues?.approvers
+        }
+      : undefined
+  });
+  const { currentWorkspace } = useWorkspace();
 
-	const policyName = policyDetails[watch("policyType")]?.name || "Policy";
-	
-	const handleCreatePolicy = async (data: TFormSchema) => {
-		if (!projectSlug) return;
-		
-		try {
-			if (data.policyType === PolicyType.ChangePolicy) {
-				await createSecretApprovalPolicy({
-					...data,
-					workspaceId: currentWorkspace?.id || ""
-				});
-			} else {
-				await createAccessApprovalPolicy({
-					...data,
-					projectSlug
-				});
-			}
-			createNotification({
-				type: "success",
-				text: "Successfully created policy"
-			});
-			onToggle(false);
-		} catch (err) {
-			console.log(err);
-			createNotification({
-				type: "error",
-				text: "Failed to create policy"
-			});
-		}
-	};
-	
-	const handleUpdatePolicy = async (data: TFormSchema) => {
-		if (!projectSlug) return;
-		if (!editValues?.id) return;
-		
-		try {
-			if (data.policyType === PolicyType.ChangePolicy) {
-				await updateSecretApprovalPolicy({
-					id: editValues?.id,
-					...data,
-					workspaceId: currentWorkspace?.id || ""
-				});
-			} else {
-				await updateAccessApprovalPolicy({
-					id: editValues?.id,
-					...data,
-					projectSlug
-				});
-			}
-			createNotification({
-				type: "success",
-				text: "Successfully updated policy"
-			});
-			onToggle(false);
-		} catch (err) {
-			console.log(err);
-			createNotification({
-				type: "error",
-				text: "failed  to update policy"
-			});
-		}
-	};
-	
-	const handleFormSubmit = async (data: TFormSchema) => {
-		if (isEditMode) {
-			await handleUpdatePolicy(data);
-		} else {
-			await handleCreatePolicy(data);
-		}
-	};
+  const environments = currentWorkspace?.environments || [];
+  const isEditMode = Boolean(editValues);
 
-	const formatEnforcementLevel = (level: EnforcementLevel) => {
-		if (level === EnforcementLevel.Hard) return "Hard";
-		if (level === EnforcementLevel.Soft) return "Soft";
-		return level;
-	};
-	
-	return (
-		<Modal isOpen={isOpen} onOpenChange={onToggle}>
-			<ModalContent title={isEditMode ? `Edit ${policyName}` : "Create Policy"}>
-				<div className="flex flex-col space-y-3">
-					<form onSubmit={handleSubmit(handleFormSubmit)}>
-						<Controller
-						control={control}
-						name="policyType"
-						defaultValue={PolicyType.ChangePolicy}
-						
-						render={({ field: { value, onChange }, fieldState: { error } }) => (
-							<FormControl
-							label="Policy Type"
-							isRequired
-							isError={Boolean(error)}
-							tooltipText="Change polices govern secret changes within a given environment and secret path. Access polices allow underprivileged user to request access to environment/secret path."
-							errorText={error?.message}
-							>
-							<Select
-							isDisabled={isEditMode}
-							value={value}
-							onValueChange={(val) => onChange(val as PolicyType)}
-							className="w-full border border-mineshaft-500"
-							>
-							{Object.values(PolicyType).map((policyType) => {
-								return (
-									<SelectItem value={policyType} key={`policy-type-${policyType}`}>
-									{policyDetails[policyType].name}
-									</SelectItem>
-								);
-							})}
-							</Select>
-							</FormControl>
-						)}
-						/>
-						<Controller
-						control={control}
-						name="name"
-						render={({ field, fieldState: { error } }) => (
-							<FormControl label="Policy Name" isError={Boolean(error)} errorText={error?.message}>
-							<Input {...field} value={field.value || ""} />
-							</FormControl>
-						)}
-						/>
-						<Controller
-						control={control}
-						name="environment"
-						defaultValue={environments[0]?.slug}
-						render={({ field: { value, onChange }, fieldState: { error } }) => (
-							<FormControl
-							label="Environment"
-							isRequired
-							className="mt-4"
-							isError={Boolean(error)}
-							errorText={error?.message}
-							>
-							<Select
-							isDisabled={isEditMode}
-							value={value}
-							onValueChange={(val) => onChange(val)}
-							className="w-full border border-mineshaft-500"
-							>
-							{environments.map((sourceEnvironment) => (
-								<SelectItem
-								value={sourceEnvironment.slug}
-								key={`azure-key-vault-environment-${sourceEnvironment.slug}`}
-								>
-								{sourceEnvironment.name}
-								</SelectItem>
-							))}
-							</Select>
-							</FormControl>
-						)}
-						/>
-						<Controller
-						control={control}
-						name="secretPath"
-						render={({ field, fieldState: { error } }) => (
-							<FormControl label="Secret Path" isError={Boolean(error)} errorText={error?.message}>
-							<Input {...field} value={field.value || ""} />
-							</FormControl>
-						)}
-						/>
-						<Controller
-						control={control}
-						name="approvers"
-						render={({ field: { value, onChange }, fieldState: { error } }) => (
-							<FormControl
-							label="Required Approvers"
-							isRequired
-							isError={Boolean(error)}
-							errorText={error?.message}
-							>
-							<DropdownMenu>
-							<DropdownMenuTrigger asChild>
-								<Input
-								isReadOnly
-								value={value?.length ? `${value.length} selected` : "None"}
-								className="text-left"
-								/>
-							</DropdownMenuTrigger>
-							<DropdownMenuContent
-							style={{ width: "var(--radix-dropdown-menu-trigger-width)" }}
-							align="start"
-							>
-							<DropdownMenuLabel>
-							Select members that are allowed to approve requests
-							</DropdownMenuLabel>
-							{members.map(({ id, user }) => {
-								const userId = watch("policyType") === PolicyType.ChangePolicy ? user.id : id;
-								const isChecked = value?.includes(userId);
-								return (
-									<DropdownMenuItem
-									onClick={(evt) => {
-										evt.preventDefault();
-										onChange(
-											isChecked ? value?.filter((el: string) => el !== userId) : [...(value || []), userId]
-										);
-									}}
-									key={`create-policy-members-${userId}`}
-									iconPos="right"
-									icon={isChecked && <FontAwesomeIcon icon={faCheckCircle} />}
-									>
-									{user.username}
-									</DropdownMenuItem>
-								);
-							})}
-							</DropdownMenuContent>
-							</DropdownMenu>
-							</FormControl>
-						)}
-						/>
-						<Controller
-						control={control}
-						name="approvals"
-						defaultValue={1}
-						render={({ field, fieldState: { error } }) => (
-							<FormControl
-							label="Minimum Approvals Required"
-							isError={Boolean(error)}
-							errorText={error?.message}
-							>
-							<Input
-							{...field}
-							type="number"
-							min={1}
-							onChange={(el) => field.onChange(parseInt(el.target.value, 10))}
-							/>
-							</FormControl>
-						)}
-						/>
-						<Controller
-						control={control}
-						name="enforcementLevel"
-						defaultValue={EnforcementLevel.Hard}
-						render={({ field, fieldState: { error } }) => (
-							<FormControl
-							label="Enforcement Level"
-							isError={Boolean(error)}
-							errorText={error?.message}
-							tooltipText="Determines the level of enforcement for required approvers of a request"
-							helperText={
-								field.value === EnforcementLevel.Hard
-								? "All approvers must approve the request."
-								: "All approvers must approve the request; however, the requester can bypass approval requirements in emergencies."
-							}
-							>
-								<Select
-								value={field.value}
-								onValueChange={(val) => field.onChange(val as EnforcementLevel)}
-								className="w-full border border-mineshaft-500"
-								>
-									{Object.values(EnforcementLevel).map((level) => {
-										return (
-											<SelectItem value={level} key={`enforcement-level-${level}`} className="text-xs">
-											{formatEnforcementLevel(level)}
-											</SelectItem>
-										);
-									})}
-								</Select>
-							</FormControl>
-						)}
-						/>
-						<div className="mt-8 flex items-center space-x-4">
-							<Button type="submit" isLoading={isSubmitting} isDisabled={isSubmitting}>
-								Save
-							</Button>
-							<Button onClick={() => onToggle(false)} variant="outline_bg">
-								Close
-							</Button>
-						</div>
-					</form>
-				</div>
-			</ModalContent>
-		</Modal>
-	);
+  useEffect(() => {
+    if (!isOpen || !isEditMode) reset({});
+  }, [isOpen, isEditMode]);
+
+  const { mutateAsync: createAccessApprovalPolicy } = useCreateAccessApprovalPolicy();
+  const { mutateAsync: updateAccessApprovalPolicy } = useUpdateAccessApprovalPolicy();
+
+  const { mutateAsync: createSecretApprovalPolicy } = useCreateSecretApprovalPolicy();
+  const { mutateAsync: updateSecretApprovalPolicy } = useUpdateSecretApprovalPolicy();
+
+  const policyName = policyDetails[watch("policyType")]?.name || "Policy";
+
+  const handleCreatePolicy = async (data: TFormSchema) => {
+    if (!projectSlug) return;
+
+    try {
+      if (data.policyType === PolicyType.ChangePolicy) {
+        await createSecretApprovalPolicy({
+          ...data,
+          workspaceId: currentWorkspace?.id || ""
+        });
+      } else {
+        console.log(data);
+        console.log(data);
+        console.log(data);
+        console.log(data);
+        console.log(data);
+        console.log(data);
+        console.log(data);
+        console.log(data);
+        console.log(data);
+        console.log(data);
+        console.log(data);
+        console.log(data);
+        console.log(data);
+        console.log(data);
+        console.log(data);
+        console.log(data);
+        console.log(data);
+        console.log(data);
+        console.log(data);
+        console.log(data);
+        await createAccessApprovalPolicy({
+          ...data,
+          projectSlug
+        });
+      }
+      createNotification({
+        type: "success",
+        text: "Successfully created policy"
+      });
+      onToggle(false);
+    } catch (err) {
+      console.log(err);
+      createNotification({
+        type: "error",
+        text: "Failed to create policy"
+      });
+    }
+  };
+
+  const handleUpdatePolicy = async (data: TFormSchema) => {
+    if (!projectSlug) return;
+    if (!editValues?.id) return;
+
+    try {
+      if (data.policyType === PolicyType.ChangePolicy) {
+        await updateSecretApprovalPolicy({
+          id: editValues?.id,
+          ...data,
+          workspaceId: currentWorkspace?.id || ""
+        });
+      } else {
+        await updateAccessApprovalPolicy({
+          id: editValues?.id,
+          ...data,
+          projectSlug
+        });
+      }
+      createNotification({
+        type: "success",
+        text: "Successfully updated policy"
+      });
+      onToggle(false);
+    } catch (err) {
+      console.log(err);
+      createNotification({
+        type: "error",
+        text: "failed  to update policy"
+      });
+    }
+  };
+
+  const handleFormSubmit = async (data: TFormSchema) => {
+    if (isEditMode) {
+      await handleUpdatePolicy(data);
+    } else {
+      await handleCreatePolicy(data);
+    }
+  };
+
+  const formatEnforcementLevel = (level: EnforcementLevel) => {
+    if (level === EnforcementLevel.Hard) return "Hard";
+    if (level === EnforcementLevel.Soft) return "Soft";
+    return level;
+  };
+
+  return (
+    <Modal isOpen={isOpen} onOpenChange={onToggle}>
+      <ModalContent title={isEditMode ? `Edit ${policyName}` : "Create Policy"}>
+        <div className="flex flex-col space-y-3">
+          <form onSubmit={handleSubmit(handleFormSubmit)}>
+            <Controller
+              control={control}
+              name="policyType"
+              defaultValue={PolicyType.ChangePolicy}
+              render={({ field: { value, onChange }, fieldState: { error } }) => (
+                <FormControl
+                  label="Policy Type"
+                  isRequired
+                  isError={Boolean(error)}
+                  tooltipText="Change polices govern secret changes within a given environment and secret path. Access polices allow underprivileged user to request access to environment/secret path."
+                  errorText={error?.message}
+                >
+                  <Select
+                    isDisabled={isEditMode}
+                    value={value}
+                    onValueChange={(val) => onChange(val as PolicyType)}
+                    className="w-full border border-mineshaft-500"
+                  >
+                    {Object.values(PolicyType).map((policyType) => {
+                      return (
+                        <SelectItem value={policyType} key={`policy-type-${policyType}`}>
+                          {policyDetails[policyType].name}
+                        </SelectItem>
+                      );
+                    })}
+                  </Select>
+                </FormControl>
+              )}
+            />
+            <Controller
+              control={control}
+              name="name"
+              render={({ field, fieldState: { error } }) => (
+                <FormControl
+                  label="Policy Name"
+                  isError={Boolean(error)}
+                  errorText={error?.message}
+                >
+                  <Input {...field} value={field.value || ""} />
+                </FormControl>
+              )}
+            />
+            <Controller
+              control={control}
+              name="environment"
+              defaultValue={environments[0]?.slug}
+              render={({ field: { value, onChange }, fieldState: { error } }) => (
+                <FormControl
+                  label="Environment"
+                  isRequired
+                  className="mt-4"
+                  isError={Boolean(error)}
+                  errorText={error?.message}
+                >
+                  <Select
+                    isDisabled={isEditMode}
+                    value={value}
+                    onValueChange={(val) => onChange(val)}
+                    className="w-full border border-mineshaft-500"
+                  >
+                    {environments.map((sourceEnvironment) => (
+                      <SelectItem
+                        value={sourceEnvironment.slug}
+                        key={`azure-key-vault-environment-${sourceEnvironment.slug}`}
+                      >
+                        {sourceEnvironment.name}
+                      </SelectItem>
+                    ))}
+                  </Select>
+                </FormControl>
+              )}
+            />
+            <Controller
+              control={control}
+              name="secretPath"
+              render={({ field, fieldState: { error } }) => (
+                <FormControl
+                  label="Secret Path"
+                  isError={Boolean(error)}
+                  errorText={error?.message}
+                >
+                  <Input {...field} value={field.value || ""} />
+                </FormControl>
+              )}
+            />
+            <Controller
+              control={control}
+              name="approverUserIds"
+              render={({ field: { value, onChange }, fieldState: { error } }) => (
+                <FormControl
+                  label="Required Approvers"
+                  isRequired
+                  isError={Boolean(error)}
+                  errorText={error?.message}
+                >
+                  <DropdownMenu>
+                    <DropdownMenuTrigger asChild>
+                      <Input
+                        isReadOnly
+                        value={value?.length ? `${value.length} selected` : "None"}
+                        className="text-left"
+                      />
+                    </DropdownMenuTrigger>
+                    <DropdownMenuContent
+                      style={{ width: "var(--radix-dropdown-menu-trigger-width)" }}
+                      align="start"
+                    >
+                      <DropdownMenuLabel>
+                        Select members that are allowed to approve requests
+                      </DropdownMenuLabel>
+                      {members.map(({ user }) => {
+                        const { id: userId } = user;
+                        const isChecked = value?.includes(userId);
+                        return (
+                          <DropdownMenuItem
+                            onClick={(evt) => {
+                              evt.preventDefault();
+                              onChange(
+                                isChecked
+                                  ? value?.filter((el: string) => el !== userId)
+                                  : [...(value || []), userId]
+                              );
+                            }}
+                            key={`create-policy-members-${userId}`}
+                            iconPos="right"
+                            icon={isChecked && <FontAwesomeIcon icon={faCheckCircle} />}
+                          >
+                            {user.username}
+                          </DropdownMenuItem>
+                        );
+                      })}
+                    </DropdownMenuContent>
+                  </DropdownMenu>
+                </FormControl>
+              )}
+            />
+            <Controller
+              control={control}
+              name="approvals"
+              defaultValue={1}
+              render={({ field, fieldState: { error } }) => (
+                <FormControl
+                  label="Minimum Approvals Required"
+                  isError={Boolean(error)}
+                  errorText={error?.message}
+                >
+                  <Input
+                    {...field}
+                    type="number"
+                    min={1}
+                    onChange={(el) => field.onChange(parseInt(el.target.value, 10))}
+                  />
+                </FormControl>
+              )}
+            />
+            <Controller
+              control={control}
+              name="enforcementLevel"
+              defaultValue={EnforcementLevel.Hard}
+              render={({ field, fieldState: { error } }) => (
+                <FormControl
+                  label="Enforcement Level"
+                  isError={Boolean(error)}
+                  errorText={error?.message}
+                  tooltipText="Determines the level of enforcement for required approvers of a request"
+                  helperText={
+                    field.value === EnforcementLevel.Hard
+                      ? "All approvers must approve the request."
+                      : "All approvers must approve the request; however, the requester can bypass approval requirements in emergencies."
+                  }
+                >
+                  <Select
+                    value={field.value}
+                    onValueChange={(val) => field.onChange(val as EnforcementLevel)}
+                    className="w-full border border-mineshaft-500"
+                  >
+                    {Object.values(EnforcementLevel).map((level) => {
+                      return (
+                        <SelectItem
+                          value={level}
+                          key={`enforcement-level-${level}`}
+                          className="text-xs"
+                        >
+                          {formatEnforcementLevel(level)}
+                        </SelectItem>
+                      );
+                    })}
+                  </Select>
+                </FormControl>
+              )}
+            />
+            <div className="mt-8 flex items-center space-x-4">
+              <Button type="submit" isLoading={isSubmitting} isDisabled={isSubmitting}>
+                Save
+              </Button>
+              <Button onClick={() => onToggle(false)} variant="outline_bg">
+                Close
+              </Button>
+            </div>
+          </form>
+        </div>
+      </ModalContent>
+    </Modal>
+  );
 };
-