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,7 +82,7 @@ export const AccessApprovalRequest = ({
   projectId: string;
 }) => {
   const [selectedRequest, setSelectedRequest] = useState<
-    (TAccessApprovalRequest & {
+    | (TAccessApprovalRequest & {
         user: TWorkspaceUser["user"] | null;
         isRequestedByCurrentUser: boolean;
         isApprover: boolean;
@@ -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 =
+    console.log(request);
-      request.reviewers.findIndex(({ member }) => member === membership.id) !== -1;
+
+    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(
+    const userReviewStatus = request.reviewers.find(({ member }) => member === user.id)?.status;
-      ({ member }) => member === membership.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.isApprover
+                          details.isReviewedByUser ||
-                          || details.isReviewedByUser
+                          details.isRejectedByAnyone ||
-                          || details.isRejectedByAnyone
+                          details.isAccepted) &&
-                          || details.isAccepted
+                        !(
-                        ) && !(
+                          details.isSoftEnforcement &&
-                          details.isSoftEnforcement
+                          details.isRequestedByCurrentUser &&
-                          && details.isRequestedByCurrentUser
+                          !details.isAccepted
-                          && !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}{" "}
+                                ago by{" "}
-                                {membersGroupById?.[request.requestedBy]?.user?.lastName} (
+                                {membersGroupById?.[request.requestedByUserId]?.user?.firstName}{" "}
-                                {membersGroupById?.[request.requestedBy]?.user?.email}){" "}
+                                {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 { useMemo, useState } from "react";
-import { faCheckCircle,faChevronDown, faFileShield, faPlus } from "@fortawesome/free-solid-svg-icons";
+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({
+  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({
+  );
+  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 })) || []),
+    ...(accessPolicies?.map((policy) => ({ ...policy, policyType: PolicyType.AccessPolicy })) ||
-    ...(secretPolicies?.map(policy => ({ ...policy, policyType: PolicyType.ChangePolicy })) || [])
+      []),
+    ...(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 { data: members } = useGetWorkspaceUsers(workspaceId, true);
-  const { policies, isLoading: isPoliciesLoading } = useApprovalPolicies(permission, currentWorkspace);
+  const { policies, isLoading: isPoliciesLoading } = useApprovalPolicies(
+    permission,
+    currentWorkspace
+  );
 
   const [filterType, setFilterType] = useState<string | null>(null);
 
   const filteredPolicies = useMemo(() => {
-    return filterType
+    return filterType ? policies.filter((policy) => policy.policyType === filterType) : policies;
-      ? 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"
+                      className="text-xs font-semibold uppercase text-bunker-300"
-                      rightIcon={<FontAwesomeIcon icon={faChevronDown} size="sm" className="ml-2" />}
+                      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

@@ -40,19 +40,19 @@ type Props = {
 };
 
 const formSchema = z
-.object({
+  .object({
     environment: z.string(),
     name: z.string().optional(),
     secretPath: z.string().optional(),
     approvals: z.number().min(1),
-	approvers: z.string().array().min(1),
+    approverUserIds: z.string().array().min(1),
     policyType: z.nativeEnum(PolicyType),
     enforcementLevel: z.nativeEnum(EnforcementLevel)
-})
+  })
-.refine((data) => data.approvals <= data.approvers.length, {
+  .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>;
 
@@ -71,11 +71,14 @@ export const AccessPolicyForm = ({
     formState: { isSubmitting }
   } = useForm<TFormSchema>({
     resolver: zodResolver(formSchema),
-		values: editValues ? { 
+    values: editValues
+      ? {
           ...editValues,
           environment: editValues.environment.slug,
-			approvers: editValues?.userApprovers?.map((user) => user.userId) || editValues?.approvers
+          approverUserIds:
-		} : undefined
+            editValues?.userApprovers?.map((user) => user.userId) || editValues?.approvers
+        }
+      : undefined
   });
   const { currentWorkspace } = useWorkspace();
 
@@ -104,6 +107,26 @@ export const AccessPolicyForm = ({
           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
@@ -178,7 +201,6 @@ export const AccessPolicyForm = ({
               control={control}
               name="policyType"
               defaultValue={PolicyType.ChangePolicy}
-						
               render={({ field: { value, onChange }, fieldState: { error } }) => (
                 <FormControl
                   label="Policy Type"
@@ -208,7 +230,11 @@ export const AccessPolicyForm = ({
               control={control}
               name="name"
               render={({ field, fieldState: { error } }) => (
-							<FormControl label="Policy Name" isError={Boolean(error)} errorText={error?.message}>
+                <FormControl
+                  label="Policy Name"
+                  isError={Boolean(error)}
+                  errorText={error?.message}
+                >
                   <Input {...field} value={field.value || ""} />
                 </FormControl>
               )}
@@ -247,14 +273,18 @@ export const AccessPolicyForm = ({
               control={control}
               name="secretPath"
               render={({ field, fieldState: { error } }) => (
-							<FormControl label="Secret Path" isError={Boolean(error)} errorText={error?.message}>
+                <FormControl
+                  label="Secret Path"
+                  isError={Boolean(error)}
+                  errorText={error?.message}
+                >
                   <Input {...field} value={field.value || ""} />
                 </FormControl>
               )}
             />
             <Controller
               control={control}
-						name="approvers"
+              name="approverUserIds"
               render={({ field: { value, onChange }, fieldState: { error } }) => (
                 <FormControl
                   label="Required Approvers"
@@ -277,15 +307,17 @@ export const AccessPolicyForm = ({
                       <DropdownMenuLabel>
                         Select members that are allowed to approve requests
                       </DropdownMenuLabel>
-							{members.map(({ id, user }) => {
+                      {members.map(({ user }) => {
-								const userId = watch("policyType") === PolicyType.ChangePolicy ? user.id : id;
+                        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]
+                                isChecked
+                                  ? value?.filter((el: string) => el !== userId)
+                                  : [...(value || []), userId]
                               );
                             }}
                             key={`create-policy-members-${userId}`}
@@ -343,7 +375,11 @@ export const AccessPolicyForm = ({
                   >
                     {Object.values(EnforcementLevel).map((level) => {
                       return (
-											<SelectItem value={level} key={`enforcement-level-${level}`} className="text-xs">
+                        <SelectItem
+                          value={level}
+                          key={`enforcement-level-${level}`}
+                          className="text-xs"
+                        >
                           {formatEnforcementLevel(level)}
                         </SelectItem>
                       );
@@ -366,4 +402,3 @@ export const AccessPolicyForm = ({
     </Modal>
   );
 };
-