[dashboard] Onboarding: Add Gitpod repository template to New workspace component (#19991)

* feat: Add Gitpod repo. template to New workspace component

* also add name when template repo is selected

* Add the `showExamples` option to the `CreateWorkspacePage` component in order to control whether example repositories should be shown. The option is passed down to the `StartWorkspaceOptions` component and used to conditionally render the examples section.

* bring back to deep repo search when someone start searching anything on `/new?showExamples=true`

Author: Siddhant-K-code

components/dashboard/src/components/RepositoryFinder.tsx

@@ -8,12 +8,15 @@ import { FC, useCallback, useEffect, useMemo, useState } from "react";
 import { Combobox, ComboboxElement, ComboboxSelectedItem } from "./podkit/combobox/Combobox";
 import RepositorySVG from "../icons/Repository.svg";
 import { ReactComponent as RepositoryIcon } from "../icons/RepositoryWithColor.svg";
+import { ReactComponent as GitpodRepositoryTemplate } from "../icons/GitpodRepositoryTemplate.svg";
+import GitpodRepositoryTemplateSVG from "../icons/GitpodRepositoryTemplate.svg";
 import { MiddleDot } from "./typography/MiddleDot";
 import { useUnifiedRepositorySearch } from "../data/git-providers/unified-repositories-search-query";
 import { useAuthProviderDescriptions } from "../data/auth-providers/auth-provider-descriptions-query";
 import { ReactComponent as Exclamation2 } from "../images/exclamation2.svg";
 import { AuthProviderType } from "@gitpod/public-api/lib/gitpod/v1/authprovider_pb";
 import { SuggestedRepository } from "@gitpod/public-api/lib/gitpod/v1/scm_pb";
+import { PREDEFINED_REPOS } from "../data/git-providers/predefined-repos";
 
 interface RepositoryFinderProps {
     selectedContextURL?: string;
@@ -22,6 +25,7 @@ interface RepositoryFinderProps {
     expanded?: boolean;
     excludeConfigurations?: boolean;
     onlyConfigurations?: boolean;
+    showExamples?: boolean;
     onChange?: (repo: SuggestedRepository) => void;
 }
 
@@ -32,6 +36,7 @@ export default function RepositoryFinder({
     expanded,
     excludeConfigurations = false,
     onlyConfigurations = false,
+    showExamples = false,
     onChange,
 }: RepositoryFinderProps) {
     const [searchString, setSearchString] = useState("");
@@ -44,35 +49,75 @@ export default function RepositoryFinder({
         searchString,
         excludeConfigurations: excludeConfigurations,
         onlyConfigurations: onlyConfigurations,
+        showExamples: showExamples,
     });
 
     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) => {
-            // selectedId is either configurationId or repo url
-            const matchingSuggestion = repos?.find((repo) => {
-                if (repo.configurationId) {
-                    return repo.configurationId === selectedID;
-                }
+            const matchingSuggestion = repos?.find(
+                (repo) => repo.configurationId === selectedID || repo.url === selectedID,
+            );
 
-                return repo.url === selectedID;
-            });
             if (matchingSuggestion) {
                 onChange?.(matchingSuggestion);
                 return;
             }
 
-            onChange?.(
-                new SuggestedRepository({
-                    url: selectedID,
-                }),
-            );
+            const matchingPredefinedRepo = memoizedPredefinedRepos.get(selectedID);
+            if (matchingPredefinedRepo) {
+                onChange?.(
+                    new SuggestedRepository({
+                        url: matchingPredefinedRepo.url,
+                        repoName: matchingPredefinedRepo.repoName,
+                    }),
+                );
+                return;
+            }
+
+            onChange?.(new SuggestedRepository({ url: selectedID }));
         },
-        [onChange, repos],
+        [onChange, repos, memoizedPredefinedRepos],
     );
 
     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;
+        };
+    };
+
+    const PredefinedRepositoryOption: FC<PredefinedRepositoryOptionProps> = ({ repo }) => {
+        return (
+            <div className="flex flex-col overflow-hidden" aria-label={`Demo: ${repo.url}`}>
+                <div className="flex items-center">
+                    <GitpodRepositoryTemplate className="w-5 h-5 text-pk-content-tertiary mr-2" />
+                    <span className="text-sm font-semibold">{repo.repoName}</span>
+                    <MiddleDot className="px-0.5 text-pk-content-tertiary" />
+                    <span
+                        className="text-sm whitespace-nowrap truncate overflow-ellipsis text-pk-content-secondary"
+                        title={repo.repoPath}
+                    >
+                        {repo.repoPath}
+                    </span>
+                </div>
+                <span className="text-xs text-pk-content-secondary ml-7">{repo.description}</span>
+            </div>
+        );
+    };
 
     // Resolve the selected context url & configurationId id props to a suggestion entry
     useEffect(() => {
@@ -86,9 +131,17 @@ export default function RepositoryFinder({
 
         // If no match, it's a context url that was typed/pasted in, so treat it like a suggestion w/ just a url
         if (!match && selectedContextURL) {
-            match = new SuggestedRepository({
-                url: selectedContextURL,
-            });
+            const predefinedMatch = PREDEFINED_REPOS.find((repo) => repo.url === selectedContextURL);
+            if (predefinedMatch) {
+                match = new SuggestedRepository({
+                    url: predefinedMatch.url,
+                    repoName: predefinedMatch.repoName,
+                });
+            } else {
+                match = new SuggestedRepository({
+                    url: selectedContextURL,
+                });
+            }
         }
 
         // This means we found a matching configuration, but the context url is different
@@ -112,7 +165,7 @@ export default function RepositoryFinder({
 
         // If we put the selectedSuggestion in the dependency array, it will cause an infinite loop
         // eslint-disable-next-line react-hooks/exhaustive-deps
-    }, [repos, selectedContextURL, selectedConfigurationId]);
+    }, [repos, selectedContextURL, selectedConfigurationId, isShowingExamples]);
 
     const displayName = useMemo(() => {
         if (!selectedSuggestion) {
@@ -126,27 +179,44 @@ export default function RepositoryFinder({
         return selectedSuggestion?.configurationName;
     }, [selectedSuggestion]);
 
+    const handleSearchChange = (value: string) => {
+        setSearchString(value);
+        if (value.length > 0) {
+            setIsShowingExamples(false);
+            if (!hasStartedSearching) {
+                setHasStartedSearching(true);
+            }
+        } else {
+            setIsShowingExamples(showExamples);
+        }
+    };
+
     const getElements = useCallback(
-        // searchString ignore here as list is already pre-filtered against it
-        // w/ mirrored state via useUnifiedRepositorySearch
-        (searchString: string) => {
-            const result = repos.map((repo) => {
-                return {
-                    id: repo.configurationId || repo.url,
-                    element: <SuggestedRepositoryOption repo={repo} />,
+        (searchString: string): ComboboxElement[] => {
+            if (isShowingExamples && searchString.length === 0) {
+                return PREDEFINED_REPOS.map((repo) => ({
+                    id: repo.url,
+                    element: <PredefinedRepositoryOption repo={repo} />,
                     isSelectable: true,
-                } as ComboboxElement;
-            });
+                }));
+            }
+
+            const result = repos.map((repo) => ({
+                id: repo.configurationId || repo.url,
+                element: <SuggestedRepositoryOption repo={repo} />,
+                isSelectable: true,
+            }));
+
             if (hasMore) {
-                // add an element that tells the user to refine the search
                 result.push({
                     id: "more",
                     element: (
                         <div className="text-sm text-pk-content-tertiary">Repo missing? Try refining your search.</div>
                     ),
                     isSelectable: false,
-                } as ComboboxElement);
+                });
             }
+
             if (
                 searchString.length >= 3 &&
                 authProviders.data?.some((p) => p.type === AuthProviderType.BITBUCKET_SERVER) &&
@@ -156,16 +226,15 @@ export default function RepositoryFinder({
                 result.push({
                     id: "bitbucket-server",
                     element: (
-                        <div className="text-sm text-pk-content-tertiary">
-                            <div className="flex items-center">
-                                <Exclamation2 className="w-4 h-4"></Exclamation2>
-                                <span className="ml-2">Bitbucket Server only supports searching by prefix.</span>
-                            </div>
+                        <div className="text-sm text-pk-content-tertiary flex items-center">
+                            <Exclamation2 className="w-4 h-4 mr-2" />
+                            <span>Bitbucket Server only supports searching by prefix.</span>
                         </div>
                     ),
                     isSelectable: false,
-                } as ComboboxElement);
+                });
             }
+
             if (searchString.length < 3) {
                 // add an element that tells the user to type more
                 result.push({
@@ -176,13 +245,19 @@ export default function RepositoryFinder({
                         </div>
                     ),
                     isSelectable: false,
-                } as ComboboxElement);
+                });
             }
+
             return result;
         },
-        [repos, hasMore, authProviders.data, onlyConfigurations],
+        [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}
@@ -192,11 +267,11 @@ export default function RepositoryFinder({
             disabled={disabled}
             // Only consider the isLoading prop if we're including projects in list
             loading={isLoading || isSearching}
-            searchPlaceholder="Paste repository URL or type to find suggestions"
-            onSearchChange={setSearchString}
+            searchPlaceholder="Search repos and demos or paste a repo URL"
+            onSearchChange={handleSearchChange}
         >
             <ComboboxSelectedItem
-                icon={RepositorySVG}
+                icon={resolveIcon(selectedContextURL)}
                 htmlTitle={displayContextUrl(selectedContextURL) || "Repository"}
                 title={<div className="truncate">{displayName || "Select a repository"}</div>}
                 subtitle={

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

@@ -0,0 +1,20 @@
+/**
+ * Copyright (c) 2024 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.
+ */
+
+export const PREDEFINED_REPOS = [
+    {
+        url: "https://github.com/gitpod-demos/voting-app",
+        repoName: "demo-docker",
+        description: "A fully configured demo with Docker Compose, Redis and Postgres",
+        repoPath: "github.com/gitpod-demos/voting-app",
+    },
+    {
+        url: "https://github.com/gitpod-demos/spring-petclinic",
+        repoName: "demo-java",
+        description: "A fully configured demo with Java, Maven and Spring Boot",
+        repoPath: "github.com/gitpod-demos/spring-petclinic",
+    },
+];

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

@@ -7,6 +7,7 @@
 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";
 
 type UnifiedRepositorySearchArgs = {
@@ -15,27 +16,34 @@ 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) => {
     const suggestedQuery = useSuggestedRepositories({ excludeConfigurations });
     const searchLimit = 30;
     const searchQuery = useSearchRepositories({ searchString, limit: searchLimit });
 
     const filteredRepos = useMemo(() => {
-        const flattenedRepos = [suggestedQuery.data || [], searchQuery.data || []].flat();
+        if (showExamples && searchString.length === 0) {
+            return PREDEFINED_REPOS.map(
+                (repo) =>
+                    new SuggestedRepository({
+                        url: repo.url,
+                        repoName: repo.repoName,
+                    }),
+            );
+        }
 
-        return deduplicateAndFilterRepositories(
-            searchString,
-            excludeConfigurations,
-            onlyConfigurations,
-            flattenedRepos,
-        );
-    }, [excludeConfigurations, onlyConfigurations, searchQuery.data, searchString, suggestedQuery.data]);
+        const repos = [suggestedQuery.data || [], searchQuery.data || []].flat();
+        return deduplicateAndFilterRepositories(searchString, excludeConfigurations, onlyConfigurations, repos);
+    }, [excludeConfigurations, onlyConfigurations, showExamples, searchQuery.data, searchString, suggestedQuery.data]);
 
     return {
         data: filteredRepos,

components/dashboard/src/icons/GitpodRepositoryTemplate.svg

@@ -10,6 +10,7 @@ export interface StartWorkspaceOptions {
     workspaceClass?: string;
     ideSettings?: IDESettings;
     autostart?: boolean;
+    showExamples?: boolean;
 }
 export namespace StartWorkspaceOptions {
     // The workspace class to use for the workspace. If not specified, the default workspace class is used.
@@ -21,6 +22,9 @@ export namespace StartWorkspaceOptions {
     // whether the workspace should automatically start
     export const AUTOSTART = "autostart";
 
+    // whether to show example repositories
+    export const SHOW_EXAMPLES = "showExamples";
+
     export function parseSearchParams(search: string): StartWorkspaceOptions {
         const params = new URLSearchParams(search);
         const options: StartWorkspaceOptions = {};
@@ -45,6 +49,11 @@ export namespace StartWorkspaceOptions {
         if (params.get(StartWorkspaceOptions.AUTOSTART)) {
             options.autostart = params.get(StartWorkspaceOptions.AUTOSTART) === "true";
         }
+
+        if (params.get(StartWorkspaceOptions.SHOW_EXAMPLES)) {
+            options.showExamples = params.get(StartWorkspaceOptions.SHOW_EXAMPLES) === "true";
+        }
+
         return options;
     }
 
@@ -61,6 +70,9 @@ export namespace StartWorkspaceOptions {
         if (options.autostart) {
             params.set(StartWorkspaceOptions.AUTOSTART, "true");
         }
+        if (options.showExamples) {
+            params.set(StartWorkspaceOptions.SHOW_EXAMPLES, "true");
+        }
         return params.toString();
     }
 

components/dashboard/src/start/start-workspace-options.ts

@@ -102,6 +102,7 @@ export function CreateWorkspacePage() {
         isLoading: isLoadingWorkspaceClasses,
     } = useAllowedWorkspaceClassesMemo(selectedProjectID);
     const defaultWorkspaceClass = props.workspaceClass ?? computedDefaultClass;
+    const showExamples = props.showExamples ?? false;
     const { data: orgSettings } = useOrgSettingsQuery();
     const [selectedWsClass, setSelectedWsClass, selectedWsClassIsDirty] = useDirtyState(defaultWorkspaceClass);
     const [errorWsClass, setErrorWsClass] = useState<ReactNode | undefined>(undefined);
@@ -523,6 +524,7 @@ export function CreateWorkspacePage() {
                                 selectedConfigurationId={selectedProjectID}
                                 expanded={!contextURL}
                                 disabled={createWorkspaceMutation.isStarting}
+                                showExamples={showExamples}
                             />
                         </InputField>