[projects] always enable New Workspace button on config page

Author: AlexTugarev

components/dashboard/src/projects/ConfigureProject.tsx

@@ -5,7 +5,7 @@
  */
 
 import React, { Suspense, useContext, useEffect, useState } from "react";
-import { useLocation, useRouteMatch } from "react-router";
+import { useHistory, useLocation, useRouteMatch } from "react-router";
 import { Project, StartPrebuildResult, WorkspaceInstance } from "@gitpod/gitpod-protocol";
 import PrebuildLogs from "../components/PrebuildLogs";
 import TabMenuItem from "../components/TabMenuItem";
@@ -43,8 +43,8 @@ const TASKS = {
   - init: pip install -r requirements.txt
     command: python main.py`,
     Other: `tasks:
-  - init: # TODO: install dependencies, build project
-    command: # TODO: start app`
+  - init: echo 'TODO: build project'
+    command: echo 'TODO: start app'`
 }
 
 // const IMAGES = {
@@ -57,6 +57,7 @@ const TASKS = {
 // }
 
 export default function () {
+    const history = useHistory();
     const { teams } = useContext(TeamsContext);
     const location = useLocation();
     const team = getCurrentTeam(location, teams);
@@ -164,11 +165,10 @@ export default function () {
         });
     };
 
-    const buildProject = async (event: React.MouseEvent) => {
+    const buildProject = async () => {
         if (!project) {
             return;
         }
-        // (event.target as HTMLButtonElement).disabled = true;
         setEditorMessage(null);
         if (!!startPrebuildResult) {
             setStartPrebuildResult(undefined);
@@ -209,6 +209,17 @@ export default function () {
 
     useEffect(() => { document.title = 'Configure Project — Gitpod' }, []);
 
+    const onNewWorkspace = async () => {
+        if (prebuildInstance?.status.phase === "stopped" && !prebuildInstance?.status.conditions.failed && !prebuildInstance?.status.conditions.headlessTaskFailed) {
+            history.push(`/#${project?.cloneUrl}`);
+            return;
+        }
+        if (!prebuildWasTriggered) {
+            await buildProject();
+        }
+        history.push(`/#${project?.cloneUrl}`);
+    }
+
     return <>
         <Header title="Configuration" subtitle="View and edit project configuration." />
         <div className="lg:px-28 px-10 mt-8 flex space-x-4">
@@ -257,9 +268,7 @@ export default function () {
                 <div className="h-20 px-6 bg-gray-50 dark:bg-gray-800 border-t border-gray-200 dark:border-gray-600 flex space-x-2">
                     {prebuildWasTriggered && <PrebuildInstanceStatus prebuildInstance={prebuildInstance} />}
                     <div className="flex-grow" />
-                    {((!isDetecting && isEditorDisabled) || (prebuildInstance?.status.phase === "stopped" && !prebuildInstance?.status.conditions.failed && !prebuildInstance?.status.conditions.headlessTaskFailed))
-                        ? <a className="my-auto" href={`/#${project?.cloneUrl}`}><button className="secondary">New Workspace</button></a>
-                        : <button disabled={true} className="secondary">New Workspace</button>}
+                    <button disabled={isDetecting} className="secondary" onClick={onNewWorkspace}>New Workspace</button>
                     {(prebuildWasTriggered && prebuildInstance?.status.phase !== "stopped")
                         ? <button className="danger flex items-center space-x-2" disabled={prebuildWasCancelled || (prebuildInstance?.status.phase !== "initializing" && prebuildInstance?.status.phase !== "running")} onClick={cancelPrebuild}>
                             <span>Cancel Prebuild</span>