import { useState } from "react"; import Image from "next/image"; import { useRouter } from "next/router"; import useSWR, { mutate } from "swr"; // services import IntegrationService from "services/integration"; // hooks import useToast from "hooks/use-toast"; import useIntegrationPopup from "hooks/use-integration-popup"; // ui import { DangerButton, Loader, PrimaryButton } from "components/ui"; // icons import GithubLogo from "public/services/github.png"; import SlackLogo from "public/services/slack.png"; // types import { IAppIntegration, IWorkspaceIntegration } from "types"; // fetch-keys import { WORKSPACE_INTEGRATIONS } from "constants/fetch-keys"; type Props = { integration: IAppIntegration; }; const integrationDetails: { [key: string]: any } = { github: { logo: GithubLogo, installed: "Activate GitHub integrations on individual projects to sync with specific repositories.", notInstalled: "Connect with GitHub with your Plane workspace to sync project issues.", }, slack: { logo: SlackLogo, installed: "Activate Slack integrations on individual projects to sync with specific channels.", notInstalled: "Connect with Slack with your Plane workspace to sync project issues.", }, }; export const SingleIntegrationCard: React.FC = ({ integration }) => { const [deletingIntegration, setDeletingIntegration] = useState(false); const router = useRouter(); const { workspaceSlug } = router.query; const { setToastAlert } = useToast(); const { startAuth, isConnecting: isInstalling } = useIntegrationPopup(integration.provider); const { data: workspaceIntegrations } = useSWR( workspaceSlug ? WORKSPACE_INTEGRATIONS(workspaceSlug as string) : null, () => workspaceSlug ? IntegrationService.getWorkspaceIntegrationsList(workspaceSlug as string) : null ); const handleRemoveIntegration = async () => { if (!workspaceSlug || !integration || !workspaceIntegrations) return; const workspaceIntegrationId = workspaceIntegrations?.find( (i) => i.integration === integration.id )?.id; setDeletingIntegration(true); await IntegrationService.deleteWorkspaceIntegration( workspaceSlug as string, workspaceIntegrationId ?? "" ) .then(() => { mutate( WORKSPACE_INTEGRATIONS(workspaceSlug as string), (prevData) => prevData?.filter((i) => i.id !== workspaceIntegrationId), false ); setDeletingIntegration(false); setToastAlert({ type: "success", title: "Deleted successfully!", message: `${integration.title} integration deleted successfully.`, }); }) .catch(() => { setDeletingIntegration(false); setToastAlert({ type: "error", title: "Error!", message: `${integration.title} integration could not be deleted. Please try again.`, }); }); }; const isInstalled = workspaceIntegrations?.find( (i: any) => i.integration_detail.id === integration.id ); return (
{`${integration.title}

{integration.title} {workspaceIntegrations ? ( isInstalled ? ( Installed ) : ( Not Installed ) ) : null}

{workspaceIntegrations ? isInstalled ? integrationDetails[integration.provider].installed : integrationDetails[integration.provider].notInstalled : "Loading..."}

{workspaceIntegrations ? ( isInstalled ? ( {deletingIntegration ? "Removing..." : "Remove installation"} ) : ( {isInstalling ? "Installing..." : "Add installation"} ) ) : ( )}
); };