[dashboard] Enable the 'New Workspace' modal on all dashboard pages (Cmd/Ctrl+O)

Author: jankeromnes

components/dashboard/src/App.tsx

@@ -26,6 +26,7 @@ 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'));
@@ -392,6 +393,7 @@ function App() {
                     }}>
                 </Route>
             </Switch>
+            <StartWorkspaceModal />
         </div>
     </Route>;
 

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/workspaces/StartWorkspaceModal.tsx

@@ -4,18 +4,16 @@
  * See License-AGPL.txt in the project root for license information.
  */
 
+import { useContext } from "react";
 import Modal from "../components/Modal";
 import RepositoryFinder from "../components/RepositoryFinder";
+import { StartWorkspaceModalContext } from "./start-workspace-modal-context";
 
-interface StartWorkspaceModalProps {
-    visible: boolean;
-    onClose: () => void;
-}
+export function StartWorkspaceModal() {
+    const { isStartWorkspaceModalVisible, setIsStartWorkspaceModalVisible } = useContext(StartWorkspaceModalContext);
 
-export function StartWorkspaceModal(props: StartWorkspaceModalProps) {
-    return <Modal onClose={props.onClose} onEnter={() => false} visible={props.visible}>
+    return <Modal onClose={() => setIsStartWorkspaceModalVisible(false)} onEnter={() => false} visible={!!isStartWorkspaceModalVisible}>
         <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-4">
             <h4 className="text-base">Search or paste a repository URL</h4>
             <RepositoryFinder />

components/dashboard/src/workspaces/Workspaces.tsx

@@ -11,10 +11,10 @@ import DropDown from "../components/DropDown";
 import { WorkspaceModel } from "./workspace-model";
 import { WorkspaceEntry } from "./WorkspaceEntry";
 import { getGitpodService } from "../service/service";
-import { StartWorkspaceModal } from "./StartWorkspaceModal";
 import { ItemsList } from "../components/ItemsList";
 import { TeamsContext } from "../teams/teams-context";
 import { useLocation } from "react-router";
+import { StartWorkspaceModalContext, StartWorkspaceModalKeyBinding } from "./start-workspace-modal-context";
 
 export interface WorkspacesProps {
 }
@@ -31,8 +31,8 @@ export default function () {
     const { teams } = useContext(TeamsContext);
     const [activeWorkspaces, setActiveWorkspaces] = useState<WorkspaceInfo[]>([]);
     const [inactiveWorkspaces, setInactiveWorkspaces] = useState<WorkspaceInfo[]>([]);
-    const [isTemplateModelOpen, setIsTemplateModelOpen] = useState<boolean>(false);
     const [workspaceModel, setWorkspaceModel] = useState<WorkspaceModel>();
+    const { setIsStartWorkspaceModalVisible } = useContext(StartWorkspaceModalContext);
 
     useEffect(() => {
         (async () => {
@@ -41,22 +41,6 @@ export default function () {
         })();
     }, [teams, location]);
 
-    const showStartWSModal = () => setIsTemplateModelOpen(true);
-    const hideStartWSModal = () => setIsTemplateModelOpen(false);
-
-    useEffect(() => {
-        const onKeyDown = (event: KeyboardEvent) => {
-            if ((event.metaKey || event.ctrlKey) && ['k', 'o', 'p'].includes(event.key)) {
-                event.preventDefault();
-                showStartWSModal();
-            }
-        };
-        window.addEventListener('keydown', onKeyDown);
-        return () => {
-            window.removeEventListener('keydown', onKeyDown);
-        }
-    }, []);
-
     return <>
         <Header title="Workspaces" subtitle="Manage recent and stopped workspaces." />
 
@@ -85,7 +69,7 @@ export default function () {
                                 onClick: () => { if (workspaceModel) workspaceModel.limit = 200; }
                             }]} />
                         </div>
-                        <button onClick={showStartWSModal} className="ml-2">New Workspace</button>
+                        <button onClick={() => setIsStartWorkspaceModalVisible(true)} className="ml-2">New Workspace ({StartWorkspaceModalKeyBinding})</button>
                     </div>
                     <ItemsList className="app-container pb-40">
                         <div className="border-t border-gray-200 dark:border-gray-800"></div>
@@ -115,14 +99,13 @@ export default function () {
                                 <h3 className="text-center pb-3 text-gray-500 dark:text-gray-400">No Workspaces</h3>
                                 <div className="text-center pb-6 text-gray-500">Prefix any Git repository URL with {window.location.host}/# or create a new workspace for a recently used project. <a className="gp-link" href="https://www.gitpod.io/docs/getting-started/">Learn more</a></div>
                                 <span>
-                                    <button onClick={showStartWSModal}>New Workspace</button>
+                                    <button onClick={() => setIsStartWorkspaceModalVisible(true)}>New Workspace ({StartWorkspaceModalKeyBinding})</button>
                                 </span>
                             </>
                         </div>
                     </div>
                 </div>
         )}
-        <StartWorkspaceModal onClose={hideStartWSModal} visible={!!isTemplateModelOpen} />
     </>;
 
 }

components/dashboard/src/workspaces/start-workspace-modal-context.tsx

@@ -0,0 +1,37 @@
+/**
+ * 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 React, { createContext, useEffect, useState } from 'react';
+
+export const StartWorkspaceModalContext = createContext<{
+    isStartWorkspaceModalVisible?: boolean,
+    setIsStartWorkspaceModalVisible: React.Dispatch<boolean>,
+}>({
+    setIsStartWorkspaceModalVisible: () => null,
+});
+
+export const StartWorkspaceModalContextProvider: React.FC = ({ children }) => {
+    const [ isStartWorkspaceModalVisible, setIsStartWorkspaceModalVisible ] = useState<boolean>(false);
+
+    useEffect(() => {
+        const onKeyDown = (event: KeyboardEvent) => {
+            if ((event.metaKey || event.ctrlKey) && event.key === 'o') {
+                event.preventDefault();
+                setIsStartWorkspaceModalVisible(true);
+            }
+        };
+        window.addEventListener('keydown', onKeyDown);
+        return () => {
+            window.removeEventListener('keydown', onKeyDown);
+        }
+    }, []);
+
+    return <StartWorkspaceModalContext.Provider value={{ isStartWorkspaceModalVisible, setIsStartWorkspaceModalVisible }}>
+        {children}
+    </StartWorkspaceModalContext.Provider>;
+}
+
+export const StartWorkspaceModalKeyBinding = `${/(Mac|iPhone|iPod|iPad)/i.test(navigator.platform) ? '⌘' : 'Ctrl+'}O`;