Add Emulator Overlay (#8977) (#9031)

Co-authored-by: Maneesh Tewani <maneesht@users.noreply.github.com>

Author: hsubox76

.changeset/three-singers-wonder.md

@@ -0,0 +1,10 @@
+---
+"@firebase/auth": patch
+"@firebase/firestore": patch
+"@firebase/util": patch
+"@firebase/database": patch
+"@firebase/storage": patch
+"@firebase/functions": patch
+---
+
+Add Emulator Overlay

common/api-review/util.api.md

@@ -482,6 +482,9 @@ export interface Subscribe<T> {
 // @public (undocumented)
 export type Unsubscribe = () => void;
 
+// @public
+export function updateEmulatorBanner(name: string, isRunningEmulator: boolean): void;
+
 // Warning: (ae-missing-release-tag) "validateArgCount" is exported by the package, but it is missing a release tag (@alpha, @beta, @public, or @internal)
 //
 // @public

packages/auth/src/core/auth/emulator.ts

@@ -18,7 +18,12 @@ import { Auth } from '../../model/public_types';
 import { AuthErrorCode } from '../errors';
 import { _assert } from '../util/assert';
 import { _castAuth } from './auth_impl';
-import { deepEqual, isCloudWorkstation, pingServer } from '@firebase/util';
+import {
+  deepEqual,
+  isCloudWorkstation,
+  pingServer,
+  updateEmulatorBanner
+} from '@firebase/util';
 
 /**
  * Changes the {@link Auth} instance to communicate with the Firebase Auth Emulator, instead of production
@@ -97,13 +102,12 @@ export function connectAuthEmulator(
   authInternal.emulatorConfig = emulatorConfig;
   authInternal.settings.appVerificationDisabledForTesting = true;
 
-  if (!disableWarnings) {
-    emitEmulatorWarning();
-  }
-
-  // Workaround to get cookies in Firebase Studio
   if (isCloudWorkstation(host)) {
+    updateEmulatorBanner('Auth', true);
+    // Workaround to get cookies in Firebase Studio
     void pingServer(`${protocol}//${host}${portStr}`);
+  } else if (!disableWarnings) {
+    emitEmulatorWarning();
   }
 }
 

packages/auth/src/platform_browser/index.ts

@@ -30,7 +30,11 @@ import { browserSessionPersistence } from './persistence/session_storage';
 import { indexedDBLocalPersistence } from './persistence/indexed_db';
 import { browserPopupRedirectResolver } from './popup_redirect';
 import { Auth, User } from '../model/public_types';
-import { getDefaultEmulatorHost, getExperimentalSetting } from '@firebase/util';
+import {
+  getDefaultEmulatorHost,
+  getExperimentalSetting,
+  updateEmulatorBanner
+} from '@firebase/util';
 import { _setExternalJSProvider } from './load_js';
 import { _createError } from '../core/util/assert';
 import { AuthErrorCode } from '../core/errors';
@@ -110,6 +114,8 @@ export function getAuth(app: FirebaseApp = getApp()): Auth {
   const authEmulatorHost = getDefaultEmulatorHost('auth');
   if (authEmulatorHost) {
     connectAuthEmulator(auth, `http://${authEmulatorHost}`);
+  } else {
+    updateEmulatorBanner('Auth', false);
   }
 
   return auth;

packages/database/src/api/Database.ts

@@ -31,7 +31,8 @@ import {
   EmulatorMockTokenOptions,
   getDefaultEmulatorHostnameAndPort,
   isCloudWorkstation,
-  pingServer
+  pingServer,
+  updateEmulatorBanner
 } from '@firebase/util';
 
 import { AppCheckTokenProvider } from '../core/AppCheckTokenProvider';
@@ -257,6 +258,10 @@ export class Database implements _FirebaseService {
         this.app.options['databaseAuthVariableOverride']
       );
       this._instanceStarted = true;
+      updateEmulatorBanner(
+        'Database',
+        this._repo.repoInfo_.emulatorOptions !== null
+      );
     }
     return this._repoInternal;
   }
@@ -393,6 +398,7 @@ export function connectDatabaseEmulator(
   // Workaround to get cookies in Firebase Studio
   if (isCloudWorkstation(host)) {
     void pingServer(host);
+    updateEmulatorBanner('Database', true);
   }
 
   // Modify the repo to apply emulator settings

packages/firestore/src/lite-api/database.ts

@@ -28,6 +28,7 @@ import {
   EmulatorMockTokenOptions,
   getDefaultEmulatorHostnameAndPort,
   isCloudWorkstation,
+  updateEmulatorBanner,
   pingServer
 } from '@firebase/util';
 
@@ -142,6 +143,7 @@ export class Firestore implements FirestoreService {
 
   _freezeSettings(): FirestoreSettingsImpl {
     this._settingsFrozen = true;
+    updateEmulatorBanner('Firestore', this._settings.isUsingEmulator);
     return this._settings;
   }
 
@@ -334,9 +336,7 @@ export function connectFirestoreEmulator(
     emulatorOptions: firestore._getEmulatorOptions()
   };
   const newHostSetting = `${host}:${port}`;
-  if (useSsl) {
-    void pingServer(`https://${newHostSetting}`);
-  }
+
   if (settings.host !== DEFAULT_HOST && settings.host !== newHostSetting) {
     logWarn(
       'Host has been set in both settings() and connectFirestoreEmulator(), emulator host ' +
@@ -357,6 +357,11 @@ export function connectFirestoreEmulator(
 
   firestore._setSettings(newConfig);
 
+  if (useSsl) {
+    void pingServer(`https://${newHostSetting}`);
+    updateEmulatorBanner('Firestore', true);
+  }
+
   if (options.mockUserToken) {
     let token: string;
     let user: User;

packages/functions/src/api.ts

@@ -29,7 +29,8 @@ import {
 } from './service';
 import {
   getModularInstance,
-  getDefaultEmulatorHostnameAndPort
+  getDefaultEmulatorHostnameAndPort,
+  updateEmulatorBanner
 } from '@firebase/util';
 
 export { FunctionsError } from './error';
@@ -47,6 +48,7 @@ export function getFunctions(
   app: FirebaseApp = getApp(),
   regionOrCustomDomain: string = DEFAULT_REGION
 ): Functions {
+  updateEmulatorBanner('Functions', false);
   // Dependencies
   const functionsProvider: Provider<'functions'> = _getProvider(
     getModularInstance(app),

packages/functions/src/service.ts

@@ -30,7 +30,11 @@ import { Provider } from '@firebase/component';
 import { FirebaseAuthInternalName } from '@firebase/auth-interop-types';
 import { MessagingInternalComponentName } from '@firebase/messaging-interop-types';
 import { AppCheckInternalComponentName } from '@firebase/app-check-interop-types';
-import { isCloudWorkstation, pingServer } from '@firebase/util';
+import {
+  isCloudWorkstation,
+  pingServer,
+  updateEmulatorBanner
+} from '@firebase/util';
 
 export const DEFAULT_REGION = 'us-central1';
 
@@ -182,6 +186,7 @@ export function connectFunctionsEmulator(
   // Workaround to get cookies in Firebase Studio
   if (useSsl) {
     void pingServer(functionsInstance.emulatorOrigin);
+    updateEmulatorBanner('Functions', true);
   }
 }
 

packages/storage/src/api.ts

@@ -53,7 +53,8 @@ import { STORAGE_TYPE } from './constants';
 import {
   EmulatorMockTokenOptions,
   getModularInstance,
-  getDefaultEmulatorHostnameAndPort
+  getDefaultEmulatorHostnameAndPort,
+  updateEmulatorBanner
 } from '@firebase/util';
 import { StringFormat } from './implementation/string';
 
@@ -332,6 +333,7 @@ export function getStorage(
   bucketUrl?: string
 ): FirebaseStorage {
   app = getModularInstance(app);
+  updateEmulatorBanner('Storage', false);
   const storageProvider: Provider<'storage'> = _getProvider(app, STORAGE_TYPE);
   const storageInstance = storageProvider.getImmediate({
     identifier: bucketUrl

packages/storage/src/service.ts

@@ -46,7 +46,8 @@ import {
   createMockUserToken,
   EmulatorMockTokenOptions,
   isCloudWorkstation,
-  pingServer
+  pingServer,
+  updateEmulatorBanner
 } from '@firebase/util';
 import { Connection, ConnectionType } from './implementation/connection';
 
@@ -150,6 +151,7 @@ export function connectStorageEmulator(
   // Workaround to get cookies in Firebase Studio
   if (useSsl) {
     void pingServer(`https://${storage.host}`);
+    updateEmulatorBanner('Storage', true);
   }
   storage._isUsingEmulator = true;
   storage._protocol = useSsl ? 'https' : 'http';