[dashboard] Improve new workspace start experience ⚡

Author: jankeromnes

components/dashboard/src/start/CreateWorkspace.tsx

@@ -2,7 +2,7 @@ import React, { Suspense } from "react";
 import { CreateWorkspaceMode, WorkspaceCreationResult } from "@gitpod/gitpod-protocol";
 import { ErrorCodes } from "@gitpod/gitpod-protocol/lib/messaging/error";
 import Modal from "../components/Modal";
-import { getGitpodService } from "../service/service";
+import { getGitpodService, gitpodHostUrl } from "../service/service";
 import { StartPage, StartPhase } from "./StartPage";
 import StartWorkspace from "./StartWorkspace";
 
@@ -15,6 +15,7 @@ export interface CreateWorkspaceProps {
 export interface CreateWorkspaceState {
   result?: WorkspaceCreationResult;
   error?: CreateWorkspaceError;
+  stillParsing: boolean;
 }
 
 export interface CreateWorkspaceError {
@@ -27,13 +28,23 @@ export class CreateWorkspace extends React.Component<CreateWorkspaceProps, Creat
 
   constructor(props: CreateWorkspaceProps) {
     super(props);
+    this.state = { stillParsing: true };
   }
 
   componentDidMount() {
     this.createWorkspace();
   }
 
   async createWorkspace(mode = CreateWorkspaceMode.SelectIfRunning) {
+    // Invalidate any previous result.
+    this.setState({
+      result: undefined,
+      stillParsing: true,
+    });
+
+    // We assume anything longer than 3 seconds is no longer just parsing the context URL (i.e. it's now creating a workspace).
+    let timeout = setTimeout(() => this.setState({ stillParsing: false }), 3000);
+
     try {
       const result = await getGitpodService().server.createWorkspace({
         contextUrl: this.props.contextUrl,
@@ -43,16 +54,24 @@ export class CreateWorkspace extends React.Component<CreateWorkspaceProps, Creat
         window.location.href = result.workspaceURL;
         return;
       }
-      this.setState({ result });
+      clearTimeout(timeout);
+      this.setState({
+        result,
+        stillParsing: false,
+      });
     } catch (error) {
-      this.setState({ error });
+      clearTimeout(timeout);
+      this.setState({
+        error,
+        stillParsing: false,
+      });
     }
   }
 
   render() {
     const { contextUrl } = this.props;
     let phase = StartPhase.Checking;
-    let statusMessage = <p className="text-base text-gray-400">Checking Context …</p>;
+    let statusMessage = <p className="text-base text-gray-400">{this.state.stillParsing ? 'Parsing context …' : 'Preparing workspace …'}</p>;
     let logsView = undefined;
 
     const error = this.state?.error;
@@ -106,7 +125,6 @@ export class CreateWorkspace extends React.Component<CreateWorkspaceProps, Creat
     }
 
     else if (result?.runningWorkspacePrebuild) {
-      phase = StartPhase.Building;
       statusMessage = <p className="text-base text-gray-400">⚡Prebuild in progress</p>;
       logsView = <Suspense fallback={<div className="m-6 p-4 h-60 w-11/12 lg:w-3/5 flex-shrink-0 rounded-lg" style={{ color: '#8E8787', background: '#ECE7E5' }}>Loading...</div>}>
         <WorkspaceLogs />
@@ -116,16 +134,16 @@ export class CreateWorkspace extends React.Component<CreateWorkspaceProps, Creat
     return <StartPage phase={phase} error={!!error}>
       {statusMessage}
       {logsView}
-      {error && <>
-        <button className="mt-8">Go back to dashboard</button>
-        <p className="mt-10 text-base text-gray-400 flex space-x-2">
+      {error && <div>
+        <a href={gitpodHostUrl.asDashboard().toString()}><button className="mt-8 px-4 py-2 text-gray-500 bg-white font-semibold border-gray-500">Go back to dashboard</button></a>
+        <p className="mt-14 text-base text-gray-400 flex space-x-2">
           <a href="https://www.gitpod.io/docs/">Docs</a>
           <span>—</span>
           <a href="https://status.gitpod.io/">Status</a>
           <span>—</span>
           <a href="https://www.gitpod.io/blog/">Blog</a>
         </p>
-      </>}
+      </div>}
     </StartPage>;
   }
 

components/dashboard/src/start/StartPage.tsx

@@ -1,22 +1,25 @@
 export enum StartPhase {
   Checking = 0,
-  Building = 1,
-  Preparing = 2,
+  Preparing = 1,
+  Creating = 2,
   Starting = 3,
   Running = 4,
+  Stopping = 5,
+  Stopped = 6,
 };
 
 function ProgressBar(props: { phase: number, error: boolean }) {
+  const { phase, error } = props;
   return <div className="flex mt-4 mb-6">
     {[1, 2, 3].map(i => {
       let classes = 'h-2 w-10 mx-1 my-2 rounded-full';
-      if (i < props.phase) {
+      if (i < phase) {
         // Already passed this phase successfully
         classes += ' bg-green-400';
-      } else if (i > props.phase) {
+      } else if (i > phase) {
         // Haven't reached this phase yet
         classes += ' bg-gray-200';
-      } else if (props.error) {
+      } else if (error) {
         // This phase has failed
         classes += ' bg-red';
       } else {
@@ -36,32 +39,40 @@ export interface StartPageProps {
 
 export function StartPage(props: StartPageProps) {
   let title = "";
-  switch (props.phase) {
+  const { phase, error } = props;
+  switch (phase) {
     case StartPhase.Checking:
-      if (props.error) {
+      title = "Checking";
+      if (error) {
         // Pre-check error
         title = "Oh, no! Something went wrong!1";
       }
       break;
-    case StartPhase.Building:
-      title = "Building";
-      break;
     case StartPhase.Preparing:
       title = "Preparing";
       break;
+    case StartPhase.Creating:
+      title = "Creating";
+      break;
     case StartPhase.Starting:
       title = "Starting";
       break;
     case StartPhase.Running:
       title = "Starting";
       break;
+    case StartPhase.Stopping:
+      title = "Stopping";
+      break;
+    case StartPhase.Stopped:
+      title = "Stopped";
+      break;
   }
   return <div className="w-screen h-screen bg-white align-middle">
     <div className="flex flex-col mx-auto items-center h-screen">
       <div className="h-1/3"></div>
-      <img src="/gitpod.svg" className="h-16 flex-shrink-0" />
+      <img src="/gitpod.svg" className={`h-16 flex-shrink-0 ${(error || phase === StartPhase.Stopped) ? '' : 'animate-bounce'}`} />
       <h3 className="mt-8 text-xl">{title}</h3>
-      <ProgressBar phase={props.phase} error={!!props.error} />
+      {(phase < StartPhase.Stopping) && <ProgressBar phase={phase} error={!!error} />}
       {props.children}
     </div>
   </div>;

components/dashboard/src/start/StartWorkspace.tsx

@@ -1,7 +1,6 @@
 import React from "react";
 import { DisposableCollection, WorkspaceInstance } from "@gitpod/gitpod-protocol";
-import { GitpodHostUrl } from "@gitpod/gitpod-protocol/lib/util/gitpod-host-url";
-import { getGitpodService } from "../service/service";
+import { getGitpodService, gitpodHostUrl } from "../service/service";
 import { StartPage, StartPhase } from "./StartPage";
 
 export interface StartWorkspaceProps {
@@ -117,7 +116,7 @@ export default class StartWorkspace extends React.Component<StartWorkspaceProps,
 
   async ensureWorkspaceAuth(instanceID: string) {
     if (!document.cookie.includes(`${instanceID}_owner_`)) {
-      const authURL = new GitpodHostUrl(window.location.toString()).asWorkspaceAuth(instanceID);
+      const authURL = gitpodHostUrl.asWorkspaceAuth(instanceID);
       const response = await fetch(authURL.toString());
       if (response.redirected) {
         this.redirectTo(response.url);
@@ -144,8 +143,8 @@ export default class StartWorkspace extends React.Component<StartWorkspaceProps,
   }
 
   render() {
-    let phase = StartPhase.Checking;
-    let statusMessage = undefined;
+    let phase = StartPhase.Preparing;
+    let statusMessage = <p className="text-base text-gray-400">Preparing workspace …</p>;
 
     switch (this.state?.workspaceInstance?.status.phase) {
       // unknown indicates an issue within the system in that it cannot determine the actual phase of
@@ -156,31 +155,31 @@ export default class StartWorkspace extends React.Component<StartWorkspaceProps,
       // Preparing means that we haven't actually started the workspace instance just yet, but rather
       // are still preparing for launch. This means we're building the Docker image for the workspace.
       case "preparing":
-        phase = StartPhase.Building;
-        statusMessage = <p className="text-base text-gray-400">Building Image …</p>;
+        phase = StartPhase.Preparing;
+        statusMessage = <p className="text-base text-gray-400">Building image …</p>;
         break;
 
       // Pending means the workspace does not yet consume resources in the cluster, but rather is looking for
       // some space within the cluster. If for example the cluster needs to scale up to accomodate the
       // workspace, the workspace will be in Pending state until that happened.
       case "pending":
         phase = StartPhase.Preparing;
-        statusMessage = <p className="text-base text-gray-400">Allocating Resources …</p>;
+        statusMessage = <p className="text-base text-gray-400">Allocating resources …</p>;
         break;
 
       // Creating means the workspace is currently being created. That includes downloading the images required
       // to run the workspace over the network. The time spent in this phase varies widely and depends on the current
       // network speed, image size and cache states.
       case "creating":
-        phase = StartPhase.Preparing;
-        statusMessage = <p className="text-base text-gray-400">Pulling Container Image …</p>;
+        phase = StartPhase.Creating;
+        statusMessage = <p className="text-base text-gray-400">Pulling container image …</p>;
         break;
 
       // Initializing is the phase in which the workspace is executing the appropriate workspace initializer (e.g. Git
       // clone or backup download). After this phase one can expect the workspace to either be Running or Failed.
       case "initializing":
         phase = StartPhase.Starting;
-        statusMessage = <p className="text-base text-gray-400">Cloning Repository …</p>; // TODO Loading Prebuild ...
+        statusMessage = <p className="text-base text-gray-400">Cloning repository …</p>; // TODO Loading prebuild ...
         break;
 
       // Running means the workspace is able to actively perform work, either by serving a user through Theia,
@@ -194,17 +193,39 @@ export default class StartWorkspace extends React.Component<StartWorkspaceProps,
       // When in this state, we expect it to become running or stopping anytime soon.
       case "interrupted":
         phase = StartPhase.Running;
-        statusMessage = <p className="text-base text-gray-400">Checking On Workspace …</p>;
+        statusMessage = <p className="text-base text-gray-400">Checking workspace …</p>;
         break;
 
       // Stopping means that the workspace is currently shutting down. It could go to stopped every moment.
       case "stopping":
-        statusMessage = <p className="text-base text-gray-400">Stopping …</p>;
+        phase = StartPhase.Stopping;
+        statusMessage = <div>
+          <div className="flex space-x-3 items-center rounded-xl py-2 px-4 h-16 w-72 mt-4 bg-gray-100">
+            <div className="rounded-full w-3 h-3 text-sm bg-gitpod-kumquat">&nbsp;</div>
+            <div>
+              <p className="text-gray-700 font-semibold">{this.state.workspaceInstance.workspaceId}</p>
+              <p>{this.state.contextUrl}</p>
+            </div>
+          </div>
+        </div>;
         break;
 
       // Stopped means the workspace ended regularly because it was shut down.
       case "stopped":
-        statusMessage = <p className="text-base text-gray-400">Stopped</p>;
+        phase = StartPhase.Stopped;
+        statusMessage = <div>
+            <div className="flex space-x-3 items-center rounded-xl py-2 px-4 h-16 w-72 mt-4 bg-gray-100">
+            <div className="rounded-full w-3 h-3 text-sm bg-gray-300">&nbsp;</div>
+            <div>
+              <p className="text-gray-700 font-semibold">{this.state.workspaceInstance.workspaceId}</p>
+              <p>{this.state.contextUrl}</p>
+            </div>
+          </div>
+          <div className="mt-10 flex space-x-2">
+            <button className="px-4 py-2 text-gray-500 bg-white font-semibold border-gray-500" onClick={() => this.redirectTo(gitpodHostUrl.asDashboard().toString())}>Go to Dashboard</button>
+            <button className="px-4 py-2 text-gray-50 bg-green-600 font-semibold border-green-800" onClick={() => this.redirectTo(gitpodHostUrl.asStart(this.state.workspaceInstance?.workspaceId).toString())}>Open Workspace</button>
+          </div>
+        </div>;
         break;
     }
 

components/dashboard/src/start/WorkspaceLogs.tsx

@@ -1,5 +1,5 @@
 export default function WorkspaceLogs() {
-  return <pre className="m-6 p-4 h-60 w-11/12 lg:w-3/5 flex-shrink-0 rounded-lg" style={{ color: '#8E8787', background: '#ECE7E5' }}>
+  return <pre className="m-6 p-4 h-72 w-11/12 lg:w-3/5 flex-shrink-0 rounded-xl bg-gray-100">
     ... logs ...
   </pre>;
 }