Feat/GitHub integration (#1473)

* WIP: GitHub Integration

* WIP: Github Integration

* WIP: Github integration

* Refactore Code

* WIP: Github Integration

* WIP: Github integration

* WIP: Github Integration

* WIP: Github Integration

* fix: Updated GitHub Integration UI

* fix: undefined error

* fix: Lint error and added repository

* Updated State

* fix: Updated install API body as per updated API

* fix: Github Repo fetching

* Update constants.ts

---------

Co-authored-by: Ruslan K <[email protected]>

apps/web/.env

@@ -54,3 +54,6 @@ NEXT_PUBLIC_SENTRY_DEBUG=false # true/false
 # JITSU
 JITSU_BROWSER_URL=
 JITSU_BROWSER_WRITE_KEY=
+
+# Github Integration
+NEXT_PUBLIC_GITHUB_APP_NAME=ever-github

apps/web/.env.sample

@@ -37,3 +37,6 @@ NEXT_PUBLIC_SENTRY_DEBUG=false # true/false
 # Jitsu
 JITSU_BROWSER_URL=
 JITSU_BROWSER_WRITE_KEY=
+
+# Github Integration
+NEXT_PUBLIC_GITHUB_APP_NAME=ever-github

apps/web/app/constants.ts

@@ -52,6 +52,7 @@ export const APP_LOGO_URL =
 export const APP_LINK = process.env.APP_LINK || 'https://ever.team/';
 
 export const CHARACTER_LIMIT_TO_SHOW = 20;
+
 export const smtpConfiguration: () => I_SMTPRequest = () => ({
 	fromAddress: SMTP_FROM_ADDRESS,
 	host: SMTP_HOST,
@@ -84,6 +85,9 @@ export const jitsuConfiguration: ExtendedJitsuOptions = {
 	host: process.env.JITSU_BROWSER_URL || '',
 	writeKey: process.env.JITSU_BROWSER_WRITE_KEY || '',
 	disabled: false,
-	echoEvents: false, //if enabled - events will be sent to console but no data sent to Jitsu strange this is not mentioned in the documentation https://github.com/jitsucom/jitsu/blob/35c4ecaff54d61a87853381cb17262b7bfbd4a6e/libs/jitsu-js/src/jitsu.ts#L40
+	echoEvents: false, //if enabled - events will be sent to the console but no data sent to Jitsu strange this is not mentioned in the documentation https://github.com/jitsucom/jitsu/blob/35c4ecaff54d61a87853381cb17262b7bfbd4a6e/libs/jitsu-js/src/jitsu.ts#L40
 	debug: false
 };
+
+// Github Integration
+export const GITHUB_APP_NAME = process.env.NEXT_PUBLIC_GITHUB_APP_NAME || 'ever-github';

apps/web/app/hooks/index.ts

@@ -57,3 +57,8 @@ export * from './features/useTaskRelatedIssueType';
 
 export * from './features/useRolePermissions';
 export * from './features/useRefetchData';
+
+export * from './integrations/useGitHubIntegration';
+export * from './integrations/useIntegration';
+export * from './integrations/useIntegrationTenant';
+export * from './integrations/useIntegrationTypes';

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

@@ -0,0 +1,94 @@
+import {
+	getGithubIntegrationMetadataAPI,
+	getGithubIntegrationRepositoriesAPI,
+	installGitHubIntegrationAPI,
+	oAuthEndpointAuthorizationAPI,
+} from '@app/services/client/api/integrations/github';
+import {
+	integrationGithubMetadataState,
+	integrationGithubRepositoriesState,
+	userState,
+} from '@app/stores';
+import { useCallback } from 'react';
+import { useRecoilState } from 'recoil';
+import { useQuery } from '../useQuery';
+
+export function useGitHubIntegration() {
+	const [user] = useRecoilState(userState);
+
+	const [integrationGithubMetadata, setIntegrationGithubMetadata] =
+		useRecoilState(integrationGithubMetadataState);
+	const [integrationGithubRepositories, setIntegrationGithubRepositories] =
+		useRecoilState(integrationGithubRepositoriesState);
+
+	const { loading: installLoading, queryCall: installQueryCall } = useQuery(
+		installGitHubIntegrationAPI
+	);
+	const { loading: oAuthLoading, queryCall: oAuthQueryCall } = useQuery(
+		oAuthEndpointAuthorizationAPI
+	);
+	const { loading: metadataLoading, queryCall: metadataQueryCall } = useQuery(
+		getGithubIntegrationMetadataAPI
+	);
+	const { loading: repositoriesLoading, queryCall: repositoriesQueryCall } =
+		useQuery(getGithubIntegrationRepositoriesAPI);
+
+	const installGitHub = useCallback(
+		(installation_id: string, setup_action: string) => {
+			return installQueryCall({
+				tenantId: user?.tenantId as string,
+				organizationId: user?.employee?.organizationId as string,
+				installation_id,
+				setup_action,
+			});
+		},
+		[installQueryCall, user]
+	);
+	const oAuthGitHub = useCallback(
+		(installation_id: string, setup_action: string, code: string) => {
+			return oAuthQueryCall({
+				tenantId: user?.tenantId as string,
+				organizationId: user?.employee?.organizationId as string,
+				installation_id,
+				setup_action,
+				code,
+			});
+		},
+		[oAuthQueryCall, user]
+	);
+	const metaData = useCallback(
+		(integrationId: string) => {
+			return metadataQueryCall(integrationId).then((response) => {
+				setIntegrationGithubMetadata(response.data.data);
+
+				return response.data.data;
+			});
+		},
+		[metadataQueryCall, setIntegrationGithubMetadata]
+	);
+	const getRepositories = useCallback(
+		(integrationId: string) => {
+			return repositoriesQueryCall(integrationId).then((response) => {
+				setIntegrationGithubRepositories(response.data.data);
+
+				return response.data.data;
+			});
+		},
+		[repositoriesQueryCall, setIntegrationGithubRepositories]
+	);
+
+	return {
+		installLoading,
+		installQueryCall,
+		installGitHub,
+		oAuthLoading,
+		oAuthQueryCall,
+		oAuthGitHub,
+		metaData,
+		metadataLoading,
+		getRepositories,
+		repositoriesLoading,
+		integrationGithubMetadata,
+		integrationGithubRepositories,
+	};
+}

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

@@ -0,0 +1,29 @@
+import { getIntegrationAPI } from '@app/services/client/api';
+import { integrationState } from '@app/stores';
+import { useCallback } from 'react';
+import { useRecoilState } from 'recoil';
+import { useQuery } from '../useQuery';
+
+export function useIntegration() {
+	const [integration, setIntegration] = useRecoilState(integrationState);
+
+	const { loading: loading, queryCall: queryCall } =
+		useQuery(getIntegrationAPI);
+
+	const getIntegration = useCallback(
+		(name: string) => {
+			return queryCall(name).then((response) => {
+				setIntegration(response.data.data);
+
+				return response.data.data;
+			});
+		},
+		[queryCall, setIntegration]
+	);
+
+	return {
+		loading,
+		getIntegration,
+		integration,
+	};
+}

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

@@ -0,0 +1,32 @@
+import { getIntegrationTenantAPI } from '@app/services/client/api';
+import { integrationTenantState } from '@app/stores';
+import { useCallback } from 'react';
+import { useRecoilState } from 'recoil';
+import { useQuery } from '../useQuery';
+
+export function useIntegrationTenant() {
+	const [integrationTenant, setIntegrationTenant] = useRecoilState(
+		integrationTenantState
+	);
+
+	const { loading: loading, queryCall: queryCall } = useQuery(
+		getIntegrationTenantAPI
+	);
+
+	const getIntegrationTenant = useCallback(
+		(name: string) => {
+			return queryCall(name).then((response) => {
+				setIntegrationTenant(response.data.data);
+
+				return response.data.data;
+			});
+		},
+		[queryCall, setIntegrationTenant]
+	);
+
+	return {
+		loading,
+		getIntegrationTenant,
+		integrationTenant,
+	};
+}

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

@@ -0,0 +1,29 @@
+import { getIntegrationTypesAPI } from '@app/services/client/api';
+import { integrationTypesState } from '@app/stores';
+import { useCallback } from 'react';
+import { useRecoilState } from 'recoil';
+import { useQuery } from '../useQuery';
+
+export function useIntegrationTypes() {
+	const [integrationTypes, setIntegrationTypes] = useRecoilState(
+		integrationTypesState
+	);
+
+	const { loading: loading, queryCall: queryCall } = useQuery(
+		getIntegrationTypesAPI
+	);
+
+	const getIntegrationTypes = useCallback(() => {
+		return queryCall().then((response) => {
+			setIntegrationTypes(response.data.data);
+
+			return response.data.data;
+		});
+	}, [queryCall, setIntegrationTypes]);
+
+	return {
+		loading,
+		getIntegrationTypes,
+		integrationTypes,
+	};
+}

apps/web/app/interfaces/index.ts

@@ -31,3 +31,9 @@ export * from './ITheme';
 export * from './IRolePermissions';
 export * from './ITimer';
 export * from './IProject';
+
+export * from './integrations/IGithubRepositories';
+export * from './integrations/IGithubMetadata';
+export * from './integrations/IIntegrationTenant';
+export * from './integrations/IIntegrationType';
+export * from './integrations/IIntegration';

apps/web/app/interfaces/integrations/IGithubMetadata.ts

@@ -0,0 +1,43 @@
+export interface IGithubMetadata {
+	id: number;
+	account: {
+		login: string;
+		id: number;
+		node_id: string;
+		avatar_url: string;
+		gravatar_id: string;
+		url: string;
+		html_url: string;
+		followers_url: string;
+		following_url: string;
+		gists_url: string;
+		starred_url: string;
+		subscriptions_url: string;
+		organizations_url: string;
+		repos_url: string;
+		events_url: string;
+		received_events_url: string;
+		type: string;
+		site_admin: boolean;
+	};
+	repository_selection: string;
+	access_tokens_url: string;
+	repositories_url: string;
+	html_url: string;
+	app_id: number;
+	app_slug: string;
+	target_id: number;
+	target_type: string;
+	permissions: {
+		issues: string;
+		metadata: string;
+	};
+	events: string[];
+	created_at: string | Date;
+	updated_at: string | Date;
+	single_file_name: string | null;
+	has_multiple_single_files: boolean;
+	single_file_paths: string[];
+	suspended_by: string | number | null;
+	suspended_at: string | number | null;
+}