import { ReactElement } from "react"; import { observer } from "mobx-react"; import { useRouter } from "next/router"; import useSWR from "swr"; // hooks import { IntegrationsSettingsLoader } from "components/ui"; // layouts import { AppLayout } from "layouts/app-layout"; import { ProjectSettingLayout } from "layouts/settings-layout"; // services import { NextPageWithLayout } from "lib/types"; import { IntegrationService } from "services/integrations"; import { ProjectService } from "services/project"; // components import { PageHead } from "components/core"; import { IntegrationCard } from "components/project"; import { ProjectSettingHeader } from "components/headers"; import { EmptyState } from "components/empty-state"; // ui // types import { IProject } from "@plane/types"; // fetch-keys import { PROJECT_DETAILS, WORKSPACE_INTEGRATIONS } from "constants/fetch-keys"; // constants import { EmptyStateType } from "constants/empty-state"; // services const integrationService = new IntegrationService(); const projectService = new ProjectService(); const ProjectIntegrationsPage: NextPageWithLayout = observer(() => { const router = useRouter(); const { workspaceSlug, projectId } = router.query; // fetch project details const { data: projectDetails } = useSWR( workspaceSlug && projectId ? PROJECT_DETAILS(projectId as string) : null, workspaceSlug && projectId ? () => projectService.getProject(workspaceSlug as string, projectId as string) : null ); // fetch Integrations list const { data: workspaceIntegrations } = useSWR( workspaceSlug ? WORKSPACE_INTEGRATIONS(workspaceSlug as string) : null, () => (workspaceSlug ? integrationService.getWorkspaceIntegrationsList(workspaceSlug as string) : null) ); // derived values const isAdmin = projectDetails?.member_role === 20; const pageTitle = projectDetails?.name ? `${projectDetails?.name} - Integrations` : undefined; return ( <>

Integrations

{workspaceIntegrations ? ( workspaceIntegrations.length > 0 ? (
{workspaceIntegrations.map((integration) => ( ))}
) : (
) ) : ( )}
); }); ProjectIntegrationsPage.getLayout = function getLayout(page: ReactElement) { return ( }> {page} ); }; export default ProjectIntegrationsPage;