[Create WS] Various fixes (#17135)

* [server] normalize contextURL

* [create workspace] only create one workspace

- respect referrer context
- useWorkspaceContext returns null instead of being disabled
when contextUrl is undefined

* [dashboard] immediately show running workspaces

Author: svenefftinge

components/dashboard/src/data/workspaces/resolve-context-query.ts

@@ -9,17 +9,11 @@ import { useQuery } from "@tanstack/react-query";
 import { getGitpodService } from "../../service/service";
 
 export function useWorkspaceContext(contextUrl?: string) {
-    const query = useQuery<WorkspaceContext, Error>(
-        ["workspace-context", contextUrl],
-        () => {
-            if (!contextUrl) {
-                throw new Error("no contextURL. Query should be disabled.");
-            }
-            return getGitpodService().server.resolveContext(contextUrl);
-        },
-        {
-            enabled: !!contextUrl,
-        },
-    );
+    const query = useQuery<WorkspaceContext | null, Error>(["workspace-context", contextUrl], () => {
+        if (!contextUrl) {
+            return null;
+        }
+        return getGitpodService().server.resolveContext(contextUrl);
+    });
     return query;
 }

components/dashboard/src/start/StartWorkspace.tsx

@@ -521,6 +521,7 @@ export default class StartWorkspace extends React.Component<StartWorkspaceProps,
                         <div className="flex flex-col text-center m-auto text-sm w-72 text-gray-400">
                             {client.installationSteps.map((step) => (
                                 <div
+                                    key={step}
                                     dangerouslySetInnerHTML={{
                                         // eslint-disable-next-line no-template-curly-in-string
                                         __html: step.replaceAll("${OPEN_LINK_LABEL}", openLinkLabel),

components/dashboard/src/workspaces/CreateWorkspacePage.tsx

@@ -4,14 +4,13 @@
  * See License.AGPL.txt in the project root for license information.
  */
 
-import { CommitContext, ContextURL, GitpodServer, WorkspaceInfo } from "@gitpod/gitpod-protocol";
+import { CommitContext, GitpodServer, WithReferrerContext } from "@gitpod/gitpod-protocol";
 import { SelectAccountPayload } from "@gitpod/gitpod-protocol/lib/auth";
 import { ErrorCodes } from "@gitpod/gitpod-protocol/lib/messaging/error";
 import { Deferred } from "@gitpod/gitpod-protocol/lib/util/deferred";
 import { FunctionComponent, useCallback, useEffect, useMemo, useState } from "react";
 import { useHistory, useLocation } from "react-router";
 import { Button } from "../components/Button";
-import Modal, { ModalBody, ModalFooter, ModalHeader } from "../components/Modal";
 import RepositoryFinder from "../components/RepositoryFinder";
 import SelectIDEComponent from "../components/SelectIDEComponent";
 import SelectWorkspaceClassComponent from "../components/SelectWorkspaceClassComponent";
@@ -21,6 +20,7 @@ import { useFeatureFlags } from "../contexts/FeatureFlagContext";
 import { useCurrentOrg } from "../data/organizations/orgs-query";
 import { useListProjectsQuery } from "../data/projects/list-projects-query";
 import { useCreateWorkspaceMutation } from "../data/workspaces/create-workspace-mutation";
+import { useListWorkspacesQuery } from "../data/workspaces/list-workspaces-query";
 import { useWorkspaceContext } from "../data/workspaces/resolve-context-query";
 import { openAuthorizeWindow } from "../provider-utils";
 import { gitpodHostUrl } from "../service/service";
@@ -29,6 +29,7 @@ import { StartWorkspaceOptions } from "../start/start-workspace-options";
 import { StartWorkspaceError } from "../start/StartPage";
 import { useCurrentUser } from "../user-context";
 import { SelectAccountModal } from "../user-settings/SelectAccountModal";
+import { WorkspaceEntry } from "./WorkspaceEntry";
 
 export const useNewCreateWorkspacePage = () => {
     const { startWithOptions } = useFeatureFlags();
@@ -40,6 +41,7 @@ export function CreateWorkspacePage() {
     const user = useCurrentUser();
     const currentOrg = useCurrentOrg().data;
     const projects = useListProjectsQuery();
+    const workspaces = useListWorkspacesQuery({ limit: 50, orgId: currentOrg?.id });
     const location = useLocation();
     const history = useHistory();
     const props = StartWorkspaceOptions.parseSearchParams(location.search);
@@ -101,14 +103,29 @@ export function CreateWorkspacePage() {
     );
     const [errorIde, setErrorIde] = useState<string | undefined>(undefined);
 
-    const [existingWorkspaces, setExistingWorkspaces] = useState<WorkspaceInfo[]>([]);
+    const existingWorkspaces = useMemo(() => {
+        if (!workspaces.data || !CommitContext.is(workspaceContext.data)) {
+            return [];
+        }
+        return workspaces.data.filter(
+            (ws) =>
+                ws.latestInstance?.status?.phase === "running" &&
+                CommitContext.is(ws.workspace.context) &&
+                CommitContext.is(workspaceContext.data) &&
+                ws.workspace.context.repository.cloneUrl === workspaceContext.data.repository.cloneUrl &&
+                ws.workspace.context.revision === workspaceContext.data.revision,
+        );
+    }, [workspaces.data, workspaceContext.data]);
     const [selectAccountError, setSelectAccountError] = useState<SelectAccountPayload | undefined>(undefined);
 
     const createWorkspace = useCallback(
         async (options?: Omit<GitpodServer.CreateWorkspaceOptions, "contextUrl">) => {
             // add options from search params
             const opts = options || {};
 
+            // we already have shown running workspaces to the user
+            opts.ignoreRunningWorkspaceOnSameCommit = true;
+
             if (!opts.workspaceClass) {
                 opts.workspaceClass = selectedWsClass;
             }
@@ -123,14 +140,17 @@ export function CreateWorkspacePage() {
             }
 
             const organizationId = currentOrg?.id;
-            console.log("organizationId: " + JSON.stringify(organizationId));
             if (!organizationId && !!user?.additionalData?.isMigratedToTeamOnlyAttribution) {
                 // We need an organizationId for this group of users
                 console.warn("Skipping createWorkspace");
                 return;
             }
 
             try {
+                if (createWorkspaceMutation.isLoading || createWorkspaceMutation.isSuccess) {
+                    console.log("Skipping duplicate createWorkspace call.");
+                    return;
+                }
                 const result = await createWorkspaceMutation.mutateAsync({
                     contextUrl: contextURL,
                     organizationId,
@@ -140,19 +160,42 @@ export function CreateWorkspacePage() {
                     window.location.href = result.workspaceURL;
                 } else if (result.createdWorkspaceId) {
                     history.push(`/start/#${result.createdWorkspaceId}`);
-                } else if (result.existingWorkspaces && result.existingWorkspaces.length > 0) {
-                    setExistingWorkspaces(result.existingWorkspaces);
                 }
             } catch (error) {
                 console.log(error);
             }
         },
-        [createWorkspaceMutation, history, contextURL, selectedIde, selectedWsClass, currentOrg?.id, user?.additionalData?.isMigratedToTeamOnlyAttribution, useLatestIde],
+        [
+            createWorkspaceMutation,
+            history,
+            contextURL,
+            selectedIde,
+            selectedWsClass,
+            currentOrg?.id,
+            user?.additionalData?.isMigratedToTeamOnlyAttribution,
+            useLatestIde,
+        ],
     );
 
     // Need a wrapper here so we call createWorkspace w/o any arguments
     const onClickCreate = useCallback(() => createWorkspace(), [createWorkspace]);
 
+    // if the context URL has a referrer prefix, we set the referrerIde as the selected IDE and immediately start a workspace.
+    useEffect(() => {
+        if (workspaceContext.data && WithReferrerContext.is(workspaceContext.data)) {
+            let options: Omit<GitpodServer.CreateWorkspaceOptions, "contextUrl"> | undefined;
+            if (workspaceContext.data.referrerIde) {
+                setSelectedIde(workspaceContext.data.referrerIde);
+                options = {
+                    ideSettings: {
+                        defaultIde: workspaceContext.data.referrerIde,
+                    },
+                };
+            }
+            createWorkspace(options);
+        }
+    }, [workspaceContext.data, createWorkspace]);
+
     if (SelectAccountPayload.is(selectAccountError)) {
         return (
             <SelectAccountModal
@@ -214,6 +257,24 @@ export function CreateWorkspacePage() {
                         {isLoading ? "Loading ..." : isStarting ? "Creating Workspace ..." : "New Workspace"}
                     </Button>
                 </div>
+                {existingWorkspaces.length > 0 && (
+                    <div className="w-full flex flex-col justify-end px-6">
+                        <p className="mt-6 text-center text-base">Running workspaces on this revision</p>
+                        <>
+                            {existingWorkspaces.map((w) => {
+                                return (
+                                    <a
+                                        key={w.workspace.id}
+                                        href={w.latestInstance?.ideUrl || `/start/${w.workspace.id}}`}
+                                        className="rounded-xl group hover:bg-gray-100 dark:hover:bg-gray-800 flex"
+                                    >
+                                        <WorkspaceEntry info={w} shortVersion={true} />
+                                    </a>
+                                );
+                            })}
+                        </>
+                    </div>
+                )}
                 <div>
                     <StatusMessage
                         error={createWorkspaceMutation.error as StartWorkspaceError}
@@ -225,14 +286,6 @@ export function CreateWorkspacePage() {
                     />
                 </div>
             </div>
-            {existingWorkspaces.length > 0 && (
-                <ExistingWorkspaceModal
-                    existingWorkspaces={existingWorkspaces}
-                    createWorkspace={createWorkspace}
-                    isStarting={isStarting}
-                    onClose={() => setExistingWorkspaces([])}
-                />
-            )}
         </div>
     );
 }
@@ -351,62 +404,3 @@ const StatusMessage: FunctionComponent<StatusMessageProps> = ({
             return <p className="text-base text-gitpod-red w-96">Unknown Error: {JSON.stringify(error, null, 2)}</p>;
     }
 };
-
-interface ExistingWorkspaceModalProps {
-    existingWorkspaces: WorkspaceInfo[];
-    onClose: () => void;
-    isStarting: boolean;
-    createWorkspace: (opts: Omit<GitpodServer.CreateWorkspaceOptions, "contextUrl">) => void;
-}
-
-const ExistingWorkspaceModal: FunctionComponent<ExistingWorkspaceModalProps> = ({
-    existingWorkspaces,
-    onClose,
-    isStarting,
-    createWorkspace,
-}) => {
-    return (
-        <Modal visible={true} closeable={true} onClose={onClose}>
-            <ModalHeader>Running Workspaces</ModalHeader>
-            <ModalBody>
-                <p className="mt-1 mb-2 text-base">
-                    You already have running workspaces with the same context. You can open an existing one or open a
-                    new workspace.
-                </p>
-                <>
-                    {existingWorkspaces.map((w) => {
-                        const normalizedContextUrl =
-                            ContextURL.getNormalizedURL(w.workspace)?.toString() || "undefined";
-                        return (
-                            <a
-                                key={w.workspace.id}
-                                href={w.latestInstance?.ideUrl || `/start/${w.workspace.id}}`}
-                                className="rounded-xl group hover:bg-gray-100 dark:hover:bg-gray-800 flex p-3 my-1"
-                            >
-                                <div className="w-full">
-                                    <p className="text-base text-black dark:text-gray-100 font-bold">
-                                        {w.workspace.id}
-                                    </p>
-                                    <p className="truncate" title={normalizedContextUrl}>
-                                        {normalizedContextUrl}
-                                    </p>
-                                </div>
-                            </a>
-                        );
-                    })}
-                </>
-            </ModalBody>
-            <ModalFooter>
-                <button className="secondary" onClick={onClose}>
-                    Cancel
-                </button>
-                <Button
-                    loading={isStarting}
-                    onClick={() => createWorkspace({ ignoreRunningWorkspaceOnSameCommit: true })}
-                >
-                    {isStarting ? "Creating Workspace ..." : "New Workspace"}
-                </Button>
-            </ModalFooter>
-        </Modal>
-    );
-};

components/dashboard/src/workspaces/WorkspaceEntry.tsx

@@ -13,12 +13,14 @@ import Tooltip from "../components/Tooltip";
 import dayjs from "dayjs";
 import { WorkspaceEntryOverflowMenu } from "./WorkspaceOverflowMenu";
 import { WorkspaceStatusIndicator } from "./WorkspaceStatusIndicator";
+import { projectsPathInstallGitHubApp } from "../projects/projects.routes";
 
 type Props = {
     info: WorkspaceInfo;
+    shortVersion?: boolean;
 };
 
-export const WorkspaceEntry: FunctionComponent<Props> = ({ info }) => {
+export const WorkspaceEntry: FunctionComponent<Props> = ({ info, shortVersion }) => {
     const [menuActive, setMenuActive] = useState(false);
 
     const workspace = info.workspace;
@@ -63,32 +65,36 @@ export const WorkspaceEntry: FunctionComponent<Props> = ({ info }) => {
                     </a>
                 </Tooltip>
             </ItemField>
-            <ItemField className="w-4/12 flex flex-col my-auto">
-                <div className="text-gray-500 dark:text-gray-400 overflow-ellipsis truncate">
-                    {workspace.description}
-                </div>
-                <a href={normalizedContextUrl}>
-                    <div className="text-sm text-gray-400 dark:text-gray-500 overflow-ellipsis truncate hover:text-blue-600 dark:hover:text-blue-400">
-                        {normalizedContextUrlDescription}
-                    </div>
-                </a>
-            </ItemField>
-            <ItemField className="w-2/12 flex flex-col my-auto">
-                <div className="text-gray-500 dark:text-gray-400 overflow-ellipsis truncate">
-                    <Tooltip content={currentBranch}>{currentBranch}</Tooltip>
-                </div>
-                <div className="mr-auto">
-                    <PendingChangesDropdown workspaceInstance={info.latestInstance} />
-                </div>
-            </ItemField>
-            <ItemField className="w-2/12 flex my-auto">
-                <Tooltip content={`Created ${dayjs(info.workspace.creationTime).fromNow()}`}>
-                    <div className="text-sm w-full text-gray-400 overflow-ellipsis truncate">
-                        {dayjs(WorkspaceInfo.lastActiveISODate(info)).fromNow()}
-                    </div>
-                </Tooltip>
-            </ItemField>
-            <WorkspaceEntryOverflowMenu changeMenuState={changeMenuState} info={info} />
+            {!shortVersion && (
+                <>
+                    <ItemField className="w-4/12 flex flex-col my-auto">
+                        <div className="text-gray-500 dark:text-gray-400 overflow-ellipsis truncate">
+                            {workspace.description}
+                        </div>
+                        <a href={normalizedContextUrl}>
+                            <div className="text-sm text-gray-400 dark:text-gray-500 overflow-ellipsis truncate hover:text-blue-600 dark:hover:text-blue-400">
+                                {normalizedContextUrlDescription}
+                            </div>
+                        </a>
+                    </ItemField>
+                    <ItemField className="w-2/12 flex flex-col my-auto">
+                        <div className="text-gray-500 dark:text-gray-400 overflow-ellipsis truncate">
+                            <Tooltip content={currentBranch}>{currentBranch}</Tooltip>
+                        </div>
+                        <div className="mr-auto">
+                            <PendingChangesDropdown workspaceInstance={info.latestInstance} />
+                        </div>
+                    </ItemField>
+                    <ItemField className="w-2/12 flex my-auto">
+                        <Tooltip content={`Created ${dayjs(info.workspace.creationTime).fromNow()}`}>
+                            <div className="text-sm w-full text-gray-400 overflow-ellipsis truncate">
+                                {dayjs(WorkspaceInfo.lastActiveISODate(info)).fromNow()}
+                            </div>
+                        </Tooltip>
+                    </ItemField>
+                    <WorkspaceEntryOverflowMenu changeMenuState={changeMenuState} info={info} />
+                </>
+            )}
         </Item>
     );
 };

components/gitpod-protocol/src/gitpod-service.ts

@@ -482,6 +482,7 @@ export namespace GitpodServer {
         organizationId?: string;
 
         // whether running workspaces on the same context should be ignored. If false (default) users will be asked.
+        //TODO(se) remove this option and let clients do that check if they like. The new create workspace page does it already
         ignoreRunningWorkspaceOnSameCommit?: boolean;
         ignoreRunningPrebuild?: boolean;
         allowUsingPreviousPrebuilds?: boolean;

components/server/src/workspace/gitpod-server-impl.ts

@@ -1136,6 +1136,7 @@ export class GitpodServerImpl implements GitpodServerWithTracing, Disposable {
 
             logContext = { userId: user.id };
 
+            //TODO(se) remove this implicit check and let instead clients do the checking.
             // Credit check runs in parallel with the other operations up until we start consuming resources.
             // Make sure to await for the creditCheck promise in the right places.
             const runningInstancesPromise = this.workspaceDb.trace(ctx).findRegularRunningInstances(user.id);
@@ -3669,6 +3670,7 @@ export class GitpodServerImpl implements GitpodServerWithTracing, Disposable {
     async getIDToken(): Promise<void> {}
     public async resolveContext(ctx: TraceContextWithSpan, contextUrl: string): Promise<WorkspaceContext> {
         const user = this.checkAndBlockUser("resolveContext");
-        return this.contextParser.handle(ctx, user, contextUrl);
+        const normalizedCtxURL = this.contextParser.normalizeContextURL(contextUrl);
+        return this.contextParser.handle(ctx, user, normalizedCtxURL);
     }
 }