integrate searchRepositories in RepositoryFinder

selfcontained · selfcontained · commit 67c2c322cf6a · 2023-09-27T23:10:00.000Z
diff --git a/components/dashboard/src/components/DropDown2.tsx b/components/dashboard/src/components/DropDown2.tsx
@@ -32,6 +32,8 @@ export interface DropDown2Props {
     disableSearch?: boolean;
     expanded?: boolean;
     onSelectionChange: (id: string) => void;
+    // Meant to allow consumers to react to search changes even though state is managed internally
+    onSearchChange?: (searchString: string) => void;
     allOptions?: string;
 }
 
@@ -45,6 +47,7 @@ export const DropDown2: FunctionComponent<DropDown2Props> = ({
     disableSearch,
     children,
     onSelectionChange,
+    onSearchChange,
 }) => {
     const [showDropDown, setShowDropDown] = useState<boolean>(!disabled && !!expanded);
     const nodeRef: RefObject<HTMLDivElement> = useRef(null);
@@ -61,7 +64,7 @@ export const DropDown2: FunctionComponent<DropDown2Props> = ({
 
     // reset search when the drop down is expanded or closed
     useEffect(() => {
-        setSearch("");
+        updateSearch("");
         if (allOptions) {
             setSelectedElementTemp(allOptions);
         }
@@ -72,6 +75,16 @@ export const DropDown2: FunctionComponent<DropDown2Props> = ({
         // eslint-disable-next-line react-hooks/exhaustive-deps
     }, [showDropDown]);
 
+    const updateSearch = useCallback(
+        (value: string) => {
+            setSearch(value);
+            if (onSearchChange) {
+                onSearchChange(value);
+            }
+        },
+        [onSearchChange],
+    );
+
     const toggleDropDown = useCallback(() => {
         if (disabled) {
             return;
@@ -198,7 +211,7 @@ export const DropDown2: FunctionComponent<DropDown2Props> = ({
                                 className={"w-full focus rounded-lg"}
                                 placeholder={searchPlaceholder}
                                 value={search}
-                                onChange={(e) => setSearch(e.target.value)}
+                                onChange={(e) => updateSearch(e.target.value)}
                             />
                         </div>
                     )}
diff --git a/components/dashboard/src/components/RepositoryFinder.tsx b/components/dashboard/src/components/RepositoryFinder.tsx
@@ -9,10 +9,10 @@ import { getGitpodService } from "../service/service";
 import { DropDown2, DropDown2Element, DropDown2SelectedElement } from "./DropDown2";
 import RepositorySVG from "../icons/Repository.svg";
 import { ReactComponent as RepositoryIcon } from "../icons/RepositoryWithColor.svg";
-import { useSuggestedRepositories } from "../data/git-providers/suggested-repositories-query";
 import { useFeatureFlag } from "../data/featureflag-query";
 import { SuggestedRepository } from "@gitpod/gitpod-protocol";
 import { MiddleDot } from "./typography/MiddleDot";
+import { useUnifiedRepositorySearch } from "../data/git-providers/unified-repositories-search-query";
 
 // TODO: Remove this once we've fully enabled `includeProjectsOnCreateWorkspace`
 // flag (caches w/ react-query instead of local storage)
@@ -31,10 +31,12 @@ export default function RepositoryFinder(props: RepositoryFinderProps) {
     const includeProjectsOnCreateWorkspace = useFeatureFlag("includeProjectsOnCreateWorkspace");
 
     const [suggestedContextURLs, setSuggestedContextURLs] = useState<string[]>(loadSearchData());
-    const { data: suggestedRepos, isLoading } = useSuggestedRepositories();
+
+    const [searchString, setSearchString] = useState("");
+    const { data: repos, isLoading, isSearching } = useUnifiedRepositorySearch({ searchString });
 
     // TODO: remove this once includeProjectsOnCreateWorkspace is fully enabled
-    const suggestedRepoURLs = useMemo(() => {
+    const normalizedRepos = useMemo(() => {
         // If the flag is disabled continue to use suggestedContextURLs, but convert into SuggestedRepository objects
         if (!includeProjectsOnCreateWorkspace) {
             return suggestedContextURLs.map(
@@ -44,8 +46,9 @@ export default function RepositoryFinder(props: RepositoryFinderProps) {
             );
         }
 
-        return suggestedRepos || [];
-    }, [suggestedContextURLs, suggestedRepos, includeProjectsOnCreateWorkspace]);
+        // return suggestedRepos || [];
+        return repos;
+    }, [includeProjectsOnCreateWorkspace, repos, suggestedContextURLs]);
 
     // TODO: remove this once includeProjectsOnCreateWorkspace is fully enabled
     useEffect(() => {
@@ -60,7 +63,7 @@ export default function RepositoryFinder(props: RepositoryFinderProps) {
     const handleSelectionChange = useCallback(
         (selectedID: string) => {
             // selectedId is either projectId or repo url
-            const matchingSuggestion = suggestedRepos?.find((repo) => {
+            const matchingSuggestion = normalizedRepos?.find((repo) => {
                 if (repo.projectId) {
                     return repo.projectId === selectedID;
                 }
@@ -75,12 +78,12 @@ export default function RepositoryFinder(props: RepositoryFinderProps) {
             // If we have no matching suggestion, it's a context URL they typed/pasted in, so just use that as the url
             props.setSelection(selectedID);
         },
-        [props, suggestedRepos],
+        [props, normalizedRepos],
     );
 
     // Resolve the selected context url & project id props to a suggestion entry
     const selectedSuggestion = useMemo(() => {
-        let match = suggestedRepos?.find((repo) => {
+        let match = normalizedRepos?.find((repo) => {
             if (props.selectedProjectID) {
                 return repo.projectId === props.selectedProjectID;
             }
@@ -105,65 +108,69 @@ export default function RepositoryFinder(props: RepositoryFinderProps) {
         }
 
         return match;
-    }, [props.selectedProjectID, props.selectedContextURL, suggestedRepos]);
+    }, [normalizedRepos, props.selectedContextURL, props.selectedProjectID]);
 
     const getElements = useCallback(
         (searchString: string) => {
-            const results = filterRepos(searchString, suggestedRepoURLs);
-
+            // TODO: remove once includeProjectsOnCreateWorkspace is fully enabled
             // With the flag off, we only want to show the suggestedContextURLs
             if (!includeProjectsOnCreateWorkspace) {
-                return results.map(
+                // w/o the flag on we still need to filter the repo as the search string changes
+                const filteredResults = filterRepos(searchString, normalizedRepos);
+                return filteredResults.map(
                     (repo) =>
-                        ({
-                            id: repo.url,
-                            element: (
-                                <div className="flex-col ml-1 mt-1 flex-grow">
-                                    <div className="flex">
-                                        <div className="text-gray-700 dark:text-gray-300 font-semibold">
-                                            {stripOffProtocol(repo.url)}
-                                        </div>
-                                        <div className="ml-1 text-gray-400">{}</div>
+                    ({
+                        id: repo.url,
+                        element: (
+                            <div className="flex-col ml-1 mt-1 flex-grow">
+                                <div className="flex">
+                                    <div className="text-gray-700 dark:text-gray-300 font-semibold">
+                                        {stripOffProtocol(repo.url)}
                                     </div>
-                                    <div className="flex text-xs text-gray-400">{}</div>
+                                    <div className="ml-1 text-gray-400">{ }</div>
                                 </div>
-                            ),
-                            isSelectable: true,
-                        } as DropDown2Element),
+                                <div className="flex text-xs text-gray-400">{ }</div>
+                            </div>
+                        ),
+                        isSelectable: true,
+                    } as DropDown2Element),
                 );
             }
 
-            // Otherwise we show the suggestedRepos
-            return results.map((repo) => {
+            // Otherwise we show the suggestedRepos (already filtered)
+            return normalizedRepos.map((repo) => {
                 return {
                     id: repo.projectId || repo.url,
                     element: <SuggestedRepositoryOption repo={repo} />,
                     isSelectable: true,
                 } as DropDown2Element;
             });
         },
-        [includeProjectsOnCreateWorkspace, suggestedRepoURLs],
+        [includeProjectsOnCreateWorkspace, normalizedRepos],
     );
 
     return (
         <DropDown2
             getElements={getElements}
             expanded={!props.selectedContextURL}
+            // we use this to track the search string so we can search for repos via the api
             onSelectionChange={handleSelectionChange}
             disabled={props.disabled}
             // Only consider the isLoading prop if we're including projects in list
             loading={isLoading && includeProjectsOnCreateWorkspace}
             searchPlaceholder="Paste repository URL or type to find suggestions"
+            onSearchChange={setSearchString}
         >
+            {/* TODO: add a subtle indicator for the isSearching state */}
             <DropDown2SelectedElement
                 icon={RepositorySVG}
                 htmlTitle={displayContextUrl(props.selectedContextURL) || "Repository"}
                 title={
                     <div className="truncate w-80">
                         {displayContextUrl(
                             selectedSuggestion?.projectName ||
-                                selectedSuggestion?.repositoryName ||
-                                selectedSuggestion?.url,
+                            selectedSuggestion?.repositoryName ||
+                            selectedSuggestion?.url,
                         ) || "Select a repository"}
                     </div>
                 }
@@ -238,6 +245,7 @@ function saveSearchData(searchData: string[]): void {
     }
 }
 
+// TODO: remove this and import from unified-repositories-search-query
 function filterRepos(searchString: string, suggestedRepos: SuggestedRepository[]) {
     let results = suggestedRepos;
     const normalizedSearchString = searchString.trim().toLowerCase();
@@ -252,7 +260,7 @@ function filterRepos(searchString: string, suggestedRepos: SuggestedRepository[]
                 // If the normalizedSearchString is a URL, and it's not present in the proposed results, "artificially" add it here.
                 new URL(normalizedSearchString);
                 results.push({ url: normalizedSearchString });
-            } catch {}
+            } catch { }
         }
     }
 
diff --git a/components/dashboard/src/data/git-providers/search-repositories-query.ts b/components/dashboard/src/data/git-providers/search-repositories-query.ts
@@ -0,0 +1,31 @@
+/**
+ * Copyright (c) 2023 Gitpod GmbH. All rights reserved.
+ * Licensed under the GNU Affero General Public License (AGPL).
+ * See License.AGPL.txt in the project root for license information.
+ */
+
+import { useQuery } from "@tanstack/react-query";
+import { getGitpodService } from "../../service/service";
+import { useCurrentOrg } from "../organizations/orgs-query";
+import { useDebounce } from "../../hooks/use-debounce";
+
+export const useSearchRepositories = ({ searchString }: { searchString: string }) => {
+    const { data: org } = useCurrentOrg();
+    const debouncedSearchString = useDebounce(searchString);
+
+    return useQuery(
+        ["searchRepositories", { organizationId: org?.id || "", searchString: debouncedSearchString }],
+        async () => {
+            const result = await getGitpodService().server.searchRepositories({
+                searchString,
+                organizationId: org?.id ?? "",
+            });
+            return result;
+        },
+        {
+            enabled: searchString.length >= 3 && !!org,
+            // Need this to keep previous results while we wait for a new search to complete since debouncedSearchString changes and updates the key
+            keepPreviousData: true,
+        },
+    );
+};
diff --git a/components/dashboard/src/data/git-providers/unified-repositories-search-query.ts b/components/dashboard/src/data/git-providers/unified-repositories-search-query.ts
@@ -0,0 +1,58 @@
+/**
+ * Copyright (c) 2023 Gitpod GmbH. All rights reserved.
+ * Licensed under the GNU Affero General Public License (AGPL).
+ * See License.AGPL.txt in the project root for license information.
+ */
+
+import { SuggestedRepository } from "@gitpod/gitpod-protocol";
+import { useSearchRepositories } from "./search-repositories-query";
+import { useSuggestedRepositories } from "./suggested-repositories-query";
+import { useMemo } from "react";
+
+export const useUnifiedRepositorySearch = ({ searchString }: { searchString: string }) => {
+    const suggestedQuery = useSuggestedRepositories();
+    const searchQuery = useSearchRepositories({ searchString });
+
+    const filteredRepos = useMemo(() => {
+        const repoMap = new Map<string, SuggestedRepository>((suggestedQuery.data || []).map((r) => [r.url, r]));
+
+        // Merge the search results into the suggested results
+        for (const repo of searchQuery.data || []) {
+            if (!repoMap.has(repo.url)) {
+                repoMap.set(repo.url, repo);
+            }
+        }
+
+        return filterRepos(searchString, Array.from(repoMap.values()));
+    }, [searchQuery.data, searchString, suggestedQuery.data]);
+
+    return {
+        data: filteredRepos,
+        isLoading: suggestedQuery.isLoading,
+        isSearching: searchQuery.isFetching,
+        isError: suggestedQuery.isError || searchQuery.isError,
+        error: suggestedQuery.error || searchQuery.error,
+    };
+};
+
+const filterRepos = (searchString: string, suggestedRepos: SuggestedRepository[]) => {
+    let results = suggestedRepos;
+    const normalizedSearchString = searchString.trim().toLowerCase();
+
+    if (normalizedSearchString.length > 1) {
+        results = suggestedRepos.filter((r) => {
+            return `${r.url}${r.projectName || ""}`.toLowerCase().includes(normalizedSearchString);
+        });
+
+        if (results.length === 0) {
+            try {
+                // If the normalizedSearchString is a URL, and it's not present in the proposed results, "artificially" add it here.
+                new URL(normalizedSearchString);
+                results.push({ url: normalizedSearchString });
+            } catch {}
+        }
+    }
+
+    // Limit what we show to 200 results
+    return results.length > 200 ? results.slice(0, 200) : results;
+};
diff --git a/components/dashboard/src/hooks/use-debounce.ts b/components/dashboard/src/hooks/use-debounce.ts
@@ -0,0 +1,22 @@
+/**
+ * Copyright (c) 2023 Gitpod GmbH. All rights reserved.
+ * Licensed under the GNU Affero General Public License (AGPL).
+ * See License.AGPL.txt in the project root for license information.
+ */
+
+import { useEffect, useMemo, useState } from "react";
+import debounce from "lodash.debounce";
+
+export const useDebounce = <T>(value: T, delay = 500): T => {
+    const [debouncedValue, setDebouncedValue] = useState<T>(value);
+
+    const debouncedSetValue = useMemo(() => {
+        return debounce(setDebouncedValue, delay);
+    }, [delay]);
+
+    useEffect(() => {
+        debouncedSetValue(value);
+    }, [value, debouncedSetValue]);
+
+    return debouncedValue;
+};
diff --git a/components/server/src/bitbucket/bitbucket-repository-provider.ts b/components/server/src/bitbucket/bitbucket-repository-provider.ts
@@ -159,6 +159,16 @@ export class BitbucketRepositoryProvider implements RepositoryProvider {
 
     // TODO: implement repo search
     public async searchRepos(user: User, searchString: string): Promise<RepositoryInfo[]> {
+        // const api = await this.apiFactory.create(user);
+
+        // const workspaces = await api.workspaces.getWorkspaces({ pagelen: 5, sort: "-updated_on" });
+
+        // const workspaceSlugs = workspaces.data.values?.map(workspace => {
+        //     return workspace.slug
+        // })
+
+        // const response = await api.repositories.list({ q: searchString, pagelen: 10, sort: "-updated_on", workspace: });
+
         return [];
     }
 }
diff --git a/components/server/src/github/github-repository-provider.ts b/components/server/src/github/github-repository-provider.ts
diff --git a/components/server/src/workspace/gitpod-server-impl.ts b/components/server/src/workspace/gitpod-server-impl.ts
