Merge pull request #3628 from Infisical/ENG-2800

feat(policies): Specific permission for bypassing policy

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

@@ -29,13 +29,13 @@ import {
   Tr
 } from "@app/components/v2";
 import {
-  ProjectPermissionActions,
   ProjectPermissionSub,
   TProjectPermission,
   useProjectPermission,
   useSubscription,
   useWorkspace
 } from "@app/context";
+import { ProjectPermissionApprovalActions } from "@app/context/ProjectPermissionContext/types";
 import { usePopUp } from "@app/hooks";
 import {
   useDeleteAccessApprovalPolicy,
@@ -61,8 +61,10 @@ const useApprovalPolicies = (permission: TProjectPermission, currentWorkspace?:
       projectSlug: currentWorkspace?.slug as string,
       options: {
         enabled:
-          permission.can(ProjectPermissionActions.Read, ProjectPermissionSub.SecretApproval) &&
-          !!currentWorkspace?.slug
+          permission.can(
+            ProjectPermissionApprovalActions.Read,
+            ProjectPermissionSub.SecretApproval
+          ) && !!currentWorkspace?.slug
       }
     }
   );
@@ -71,8 +73,10 @@ const useApprovalPolicies = (permission: TProjectPermission, currentWorkspace?:
       workspaceId: currentWorkspace?.id as string,
       options: {
         enabled:
-          permission.can(ProjectPermissionActions.Read, ProjectPermissionSub.SecretApproval) &&
-          !!currentWorkspace?.id
+          permission.can(
+            ProjectPermissionApprovalActions.Read,
+            ProjectPermissionSub.SecretApproval
+          ) && !!currentWorkspace?.id
       }
     }
   );
@@ -160,7 +164,7 @@ export const ApprovalPolicyList = ({ workspaceId }: IProps) => {
         </div>
         <div>
           <ProjectPermissionCan
-            I={ProjectPermissionActions.Create}
+            I={ProjectPermissionApprovalActions.Create}
             a={ProjectPermissionSub.SecretApproval}
           >
             {(isAllowed) => (

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

@@ -126,8 +126,6 @@ export const AccessPolicyForm = ({
 
   const policyName = policyDetails[watch("policyType")]?.name || "Policy";
 
-  const approversRequired = watch("approvals") || 1;
-
   const handleCreatePolicy = async ({
     environment,
     groupApprovers,
@@ -303,73 +301,6 @@ export const AccessPolicyForm = ({
                   </FormControl>
                 )}
               />
-              <Controller
-                control={control}
-                name="enforcementLevel"
-                defaultValue={EnforcementLevel.Hard}
-                render={({ field, fieldState: { error } }) => (
-                  <FormControl
-                    label="Enforcement Level"
-                    isError={Boolean(error)}
-                    errorText={error?.message}
-                    tooltipText={
-                      <>
-                        <p>
-                          Determines the level of enforcement for required approvers of a request:
-                        </p>
-                        <p className="mt-2">
-                          <span className="font-bold">Hard</span> enforcement requires at least{" "}
-                          <span className="font-bold"> {approversRequired}</span> approver(s) to
-                          approve the request.`
-                        </p>
-                        <p className="mt-2">
-                          <span className="font-bold">Soft</span> enforcement At least{" "}
-                          <span className="font-bold">{approversRequired}</span> approver(s) must
-                          approve the request; however, the requester can bypass approval
-                          requirements in emergencies.
-                        </p>
-                      </>
-                    }
-                  >
-                    <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}`}>
-                            <span className="capitalize">{level}</span>
-                          </SelectItem>
-                        );
-                      })}
-                    </Select>
-                  </FormControl>
-                )}
-              />
-
-              <Controller
-                control={control}
-                name="environment"
-                render={({ field: { value, onChange }, fieldState: { error } }) => (
-                  <FormControl
-                    label="Environment"
-                    isRequired
-                    isError={Boolean(error)}
-                    errorText={error?.message}
-                  >
-                    <FilterableSelect
-                      isDisabled={isEditMode}
-                      value={value}
-                      onChange={onChange}
-                      placeholder="Select environment..."
-                      options={environments}
-                      getOptionValue={(option) => option.slug}
-                      getOptionLabel={(option) => option.name}
-                    />
-                  </FormControl>
-                )}
-              />
               <Controller
                 control={control}
                 name="secretPath"
@@ -386,6 +317,28 @@ export const AccessPolicyForm = ({
                 )}
               />
             </div>
+            <Controller
+              control={control}
+              name="environment"
+              render={({ field: { value, onChange }, fieldState: { error } }) => (
+                <FormControl
+                  label="Environment"
+                  isRequired
+                  isError={Boolean(error)}
+                  errorText={error?.message}
+                >
+                  <FilterableSelect
+                    isDisabled={isEditMode}
+                    value={value}
+                    onChange={onChange}
+                    placeholder="Select environment..."
+                    options={environments}
+                    getOptionValue={(option) => option.slug}
+                    getOptionLabel={(option) => option.name}
+                  />
+                </FormControl>
+              )}
+            />
             <div className="mb-2">
               <p>Approvers</p>
               <p className="font-inter text-xs text-mineshaft-300 opacity-90">
@@ -465,6 +418,29 @@ export const AccessPolicyForm = ({
                 </FormControl>
               )}
             />
+            <Controller
+              control={control}
+              name="enforcementLevel"
+              defaultValue={EnforcementLevel.Hard}
+              render={({ field: { value, onChange }, fieldState: { error } }) => (
+                <FormControl
+                  label="Bypass Approvals"
+                  isError={Boolean(error)}
+                  errorText={error?.message}
+                >
+                  <Switch
+                    id="bypass-approvals"
+                    thumbClassName="bg-mineshaft-800"
+                    isChecked={value === EnforcementLevel.Soft}
+                    onCheckedChange={(v) =>
+                      onChange(v ? EnforcementLevel.Soft : EnforcementLevel.Hard)
+                    }
+                  >
+                    Allow request creators to bypass policy in break-glass situations
+                  </Switch>
+                </FormControl>
+              )}
+            />
             <div className="mt-8 flex items-center space-x-4">
               <Button type="submit" isLoading={isSubmitting} isDisabled={isSubmitting}>
                 Save

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

@@ -14,7 +14,8 @@ import {
   Tr
 } from "@app/components/v2";
 import { Badge } from "@app/components/v2/Badge";
-import { ProjectPermissionActions, ProjectPermissionSub } from "@app/context";
+import { ProjectPermissionSub } from "@app/context";
+import { ProjectPermissionApprovalActions } from "@app/context/ProjectPermissionContext/types";
 import { getMemberLabel } from "@app/helpers/members";
 import { policyDetails } from "@app/helpers/policies";
 import { Approver } from "@app/hooks/api/accessApproval/types";
@@ -117,7 +118,7 @@ export const ApprovalPolicyRow = ({
           </DropdownMenuTrigger>
           <DropdownMenuContent align="center" className="min-w-[100%] p-1">
             <ProjectPermissionCan
-              I={ProjectPermissionActions.Edit}
+              I={ProjectPermissionApprovalActions.Edit}
               a={ProjectPermissionSub.SecretApproval}
             >
               {(isAllowed) => (
@@ -136,7 +137,7 @@ export const ApprovalPolicyRow = ({
               )}
             </ProjectPermissionCan>
             <ProjectPermissionCan
-              I={ProjectPermissionActions.Delete}
+              I={ProjectPermissionApprovalActions.Delete}
               a={ProjectPermissionSub.SecretApproval}
             >
               {(isAllowed) => (

frontend/src/pages/secret-manager/SecretApprovalsPage/components/SecretApprovalRequest/components/SecretApprovalRequestAction.tsx

@@ -14,6 +14,11 @@ import { twMerge } from "tailwind-merge";
 
 import { createNotification } from "@app/components/notifications";
 import { Button, Checkbox, FormControl, Input } from "@app/components/v2";
+import {
+  ProjectPermissionApprovalActions,
+  ProjectPermissionSub,
+  useProjectPermission
+} from "@app/context";
 import {
   usePerformSecretApprovalRequestMerge,
   useUpdateSecretApprovalRequestStatus
@@ -49,6 +54,12 @@ export const SecretApprovalRequestAction = ({
   const { mutateAsync: updateSecretStatusChange, isPending: isStatusChanging } =
     useUpdateSecretApprovalRequestStatus();
 
+  const { permission } = useProjectPermission();
+  const canBypassApprovalPermission = permission.can(
+    ProjectPermissionApprovalActions.AllowChangeBypass,
+    ProjectPermissionSub.SecretApproval
+  );
+
   const [byPassApproval, setByPassApproval] = useState(false);
   const [bypassReason, setBypassReason] = useState("");
 
@@ -113,7 +124,7 @@ export const SecretApprovalRequestAction = ({
               At least {approvals} approving review required
               {Boolean(statusChangeByEmail) && `. Reopened by ${statusChangeByEmail}`}
             </span>
-            {isSoftEnforcement && !isMergable && (
+            {isSoftEnforcement && !isMergable && canBypassApprovalPermission && (
               <div className="mt-2 flex flex-col space-y-2">
                 <Checkbox
                   onCheckedChange={(checked) => setByPassApproval(checked === true)}