GitHub integration fixes (#1739)

* Added Delete Integration, WIP multiple API calling issue

* Updated APi calling

* fix: Multiple API calling issue

apps/web/app/hooks/integrations/useGitHubIntegration.ts

@@ -115,6 +115,7 @@ export function useGitHubIntegration() {
 		repositoriesLoading,
 		integrationGithubMetadata,
 		integrationGithubRepositories,
+		setIntegrationGithubRepositories,
 		syncGitHubRepository,
 		syncGitHubRepositoryLoading
 	};

apps/web/app/hooks/integrations/useIntegrationTenant.ts

@@ -1,13 +1,17 @@
-import { getIntegrationTenantAPI } from '@app/services/client/api';
+import { deleteIntegrationTenantAPI, getIntegrationTenantAPI } from '@app/services/client/api';
 import { integrationTenantState } from '@app/stores';
 import { useCallback } from 'react';
 import { useRecoilState } from 'recoil';
 import { useQuery } from '../useQuery';
+import { useGitHubIntegration } from './useGitHubIntegration';
 
 export function useIntegrationTenant() {
 	const [integrationTenant, setIntegrationTenant] = useRecoilState(integrationTenantState);
 
+	const { setIntegrationGithubRepositories } = useGitHubIntegration();
+
 	const { loading: loading, queryCall: queryCall } = useQuery(getIntegrationTenantAPI);
+	const { loading: deleteLoading, queryCall: deleteQueryCall } = useQuery(deleteIntegrationTenantAPI);
 
 	const getIntegrationTenant = useCallback(
 		(name: string) => {
@@ -20,9 +24,21 @@ export function useIntegrationTenant() {
 		[queryCall, setIntegrationTenant]
 	);
 
+	const deleteIntegrationTenant = useCallback(
+		(integrationId: string) => {
+			return deleteQueryCall(integrationId).then(() => {
+				setIntegrationTenant([]);
+				setIntegrationGithubRepositories(null);
+			});
+		},
+		[deleteQueryCall, setIntegrationTenant, setIntegrationGithubRepositories]
+	);
+
 	return {
 		loading,
 		getIntegrationTenant,
-		integrationTenant
+		integrationTenant,
+		deleteIntegrationTenant,
+		deleteLoading
 	};
 }

apps/web/app/services/client/api/integrations/integration-tenant.ts

@@ -1,8 +1,12 @@
-import { IIntegrationTenant, PaginationResponse, CreateResponse } from '@app/interfaces';
+import { IIntegrationTenant, PaginationResponse, CreateResponse, DeleteResponse } from '@app/interfaces';
 import api from '../../axios';
 
 export function getIntegrationTenantAPI(name: string) {
 	return api.get<CreateResponse<PaginationResponse<IIntegrationTenant>>>(
 		`/integration-tenant/remember/state?name=${name}`
 	);
 }
+
+export function deleteIntegrationTenantAPI(integrationId: string) {
+	return api.delete<DeleteResponse>(`/integration-tenant/${integrationId}`);
+}

apps/web/app/services/server/requests/integrations/integration-tenant.ts

@@ -15,7 +15,7 @@ export function getIntegrationTenantRequest(
 	const query = new URLSearchParams({
 		'where[organizationId]': organizationId,
 		'where[tenantId]': tenantId,
-		'where[name]': name,
+		'where[name]': name
 	});
 	return serverFetch<IIntegrationTenant>({
 		path: `/integration-tenant?${query.toString()}`,
@@ -24,3 +24,12 @@ export function getIntegrationTenantRequest(
 		tenantId: tenantId
 	});
 }
+
+export function deleteIntegrationTenantRequest(integrationId: string, tenantId: string, bearer_token: string) {
+	return serverFetch<IIntegrationTenant>({
+		path: `/integration-tenant/${integrationId}`,
+		method: 'DELETE',
+		bearer_token,
+		tenantId
+	});
+}

apps/web/lib/settings/integration-setting.tsx

@@ -57,7 +57,12 @@ export const IntegrationSetting = () => {
 
 	const { editOrganizationProjectSetting, editOrganizationProject } = useOrganizationProjects();
 
-	const { getIntegrationTenant, loading: integrationTenantLoading, integrationTenant } = useIntegrationTenant();
+	const {
+		getIntegrationTenant,
+		loading: integrationTenantLoading,
+		integrationTenant,
+		deleteIntegrationTenant
+	} = useIntegrationTenant();
 
 	useEffect(() => {
 		if (integrationTenant && integrationTenant.length) {
@@ -149,6 +154,15 @@ export const IntegrationSetting = () => {
 		[editOrganizationProject]
 	);
 
+	const handleDeleteIntegrationTenant = useCallback(() => {
+		if (integrationTenant && integrationTenant.length) {
+			deleteIntegrationTenant(integrationTenant[0].id).then(() => {
+				getIntegrationTenant('Github');
+				setSelectedRepo(undefined);
+			});
+		}
+	}, [integrationTenant, deleteIntegrationTenant, getIntegrationTenant]);
+
 	return (
 		<div className="flex flex-col gap-2">
 			<div className="flex justify-between items-center mt-8">
@@ -198,6 +212,9 @@ export const IntegrationSetting = () => {
 										<TrashIcon />
 									</Button>
 								)}
+								<Button variant="outline-danger" onClick={handleDeleteIntegrationTenant}>
+									Delete GitHub Integration
+								</Button>
 							</div>
 						)}
 						<div className="flex flex-row items-center gap-3">

apps/web/pages/api/integration-tenant/[id].ts

@@ -0,0 +1,20 @@
+import { authenticatedGuard } from '@app/services/server/guards/authenticated-guard';
+import { deleteIntegrationTenantRequest } from '@app/services/server/requests';
+import { NextApiRequest, NextApiResponse } from 'next';
+
+export default async function handler(req: NextApiRequest, res: NextApiResponse) {
+	const { $res, user, access_token, tenantId } = await authenticatedGuard(req, res);
+	if (!user) return $res();
+
+	const { id } = req.query;
+
+	if (req.method !== 'DELETE') {
+		return $res.status(405).json({});
+	}
+
+	if (id) {
+		const response = await deleteIntegrationTenantRequest(id as string, tenantId, access_token);
+
+		return $res.status(200).json(response);
+	}
+}

apps/web/pages/integration/github.tsx

@@ -2,11 +2,13 @@ import { useIntegrationTenant, useIntegrationTypes } from '@app/hooks';
 import { useGitHubIntegration } from '@app/hooks/integrations/useGitHubIntegration';
 import { withAuthentication } from 'lib/app/authenticator';
 import { useRouter } from 'next/router';
-import { useEffect } from 'react';
+import { useCallback, useEffect, useRef } from 'react';
 
 const GitHub = () => {
 	const router = useRouter();
 
+	const installing = useRef<boolean>(false);
+
 	const { installGitHub, getRepositories } = useGitHubIntegration();
 	// const { loading: integrationLoading } = useIntegration();
 	const { getIntegrationTenant, loading: integrationTenantLoading, integrationTenant } = useIntegrationTenant();
@@ -20,7 +22,9 @@ const GitHub = () => {
 	// const queries = new URLSearchParams(params || {});
 	// const url = `https://github.com/apps/badal-ever-testing-probot/installations/new?${queries.toString()}`;
 
-	useEffect(() => {
+	const handleInstallGitHub = useCallback(() => {
+		installing.current = true;
+
 		if (router && router.query.installation_id && router.query.setup_action) {
 			setTimeout(() => {
 				installGitHub(router.query.installation_id as string, router.query.setup_action as string).then(() => {
@@ -30,6 +34,14 @@ const GitHub = () => {
 		}
 	}, [installGitHub, router]);
 
+	useEffect(() => {
+		if (installing.current) {
+			return;
+		}
+
+		handleInstallGitHub();
+	}, [handleInstallGitHub]);
+
 	useEffect(() => {
 		if (!integrationTenantLoading && integrationTenant && integrationTenant.length && integrationTenant[0]?.id) {
 			getRepositories(integrationTenant[0].id);