VSCode plugin: Add UX improvements (#6091)

Author: hsubox76

firebase-vscode/common/messaging/protocol.ts

@@ -64,7 +64,7 @@ export interface WebviewToExtensionParamsMap {
   /** 
    * Equivalent to the `firebase emulators:start` command.
   */
-  launchEmulators : {
+  launchEmulators: {
     emulatorUiSelections: EmulatorUiSelections,
   };
 
@@ -96,7 +96,11 @@ export interface ExtensionToWebviewParamsMap {
    * Notifies webview when user has successfully selected a hosting folder
    * and it has been written to firebase.json.
    */
-  notifyHostingInitDone: { projectId: string, folderPath?: string };
+  notifyHostingInitDone: {
+    projectId: string,
+    folderPath?: string
+    framework?: string
+  };
 
   /**
    * Notify webview of status of deployment attempt.
@@ -119,7 +123,7 @@ export interface ExtensionToWebviewParamsMap {
   notifyPreviewChannelResponse: { id: string };
 
   notifyEmulatorsStopped: {};
-  notifyRunningEmulatorInfo: RunningEmulatorInfo ;
+  notifyRunningEmulatorInfo: RunningEmulatorInfo;
   notifyEmulatorImportFolder: { folder: string };
 }
 

firebase-vscode/package-lock.json

@@ -3,7 +3,7 @@
   "displayName": "firebase-vscode",
   "publisher": "firebase",
   "description": "VSCode Extension for Firebase",
-  "version": "0.0.23-alpha.2",
+  "version": "0.0.23-alpha.3",
   "engines": {
     "vscode": "^1.69.0"
   },

firebase-vscode/package.json

@@ -1,15 +1,89 @@
+import * as path from "path";
+import * as vscode from "vscode";
+import { transports, format } from "winston";
+import Transport from "winston-transport";
+import stripAnsi from "strip-ansi";
+import { SPLAT } from "triple-beam";
 import { logger as cliLogger } from "../../src/logger";
+import { setupLoggers, tryStringify } from "../../src/utils";
 import { setInquirerLogger } from "./stubs/inquirer-stub";
+import { getRootFolders } from "./config-files";
 
 export const pluginLogger: Record<string, (...args) => void> = {};
 
 const logLevels = ['debug', 'info', 'log', 'warn', 'error'];
 
+const outputChannel = vscode.window.createOutputChannel('Firebase');
+
+export function showOutputChannel() {
+  outputChannel.show();
+}
+
 for (const logLevel of logLevels) {
   pluginLogger[logLevel] = (...args) => {
     const prefixedArgs = ['[Firebase Plugin]', ...args];
     cliLogger[logLevel](...prefixedArgs);
   };
 }
 
+/**
+ * Logging setup for logging to console and to file.
+ */
+export function logSetup({ shouldWriteDebug, debugLogPath }: {
+  shouldWriteDebug: boolean,
+  debugLogPath: string
+}) {
+  // Log to console (use built in CLI functionality)
+  process.env.DEBUG = 'true';
+  setupLoggers();
+
+  // Log to file
+  // Only log to file if firebase.debug extension setting is true.
+  if (shouldWriteDebug) {
+    // Re-implement file logger call from ../../src/bin/firebase.ts to not bring
+    // in the entire firebase.ts file
+    const rootFolders = getRootFolders();
+    const filePath = debugLogPath || path.join(rootFolders[0], 'firebase-plugin-debug.log');
+    pluginLogger.info('Logging to path', filePath);
+    cliLogger.add(
+      new transports.File({
+        level: "debug",
+        filename: filePath,
+        format: format.printf((info) => {
+          const segments = [info.message, ...(info[SPLAT] || [])]
+            .map(tryStringify);
+          return `[${info.level}] ${stripAnsi(segments.join(" "))}`;
+        }),
+      })
+    );
+    cliLogger.add(
+      new VSCodeOutputTransport({ level: "info" })
+    );
+  }
+}
+
+/**
+ * Custom Winston transport that writes to VSCode output channel.
+ * Write only "info" and greater to avoid too much spam from "debug".
+ */
+class VSCodeOutputTransport extends Transport {
+  constructor(opts) {
+    super(opts);
+  }
+  log(info, callback) {
+    setImmediate(() => {
+      this.emit('logged', info);
+    });
+    const segments = [info.message, ...(info[SPLAT] || [])]
+      .map(tryStringify);
+    const text = `[${info.level}] ${stripAnsi(segments.join(" "))}`;
+
+    if (info.level !== 'debug') {
+      // info or greater: write to output window
+      outputChannel.appendLine(text);
+    }
+
+    callback();
+  }
+}
 setInquirerLogger(pluginLogger);

firebase-vscode/src/logger-wrapper.ts

@@ -1,8 +1,4 @@
-import * as path from "path";
 import * as vscode from "vscode";
-import { transports, format } from "winston";
-import stripAnsi from "strip-ansi";
-import { SPLAT } from "triple-beam";
 import { ExtensionContext, workspace } from "vscode";
 
 import { FirebaseProjectMetadata } from "../../src/types/project";
@@ -19,16 +15,13 @@ import {
 import { User } from "../../src/types/auth";
 import { currentOptions } from "./options";
 import { selectProjectInMonospace } from "../../src/monospace";
-import { setupLoggers, tryStringify } from "../../src/utils";
-import { pluginLogger } from "./logger-wrapper";
-import { logger } from '../../src/logger';
+import { logSetup, pluginLogger, showOutputChannel } from "./logger-wrapper";
 import { discover } from "../../src/frameworks";
 import { setEnabled } from "../../src/experiments";
 import {
   readAndSendFirebaseConfigs,
   setupFirebaseJsonAndRcFileSystemWatcher,
-  updateFirebaseRCProject,
-  getRootFolders
+  updateFirebaseRCProject
 } from "./config-files";
 import { ServiceAccountUser } from "../common/types";
 
@@ -37,6 +30,7 @@ export let currentUser: User | ServiceAccountUser;
 // Stores a mapping from user email to list of projects for that user
 let projectsUserMapping = new Map<string, FirebaseProjectMetadata[]>();
 let channels = null;
+let currentFramework: string | undefined;
 
 async function fetchUsers() {
   const accounts = await getAccounts();
@@ -116,32 +110,8 @@ export async function setupWorkflow(
   if (useFrameworks) {
     setEnabled('webframeworks', true);
   }
-  /**
-   * Logging setup for logging to console and to file.
-   */
-  // Sets up CLI logger to log to console
-  process.env.DEBUG = 'true';
-  setupLoggers();
 
-  // Only log to file if firebase.debug extension setting is true.
-  if (shouldWriteDebug) {
-    // Re-implement file logger call from ../../src/bin/firebase.ts to not bring
-    // in the entire firebase.ts file
-    const rootFolders = getRootFolders();
-    const filePath = debugLogPath || path.join(rootFolders[0], 'firebase-plugin-debug.log');
-    pluginLogger.info('Logging to path', filePath);
-    logger.add(
-      new transports.File({
-        level: "debug",
-        filename: filePath,
-        format: format.printf((info) => {
-          const segments = [info.message, ...(info[SPLAT] || [])]
-            .map(tryStringify);
-          return `[${info.level}] ${stripAnsi(segments.join(" "))}`;
-        }),
-      })
-    );
-  }
+  logSetup({ shouldWriteDebug, debugLogPath });
 
   /**
    * Call pluginLogger with log arguments received from webview.
@@ -227,6 +197,9 @@ export async function setupWorkflow(
   broker.on("selectAndInitHostingFolder", selectAndInitHosting);
 
   broker.on("hostingDeploy", async ({ target: deployTarget }) => {
+    showOutputChannel();
+    pluginLogger.info(`Starting deployment of project `
+      + `${currentOptions.projectId} to channel: ${deployTarget}`);
     const { success, consoleUrl, hostingUrl } = await deployToHosting(
       currentOptions.config,
       deployTarget
@@ -323,14 +296,14 @@ export async function setupWorkflow(
   }
 
   async function selectAndInitHosting({ projectId, singleAppSupport }) {
-    let discoveredFramework;
+    currentFramework = undefined;
     // Note: discover() takes a few seconds. No need to block users that don't
     // have frameworks support enabled.
     if (useFrameworks) {
-      discoveredFramework = useFrameworks && await discover(currentOptions.cwd, false);
+      currentFramework = useFrameworks && await discover(currentOptions.cwd, false);
       pluginLogger.debug('Searching for a web framework in this project.');
     }
-    if (discoveredFramework) {
+    if (currentFramework) {
       pluginLogger.debug('Detected web framework, launching frameworks init.');
       await initHosting({
         spa: singleAppSupport,
@@ -358,7 +331,7 @@ export async function setupWorkflow(
     }
     readAndSendFirebaseConfigs(broker, context);
     broker.send("notifyHostingInitDone",
-      { projectId, folderPath: currentOptions.cwd });
+      { projectId, folderPath: currentOptions.cwd, framework: currentFramework });
     await fetchChannels(true);
   }
 }

firebase-vscode/src/workflow.ts

@@ -19,6 +19,7 @@ export function SidebarApp() {
   const [env, setEnv] = useState<{ isMonospace: boolean }>();
   const [channels, setChannels] = useState<ChannelWithId[]>(null);
   const [user, setUser] = useState<User | ServiceAccountUser | null>(null);
+  const [framework, setFramework] = useState<string | null>(null);
   /**
    * null - has not finished checking yet
    * empty array - finished checking, no users logged in
@@ -86,9 +87,12 @@ export function SidebarApp() {
       setUser(user);
     });
 
-    broker.on("notifyHostingInitDone", ({ projectId, folderPath }) => {
+    broker.on("notifyHostingInitDone", ({ projectId, folderPath, framework }) => {
       webLogger.debug(`notifyHostingInitDone: ${projectId}, ${folderPath}`);
       setHostingOnboarded(true);
+      if (framework) {
+        setFramework(framework);
+      }
     });
 
     broker.on("notifyHostingDeploy", ({ success }) => {
@@ -134,6 +138,7 @@ export function SidebarApp() {
           setHostingState={setHostingState}
           projectId={projectId}
           channels={channels}
+          framework={framework}
         />
       )}
       <Spacer size="large" />