From 36a733cd06d4e1238fc4eaad88c09904cd2cf2fb Mon Sep 17 00:00:00 2001
From: Aaryan Khandelwal <65252264+aaryan610@users.noreply.github.com>
Date: Thu, 23 Feb 2023 18:12:07 +0530
Subject: [PATCH] style: github integration ui (#329)

* fix: ellipsis added to issue title

* feat: toolttip added

* feat: assignees tooltip added

* fix: build fix

* fix: build fix

* fix: build error

* fix: minor bugs and ux improvements

* style: github integration ui

* chore: updated .env.example file

---------

Co-authored-by: Anmol Singh Bhatia <anmolsinghbhatia@caravel.tech>
---
 apps/app/.env.example                         |   1 +
 apps/app/components/popup/index.tsx           | 120 ++++++++++++++-
 apps/app/components/project/index.ts          |   7 +-
 .../project/single-integration-card.tsx       | 140 ++++++++++++++++++
 .../app/components/rich-text-editor/index.tsx |   9 +-
 .../rich-text-editor/toolbar/link.tsx         |   6 +-
 apps/app/constants/fetch-keys.ts              |   2 +
 .../[projectId]/settings/integrations.tsx     | 130 +++++++---------
 .../[workspaceSlug]/settings/integrations.tsx |  48 +++---
 .../pages/installations/[provider]/index.tsx  |  14 +-
 apps/app/public/logos/github-black.png        | Bin 0 -> 14032 bytes
 ...ervice.ts => app-installations.service.ts} |   0
 apps/app/services/project.service.ts          |  27 +++-
 apps/app/services/workspace.service.ts        |  20 ++-
 apps/app/types/projects.d.ts                  |  12 ++
 apps/app/types/workspace.d.ts                 |  35 +++++
 16 files changed, 447 insertions(+), 124 deletions(-)
 create mode 100644 apps/app/components/project/single-integration-card.tsx
 create mode 100644 apps/app/public/logos/github-black.png
 rename apps/app/services/{appinstallations.service.ts => app-installations.service.ts} (100%)

diff --git a/apps/app/.env.example b/apps/app/.env.example
index ac348350c..50747dcc6 100644
--- a/apps/app/.env.example
+++ b/apps/app/.env.example
@@ -1,5 +1,6 @@
 NEXT_PUBLIC_API_BASE_URL = "http://localhost"
 NEXT_PUBLIC_GOOGLE_CLIENTID="<-- google client id -->"
+NEXT_PUBLIC_GITHUB_APP_NAME="<-- github app name -->"
 NEXT_PUBLIC_GITHUB_ID="<-- github client id -->"
 NEXT_PUBLIC_SENTRY_DSN="<-- sentry dns -->"
 NEXT_PUBLIC_ENABLE_OAUTH=0
diff --git a/apps/app/components/popup/index.tsx b/apps/app/components/popup/index.tsx
index e97d39493..a59358f38 100644
--- a/apps/app/components/popup/index.tsx
+++ b/apps/app/components/popup/index.tsx
@@ -1,10 +1,29 @@
-import { useRouter } from "next/router";
-import React, { useRef } from "react";
+import React, { useRef, useState } from "react";
+
+import Image from "next/image";
+import { useRouter } from "next/router";
+
+// services
+import workspaceService from "services/workspace.service";
+// hooks
+import useToast from "hooks/use-toast";
+// ui
+import { Button } from "components/ui";
+// icons
+import GithubLogo from "public/logos/github-black.png";
+import useSWR, { mutate } from "swr";
+import { APP_INTEGRATIONS, WORKSPACE_INTEGRATIONS } from "constants/fetch-keys";
+import { IWorkspaceIntegrations } from "types";
+
+const OAuthPopUp = ({ integration }: any) => {
+  const [deletingIntegration, setDeletingIntegration] = useState(false);
 
-const OAuthPopUp = ({ workspaceSlug, integration }: any) => {
   const popup = useRef<any>();
 
   const router = useRouter();
+  const { workspaceSlug } = router.query;
+
+  const { setToastAlert } = useToast();
 
   const checkPopup = () => {
     const check = setInterval(() => {
@@ -19,7 +38,9 @@ const OAuthPopUp = ({ workspaceSlug, integration }: any) => {
       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}`;
+    const url = `https://github.com/apps/${
+      process.env.NEXT_PUBLIC_GITHUB_APP_NAME
+    }/installations/new?state=${workspaceSlug as string}`;
 
     return window.open(url, "", `width=${width}, height=${height}, top=${top}, left=${left}`);
   };
@@ -29,12 +50,95 @@ const OAuthPopUp = ({ workspaceSlug, integration }: any) => {
     checkPopup();
   };
 
+  const { data: workspaceIntegrations } = useSWR(
+    workspaceSlug ? WORKSPACE_INTEGRATIONS(workspaceSlug as string) : null,
+    () =>
+      workspaceSlug ? workspaceService.getWorkspaceIntegrations(workspaceSlug as string) : null
+  );
+
+  const handleRemoveIntegration = async () => {
+    if (!workspaceSlug || !integration || !workspaceIntegrations) return;
+
+    const workspaceIntegrationId = workspaceIntegrations?.find(
+      (i) => i.integration === integration.id
+    )?.id;
+
+    setDeletingIntegration(true);
+
+    await workspaceService
+      .deleteWorkspaceIntegration(workspaceSlug as string, workspaceIntegrationId ?? "")
+      .then(() => {
+        mutate<IWorkspaceIntegrations[]>(
+          WORKSPACE_INTEGRATIONS(workspaceSlug as string),
+          (prevData) => prevData?.filter((i) => i.id !== workspaceIntegrationId),
+          false
+        );
+        setDeletingIntegration(false);
+
+        setToastAlert({
+          type: "success",
+          title: "Deleted successfully!",
+          message: `${integration.title} integration deleted successfully.`,
+        });
+      })
+      .catch(() => {
+        setDeletingIntegration(false);
+
+        setToastAlert({
+          type: "error",
+          title: "Error!",
+          message: `${integration.title} integration could not be deleted. Please try again.`,
+        });
+      });
+  };
+
+  const isInstalled = workspaceIntegrations?.find(
+    (i: any) => i.integration_detail.id === integration.id
+  );
+
   return (
-    <>
-      <div>
-        <button onClick={startAuth}>{integration.title}</button>
+    <div className="flex items-center justify-between gap-2 border p-4 rounded-lg">
+      <div className="flex items-start gap-4">
+        <div className="h-12 w-12">
+          <Image src={GithubLogo} alt="GithubLogo" />
+        </div>
+        <div>
+          <h3 className="flex items-center gap-4 font-semibold text-xl">
+            {integration.title}
+            {isInstalled ? (
+              <span className="flex items-center text-green-500 font-normal text-sm gap-1">
+                <span className="h-1.5 w-1.5 bg-green-500 flex-shrink-0 rounded-full" /> Installed
+              </span>
+            ) : (
+              <span className="flex items-center text-gray-400 font-normal text-sm gap-1">
+                <span className="h-1.5 w-1.5 bg-gray-400 flex-shrink-0 rounded-full" /> Not
+                Installed
+              </span>
+            )}
+          </h3>
+          <p className="text-gray-400 text-sm">
+            {isInstalled
+              ? "Activate GitHub integrations on individual projects to sync with specific repositories."
+              : "Connect with GitHub with your Plane workspace to sync project issues."}
+          </p>
+        </div>
       </div>
-    </>
+      {isInstalled ? (
+        <Button
+          theme="danger"
+          size="rg"
+          className="text-xs"
+          onClick={handleRemoveIntegration}
+          disabled={deletingIntegration}
+        >
+          {deletingIntegration ? "Removing..." : "Remove installation"}
+        </Button>
+      ) : (
+        <Button theme="secondary" size="rg" className="text-xs" onClick={startAuth}>
+          Add installation
+        </Button>
+      )}
+    </div>
   );
 };
 
diff --git a/apps/app/components/project/index.ts b/apps/app/components/project/index.ts
index 21ebce460..c36630d8f 100644
--- a/apps/app/components/project/index.ts
+++ b/apps/app/components/project/index.ts
@@ -1,4 +1,5 @@
-export * from "./create-project-modal";
-export * from "./sidebar-list";
-export * from "./join-project";
 export * from "./card";
+export * from "./create-project-modal";
+export * from "./join-project";
+export * from "./sidebar-list";
+export * from "./single-integration-card";
diff --git a/apps/app/components/project/single-integration-card.tsx b/apps/app/components/project/single-integration-card.tsx
new file mode 100644
index 000000000..63933b0a6
--- /dev/null
+++ b/apps/app/components/project/single-integration-card.tsx
@@ -0,0 +1,140 @@
+import Image from "next/image";
+
+import useSWR, { mutate } from "swr";
+
+// services
+import projectService from "services/project.service";
+// hooks
+import { useRouter } from "next/router";
+import useToast from "hooks/use-toast";
+// ui
+import { CustomSelect } from "components/ui";
+// icons
+import GithubLogo from "public/logos/github-black.png";
+// types
+import { IWorkspaceIntegrations } from "types";
+// fetch-keys
+import { PROJECT_GITHUB_REPOSITORY } from "constants/fetch-keys";
+
+type Props = {
+  integration: IWorkspaceIntegrations;
+};
+
+export const SingleIntegration: React.FC<Props> = ({ integration }) => {
+  const router = useRouter();
+  const { workspaceSlug, projectId } = router.query;
+
+  const { setToastAlert } = useToast();
+
+  const { data: syncedGithubRepository } = useSWR(
+    projectId ? PROJECT_GITHUB_REPOSITORY(projectId as string) : null,
+    () =>
+      workspaceSlug && projectId && integration
+        ? projectService.getProjectGithubRepository(
+            workspaceSlug as string,
+            projectId as string,
+            integration.id
+          )
+        : null
+  );
+
+  const { data: userRepositories } = useSWR("USER_REPOSITORIES", () =>
+    workspaceSlug && integration
+      ? projectService.getGithubRepositories(workspaceSlug as any, integration.id)
+      : null
+  );
+
+  const handleChange = (repo: any) => {
+    if (!workspaceSlug || !projectId || !integration) return;
+
+    const {
+      html_url,
+      owner: { login },
+      id,
+      name,
+    } = repo;
+
+    projectService
+      .syncGiuthubRepository(workspaceSlug as string, projectId as string, integration.id, {
+        name,
+        owner: login,
+        repository_id: id,
+        url: html_url,
+      })
+      .then((res) => {
+        console.log(res);
+        mutate(PROJECT_GITHUB_REPOSITORY(projectId as string));
+
+        setToastAlert({
+          type: "success",
+          title: "Success!",
+          message: `${login}/${name} respository synced with the project successfully.`,
+        });
+      })
+      .catch((err) => {
+        console.log(err);
+
+        setToastAlert({
+          type: "error",
+          title: "Error!",
+          message: "Respository could not be synced with the project. Please try again.",
+        });
+      });
+  };
+
+  return (
+    <>
+      {integration && (
+        <div className="flex items-center justify-between gap-2 border p-4 rounded-xl">
+          <div className="flex items-start gap-4">
+            <div className="h-12 w-12">
+              <Image src={GithubLogo} alt="GithubLogo" />
+            </div>
+            <div>
+              <h3 className="flex items-center gap-4 font-semibold text-xl">
+                {integration.integration_detail.title}
+              </h3>
+              <p className="text-gray-400 text-sm">Select GitHub repository to enable sync.</p>
+            </div>
+          </div>
+          <CustomSelect
+            value={
+              syncedGithubRepository && syncedGithubRepository.length > 0
+                ? `${syncedGithubRepository[0].repo_detail.owner}/${syncedGithubRepository[0].repo_detail.name}`
+                : null
+            }
+            onChange={(val: string) => {
+              const repo = userRepositories?.repositories.find((repo) => repo.full_name === val);
+
+              handleChange(repo);
+            }}
+            label={
+              syncedGithubRepository && syncedGithubRepository.length > 0
+                ? `${syncedGithubRepository[0].repo_detail.owner}/${syncedGithubRepository[0].repo_detail.name}`
+                : "Select Repository"
+            }
+            input
+          >
+            {userRepositories ? (
+              userRepositories.repositories.length > 0 ? (
+                userRepositories.repositories.map((repo) => (
+                  <CustomSelect.Option
+                    key={repo.id}
+                    value={repo.full_name}
+                    className="flex items-center gap-2"
+                  >
+                    <>{repo.full_name}</>
+                  </CustomSelect.Option>
+                ))
+              ) : (
+                <p className="text-gray-400 text-center text-xs">No repositories found</p>
+              )
+            ) : (
+              <p className="text-gray-400 text-center text-xs">Loading repositories</p>
+            )}
+          </CustomSelect>
+        </div>
+      )}
+    </>
+  );
+};
diff --git a/apps/app/components/rich-text-editor/index.tsx b/apps/app/components/rich-text-editor/index.tsx
index 39558cde6..80c091e25 100644
--- a/apps/app/components/rich-text-editor/index.tsx
+++ b/apps/app/components/rich-text-editor/index.tsx
@@ -143,7 +143,7 @@ const RemirrorRichTextEditor: FC<IRemirrorRichTextEditor> = (props) => {
       }),
       new TableExtension(),
     ],
-    content: value,
+    content: !value || (typeof value === "object" && Object.keys(value).length === 0) ? "" : value,
     selection: "start",
     stringHandler: "html",
     onError,
@@ -153,7 +153,12 @@ const RemirrorRichTextEditor: FC<IRemirrorRichTextEditor> = (props) => {
     (value: any) => {
       // Clear out old state when setting data from outside
       // This prevents e.g. the user from using CTRL-Z to go back to the old state
-      manager.view.updateState(manager.createState({ content: value ? value : "" }));
+      manager.view.updateState(
+        manager.createState({
+          content:
+            !value || (typeof value === "object" && Object.keys(value).length === 0) ? "" : value,
+        })
+      );
     },
     [manager]
   );
diff --git a/apps/app/components/rich-text-editor/toolbar/link.tsx b/apps/app/components/rich-text-editor/toolbar/link.tsx
index c765fbc7a..ffe246af3 100644
--- a/apps/app/components/rich-text-editor/toolbar/link.tsx
+++ b/apps/app/components/rich-text-editor/toolbar/link.tsx
@@ -172,7 +172,11 @@ export const FloatingLinkToolbar = () => {
 
   return (
     <>
-      {!isEditing && <FloatingToolbar>{linkEditButtons}</FloatingToolbar>}
+      {!isEditing && (
+        <FloatingToolbar className="shadow-lg rounded bg-white p-1">
+          {linkEditButtons}
+        </FloatingToolbar>
+      )}
       {!isEditing && empty && (
         <FloatingToolbar positioner={linkPositioner} className="shadow-lg rounded bg-white p-1">
           {linkEditButtons}
diff --git a/apps/app/constants/fetch-keys.ts b/apps/app/constants/fetch-keys.ts
index e7360461d..a2831d818 100644
--- a/apps/app/constants/fetch-keys.ts
+++ b/apps/app/constants/fetch-keys.ts
@@ -29,6 +29,8 @@ export const PROJECT_ISSUES_COMMENTS = (issueId: string) => `PROJECT_ISSUES_COMM
 export const PROJECT_ISSUES_ACTIVITY = (issueId: string) => `PROJECT_ISSUES_ACTIVITY_${issueId}`;
 export const PROJECT_ISSUE_BY_STATE = (projectId: string) => `PROJECT_ISSUE_BY_STATE_${projectId}`;
 export const PROJECT_ISSUE_LABELS = (projectId: string) => `PROJECT_ISSUE_LABELS_${projectId}`;
+export const PROJECT_GITHUB_REPOSITORY = (projectId: string) =>
+  `PROJECT_GITHUB_REPOSITORY_${projectId}`;
 
 export const CYCLE_LIST = (projectId: string) => `CYCLE_LIST_${projectId}`;
 export const CYCLE_ISSUES = (cycleId: string) => `CYCLE_ISSUES_${cycleId}`;
diff --git a/apps/app/pages/[workspaceSlug]/projects/[projectId]/settings/integrations.tsx b/apps/app/pages/[workspaceSlug]/projects/[projectId]/settings/integrations.tsx
index 4e472d7e5..8deff023d 100644
--- a/apps/app/pages/[workspaceSlug]/projects/[projectId]/settings/integrations.tsx
+++ b/apps/app/pages/[workspaceSlug]/projects/[projectId]/settings/integrations.tsx
@@ -1,9 +1,8 @@
-import React, { useEffect, useState } from "react";
+import React, { useState } from "react";
 
 import { useRouter } from "next/router";
-import Image from "next/image";
 
-import useSWR, { mutate } from "swr";
+import useSWR from "swr";
 
 // lib
 import { requiredAdmin } from "lib/auth";
@@ -12,34 +11,23 @@ import AppLayout from "layouts/app-layout";
 // services
 import workspaceService from "services/workspace.service";
 import projectService from "services/project.service";
-
+// ui
+import { EmptySpace, EmptySpaceItem, Loader } from "components/ui";
 import { BreadcrumbItem, Breadcrumbs } from "components/breadcrumbs";
+// icons
+import { PlusIcon, PuzzlePieceIcon } from "@heroicons/react/24/outline";
 // types
-import { IProject, IWorkspace } from "types";
+import { IProject, UserAuth } from "types";
 import type { NextPageContext, NextPage } from "next";
 // fetch-keys
 import { PROJECT_DETAILS, WORKSPACE_INTEGRATIONS } from "constants/fetch-keys";
+import { SingleIntegration } from "components/project";
 
-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 ProjectIntegrations: NextPage<UserAuth> = (props) => {
   const { isMember, isOwner, isViewer, isGuest } = props;
-  const [userRepos, setUserRepos] = useState([]);
-  const [activeIntegrationId, setActiveIntegrationId] = useState();
 
-  const {
-    query: { workspaceSlug, projectId },
-  } = useRouter();
+  const router = useRouter();
+  const { workspaceSlug, projectId } = router.query;
 
   const { data: projectDetails } = useSWR<IProject>(
     workspaceSlug && projectId ? PROJECT_DETAILS(projectId as string) : null,
@@ -48,34 +36,12 @@ const ProjectIntegrations: NextPage<TProjectIntegrationsProps> = (props) => {
       : null
   );
 
-  const { data: integrations } = useSWR(
+  const { data: workspaceIntegrations } = 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"
@@ -90,41 +56,45 @@ const ProjectIntegrations: NextPage<TProjectIntegrationsProps> = (props) => {
         </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>
+      {workspaceIntegrations ? (
+        workspaceIntegrations.length > 0 ? (
+          <section className="space-y-8">
+            <div>
+              <h3 className="text-3xl font-bold leading-6 text-gray-900">Integrations</h3>
+              <p className="mt-4 text-sm text-gray-500">Manage the project integrations.</p>
+            </div>
+            {workspaceIntegrations.map((integration) => (
+              <SingleIntegration
+                key={integration.integration_detail.id}
+                integration={integration}
+              />
             ))}
-          </select>
-        )}
-      </section>
+          </section>
+        ) : (
+          <div className="grid h-full w-full place-items-center px-4 sm:px-0">
+            <EmptySpace
+              title="You haven't added any integration yet."
+              description="Add GitHub and other integrations to sync your project issues."
+              Icon={PuzzlePieceIcon}
+            >
+              <EmptySpaceItem
+                title="Add new integration"
+                Icon={PlusIcon}
+                action={() => {
+                  router.push(`/${workspaceSlug}/settings/integrations`);
+                }}
+              />
+            </EmptySpace>
+          </div>
+        )
+      ) : (
+        <Loader className="space-y-5 md:w-2/3">
+          <Loader.Item height="40px" />
+          <Loader.Item height="40px" />
+          <Loader.Item height="40px" />
+          <Loader.Item height="40px" />
+        </Loader>
+      )}
     </AppLayout>
   );
 };
diff --git a/apps/app/pages/[workspaceSlug]/settings/integrations.tsx b/apps/app/pages/[workspaceSlug]/settings/integrations.tsx
index 0757dfd52..f3620c781 100644
--- a/apps/app/pages/[workspaceSlug]/settings/integrations.tsx
+++ b/apps/app/pages/[workspaceSlug]/settings/integrations.tsx
@@ -1,32 +1,28 @@
 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";
+// lib
+import { requiredWorkspaceAdmin } from "lib/auth";
 // layouts
 import AppLayout from "layouts/app-layout";
+// componentss
+import OAuthPopUp from "components/popup";
 // ui
 import { BreadcrumbItem, Breadcrumbs } from "components/breadcrumbs";
+// types
+import type { NextPage, GetServerSideProps } from "next";
+import { UserAuth } from "types";
+// fetch-keys
 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 WorkspaceIntegrations: NextPage<UserAuth> = (props) => {
+  const router = useRouter();
+  const { workspaceSlug } = router.query;
 
   const { data: activeWorkspace } = useSWR(
     workspaceSlug ? WORKSPACE_DETAILS(workspaceSlug as string) : null,
@@ -53,13 +49,19 @@ const WorkspaceIntegrations: NextPage<TWorkspaceIntegrationsProps> = (props) =>
         }
       >
         <section className="space-y-8">
-          {integrations?.map((integration: any) => (
-            <OAuthPopUp
-              workspaceSlug={workspaceSlug}
-              key={integration.id}
-              integration={integration}
-            />
-          ))}
+          <div>
+            <h3 className="text-3xl font-bold leading-6 text-gray-900">Integrations</h3>
+            <p className="mt-4 text-sm text-gray-500">Manage the workspace integrations.</p>
+          </div>
+          <div className="space-y-4">
+            {integrations?.map((integration) => (
+              <OAuthPopUp
+                key={integration.id}
+                workspaceSlug={workspaceSlug}
+                integration={integration}
+              />
+            ))}
+          </div>
         </section>
       </AppLayout>
     </>
diff --git a/apps/app/pages/installations/[provider]/index.tsx b/apps/app/pages/installations/[provider]/index.tsx
index 85effe46b..478bb0a23 100644
--- a/apps/app/pages/installations/[provider]/index.tsx
+++ b/apps/app/pages/installations/[provider]/index.tsx
@@ -1,5 +1,9 @@
 import React, { useEffect } from "react";
-import appinstallationsService from "services/appinstallations.service";
+
+// services
+import appinstallationsService from "services/app-installations.service";
+// components
+import { Spinner } from "components/ui";
 
 interface IGithuPostInstallationProps {
   installation_id: string;
@@ -28,7 +32,13 @@ const AppPostInstallation = ({
         });
     }
   }, [state, installation_id, provider]);
-  return <>Loading...</>;
+
+  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-white">
+      <h2 className="text-2xl text-gray-900">Installing. Please wait...</h2>
+      <Spinner />
+    </div>
+  );
 };
 
 export async function getServerSideProps(context: any) {
diff --git a/apps/app/public/logos/github-black.png b/apps/app/public/logos/github-black.png
new file mode 100644
index 0000000000000000000000000000000000000000..7a7a82474ff108faf2c883c5616c83160c889c3c
GIT binary patch
literal 14032
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
F|34@0LH+;$

literal 0
HcmV?d00001

diff --git a/apps/app/services/appinstallations.service.ts b/apps/app/services/app-installations.service.ts
similarity index 100%
rename from apps/app/services/appinstallations.service.ts
rename to apps/app/services/app-installations.service.ts
diff --git a/apps/app/services/project.service.ts b/apps/app/services/project.service.ts
index d2f3aa193..1172f8823 100644
--- a/apps/app/services/project.service.ts
+++ b/apps/app/services/project.service.ts
@@ -1,7 +1,13 @@
 // services
 import APIService from "services/api.service";
 // types
-import type { IProject, IProjectMember, IProjectMemberInvitation, ProjectViewTheme } from "types";
+import type {
+  GithubRepositoriesResponse,
+  IProject,
+  IProjectMember,
+  IProjectMemberInvitation,
+  ProjectViewTheme,
+} from "types";
 
 const { NEXT_PUBLIC_API_BASE_URL } = process.env;
 
@@ -202,7 +208,10 @@ class ProjectServices extends APIService {
       });
   }
 
-  async getGithubRepositories(slug: string, workspaceIntegrationId: string): Promise<any> {
+  async getGithubRepositories(
+    slug: string,
+    workspaceIntegrationId: string
+  ): Promise<GithubRepositoriesResponse> {
     return this.get(
       `/api/workspaces/${slug}/workspace-integrations/${workspaceIntegrationId}/github-repositories/`
     )
@@ -232,6 +241,20 @@ class ProjectServices extends APIService {
         throw error?.response?.data;
       });
   }
+
+  async getProjectGithubRepository(
+    workspaceSlug: string,
+    projectId: string,
+    integrationId: string
+  ): Promise<any> {
+    return this.get(
+      `/api/workspaces/${workspaceSlug}/projects/${projectId}/workspace-integrations/${integrationId}/github-repository-sync/`
+    )
+      .then((response) => response?.data)
+      .catch((error) => {
+        throw error?.response?.data;
+      });
+  }
 }
 
 export default new ProjectServices();
diff --git a/apps/app/services/workspace.service.ts b/apps/app/services/workspace.service.ts
index cf3f6d3e9..658f713a4 100644
--- a/apps/app/services/workspace.service.ts
+++ b/apps/app/services/workspace.service.ts
@@ -9,6 +9,8 @@ import {
   IWorkspaceMember,
   IWorkspaceMemberInvitation,
   ILastActiveWorkspaceDetails,
+  IAppIntegrations,
+  IWorkspaceIntegrations,
 } from "types";
 
 class WorkspaceService extends APIService {
@@ -169,20 +171,32 @@ class WorkspaceService extends APIService {
         throw error?.response?.data;
       });
   }
-  async getIntegrations(): Promise<any> {
+
+  async getIntegrations(): Promise<IAppIntegrations[]> {
     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/`)
+
+  async getWorkspaceIntegrations(workspaceSlug: string): Promise<IWorkspaceIntegrations[]> {
+    return this.get(`/api/workspaces/${workspaceSlug}/workspace-integrations/`)
       .then((response) => response?.data)
       .catch((error) => {
         throw error?.response?.data;
       });
   }
+
+  async deleteWorkspaceIntegration(workspaceSlug: string, integrationId: string): Promise<any> {
+    return this.delete(
+      `/api/workspaces/${workspaceSlug}/workspace-integrations/${integrationId}/provider/`
+    )
+      .then((res) => res?.data)
+      .catch((error) => {
+        throw error?.response?.data;
+      });
+  }
 }
 
 export default new WorkspaceService();
diff --git a/apps/app/types/projects.d.ts b/apps/app/types/projects.d.ts
index 603b8a527..5abb32d2a 100644
--- a/apps/app/types/projects.d.ts
+++ b/apps/app/types/projects.d.ts
@@ -61,3 +61,15 @@ export interface IProjectMemberInvitation {
   created_by: string;
   updated_by: string;
 }
+
+export interface IGithubRepository {
+  id: string;
+  full_name: string;
+  html_url: string;
+  url: string;
+}
+
+export interface GithubRepositoriesResponse {
+  repositories: IGithubRepository[];
+  total_count: number;
+}
diff --git a/apps/app/types/workspace.d.ts b/apps/app/types/workspace.d.ts
index 2871f31df..cf1489eed 100644
--- a/apps/app/types/workspace.d.ts
+++ b/apps/app/types/workspace.d.ts
@@ -44,3 +44,38 @@ export interface ILastActiveWorkspaceDetails {
   workspace_details: IWorkspace;
   project_details?: IProjectMember[];
 }
+
+export interface IAppIntegrations {
+  author: string;
+  author: "";
+  avatar_url: string | null;
+  created_at: string;
+  created_by: string | null;
+  description: any;
+  id: string;
+  metadata: any;
+  network: number;
+  provider: string;
+  redirect_url: string;
+  title: string;
+  updated_at: string;
+  updated_by: string | null;
+  verified: boolean;
+  webhook_secret: string;
+  webhook_url: string;
+}
+
+export interface IWorkspaceIntegrations {
+  actor: string;
+  api_token: string;
+  config: any;
+  created_at: string;
+  created_by: string;
+  id: string;
+  integration: string;
+  integration_detail: IIntegrations;
+  metadata: anyl;
+  updated_at: string;
+  updated_by: string;
+  workspace: string;
+}