feat: inspections (#3213)

Co-authored-by: Liyas Thomas <liyascthomas@gmail.com>

packages/hoppscotch-common/src/components/http/Headers.vue

@@ -79,16 +79,13 @@
                 tabindex="-1"
               />
             </span>
-            <HoppSmartAutoComplete
+            <SmartEnvInput
+              v-model="header.key"
               :placeholder="`${t('count.header', { count: index + 1 })}`"
-              :source="commonHeaders"
-              :spellcheck="false"
-              :value="header.key"
-              autofocus
-              styles=" bg-transparent flex flex-1
-            py-1 px-4 truncate "
-              class="flex-1 !flex"
-              @input="
+              :auto-complete-source="commonHeaders"
+              :env-index="index"
+              :inspection-results="getInspectorResult(headerKeyResults, index)"
+              @change="
                 updateHeader(index, {
                   id: header.id,
                   key: $event,
@@ -100,6 +97,10 @@
             <SmartEnvInput
               v-model="header.value"
               :placeholder="`${t('count.value', { count: index + 1 })}`"
+              :inspection-results="
+                getInspectorResult(headerValueResults, index)
+              "
+              :env-index="index"
               @change="
                 updateHeader(index, {
                   id: header.id,
@@ -265,6 +266,9 @@ import {
 } from "~/helpers/utils/EffectiveURL"
 import { aggregateEnvs$, getAggregateEnvs } from "~/newstore/environments"
 import { useVModel } from "@vueuse/core"
+import { useService } from "dioc/vue"
+import { InspectionService, InspectorResult } from "~/services/inspection"
+import { currentTabID } from "~/helpers/rest/tab"
 
 const t = useI18n()
 const toast = useToast()
@@ -502,4 +506,39 @@ const changeTab = (tab: ComputedHeader["source"]) => {
   if (tab === "auth") emit("change-tab", "authorization")
   else emit("change-tab", "bodyParams")
 }
+
+const inspectionService = useService(InspectionService)
+
+const allTabResults = inspectionService.tabs
+
+const headerKeyResults = computed(() => {
+  return (
+    allTabResults.value
+      .get(currentTabID.value)
+      .filter(
+        (result) =>
+          result.locations.type === "header" &&
+          result.locations.position === "key"
+      ) ?? []
+  )
+})
+const headerValueResults = computed(() => {
+  return (
+    allTabResults.value
+      .get(currentTabID.value)
+      .filter(
+        (result) =>
+          result.locations.type === "header" &&
+          result.locations.position === "value"
+      ) ?? []
+  )
+})
+
+const getInspectorResult = (results: InspectorResult[], index: number) => {
+  return results.filter((result) => {
+    if (result.locations.type === "url" || result.locations.type === "response")
+      return
+    return result.locations.index === index
+  })
+}
 </script>

packages/hoppscotch-common/src/components/http/Parameters.vue

@@ -82,6 +82,9 @@
             <SmartEnvInput
               v-model="param.key"
               :placeholder="`${t('count.parameter', { count: index + 1 })}`"
+              :inspection-results="
+                getInspectorResult(parameterKeyResults, index)
+              "
               @change="
                 updateParam(index, {
                   id: param.id,
@@ -94,6 +97,9 @@
             <SmartEnvInput
               v-model="param.value"
               :placeholder="`${t('count.value', { count: index + 1 })}`"
+              :inspection-results="
+                getInspectorResult(parameterValueResults, index)
+              "
               @change="
                 updateParam(index, {
                   id: param.id,
@@ -173,7 +179,7 @@ import IconCheckCircle from "~icons/lucide/check-circle"
 import IconCircle from "~icons/lucide/circle"
 import IconTrash from "~icons/lucide/trash"
 import IconWrapText from "~icons/lucide/wrap-text"
-import { reactive, ref, watch } from "vue"
+import { computed, reactive, ref, watch } from "vue"
 import { flow, pipe } from "fp-ts/function"
 import * as O from "fp-ts/Option"
 import * as A from "fp-ts/Array"
@@ -195,6 +201,9 @@ import { useToast } from "@composables/toast"
 import { throwError } from "@functional/error"
 import { objRemoveKey } from "@functional/object"
 import { useVModel } from "@vueuse/core"
+import { useService } from "dioc/vue"
+import { InspectionService, InspectorResult } from "~/services/inspection"
+import { currentTabID } from "~/helpers/rest/tab"
 
 const colorMode = useColorMode()
 
@@ -398,4 +407,39 @@ const clearContent = () => {
 
   bulkParams.value = ""
 }
+
+const inspectionService = useService(InspectionService)
+
+const allTabResults = inspectionService.tabs
+
+const parameterKeyResults = computed(() => {
+  return (
+    allTabResults.value
+      .get(currentTabID.value)
+      .filter(
+        (result) =>
+          result.locations.type === "parameter" &&
+          result.locations.position === "key"
+      ) ?? []
+  )
+})
+const parameterValueResults = computed(() => {
+  return (
+    allTabResults.value
+      .get(currentTabID.value)
+      .filter(
+        (result) =>
+          result.locations.type === "parameter" &&
+          result.locations.position === "value"
+      ) ?? []
+  )
+})
+
+const getInspectorResult = (results: InspectorResult[], index: number) => {
+  return results.filter((result) => {
+    if (result.locations.type === "url" || result.locations.type === "response")
+      return
+    return result.locations.index === index
+  })
+}
 </script>

packages/hoppscotch-common/src/components/http/Request.vue

@@ -53,9 +53,16 @@
           v-model="tab.document.request.endpoint"
           :placeholder="`${t('request.url')}`"
           :auto-complete-source="userHistories"
+          :inspection-results="tabResults"
           @paste="onPasteUrl($event)"
           @enter="newSendRequest"
-        />
+        >
+          <template #empty>
+            <span>
+              {{ t("empty.history_suggestions") }}
+            </span>
+          </template>
+        </SmartEnvInput>
       </div>
     </div>
     <div class="flex mt-2 sm:mt-0">
@@ -259,12 +266,14 @@ import IconLink2 from "~icons/lucide/link-2"
 import IconRotateCCW from "~icons/lucide/rotate-ccw"
 import IconSave from "~icons/lucide/save"
 import IconShare2 from "~icons/lucide/share-2"
-import { HoppRESTTab } from "~/helpers/rest/tab"
+import { HoppRESTTab, currentTabID } from "~/helpers/rest/tab"
 import { getDefaultRESTRequest } from "~/helpers/rest/default"
 import { RESTHistoryEntry, restHistory$ } from "~/newstore/history"
 import { platform } from "~/platform"
 import { getCurrentStrategyID } from "~/helpers/network"
 import { HoppGQLRequest, HoppRESTRequest } from "@hoppscotch/data"
+import { useService } from "dioc/vue"
+import { InspectionService } from "~/services/inspection"
 
 const t = useI18n()
 
@@ -628,4 +637,12 @@ const isCustomMethod = computed(() => {
 })
 
 const COLUMN_LAYOUT = useSetting("COLUMN_LAYOUT")
+
+const inspectionService = useService(InspectionService)
+
+const allTabResults = inspectionService.tabs
+
+const tabResults = computed(() => {
+  return allTabResults.value.get(currentTabID.value) ?? []
+})
 </script>

packages/hoppscotch-common/src/components/http/Response.vue

@@ -1,5 +1,5 @@
 <template>
-  <div class="flex flex-col flex-1">
+  <div class="flex flex-col flex-1 relative">
     <HttpResponseMeta :response="tab.response" />
     <LensesResponseBodyRenderer
       v-if="!loading && hasResponse"

packages/hoppscotch-common/src/components/http/ResponseMeta.vue

@@ -1,6 +1,6 @@
 <template>
   <div
-    class="sticky top-0 z-10 flex items-start justify-center flex-shrink-0 p-4 overflow-auto overflow-x-auto bg-primary whitespace-nowrap"
+    class="sticky top-0 z-10 flex items-center justify-center flex-shrink-0 p-4 overflow-auto overflow-x-auto bg-primary whitespace-nowrap"
   >
     <AppShortcutsPrompt v-if="response == null" class="flex-1" />
     <div v-else class="flex flex-col flex-1">
@@ -70,6 +70,15 @@
         </div>
       </div>
     </div>
+    <AppInspection
+      v-if="response?.type !== 'loading'"
+      :inspection-results="tabResults"
+      :class="[
+        response === null || response?.type === 'network_fail'
+          ? 'absolute right-2 top-2'
+          : 'ml-2 -m-2',
+      ]"
+    />
   </div>
 </template>
 
@@ -80,6 +89,9 @@ import type { HoppRESTResponse } from "~/helpers/types/HoppRESTResponse"
 import { useI18n } from "@composables/i18n"
 import { useColorMode } from "@composables/theming"
 import { getStatusCodeReasonPhrase } from "~/helpers/utils/statusCodes"
+import { useService } from "dioc/vue"
+import { InspectionService } from "~/services/inspection"
+import { currentTabID } from "~/helpers/rest/tab"
 
 const t = useI18n()
 const colorMode = useColorMode()
@@ -128,4 +140,16 @@ const statusCategory = computed(() => {
     }
   return findStatusGroup(props.response.statusCode)
 })
+
+const inspectionService = useService(InspectionService)
+
+const allTabResults = inspectionService.tabs
+
+const tabResults = computed(() => {
+  return (
+    allTabResults.value
+      .get(currentTabID.value)
+      ?.filter((result) => result.locations.type === "response") ?? []
+  )
+})
 </script>