[server][dashboard] Improve 'New Workspace' modal

components/dashboard/src/App.tsx

@@ -25,6 +25,8 @@ import { Experiment } from './experiments';
 import { workspacesPathMain } from './workspaces/workspaces.routes';
 import { settingsPathAccount, settingsPathIntegrations, settingsPathMain, settingsPathNotifications, settingsPathPlans, settingsPathPreferences, settingsPathTeams, settingsPathTeamsJoin, settingsPathTeamsNew, settingsPathVariables } from './settings/settings.routes';
 import { projectsPathInstallGitHubApp, projectsPathMain, projectsPathMainWithParams, projectsPathNew } from './projects/projects.routes';
+import { refreshSearchData } from './components/RepositoryFinder';
+import { StartWorkspaceModal } from './workspaces/StartWorkspaceModal';
 
 const Setup = React.lazy(() => import(/* webpackPrefetch: true */ './Setup'));
 const Workspaces = React.lazy(() => import(/* webpackPrefetch: true */ './workspaces/Workspaces'));
@@ -35,6 +37,7 @@ const Teams = React.lazy(() => import(/* webpackPrefetch: true */ './settings/Te
 const EnvironmentVariables = React.lazy(() => import(/* webpackPrefetch: true */ './settings/EnvironmentVariables'));
 const Integrations = React.lazy(() => import(/* webpackPrefetch: true */ './settings/Integrations'));
 const Preferences = React.lazy(() => import(/* webpackPrefetch: true */ './settings/Preferences'));
+const Open = React.lazy(() => import(/* webpackPrefetch: true */ './start/Open'));
 const StartWorkspace = React.lazy(() => import(/* webpackPrefetch: true */ './start/StartWorkspace'));
 const CreateWorkspace = React.lazy(() => import(/* webpackPrefetch: true */ './start/CreateWorkspace'));
 const NewTeam = React.lazy(() => import(/* webpackPrefetch: true */ './teams/NewTeam'));
@@ -216,6 +219,12 @@ function App() {
         return () => window.removeEventListener("click", handleButtonOrAnchorTracking, true);
     }, []);
 
+    useEffect(() => {
+        if (user) {
+            refreshSearchData('', user);
+        }
+    }, [user]);
+
     // redirect to website for any website slugs
     if (isGitpodIo() && isWebsiteSlug(window.location.pathname)) {
         window.location.host = 'www.gitpod.io';
@@ -275,6 +284,7 @@ function App() {
             <Menu />
             <Switch>
                 <Route path={projectsPathNew} exact component={NewProject} />
+                <Route path="/open" exact component={Open} />
                 <Route path="/setup" exact component={Setup} />
                 <Route path={workspacesPathMain} exact component={Workspaces} />
                 <Route path={settingsPathAccount} exact component={Account} />
@@ -383,6 +393,7 @@ function App() {
                     }}>
                 </Route>
             </Switch>
+            <StartWorkspaceModal />
         </div>
     </Route>;
 

components/dashboard/src/Menu.tsx

@@ -69,7 +69,7 @@ export default function Menu() {
     }
 
     // Hide most of the top menu when in a full-page form.
-    const isMinimalUI = ['/new', '/teams/new'].includes(location.pathname);
+    const isMinimalUI = ['/new', '/teams/new', '/open'].includes(location.pathname);
 
     const [ teamMembers, setTeamMembers ] = useState<Record<string, TeamMemberInfo[]>>({});
     useEffect(() => {

components/dashboard/src/components/Modal.tsx

@@ -51,7 +51,7 @@ export default function Modal(props: {
     return (
         <div className="fixed top-0 left-0 bg-black bg-opacity-70 z-50 w-screen h-screen">
             <div className="w-screen h-screen align-middle" style={{display: 'table-cell'}}>
-                <div className={"relative bg-white dark:bg-gray-900 border border-gray-200 dark:border-gray-800 rounded-xl p-6 max-w-lg mx-auto text-left text-gray-600 " + (props.className || '')} onClick={e => e.stopPropagation()}>
+                <div className={"relative bg-white dark:bg-gray-900 border border-gray-200 dark:border-gray-800 rounded-xl p-6 max-w-lg mx-auto text-left " + (props.className || '')} onClick={e => e.stopPropagation()}>
                     {props.closeable !== false && (
                         <div className="absolute right-7 top-6 cursor-pointer text-gray-800 dark:text-gray-100 hover:bg-gray-200 dark:hover:bg-gray-700 rounded-md p-2" onClick={props.onClose}>
                             <svg version="1.1" width="14px" height="14px"

components/dashboard/src/components/RepositoryFinder.tsx

@@ -0,0 +1,175 @@
+/**
+ * Copyright (c) 2022 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 { User } from "@gitpod/gitpod-protocol";
+import React, { useContext, useEffect, useState } from "react";
+import { Link } from "react-router-dom";
+import { getGitpodService } from "../service/service";
+import { UserContext } from "../user-context";
+
+type SearchResult = string;
+type SearchData = SearchResult[];
+
+const LOCAL_STORAGE_KEY = 'open-in-gitpod-search-data';
+const MAX_DISPLAYED_ITEMS = 15;
+
+export default function RepositoryFinder(props: { initialQuery?: string }) {
+    const { user } = useContext(UserContext);
+    const [searchQuery, setSearchQuery] = useState<string>(props.initialQuery || '');
+    const [searchResults, setSearchResults] = useState<SearchResult[]>([]);
+    const [selectedSearchResult, setSelectedSearchResult] = useState<SearchResult | undefined>();
+
+    const onResults = (results: SearchResult[]) => {
+        if (JSON.stringify(results) !== JSON.stringify(searchResults)) {
+            setSearchResults(results);
+            setSelectedSearchResult(results[0]);
+        }
+    }
+
+    const search = async (query: string) => {
+        setSearchQuery(query);
+        await findResults(query, onResults);
+        if (await refreshSearchData(query, user)) {
+            // Re-run search if the underlying search data has changed
+            await findResults(query, onResults);
+        }
+    }
+
+    // Up/Down keyboard navigation between results
+    const onKeyDown = (event: React.KeyboardEvent) => {
+        if (!selectedSearchResult) {
+            return;
+        }
+        const selectedIndex = searchResults.indexOf(selectedSearchResult);
+        const select = (index: number) => {
+            // Implement a true modulus in order to "wrap around" (e.g. `select(-1)` should select the last result)
+            // Source: https://stackoverflow.com/a/4467559/3461173
+            const n = Math.min(searchResults.length, MAX_DISPLAYED_ITEMS);
+            setSelectedSearchResult(searchResults[((index % n) + n) % n]);
+        }
+        if (event.key === 'ArrowDown') {
+            event.preventDefault();
+            select(selectedIndex + 1);
+            return;
+        }
+        if (event.key === 'ArrowUp') {
+            event.preventDefault();
+            select(selectedIndex - 1);
+            return;
+        }
+    }
+
+    useEffect(() => {
+        const element = document.querySelector(`a[href='/#${selectedSearchResult}']`);
+        if (element) {
+            element.scrollIntoView({ behavior: 'smooth', block: 'nearest' });
+        }
+    }, [selectedSearchResult]);
+
+    const onSubmit = (event: React.FormEvent) => {
+        event.preventDefault();
+        if (selectedSearchResult) {
+            window.location.href = '/#' + selectedSearchResult;
+        }
+    }
+
+    return <form onSubmit={onSubmit}>
+        <div className="flex px-4 rounded-xl border border-gray-300 dark:border-gray-500">
+            <div className="py-4">
+                <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 16 16" width="16" height="16"><path fill="#A8A29E" d="M6 2a4 4 0 100 8 4 4 0 000-8zM0 6a6 6 0 1110.89 3.477l4.817 4.816a1 1 0 01-1.414 1.414l-4.816-4.816A6 6 0 010 6z" /></svg>
+            </div>
+            <input type="search" className="flex-grow" placeholder="Search repositories and examples" autoFocus value={searchQuery} onChange={e => search(e.target.value)} onKeyDown={onKeyDown} />
+        </div>
+        <div className="mt-3 -mx-5 px-5 flex flex-col space-y-2 h-64 overflow-y-auto">
+            {searchQuery === '' && searchResults.length === 0 &&
+                <div className="mt-12 mx-auto w-96 text-gray-500">
+                    Paste a <a className="gp-link" href="https://www.gitpod.io/docs/context-urls">repository context URL</a>, or start typing to see suggestions from:
+                    <ul className="list-disc mt-4 pl-7 flex flex-col space-y-1">
+                        <li>Your recent repositories</li>
+                        <li>Your repositories from <Link className="gp-link" to="/integrations">connected integrations</Link></li>
+                        <li>Example repositories</li>
+                    </ul>
+                </div>}
+            {searchResults.slice(0, MAX_DISPLAYED_ITEMS).map((result, index) =>
+                <a className={`px-4 py-3 rounded-xl` + (result === selectedSearchResult ? ' bg-gray-600 text-gray-50 dark:bg-gray-700' : '')} href={`/#${result}`} key={`search-result-${index}`} onMouseEnter={() => setSelectedSearchResult(result)}>
+                    {searchQuery.length < 2
+                        ? <span>{result}</span>
+                        : result.split(searchQuery).map((segment, index) => <span>
+                            {index === 0 ? <></> : <strong>{searchQuery}</strong>}
+                            {segment}
+                        </span>)}
+                </a>
+            )}
+            {searchResults.length > MAX_DISPLAYED_ITEMS &&
+                <span className="mt-3 px-4 py-2 text-sm text-gray-400 dark:text-gray-500">{searchResults.length - MAX_DISPLAYED_ITEMS} more result{(searchResults.length - MAX_DISPLAYED_ITEMS) === 1 ? '' : 's'} found</span>}
+        </div>
+    </form>;
+}
+
+function loadSearchData(): SearchData {
+    const string = localStorage.getItem(LOCAL_STORAGE_KEY);
+    if (!string) {
+        return [];
+    }
+    try {
+        const data = JSON.parse(string);
+        return data;
+    } catch (error) {
+        console.warn('Could not load search data from local storage', error);
+        return [];
+    }
+}
+
+function saveSearchData(searchData: SearchData): void {
+    try {
+        window.localStorage.setItem(LOCAL_STORAGE_KEY, JSON.stringify(searchData));
+    } catch (error) {
+        console.warn('Could not save search data into local storage', error);
+    }
+}
+
+let refreshSearchDataPromise: Promise<boolean> | undefined;
+export async function refreshSearchData(query: string, user: User | undefined): Promise<boolean> {
+    if (refreshSearchDataPromise) {
+        // Another refresh is already in progress, no need to run another one in parallel.
+        return refreshSearchDataPromise;
+    }
+    refreshSearchDataPromise = actuallyRefreshSearchData(query, user);
+    const didChange = await refreshSearchDataPromise;
+    refreshSearchDataPromise = undefined;
+    return didChange;
+}
+
+// Fetch all possible search results and cache them into local storage
+async function actuallyRefreshSearchData(query: string, user: User | undefined): Promise<boolean> {
+    console.log('refreshing search data');
+    const oldData = loadSearchData();
+    const newData = await getGitpodService().server.getSuggestedContextURLs();
+    if (JSON.stringify(oldData) !== JSON.stringify(newData)) {
+        console.log('new data:', newData);
+        saveSearchData(newData);
+        return true;
+    }
+    return false;
+}
+
+async function findResults(query: string, onResults: (results: string[]) => void) {
+    if (!query) {
+        onResults([]);
+        return;
+    }
+    const searchData = loadSearchData();
+    try {
+        // If the query is a URL, and it's not present in the proposed results, "artificially" add it here.
+        new URL(query);
+        if (!searchData.includes(query)) {
+            searchData.push(query);
+        }
+    } catch {
+    }
+    // console.log('searching', query, 'in', searchData);
+    onResults(searchData.filter(result => result.toLowerCase().includes(query.toLowerCase())));
+}

components/dashboard/src/index.tsx

@@ -12,6 +12,7 @@ import { AdminContextProvider } from './admin-context';
 import { TeamsContextProvider } from './teams/teams-context';
 import { ProjectContextProvider } from './projects/project-context';
 import { ThemeContextProvider } from './theme-context';
+import { StartWorkspaceModalContextProvider } from './workspaces/start-workspace-modal-context';
 import { BrowserRouter } from 'react-router-dom';
 
 import "./index.css"
@@ -23,9 +24,11 @@ ReactDOM.render(
                 <TeamsContextProvider>
                     <ProjectContextProvider>
                         <ThemeContextProvider>
-                            <BrowserRouter>
-                                <App />
-                            </BrowserRouter>
+                            <StartWorkspaceModalContextProvider>
+                                <BrowserRouter>
+                                    <App />
+                                </BrowserRouter>
+                            </StartWorkspaceModalContextProvider>
                         </ThemeContextProvider>
                     </ProjectContextProvider>
                 </TeamsContextProvider>

components/dashboard/src/start/Open.tsx

@@ -0,0 +1,34 @@
+/**
+ * Copyright (c) 2022 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, useState } from "react";
+import RepositoryFinder from "../components/RepositoryFinder";
+
+export default function Open() {
+    const [ initialQuery, setInitialQuery ] = useState<string | undefined>();
+
+    // Support pre-filling the search bar via the URL hash
+    useEffect(() => {
+        const onHashChange = () => {
+            const hash = window.location.hash.slice(1);
+            if (hash) {
+                setInitialQuery(hash);
+            }
+        }
+        onHashChange();
+        window.addEventListener('hashchange', onHashChange, false);
+        return () => {
+            window.removeEventListener('hashchange', onHashChange, false);
+        }
+    }, []);
+
+    return <div className="mt-24 mx-auto w-96 flex flex-col items-stretch">
+        <h1 className="text-center">Open in Gitpod</h1>
+        <div className="mt-8">
+            <RepositoryFinder initialQuery={initialQuery}/>
+        </div>
+    </div>;
+}

components/dashboard/src/workspaces/StartWorkspaceModal.tsx

@@ -4,70 +4,25 @@
  * See License-AGPL.txt in the project root for license information.
  */
 
-import { useEffect, useState } from "react";
+import { useContext, useEffect } from "react";
+import { useLocation } from "react-router";
 import Modal from "../components/Modal";
-import TabMenuItem from "../components/TabMenuItem";
+import RepositoryFinder from "../components/RepositoryFinder";
+import { StartWorkspaceModalContext } from "./start-workspace-modal-context";
 
-export interface WsStartEntry {
-    title: string
-    description: string
-    startUrl: string
-}
-
-interface StartWorkspaceModalProps {
-    visible: boolean;
-    recent: WsStartEntry[];
-    examples: WsStartEntry[];
-    selected?: Mode;
-    onClose: () => void;
-}
+export function StartWorkspaceModal() {
+    const { isStartWorkspaceModalVisible, setIsStartWorkspaceModalVisible } = useContext(StartWorkspaceModalContext);
+    const location = useLocation();
 
-type Mode = 'Recent' | 'Examples';
+    // Close the modal on navigation events.
+    useEffect(() => {
+        setIsStartWorkspaceModalVisible(false);
+    }, [location]);
 
-export function StartWorkspaceModal(p: StartWorkspaceModalProps) {
-    const computeSelection = () => p.selected || (p.recent.length > 0 ? 'Recent' : 'Examples');
-    const [selection, setSelection] = useState(computeSelection());
-    useEffect(() => { !p.visible && setSelection(computeSelection()) }, [p.visible, p.recent, p.selected]);
-
-    const list = (selection === 'Recent' ? p.recent : p.examples).map((e, i) =>
-        <a key={`item-${i}-${e.title}`} href={e.startUrl} className="rounded-xl group hover:bg-gray-100 dark:hover:bg-gray-800 flex p-4 my-1">
-            <div className="w-full">
-                <p className="text-base text-gray-800 dark:text-gray-200 font-semibold">{e.title}</p>
-                <p>{e.description}</p>
-            </div>
-        </a>);
-
-    return <Modal onClose={p.onClose} visible={p.visible}>
-        <h3 className="pb-2">New Workspace</h3>
-        {/* separator */}
-        <div className="border-t border-gray-200 dark:border-gray-800 mt-2 -mx-6 px-6 pt-2">
-            <div className="flex">
-                <TabMenuItem name='Recent' selected={selection === 'Recent'} onClick={() => setSelection('Recent')} />
-                {p.examples.length>0 && <TabMenuItem name='Examples' selected={selection === 'Examples'} onClick={() => setSelection('Examples')} />}
-            </div>
-        </div>
-        <div className="border-t border-gray-200 dark:border-gray-800 -mx-6 px-6 py-2">
-            {list.length > 0 ?
-                <p className="my-4 text-base">
-                    {selection === 'Recent' ?
-                        'Create a new workspace using the default branch.' :
-                        'Create a new workspace using an example project.'}
-                </p> : <p className="h-6 my-4"></p>}
-            <div className="space-y-2 mt-4 overflow-y-scroll h-80 pr-2">
-                {list.length > 0 ? list :
-                    (selection === 'Recent' ?
-                        <div className="flex flex-col pt-10 items-center px-2">
-                            <h3 className="mb-2 text-gray-500 dark:text-gray-400">No Recent Projects</h3>
-                            <p className="text-center">Projects you use frequently will show up here.</p>
-                            <p className="text-center">Prefix a Git repository URL with {window.location.host}/# or start with an example.</p>
-                            <button onClick={() => setSelection('Examples')} className="font-medium mt-8">Select Example</button>
-                        </div> :
-                        <div className="flex flex-col pt-10 items-center px-2">
-                            <h3 className="mb-2 text-gray-500 dark:text-gray-400">No Example Projects</h3>
-                            <p className="text-center">Sorry there seem to be no example projects, that work with your current Git provider.</p>
-                        </div>)
-                }
-            </div>
+    return <Modal onClose={() => setIsStartWorkspaceModalVisible(false)} onEnter={() => false} visible={!!isStartWorkspaceModalVisible}>
+        <h3 className="pb-2">Open in Gitpod</h3>
+        <div className="border-t border-gray-200 dark:border-gray-800 mt-2 -mx-6 px-6 pt-4">
+            <RepositoryFinder />
         </div>
     </Modal>;
 }