Add loading and success/error toasts to emulator start/stop (#6344)

* Add loading + success/error notifs to emulator start/stop

* remove commented out code

firebase-vscode/common/messaging/protocol.ts

@@ -3,10 +3,10 @@
  * between two environments (VScode and Webview)
  */
 
-import { FirebaseConfig } from '../../../src/firebaseConfig';
+import { FirebaseConfig } from "../../../src/firebaseConfig";
 import { User } from "../../../src/types/auth";
 import { ServiceAccountUser } from "../types";
-import { RCData } from '../../../src/rc';
+import { RCData } from "../../../src/rc";
 import { EmulatorUiSelections, RunningEmulatorInfo } from "./types";
 
 export interface WebviewToExtensionParamsMap {
@@ -27,45 +27,45 @@ export interface WebviewToExtensionParamsMap {
    * TODO(hsubox76): Generalize to work for all `firebase init` products.
    */
   selectAndInitHostingFolder: {
-    projectId: string,
-    singleAppSupport: boolean
+    projectId: string;
+    singleAppSupport: boolean;
   };
 
   /**
    * Runs `firebase deploy` for hosting.
    * TODO(hsubox76): Generalize to work for all `firebase deploy` targets.
    */
   hostingDeploy: {
-    target: string
+    target: string;
   };
 
   /**
    * Prompt user for text input
    */
-  promptUserForInput: { title: string, prompt: string };
+  promptUserForInput: { title: string; prompt: string };
 
   /**
    * Show a UI message using the vscode interface
    */
-  showMessage: { msg: string, options?: {} };
+  showMessage: { msg: string; options?: {} };
 
   /**
    * Write a log to the extension logger.
    */
-  writeLog: { level: string, args: string[] };
+  writeLog: { level: string; args: string[] };
 
   /**
    * Call extension runtime to open a link (a href does not work in Monospace)
    */
   openLink: {
-    href: string
+    href: string;
   };
 
-  /** 
+  /**
    * Equivalent to the `firebase emulators:start` command.
-  */
+   */
   launchEmulators: {
-    emulatorUiSelections: EmulatorUiSelections,
+    emulatorUiSelections: EmulatorUiSelections;
   };
 
   /** Stops the emulators gracefully allowing for data export if required. */
@@ -100,35 +100,38 @@ export interface ExtensionToWebviewParamsMap {
    * and it has been written to firebase.json.
    */
   notifyHostingInitDone: {
-    success: boolean,
-    projectId: string,
-    folderPath?: string
-    framework?: string
+    success: boolean;
+    projectId: string;
+    folderPath?: string;
+    framework?: string;
   };
 
   /**
    * Notify webview of status of deployment attempt.
    */
   notifyHostingDeploy: {
-    success: boolean,
-    consoleUrl?: string,
-    hostingUrl?: string
+    success: boolean;
+    consoleUrl?: string;
+    hostingUrl?: string;
   };
 
   /**
    * Notify webview of initial discovery or change in firebase.json or
    * .firebaserc
    */
-  notifyFirebaseConfig: { firebaseJson: FirebaseConfig, firebaseRC: RCData };
+  notifyFirebaseConfig: { firebaseJson: FirebaseConfig; firebaseRC: RCData };
 
   /**
    * Return user-selected preview channel name
    */
   notifyPreviewChannelResponse: { id: string };
 
   notifyEmulatorsStopped: {};
+  notifyEmulatorStartFailed: {};
   notifyRunningEmulatorInfo: RunningEmulatorInfo;
   notifyEmulatorImportFolder: { folder: string };
 }
 
-export type MessageParamsMap = WebviewToExtensionParamsMap | ExtensionToWebviewParamsMap;
+export type MessageParamsMap =
+  | WebviewToExtensionParamsMap
+  | ExtensionToWebviewParamsMap;

firebase-vscode/src/core/emulators.ts

@@ -9,17 +9,53 @@ import { ExtensionBrokerImpl } from "../extension-broker";
 
 export function registerEmulators(broker: ExtensionBrokerImpl): Disposable {
   broker.on("launchEmulators", async ({ emulatorUiSelections }) => {
-    await emulatorsStart(emulatorUiSelections);
-    broker.send("notifyRunningEmulatorInfo", {
-      uiUrl: getEmulatorUiUrl(),
-      displayInfo: listRunningEmulators(),
-    });
+    vscode.window.withProgress(
+      {
+        location: vscode.ProgressLocation.Window,
+        cancellable: false,
+        title: "Starting emulators",
+      },
+      async (progress) => {
+        progress.report({ increment: 0 });
+        try {
+          await emulatorsStart(emulatorUiSelections);
+          broker.send("notifyRunningEmulatorInfo", {
+            uiUrl: getEmulatorUiUrl(),
+            displayInfo: listRunningEmulators(),
+          });
+          vscode.window.showInformationMessage(
+            "Firebase Extension: Emulators started successfully"
+          );
+        } catch (e) {
+          broker.send("notifyEmulatorStartFailed");
+          vscode.window.showErrorMessage(
+            "Firebase Extension: Emulators start failed - " + e
+          );
+        }
+        progress.report({ increment: 100 });
+      }
+    );
   });
 
   broker.on("stopEmulators", async () => {
-    await stopEmulators();
-    // Update the UI
-    broker.send("notifyEmulatorsStopped");
+    vscode.window.withProgress(
+      {
+        location: vscode.ProgressLocation.Window,
+        cancellable: false,
+        title: "Stopping emulators",
+      },
+      async (progress) => {
+        progress.report({ increment: 0 });
+
+        await stopEmulators();
+        broker.send("notifyEmulatorsStopped");
+        vscode.window.showInformationMessage(
+          "Firebase Extension: Emulators stopped successfully"
+        );
+
+        progress.report({ increment: 100 });
+      }
+    );
   });
 
   broker.on("selectEmulatorImportFolder", async () => {

firebase-vscode/webviews/components/EmulatorPanel.tsx

@@ -73,6 +73,11 @@ export function EmulatorPanel({
     setRunningEmulatorInfo(null);
   });
 
+  broker.on("notifyEmulatorStartFailed", () => {
+    setShowEmulatorProgressIndicator(false);
+    webLogger.debug(`notifyEmulatorStartFailed received in sidebar`);
+  });
+
   broker.on("notifyRunningEmulatorInfo", (info: RunningEmulatorInfo) => {
     setShowEmulatorProgressIndicator(false);
     webLogger.debug(`notifyRunningEmulatorInfo received in sidebar`);

src/emulator/portUtils.ts

@@ -160,9 +160,9 @@ export async function checkListenable(
 }
 
 /**
- * Wait for a port to close on the given host. Checks every 250ms for up to 60s.
+ * Wait for a port to be available on the given host. Checks every 250ms for up to 60s.
  */
-export async function waitForPortClosed(port: number, host: string): Promise<void> {
+export async function waitForPortUsed(port: number, host: string): Promise<void> {
   const interval = 250;
   const timeout = 60_000;
   try {

src/emulator/registry.ts

@@ -28,7 +28,7 @@ export class EmulatorRegistry {
     // No need to wait for the Extensions emulator to close its port, since it runs on the Functions emulator.
     if (instance.getName() !== Emulators.EXTENSIONS) {
       const info = instance.getInfo();
-      await portUtils.waitForPortClosed(info.port, connectableHostname(info.host));
+      await portUtils.waitForPortUsed(info.port, connectableHostname(info.host));
     }
   }
 
@@ -43,8 +43,16 @@ export class EmulatorRegistry {
       return;
     }
 
-    await instance.stop();
-    this.clear(instance.getName());
+    try {
+      await instance.stop();
+      this.clear(instance.getName());
+    } catch (e: any) {
+      EmulatorLogger.forEmulator(name).logLabeled(
+        "WARN",
+        name,
+        `Error stopping ${Constants.description(name)}`
+      );
+    }
   }
 
   static async stopAll(): Promise<void> {
@@ -85,15 +93,7 @@ export class EmulatorRegistry {
     });
 
     for (const name of emulatorsToStop) {
-      try {
-        await this.stop(name);
-      } catch (e: any) {
-        EmulatorLogger.forEmulator(name).logLabeled(
-          "WARN",
-          name,
-          `Error stopping ${Constants.description(name)}`
-        );
-      }
+      await this.stop(name);
     }
   }