[dashboard, supervisor] Instead of auto restarting when we see a new instance, show state and provide controls

Author: geropl

components/dashboard/src/start/StartWorkspace.tsx

@@ -268,11 +268,26 @@ export default class StartWorkspace extends React.Component<StartWorkspaceProps,
   }
 
   async onInstanceUpdate(workspaceInstance: WorkspaceInstance) {
-    const startedInstanceId = this.state?.startedInstanceId;
-    if (workspaceInstance.workspaceId !== this.props.workspaceId || startedInstanceId !== workspaceInstance.id) {
+    if (workspaceInstance.workspaceId !== this.props.workspaceId) {
       return;
     }
 
+    // Here we filter out updates to instances we haven't started to avoid issues with updates coming in out-of-order
+    // (e.g., multiple "stopped" events from the older instance, where we already started a fresh one after the first)
+    // Only exception is when we do the switch from the "old" to the "new" one.
+    const startedInstanceId = this.state?.startedInstanceId;
+    if (startedInstanceId !== workspaceInstance.id) {
+      // do we want to switch to "new" instance we just received an update for?
+      const switchToNewInstance = this.state.workspaceInstance?.status.phase === "stopped" && workspaceInstance.status.phase !== "stopped";
+      if (!switchToNewInstance) {
+        return;
+      }
+      this.setState({
+        startedInstanceId: workspaceInstance.id,
+        workspaceInstance,
+      });
+    }
+
     await this.ensureWorkspaceAuth(workspaceInstance.id);
 
     // Redirect to workspaceURL if we are not yet running in an iframe.
@@ -337,7 +352,7 @@ export default class StartWorkspace extends React.Component<StartWorkspaceProps,
     const { error } = this.state;
     const isHeadless = this.state.workspace?.type !== 'regular';
     const isPrebuilt = WithPrebuild.is(this.state.workspace?.context);
-    let phase = StartPhase.Preparing;
+    let phase: StartPhase | undefined = StartPhase.Preparing;
     let title = undefined;
     let statusMessage = !!error ? undefined : <p className="text-base text-gray-400">Preparing workspace …</p>;
     const contextURL = ContextURL.getNormalizedURL(this.state.workspace)?.toString();
@@ -384,7 +399,27 @@ export default class StartWorkspace extends React.Component<StartWorkspaceProps,
         }
         if (!this.state.desktopIde) {
           phase = StartPhase.Running;
-          statusMessage = <p className="text-base text-gray-400">Opening Workspace …</p>;
+
+          if (this.state.dontAutostart) {
+            title = 'Running'
+            phase = undefined;  // hide the progress bar, as we're already running
+            // in case we dontAutostart the IDE we have to provide controls to do so
+            statusMessage = <div>
+                <div className="flex space-x-3 items-center text-left rounded-xl m-auto px-4 h-16 w-72 mt-4 mb-2 bg-gray-100 dark:bg-gray-800">
+                  <div className="rounded-full w-3 h-3 text-sm bg-green-500">&nbsp;</div>
+                  <div>
+                    <p className="text-gray-700 dark:text-gray-200 font-semibold w-56 truncate">{this.state.workspaceInstance.workspaceId}</p>
+                    <a target="_parent" href={contextURL}><p className="w-56 truncate hover:text-blue-600 dark:hover:text-blue-400" >{contextURL}</p></a>
+                  </div>
+                </div>
+                <div className="mt-10 justify-center flex space-x-2">
+                  <a target="_parent" href={gitpodHostUrl.asDashboard().toString()}><button className="secondary">Go to Dashboard</button></a>
+                  <a target="_parent" href={gitpodHostUrl.asStart(this.props.workspaceId).toString() /** move over 'start' here to fetch fresh credentials in case this is an older tab */}><button>Open Workspace</button></a>
+                </div>
+            </div>;
+          } else {
+            statusMessage = <p className="text-base text-gray-400">Opening Workspace …</p>;
+          }
         } else {
           phase = StartPhase.IdeReady;
           const openLink = this.state.desktopIde.link;

components/supervisor/frontend/src/index.ts

@@ -106,7 +106,6 @@ const toStop = new DisposableCollection();
 
     //#region current-frame
     let current: HTMLElement = loading.frame;
-    let stopped = false;
     let desktopRedirected = false;
     const nextFrame = () => {
         const instance = gitpodServiceClient.info.latestInstance;
@@ -142,19 +141,6 @@ const toStop = new DisposableCollection();
                     return document.body;
                 }
             }
-            if (instance.status.phase === 'stopped') {
-                stopped = true;
-            }
-            if (stopped && (
-                instance.status.phase === 'preparing' ||
-                instance.status.phase === 'pending' ||
-                instance.status.phase === 'creating' ||
-                instance.status.phase === 'initializing')) {
-                // reload the page if the workspace was restarted to ensure:
-                // - graceful reconnection of IDEs
-                // - new owner token is set
-                window.location.href = startUrl.with({ search: "error=true" }).toString();
-            }
         }
         return loading.frame;
     }