Add UI polish for running emulator status

firebase · Sep 20, 2024 · c9cba22 · c9cba22
1 parent b082abe
commit c9cba22
Show file tree

Hide file tree

Showing 3 changed files with 45 additions and 10 deletions.
diff --git a/firebase-vscode/webviews/SidebarApp.tsx b/firebase-vscode/webviews/SidebarApp.tsx
@@ -1,4 +1,4 @@
-import React, {useEffect} from "react";
+import React, { useEffect } from "react";
 import { Spacer } from "./components/ui/Spacer";
 import { broker, brokerSignal } from "./globals/html-broker";
 import { AccountSection } from "./components/AccountSection";
@@ -60,9 +60,7 @@ function Welcome() {
 }
 
 function EmulatorsPanel() {
-  if (
-    emulatorsRunningInfo.value?.status === "starting"
-  ) {
+  if (emulatorsRunningInfo.value?.status === "starting") {
     const runningPanel = (
       <>
         <label>Emulator starting: see integrated terminal</label>
@@ -151,9 +149,9 @@ function DataConnect() {
 
 function Content() {
   useEffect(() => {
-    broker.send('getDocsLink');
+    broker.send("getDocsLink");
   }, []);
-  
+
   return (
     <>
       <PanelSection title="Emulators">
@@ -202,4 +200,4 @@ export function SidebarApp() {
         ))}
     </App>
   );
-}
+}
diff --git a/firebase-vscode/webviews/components/EmulatorPanel.scss b/firebase-vscode/webviews/components/EmulatorPanel.scss
@@ -0,0 +1,13 @@
+.list {
+  list-style: none;
+}
+
+.list-item {
+  align-items: center;
+  display: flex;
+  gap: 4px;
+}
+
+.running-indicator {
+  color: var(--vscode-testing-runAction, green);
+}
diff --git a/firebase-vscode/webviews/components/EmulatorPanel.tsx b/firebase-vscode/webviews/components/EmulatorPanel.tsx
@@ -4,6 +4,10 @@ import { Spacer } from "./ui/Spacer";
 import { PanelSection } from "./ui/PanelSection";
 import { EmulatorInfo } from "../../../src/emulator/types";
 import { RunningEmulatorInfo } from "../messaging/types";
+import { Body, Label } from "./ui/Text";
+import styles from "./EmulatorPanel.scss";
+import { ExternalLink } from "./ui/ExternalLink";
+import { Icon } from "./ui/Icon";
 
 /**
  * Emulator info display component for the VSCode extension.
@@ -15,8 +19,10 @@ export function EmulatorPanel({
 }) {
   return (
     <>
-      Running Emulators:
+      <Label>Running</Label>
+      <Spacer size="medium" />
       <FormatEmulatorRunningInfo infos={emulatorInfo.displayInfo} />
+
       {!!emulatorInfo.uiUrl && (
         <>
           <Spacer size="xxlarge" />
@@ -25,6 +31,16 @@ export function EmulatorPanel({
           </VSCodeLink>
         </>
       )}
+
+      <Spacer size="large" />
+      <Body>
+        <ExternalLink
+          href="https://firebase.google.com/docs/emulator-suite"
+          prefix={<Icon icon="book" />}
+        >
+          See docs
+        </ExternalLink>
+      </Body>
     </>
   );
 }
@@ -33,11 +49,19 @@ export function EmulatorPanel({
 // an implementation detail.
 function FormatEmulatorRunningInfo({ infos }: { infos: EmulatorInfo[] }) {
   return (
-    <ul>
+    <ul className={styles.list}>
       {infos
         .filter((info) => info.name !== "logging")
         .map((info, index) => (
-          <li key={info.pid ?? index}>{info.name}</li>
+          <li key={info.pid ?? index} className={styles.listItem}>
+            <Icon icon="circle-filled" className={styles.runningIndicator} />
+            <Body as="span">
+              {info.name}
+              <Label as="span" level={3}>
+                &nbsp;:{info.port}
+              </Label>
+            </Body>
+          </li>
         ))}
     </ul>
   );