Merge branch 'main' into fix/cli-jwt-issue

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

@@ -35,7 +35,7 @@ export type Approver = {
   id: string;
   type: ApproverType;
   sequence?: number;
-  approvals?: number;
+  approvalsRequired?: number;
 };
 
 export type Bypasser = {

frontend/src/pages/secret-manager/SecretApprovalsPage/components/AccessApprovalRequest/components/ReviewAccessModal.tsx

@@ -185,7 +185,7 @@ export const ReviewAccessRequestModal = ({
           return acc;
         }
 
-        const approvals = curr.approvals || policy.approvals;
+        const approvals = curr.approvalsRequired || policy.approvals;
         const sequence = curr.sequence || 1;
 
         acc.push(

frontend/src/pages/secret-manager/SecretApprovalsPage/components/ApprovalPolicyList/ApprovalPolicyList.tsx

@@ -19,6 +19,8 @@ import {
   DropdownMenuLabel,
   DropdownMenuTrigger,
   EmptyState,
+  Modal,
+  ModalContent,
   Table,
   TableContainer,
   TableSkeleton,
@@ -264,6 +266,19 @@ export const ApprovalPolicyList = ({ workspaceId }: IProps) => {
           </TBody>
         </Table>
       </TableContainer>
+      <Modal
+        isOpen={popUp.policyForm.isOpen}
+        onOpenChange={(isOpen) => handlePopUpToggle("policyForm", isOpen)}
+      >
+        <ModalContent
+          className="max-w-3xl"
+          title={
+            popUp.policyForm.data
+              ? `Edit ${popUp?.policyForm?.data?.name || "Policy"}`
+              : "Create Policy"
+          }
+          id="policy-form"
+        >
           <AccessPolicyForm
             projectId={currentWorkspace.id}
             projectSlug={currentWorkspace.slug}
@@ -272,6 +287,8 @@ export const ApprovalPolicyList = ({ workspaceId }: IProps) => {
             members={members}
             editValues={popUp.policyForm.data as TAccessApprovalPolicy}
           />
+        </ModalContent>
+      </Modal>
       <DeleteActionModal
         isOpen={popUp.deletePolicy.isOpen}
         deleteKey="remove"

frontend/src/pages/secret-manager/SecretApprovalsPage/components/ApprovalPolicyList/components/AccessPolicyModal.tsx

@@ -1,4 +1,4 @@
-import { useEffect, useMemo, useRef, useState } from "react";
+import { useEffect, useMemo, useState } from "react";
 import { Controller, useFieldArray, useForm } from "react-hook-form";
 import { faGripVertical, faTrash } from "@fortawesome/free-solid-svg-icons";
 import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
@@ -13,8 +13,6 @@ import {
   FormControl,
   IconButton,
   Input,
-  Modal,
-  ModalContent,
   Select,
   SelectItem,
   Switch,
@@ -122,7 +120,6 @@ export const AccessPolicyForm = ({
 }: Props) => {
   const [draggedItem, setDraggedItem] = useState<number | null>(null);
   const [dragOverItem, setDragOverItem] = useState<number | null>(null);
-  const modalContainer = useRef<HTMLDivElement>(null);
   const {
     control,
     handleSubmit,
@@ -153,15 +150,13 @@ export const AccessPolicyForm = ({
               .map(({ id, type }) => ({ id, type: type as BypasserType.Group })) || [],
           approvals: editValues?.approvals,
           allowedSelfApprovals: editValues?.allowedSelfApprovals,
-          sequenceApprovers: editValues.approvers
+          sequenceApprovers: editValues.approvers?.reduce(
-            ?.sort((a, b) => (a?.sequence || 0) - (b?.sequence || 0))
-            .reduce(
             (acc, curr) => {
               if (acc.length && acc[acc.length - 1].sequence === curr.sequence) {
                 acc[acc.length - 1][curr.type]?.push(curr);
                 return acc;
               }
-                const approvals = curr.approvals || editValues.approvals;
+              const approvals = curr.approvalsRequired || editValues.approvals;
               acc.push(
                 curr.type === ApproverType.User
                   ? {
@@ -178,9 +173,11 @@ export const AccessPolicyForm = ({
           )
         } as TFormSchema)
       : undefined,
-    defaultValues: {
+    defaultValues: !editValues
+      ? {
           sequenceApprovers: [{ approvals: 1 }]
         }
+      : undefined
   });
   const sequenceApproversFieldArray = useFieldArray({
     control,
@@ -204,7 +201,6 @@ export const AccessPolicyForm = ({
   const { mutateAsync: createSecretApprovalPolicy } = useCreateSecretApprovalPolicy();
   const { mutateAsync: updateSecretApprovalPolicy } = useUpdateSecretApprovalPolicy();
 
-  const policyName = policyDetails[watch("policyType")]?.name || "Policy";
   const enforcementLevel = watch("enforcementLevel");
 
   const formUserBypassers = watch("userBypassers");
@@ -391,14 +387,7 @@ export const AccessPolicyForm = ({
     setDraggedItem(null);
     setDragOverItem(null);
   };
-
   return (
-    <Modal isOpen={isOpen} onOpenChange={onToggle}>
-      <ModalContent
-        className="max-w-3xl"
-        ref={modalContainer}
-        title={isEditMode ? `Edit ${policyName}` : "Create Policy"}
-      >
     <div className="flex flex-col space-y-3">
       <form onSubmit={handleSubmit(handleFormSubmit)}>
         <div className="flex items-center gap-x-3">
@@ -583,7 +572,7 @@ export const AccessPolicyForm = ({
                           className="flex-grow"
                         >
                           <FilterableSelect
-                                menuPortalTarget={modalContainer.current}
+                            menuPortalTarget={document.getElementById("policy-form")}
                             menuPlacement="top"
                             isMulti
                             placeholder="Select members..."
@@ -613,7 +602,7 @@ export const AccessPolicyForm = ({
                           className="flex-grow"
                         >
                           <FilterableSelect
-                                menuPortalTarget={modalContainer.current}
+                            menuPortalTarget={document.getElementById("policy-form")}
                             menuPlacement="top"
                             isMulti
                             placeholder="Select groups..."
@@ -697,8 +686,7 @@ export const AccessPolicyForm = ({
                     options={groupOptions}
                     getOptionValue={(option) => option.id}
                     getOptionLabel={(option) =>
-                          groups?.find(({ group }) => group.id === option.id)?.group.name ??
+                      groups?.find(({ group }) => group.id === option.id)?.group.name ?? option.id
-                          option.id
                     }
                     value={value}
                     onChange={onChange}
@@ -713,11 +701,7 @@ export const AccessPolicyForm = ({
           name="allowedSelfApprovals"
           defaultValue
           render={({ field: { value, onChange }, fieldState: { error } }) => (
-                <FormControl
+            <FormControl label="Self Approvals" isError={Boolean(error)} errorText={error?.message}>
-                  label="Self Approvals"
-                  isError={Boolean(error)}
-                  errorText={error?.message}
-                >
               <Switch
                 id="self-approvals"
                 thumbClassName="bg-mineshaft-800"
@@ -744,9 +728,7 @@ export const AccessPolicyForm = ({
                 id="bypass-approvals"
                 thumbClassName="bg-mineshaft-800"
                 isChecked={value === EnforcementLevel.Soft}
-                    onCheckedChange={(v) =>
+                onCheckedChange={(v) => onChange(v ? EnforcementLevel.Soft : EnforcementLevel.Hard)}
-                      onChange(v ? EnforcementLevel.Soft : EnforcementLevel.Hard)
-                    }
               >
                 Allow certain users to bypass policy in break-glass situations
               </Switch>
@@ -802,8 +784,7 @@ export const AccessPolicyForm = ({
                       options={bypasserGroupOptions}
                       getOptionValue={(option) => option.id}
                       getOptionLabel={(option) =>
-                            groups?.find(({ group }) => group.id === option.id)?.group.name ??
+                        groups?.find(({ group }) => group.id === option.id)?.group.name ?? option.id
-                            option.id
                       }
                       value={value}
                       onChange={onChange}
@@ -830,7 +811,5 @@ export const AccessPolicyForm = ({
         </div>
       </form>
     </div>
-      </ModalContent>
-    </Modal>
   );
 };

frontend/src/pages/secret-manager/SecretApprovalsPage/components/ApprovalPolicyList/components/ApprovalPolicyRow.tsx

@@ -59,11 +59,11 @@ export const ApprovalPolicyRow = ({
     const sortedSteps = policy.approvers?.sort((a, b) => (a?.sequence || 0) - (b?.sequence || 0));
     const entityInSameSequence = sortedSteps?.reduce(
       (acc, curr) => {
-        if (acc.length && acc[acc.length - 1].sequence === curr.sequence) {
+        if (acc.length && acc[acc.length - 1].sequence === (curr.sequence || 1)) {
           acc[acc.length - 1][curr.type]?.push(curr);
           return acc;
         }
-        const approvals = curr.approvals || policy.approvals;
+        const approvals = curr.approvalsRequired || policy.approvals;
         acc.push(
           curr.type === ApproverType.User
             ? { user: [curr], group: [], sequence: 1, approvals }