feat: frontend slack integration (#932)

* feat: slack integration frontend

* feat: slack integration frontend complete

* Co-authored-by: Aaryan Khandelwal <aaryan610@users.noreply.github.com>

apps/app/components/integration/index.ts

@@ -8,3 +8,5 @@ export * from "./single-integration-card";
 export * from "./github";
 // jira
 export * from "./jira";
+// slack
+export * from "./slack";

apps/app/components/integration/single-integration-card.tsx

@@ -11,7 +11,7 @@ import IntegrationService from "services/integration";
 import useToast from "hooks/use-toast";
 import useIntegrationPopup from "hooks/use-integration-popup";
 // ui
-import { DangerButton, Loader, SecondaryButton } from "components/ui";
+import { DangerButton, Loader, PrimaryButton } from "components/ui";
 // icons
 import GithubLogo from "public/services/github.png";
 import SlackLogo from "public/services/slack.png";
@@ -33,7 +33,7 @@ const integrationDetails: { [key: string]: any } = {
   },
   slack: {
     logo: SlackLogo,
-    installed: "Activate Slack integrations on individual projects to sync with specific cahnnels.",
+    installed: "Activate Slack integrations on individual projects to sync with specific channels.",
     notInstalled: "Connect with Slack with your Plane workspace to sync project issues.",
   },
 };
@@ -139,9 +139,9 @@ export const SingleIntegrationCard: React.FC<Props> = ({ integration }) => {
             {deletingIntegration ? "Removing..." : "Remove installation"}
           </DangerButton>
         ) : (
-          <SecondaryButton onClick={startAuth} loading={isInstalling}>
+          <PrimaryButton onClick={startAuth} loading={isInstalling}>
             {isInstalling ? "Installing..." : "Add installation"}
-          </SecondaryButton>
+          </PrimaryButton>
         )
       ) : (
         <Loader>

apps/app/components/integration/slack/index.ts

@@ -0,0 +1 @@
+export * from "./select-channel";

apps/app/components/integration/slack/select-channel.tsx

@@ -0,0 +1,105 @@
+import React, { useState, useEffect } from "react";
+
+import { useRouter } from "next/router";
+
+import useSWR, { mutate } from "swr";
+// services
+import appinstallationsService from "services/app-installations.service";
+
+// ui
+import { Loader } from "components/ui";
+// hooks
+import useToast from "hooks/use-toast";
+import useIntegrationPopup from "hooks/use-integration-popup";
+// types
+import { IWorkspaceIntegration } from "types";
+// fetch-keys
+import { SLACK_CHANNEL_INFO } from "constants/fetch-keys";
+
+type Props = {
+  integration: IWorkspaceIntegration;
+};
+
+export const SelectChannel: React.FC<Props> = ({ integration }) => {
+  const [deletingProjectSync, setDeletingProjectSync] = useState(false);
+
+  const router = useRouter();
+  const { workspaceSlug, projectId } = router.query;
+
+  const { startAuth } = useIntegrationPopup("slackChannel", integration.id);
+
+  const { data: projectIntegration } = useSWR(
+    workspaceSlug && projectId && integration.id
+      ? SLACK_CHANNEL_INFO(workspaceSlug as string, projectId as string)
+      : null,
+    () =>
+      workspaceSlug && projectId && integration.id
+        ? appinstallationsService.getSlackChannelDetail(
+            workspaceSlug as string,
+            projectId as string,
+            integration.id as string
+          )
+        : null
+  );
+
+  useEffect(() => {
+    if (projectIntegration?.length > 0) {
+      setDeletingProjectSync(true);
+    }
+    if (projectIntegration?.length === 0) {
+      setDeletingProjectSync(false);
+    }
+  }, [projectIntegration]);
+
+  const handleDelete = async () => {
+    if (projectIntegration.length === 0) return;
+    mutate(SLACK_CHANNEL_INFO, (prevData: any) => {
+      if (!prevData) return;
+      return prevData.id !== integration.id;
+    }).then(() => setDeletingProjectSync(false));
+    appinstallationsService
+      .removeSlackChannel(
+        workspaceSlug as string,
+        projectId as string,
+        integration.id as string,
+        projectIntegration?.[0]?.id
+      )
+      .catch((err) => console.log(err));
+  };
+
+  const handleAuth = async () => {
+    await startAuth();
+    setDeletingProjectSync(true);
+  };
+
+  return (
+    <>
+      {projectIntegration ? (
+        <button
+          type="button"
+          className={`relative inline-flex h-6 w-11 flex-shrink-0 cursor-pointer rounded-full border-2 border-transparent transition-colors duration-200 ease-in-out focus:outline-none ${
+            projectIntegration.length > 0 && deletingProjectSync ? "bg-green-500" : "bg-gray-200"
+          }`}
+          role="switch"
+          aria-checked
+          onClick={() => {
+            deletingProjectSync ? handleDelete() : handleAuth();
+          }}
+        >
+          <span
+            aria-hidden="true"
+            className={`inline-block h-5 w-5 transform rounded-full bg-white shadow ring-0 transition duration-200 ease-in-out ${
+              projectIntegration.length > 0 && deletingProjectSync
+                ? "translate-x-5"
+                : "translate-x-0"
+            }`}
+          />
+        </button>
+      ) : (
+        <Loader>
+          <Loader.Item height="35px" width="150px" />
+        </Loader>
+      )}
+    </>
+  );
+};

apps/app/components/project/single-integration-card.tsx

@@ -10,18 +10,34 @@ import projectService from "services/project.service";
 import { useRouter } from "next/router";
 import useToast from "hooks/use-toast";
 // components
-import { SelectRepository } from "components/integration";
+import { SelectRepository, SelectChannel } from "components/integration";
 // icons
 import GithubLogo from "public/logos/github-square.png";
+import SlackLogo from "public/services/slack.png";
 // types
 import { IWorkspaceIntegration } from "types";
 // fetch-keys
 import { PROJECT_GITHUB_REPOSITORY } from "constants/fetch-keys";
+import { comboMatches } from "@blueprintjs/core";
 
 type Props = {
   integration: IWorkspaceIntegration;
 };
 
+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 cahnnels.",
+    notInstalled: "Connect with Slack with your Plane workspace to sync project issues.",
+  },
+};
+
 export const SingleIntegration: React.FC<Props> = ({ integration }) => {
   const router = useRouter();
   const { workspaceSlug, projectId } = router.query;
@@ -83,29 +99,43 @@ export const SingleIntegration: React.FC<Props> = ({ integration }) => {
         <div className="flex items-center justify-between gap-2 rounded-[10px] border border-brand-base bg-brand-surface-1 p-5">
           <div className="flex items-start gap-4">
             <div className="h-12 w-12 flex-shrink-0">
-              <Image src={GithubLogo} alt="GithubLogo" />
+              <Image
+                src={integrationDetails[integration.integration_detail.provider].logo}
+                alt="GithubLogo"
+              />
             </div>
             <div>
               <h3 className="flex items-center gap-4 text-xl font-semibold">
                 {integration.integration_detail.title}
               </h3>
-              <p className="text-sm text-gray-400">Select GitHub repository to enable sync.</p>
+              <p className="text-sm text-gray-400">
+                {integration.integration_detail.provider === "github"
+                  ? "Select GitHub repository to enable sync."
+                  : integration.integration_detail.provider === "slack"
+                  ? "Connect your slack channel to this project to get regular updates. Control which notification you want to receive"
+                  : null}
+              </p>
             </div>
           </div>
-          <SelectRepository
-            integration={integration}
-            value={
-              syncedGithubRepository && syncedGithubRepository.length > 0
-                ? `${syncedGithubRepository[0].repo_detail.owner}/${syncedGithubRepository[0].repo_detail.name}`
-                : null
-            }
-            label={
-              syncedGithubRepository && syncedGithubRepository.length > 0
-                ? `${syncedGithubRepository[0].repo_detail.owner}/${syncedGithubRepository[0].repo_detail.name}`
-                : "Select Repository"
-            }
-            onChange={handleChange}
-          />
+          {integration.integration_detail.provider === "github" && (
+            <SelectRepository
+              integration={integration}
+              value={
+                syncedGithubRepository && syncedGithubRepository.length > 0
+                  ? `${syncedGithubRepository[0].repo_detail.owner}/${syncedGithubRepository[0].repo_detail.name}`
+                  : null
+              }
+              label={
+                syncedGithubRepository && syncedGithubRepository.length > 0
+                  ? `${syncedGithubRepository[0].repo_detail.owner}/${syncedGithubRepository[0].repo_detail.name}`
+                  : "Select Repository"
+              }
+              onChange={handleChange}
+            />
+          )}
+          {integration.integration_detail.provider === "slack" && (
+            <SelectChannel integration={integration} />
+          )}
         </div>
       )}
     </>