Merge branch 'main' into fix/accessTreeImprovements

frontend/src/helpers/platform.ts

@@ -1,4 +1,5 @@
 export const isInfisicalCloud = () =>
   window.location.origin.includes("https://app.infisical.com") ||
   window.location.origin.includes("https://us.infisical.com") ||
-  window.location.origin.includes("https://eu.infisical.com");
+  window.location.origin.includes("https://eu.infisical.com") ||
+  window.location.origin.includes("https://gamma.infisical.com");

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

@@ -23,7 +23,8 @@ export const useCreateAccessApprovalPolicy = () => {
       approvers,
       name,
       secretPath,
-      enforcementLevel
+      enforcementLevel,
+      allowedSelfApprovals
     }) => {
       const { data } = await apiRequest.post("/api/v1/access-approvals/policies", {
         environment,
@@ -32,7 +33,8 @@ export const useCreateAccessApprovalPolicy = () => {
         approvers,
         secretPath,
         name,
-        enforcementLevel
+        enforcementLevel,
+        allowedSelfApprovals
       });
       return data;
     },
@@ -48,13 +50,22 @@ export const useUpdateAccessApprovalPolicy = () => {
   const queryClient = useQueryClient();
 
   return useMutation<object, object, TUpdateAccessPolicyDTO>({
-    mutationFn: async ({ id, approvers, approvals, name, secretPath, enforcementLevel }) => {
+    mutationFn: async ({
+      id,
+      approvers,
+      approvals,
+      name,
+      secretPath,
+      enforcementLevel,
+      allowedSelfApprovals
+    }) => {
       const { data } = await apiRequest.patch(`/api/v1/access-approvals/policies/${id}`, {
         approvals,
         approvers,
         secretPath,
         name,
-        enforcementLevel
+        enforcementLevel,
+        allowedSelfApprovals
       });
       return data;
     },

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

@@ -16,6 +16,7 @@ export type TAccessApprovalPolicy = {
   enforcementLevel: EnforcementLevel;
   updatedAt: Date;
   approvers?: Approver[];
+  allowedSelfApprovals: boolean;
 };
 
 export enum ApproverType {
@@ -71,6 +72,7 @@ export type TAccessApprovalRequest = {
     envId: string;
     enforcementLevel: EnforcementLevel;
     deletedAt: Date | null;
+    allowedSelfApprovals: boolean;
   };
 
   reviewers: {
@@ -144,6 +146,7 @@ export type TCreateAccessPolicyDTO = {
   approvals?: number;
   secretPath?: string;
   enforcementLevel?: EnforcementLevel;
+  allowedSelfApprovals: boolean;
 };
 
 export type TUpdateAccessPolicyDTO = {
@@ -154,6 +157,7 @@ export type TUpdateAccessPolicyDTO = {
   environment?: string;
   approvals?: number;
   enforcementLevel?: EnforcementLevel;
+  allowedSelfApprovals: boolean;
   // for invalidating list
   projectSlug: string;
 };

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

@@ -16,7 +16,8 @@ export const useCreateSecretApprovalPolicy = () => {
       approvers,
       secretPath,
       name,
-      enforcementLevel
+      enforcementLevel,
+      allowedSelfApprovals
     }) => {
       const { data } = await apiRequest.post("/api/v1/secret-approvals", {
         environment,
@@ -25,7 +26,8 @@ export const useCreateSecretApprovalPolicy = () => {
         approvers,
         secretPath,
         name,
-        enforcementLevel
+        enforcementLevel,
+        allowedSelfApprovals
       });
       return data;
     },
@@ -41,13 +43,22 @@ export const useUpdateSecretApprovalPolicy = () => {
   const queryClient = useQueryClient();
 
   return useMutation<object, object, TUpdateSecretPolicyDTO>({
-    mutationFn: async ({ id, approvers, approvals, secretPath, name, enforcementLevel }) => {
+    mutationFn: async ({
+      id,
+      approvers,
+      approvals,
+      secretPath,
+      name,
+      enforcementLevel,
+      allowedSelfApprovals
+    }) => {
       const { data } = await apiRequest.patch(`/api/v1/secret-approvals/${id}`, {
         approvals,
         approvers,
         secretPath,
         name,
-        enforcementLevel
+        enforcementLevel,
+        allowedSelfApprovals
       });
       return data;
     },

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

@@ -12,6 +12,7 @@ export type TSecretApprovalPolicy = {
   approvers: Approver[];
   updatedAt: Date;
   enforcementLevel: EnforcementLevel;
+  allowedSelfApprovals: boolean;
 };
 
 export enum ApproverType {
@@ -42,6 +43,7 @@ export type TCreateSecretPolicyDTO = {
   approvers?: Approver[];
   approvals?: number;
   enforcementLevel: EnforcementLevel;
+  allowedSelfApprovals: boolean;
 };
 
 export type TUpdateSecretPolicyDTO = {
@@ -50,6 +52,7 @@ export type TUpdateSecretPolicyDTO = {
   approvers?: Approver[];
   secretPath?: string | null;
   approvals?: number;
+  allowedSelfApprovals?: boolean;
   enforcementLevel?: EnforcementLevel;
   // for invalidating list
   workspaceId: string;

frontend/src/layouts/OrganizationLayout/ProductsSideBar/DefaultSideBar.tsx

@@ -12,17 +12,13 @@ export const DefaultSideBar = () => (
           </MenuItem>
         )}
       </Link>
-      {(window.location.origin.includes("https://app.infisical.com") ||
-        window.location.origin.includes("https://eu.infisical.com") ||
-        window.location.origin.includes("https://gamma.infisical.com")) && (
-        <Link to="/organization/billing">
-          {({ isActive }) => (
-            <MenuItem isSelected={isActive} icon="spinning-coin">
-              Usage & Billing
-            </MenuItem>
-          )}
-        </Link>
-      )}
+      <Link to="/organization/billing">
+        {({ isActive }) => (
+          <MenuItem isSelected={isActive} icon="spinning-coin">
+            Usage & Billing
+          </MenuItem>
+        )}
+      </Link>
     </MenuGroup>
     <MenuGroup title="Other">
       <Link to="/organization/access-management">

frontend/src/layouts/OrganizationLayout/components/MinimizedOrgSidebar/MinimizedOrgSidebar.tsx

@@ -370,17 +370,11 @@ export const MinimizedOrgSidebar = () => {
                       Gateways
                     </DropdownMenuItem>
                   </Link>
-                  {(window.location.origin.includes("https://app.infisical.com") ||
-                    window.location.origin.includes("https://eu.infisical.com") ||
-                    window.location.origin.includes("https://gamma.infisical.com")) && (
-                    <Link to="/organization/billing">
-                      <DropdownMenuItem
-                        icon={<FontAwesomeIcon className="w-3" icon={faMoneyBill} />}
-                      >
-                        Usage & Billing
-                      </DropdownMenuItem>
-                    </Link>
-                  )}
+                  <Link to="/organization/billing">
+                    <DropdownMenuItem icon={<FontAwesomeIcon className="w-3" icon={faMoneyBill} />}>
+                      Usage & Billing
+                    </DropdownMenuItem>
+                  </Link>
                   <Link to="/organization/audit-logs">
                     <DropdownMenuItem icon={<FontAwesomeIcon className="w-3" icon={faBook} />}>
                       Audit Logs

frontend/src/pages/organization/BillingPage/components/BillingCloudTab/PreviewSection.tsx

@@ -9,6 +9,7 @@ import {
   useOrganization,
   useSubscription
 } from "@app/context";
+import { isInfisicalCloud } from "@app/helpers/platform";
 import {
   useCreateCustomerPortalSession,
   useGetOrgPlanBillingInfo,
@@ -47,6 +48,9 @@ export const PreviewSection = () => {
   };
 
   function formatPlanSlug(slug: string) {
+    if (!slug) {
+      return "-";
+    }
     return slug.replace(/(\b[a-z])/g, (match) => match.toUpperCase()).replace(/-/g, " ");
   }
 
@@ -54,6 +58,11 @@ export const PreviewSection = () => {
     try {
       if (!subscription || !currentOrg) return;
 
+      if (!isInfisicalCloud()) {
+        window.open("https://infisical.com/pricing", "_blank");
+        return;
+      }
+
       if (!subscription.has_used_trial) {
         // direct user to start pro trial
         const url = await getOrgTrialUrl.mutateAsync({
@@ -71,6 +80,19 @@ export const PreviewSection = () => {
     }
   };
 
+  const getUpgradePlanLabel = () => {
+    if (!isInfisicalCloud()) {
+      return (
+        <div>
+          Go to Pricing
+          <FontAwesomeIcon icon={faArrowUpRightFromSquare} className="mb-[0.06rem] ml-1 text-xs" />
+        </div>
+      );
+    }
+
+    return !subscription.has_used_trial ? "Start Pro Free Trial" : "Upgrade Plan";
+  };
+
   return (
     <div>
       {subscription &&
@@ -97,7 +119,7 @@ export const PreviewSection = () => {
                     color="mineshaft"
                     isDisabled={!isAllowed}
                   >
-                    {!subscription.has_used_trial ? "Start Pro Free Trial" : "Upgrade Plan"}
+                    {getUpgradePlanLabel()}
                   </Button>
                 )}
               </OrgPermissionCan>
@@ -133,22 +155,24 @@ export const PreviewSection = () => {
                 subscription.status === "trialing" ? "(Trial)" : ""
               }`}
             </p>
-            <OrgPermissionCan I={OrgPermissionActions.Edit} a={OrgPermissionSubjects.Billing}>
-              {(isAllowed) => (
-                <button
-                  type="button"
-                  onClick={async () => {
-                    if (!currentOrg?.id) return;
-                    const { url } = await createCustomerPortalSession.mutateAsync(currentOrg.id);
-                    window.location.href = url;
-                  }}
-                  disabled={!isAllowed}
-                  className="text-primary"
-                >
-                  Manage plan &rarr;
-                </button>
-              )}
-            </OrgPermissionCan>
+            {isInfisicalCloud() && (
+              <OrgPermissionCan I={OrgPermissionActions.Edit} a={OrgPermissionSubjects.Billing}>
+                {(isAllowed) => (
+                  <button
+                    type="button"
+                    onClick={async () => {
+                      if (!currentOrg?.id) return;
+                      const { url } = await createCustomerPortalSession.mutateAsync(currentOrg.id);
+                      window.location.href = url;
+                    }}
+                    disabled={!isAllowed}
+                    className="text-primary"
+                  >
+                    Manage plan &rarr;
+                  </button>
+                )}
+              </OrgPermissionCan>
+            )}
           </div>
           <div className="mr-4 flex-1 rounded-lg border border-mineshaft-600 bg-mineshaft-900 p-4">
             <p className="mb-2 text-gray-400">Price</p>
@@ -161,7 +185,7 @@ export const PreviewSection = () => {
           <div className="flex-1 rounded-lg border border-mineshaft-600 bg-mineshaft-900 p-4">
             <p className="mb-2 text-gray-400">Subscription renews on</p>
             <p className="mb-8 text-2xl font-semibold text-mineshaft-50">
-              {formatDate(data.currentPeriodEnd)}
+              {data.currentPeriodEnd ? formatDate(data.currentPeriodEnd) : "-"}
             </p>
           </div>
         </div>

frontend/src/pages/organization/BillingPage/components/BillingTabGroup/BillingTabGroup.tsx

@@ -1,5 +1,6 @@
 import { Tab, TabList, TabPanel, Tabs } from "@app/components/v2";
 import { OrgPermissionActions, OrgPermissionSubjects } from "@app/context";
+import { isInfisicalCloud } from "@app/helpers/platform";
 import { withPermission } from "@app/hoc";
 
 import { BillingCloudTab } from "../BillingCloudTab";
@@ -16,25 +17,33 @@ const tabs = [
 
 export const BillingTabGroup = withPermission(
   () => {
+    const tabsFiltered = isInfisicalCloud()
+      ? tabs
+      : [{ name: "Infisical Self-Hosted", key: "tab-infisical-cloud" }];
+
     return (
       <Tabs defaultValue={tabs[0].key}>
         <TabList>
-          {tabs.map((tab) => (
+          {tabsFiltered.map((tab) => (
             <Tab value={tab.key}>{tab.name}</Tab>
           ))}
         </TabList>
         <TabPanel value={tabs[0].key}>
           <BillingCloudTab />
         </TabPanel>
-        <TabPanel value={tabs[1].key}>
-          <BillingSelfHostedTab />
-        </TabPanel>
-        <TabPanel value={tabs[2].key}>
-          <BillingReceiptsTab />
-        </TabPanel>
-        <TabPanel value={tabs[3].key}>
-          <BillingDetailsTab />
-        </TabPanel>
+        {isInfisicalCloud() && (
+          <>
+            <TabPanel value={tabs[1].key}>
+              <BillingSelfHostedTab />
+            </TabPanel>
+            <TabPanel value={tabs[2].key}>
+              <BillingReceiptsTab />
+            </TabPanel>
+            <TabPanel value={tabs[3].key}>
+              <BillingDetailsTab />
+            </TabPanel>
+          </>
+        )}
       </Tabs>
     );
   },

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

@@ -152,7 +152,7 @@ export const AccessApprovalRequest = ({
     const isAccepted = request.isApproved;
     const isSoftEnforcement = request.policy.enforcementLevel === EnforcementLevel.Soft;
     const isRequestedByCurrentUser = request.requestedByUserId === user.id;
-
+    const isSelfApproveAllowed = request.policy.allowedSelfApprovals;
     const userReviewStatus = request.reviewers.find(({ member }) => member === user.id)?.status;
 
     let displayData: { label: string; type: "primary" | "danger" | "success" } = {
@@ -189,7 +189,8 @@ export const AccessApprovalRequest = ({
       userReviewStatus,
       isAccepted,
       isSoftEnforcement,
-      isRequestedByCurrentUser
+      isRequestedByCurrentUser,
+      isSelfApproveAllowed
     };
   };
 
@@ -342,15 +343,16 @@ export const AccessApprovalRequest = ({
                     tabIndex={0}
                     onClick={() => {
                       if (
-                        (!details.isApprover ||
+                        ((!details.isApprover ||
                           details.isReviewedByUser ||
                           details.isRejectedByAnyone ||
                           details.isAccepted) &&
-                        !(
-                          details.isSoftEnforcement &&
-                          details.isRequestedByCurrentUser &&
-                          !details.isAccepted
-                        )
+                          !(
+                            details.isSoftEnforcement &&
+                            details.isRequestedByCurrentUser &&
+                            !details.isAccepted
+                          )) ||
+                        (request.requestedByUserId === user.id && !details.isSelfApproveAllowed)
                       )
                         return;
                       if (membersGroupById?.[request.requestedByUserId].user) {

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

@@ -12,7 +12,8 @@ import {
   Modal,
   ModalContent,
   Select,
-  SelectItem
+  SelectItem,
+  Switch
 } from "@app/components/v2";
 import { useWorkspace } from "@app/context";
 import { getMemberLabel } from "@app/helpers/members";
@@ -54,7 +55,8 @@ const formSchema = z
       .array()
       .default([]),
     policyType: z.nativeEnum(PolicyType),
-    enforcementLevel: z.nativeEnum(EnforcementLevel)
+    enforcementLevel: z.nativeEnum(EnforcementLevel),
+    allowedSelfApprovals: z.boolean().default(true)
   })
   .superRefine((data, ctx) => {
     if (!(data.groupApprovers.length || data.userApprovers.length)) {
@@ -101,7 +103,8 @@ export const AccessPolicyForm = ({
             editValues?.approvers
               ?.filter((approver) => approver.type === ApproverType.Group)
               .map(({ id, type }) => ({ id, type: type as ApproverType.Group })) || [],
-          approvals: editValues?.approvals
+          approvals: editValues?.approvals,
+          allowedSelfApprovals: editValues?.allowedSelfApprovals
         }
       : undefined
   });
@@ -441,6 +444,27 @@ export const AccessPolicyForm = ({
                 </FormControl>
               )}
             />
+            <Controller
+              control={control}
+              name="allowedSelfApprovals"
+              defaultValue
+              render={({ field: { value, onChange }, fieldState: { error } }) => (
+                <FormControl
+                  label="Self Approvals"
+                  isError={Boolean(error)}
+                  errorText={error?.message}
+                >
+                  <Switch
+                    id="self-approvals"
+                    thumbClassName="bg-mineshaft-800"
+                    isChecked={value}
+                    onCheckedChange={onChange}
+                  >
+                    Allow approvers to review their own requests
+                  </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/SecretApprovalRequest/components/SecretApprovalRequestChanges.tsx

@@ -127,7 +127,9 @@ export const SecretApprovalRequestChanges = ({
   } = useForm<TReviewFormSchema>({
     resolver: zodResolver(reviewFormSchema)
   });
-
+  const shouldBlockSelfReview =
+    secretApprovalRequestDetails?.policy?.allowedSelfApprovals === false &&
+    secretApprovalRequestDetails?.committerUserId === userSession.id;
   const isApproving = variables?.status === ApprovalStatus.APPROVED && isUpdatingRequestStatus;
   const isRejecting = variables?.status === ApprovalStatus.REJECTED && isUpdatingRequestStatus;
 
@@ -245,117 +247,119 @@ export const SecretApprovalRequestChanges = ({
               </div>
             </div>
           </div>
-          {!hasMerged && secretApprovalRequestDetails.status === "open" && (
-            <DropdownMenu
-              open={popUp.reviewChanges.isOpen}
-              onOpenChange={(isOpen) => handlePopUpToggle("reviewChanges", isOpen)}
-            >
-              <DropdownMenuTrigger asChild>
-                <Button
-                  variant="outline_bg"
-                  rightIcon={<FontAwesomeIcon className="ml-2" icon={faAngleDown} />}
-                >
-                  Review
-                </Button>
-              </DropdownMenuTrigger>
-              <DropdownMenuContent align="end" asChild className="mt-3">
-                <form onSubmit={handleSubmit(handleSubmitReview)}>
-                  <div className="flex w-[400px] flex-col space-y-2 p-5">
-                    <div className="text-lg font-medium">Finish your review</div>
-                    <Controller
-                      control={control}
-                      name="comment"
-                      render={({ field, fieldState: { error } }) => (
-                        <FormControl errorText={error?.message} isError={Boolean(error)}>
-                          <TextArea
-                            {...field}
-                            placeholder="Leave a comment..."
-                            reSize="none"
-                            className="text-md mt-2 h-48 border border-mineshaft-600 bg-bunker-800"
-                          />
-                        </FormControl>
-                      )}
-                    />
-                    <Controller
-                      control={control}
-                      name="status"
-                      defaultValue={ApprovalStatus.APPROVED}
-                      render={({ field, fieldState: { error } }) => (
-                        <FormControl errorText={error?.message} isError={Boolean(error)}>
-                          <RadioGroup
-                            value={field.value}
-                            onValueChange={field.onChange}
-                            className="mb-4 space-y-2"
-                            aria-label="Status"
-                          >
-                            <div className="flex items-center gap-2">
-                              <RadioGroupItem
-                                id="approve"
-                                className="h-4 w-4 rounded-full border border-gray-300 text-primary focus:ring-2 focus:ring-mineshaft-500"
-                                value={ApprovalStatus.APPROVED}
-                                aria-labelledby="approve-label"
-                              >
-                                <RadioGroupIndicator className="flex h-full w-full items-center justify-center after:h-2 after:w-2 after:rounded-full after:bg-current" />
-                              </RadioGroupItem>
-                              <span
-                                id="approve-label"
-                                className="cursor-pointer"
-                                onClick={() => field.onChange(ApprovalStatus.APPROVED)}
-                                onKeyDown={(e) => {
-                                  if (e.key === "Enter" || e.key === " ") {
-                                    e.preventDefault();
-                                    field.onChange(ApprovalStatus.APPROVED);
-                                  }
-                                }}
-                                tabIndex={0}
-                                role="button"
-                              >
-                                Approve
-                              </span>
-                            </div>
-                            <div className="flex items-center gap-2">
-                              <RadioGroupItem
-                                id="reject"
-                                className="h-4 w-4 rounded-full border border-gray-300 text-primary focus:ring-2 focus:ring-mineshaft-500"
-                                value={ApprovalStatus.REJECTED}
-                                aria-labelledby="reject-label"
-                              >
-                                <RadioGroupIndicator className="flex h-full w-full items-center justify-center after:h-2 after:w-2 after:rounded-full after:bg-current" />
-                              </RadioGroupItem>
-                              <span
-                                id="reject-label"
-                                className="cursor-pointer"
-                                onClick={() => field.onChange(ApprovalStatus.REJECTED)}
-                                onKeyDown={(e) => {
-                                  if (e.key === "Enter" || e.key === " ") {
-                                    e.preventDefault();
-                                    field.onChange(ApprovalStatus.REJECTED);
-                                  }
-                                }}
-                                tabIndex={0}
-                                role="button"
-                              >
-                                Reject
-                              </span>
-                            </div>
-                          </RadioGroup>
-                        </FormControl>
-                      )}
-                    />
-                    <div className="flex justify-end">
-                      <Button
-                        type="submit"
-                        isLoading={isApproving || isRejecting || isSubmitting}
-                        variant="outline_bg"
-                      >
-                        Submit Review
-                      </Button>
+          {!hasMerged &&
+            secretApprovalRequestDetails.status === "open" &&
+            !shouldBlockSelfReview && (
+              <DropdownMenu
+                open={popUp.reviewChanges.isOpen}
+                onOpenChange={(isOpen) => handlePopUpToggle("reviewChanges", isOpen)}
+              >
+                <DropdownMenuTrigger asChild>
+                  <Button
+                    variant="outline_bg"
+                    rightIcon={<FontAwesomeIcon className="ml-2" icon={faAngleDown} />}
+                  >
+                    Review
+                  </Button>
+                </DropdownMenuTrigger>
+                <DropdownMenuContent align="end" asChild className="mt-3">
+                  <form onSubmit={handleSubmit(handleSubmitReview)}>
+                    <div className="flex w-[400px] flex-col space-y-2 p-5">
+                      <div className="text-lg font-medium">Finish your review</div>
+                      <Controller
+                        control={control}
+                        name="comment"
+                        render={({ field, fieldState: { error } }) => (
+                          <FormControl errorText={error?.message} isError={Boolean(error)}>
+                            <TextArea
+                              {...field}
+                              placeholder="Leave a comment..."
+                              reSize="none"
+                              className="text-md mt-2 h-48 border border-mineshaft-600 bg-bunker-800"
+                            />
+                          </FormControl>
+                        )}
+                      />
+                      <Controller
+                        control={control}
+                        name="status"
+                        defaultValue={ApprovalStatus.APPROVED}
+                        render={({ field, fieldState: { error } }) => (
+                          <FormControl errorText={error?.message} isError={Boolean(error)}>
+                            <RadioGroup
+                              value={field.value}
+                              onValueChange={field.onChange}
+                              className="mb-4 space-y-2"
+                              aria-label="Status"
+                            >
+                              <div className="flex items-center gap-2">
+                                <RadioGroupItem
+                                  id="approve"
+                                  className="h-4 w-4 rounded-full border border-gray-300 text-primary focus:ring-2 focus:ring-mineshaft-500"
+                                  value={ApprovalStatus.APPROVED}
+                                  aria-labelledby="approve-label"
+                                >
+                                  <RadioGroupIndicator className="flex h-full w-full items-center justify-center after:h-2 after:w-2 after:rounded-full after:bg-current" />
+                                </RadioGroupItem>
+                                <span
+                                  id="approve-label"
+                                  className="cursor-pointer"
+                                  onClick={() => field.onChange(ApprovalStatus.APPROVED)}
+                                  onKeyDown={(e) => {
+                                    if (e.key === "Enter" || e.key === " ") {
+                                      e.preventDefault();
+                                      field.onChange(ApprovalStatus.APPROVED);
+                                    }
+                                  }}
+                                  tabIndex={0}
+                                  role="button"
+                                >
+                                  Approve
+                                </span>
+                              </div>
+                              <div className="flex items-center gap-2">
+                                <RadioGroupItem
+                                  id="reject"
+                                  className="h-4 w-4 rounded-full border border-gray-300 text-primary focus:ring-2 focus:ring-mineshaft-500"
+                                  value={ApprovalStatus.REJECTED}
+                                  aria-labelledby="reject-label"
+                                >
+                                  <RadioGroupIndicator className="flex h-full w-full items-center justify-center after:h-2 after:w-2 after:rounded-full after:bg-current" />
+                                </RadioGroupItem>
+                                <span
+                                  id="reject-label"
+                                  className="cursor-pointer"
+                                  onClick={() => field.onChange(ApprovalStatus.REJECTED)}
+                                  onKeyDown={(e) => {
+                                    if (e.key === "Enter" || e.key === " ") {
+                                      e.preventDefault();
+                                      field.onChange(ApprovalStatus.REJECTED);
+                                    }
+                                  }}
+                                  tabIndex={0}
+                                  role="button"
+                                >
+                                  Reject
+                                </span>
+                              </div>
+                            </RadioGroup>
+                          </FormControl>
+                        )}
+                      />
+                      <div className="flex justify-end">
+                        <Button
+                          type="submit"
+                          isLoading={isApproving || isRejecting || isSubmitting}
+                          variant="outline_bg"
+                        >
+                          Submit Review
+                        </Button>
+                      </div>
                     </div>
-                  </div>
-                </form>
-              </DropdownMenuContent>
-            </DropdownMenu>
-          )}
+                  </form>
+                </DropdownMenuContent>
+              </DropdownMenu>
+            )}
         </div>
         <div className="flex flex-col space-y-4">
           {secretApprovalRequestDetails.commits.map(
@@ -422,40 +426,45 @@ export const SecretApprovalRequestChanges = ({
       <div className="sticky top-0 w-1/5 pt-4" style={{ minWidth: "240px" }}>
         <div className="text-sm text-bunker-300">Reviewers</div>
         <div className="mt-2 flex flex-col space-y-2 text-sm">
-          {secretApprovalRequestDetails?.policy?.approvers.map((requiredApprover) => {
-            const reviewer = reviewedUsers?.[requiredApprover.userId];
-            return (
-              <div
-                className="flex flex-nowrap items-center space-x-2 rounded bg-mineshaft-800 px-2 py-1"
-                key={`required-approver-${requiredApprover.userId}`}
-              >
-                <div className="flex-grow text-sm">
-                  <Tooltip
-                    content={`${requiredApprover.firstName || ""} ${
-                      requiredApprover.lastName || ""
-                    }`}
-                  >
-                    <span>{requiredApprover?.email} </span>
-                  </Tooltip>
-                  <span className="text-red">*</span>
-                </div>
-                <div>
-                  {reviewer?.comment && (
-                    <Tooltip content={reviewer.comment}>
-                      <FontAwesomeIcon
-                        icon={faComment}
-                        size="xs"
-                        className="mr-1 text-mineshaft-300"
-                      />
+          {secretApprovalRequestDetails?.policy?.approvers
+            .filter(
+              (requiredApprover) =>
+                !(shouldBlockSelfReview && requiredApprover.userId === userSession.id)
+            )
+            .map((requiredApprover) => {
+              const reviewer = reviewedUsers?.[requiredApprover.userId];
+              return (
+                <div
+                  className="flex flex-nowrap items-center space-x-2 rounded bg-mineshaft-800 px-2 py-1"
+                  key={`required-approver-${requiredApprover.userId}`}
+                >
+                  <div className="flex-grow text-sm">
+                    <Tooltip
+                      content={`${requiredApprover.firstName || ""} ${
+                        requiredApprover.lastName || ""
+                      }`}
+                    >
+                      <span>{requiredApprover?.email} </span>
                     </Tooltip>
-                  )}
-                  <Tooltip content={reviewer?.status || ApprovalStatus.PENDING}>
-                    {getReviewedStatusSymbol(reviewer?.status)}
-                  </Tooltip>
+                    <span className="text-red">*</span>
+                  </div>
+                  <div>
+                    {reviewer?.comment && (
+                      <Tooltip content={reviewer.comment}>
+                        <FontAwesomeIcon
+                          icon={faComment}
+                          size="xs"
+                          className="mr-1 text-mineshaft-300"
+                        />
+                      </Tooltip>
+                    )}
+                    <Tooltip content={reviewer?.status || ApprovalStatus.PENDING}>
+                      {getReviewedStatusSymbol(reviewer?.status)}
+                    </Tooltip>
+                  </div>
                 </div>
-              </div>
-            );
-          })}
+              );
+            })}
           {secretApprovalRequestDetails?.reviewers
             .filter(
               (reviewer) =>