From f1636c1387a1fa85016bc2edea9c26ac214900de Mon Sep 17 00:00:00 2001
From: Prateek Shourya <prateekshourya29@gmail.com>
Date: Mon, 17 Jun 2024 20:17:53 +0530
Subject: [PATCH] [WEB-1595] chore: add projects integrations settings. (#426)

---
 .../settings/integrations/page.tsx            | 71 +++++++++++++++++++
 1 file changed, 71 insertions(+)
 create mode 100644 web/app/[workspaceSlug]/(projects)/projects/(detail)/[projectId]/settings/integrations/page.tsx

diff --git a/web/app/[workspaceSlug]/(projects)/projects/(detail)/[projectId]/settings/integrations/page.tsx b/web/app/[workspaceSlug]/(projects)/projects/(detail)/[projectId]/settings/integrations/page.tsx
new file mode 100644
index 0000000000..98d2d68e40
--- /dev/null
+++ b/web/app/[workspaceSlug]/(projects)/projects/(detail)/[projectId]/settings/integrations/page.tsx
@@ -0,0 +1,71 @@
+"use client";
+
+import { observer } from "mobx-react";
+import { useParams } from "next/navigation";
+import useSWR from "swr";
+// types
+import { IProject } from "@plane/types";
+// components
+import { PageHead } from "@/components/core";
+import { EmptyState } from "@/components/empty-state";
+import { IntegrationCard } from "@/components/project";
+import { IntegrationsSettingsLoader } from "@/components/ui";
+// constants
+import { EmptyStateType } from "@/constants/empty-state";
+// fetch-keys
+import { PROJECT_DETAILS, WORKSPACE_INTEGRATIONS } from "@/constants/fetch-keys";
+// services
+import { IntegrationService } from "@/services/integrations";
+import { ProjectService } from "@/services/project";
+
+// services
+const integrationService = new IntegrationService();
+const projectService = new ProjectService();
+
+const ProjectIntegrationsPage = observer(() => {
+  const { workspaceSlug, projectId } = useParams();
+  // fetch project details
+  const { data: projectDetails } = useSWR<IProject>(
+    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 (
+    <>
+      <PageHead title={pageTitle} />
+      <div className={`w-full gap-10 overflow-y-auto py-8 pr-9 ${isAdmin ? "" : "opacity-60"}`}>
+        <div className="flex items-center border-b border-custom-border-100 py-3.5">
+          <h3 className="text-xl font-medium">Integrations</h3>
+        </div>
+        {workspaceIntegrations ? (
+          workspaceIntegrations.length > 0 ? (
+            <div>
+              {workspaceIntegrations.map((integration) => (
+                <IntegrationCard key={integration.integration_detail.id} integration={integration} />
+              ))}
+            </div>
+          ) : (
+            <div className="h-full w-full py-8">
+              <EmptyState
+                type={EmptyStateType.PROJECT_SETTINGS_INTEGRATIONS}
+                primaryButtonLink={`/${workspaceSlug}/settings/integrations`}
+              />
+            </div>
+          )
+        ) : (
+          <IntegrationsSettingsLoader />
+        )}
+      </div>
+    </>
+  );
+});
+
+export default ProjectIntegrationsPage;