improvement: address feedback

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

@@ -1,5 +1,4 @@
 import { Modal, ModalContent } from "@app/components/v2";
-import { NoticeBannerV2 } from "@app/components/v2/NoticeBannerV2/NoticeBannerV2";
 import { ProjectPermissionActions } from "@app/context";
 import { TAccessApprovalPolicy } from "@app/hooks/api/types";
 import { SpecificPrivilegeSecretForm } from "@app/pages/project/AccessControlPage/components/MembersTab/components/MemberRoleForm/SpecificPrivilegeSection";
@@ -8,7 +7,6 @@ export const RequestAccessModal = ({
   isOpen,
   onOpenChange,
   policies,
-  shouldShowBanner,
   ...props
 }: {
   isOpen: boolean;
@@ -16,7 +14,6 @@ export const RequestAccessModal = ({
   policies: TAccessApprovalPolicy[];
   selectedActions?: ProjectPermissionActions[];
   secretPath?: string;
-  shouldShowBanner?: boolean;
 }) => {
   return (
     <Modal isOpen={isOpen} onOpenChange={onOpenChange}>
@@ -25,16 +22,6 @@ export const RequestAccessModal = ({
         title="Request Access"
         subTitle="Request access to any secrets and resources based on the predefined policies."
       >
-        {shouldShowBanner && (
-          <NoticeBannerV2
-            className="mb-3"
-            title="You do not have permission to perform this action"
-          >
-            <p className="text-sm text-mineshaft-300">
-              Request access to perform this action in this folder.
-            </p>
-          </NoticeBannerV2>
-        )}
         <SpecificPrivilegeSecretForm
           onClose={() => onOpenChange(false)}
           policies={policies}

frontend/src/pages/secret-manager/SecretDashboardPage/SecretDashboardPage.tsx

@@ -652,10 +652,7 @@ const Page = () => {
                       size="xs"
                       className="ml-auto"
                       onClick={() =>
-                        handlePopUpOpen("requestAccess", {
+                        handlePopUpOpen("requestAccess", [ProjectPermissionActions.Read])
-                          actions: [ProjectPermissionActions.Read],
-                          shouldShowBanner: false
-                        })
                       }
                     >
                       Request Access
@@ -679,13 +676,10 @@ const Page = () => {
                       size="xs"
                       className="ml-auto"
                       onClick={() =>
-                        handlePopUpOpen("requestAccess", {
+                        handlePopUpOpen("requestAccess", [
-                          actions: [
+                          ...(!canEditSecrets ? [ProjectPermissionActions.Edit] : []),
-                            ...(!canEditSecrets ? [ProjectPermissionActions.Edit] : []),
+                          ...(!canDeleteSecrets ? [ProjectPermissionActions.Delete] : [])
-                            ...(!canDeleteSecrets ? [ProjectPermissionActions.Delete] : [])
+                        ])
-                          ],
-                          shouldShowBanner: false
-                        })
                       }
                     >
                       Request Access
@@ -788,8 +782,7 @@ const Page = () => {
               onOpenChange={() => {
                 handlePopUpClose("requestAccess");
               }}
-              selectedActions={popUp.requestAccess.data?.actions}
+              selectedActions={popUp.requestAccess.data}
-              shouldShowBanner={popUp.requestAccess.data?.shouldShowBanner}
               secretPath={pathPolicies?.[0]?.secretPath}
             />
           )}

frontend/src/pages/secret-manager/SecretDashboardPage/components/ActionBar/ActionBar.tsx

@@ -46,6 +46,7 @@ import {
   DropdownSubMenuTrigger,
   IconButton,
   Modal,
+  ModalClose,
   ModalContent,
   Tooltip
 } from "@app/components/v2";
@@ -129,10 +130,7 @@ type Props = {
     }[];
   }[];
   isPITEnabled: boolean;
-  onRequestAccess: (params: {
+  onRequestAccess: (actions: ProjectPermissionActions[]) => void;
-    actions: ProjectPermissionActions[];
-    shouldShowBanner: boolean;
-  }) => void;
   hasPathPolicies: boolean;
 };
 
@@ -168,7 +166,8 @@ export const ActionBar = ({
     "misc",
     "upgradePlan",
     "replicateFolder",
-    "confirmUpload"
+    "confirmUpload",
+    "requestAccess"
   ] as const);
   const isProtectedBranch = Boolean(protectedBranchPolicyName);
   const { subscription } = useSubscription();
@@ -832,10 +831,7 @@ export const ActionBar = ({
                   })
                 )
                   ? openPopUp(PopUpNames.CreateSecretForm)
-                  : onRequestAccess({
+                  : handlePopUpOpen("requestAccess", [ProjectPermissionActions.Create])
-                      actions: [ProjectPermissionActions.Create],
-                      shouldShowBanner: true
-                    })
               }
               className="h-10 rounded-r-none"
             >
@@ -1202,6 +1198,27 @@ export const ActionBar = ({
           )}
         </ModalContent>
       </Modal>
+      <Modal
+        isOpen={popUp?.requestAccess?.isOpen}
+        onOpenChange={(open) => handlePopUpToggle("requestAccess", open)}
+      >
+        <ModalContent title="Access Restricted">
+          <p className="mb-2 text-bunker-300">You do not have permission to perform this action.</p>
+          <p className="text-bunker-300">Request access to perform this action in this folder.</p>
+          <div className="mt-8 flex items-center gap-4">
+            <ModalClose asChild>
+              <Button onClick={() => onRequestAccess(popUp?.requestAccess.data)}>
+                Request Access
+              </Button>
+            </ModalClose>
+            <ModalClose asChild>
+              <Button variant="plain" colorSchema="secondary">
+                Cancel
+              </Button>
+            </ModalClose>
+          </div>
+        </ModalContent>
+      </Modal>
     </>
   );
 };