Merge pull request #2458 from meetcshah19/meet/eng-1443-add-groups-as-eligible-approvers

feat: allow access approvals with user groups

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

@@ -11,14 +11,23 @@ export type TAccessApprovalPolicy = {
   workspace: string;
   environment: WorkspaceEnv;
   projectId: string;
-  approvers: string[];
   policyType: PolicyType;
   approversRequired: boolean;
   enforcementLevel: EnforcementLevel;
   updatedAt: Date;
-  userApprovers?: { userId: string }[];
+  approvers?: Approver[];
 };
 
+export enum ApproverType{
+  User = "user",
+  Group = "group"
+}
+
+export type Approver ={
+  id: string;
+  type: ApproverType;
+}
+
 export type TAccessApprovalRequest = {
   id: string;
   policyId: string;
@@ -130,7 +139,7 @@ export type TCreateAccessPolicyDTO = {
   projectSlug: string;
   name?: string;
   environment: string;
-  approvers?: string[];
+  approvers?: Approver[];
   approvals?: number;
   secretPath?: string;
   enforcementLevel?: EnforcementLevel;
@@ -139,7 +148,7 @@ export type TCreateAccessPolicyDTO = {
 export type TUpdateAccessPolicyDTO = {
   id: string;
   name?: string;
-  approvers?: string[];
+  approvers?: Approver[];
   secretPath?: string;
   environment?: string;
   approvals?: number;

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

@@ -9,11 +9,21 @@ export type TSecretApprovalPolicy = {
   environment: WorkspaceEnv;
   secretPath?: string;
   approvals: number;
-  userApprovers: { userId: string }[];
+  approvers: Approver[];
   updatedAt: Date;
   enforcementLevel: EnforcementLevel;
 };
 
+export enum ApproverType{
+  User = "user",
+  Group = "group"
+}
+
+export type Approver ={
+  id: string;
+  type: ApproverType;
+}
+
 export type TGetSecretApprovalPoliciesDTO = {
   workspaceId: string;
 };
@@ -29,7 +39,7 @@ export type TCreateSecretPolicyDTO = {
   name?: string;
   environment: string;
   secretPath?: string | null;
-  approvers?: string[];
+  approvers?: Approver[];
   approvals?: number;
   enforcementLevel: EnforcementLevel;
 };
@@ -37,7 +47,7 @@ export type TCreateSecretPolicyDTO = {
 export type TUpdateSecretPolicyDTO = {
   id: string;
   name?: string;
-  approvers?: string[];
+  approvers?: Approver[];
   secretPath?: string | null;
   approvals?: number;
   enforcementLevel?: EnforcementLevel;

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

@@ -41,7 +41,8 @@ import {
   useDeleteAccessApprovalPolicy,
   useDeleteSecretApprovalPolicy,
   useGetSecretApprovalPolicies,
-  useGetWorkspaceUsers
+  useGetWorkspaceUsers,
+  useListWorkspaceGroups
 } from "@app/hooks/api";
 import { useGetAccessApprovalPolicies } from "@app/hooks/api/accessApproval/queries";
 import { PolicyType } from "@app/hooks/api/policies/enums";
@@ -102,6 +103,8 @@ export const ApprovalPolicyList = ({ workspaceId }: IProps) => {
   const { currentWorkspace } = useWorkspace();
 
   const { data: members } = useGetWorkspaceUsers(workspaceId, true);
+  const { data: groups } = useListWorkspaceGroups(currentWorkspace?.slug || "");
+
   const { policies, isLoading: isPoliciesLoading } = useApprovalPolicies(
     permission,
     currentWorkspace
@@ -186,6 +189,7 @@ export const ApprovalPolicyList = ({ workspaceId }: IProps) => {
               <Th>Environment</Th>
               <Th>Secret Path</Th>
               <Th>Eligible Approvers</Th>
+              <Th>Eligible Group Approvers</Th>
               <Th>Approval Required</Th>
               <Th>
                 <DropdownMenu>
@@ -257,6 +261,7 @@ export const ApprovalPolicyList = ({ workspaceId }: IProps) => {
                   workspaceId={workspaceId}
                   key={policy.id}
                   members={members}
+                  groups={groups}
                   onEdit={() => handlePopUpOpen("policyForm", policy)}
                   onDelete={() => handlePopUpOpen("deletePolicy", policy)}
                 />

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

@@ -22,12 +22,12 @@ import {
 } from "@app/components/v2";
 import { useWorkspace } from "@app/context";
 import { policyDetails } from "@app/helpers/policies";
-import { useCreateSecretApprovalPolicy, useUpdateSecretApprovalPolicy } from "@app/hooks/api";
+import { useCreateSecretApprovalPolicy, useListWorkspaceGroups, useUpdateSecretApprovalPolicy } from "@app/hooks/api";
 import {
   useCreateAccessApprovalPolicy,
   useUpdateAccessApprovalPolicy
 } from "@app/hooks/api/accessApproval";
-import { TAccessApprovalPolicy } from "@app/hooks/api/accessApproval/types";
+import { ApproverType, TAccessApprovalPolicy } from "@app/hooks/api/accessApproval/types";
 import { EnforcementLevel, PolicyType } from "@app/hooks/api/policies/enums";
 import { TWorkspaceUser } from "@app/hooks/api/users/types";
 
@@ -45,13 +45,13 @@ const formSchema = z
     name: z.string().optional(),
     secretPath: z.string().optional(),
     approvals: z.number().min(1),
-    approvers: z.string().array().min(1),
+    approvers: z.object({type: z.nativeEnum(ApproverType), id: z.string()}).array().min(1).default([]),
     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."
+  .refine((data) => data.approvers, {
+    path: ["approvers"],
+    message: "At least one approver should be provided."
   });
 
 type TFormSchema = z.infer<typeof formSchema>;
@@ -75,11 +75,13 @@ export const AccessPolicyForm = ({
       ? {
           ...editValues,
           environment: editValues.environment.slug,
-          approvers: editValues?.userApprovers?.map((user) => user.userId) || editValues?.approvers
+          approvers: editValues?.approvers || [],
+          approvals: editValues?.approvals
         }
       : undefined
   });
   const { currentWorkspace } = useWorkspace();
+  const { data: groups } = useListWorkspaceGroups(projectSlug);
 
   const environments = currentWorkspace?.environments || [];
   const isEditMode = Boolean(editValues);
@@ -266,8 +268,7 @@ export const AccessPolicyForm = ({
               name="approvers"
               render={({ field: { value, onChange }, fieldState: { error } }) => (
                 <FormControl
-                  label="Required Approvers"
-                  isRequired
+                  label="Required User Approvers"
                   isError={Boolean(error)}
                   errorText={error?.message}
                 >
@@ -288,15 +289,15 @@ export const AccessPolicyForm = ({
                       </DropdownMenuLabel>
                       {members.map(({ user }) => {
                         const { id: userId } = user;
-                        const isChecked = value?.includes(userId);
+                        const isChecked = value?.filter((el: {id: string, type: ApproverType}) => el.id === userId && el.type === ApproverType.User).length > 0;
                         return (
                           <DropdownMenuItem
                             onClick={(evt) => {
                               evt.preventDefault();
                               onChange(
                                 isChecked
-                                  ? value?.filter((el: string) => el !== userId)
-                                  : [...(value || []), userId]
+                                  ? value?.filter((el: {id: string, type: ApproverType}) => el.id !== userId && el.type !== ApproverType.User)
+                                  : [...(value || []), {id:userId, type: ApproverType.User}]
                               );
                             }}
                             key={`create-policy-members-${userId}`}
@@ -312,6 +313,57 @@ export const AccessPolicyForm = ({
                 </FormControl>
               )}
             />
+            <Controller
+              control={control}
+              name="approvers"
+              render={({ field: { value, onChange }, fieldState: { error } }) => (
+                <FormControl
+                  label="Required Group Approvers"
+                  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 groups that are allowed to approve requests
+                      </DropdownMenuLabel>
+                      {groups && groups.map(({ group }) => {
+                        const { id } = group;
+                        const isChecked = value?.includes({id, type: ApproverType.Group});
+
+                        return (
+                          <DropdownMenuItem
+                            onClick={(evt) => {
+                              evt.preventDefault();
+                              onChange(
+                                isChecked
+                                  ? value?.filter((el: {id: string, type: ApproverType}) => el.id !== id && el.type !== ApproverType.Group)
+                                  : [...(value || []), {id, type: ApproverType.Group}]
+                              );
+                            }}
+                            key={`create-policy-members-${id}`}
+                            iconPos="right"
+                            icon={isChecked && <FontAwesomeIcon icon={faCheckCircle} />}
+                          >
+                            {group.name}
+                          </DropdownMenuItem>
+                        );
+                      })}
+                    </DropdownMenuContent>
+                  </DropdownMenu>
+                </FormControl>
+              )}
+            />
             <Controller
               control={control}
               name="approvals"

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

@@ -18,6 +18,8 @@ import { Badge } from "@app/components/v2/Badge";
 import { ProjectPermissionActions, ProjectPermissionSub, useProjectPermission } from "@app/context";
 import { policyDetails } from "@app/helpers/policies";
 import { useUpdateAccessApprovalPolicy, useUpdateSecretApprovalPolicy } from "@app/hooks/api";
+import { Approver, ApproverType } from "@app/hooks/api/accessApproval/types";
+import { TGroupMembership } from "@app/hooks/api/groups/types";
 import { EnforcementLevel, PolicyType } from "@app/hooks/api/policies/enums";
 import { WorkspaceEnv } from "@app/hooks/api/types";
 import { TWorkspaceUser } from "@app/hooks/api/users/types";
@@ -29,8 +31,7 @@ interface IPolicy {
   projectId?: string;
   secretPath?: string;
   approvals: number;
-  approvers?: string[];
-  userApprovers?: { userId: string }[];
+  approvers?: Approver[];
   updatedAt: Date;
   policyType: PolicyType;
   enforcementLevel: EnforcementLevel;
@@ -39,6 +40,7 @@ interface IPolicy {
 type Props = {
   policy: IPolicy;
   members?: TWorkspaceUser[];
+  groups?: TGroupMembership[];
   projectSlug: string;
   workspaceId: string;
   onEdit: () => void;
@@ -48,12 +50,14 @@ type Props = {
 export const ApprovalPolicyRow = ({
   policy,
   members = [],
+  groups = [],
   projectSlug,
   workspaceId,
   onEdit,
   onDelete
 }: Props) => {
-  const [selectedApprovers, setSelectedApprovers] = useState<string[]>(policy.userApprovers?.map(({ userId }) => userId) || policy.approvers || []);
+  const [selectedApprovers, setSelectedApprovers] = useState<Approver[]>(policy.approvers?.filter((approver) => approver.type === ApproverType.User) || []);
+  const [selectedGroupApprovers, setSelectedGroupApprovers] = useState<Approver[]>(policy.approvers?.filter((approver) => approver.type === ApproverType.Group) || []);
   const { mutate: updateAccessApprovalPolicy, isLoading: isAccessApprovalPolicyLoading } = useUpdateAccessApprovalPolicy();
   const { mutate: updateSecretApprovalPolicy, isLoading: isSecretApprovalPolicyLoading } = useUpdateSecretApprovalPolicy();
   const isLoading = isAccessApprovalPolicyLoading || isSecretApprovalPolicyLoading;
@@ -74,28 +78,33 @@ export const ApprovalPolicyRow = ({
                   {
                     projectSlug,
                     id: policy.id,
-                    approvers: selectedApprovers
+                    approvers: selectedApprovers.concat(selectedGroupApprovers),
                   },
-                  { onSettled: () => {} }
+                  {
+                    onError: () => {
+                      setSelectedApprovers(policy?.approvers?.filter((approver) => approver.type === ApproverType.User) || []);
+                    }
+                  }
                 );
               } else {
                 updateSecretApprovalPolicy(
                   {
                     workspaceId,
                     id: policy.id,
-                    approvers: selectedApprovers
+                    approvers: selectedApprovers.concat(selectedGroupApprovers),
                   },
-                  { onSettled: () => {} }
+                  {
+                    onError: () => {
+                      setSelectedApprovers(policy?.approvers?.filter((approver) => approver.type === ApproverType.User) || []);
+                    }
+                  }
                 );
               }
             } else {
-              setSelectedApprovers(policy.policyType === PolicyType.ChangePolicy
-                ? policy?.userApprovers?.map(({ userId }) => userId) || []
-                : policy?.approvers || []
-              );
+              setSelectedApprovers(policy?.approvers?.filter((approver) => approver.type === ApproverType.User) || []);
             }
           }}
-      >
+        >
           <DropdownMenuTrigger
             asChild
             disabled={
@@ -116,15 +125,15 @@ export const ApprovalPolicyRow = ({
             <DropdownMenuLabel>
               Select members that are allowed to approve changes
             </DropdownMenuLabel>
-            {members?.map(({ id, user }) => {
-              const userId = policy.policyType === PolicyType.ChangePolicy ? user.id : id;
-              const isChecked = selectedApprovers.includes(userId);
+            {members?.map(({ user }) => {
+              const userId = user.id;
+              const isChecked = selectedApprovers?.filter((el: { id: string, type: ApproverType }) => el.id === userId && el.type === ApproverType.User).length > 0;
               return (
                 <DropdownMenuItem
                   onClick={(evt) => {
                     evt.preventDefault();
                     setSelectedApprovers((state) =>
-                      isChecked ? state.filter((el) => el !== userId) : [...state, userId]
+                      isChecked ? state.filter((el) => el.id !== userId || el.type !== ApproverType.User) : [...state, { id: userId, type: ApproverType.User }]
                     );
                   }}
                   key={`create-policy-members-${userId}`}
@@ -138,6 +147,80 @@ export const ApprovalPolicyRow = ({
           </DropdownMenuContent>
         </DropdownMenu>
       </Td>
+      <Td>
+        <DropdownMenu
+          onOpenChange={(isOpen) => {
+            if (!isOpen) {
+              if (policy.policyType === PolicyType.AccessPolicy) {
+                updateAccessApprovalPolicy(
+                  {
+                    projectSlug,
+                    id: policy.id,
+                    approvers: selectedApprovers.concat(selectedGroupApprovers),
+                  },
+                  {
+                    onError: () => {
+                      setSelectedGroupApprovers(policy?.approvers?.filter((approver) => approver.type === ApproverType.Group) || []);
+                    }
+                  },
+                );
+              } else {
+                updateSecretApprovalPolicy(
+                  {
+                    workspaceId,
+                    id: policy.id,
+                    approvers: selectedApprovers.concat(selectedGroupApprovers),
+                  },
+                  {
+                    onError: () => {
+                      setSelectedGroupApprovers(policy?.approvers?.filter((approver) => approver.type === ApproverType.Group) || []);
+                    }
+                  }
+                );
+              }
+            } else {
+              setSelectedGroupApprovers(policy?.approvers?.filter((approver) => approver.type === ApproverType.Group) || []);
+            }
+          }}
+        >
+          <DropdownMenuTrigger asChild>
+            <Input
+              isReadOnly
+              value={selectedGroupApprovers?.length ? `${selectedGroupApprovers.length} selected` : "None"}
+              className="text-left"
+            />
+          </DropdownMenuTrigger>
+          <DropdownMenuContent
+            style={{ width: "var(--radix-dropdown-menu-trigger-width)" }}
+            align="start"
+          >
+            <DropdownMenuLabel>
+              Select groups that are allowed to approve requests
+            </DropdownMenuLabel>
+            {groups && groups.map(({ group }) => {
+              const { id } = group;
+              const isChecked = selectedGroupApprovers?.filter((el: { id: string, type: ApproverType }) => el.id === id && el.type === ApproverType.Group).length > 0;
+              return (
+                <DropdownMenuItem
+                  onClick={(evt) => {
+                    evt.preventDefault();
+                    setSelectedGroupApprovers(
+                      isChecked
+                        ? selectedGroupApprovers?.filter((el) => el.id !== id || el.type !== ApproverType.Group)
+                        : [...(selectedGroupApprovers || []), { id, type: ApproverType.Group }]
+                    );
+                  }}
+                  key={`create-policy-groups-${id}`}
+                  iconPos="right"
+                  icon={isChecked && <FontAwesomeIcon icon={faCheckCircle} />}
+                >
+                  {group.name}
+                </DropdownMenuItem>
+              );
+            })}
+          </DropdownMenuContent>
+        </DropdownMenu>
+      </Td>
       <Td>{policy.approvals}</Td>
       <Td>
         <Badge className={policyDetails[policy.policyType].className}>