snapshot of https://github.com/makeplane/plane.git @ d868349a55de79979eb8b98701bf1702c67ad634 (2026-09-15)

apps/web/core/components/project/delete-project-modal.tsx

@@ -0,0 +1,160 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
+import { useParams } from "next/navigation";
+import { Controller, useForm } from "react-hook-form";
+import { WarningTriangleOutline } from "@makeplane/propel/icons";
+// Plane imports
+import { Field } from "@makeplane/propel/components/field";
+import { Input, InputGroup } from "@makeplane/propel/components/input";
+import { Button } from "@plane/propel/button";
+import { TOAST_TYPE, setToast } from "@plane/propel/toast";
+import type { IProject } from "@plane/types";
+import { EModalPosition, EModalWidth, ModalCore } from "@plane/ui";
+// hooks
+import { useProject } from "@/hooks/store/use-project";
+import { useAppRouter } from "@/hooks/use-app-router";
+
+type DeleteProjectModal = {
+  isOpen: boolean;
+  project: IProject;
+  onClose: () => void;
+};
+
+const defaultValues = {
+  projectName: "",
+  confirmDelete: "",
+};
+
+export function DeleteProjectModal(props: DeleteProjectModal) {
+  const { isOpen, project, onClose } = props;
+  // store hooks
+  const { deleteProject } = useProject();
+  // router
+  const router = useAppRouter();
+  const { workspaceSlug, projectId } = useParams();
+  // form info
+  const {
+    control,
+    formState: { errors, isSubmitting },
+    handleSubmit,
+    reset,
+    watch,
+  } = useForm({ defaultValues });
+
+  const canDelete = watch("projectName") === project?.name && watch("confirmDelete") === "delete my project";
+
+  const handleClose = () => {
+    const timer = setTimeout(() => {
+      reset(defaultValues);
+      clearTimeout(timer);
+    }, 350);
+
+    onClose();
+  };
+
+  const onSubmit = async () => {
+    if (!workspaceSlug || !canDelete) return;
+
+    try {
+      await deleteProject(workspaceSlug.toString(), project.id);
+      if (projectId && projectId.toString() === project.id) router.push(`/${workspaceSlug}/projects`);
+      handleClose();
+      setToast({
+        type: TOAST_TYPE.SUCCESS,
+        title: "Success!",
+        message: "Project deleted successfully.",
+      });
+    } catch (_error) {
+      setToast({
+        type: TOAST_TYPE.ERROR,
+        title: "Error!",
+        message: "Something went wrong. Please try again later.",
+      });
+    }
+  };
+
+  return (
+    <ModalCore isOpen={isOpen} handleClose={handleClose} position={EModalPosition.CENTER} width={EModalWidth.XXL}>
+      <form onSubmit={handleSubmit(onSubmit)} className="flex flex-col gap-6 p-6">
+        <div className="flex w-full items-center justify-start gap-6">
+          <span className="place-items-center rounded-full bg-danger-subtle p-4">
+            <WarningTriangleOutline className="h-6 w-6 text-danger-primary" aria-hidden="true" />
+          </span>
+          <span className="flex items-center justify-start">
+            <h3 className="text-18 font-medium 2xl:text-20">Delete project</h3>
+          </span>
+        </div>
+        <span>
+          <p className="text-13 leading-7 text-secondary">
+            Are you sure you want to delete project <span className="font-semibold break-words">{project?.name}</span>?
+            All of the data related to the project will be permanently removed. This action cannot be undone
+          </p>
+        </span>
+        <div className="text-secondary">
+          <p className="text-13 break-words">
+            Enter the project name <span className="font-medium text-primary">{project?.name}</span> to continue:
+          </p>
+          <Controller
+            control={control}
+            name="projectName"
+            render={({ field: { value, onChange, ref } }) => (
+              <Field name="projectName" invalid={Boolean(errors.projectName)}>
+                <InputGroup size="2xl">
+                  <Input
+                    size="2xl"
+                    id="projectName"
+                    name="projectName"
+                    type="text"
+                    value={value}
+                    onChange={onChange}
+                    ref={ref}
+                    placeholder="Project name"
+                    autoComplete="off"
+                  />
+                </InputGroup>
+              </Field>
+            )}
+          />
+        </div>
+        <div className="text-secondary">
+          <p className="text-13">
+            To confirm, type <span className="font-medium text-primary">delete my project</span> below:
+          </p>
+          <Controller
+            control={control}
+            name="confirmDelete"
+            render={({ field: { value, onChange, ref } }) => (
+              <Field name="confirmDelete" invalid={Boolean(errors.confirmDelete)}>
+                <InputGroup size="2xl">
+                  <Input
+                    size="2xl"
+                    id="confirmDelete"
+                    name="confirmDelete"
+                    type="text"
+                    value={value}
+                    onChange={onChange}
+                    ref={ref}
+                    placeholder="Enter 'delete my project'"
+                    autoComplete="off"
+                  />
+                </InputGroup>
+              </Field>
+            )}
+          />
+        </div>
+        <div className="flex justify-end gap-2">
+          <Button variant="secondary" size="lg" onClick={handleClose}>
+            Cancel
+          </Button>
+          <Button variant="error-fill" size="lg" type="submit" disabled={!canDelete} loading={isSubmitting}>
+            {isSubmitting ? "Deleting" : "Delete project"}
+          </Button>
+        </div>
+      </form>
+    </ModalCore>
+  );
+}