Merge pull request #3481 from Infisical/fix/AddDeleteProjectProtectedTooltip

fix(delete-project): Add tooltip for delete project button when it has protection enabled

frontend/src/pages/secret-manager/SettingsPage/components/DeleteProjectSection/DeleteProjectSection.tsx

@@ -3,7 +3,7 @@ import { useNavigate } from "@tanstack/react-router";
 
 import { createNotification } from "@app/components/notifications";
 import { ProjectPermissionCan } from "@app/components/permissions";
-import { Button, DeleteActionModal } from "@app/components/v2";
+import { Button, DeleteActionModal, Tooltip } from "@app/components/v2";
 import { LeaveProjectModal } from "@app/components/v2/LeaveProjectModal";
 import {
   ProjectPermissionActions,
@@ -142,6 +142,11 @@ export const DeleteProjectSection = () => {
       <div className="space-x-4">
         <ProjectPermissionCan I={ProjectPermissionActions.Delete} a={ProjectPermissionSub.Project}>
           {(isAllowed) => (
+            <Tooltip
+              className="max-w-sm"
+              content="This project is protected from deletion. To delete it, disable delete protection first."
+              isDisabled={!currentWorkspace?.hasDeleteProtection}
+            >
               <Button
                 isLoading={isDeleting}
                 isDisabled={!isAllowed || isDeleting || currentWorkspace?.hasDeleteProtection}
@@ -152,6 +157,7 @@ export const DeleteProjectSection = () => {
               >
                 {`Delete ${currentWorkspace?.name}`}
               </Button>
+            </Tooltip>
           )}
         </ProjectPermissionCan>
         {!isOnlyAdminMember && (