diff --git a/apps/app/components/integration/delete-import-modal.tsx b/apps/app/components/integration/delete-import-modal.tsx new file mode 100644 index 000000000..8c0e10874 --- /dev/null +++ b/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 = ({ 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( + 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 ( + + + +
+ + +
+
+ + +
+
+ + + +

Delete Project

+ +
+ +

+ Are you sure you want to delete project{" "} + {data?.service}? All of the + data related to the project will be permanently removed. This action cannot be + undone +

+ +
+

+ To confirm, type delete import below: +

+ { + if (e.target.value === "delete import") setConfirmDeleteImport(true); + else setConfirmDeleteImport(false); + }} + placeholder="Enter 'delete import'" + /> +
+
+ Cancel + + {deleteLoading ? "Deleting..." : "Delete Project"} + +
+
+ + +
+
+
+ + ); +}; diff --git a/apps/app/components/integration/guide.tsx b/apps/app/components/integration/guide.tsx index 347ce2628..060dbdc26 100644 --- a/apps/app/components/integration/guide.tsx +++ b/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 = ({ provider, appIntegrations, @@ -41,157 +35,140 @@ const IntegrationGuide: FC = ({ importerServices, }) => { const [refreshing, setRefreshing] = useState(false); + const [deleteImportModal, setDeleteImportModal] = useState(false); + const [importToDelete, setImportToDelete] = useState(null); const router = useRouter(); const { workspaceSlug } = router.query; - return ( -
- {!provider && ( - <> -
-
-
Relocation Guide
-
- 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. -
-
-
-
Read More
-
- -
-
-
-
- {appIntegrations ? ( - appIntegrations.length > 0 ? ( - appIntegrations.map((integration, index) => ( -
-
-
- {integration?.provider === "github" && ( - GithubLogo - )} -
-
-
-

{integration?.title}

-
-
- Activate GitHub integrations on individual projects to sync with specific - repositories. -
-
-
- - Integrate Now - -
-
+ const handleDeleteImport = (importService: IImporterService) => { + setImportToDelete(importService); + setDeleteImportModal(true); + }; -

- Previous Imports - -

- {importerServices ? ( - importerServices.length > 0 ? ( -
-
- {importerServices.map((service) => ( -
-

- - Import from{" "} - - {importersList[service.service]} - {" "} - to{" "} - - {service.project_detail.name} - - - - {refreshing ? "Refreshing..." : service.status} - -

-
- {renderShortDateWithYearFormat(service.created_at)}| - - 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} - -
-
- ))} + return ( + <> + setDeleteImportModal(false)} + data={importToDelete} + /> +
+ {!provider && ( + <> +
+
+
Relocation Guide
+
+ 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. +
+
+
+
Read More
+
+ +
+
+
+
+ {appIntegrations ? ( + appIntegrations.length > 0 ? ( + appIntegrations.map((integration, index) => ( +
+
+
+ {integration?.provider === "github" && ( + GithubLogo + )} +
+
+
+

{integration?.title}

+
+
+ Activate GitHub integrations on individual projects to sync with + specific repositories.
- ) : ( -
- No previous imports available. +
+ + Import Now +
- ) - ) : ( - - - - - - - )} -
- )) - ) : ( -
- Integrations not available. -
- ) - ) : ( - - - - - )} -
- - )} +
- {provider && provider === "github" && ( - - )} -
+

+ Previous Imports + +

+ {importerServices ? ( + importerServices.length > 0 ? ( +
+
+ {importerServices.map((service) => ( + handleDeleteImport(service)} + /> + ))} +
+
+ ) : ( +
+ No previous imports available. +
+ ) + ) : ( + + + + + + + )} +
+ )) + ) : ( +
+ Integrations not available. +
+ ) + ) : ( + + + + + )} +
+ + )} + + {provider && provider === "github" && ( + + )} +
+ ); }; diff --git a/apps/app/components/integration/index.ts b/apps/app/components/integration/index.ts index bbe49c1ae..df7f4de25 100644 --- a/apps/app/components/integration/index.ts +++ b/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 diff --git a/apps/app/components/integration/single-import.tsx b/apps/app/components/integration/single-import.tsx new file mode 100644 index 000000000..bef5b7301 --- /dev/null +++ b/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 = ({ service, refreshing, handleDelete }) => ( +
+
+

+ + Import from {importersList[service.service]} to{" "} + {service.project_detail.name} + + + {refreshing ? "Refreshing..." : service.status} + +

+
+ {renderShortDateWithYearFormat(service.created_at)}| + + 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} + +
+
+ + + + + Delete import + + + +
+); diff --git a/apps/app/services/integration/index.ts b/apps/app/services/integration/index.ts index 454cce996..7adba88e8 100644 --- a/apps/app/services/integration/index.ts +++ b/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 { + return this.delete(`/api/workspaces/${workspaceSlug}/importers/${importerId}/`) + .then((res) => res?.data) + .catch((error) => { + throw error?.response?.data; + }); + } } export default new IntegrationService();