feat: frontend slack integration (#932)

* feat: slack integration frontend

* feat: slack integration frontend complete

* Co-authored-by: Aaryan Khandelwal <aaryan610@users.noreply.github.com>
This commit is contained in:
Kunal Vishwakarma 2023-04-22 21:54:50 +05:30 committed by GitHub
parent d99f669b89
commit c80094581e
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
12 changed files with 308 additions and 31 deletions

View File

@ -9,3 +9,4 @@ NEXT_PUBLIC_ENABLE_OAUTH=0
NEXT_PUBLIC_ENABLE_SENTRY=0
NEXT_PUBLIC_ENABLE_SESSION_RECORDER=0
NEXT_PUBLIC_TRACK_EVENTS=0
NEXT_PUBLIC_SLACK_CLIENT_ID=""

View File

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

View File

@ -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>

View File

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

View File

@ -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>
)}
</>
);
};

View File

@ -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,15 +99,25 @@ 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>
{integration.integration_detail.provider === "github" && (
<SelectRepository
integration={integration}
value={
@ -106,6 +132,10 @@ export const SingleIntegration: React.FC<Props> = ({ integration }) => {
}
onChange={handleChange}
/>
)}
{integration.integration_detail.provider === "slack" && (
<SelectChannel integration={integration} />
)}
</div>
)}
</>

View File

@ -138,6 +138,10 @@ export const IMPORTER_SERVICES_LIST = (workspaceSlug: string) =>
export const GITHUB_REPOSITORY_INFO = (workspaceSlug: string, repoName: string) =>
`GITHUB_REPO_INFO_${workspaceSlug.toString().toUpperCase()}_${repoName.toUpperCase()}`;
// slack-project-integration
export const SLACK_CHANNEL_INFO = (workspaceSlug: string, projectId: string) =>
`SLACK_CHANNEL_INFO_${workspaceSlug.toString().toUpperCase()}_${projectId.toUpperCase()}`;
// Calendar
export const PROJECT_CALENDAR_ISSUES = (projectId: string) =>
`CALENDAR_ISSUES_${projectId.toUpperCase()}`;

View File

@ -2,17 +2,24 @@ import { useRef, useState } from "react";
import { useRouter } from "next/router";
const useIntegrationPopup = (provider: string | undefined) => {
const useIntegrationPopup = (provider: string | undefined, stateParams?: string) => {
const [authLoader, setAuthLoader] = useState(false);
const router = useRouter();
const { workspaceSlug } = router.query;
const { workspaceSlug, projectId } = router.query;
const providerUrls: { [key: string]: string } = {
github: `https://github.com/apps/${
process.env.NEXT_PUBLIC_GITHUB_APP_NAME
}/installations/new?state=${workspaceSlug as string}`,
slack: "",
}/installations/new?state=${workspaceSlug?.toString()}`,
slack: `https://slack.com/oauth/v2/authorize?scope=chat%3Awrite%2Cim%3Ahistory%2Cim%3Awrite%2Clinks%3Aread%2Clinks%3Awrite%2Cusers%3Aread%2Cusers%3Aread.email&amp;user_scope=&amp;&client_id=${
process.env.NEXT_PUBLIC_SLACK_CLIENT_ID
}&state=${workspaceSlug?.toString()}`,
slackChannel: `https://slack.com/oauth/v2/authorize?scope=incoming-webhook&client_id=${
process.env.NEXT_PUBLIC_SLACK_CLIENT_ID
}&state=${workspaceSlug?.toString()},${projectId?.toString()}${
stateParams ? "," + stateParams : ""
}`,
};
const popup = useRef<any>();

View File

@ -0,0 +1,23 @@
// pages/api/slack/authorize.js
import axios from "axios";
import { NextApiRequest, NextApiResponse } from "next";
export default async function handleSlackAuthorize(req: NextApiRequest, res: NextApiResponse) {
const { code } = req.body;
if (!code || code === "") return res.status(400).json({ message: "Code is required" });
const response = await axios({
method: "post",
url: "https://slack.com/api/oauth.v2.access",
params: {
client_id: process.env.NEXT_PUBLIC_SLACK_CLIENT_ID,
client_secret: process.env.NEXT_PUBLIC_SLACK_CLIENT_SECRET,
code,
},
});
// if (response?.data?.ok)
res.status(200).json(response.data);
// else res.status(404).json(response.data);
}

View File

@ -2,14 +2,20 @@ import React, { useEffect } from "react";
// services
import appinstallationsService from "services/app-installations.service";
import useToast from "hooks/use-toast";
// components
import { Spinner } from "components/ui";
import { useRouter } from "next/router";
interface IGithuPostInstallationProps {
installation_id: string;
setup_action: string;
state: string;
provider: string;
code: string;
}
// TODO:Change getServerSideProps to router.query
@ -18,12 +24,16 @@ const AppPostInstallation = ({
setup_action,
state,
provider,
code,
}: IGithuPostInstallationProps) => {
const { setToastAlert } = useToast();
useEffect(() => {
if (state && installation_id) {
if (provider === "github" && state && installation_id) {
appinstallationsService
.addGithubApp(state, provider, { installation_id })
.then((res) => {
.addInstallationApp(state, provider, { installation_id })
.then(() => {
window.opener = null;
window.open("", "_self");
window.close();
@ -31,8 +41,56 @@ const AppPostInstallation = ({
.catch((err) => {
console.log(err);
});
} else if (provider === "slack" && state && code) {
appinstallationsService
.getSlackAuthDetails(code)
.then((res) => {
const [workspaceSlug, projectId, integrationId] = state.split(",");
if(!projectId) {
const payload = {
metadata: {
...res,
},
};
appinstallationsService
.addInstallationApp(state, provider, payload)
.then((r) => {
window.opener = null;
window.open("", "_self");
window.close();
})
.catch((err) => {
throw err?.response;
});
} else {
const payload = {
access_token: res.access_token,
bot_user_id: res.bot_user_id,
webhook_url: res.incoming_webhook.url,
data: res,
team_id: res.team.id,
team_name: res.team.name,
scopes: res.scope,
};
appinstallationsService
.addSlackChannel(workspaceSlug, projectId, integrationId, payload)
.then((r) => {
window.opener = null;
window.open("", "_self");
window.close();
})
.catch((err) => {
throw err.response
})
}
}, [state, installation_id, provider]);
})
.catch((err) => {
console.log(err);
});
}
}, [state, installation_id, provider, code]);
return (
<div className="absolute top-0 left-0 z-50 flex h-full w-full flex-col items-center justify-center gap-y-3 bg-brand-surface-2">

View File

@ -1,4 +1,5 @@
// services
import axios from "axios";
import APIService from "services/api.service";
const { NEXT_PUBLIC_API_BASE_URL } = process.env;
@ -8,13 +9,56 @@ class AppInstallationsService extends APIService {
super(NEXT_PUBLIC_API_BASE_URL || "http://localhost:8000");
}
async addGithubApp(workspaceSlug: string, provider: string, data: any): Promise<any> {
async addInstallationApp(workspaceSlug: string, provider: string, data: any): Promise<any> {
return this.post(`/api/workspaces/${workspaceSlug}/workspace-integrations/${provider}/`, data)
.then((response) => response?.data)
.catch((error) => {
throw error?.response;
});
}
async addSlackChannel(workspaceSlug: string, projectId: string, integrationId: string | null | undefined, data: any): Promise<any> {
return this.post(
`/api/workspaces/${workspaceSlug}/projects/${projectId}/workspace-integrations/${integrationId}/project-slack-sync/`,
data
)
.then((response) => response?.data)
.catch((error) => {
throw error?.response;
});
}
async getSlackChannelDetail(workspaceSlug: string, projectId: string, integrationId: string | null | undefined): Promise<any> {
return this.get(
`/api/workspaces/${workspaceSlug}/projects/${projectId}/workspace-integrations/${integrationId}/project-slack-sync/`
)
.then((response) => response?.data)
.catch((error) => {
throw error?.response;
});
}
async removeSlackChannel(workspaceSlug: string, projectId: string, integrationId: string | null | undefined, slackSyncId: string | undefined): Promise<any> {
return this.delete(
`/api/workspaces/${workspaceSlug}/projects/${projectId}/workspace-integrations/${integrationId}/project-slack-sync/${slackSyncId}`
)
.then((response) => response?.data)
.catch((error) => {
throw error?.response;
});
}
async getSlackAuthDetails(code: string): Promise<any> {
const response = await axios({
method: "post",
url: "/api/slack-redirect",
data: {
code,
},
});
return response.data;
}
}
export default new AppInstallationsService();

View File

@ -16,7 +16,9 @@
"TRACKER_ACCESS_KEY",
"NEXT_PUBLIC_CRISP_ID",
"NEXT_PUBLIC_ENABLE_SESSION_RECORDER",
"NEXT_PUBLIC_SESSION_RECORDER_KEY"
"NEXT_PUBLIC_SESSION_RECORDER_KEY",
"NEXT_PUBLIC_SLACK_CLIENT_ID",
"NEXT_PUBLIC_SLACK_CLIENT_SECRET"
],
"pipeline": {
"build": {