[dashboard] allow show options on ws start

svenefftinge · svenefftinge · commit 39c9e6330dbe · 2023-01-04T21:04:23.000Z
diff --git a/components/dashboard/src/app/AppRoutes.tsx b/components/dashboard/src/app/AppRoutes.tsx
@@ -4,7 +4,7 @@
  * See License.AGPL.txt in the project root for license information.
  */
 
-import React, { FunctionComponent, useState } from "react";
+import React, { FunctionComponent, useContext, useState } from "react";
 import { ContextURL, User, Team } from "@gitpod/gitpod-protocol";
 import SelectIDEModal from "../settings/SelectIDEModal";
 import { StartPage, StartPhase } from "../start/StartPage";
@@ -48,6 +48,8 @@ import { Blocked } from "./Blocked";
 // TODO: Can we bundle-split/lazy load these like other pages?
 import { BlockedRepositories } from "../admin/BlockedRepositories";
 import PersonalAccessTokenCreateView from "../settings/PersonalAccessTokensCreateView";
+import { StartWorkspaceModalContext } from "../workspaces/start-workspace-modal-context";
+import { parseSearchParams } from "../start/CreateWorkspace";
 
 const Setup = React.lazy(() => import(/* webpackPrefetch: true */ "../Setup"));
 const Workspaces = React.lazy(() => import(/* webpackPrefetch: true */ "../workspaces/Workspaces"));
@@ -94,7 +96,7 @@ type AppRoutesProps = {
 };
 export const AppRoutes: FunctionComponent<AppRoutesProps> = ({ user, teams }) => {
     const hash = getURLHash();
-
+    const { startWorkspaceModalProps, setStartWorkspaceModalProps } = useContext(StartWorkspaceModalContext);
     const [isWhatsNewShown, setWhatsNewShown] = useState(shouldSeeWhatsNew(user));
 
     // Prefix with `/#referrer` will specify an IDE for workspace
@@ -126,6 +128,19 @@ export const AppRoutes: FunctionComponent<AppRoutesProps> = ({ user, teams }) =>
                     <SelectIDEModal location="workspace_start" onClose={() => setShowUserIdePreference(false)} />
                 </StartPage>
             );
+        } else if (new URLSearchParams(window.location.search).has("showOptions")) {
+            const props = parseSearchParams(window.location.search);
+            return (
+                <StartWorkspaceModal
+                    {...{
+                        contextUrl: hash,
+                        ide: props?.ideSettings?.defaultIde,
+                        uselatestIde: props?.ideSettings?.useLatestVersion,
+                        workspaceClass: props.workspaceClass,
+                        onClose: undefined,
+                    }}
+                />
+            );
         } else {
             // return <div>create workspace yay {hash}</div>;
             return <CreateWorkspace contextUrl={hash} />;
@@ -294,7 +309,12 @@ export const AppRoutes: FunctionComponent<AppRoutesProps> = ({ user, teams }) =>
                         }}
                     ></Route>
                 </Switch>
-                <StartWorkspaceModal />
+                {startWorkspaceModalProps && (
+                    <StartWorkspaceModal
+                        {...startWorkspaceModalProps}
+                        onClose={startWorkspaceModalProps.onClose || (() => setStartWorkspaceModalProps(undefined))}
+                    />
+                )}
             </div>
         </Route>
     );
diff --git a/components/dashboard/src/components/RepositoryFinder.tsx b/components/dashboard/src/components/RepositoryFinder.tsx
@@ -14,7 +14,7 @@ const LOCAL_STORAGE_KEY = "open-in-gitpod-search-data";
 interface RepositoryFinderProps {
     initialValue?: string;
     maxDisplayItems?: number;
-    setSelection: (selection: string) => void;
+    setSelection?: (selection: string) => void;
 }
 
 function stripOffProtocol(url: string): string {
@@ -67,26 +67,35 @@ export default function RepositoryFinder(props: RepositoryFinderProps) {
         [suggestedContextURLs],
     );
 
+    const element = (
+        <div className="flex h-12" title="Repository">
+            <div className="mx-2 my-2">
+                <img className="w-8 filter-grayscale self-center" src={Repository} alt="logo" />
+            </div>
+            <div className="flex-col ml-1 mt-1 flex-grow">
+                <div className="flex font-semibold text-gray-700">
+                    <div className="text-gray-700 dark:text-gray-300">Context URL</div>
+                </div>
+                <div className={"flex text-xs text-gray-500 dark:text-gray-400 font-semibold "}>
+                    {displayContextUrl(props.initialValue) || "Select a repository"}
+                </div>
+            </div>
+        </div>
+    );
+
+    if (!props.setSelection) {
+        // readonly display value
+        return element;
+    }
+
     return (
         <DropDown2
             getElements={getElements}
             expanded={!props.initialValue}
             onSelectionChange={props.setSelection}
             searchPlaceholder="Paste repository URL or type to find suggestions"
         >
-            <div className="flex h-12" title="Repository">
-                <div className="mx-2 my-2">
-                    <img className="w-8 filter-grayscale self-center" src={Repository} alt="logo" />
-                </div>
-                <div className="flex-col ml-1 mt-1 flex-grow">
-                    <div className="flex font-semibold text-gray-700">
-                        <div className="text-gray-700 dark:text-gray-300">Repository</div>
-                    </div>
-                    <div className={"flex text-xs text-gray-500 dark:text-gray-400 font-semibold "}>
-                        {displayContextUrl(props.initialValue) || "Select a repository"}
-                    </div>
-                </div>
-            </div>
+            {element}
         </DropDown2>
     );
 }
diff --git a/components/dashboard/src/start/CreateWorkspace.tsx b/components/dashboard/src/start/CreateWorkspace.tsx
@@ -40,7 +40,7 @@ export interface CreateWorkspaceState {
     stillParsing: boolean;
 }
 
-function parseSearchParams(search: string): GitpodServer.StartWorkspaceOptions {
+export function parseSearchParams(search: string): GitpodServer.StartWorkspaceOptions {
     const params = new URLSearchParams(search);
     const options: GitpodServer.StartWorkspaceOptions = {};
     if (params.has(StartOptions.WORKSPACE_CLASS)) {
diff --git a/components/dashboard/src/workspaces/StartWorkspaceModal.tsx b/components/dashboard/src/workspaces/StartWorkspaceModal.tsx
@@ -5,25 +5,29 @@
  */
 
 import { StartOptions } from "@gitpod/gitpod-protocol/lib/util/gitpod-host-url";
-import { useCallback, useContext, useEffect, useState } from "react";
-import { useLocation } from "react-router";
+import { useCallback, useContext, useMemo, useState } from "react";
 import Modal from "../components/Modal";
 import RepositoryFinder from "../components/RepositoryFinder";
 import SelectIDEComponent from "../components/SelectIDEComponent";
 import SelectWorkspaceClassComponent from "../components/SelectWorkspaceClassComponent";
 import { UserContext } from "../user-context";
-import { StartWorkspaceModalContext } from "./start-workspace-modal-context";
 
-export function StartWorkspaceModal() {
+export interface StartWorkspaceModalProps {
+    uselatestIde?: boolean;
+    ide?: string;
+    workspaceClass?: string;
+    contextUrl?: string;
+    onClose?: () => void;
+}
+
+export function StartWorkspaceModal(props: StartWorkspaceModalProps) {
     const { user } = useContext(UserContext);
-    const { isStartWorkspaceModalVisible, setIsStartWorkspaceModalVisible } = useContext(StartWorkspaceModalContext);
-    const location = useLocation();
     const [useLatestIde, setUseLatestIde] = useState<boolean | undefined>(
-        !!user?.additionalData?.ideSettings?.useLatestVersion,
+        props.uselatestIde || !!user?.additionalData?.ideSettings?.useLatestVersion,
     );
-    const [selectedIde, setSelectedIde] = useState(user?.additionalData?.ideSettings?.defaultIde);
-    const [selectedWsClass, setSelectedWsClass] = useState<string | undefined>();
-    const [repo, setRepo] = useState<string | undefined>(undefined);
+    const [selectedIde, setSelectedIde] = useState(props.ide || user?.additionalData?.ideSettings?.defaultIde);
+    const [selectedWsClass, setSelectedWsClass] = useState<string | undefined>(props.workspaceClass);
+    const [repo, setRepo] = useState<string | undefined>(props.contextUrl);
     const onSelectEditorChange = useCallback(
         (ide: string, useLatest: boolean) => {
             setSelectedIde(ide);
@@ -52,37 +56,34 @@ export function StartWorkspaceModal() {
         return true;
     }, [repo, selectedIde, selectedWsClass, useLatestIde]);
 
-    // Close the modal on navigation events.
-    useEffect(() => {
-        setIsStartWorkspaceModalVisible(false);
-    }, [location, setIsStartWorkspaceModalVisible]);
-
-    useEffect(() => {
-        // reset state when visibility changes.
-        setSelectedIde(user?.additionalData?.ideSettings?.defaultIde);
-        setUseLatestIde(!!user?.additionalData?.ideSettings?.useLatestVersion);
-        setRepo(undefined);
-    }, [user, setSelectedIde, setUseLatestIde, isStartWorkspaceModalVisible]);
+    const buttons = useMemo(() => {
+        const result = [
+            <button key="cancel" className="secondary" onClick={props.onClose}>
+                Cancel
+            </button>,
+            <button key="start" className="" onClick={startWorkspace} disabled={!repo || repo.length === 0}>
+                New Workspace
+            </button>,
+        ];
+        if (!props.onClose) {
+            return result.slice(1, 2);
+        }
+        return result;
+    }, [props.onClose, repo, startWorkspace]);
 
     return (
         <Modal
-            onClose={() => setIsStartWorkspaceModalVisible(false)}
+            onClose={props.onClose || (() => {})}
+            closeable={!!props.onClose}
             onEnter={startWorkspace}
-            visible={!!isStartWorkspaceModalVisible}
+            visible={true}
             title="Open in Gitpod"
-            buttons={[
-                <button key="cancel" className="secondary" onClick={() => setIsStartWorkspaceModalVisible(false)}>
-                    Cancel
-                </button>,
-                <button key="start" className="" onClick={startWorkspace} disabled={!repo || repo.length === 0}>
-                    New Workspace
-                </button>,
-            ]}
+            buttons={buttons}
         >
             <div className="-mx-6 px-6">
-                <div className="text-xs text-gray-500">Select a repository and configure workspace options.</div>
+                <div className="text-xs text-gray-500">Start a new workspace with the following options.</div>
                 <div className="pt-3">
-                    <RepositoryFinder setSelection={setRepo} initialValue={repo} />
+                    <RepositoryFinder setSelection={props.contextUrl ? undefined : setRepo} initialValue={repo} />
                 </div>
                 <div className="pt-3">
                     <SelectIDEComponent
diff --git a/components/dashboard/src/workspaces/Workspaces.tsx b/components/dashboard/src/workspaces/Workspaces.tsx
@@ -45,7 +45,7 @@ export default function () {
     const [workspaceModel, setWorkspaceModel] = useState<WorkspaceModel>();
     const [showInactive, setShowInactive] = useState<boolean>();
     const [deleteModalVisible, setDeleteModalVisible] = useState<boolean>();
-    const { setIsStartWorkspaceModalVisible } = useContext(StartWorkspaceModalContext);
+    const { setStartWorkspaceModalProps } = useContext(StartWorkspaceModalContext);
 
     useEffect(() => {
         (async () => {
@@ -138,7 +138,7 @@ export default function () {
                                     ]}
                                 />
                             </div>
-                            <button onClick={() => setIsStartWorkspaceModalVisible(true)} className="ml-2">
+                            <button onClick={() => setStartWorkspaceModalProps({})} className="ml-2">
                                 New Workspace{" "}
                                 <span className="opacity-60 hidden md:inline">{StartWorkspaceModalKeyBinding}</span>
                             </button>
@@ -238,7 +238,7 @@ export default function () {
                                         </a>
                                     </div>
                                     <span>
-                                        <button onClick={() => setIsStartWorkspaceModalVisible(true)}>
+                                        <button onClick={() => setStartWorkspaceModalProps({})}>
                                             New Workspace{" "}
                                             <span className="opacity-60 hidden md:inline">
                                                 {StartWorkspaceModalKeyBinding}
diff --git a/components/dashboard/src/workspaces/start-workspace-modal-context.tsx b/components/dashboard/src/workspaces/start-workspace-modal-context.tsx
@@ -5,22 +5,27 @@
  */
 
 import React, { createContext, useEffect, useState } from "react";
+import { StartWorkspaceModalProps } from "./StartWorkspaceModal";
 
 export const StartWorkspaceModalContext = createContext<{
-    isStartWorkspaceModalVisible?: boolean;
-    setIsStartWorkspaceModalVisible: React.Dispatch<boolean>;
+    startWorkspaceModalProps?: StartWorkspaceModalProps;
+    setStartWorkspaceModalProps: React.Dispatch<StartWorkspaceModalProps | undefined>;
 }>({
-    setIsStartWorkspaceModalVisible: () => null,
+    setStartWorkspaceModalProps: () => null,
 });
 
 export const StartWorkspaceModalContextProvider: React.FC = ({ children }) => {
-    const [isStartWorkspaceModalVisible, setIsStartWorkspaceModalVisible] = useState<boolean>(false);
+    const [startWorkspaceModalProps, setStartWorkspaceModalProps] = useState<StartWorkspaceModalProps | undefined>(
+        undefined,
+    );
 
     useEffect(() => {
         const onKeyDown = (event: KeyboardEvent) => {
             if ((event.metaKey || event.ctrlKey) && event.key === "o") {
                 event.preventDefault();
-                setIsStartWorkspaceModalVisible(true);
+                setStartWorkspaceModalProps({
+                    onClose: () => setStartWorkspaceModalProps(undefined),
+                });
             }
         };
         window.addEventListener("keydown", onKeyDown);
@@ -30,7 +35,7 @@ export const StartWorkspaceModalContextProvider: React.FC = ({ children }) => {
     }, []);
 
     return (
-        <StartWorkspaceModalContext.Provider value={{ isStartWorkspaceModalVisible, setIsStartWorkspaceModalVisible }}>
+        <StartWorkspaceModalContext.Provider value={{ startWorkspaceModalProps, setStartWorkspaceModalProps }}>
             {children}
         </StartWorkspaceModalContext.Provider>
     );

Original file line number	Diff line number	Diff line change
`@@ -40,7 +40,7 @@ export interface CreateWorkspaceState {`
`40`	`40`	`stillParsing: boolean;`
`41`	`41`	`}`
`42`	`42`
`43`		`-function parseSearchParams(search: string): GitpodServer.StartWorkspaceOptions {`
	`43`	`+export function parseSearchParams(search: string): GitpodServer.StartWorkspaceOptions {`
`44`	`44`	`const params = new URLSearchParams(search);`
`45`	`45`	`const options: GitpodServer.StartWorkspaceOptions = {};`
`46`	`46`	`if (params.has(StartOptions.WORKSPACE_CLASS)) {`