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

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

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";

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

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]
   );

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}

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}`;

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

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

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) {

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();

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();

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;
+}

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;
+}