From 3c24b5d628955ba560ce3db14bc64854e6ab2272 Mon Sep 17 00:00:00 2001
From: Krzysztof Magiera <krzys@swmansion.com>
Date: Wed, 27 Mar 2024 09:15:12 +0100
Subject: [PATCH] Remove logs button from preview loader view (#35)

This PR removes logs button from preview loader screen.

The button was misplaced and caused the whole layout to shift when it'd
appear. After we added log progress, it is no longer needed to provide a
visual indication about the logs being present there. Instead, we make
the progress message clickable.

With this change, the progress message can be clicked at any point. When
build is in progress, we will open build logs panel, and otherwise will
open extension logs.
---
 .../vscode-extension/src/common/Project.ts    |  1 +
 .../vscode-extension/src/project/project.ts   |  5 ++++
 .../src/webview/components/PreviewLoader.css  |  1 +
 .../src/webview/components/PreviewLoader.tsx  | 25 ++++++++-----------
 4 files changed, 17 insertions(+), 15 deletions(-)

diff --git a/packages/vscode-extension/src/common/Project.ts b/packages/vscode-extension/src/common/Project.ts
index 856c300f8..66d18a859 100644
--- a/packages/vscode-extension/src/common/Project.ts
+++ b/packages/vscode-extension/src/common/Project.ts
@@ -77,6 +77,7 @@ export interface ProjectInterface {
   resumeDebugger(): Promise<void>;
   stepOverDebugger(): Promise<void>;
   focusBuildOutput(): Promise<void>;
+  focusExtensionLogsOutput(): Promise<void>;
   focusDebugConsole(): Promise<void>;
 
   openNavigation(navigationItemID: string): Promise<void>;
diff --git a/packages/vscode-extension/src/project/project.ts b/packages/vscode-extension/src/project/project.ts
index 9ca11f135..fe1b5b5ac 100644
--- a/packages/vscode-extension/src/project/project.ts
+++ b/packages/vscode-extension/src/project/project.ts
@@ -267,6 +267,11 @@ export class Project implements Disposable, MetroDelegate, ProjectInterface {
     }
     this.buildManager.focusBuildOutput();
   }
+
+  public async focusExtensionLogsOutput() {
+    Logger.openOutputPanel();
+  }
+
   public async focusDebugConsole() {
     commands.executeCommand("workbench.panel.repl.view.focus");
   }
diff --git a/packages/vscode-extension/src/webview/components/PreviewLoader.css b/packages/vscode-extension/src/webview/components/PreviewLoader.css
index 4f8958d69..7f9570a05 100644
--- a/packages/vscode-extension/src/webview/components/PreviewLoader.css
+++ b/packages/vscode-extension/src/webview/components/PreviewLoader.css
@@ -1,5 +1,6 @@
 .preview-loader-container {
   width: 75%;
+  cursor: pointer;
 }
 
 .preview-loader-button-group {
diff --git a/packages/vscode-extension/src/webview/components/PreviewLoader.tsx b/packages/vscode-extension/src/webview/components/PreviewLoader.tsx
index efc3017fc..f8732b0a5 100644
--- a/packages/vscode-extension/src/webview/components/PreviewLoader.tsx
+++ b/packages/vscode-extension/src/webview/components/PreviewLoader.tsx
@@ -43,22 +43,17 @@ function PreviewLoader() {
     }
   }, [projectState]);
 
+  function handleLoaderClick() {
+    if (projectState.startupMessage === StartupMessage.Building) {
+      project.focusBuildOutput();
+    } else {
+      project.focusExtensionLogsOutput();
+    }
+  }
+
   return (
     <>
-      <div className="preview-loader-container">
-        {projectState.startupMessage === StartupMessage.Building && (
-          <div className="preview-loader-button-group">
-            <IconButton
-              onClick={() => project.focusBuildOutput()}
-              tooltip={{
-                label: "Open build logs",
-                side: "top",
-              }}>
-              <span className="codicon codicon-symbol-keyword" />
-            </IconButton>
-          </div>
-        )}
-
+      <button className="preview-loader-container" onClick={handleLoaderClick}>
         <div className="preview-loader-button-group">
           <StartupMessageComponent className="preview-loader-message">
             {projectState.startupMessage}
@@ -69,7 +64,7 @@ function PreviewLoader() {
             </div>
           )}
         </div>
-      </div>
+      </button>
       <ProgressBar progress={progress} />
     </>
   );