chore: delete import (#727)

* chore: delete import

* chore: changed button text

apps/app/components/integration/delete-import-modal.tsx

@@ -0,0 +1,141 @@
+import React, { useState } from "react";
+
+import { useRouter } from "next/router";
+
+import { mutate } from "swr";
+
+// headless ui
+import { Dialog, Transition } from "@headlessui/react";
+// services
+import IntegrationService from "services/integration";
+// hooks
+import useToast from "hooks/use-toast";
+// ui
+import { DangerButton, Input, SecondaryButton } from "components/ui";
+// icons
+import { ExclamationTriangleIcon } from "@heroicons/react/24/outline";
+// types
+import { IImporterService } from "types";
+// fetch-keys
+import { IMPORTER_SERVICES_LIST } from "constants/fetch-keys";
+
+type Props = {
+  isOpen: boolean;
+  handleClose: () => void;
+  data: IImporterService | null;
+};
+
+export const DeleteImportModal: React.FC<Props> = ({ isOpen, handleClose, data }) => {
+  const [deleteLoading, setDeleteLoading] = useState(false);
+  const [confirmDeleteImport, setConfirmDeleteImport] = useState(false);
+
+  const router = useRouter();
+  const { workspaceSlug } = router.query;
+
+  const { setToastAlert } = useToast();
+
+  const handleDeletion = () => {
+    if (!workspaceSlug || !data) return;
+
+    setDeleteLoading(true);
+
+    mutate<IImporterService[]>(
+      IMPORTER_SERVICES_LIST(workspaceSlug as string),
+      (prevData) => (prevData ?? []).filter((i) => i.id !== data.id),
+      false
+    );
+
+    IntegrationService.deleteImporterService(workspaceSlug as string, data.id)
+      .catch(() =>
+        setToastAlert({
+          type: "error",
+          title: "Error!",
+          message: "Something went wrong. Please try again.",
+        })
+      )
+      .finally(() => setDeleteLoading(false));
+  };
+
+  if (!data) return <></>;
+
+  return (
+    <Transition.Root show={isOpen} as={React.Fragment}>
+      <Dialog as="div" className="relative z-20" onClose={handleClose}>
+        <Transition.Child
+          as={React.Fragment}
+          enter="ease-out duration-300"
+          enterFrom="opacity-0"
+          enterTo="opacity-100"
+          leave="ease-in duration-200"
+          leaveFrom="opacity-100"
+          leaveTo="opacity-0"
+        >
+          <div className="fixed inset-0 bg-gray-500 bg-opacity-75 transition-opacity" />
+        </Transition.Child>
+
+        <div className="fixed inset-0 z-20 overflow-y-auto">
+          <div className="flex min-h-full items-end justify-center p-4 text-center sm:items-center sm:p-0">
+            <Transition.Child
+              as={React.Fragment}
+              enter="ease-out duration-300"
+              enterFrom="opacity-0 translate-y-4 sm:translate-y-0 sm:scale-95"
+              enterTo="opacity-100 translate-y-0 sm:scale-100"
+              leave="ease-in duration-200"
+              leaveFrom="opacity-100 translate-y-0 sm:scale-100"
+              leaveTo="opacity-0 translate-y-4 sm:translate-y-0 sm:scale-95"
+            >
+              <Dialog.Panel className="relative transform overflow-hidden rounded-lg bg-white text-left shadow-xl transition-all sm:my-8 sm:w-full sm:max-w-2xl">
+                <div 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-red-100 p-4">
+                      <ExclamationTriangleIcon
+                        className="h-6 w-6 text-red-600"
+                        aria-hidden="true"
+                      />
+                    </span>
+                    <span className="flex items-center justify-start">
+                      <h3 className="text-xl font-medium 2xl:text-2xl">Delete Project</h3>
+                    </span>
+                  </div>
+                  <span>
+                    <p className="text-sm leading-7 text-gray-500">
+                      Are you sure you want to delete project{" "}
+                      <span className="break-all font-semibold">{data?.service}</span>? All of the
+                      data related to the project will be permanently removed. This action cannot be
+                      undone
+                    </p>
+                  </span>
+                  <div className="text-gray-600">
+                    <p className="text-sm">
+                      To confirm, type <span className="font-medium">delete import</span> below:
+                    </p>
+                    <Input
+                      type="text"
+                      name="typeDelete"
+                      className="mt-2"
+                      onChange={(e) => {
+                        if (e.target.value === "delete import") setConfirmDeleteImport(true);
+                        else setConfirmDeleteImport(false);
+                      }}
+                      placeholder="Enter 'delete import'"
+                    />
+                  </div>
+                  <div className="flex justify-end gap-2">
+                    <SecondaryButton onClick={handleClose}>Cancel</SecondaryButton>
+                    <DangerButton
+                      onClick={handleDeletion}
+                      disabled={!confirmDeleteImport}
+                      loading={deleteLoading}
+                    >
+                      {deleteLoading ? "Deleting..." : "Delete Project"}
+                    </DangerButton>
+                  </div>
+                </div>
+              </Dialog.Panel>
+            </Transition.Child>
+          </div>
+        </div>
+      </Dialog>
+    </Transition.Root>
+  );
+};

apps/app/components/integration/guide.tsx

@@ -9,15 +9,13 @@ import { mutate } from "swr";
 // icons
 import { ArrowRightIcon } from "components/icons";
 // components
-import { GithubIntegrationRoot } from "components/integration";
+import { DeleteImportModal, GithubIntegrationRoot, SingleImport } from "components/integration";
 // icons
 import { ArrowPathIcon } from "@heroicons/react/24/outline";
 // ui
-import { Loader, PrimaryButton, SecondaryButton } from "components/ui";
+import { Loader, PrimaryButton } from "components/ui";
 // images
 import GithubLogo from "public/logos/github-square.png";
-// helpers
-import { renderShortDateWithYearFormat } from "helpers/date-time.helper";
 // types
 import { IAppIntegrations, IImporterService, IWorkspaceIntegrations } from "types";
 // fetch-keys
@@ -30,10 +28,6 @@ type Props = {
   importerServices: IImporterService[] | undefined;
 };
 
-const importersList: { [key: string]: string } = {
-  github: "GitHub",
-};
-
 const IntegrationGuide: FC<Props> = ({
   provider,
   appIntegrations,
@@ -41,157 +35,140 @@ const IntegrationGuide: FC<Props> = ({
   importerServices,
 }) => {
   const [refreshing, setRefreshing] = useState(false);
+  const [deleteImportModal, setDeleteImportModal] = useState(false);
+  const [importToDelete, setImportToDelete] = useState<IImporterService | null>(null);
 
   const router = useRouter();
   const { workspaceSlug } = router.query;
 
-  return (
-    <div className="space-y-5">
-      {!provider && (
-        <>
-          <div className="flex items-center gap-2">
-            <div className="h-full w-full space-y-1">
-              <div className="text-lg font-medium">Relocation Guide</div>
-              <div className="text-sm">
-                You can now transfer all the issues that you{"'"}ve created in other tracking
-                services. This tool will guide you to relocate the issue to Plane.
-              </div>
-            </div>
-            <div className="flex flex-shrink-0 cursor-pointer items-center gap-2 text-sm font-medium text-[#3F76FF] hover:text-opacity-80">
-              <div>Read More</div>
-              <div>
-                <ArrowRightIcon width={"18px"} color={"#3F76FF"} />
-              </div>
-            </div>
-          </div>
-          <div>
-            {appIntegrations ? (
-              appIntegrations.length > 0 ? (
-                appIntegrations.map((integration, index) => (
-                  <div key={index} className="rounded-[10px] border bg-white p-4">
-                    <div className="flex items-center gap-4 whitespace-nowrap">
-                      <div className="h-[40px] w-[40px] flex-shrink-0">
-                        {integration?.provider === "github" && (
-                          <Image src={GithubLogo} alt="GithubLogo" />
-                        )}
-                      </div>
-                      <div className="w-full space-y-1">
-                        <div className="flex items-center gap-2 font-medium">
-                          <h3>{integration?.title}</h3>
-                        </div>
-                        <div className="text-sm text-gray-500">
-                          Activate GitHub integrations on individual projects to sync with specific
-                          repositories.
-                        </div>
-                      </div>
-                      <div className="flex-shrink-0">
-                        <Link href={`/${workspaceSlug}/settings/import-export?provider=github`}>
-                          <PrimaryButton>Integrate Now</PrimaryButton>
-                        </Link>
-                      </div>
-                    </div>
+  const handleDeleteImport = (importService: IImporterService) => {
+    setImportToDelete(importService);
+    setDeleteImportModal(true);
+  };
 
-                    <h3 className="mt-6 mb-2 font-medium text-lg flex gap-2">
-                      Previous Imports
-                      <button
-                        type="button"
-                        className="flex-shrink-0 flex items-center gap-1 outline-none text-xs py-1 px-1.5 bg-gray-100 rounded"
-                        onClick={() => {
-                          setRefreshing(true);
-                          mutate(IMPORTER_SERVICES_LIST(workspaceSlug as string)).then(() =>
-                            setRefreshing(false)
-                          );
-                        }}
-                      >
-                        <ArrowPathIcon className={`h-3 w-3 ${refreshing ? "animate-spin" : ""}`} />{" "}
-                        {refreshing ? "Refreshing..." : "Refresh status"}
-                      </button>
-                    </h3>
-                    {importerServices ? (
-                      importerServices.length > 0 ? (
-                        <div className="space-y-2">
-                          <div className="divide-y">
-                            {importerServices.map((service) => (
-                              <div key={service.id} className="py-3">
-                                <h4 className="text-sm flex items-center gap-2">
-                                  <span>
-                                    Import from{" "}
-                                    <span className="font-medium">
-                                      {importersList[service.service]}
-                                    </span>{" "}
-                                    to{" "}
-                                    <span className="font-medium">
-                                      {service.project_detail.name}
-                                    </span>
-                                  </span>
-                                  <span
-                                    className={`capitalize px-2 py-0.5 text-xs rounded ${
-                                      service.status === "completed"
-                                        ? "bg-green-100 text-green-500"
-                                        : service.status === "processing"
-                                        ? "bg-yellow-100 text-yellow-500"
-                                        : service.status === "failed"
-                                        ? "bg-red-100 text-red-500"
-                                        : ""
-                                    }`}
-                                  >
-                                    {refreshing ? "Refreshing..." : service.status}
-                                  </span>
-                                </h4>
-                                <div className="text-gray-500 text-xs mt-2 flex items-center gap-2">
-                                  <span>{renderShortDateWithYearFormat(service.created_at)}</span>|
-                                  <span>
-                                    Imported by{" "}
-                                    {service.initiated_by_detail.first_name &&
-                                    service.initiated_by_detail.first_name !== ""
-                                      ? service.initiated_by_detail.first_name +
-                                        " " +
-                                        service.initiated_by_detail.last_name
-                                      : service.initiated_by_detail.email}
-                                  </span>
-                                </div>
-                              </div>
-                            ))}
+  return (
+    <>
+      <DeleteImportModal
+        isOpen={deleteImportModal}
+        handleClose={() => setDeleteImportModal(false)}
+        data={importToDelete}
+      />
+      <div className="space-y-5">
+        {!provider && (
+          <>
+            <div className="flex items-center gap-2">
+              <div className="h-full w-full space-y-1">
+                <div className="text-lg font-medium">Relocation Guide</div>
+                <div className="text-sm">
+                  You can now transfer all the issues that you{"'"}ve created in other tracking
+                  services. This tool will guide you to relocate the issue to Plane.
+                </div>
+              </div>
+              <div className="flex flex-shrink-0 cursor-pointer items-center gap-2 text-sm font-medium text-[#3F76FF] hover:text-opacity-80">
+                <div>Read More</div>
+                <div>
+                  <ArrowRightIcon width={"18px"} color={"#3F76FF"} />
+                </div>
+              </div>
+            </div>
+            <div>
+              {appIntegrations ? (
+                appIntegrations.length > 0 ? (
+                  appIntegrations.map((integration, index) => (
+                    <div key={index} className="rounded-[10px] border bg-white p-4">
+                      <div className="flex items-center gap-4 whitespace-nowrap">
+                        <div className="h-[40px] w-[40px] flex-shrink-0">
+                          {integration?.provider === "github" && (
+                            <Image src={GithubLogo} alt="GithubLogo" />
+                          )}
+                        </div>
+                        <div className="w-full space-y-1">
+                          <div className="flex items-center gap-2 font-medium">
+                            <h3>{integration?.title}</h3>
+                          </div>
+                          <div className="text-sm text-gray-500">
+                            Activate GitHub integrations on individual projects to sync with
+                            specific repositories.
                           </div>
                         </div>
-                      ) : (
-                        <div className="py-2 text-sm text-gray-800">
-                          No previous imports available.
+                        <div className="flex-shrink-0">
+                          <Link href={`/${workspaceSlug}/settings/import-export?provider=github`}>
+                            <PrimaryButton>Import Now</PrimaryButton>
+                          </Link>
                         </div>
-                      )
-                    ) : (
-                      <Loader className="grid grid-cols-1 gap-3 mt-6">
-                        <Loader.Item height="40px" width="100%" />
-                        <Loader.Item height="40px" width="100%" />
-                        <Loader.Item height="40px" width="100%" />
-                        <Loader.Item height="40px" width="100%" />
-                      </Loader>
-                    )}
-                  </div>
-                ))
-              ) : (
-                <div className="py-5 text-center text-sm text-gray-800">
-                  Integrations not available.
-                </div>
-              )
-            ) : (
-              <Loader className="grid grid-cols-1 gap-3">
-                <Loader.Item height="34px" width="100%" />
-                <Loader.Item height="34px" width="100%" />
-              </Loader>
-            )}
-          </div>
-        </>
-      )}
+                      </div>
 
-      {provider && provider === "github" && (
-        <GithubIntegrationRoot
-          provider={provider}
-          appIntegrations={appIntegrations}
-          workspaceIntegrations={workspaceIntegrations}
-        />
-      )}
-    </div>
+                      <h3 className="mt-6 mb-2 font-medium text-lg flex gap-2">
+                        Previous Imports
+                        <button
+                          type="button"
+                          className="flex-shrink-0 flex items-center gap-1 outline-none text-xs py-1 px-1.5 bg-gray-100 rounded"
+                          onClick={() => {
+                            setRefreshing(true);
+                            mutate(IMPORTER_SERVICES_LIST(workspaceSlug as string)).then(() =>
+                              setRefreshing(false)
+                            );
+                          }}
+                        >
+                          <ArrowPathIcon
+                            className={`h-3 w-3 ${refreshing ? "animate-spin" : ""}`}
+                          />{" "}
+                          {refreshing ? "Refreshing..." : "Refresh status"}
+                        </button>
+                      </h3>
+                      {importerServices ? (
+                        importerServices.length > 0 ? (
+                          <div className="space-y-2">
+                            <div className="divide-y">
+                              {importerServices.map((service) => (
+                                <SingleImport
+                                  key={service.id}
+                                  service={service}
+                                  refreshing={refreshing}
+                                  handleDelete={() => handleDeleteImport(service)}
+                                />
+                              ))}
+                            </div>
+                          </div>
+                        ) : (
+                          <div className="py-2 text-sm text-gray-800">
+                            No previous imports available.
+                          </div>
+                        )
+                      ) : (
+                        <Loader className="grid grid-cols-1 gap-3 mt-6">
+                          <Loader.Item height="40px" width="100%" />
+                          <Loader.Item height="40px" width="100%" />
+                          <Loader.Item height="40px" width="100%" />
+                          <Loader.Item height="40px" width="100%" />
+                        </Loader>
+                      )}
+                    </div>
+                  ))
+                ) : (
+                  <div className="py-5 text-center text-sm text-gray-800">
+                    Integrations not available.
+                  </div>
+                )
+              ) : (
+                <Loader className="grid grid-cols-1 gap-3">
+                  <Loader.Item height="34px" width="100%" />
+                  <Loader.Item height="34px" width="100%" />
+                </Loader>
+              )}
+            </div>
+          </>
+        )}
+
+        {provider && provider === "github" && (
+          <GithubIntegrationRoot
+            provider={provider}
+            appIntegrations={appIntegrations}
+            workspaceIntegrations={workspaceIntegrations}
+          />
+        )}
+      </div>
+    </>
   );
 };
 

apps/app/components/integration/index.ts

@@ -1,5 +1,7 @@
 // layout
+export * from "./delete-import-modal";
 export * from "./guide";
+export * from "./single-import";
 
 // github integration
 // authenticate

apps/app/components/integration/single-import.tsx

@@ -0,0 +1,61 @@
+// ui
+import { CustomMenu } from "components/ui";
+// icons
+import { TrashIcon } from "@heroicons/react/24/outline";
+// helpers
+import { renderShortDateWithYearFormat } from "helpers/date-time.helper";
+// types
+import { IImporterService } from "types";
+
+type Props = {
+  service: IImporterService;
+  refreshing: boolean;
+  handleDelete: () => void;
+};
+
+const importersList: { [key: string]: string } = {
+  github: "GitHub",
+};
+
+export const SingleImport: React.FC<Props> = ({ service, refreshing, handleDelete }) => (
+  <div className="py-3 flex justify-between items-center gap-2">
+    <div>
+      <h4 className="text-sm flex items-center gap-2">
+        <span>
+          Import from <span className="font-medium">{importersList[service.service]}</span> to{" "}
+          <span className="font-medium">{service.project_detail.name}</span>
+        </span>
+        <span
+          className={`capitalize px-2 py-0.5 text-xs rounded ${
+            service.status === "completed"
+              ? "bg-green-100 text-green-500"
+              : service.status === "processing"
+              ? "bg-yellow-100 text-yellow-500"
+              : service.status === "failed"
+              ? "bg-red-100 text-red-500"
+              : ""
+          }`}
+        >
+          {refreshing ? "Refreshing..." : service.status}
+        </span>
+      </h4>
+      <div className="text-gray-500 text-xs mt-2 flex items-center gap-2">
+        <span>{renderShortDateWithYearFormat(service.created_at)}</span>|
+        <span>
+          Imported by{" "}
+          {service.initiated_by_detail.first_name && service.initiated_by_detail.first_name !== ""
+            ? service.initiated_by_detail.first_name + " " + service.initiated_by_detail.last_name
+            : service.initiated_by_detail.email}
+        </span>
+      </div>
+    </div>
+    <CustomMenu ellipsis>
+      <CustomMenu.MenuItem onClick={handleDelete}>
+        <span className="flex items-center justify-start gap-2">
+          <TrashIcon className="h-3.5 w-3.5" />
+          Delete import
+        </span>
+      </CustomMenu.MenuItem>
+    </CustomMenu>
+  </div>
+);

apps/app/services/integration/index.ts

@@ -42,6 +42,14 @@ class IntegrationService extends APIService {
         throw error?.response?.data;
       });
   }
+
+  async deleteImporterService(workspaceSlug: string, importerId: string): Promise<any> {
+    return this.delete(`/api/workspaces/${workspaceSlug}/importers/${importerId}/`)
+      .then((res) => res?.data)
+      .catch((error) => {
+        throw error?.response?.data;
+      });
+  }
 }
 
 export default new IntegrationService();