feat: added load more button to github repos dropdown (#414)

apps/app/components/project/single-integration-card.tsx

@@ -1,16 +1,22 @@
+import React, { useState } from "react";
+
 import Image from "next/image";
 
 import useSWR, { mutate } from "swr";
+import useSWRInfinite from "swr/infinite";
 
+// headless ui
+import { Combobox, Transition } from "@headlessui/react";
 // 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 { CheckIcon, ChevronDownIcon, MagnifyingGlassIcon } from "@heroicons/react/24/outline";
 import GithubLogo from "public/logos/github-square.png";
+// helpers
+import { truncateText } from "helpers/string.helper";
 // types
 import { IWorkspaceIntegrations } from "types";
 // fetch-keys
@@ -21,6 +27,8 @@ type Props = {
 };
 
 export const SingleIntegration: React.FC<Props> = ({ integration }) => {
+  const [query, setQuery] = useState("");
+
   const router = useRouter();
   const { workspaceSlug, projectId } = router.query;
 
@@ -38,11 +46,28 @@ export const SingleIntegration: React.FC<Props> = ({ integration }) => {
         : null
   );
 
-  const { data: userRepositories } = useSWR("USER_REPOSITORIES", () =>
+  const getKey = (pageIndex: number) => {
-    workspaceSlug && integration
+    if (!workspaceSlug || !integration) return;
-      ? projectService.getGithubRepositories(workspaceSlug as any, integration.id)
+
-      : null
+    return `${
-  );
+      process.env.NEXT_PUBLIC_API_BASE_URL
+    }/api/workspaces/${workspaceSlug}/workspace-integrations/${
+      integration.id
+    }/github-repositories/?page=${++pageIndex}`;
+  };
+
+  const fetchGithubRepos = async (url: string) => {
+    const data = await projectService.getGithubRepositories(url);
+
+    return data;
+  };
+
+  const {
+    data: paginatedData,
+    size,
+    setSize,
+    isValidating,
+  } = useSWRInfinite(getKey, fetchGithubRepos);
 
   const handleChange = (repo: any) => {
     if (!workspaceSlug || !projectId || !integration) return;
@@ -82,6 +107,21 @@ export const SingleIntegration: React.FC<Props> = ({ integration }) => {
       });
   };
 
+  const userRepositories = (paginatedData ?? []).map((data) => data.repositories).flat();
+  const totalCount = paginatedData && paginatedData.length > 0 ? paginatedData[0].total_count : 0;
+
+  const options =
+    userRepositories.map((repo) => ({
+      value: repo.id,
+      query: repo.full_name,
+      content: <p>{truncateText(repo.full_name, 25)}</p>,
+    })) ?? [];
+
+  const filteredOptions =
+    query === ""
+      ? options
+      : options?.filter((option) => option.query.toLowerCase().includes(query.toLowerCase()));
+
   return (
     <>
       {integration && (
@@ -97,42 +137,95 @@ export const SingleIntegration: React.FC<Props> = ({ integration }) => {
               <p className="text-sm text-gray-400">Select GitHub repository to enable sync.</p>
             </div>
           </div>
-          <CustomSelect
+          <Combobox
+            as="div"
             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);
+              const repo = userRepositories.find((repo) => repo.id === val);
 
               handleChange(repo);
             }}
-            label={
+            className="relative flex-shrink-0 text-left"
-              syncedGithubRepository && syncedGithubRepository.length > 0
+          >
+            {({ open }: any) => (
+              <>
+                <Combobox.Button className="flex w-full cursor-pointer items-center justify-between gap-1 rounded-md border px-3 py-1.5 text-xs shadow-sm duration-300 hover:bg-gray-100 focus:border-indigo-500 focus:outline-none focus:ring-1 focus:ring-indigo-500">
+                  {syncedGithubRepository && syncedGithubRepository.length > 0
                     ? `${syncedGithubRepository[0].repo_detail.owner}/${syncedGithubRepository[0].repo_detail.name}`
-                : "Select Repository"
+                    : "Select Repository"}
+                  <ChevronDownIcon className="h-3 w-3" aria-hidden="true" />
+                </Combobox.Button>
+
+                <Transition
+                  show={open}
+                  as={React.Fragment}
+                  enter="transition ease-out duration-200"
+                  enterFrom="opacity-0 translate-y-1"
+                  enterTo="opacity-100 translate-y-0"
+                  leave="transition ease-in duration-150"
+                  leaveFrom="opacity-100 translate-y-0"
+                  leaveTo="opacity-0 translate-y-1"
+                >
+                  <Combobox.Options className="absolute right-0 z-10 mt-1 min-w-[10rem] origin-top-right rounded-md bg-white p-2 text-xs shadow-lg ring-1 ring-black ring-opacity-5 focus:outline-none">
+                    <div className="flex w-full items-center justify-start rounded-sm border bg-gray-100 px-2 text-gray-500">
+                      <MagnifyingGlassIcon className="h-3 w-3" />
+                      <Combobox.Input
+                        className="w-full bg-transparent py-1 px-2 text-xs focus:outline-none"
+                        onChange={(e) => setQuery(e.target.value)}
+                        placeholder="Type to search..."
+                        displayValue={(assigned: any) => assigned?.name}
+                      />
+                    </div>
+                    <div className="vertical-scroll-enable mt-2 max-h-44 space-y-1 overflow-y-scroll">
+                      <p className="px-1 text-[0.6rem] text-gray-500">
+                        {options.length} of {totalCount} repositories
+                      </p>
+                      {paginatedData ? (
+                        filteredOptions.length > 0 ? (
+                          filteredOptions.map((option) => (
+                            <Combobox.Option
+                              key={option.value}
+                              value={option.value}
+                              className={({ active, selected }) =>
+                                `${active || selected ? "bg-hover-gray" : ""} ${
+                                  selected ? "font-medium" : ""
+                                } flex cursor-pointer select-none items-center justify-between gap-2 truncate rounded px-1 py-1.5 text-gray-500`
                               }
-            input
                             >
-            {userRepositories ? (
+                              {({ selected }) => (
-              userRepositories.repositories.length > 0 ? (
+                                <>
-                userRepositories.repositories.map((repo) => (
+                                  {option.content}
-                  <CustomSelect.Option
+                                  {selected && <CheckIcon className="h-4 w-4" />}
-                    key={repo.id}
+                                </>
-                    value={repo.full_name}
+                              )}
-                    className="flex items-center gap-2"
+                            </Combobox.Option>
-                  >
-                    <>{repo.full_name}</>
-                  </CustomSelect.Option>
                           ))
                         ) : (
-                <p className="p-2 text-center text-xs text-gray-400">No repositories found</p>
+                          <p className="text-center text-gray-500">No matching results</p>
                         )
                       ) : (
-              <p className="p-2 text-center text-xs text-gray-400">Loading repositories...</p>
+                        <p className="text-center text-gray-500">Loading...</p>
                       )}
-          </CustomSelect>
+                      {userRepositories && options.length < totalCount && (
+                        <button
+                          type="button"
+                          className="w-full p-1 text-center text-[0.6rem] text-gray-500 hover:bg-hover-gray"
+                          onClick={() => setSize(size + 1)}
+                          disabled={isValidating}
+                        >
+                          {isValidating ? "Loading..." : "Click to load more..."}
+                        </button>
+                      )}
+                    </div>
+                  </Combobox.Options>
+                </Transition>
+              </>
+            )}
+          </Combobox>
         </div>
       )}
     </>

apps/app/services/api.service.ts

@@ -39,6 +39,15 @@ abstract class APIService {
     };
   }
 
+  getWithoutBase(url: string, config = {}): Promise<any> {
+    return axios({
+      method: "get",
+      url: url,
+      headers: this.getAccessToken() ? this.getHeaders() : {},
+      ...config,
+    });
+  }
+
   get(url: string, config = {}): Promise<any> {
     return axios({
       method: "get",

apps/app/services/project.service.ts

@@ -209,13 +209,8 @@ class ProjectServices extends APIService {
       });
   }
 
-  async getGithubRepositories(
+  async getGithubRepositories(url: string): Promise<GithubRepositoriesResponse> {
-    slug: string,
+    return this.getWithoutBase(url)
-    workspaceIntegrationId: string
-  ): Promise<GithubRepositoriesResponse> {
-    return this.get(
-      `/api/workspaces/${slug}/workspace-integrations/${workspaceIntegrationId}/github-repositories/`
-    )
       .then((response) => response?.data)
       .catch((error) => {
         throw error?.response?.data;

apps/app/styles/globals.css

@@ -30,34 +30,46 @@
   -webkit-font-smoothing: antialiased;
 }
 
-/* Horizontal Scrollbar style */
+/* scrollbar style */
+
+::-webkit-scrollbar {
+  display: none;
+}
+
 .horizontal-scroll-enable {
   overflow-x: scroll;
 }
 
 .horizontal-scroll-enable::-webkit-scrollbar {
   display: block;
-  height: 10px;
+  height: 7px;
+}
+
+.horizontal-scroll-enable::-webkit-scrollbar-track {
+  height: 7px;
+  background-color: #f5f5f5;
 }
 
 .horizontal-scroll-enable::-webkit-scrollbar-thumb {
   border-radius: 5px;
   background-color: #9ca3af;
 }
-/* end Horizontal Scrollbar style */
+
-.scrollbar-enable::-webkit-scrollbar {
+.vertical-scroll-enable::-webkit-scrollbar {
   display: block;
+  width: 5px;
 }
 
-/* Scrollbar style */
+.vertical-scroll-enable::-webkit-scrollbar-track {
-::-webkit-scrollbar {
+  width: 5px;
-  display: none;
+  background-color: #f5f5f5;
 }
 
-.no-scrollbar::-webkit-scrollbar {
+.vertical-scroll-enable::-webkit-scrollbar-thumb {
-  display: none;
+  border-radius: 5px;
+  background-color: #9ca3af;
 }
-/* End scrollbar style */
+/* end scrollbar style */
 
 .tags-input-container {
   border: 2px solid #000;