Add project delete protection

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

@@ -0,0 +1,57 @@
+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
+              className="data-[state=checked]:bg-primary"
+              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/secret-manager/SettingsPage/components/DeleteProjectProtection/index.tsx

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

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

@@ -144,7 +144,7 @@ export const DeleteProjectSection = () => {
           {(isAllowed) => (
             <Button
               isLoading={isDeleting}
-              isDisabled={!isAllowed || isDeleting}
+              isDisabled={!isAllowed || isDeleting || currentWorkspace?.hasDeleteProtection}
               colorSchema="danger"
               variant="outline_bg"
               type="submit"

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

@@ -5,6 +5,7 @@ import { ProjectType, ProjectVersion } from "@app/hooks/api/workspace/types";
 import { AuditLogsRetentionSection } from "../AuditLogsRetentionSection";
 import { AutoCapitalizationSection } from "../AutoCapitalizationSection";
 import { BackfillSecretReferenceSecretion } from "../BackfillSecretReferenceSection";
+import { DeleteProjectProtection } from "../DeleteProjectProtection";
 import { DeleteProjectSection } from "../DeleteProjectSection";
 import { EnvironmentSection } from "../EnvironmentSection";
 import { PointInTimeVersionLimitSection } from "../PointInTimeVersionLimitSection";
@@ -27,6 +28,7 @@ export const ProjectGeneralTab = () => {
       {currentWorkspace?.version !== ProjectVersion.V3 && isSecretManager && (
         <RebuildSecretIndicesSection />
       )}
+      <DeleteProjectProtection />
       <DeleteProjectSection />
     </div>
   );