fix: inspections bugs (#3277)

* fix: environment add bug in inspection

* chore: add 127.0.0.1 in url inspection

* chore: update browserextension inspection help url

* fix: team env not showing bug in selector

* chore: rework inspector systems to be reactive

* chore: handling tab changes gracefully

* refactor: move out url interceptor from the platform

* chore: add view function in inspector service to get views into the list

* fix: interceptors not kicking in on initial load

* fix: don't show no internet connection error unless browser deems so

* chore: fix tests

---------

Co-authored-by: Andrew Bastin <andrewbastin.k@gmail.com>

packages/hoppscotch-common/src/services/inspection/inspectors/header.inspector.ts

@@ -2,7 +2,7 @@ import { Service } from "dioc"
 import { InspectionService, Inspector, InspectorResult } from ".."
 import { getI18n } from "~/modules/i18n"
 import { HoppRESTRequest } from "@hoppscotch/data"
-import { markRaw, ref } from "vue"
+import { Ref, computed, markRaw } from "vue"
 import IconAlertTriangle from "~icons/lucide/alert-triangle"
 
 /**
@@ -26,53 +26,50 @@ export class HeaderInspectorService extends Service implements Inspector {
     this.inspection.registerInspector(this)
   }
 
-  /**
-   * Checks if the header contains cookies
-   * @param req The request to inspect
-   * @returns The inspector results
-   */
-  getInspectorFor(req: HoppRESTRequest): InspectorResult[] {
-    const results = ref<InspectorResult[]>([])
+  private cookiesCheck(headerKey: string) {
+    const cookieKeywords = ["Cookie", "Set-Cookie", "Cookie2", "Set-Cookie2"]
 
-    const cookiesCheck = (headerKey: string) => {
-      const cookieKeywords = ["Cookie", "Set-Cookie", "Cookie2", "Set-Cookie2"]
+    return cookieKeywords.includes(headerKey)
+  }
 
-      return cookieKeywords.includes(headerKey)
-    }
+  getInspections(req: Readonly<Ref<HoppRESTRequest>>) {
+    return computed(() => {
+      const results: InspectorResult[] = []
 
-    const headers = req.headers
+      const headers = req.value.headers
 
-    const headerKeys = Object.values(headers).map((header) => header.key)
+      const headerKeys = Object.values(headers).map((header) => header.key)
 
-    const isContainCookies = headerKeys.includes("Cookie")
+      const isContainCookies = headerKeys.includes("Cookie")
 
-    if (isContainCookies) {
-      headerKeys.forEach((headerKey, index) => {
-        if (cookiesCheck(headerKey)) {
-          results.value.push({
-            id: "header",
-            icon: markRaw(IconAlertTriangle),
-            text: {
-              type: "text",
-              text: this.t("inspections.header.cookie"),
-            },
-            severity: 2,
-            isApplicable: true,
-            locations: {
-              type: "header",
-              position: "key",
-              key: headerKey,
-              index: index,
-            },
-            doc: {
-              text: this.t("action.learn_more"),
-              link: "https://docs.hoppscotch.io/",
-            },
-          })
-        }
-      })
-    }
+      if (isContainCookies) {
+        headerKeys.forEach((headerKey, index) => {
+          if (this.cookiesCheck(headerKey)) {
+            results.push({
+              id: "header",
+              icon: markRaw(IconAlertTriangle),
+              text: {
+                type: "text",
+                text: this.t("inspections.header.cookie"),
+              },
+              severity: 2,
+              isApplicable: true,
+              locations: {
+                type: "header",
+                position: "key",
+                key: headerKey,
+                index: index,
+              },
+              doc: {
+                text: this.t("action.learn_more"),
+                link: "https://docs.hoppscotch.io/",
+              },
+            })
+          }
+        })
+      }
 
-    return results.value
+      return results
+    })
   }
 }