import { ReactElement } from "react"; import { useRouter } from "next/router"; import useSWR from "swr"; import { useTheme } from "next-themes"; import { observer } from "mobx-react"; // hooks import { useUser } from "hooks/store"; // layouts import { AppLayout } from "layouts/app-layout"; import { ProjectSettingLayout } from "layouts/settings-layout"; // services 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, getEmptyStateImagePath } from "components/empty-state"; // ui import { IntegrationsSettingsLoader } from "components/ui"; // types import { IProject } from "@plane/types"; import { NextPageWithLayout } from "lib/types"; // fetch-keys import { PROJECT_DETAILS, WORKSPACE_INTEGRATIONS } from "constants/fetch-keys"; import { PROJECT_SETTINGS_EMPTY_STATE_DETAILS } 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; // theme const { resolvedTheme } = useTheme(); // store hooks const { currentUser } = useUser(); // 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 emptyStateDetail = PROJECT_SETTINGS_EMPTY_STATE_DETAILS["integrations"]; const isLightMode = resolvedTheme ? resolvedTheme === "light" : currentUser?.theme.theme === "light"; const emptyStateImage = getEmptyStateImagePath("project-settings", "integrations", isLightMode); const isAdmin = projectDetails?.member_role === 20; const pageTitle = projectDetails?.name ? `${projectDetails?.name} - Integrations` : undefined; return ( <>

Integrations

{workspaceIntegrations ? ( workspaceIntegrations.length > 0 ? (
{workspaceIntegrations.map((integration) => ( ))}
) : (
router.push(`/${workspaceSlug}/settings/integrations`), }} size="lg" disabled={!isAdmin} />
) ) : ( )}
); }); ProjectIntegrationsPage.getLayout = function getLayout(page: ReactElement) { return ( }> {page} ); }; export default ProjectIntegrationsPage;