From eb1689a6e68ceaeac3cd3c7cf0aab847d900a295 Mon Sep 17 00:00:00 2001
From: "Laurie T. Malau" <laurie@gitpod.io>
Date: Tue, 21 Jun 2022 13:53:02 +0000
Subject: [PATCH] use logsview

---
 .../dashboard/src/start/CreateWorkspace.tsx   | 32 ++++------
 .../src/start/IntermediatePrebuildStatus.tsx  |  4 +-
 components/dashboard/src/start/LogsView.tsx   | 46 ++++++++++++++
 .../dashboard/src/start/StartWorkspace.tsx    |  9 +--
 .../dashboard/src/start/WatchLogsView.tsx     | 61 -------------------
 5 files changed, 61 insertions(+), 91 deletions(-)
 create mode 100644 components/dashboard/src/start/LogsView.tsx
 delete mode 100644 components/dashboard/src/start/WatchLogsView.tsx

diff --git a/components/dashboard/src/start/CreateWorkspace.tsx b/components/dashboard/src/start/CreateWorkspace.tsx
index d7d47b0cab9517..b9b737d7fbb5c2 100644
--- a/components/dashboard/src/start/CreateWorkspace.tsx
+++ b/components/dashboard/src/start/CreateWorkspace.tsx
@@ -5,7 +5,7 @@
  */
 
 import EventEmitter from "events";
-import React, { useEffect, Suspense, useContext, useState } from "react";
+import React, { useEffect, useContext, useState } from "react";
 import {
     CreateWorkspaceMode,
     WorkspaceCreationResult,
@@ -22,12 +22,11 @@ import StartWorkspace, { parseProps } from "./StartWorkspace";
 import { openAuthorizeWindow } from "../provider-utils";
 import { SelectAccountPayload } from "@gitpod/gitpod-protocol/lib/auth";
 import { SelectAccountModal } from "../settings/SelectAccountModal";
-import PrebuildLogs, { watchHeadlessLogs } from "../components/PrebuildLogs";
+import { watchHeadlessLogs } from "../components/PrebuildLogs";
 import CodeText from "../components/CodeText";
 import FeedbackComponent from "../feedback-form/FeedbackComponent";
 import { isGitpodIo } from "../utils";
-import { PrebuildStatus } from "../projects/Prebuilds";
-import IntermediatePrebuildStatus from "./IntermediatePrebuildStatus";
+import LogsView from "./LogsView";
 
 export interface CreateWorkspaceProps {
     contextUrl: string;
@@ -502,22 +501,13 @@ function RunningPrebuildView(props: RunningPrebuildViewProps) {
     }, []);
 
     return (
-        <StartPage title="Prebuild in Progress">
-            <Suspense fallback={<div />}>
-                <PrebuildLogs workspaceId={props.runningPrebuild.workspaceID} />
-            </Suspense>
-            <div className="flex">
-                {prebuild && <PrebuildStatus prebuild={prebuild} />}
-                {!prebuild && props.runningPrebuild.starting && <IntermediatePrebuildStatus />}
-                <button
-                    className="mt-6 secondary"
-                    onClick={() => {
-                        props.onIgnorePrebuild();
-                    }}
-                >
-                    Skip Prebuild
-                </button>
-            </div>
-        </StartPage>
+        <LogsView
+            logsEmitter={logsEmitter}
+            workspaceId={props.runningPrebuild.workspaceID}
+            prebuild={prebuild}
+            onIgnorePrebuild={props.onIgnorePrebuild}
+            shouldRunPrebuild={true}
+            isIntermediate={props.runningPrebuild.starting === "running"}
+        />
     );
 }
diff --git a/components/dashboard/src/start/IntermediatePrebuildStatus.tsx b/components/dashboard/src/start/IntermediatePrebuildStatus.tsx
index a46ab7c9420fb1..34c8a19bba2a8e 100644
--- a/components/dashboard/src/start/IntermediatePrebuildStatus.tsx
+++ b/components/dashboard/src/start/IntermediatePrebuildStatus.tsx
@@ -11,8 +11,8 @@ function IntermediatePrebuildStatus() {
         <div className="flex flex-col space-y-1 justify-center text-sm font-semibold">
             <div>
                 <div className="flex space-x-1 items-center">
-                    <img alt="" className="h-4 w-4" src={StatusRunning} />;
-                    <span className="font-medium text-blue-500 uppercase">running</span>;
+                    <img alt="" className="h-4 w-4" src={StatusRunning} />
+                    <span className="font-medium text-blue-500 uppercase">running</span>
                 </div>
             </div>
         </div>
diff --git a/components/dashboard/src/start/LogsView.tsx b/components/dashboard/src/start/LogsView.tsx
new file mode 100644
index 00000000000000..1344ed3b80eb66
--- /dev/null
+++ b/components/dashboard/src/start/LogsView.tsx
@@ -0,0 +1,46 @@
+/**
+ * Copyright (c) 2022 Gitpod GmbH. All rights reserved.
+ * Licensed under the GNU Affero General Public License (AGPL).
+ * See License-AGPL.txt in the project root for license information.
+ */
+
+import { Suspense } from "react";
+import EventEmitter from "events";
+import PrebuildLogs from "../components/PrebuildLogs";
+import { StartPage } from "./StartPage";
+import WorkspaceLogs from "../components/WorkspaceLogs";
+import { PrebuildWithStatus } from "@gitpod/gitpod-protocol";
+import { PrebuildStatus } from "../projects/Prebuilds";
+import IntermediatePrebuildStatus from "./IntermediatePrebuildStatus";
+
+function LogsView(props: {
+    logsEmitter: EventEmitter;
+    workspaceId?: string;
+    shouldRunPrebuild?: boolean;
+    prebuild?: PrebuildWithStatus | undefined;
+    onIgnorePrebuild?: () => void;
+    isIntermediate?: boolean;
+}) {
+    return (
+        <StartPage title="Prebuild in Progress">
+            <Suspense fallback={<div />}>
+                {props.shouldRunPrebuild ? (
+                    <PrebuildLogs workspaceId={props.workspaceId} />
+                ) : (
+                    <WorkspaceLogs logsEmitter={props.logsEmitter} />
+                )}
+            </Suspense>
+            {props.shouldRunPrebuild && (
+                <div className="flex gap-4">
+                    {props.prebuild && <PrebuildStatus prebuild={props.prebuild} />}
+                    {!props.prebuild && props.isIntermediate && <IntermediatePrebuildStatus />}
+                    <button className="secondary" onClick={() => props.onIgnorePrebuild && props.onIgnorePrebuild()}>
+                        Skip Prebuild
+                    </button>
+                </div>
+            )}
+        </StartPage>
+    );
+}
+
+export default LogsView;
diff --git a/components/dashboard/src/start/StartWorkspace.tsx b/components/dashboard/src/start/StartWorkspace.tsx
index 0acd996503a099..afb0710b5179c0 100644
--- a/components/dashboard/src/start/StartWorkspace.tsx
+++ b/components/dashboard/src/start/StartWorkspace.tsx
@@ -29,6 +29,7 @@ import { getGitpodService, gitpodHostUrl } from "../service/service";
 import { StartPage, StartPhase, StartWorkspaceError } from "./StartPage";
 import ConnectToSSHModal from "../workspaces/ConnectToSSHModal";
 import Alert from "../components/Alert";
+import LogsView from "./LogsView";
 const sessionId = v4();
 
 const WorkspaceLogs = React.lazy(() => import("../components/WorkspaceLogs"));
@@ -736,11 +737,5 @@ function HeadlessWorkspaceView(props: { instanceId: string }) {
         };
     }, []);
 
-    return (
-        <StartPage title="Prebuild in Progress">
-            <Suspense fallback={<div />}>
-                <WorkspaceLogs logsEmitter={logsEmitter} />
-            </Suspense>
-        </StartPage>
-    );
+    return <LogsView logsEmitter={logsEmitter} />;
 }
diff --git a/components/dashboard/src/start/WatchLogsView.tsx b/components/dashboard/src/start/WatchLogsView.tsx
deleted file mode 100644
index 8ef4ec880f2a40..00000000000000
--- a/components/dashboard/src/start/WatchLogsView.tsx
+++ /dev/null
@@ -1,61 +0,0 @@
-/**
- * Copyright (c) 2022 Gitpod GmbH. All rights reserved.
- * Licensed under the GNU Affero General Public License (AGPL).
- * See License-AGPL.txt in the project root for license information.
- */
-
-import { Suspense, useEffect, useState } from "react";
-import EventEmitter from "events";
-import PrebuildLogs, { watchHeadlessLogs } from "../components/PrebuildLogs";
-import { StartPage } from "./StartPage";
-import WorkspaceLogs from "../components/WorkspaceLogs";
-import { PrebuildWithStatus } from "@gitpod/gitpod-protocol";
-import { PrebuildStatus } from "../projects/Prebuilds";
-
-function WatchLogsView(props: {
-    instanceId: string;
-    hasPrebuild?: boolean;
-    prebuild?: PrebuildWithStatus | undefined;
-}) {
-    const [logsEmitter] = useState(new EventEmitter());
-
-    useEffect(() => {
-        const disposables = watchHeadlessLogs(
-            props.instanceId,
-            (chunk) => logsEmitter.emit("logs", chunk),
-            async () => {
-                return false;
-            },
-        );
-        return function cleanup() {
-            disposables.dispose();
-        };
-    }, []);
-
-    return (
-        <StartPage title="Prebuild in Progress">
-            <Suspense fallback={<div />}>
-                {props.hasPrebuild ? (
-                    <PrebuildLogs workspaceId={props.instanceId} />
-                ) : (
-                    <WorkspaceLogs logsEmitter={logsEmitter} />
-                )}
-            </Suspense>
-            {props.hasPrebuild && (
-                <div className="flex">
-                    {props.prebuild && <PrebuildStatus prebuild={props.prebuild} />}
-                    <button
-                        className="mt-6 secondary"
-                        onClick={() => {
-                            // props.onIgnorePrebuild();
-                        }}
-                    >
-                        Skip Prebuild
-                    </button>
-                </div>
-            )}
-        </StartPage>
-    );
-}
-
-export default WatchLogsView;