Simplify example repositories (#20156)

* Simplify example repositories

* Actually fix the bug

* Fix resolved repo name

* Fix display names for examples

Author: filiptronicek

components/dashboard/src/components/RepositoryFinder.tsx

@@ -23,6 +23,15 @@ import { SuggestedRepository } from "@gitpod/public-api/lib/gitpod/v1/scm_pb";
 import { PREDEFINED_REPOS } from "../data/git-providers/predefined-repos";
 import { useConfiguration, useListConfigurations } from "../data/configurations/configuration-queries";
 
+const isPredefined = (repo: SuggestedRepository): boolean => {
+    return PREDEFINED_REPOS.some((predefined) => predefined.url === repo.url) && !repo.configurationId;
+};
+
+const resolveIcon = (contextUrl?: string): string => {
+    if (!contextUrl) return RepositorySVG;
+    return PREDEFINED_REPOS.some((repo) => repo.url === contextUrl) ? GitpodRepositoryTemplateSVG : RepositorySVG;
+};
+
 interface RepositoryFinderProps {
     selectedContextURL?: string;
     selectedConfigurationId?: string;
@@ -54,7 +63,6 @@ export default function RepositoryFinder({
         searchString,
         excludeConfigurations,
         onlyConfigurations,
-        showExamples,
     });
 
     // We search for the current context URL in order to have data for the selected suggestion
@@ -112,12 +120,6 @@ export default function RepositoryFinder({
 
     const authProviders = useAuthProviderDescriptions();
 
-    // This approach creates a memoized Map of the predefined repos,
-    // which can be more efficient for lookups if we would have a large number of predefined repos
-    const memoizedPredefinedRepos = useMemo(() => {
-        return new Map(PREDEFINED_REPOS.map((repo) => [repo.url, repo]));
-    }, []);
-
     const handleSelectionChange = useCallback(
         (selectedID: string) => {
             const matchingSuggestion = repos?.find(
@@ -129,7 +131,7 @@ export default function RepositoryFinder({
                 return;
             }
 
-            const matchingPredefinedRepo = memoizedPredefinedRepos.get(selectedID);
+            const matchingPredefinedRepo = PREDEFINED_REPOS.find((repo) => repo.url === selectedID);
             if (matchingPredefinedRepo) {
                 onChange?.(
                     new SuggestedRepository({
@@ -142,20 +144,15 @@ export default function RepositoryFinder({
 
             onChange?.(new SuggestedRepository({ url: selectedID }));
         },
-        [onChange, repos, memoizedPredefinedRepos],
+        [onChange, repos],
     );
 
     const [selectedSuggestion, setSelectedSuggestion] = useState<SuggestedRepository | undefined>(undefined);
     const [hasStartedSearching, setHasStartedSearching] = useState(false);
     const [isShowingExamples, setIsShowingExamples] = useState(showExamples);
 
     type PredefinedRepositoryOptionProps = {
-        repo: {
-            url: string;
-            repoName: string;
-            description: string;
-            repoPath: string;
-        };
+        repo: typeof PREDEFINED_REPOS[number];
     };
 
     const PredefinedRepositoryOption: FC<PredefinedRepositoryOptionProps> = ({ repo }) => {
@@ -235,6 +232,10 @@ export default function RepositoryFinder({
             return;
         }
 
+        if (isPredefined(selectedSuggestion)) {
+            return PREDEFINED_REPOS.find((repo) => repo.url === selectedSuggestion.url)?.repoName;
+        }
+
         if (!selectedSuggestion?.configurationName) {
             return displayContextUrl(selectedSuggestion?.repoName || selectedSuggestion?.url);
         }
@@ -256,19 +257,22 @@ export default function RepositoryFinder({
 
     const getElements = useCallback(
         (searchString: string): ComboboxElement[] => {
-            if (isShowingExamples && searchString.length === 0 && !onlyConfigurations) {
+            if (isShowingExamples && !onlyConfigurations) {
                 return PREDEFINED_REPOS.map((repo) => ({
                     id: repo.url,
                     element: <PredefinedRepositoryOption repo={repo} />,
                     isSelectable: true,
                 }));
             }
 
-            const result = repos.map((repo) => ({
-                id: repo.configurationId || repo.url,
-                element: <SuggestedRepositoryOption repo={repo} />,
-                isSelectable: true,
-            }));
+            // We deduplicate predefined repos, because we artificially add them to the list just below
+            const result = repos
+                .filter((repo) => !isPredefined(repo))
+                .map((repo) => ({
+                    id: repo.configurationId || repo.url,
+                    element: <SuggestedRepositoryOption repo={repo} />,
+                    isSelectable: true,
+                }));
 
             if (!onlyConfigurations) {
                 // Add predefined repos to end of the list.
@@ -332,11 +336,6 @@ export default function RepositoryFinder({
         [repos, hasMore, authProviders.data, onlyConfigurations, isShowingExamples],
     );
 
-    const resolveIcon = useCallback((contextUrl?: string) => {
-        if (!contextUrl) return RepositorySVG;
-        return PREDEFINED_REPOS.some((repo) => repo.url === contextUrl) ? GitpodRepositoryTemplateSVG : RepositorySVG;
-    }, []);
-
     return (
         <Combobox
             getElements={getElements}

components/dashboard/src/data/git-providers/predefined-repos.ts

@@ -17,4 +17,4 @@ export const PREDEFINED_REPOS = [
         description: "A fully configured demo with Java, Maven and Spring Boot",
         repoPath: "github.com/gitpod-demos/spring-petclinic",
     },
-];
+] as const;

components/dashboard/src/data/git-providers/unified-repositories-search-query.ts

@@ -7,7 +7,6 @@
 import { SuggestedRepository } from "@gitpod/public-api/lib/gitpod/v1/scm_pb";
 import { useSearchRepositories } from "./search-repositories-query";
 import { useSuggestedRepositories } from "./suggested-repositories-query";
-import { PREDEFINED_REPOS } from "./predefined-repos";
 import { useMemo } from "react";
 import { useListConfigurations } from "../configurations/configuration-queries";
 import type { UseInfiniteQueryResult } from "@tanstack/react-query";
@@ -25,15 +24,12 @@ type UnifiedRepositorySearchArgs = {
     excludeConfigurations?: boolean;
     // If true, only shows entries with a corresponding configuration
     onlyConfigurations?: boolean;
-    // If true, only shows example repositories
-    showExamples?: boolean;
 };
 // Combines the suggested repositories and the search repositories query into one hook
 export const useUnifiedRepositorySearch = ({
     searchString,
     excludeConfigurations = false,
     onlyConfigurations = false,
-    showExamples = false,
 }: UnifiedRepositorySearchArgs) => {
     // 1st data source: suggested SCM repos + up to 100 imported repos.
     // todo(ft): look into deduplicating and merging these on the server
@@ -65,20 +61,9 @@ export const useUnifiedRepositorySearch = ({
     }, [configurationSearch.data, excludeConfigurations]);
 
     const filteredRepos = useMemo(() => {
-        if (showExamples && searchString.length === 0) {
-            return PREDEFINED_REPOS.map(
-                (repo) =>
-                    new SuggestedRepository({
-                        url: repo.url,
-                        repoName: repo.repoName,
-                    }),
-            );
-        }
-
         const repos = [suggestedQuery.data || [], searchQuery.data || [], flattenedConfigurations ?? []].flat();
         return deduplicateAndFilterRepositories(searchString, excludeConfigurations, onlyConfigurations, repos);
     }, [
-        showExamples,
         searchString,
         suggestedQuery.data,
         searchQuery.data,