forked from github/plane
feat: added load more button to github repos dropdown (#414)
This commit is contained in:
Aaryan Khandelwal
GitHub
parent
4fad685ec8
commit
c7923f6d44
@ -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", () =>
|
||||
workspaceSlug && integration
|
||||
? projectService.getGithubRepositories(workspaceSlug as any, integration.id)
|
||||
: null
|
||||
);
|
||||
const getKey = (pageIndex: number) => {
|
||||
if (!workspaceSlug || !integration) return;
|
||||
|
||||
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={
|
||||
syncedGithubRepository && syncedGithubRepository.length > 0
|
||||
? `${syncedGithubRepository[0].repo_detail.owner}/${syncedGithubRepository[0].repo_detail.name}`
|
||||
: "Select Repository"
|
||||
}
|
||||
input
|
||||
className="relative flex-shrink-0 text-left"
|
||||
>
|
||||
{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="p-2 text-center text-xs text-gray-400">No repositories found</p>
|
||||
)
|
||||
) : (
|
||||
<p className="p-2 text-center text-xs text-gray-400">Loading repositories...</p>
|
||||
{({ 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"}
|
||||
<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`
|
||||
}
|
||||
>
|
||||
{({ selected }) => (
|
||||
<>
|
||||
{option.content}
|
||||
{selected && <CheckIcon className="h-4 w-4" />}
|
||||
</>
|
||||
)}
|
||||
</Combobox.Option>
|
||||
))
|
||||
) : (
|
||||
<p className="text-center text-gray-500">No matching results</p>
|
||||
)
|
||||
) : (
|
||||
<p className="text-center text-gray-500">Loading...</p>
|
||||
)}
|
||||
{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>
|
||||
</>
|
||||
)}
|
||||
</CustomSelect>
|
||||
</Combobox>
|
||||
</div>
|
||||
)}
|
||||
</>
|
||||
|
||||
@ -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",
|
||||
|
||||
@ -209,13 +209,8 @@ class ProjectServices extends APIService {
|
||||
});
|
||||
}
|
||||
|
||||
async getGithubRepositories(
|
||||
slug: string,
|
||||
workspaceIntegrationId: string
|
||||
): Promise<GithubRepositoriesResponse> {
|
||||
return this.get(
|
||||
`/api/workspaces/${slug}/workspace-integrations/${workspaceIntegrationId}/github-repositories/`
|
||||
)
|
||||
async getGithubRepositories(url: string): Promise<GithubRepositoriesResponse> {
|
||||
return this.getWithoutBase(url)
|
||||
.then((response) => response?.data)
|
||||
.catch((error) => {
|
||||
throw error?.response?.data;
|
||||
|
||||
@ -30,34 +30,46 @@
|
||||
-webkit-font-smoothing: antialiased;
|
||||
}
|
||||
|
||||
/* Horizontal Scrollbar style */
|
||||
.horizontal-scroll-enable{
|
||||
overflow-x: scroll;
|
||||
}
|
||||
/* scrollbar style */
|
||||
|
||||
.horizontal-scroll-enable::-webkit-scrollbar{
|
||||
display: block;
|
||||
height: 10px;
|
||||
}
|
||||
|
||||
.horizontal-scroll-enable::-webkit-scrollbar-thumb{
|
||||
border-radius: 5px;
|
||||
background-color: #9ca3af;
|
||||
}
|
||||
/* end Horizontal Scrollbar style */
|
||||
.scrollbar-enable::-webkit-scrollbar {
|
||||
display: block;
|
||||
}
|
||||
|
||||
/* Scrollbar style */
|
||||
::-webkit-scrollbar {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.no-scrollbar::-webkit-scrollbar {
|
||||
display: none;
|
||||
.horizontal-scroll-enable {
|
||||
overflow-x: scroll;
|
||||
}
|
||||
/* End scrollbar style */
|
||||
|
||||
.horizontal-scroll-enable::-webkit-scrollbar {
|
||||
display: block;
|
||||
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;
|
||||
}
|
||||
|
||||
.vertical-scroll-enable::-webkit-scrollbar {
|
||||
display: block;
|
||||
width: 5px;
|
||||
}
|
||||
|
||||
.vertical-scroll-enable::-webkit-scrollbar-track {
|
||||
width: 5px;
|
||||
background-color: #f5f5f5;
|
||||
}
|
||||
|
||||
.vertical-scroll-enable::-webkit-scrollbar-thumb {
|
||||
border-radius: 5px;
|
||||
background-color: #9ca3af;
|
||||
}
|
||||
/* end scrollbar style */
|
||||
|
||||
.tags-input-container {
|
||||
border: 2px solid #000;
|
||||
|
||||
Loading…
Reference in New Issue
Block a user