import React, { useState } from "react"; import Link from "next/link"; import Image from "next/image"; import { useRouter } from "next/router"; import { mutate } from "swr"; import { FormProvider, useForm } from "react-hook-form"; // icons import { ArrowLeft, Check, List, Settings } from "lucide-react"; // services import { JiraImporterService } from "services/integrations"; // fetch keys import { IMPORTER_SERVICES_LIST } from "constants/fetch-keys"; // components import { Button, UserGroupIcon } from "@plane/ui"; import { JiraGetImportDetail, JiraProjectDetail, JiraImportUsers, JiraConfirmImport, jiraFormDefaultValues, TJiraIntegrationSteps, IJiraIntegrationData, } from "."; // assets import JiraLogo from "public/services/jira.svg"; // types import { IUser, IJiraImporterForm } from "types"; const integrationWorkflowData: Array<{ title: string; key: TJiraIntegrationSteps; icon: any; }> = [ { title: "Configure", key: "import-configure", icon: Settings, }, { title: "Import Data", key: "display-import-data", icon: List, }, { title: "Users", key: "import-users", icon: UserGroupIcon, }, { title: "Confirm", key: "import-confirmation", icon: Check, }, ]; type Props = { user: IUser | undefined; }; // services const jiraImporterService = new JiraImporterService(); export const JiraImporterRoot: React.FC = () => { const [currentStep, setCurrentStep] = useState({ state: "import-configure", }); const [disableTopBarAfter, setDisableTopBarAfter] = useState(null); const router = useRouter(); const { workspaceSlug } = router.query; const methods = useForm({ defaultValues: jiraFormDefaultValues, mode: "all", reValidateMode: "onChange", }); const isValid = methods.formState.isValid; const onSubmit = async (data: IJiraImporterForm) => { if (!workspaceSlug) return; await jiraImporterService .createJiraImporter(workspaceSlug.toString(), data) .then(() => { mutate(IMPORTER_SERVICES_LIST(workspaceSlug.toString())); router.push(`/${workspaceSlug}/settings/imports`); }) .catch((err) => { console.log(err); }); }; const activeIntegrationState = () => { const currentElementIndex = integrationWorkflowData.findIndex((i) => i?.key === currentStep?.state); return currentElementIndex; }; return (
Cancel import & go back
jira logo
{integrationWorkflowData.map((integration, index) => ( {index < integrationWorkflowData.length - 1 && (
{" "}
)}
))}
{currentStep.state === "import-configure" && } {currentStep.state === "display-import-data" && ( )} {currentStep?.state === "import-users" && } {currentStep?.state === "import-confirmation" && }
{currentStep?.state !== "import-configure" && ( )}
); };