feat: github integration (#315)

* feat: initiate integrations

* feat: initiate github integration create models for the same

* feat: github integration views

* fix: update workspace integration view to create bot users

* refactor: rename repository model

* refactor: update github repo sync endpoint to create repo and sync in one go

* refactor: update issue activities to post the updates to segway hook

* refactor: update endpoints to get project id and add actor as a member of project in repo sync

* fix: make is bot as a read only field

* fix: remove github repo imports

* fix: url mapping

* feat: repo views

* refactor: update webhook request endpoint

* refactor: rename repositories table to github_repositories

* fix: workpace integration actor

* feat: label for github integration

* refactor: issue activity on create issue

* refactor: repo create endpoint and add db constraints for repo sync and issues

* feat: create api token on workpsace integration and avatar_url for integrations

* refactor: add uuid primary key for Audit model

* refactor: remove id from auditfield to maintain integrity and make avatar blank if none supplied

* feat: track comments on an issue

* feat: comment syncing from plane to github

* fix: prevent activities created by bot to be sent to webhook

* feat: github app installation id retrieve

* feat: github app installation id saved into db

* feat: installation_id for the github integragation and unique provider and project base integration for repo

* refactor: remove actor logic from activity task

* feat: saving github metadata using installation id in workspace integration table

* feat: github repositories endpoint

* feat: github and project repos synchronisation

* feat: delete issue and delete comment activity

* refactor: remove print logs

* FIX: reading env names for github app while installation

* refactor: update bot user firstname with title

* fix: add is_bot value in field

---------

Co-authored-by: venplane <venkatesh@plane.so>

apps/app/components/popup/index.tsx

@@ -0,0 +1,41 @@
+import { useRouter } from "next/router";
+import React, { useRef } from "react";
+
+const OAuthPopUp = ({ workspaceSlug, integration }: any) => {
+  const popup = useRef<any>();
+
+  const router = useRouter();
+
+  const checkPopup = () => {
+    const check = setInterval(() => {
+      if (!popup || popup.current.closed || popup.current.closed === undefined) {
+        clearInterval(check);
+      }
+    }, 1000);
+  };
+
+  const openPopup = () => {
+    const width = 600,
+      height = 600;
+    const left = window.innerWidth / 2 - width / 2;
+    const top = window.innerHeight / 2 - height / 2;
+    const url = `https://github.com/apps/${process.env.NEXT_PUBLIC_GITHUB_APP_NAME}/installations/new?state=${workspaceSlug}`;
+
+    return window.open(url, "", `width=${width}, height=${height}, top=${top}, left=${left}`);
+  };
+
+  const startAuth = () => {
+    popup.current = openPopup();
+    checkPopup();
+  };
+
+  return (
+    <>
+      <div>
+        <button onClick={startAuth}>{integration.title}</button>
+      </div>
+    </>
+  );
+};
+
+export default OAuthPopUp;

apps/app/constants/fetch-keys.ts

@@ -1,8 +1,11 @@
 export const CURRENT_USER = "CURRENT_USER";
 export const USER_WORKSPACE_INVITATIONS = "USER_WORKSPACE_INVITATIONS";
 export const USER_WORKSPACES = "USER_WORKSPACES";
+export const APP_INTEGRATIONS = "APP_INTEGRATIONS";
 
 export const WORKSPACE_DETAILS = (workspaceSlug: string) => `WORKSPACE_DETAILS_${workspaceSlug}`;
+export const WORKSPACE_INTEGRATIONS = (workspaceSlug: string) =>
+  `WORKSPACE_INTEGRATIONS_${workspaceSlug}`;
 
 export const WORKSPACE_MEMBERS = (workspaceSlug: string) => `WORKSPACE_MEMBERS_${workspaceSlug}`;
 export const WORKSPACE_MEMBERS_ME = (workspaceSlug: string) =>

apps/app/layouts/app-layout/index.tsx

@@ -61,6 +61,10 @@ const workspaceLinks: (wSlug: string) => Array<{
     label: "Billing & Plans",
     href: `/${workspaceSlug}/settings/billing`,
   },
+  {
+    label: "Integrations",
+    href: `/${workspaceSlug}/settings/integrations`,
+  },
 ];
 
 const sidebarLinks: (
@@ -94,6 +98,10 @@ const sidebarLinks: (
     label: "Labels",
     href: `/${workspaceSlug}/projects/${projectId}/settings/labels`,
   },
+  {
+    label: "Integrations",
+    href: `/${workspaceSlug}/projects/${projectId}/settings/integrations`,
+  },
 ];
 
 const AppLayout: FC<AppLayoutProps> = ({

apps/app/pages/[workspaceSlug]/projects/[projectId]/settings/integrations.tsx

@@ -0,0 +1,148 @@
+import React, { useEffect, useState } from "react";
+
+import { useRouter } from "next/router";
+import Image from "next/image";
+
+import useSWR, { mutate } from "swr";
+
+// lib
+import { requiredAdmin } from "lib/auth";
+// layouts
+import AppLayout from "layouts/app-layout";
+// services
+import workspaceService from "services/workspace.service";
+import projectService from "services/project.service";
+
+import { BreadcrumbItem, Breadcrumbs } from "components/breadcrumbs";
+// types
+import { IProject, IWorkspace } from "types";
+import type { NextPageContext, NextPage } from "next";
+// fetch-keys
+import { PROJECT_DETAILS, WORKSPACE_INTEGRATIONS } from "constants/fetch-keys";
+
+type TProjectIntegrationsProps = {
+  isMember: boolean;
+  isOwner: boolean;
+  isViewer: boolean;
+  isGuest: boolean;
+};
+
+const defaultValues: Partial<IProject> = {
+  project_lead: null,
+  default_assignee: null,
+};
+
+const ProjectIntegrations: NextPage<TProjectIntegrationsProps> = (props) => {
+  const { isMember, isOwner, isViewer, isGuest } = props;
+  const [userRepos, setUserRepos] = useState([]);
+  const [activeIntegrationId, setActiveIntegrationId] = useState();
+
+  const {
+    query: { workspaceSlug, projectId },
+  } = useRouter();
+
+  const { data: projectDetails } = useSWR<IProject>(
+    workspaceSlug && projectId ? PROJECT_DETAILS(projectId as string) : null,
+    workspaceSlug && projectId
+      ? () => projectService.getProject(workspaceSlug as string, projectId as string)
+      : null
+  );
+
+  const { data: integrations } = useSWR(
+    workspaceSlug ? WORKSPACE_INTEGRATIONS(workspaceSlug as string) : null,
+    () =>
+      workspaceSlug ? workspaceService.getWorkspaceIntegrations(workspaceSlug as string) : null
+  );
+  const handleChange = (repo: any) => {
+    const {
+      html_url,
+      owner: { login },
+      id,
+      name,
+    } = repo;
+
+    projectService
+      .syncGiuthubRepository(
+        workspaceSlug as string,
+        projectId as string,
+        activeIntegrationId as any,
+        { name, owner: login, repository_id: id, url: html_url }
+      )
+      .then((res) => {
+        console.log(res);
+      })
+      .catch((err) => {
+        console.log(err);
+      });
+  };
+  console.log(userRepos);
+  return (
+    <AppLayout
+      settingsLayout="project"
+      memberType={{ isMember, isOwner, isViewer, isGuest }}
+      breadcrumbs={
+        <Breadcrumbs>
+          <BreadcrumbItem
+            title={`${projectDetails?.name ?? "Project"}`}
+            link={`/${workspaceSlug}/projects/${projectId}/issues`}
+          />
+          <BreadcrumbItem title="Integrations" />
+        </Breadcrumbs>
+      }
+    >
+      <section className="space-y-8">
+        {integrations?.map((integration: any) => (
+          <div
+            key={integration.id}
+            onClick={() => {
+              setActiveIntegrationId(integration.id);
+              projectService
+                .getGithubRepositories(workspaceSlug as any, integration.id)
+                .then((response) => {
+                  setUserRepos(response.repositories);
+                })
+                .catch((err) => {
+                  console.log(err);
+                });
+            }}
+          >
+            {integration.integration_detail.provider}
+          </div>
+        ))}
+        {userRepos.length > 0 && (
+          <select
+            onChange={(e) => {
+              const repo = userRepos.find((repo: any) => repo.id == e.target.value);
+              handleChange(repo);
+            }}
+          >
+            <option value={undefined}>Select Repository</option>
+            {userRepos?.map((repo: any) => (
+              <option value={repo.id} key={repo.id}>
+                {repo.full_name}
+              </option>
+            ))}
+          </select>
+        )}
+      </section>
+    </AppLayout>
+  );
+};
+
+export const getServerSideProps = async (ctx: NextPageContext) => {
+  const projectId = ctx.query.projectId as string;
+  const workspaceSlug = ctx.query.workspaceSlug as string;
+
+  const memberDetail = await requiredAdmin(workspaceSlug, projectId, ctx.req?.headers.cookie);
+
+  return {
+    props: {
+      isOwner: memberDetail?.role === 20,
+      isMember: memberDetail?.role === 15,
+      isViewer: memberDetail?.role === 10,
+      isGuest: memberDetail?.role === 5,
+    },
+  };
+};
+
+export default ProjectIntegrations;

apps/app/pages/[workspaceSlug]/settings/integrations.tsx

@@ -0,0 +1,93 @@
+import React from "react";
+
+import { useRouter } from "next/router";
+import useSWR from "swr";
+
+// lib
+import type { NextPage, GetServerSideProps } from "next";
+import { requiredWorkspaceAdmin } from "lib/auth";
+// constants
+// services
+import workspaceService from "services/workspace.service";
+// layouts
+import AppLayout from "layouts/app-layout";
+// ui
+import { BreadcrumbItem, Breadcrumbs } from "components/breadcrumbs";
+import { WORKSPACE_DETAILS, APP_INTEGRATIONS } from "constants/fetch-keys";
+import OAuthPopUp from "components/popup";
+
+type TWorkspaceIntegrationsProps = {
+  isOwner: boolean;
+  isMember: boolean;
+  isViewer: boolean;
+  isGuest: boolean;
+};
+
+const WorkspaceIntegrations: NextPage<TWorkspaceIntegrationsProps> = (props) => {
+  const {
+    query: { workspaceSlug },
+  } = useRouter();
+
+  const { data: activeWorkspace } = useSWR(
+    workspaceSlug ? WORKSPACE_DETAILS(workspaceSlug as string) : null,
+    () => (workspaceSlug ? workspaceService.getWorkspace(workspaceSlug as string) : null)
+  );
+
+  const { data: integrations } = useSWR(workspaceSlug ? APP_INTEGRATIONS : null, () =>
+    workspaceSlug ? workspaceService.getIntegrations() : null
+  );
+
+  return (
+    <>
+      <AppLayout
+        settingsLayout="workspace"
+        memberType={props}
+        breadcrumbs={
+          <Breadcrumbs>
+            <BreadcrumbItem
+              title={`${activeWorkspace?.name ?? "Workspace"}`}
+              link={`/${workspaceSlug}`}
+            />
+            <BreadcrumbItem title="Integrations" />
+          </Breadcrumbs>
+        }
+      >
+        <section className="space-y-8">
+          {integrations?.map((integration: any) => (
+            <OAuthPopUp
+              workspaceSlug={workspaceSlug}
+              key={integration.id}
+              integration={integration}
+            />
+          ))}
+        </section>
+      </AppLayout>
+    </>
+  );
+};
+
+export const getServerSideProps: GetServerSideProps = async (ctx) => {
+  const workspaceSlug = ctx.params?.workspaceSlug as string;
+
+  const memberDetail = await requiredWorkspaceAdmin(workspaceSlug, ctx.req.headers.cookie);
+
+  if (memberDetail === null) {
+    return {
+      redirect: {
+        destination: "/",
+        permanent: false,
+      },
+    };
+  }
+
+  return {
+    props: {
+      isOwner: memberDetail?.role === 20,
+      isMember: memberDetail?.role === 15,
+      isViewer: memberDetail?.role === 10,
+      isGuest: memberDetail?.role === 5,
+    },
+  };
+};
+
+export default WorkspaceIntegrations;

apps/app/pages/installations/[provider]/index.tsx

@@ -0,0 +1,41 @@
+import React, { useEffect } from "react";
+import appinstallationsService from "services/appinstallations.service";
+
+interface IGithuPostInstallationProps {
+  installation_id: string;
+  setup_action: string;
+  state: string;
+  provider: string;
+}
+
+const AppPostInstallation = ({
+  installation_id,
+  setup_action,
+  state,
+  provider,
+}: IGithuPostInstallationProps) => {
+  useEffect(() => {
+    if (state && installation_id) {
+      appinstallationsService
+        .addGithubApp(state, provider, { installation_id })
+        .then((res) => {
+          window.opener = null;
+          window.open("", "_self");
+          window.close();
+        })
+        .catch((err) => {
+          console.log(err);
+        });
+    }
+  }, [state, installation_id, provider]);
+  return <>Loading...</>;
+};
+
+export async function getServerSideProps(context: any) {
+  console.log(context.query);
+  return {
+    props: context.query,
+  };
+}
+
+export default AppPostInstallation;

apps/app/services/appinstallations.service.ts

@@ -0,0 +1,20 @@
+// services
+import APIService from "services/api.service";
+
+const { NEXT_PUBLIC_API_BASE_URL } = process.env;
+
+class AppInstallationsService extends APIService {
+  constructor() {
+    super(NEXT_PUBLIC_API_BASE_URL || "http://localhost:8000");
+  }
+
+  async addGithubApp(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;
+      });
+  }
+}
+
+export default new AppInstallationsService();

apps/app/services/project.service.ts

@@ -201,6 +201,37 @@ class ProjectServices extends APIService {
         throw error?.response?.data;
       });
   }
+
+  async getGithubRepositories(slug: string, workspaceIntegrationId: string): Promise<any> {
+    return this.get(
+      `/api/workspaces/${slug}/workspace-integrations/${workspaceIntegrationId}/github-repositories/`
+    )
+      .then((response) => response?.data)
+      .catch((error) => {
+        throw error?.response?.data;
+      });
+  }
+
+  async syncGiuthubRepository(
+    slug: string,
+    projectId: string,
+    workspaceIntegrationId: string,
+    data: {
+      name: string;
+      owner: string;
+      repository_id: string;
+      url: string;
+    }
+  ): Promise<any> {
+    return this.post(
+      `/api/workspaces/${slug}/projects/${projectId}/workspace-integrations/${workspaceIntegrationId}/github-repository-sync/`,
+      data
+    )
+      .then((response) => response?.data)
+      .catch((error) => {
+        throw error?.response?.data;
+      });
+  }
 }
 
 export default new ProjectServices();

apps/app/services/workspace.service.ts

@@ -169,6 +169,20 @@ class WorkspaceService extends APIService {
         throw error?.response?.data;
       });
   }
+  async getIntegrations(): Promise<any> {
+    return this.get(`/api/integrations/`)
+      .then((response) => response?.data)
+      .catch((error) => {
+        throw error?.response?.data;
+      });
+  }
+  async getWorkspaceIntegrations(slug: string): Promise<any> {
+    return this.get(`/api/workspaces/${slug}/workspace-integrations/`)
+      .then((response) => response?.data)
+      .catch((error) => {
+        throw error?.response?.data;
+      });
+  }
 }
 
 export default new WorkspaceService();