feat: resolved review comments

frontend/src/pages/project/SettingsPage/components/DeleteProjectProtection/DeleteProjectProtection.tsx

@@ -0,0 +1,56 @@
+import { createNotification } from "@app/components/notifications";
+import { ProjectPermissionCan } from "@app/components/permissions";
+import { Checkbox } from "@app/components/v2";
+import { ProjectPermissionActions, ProjectPermissionSub, useWorkspace } from "@app/context";
+import { useToggleDeleteProjectProtection } from "@app/hooks/api/workspace/queries";
+
+export const DeleteProjectProtection = () => {
+  const { currentWorkspace } = useWorkspace();
+  const { mutateAsync } = useToggleDeleteProjectProtection();
+
+  const handleToggleDeleteProjectProtection = async (state: boolean) => {
+    try {
+      if (!currentWorkspace?.id) return;
+
+      await mutateAsync({
+        workspaceID: currentWorkspace.id,
+        state
+      });
+
+      const text = `Successfully ${state ? "enabled" : "disabled"} delete protection`;
+      createNotification({
+        text,
+        type: "success"
+      });
+    } catch (err) {
+      console.error(err);
+      createNotification({
+        text: "Failed to update delete protection",
+        type: "error"
+      });
+    }
+  };
+
+  return (
+    <div className="mb-6 rounded-lg border border-mineshaft-600 bg-mineshaft-900 p-4">
+      <p className="mb-3 text-xl font-semibold">Delete Protection</p>
+      <ProjectPermissionCan I={ProjectPermissionActions.Edit} a={ProjectPermissionSub.Settings}>
+        {(isAllowed) => (
+          <div className="w-max">
+            <Checkbox
+              id="hasDeleteProtection"
+              isDisabled={!isAllowed}
+              isChecked={currentWorkspace?.hasDeleteProtection ?? false}
+              onCheckedChange={(state) => {
+                handleToggleDeleteProjectProtection(state as boolean);
+              }}
+            >
+              Protects the project from being deleted accidentally. While this option is enabled,
+              you can&apos;t delete the project.
+            </Checkbox>
+          </div>
+        )}
+      </ProjectPermissionCan>
+    </div>
+  );
+};

frontend/src/pages/project/SettingsPage/components/DeleteProjectProtection/index.tsx

@@ -0,0 +1 @@
+export { DeleteProjectProtection } from "./DeleteProjectProtection";

frontend/src/pages/project/SettingsPage/components/ProjectGeneralTab/ProjectGeneralTab.tsx

@@ -1,6 +1,7 @@
 import { ProjectOverviewChangeSection } from "@app/components/project/ProjectOverviewChangeSection";
 
 import { AuditLogsRetentionSection } from "../AuditLogsRetentionSection";
+import { DeleteProjectProtection } from "../DeleteProjectProtection";
 import { DeleteProjectSection } from "../DeleteProjectSection";
 
 export const ProjectGeneralTab = () => {
@@ -8,6 +9,7 @@ export const ProjectGeneralTab = () => {
     <div>
       <ProjectOverviewChangeSection showSlugField />
       <AuditLogsRetentionSection />
+      <DeleteProjectProtection />
       <DeleteProjectSection />
     </div>
   );

frontend/src/pages/project/layout.tsx

@@ -1,37 +1,41 @@
-import { createFileRoute } from "@tanstack/react-router";
+import { createFileRoute } from '@tanstack/react-router'
 
-import { BreadcrumbTypes } from "@app/components/v2";
-import { workspaceKeys } from "@app/hooks/api";
-import { fetchUserProjectPermissions, roleQueryKeys } from "@app/hooks/api/roles/queries";
-import { fetchWorkspaceById } from "@app/hooks/api/workspace/queries";
-import { ProjectLayout } from "@app/layouts/ProjectLayout";
-import { ProjectSelect } from "@app/layouts/ProjectLayout/components/ProjectSelect";
+import { BreadcrumbTypes } from '@app/components/v2'
+import { workspaceKeys } from '@app/hooks/api'
+import {
+  fetchUserProjectPermissions,
+  roleQueryKeys,
+} from '@app/hooks/api/roles/queries'
+import { fetchWorkspaceById } from '@app/hooks/api/workspace/queries'
+import { ProjectLayout } from '@app/layouts/ProjectLayout'
+import { ProjectSelect } from '@app/layouts/ProjectLayout/components/ProjectSelect'
 
 export const Route = createFileRoute(
-  "/_authenticate/_inject-org-details/_org-layout/projects/$projectId/_project-layout"
+  '/_authenticate/_inject-org-details/_org-layout/secret-manager/$projectId/_project-layout-fallback-approval',
 )({
   component: ProjectLayout,
   beforeLoad: async ({ params, context }) => {
     const project = await context.queryClient.ensureQueryData({
       queryKey: workspaceKeys.getWorkspaceById(params.projectId),
-      queryFn: () => fetchWorkspaceById(params.projectId)
-    });
+      queryFn: () => fetchWorkspaceById(params.projectId),
+    })
 
     await context.queryClient.ensureQueryData({
       queryKey: roleQueryKeys.getUserProjectPermissions({
-        workspaceId: params.projectId
+        workspaceId: params.projectId,
       }),
-      queryFn: () => fetchUserProjectPermissions({ workspaceId: params.projectId })
-    });
+      queryFn: () =>
+        fetchUserProjectPermissions({ workspaceId: params.projectId }),
+    })
 
     return {
       project,
       breadcrumbs: [
         {
           type: BreadcrumbTypes.Component,
-          component: ProjectSelect
-        }
-      ]
-    };
-  }
-});
+          component: ProjectSelect,
+        },
+      ],
+    }
+  },
+})