Merge remote-tracking branch 'origin/main' into refactor/ui

helpers/fb/analytics.ts

@@ -0,0 +1,93 @@
+import firebase from "firebase"
+import { authEvents$ } from "./auth"
+import {
+  HoppAccentColor,
+  HoppBgColor,
+  settings$,
+  settingsStore,
+} from "~/newstore/settings"
+
+let analytics: firebase.analytics.Analytics
+
+type SettingsCustomDimensions = {
+  usesProxy: boolean
+  usesExtension: boolean
+  usesScrollInto: boolean
+  syncCollections: boolean
+  syncEnvironments: boolean
+  syncHistory: boolean
+  usesBg: HoppBgColor
+  usesAccent: HoppAccentColor
+  usesTelemetry: boolean
+}
+
+type HoppRequestEvent =
+  | {
+      platform: "rest" | "graphql-query" | "graphql-schema"
+      strategy: "normal" | "proxy" | "extension"
+    }
+  | { platform: "wss" | "sse" | "socketio" | "mqtt" }
+
+export function initAnalytics() {
+  analytics = firebase.app().analytics()
+
+  initLoginListeners()
+  initSettingsListeners()
+}
+
+function initLoginListeners() {
+  authEvents$.subscribe((ev) => {
+    if (ev.event === "login") {
+      if (settingsStore.value.TELEMETRY_ENABLED) {
+        analytics.setUserId(ev.user.uid)
+
+        analytics.logEvent("login", {
+          method: ev.user.providerData[0]?.providerId, // Assume the first provider is the login provider
+        })
+      }
+    } else if (ev.event === "logout") {
+      if (settingsStore.value.TELEMETRY_ENABLED) {
+        analytics.logEvent("logout")
+      }
+    }
+  })
+}
+
+function initSettingsListeners() {
+  // Keep track of the telemetry status
+  let telemetryStatus = settingsStore.value.TELEMETRY_ENABLED
+
+  settings$.subscribe((settings) => {
+    const conf: SettingsCustomDimensions = {
+      usesProxy: settings.PROXY_ENABLED,
+      usesExtension: settings.EXTENSIONS_ENABLED,
+      usesScrollInto: settings.SCROLL_INTO_ENABLED,
+      syncCollections: settings.syncCollections,
+      syncEnvironments: settings.syncEnvironments,
+      syncHistory: settings.syncHistory,
+      usesAccent: settings.THEME_COLOR,
+      usesBg: settings.BG_COLOR,
+      usesTelemetry: settings.TELEMETRY_ENABLED,
+    }
+
+    // User toggled telemetry mode to off or to on
+    if (
+      (telemetryStatus && !settings.TELEMETRY_ENABLED) ||
+      settings.TELEMETRY_ENABLED
+    ) {
+      analytics.setUserProperties(conf)
+    }
+
+    telemetryStatus = settings.TELEMETRY_ENABLED
+
+    analytics.setAnalyticsCollectionEnabled(telemetryStatus)
+  })
+
+  analytics.setAnalyticsCollectionEnabled(telemetryStatus)
+}
+
+export function logHoppRequestRunToAnalytics(ev: HoppRequestEvent) {
+  if (settingsStore.value.TELEMETRY_ENABLED) {
+    analytics.logEvent("hopp-request", ev)
+  }
+}

helpers/fb/auth.ts

@@ -1,11 +1,16 @@
 import firebase from "firebase"
-import { BehaviorSubject } from "rxjs"
+import { BehaviorSubject, Subject } from "rxjs"
 
 export type HoppUser = firebase.User & {
   provider?: string
   accessToken?: string
 }
 
+type AuthEvents =
+  | { event: "login"; user: HoppUser }
+  | { event: "logout" }
+  | { event: "authTokenUpdate"; user: HoppUser; newToken: string | null }
+
 /**
  * A BehaviorSubject emitting the currently logged in user (or null if not logged in)
  */
@@ -15,6 +20,11 @@ export const currentUser$ = new BehaviorSubject<HoppUser | null>(null)
  */
 export const authIdToken$ = new BehaviorSubject<string | null>(null)
 
+/**
+ * A subject that emits events related to authentication flows
+ */
+export const authEvents$ = new Subject<AuthEvents>()
+
 /**
  * Initializes the firebase authentication related subjects
  */
@@ -22,6 +32,9 @@ export function initAuth() {
   let extraSnapshotStop: (() => void) | null = null
 
   firebase.auth().onAuthStateChanged((user) => {
+    /** Whether the user was logged in before */
+    const wasLoggedIn = currentUser$.value !== null
+
     if (!user && extraSnapshotStop) {
       extraSnapshotStop()
       extraSnapshotStop = null
@@ -61,14 +74,35 @@ export function initAuth() {
             userUpdate.provider = data.provider
             userUpdate.accessToken = data.accessToken
           }
+
+          currentUser$.next(userUpdate)
         })
     }
     currentUser$.next(user)
+
+    // User wasn't found before, but now is there (login happened)
+    if (!wasLoggedIn && user) {
+      authEvents$.next({
+        event: "login",
+        user: currentUser$.value!!,
+      })
+    } else if (wasLoggedIn && !user) {
+      // User was found before, but now is not there (logout happened)
+      authEvents$.next({
+        event: "logout",
+      })
+    }
   })
 
   firebase.auth().onIdTokenChanged(async (user) => {
     if (user) {
       authIdToken$.next(await user.getIdToken())
+
+      authEvents$.next({
+        event: "authTokenUpdate",
+        newToken: authIdToken$.value,
+        user: currentUser$.value!!, // Force not-null because user is defined
+      })
     } else {
       authIdToken$.next(null)
     }

helpers/fb/index.ts

@@ -1,4 +1,5 @@
 import firebase from "firebase"
+import { initAnalytics } from "./analytics"
 import { initAuth } from "./auth"
 import { initCollections } from "./collections"
 import { initEnvironments } from "./environments"
@@ -13,21 +14,27 @@ const firebaseConfig = {
   storageBucket: process.env.STORAGE_BUCKET,
   messagingSenderId: process.env.MESSAGING_SENDER_ID,
   appId: process.env.APP_ID,
-  measurementId: process.env.MEASUREMENT_ID,
+  measurementId: process.env.FB_MEASUREMENT_ID,
 }
 
 let initialized = false
 
 export function initializeFirebase() {
   if (!initialized) {
-    firebase.initializeApp(firebaseConfig)
+    try {
+      firebase.initializeApp(firebaseConfig)
 
-    initAuth()
-    initSettings()
-    initCollections()
-    initHistory()
-    initEnvironments()
+      initAuth()
+      initSettings()
+      initCollections()
+      initHistory()
+      initEnvironments()
+      initAnalytics()
 
-    initialized = true
+      initialized = true
+    } catch (e) {
+      // initializeApp throws exception if we reinitialize
+      initialized = true
+    }
   }
 }

helpers/network.js

@@ -25,5 +25,21 @@ const runAppropriateStrategy = (req) => {
   return AxiosStrategy(req)
 }
 
+/**
+ * Returns an identifier for how a request will be ran
+ * if the system is asked to fire a request
+ *
+ * @returns {"normal" | "extension" | "proxy"}
+ */
+export function getCurrentStrategyID() {
+  if (isExtensionsAllowed() && hasExtensionInstalled()) {
+    return "extension"
+  } else if (settingsStore.value.PROXY_ENABLED) {
+    return "proxy"
+  } else {
+    return "normal"
+  }
+}
+
 export const sendNetworkRequest = (req) =>
   runAppropriateStrategy(req).finally(() => window.$nuxt.$loading.finish())