refactor: move from network strategies to generic interceptor service (#3242)

packages/hoppscotch-common/src/components/app/Interceptor.vue

@@ -8,91 +8,41 @@
         {{ t("settings.interceptor_description") }}
       </p>
     </div>
-    <HoppSmartRadioGroup
-      v-model="interceptorSelection"
-      :radios="interceptors"
-    />
-    <div
-      v-if="interceptorSelection == 'EXTENSIONS_ENABLED' && !extensionVersion"
-      class="flex space-x-2"
-    >
-      <HoppButtonSecondary
-        to="https://chrome.google.com/webstore/detail/hoppscotch-browser-extens/amknoiejhlmhancpahfcfcfhllgkpbld"
-        blank
-        :icon="IconChrome"
-        label="Chrome"
-        outline
-        class="!flex-1"
-      />
-      <HoppButtonSecondary
-        to="https://addons.mozilla.org/en-US/firefox/addon/hoppscotch"
-        blank
-        :icon="IconFirefox"
-        label="Firefox"
-        outline
-        class="!flex-1"
-      />
+
+    <div>
+      <div
+        v-for="interceptor in interceptors"
+        :key="interceptor.interceptorID"
+        class="flex flex-col"
+      >
+        <HoppSmartRadio
+          :value="interceptor.interceptorID"
+          :label="unref(interceptor.name(t))"
+          :selected="interceptorSelection === interceptor.interceptorID"
+          @change="interceptorSelection = interceptor.interceptorID"
+        />
+
+        <component
+          :is="interceptor.selectorSubtitle"
+          v-if="interceptor.selectorSubtitle"
+        />
+      </div>
     </div>
   </div>
 </template>
 
 <script setup lang="ts">
-import IconChrome from "~icons/brands/chrome"
-import IconFirefox from "~icons/brands/firefox"
-import { computed } from "vue"
-import { applySetting, toggleSetting } from "~/newstore/settings"
-import { useSetting } from "@composables/settings"
 import { useI18n } from "@composables/i18n"
-import { useReadonlyStream } from "@composables/stream"
-import { extensionStatus$ } from "~/newstore/HoppExtension"
+import { useService } from "dioc/vue"
+import { Ref, unref } from "vue"
+import { InterceptorService } from "~/services/interceptor.service"
 
 const t = useI18n()
 
-const PROXY_ENABLED = useSetting("PROXY_ENABLED")
-const EXTENSIONS_ENABLED = useSetting("EXTENSIONS_ENABLED")
+const interceptorService = useService(InterceptorService)
 
-const currentExtensionStatus = useReadonlyStream(extensionStatus$, null)
+const interceptorSelection =
+  interceptorService.currentInterceptorID as Ref<string>
 
-const extensionVersion = computed(() => {
-  return currentExtensionStatus.value === "available"
-    ? window.__POSTWOMAN_EXTENSION_HOOK__?.getVersion() ?? null
-    : null
-})
-
-const interceptors = computed(() => [
-  { value: "BROWSER_ENABLED" as const, label: t("state.none") },
-  { value: "PROXY_ENABLED" as const, label: t("settings.proxy") },
-  {
-    value: "EXTENSIONS_ENABLED" as const,
-    label:
-      `${t("settings.extensions")}: ` +
-      (extensionVersion.value !== null
-        ? `v${extensionVersion.value.major}.${extensionVersion.value.minor}`
-        : t("settings.extension_ver_not_reported")),
-  },
-])
-
-type InterceptorMode = (typeof interceptors)["value"][number]["value"]
-
-const interceptorSelection = computed<InterceptorMode>({
-  get() {
-    if (PROXY_ENABLED.value) return "PROXY_ENABLED"
-    if (EXTENSIONS_ENABLED.value) return "EXTENSIONS_ENABLED"
-    return "BROWSER_ENABLED"
-  },
-  set(val) {
-    if (val === "EXTENSIONS_ENABLED") {
-      applySetting("EXTENSIONS_ENABLED", true)
-      if (PROXY_ENABLED.value) toggleSetting("PROXY_ENABLED")
-    }
-    if (val === "PROXY_ENABLED") {
-      applySetting("PROXY_ENABLED", true)
-      if (EXTENSIONS_ENABLED.value) toggleSetting("EXTENSIONS_ENABLED")
-    }
-    if (val === "BROWSER_ENABLED") {
-      applySetting("PROXY_ENABLED", false)
-      applySetting("EXTENSIONS_ENABLED", false)
-    }
-  },
-})
+const interceptors = interceptorService.availableInterceptors
 </script>

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

@@ -29,7 +29,6 @@
 <script setup lang="ts">
 import { platform } from "~/platform"
 import { GQLConnection } from "~/helpers/GQLConnection"
-import { getCurrentStrategyID } from "~/helpers/network"
 import { useReadonlyStream, useStream } from "@composables/stream"
 import { useI18n } from "@composables/i18n"
 import {
@@ -38,9 +37,13 @@ import {
   gqlURL$,
   setGQLURL,
 } from "~/newstore/GQLSession"
+import { useService } from "dioc/vue"
+import { InterceptorService } from "~/services/interceptor.service"
 
 const t = useI18n()
 
+const interceptorService = useService(InterceptorService)
+
 const props = defineProps<{
   conn: GQLConnection
 }>()
@@ -62,7 +65,7 @@ const onConnectClick = () => {
     platform.analytics?.logEvent({
       type: "HOPP_REQUEST_RUN",
       platform: "graphql-schema",
-      strategy: getCurrentStrategyID(),
+      strategy: interceptorService.currentInterceptorID.value!,
     })
   } else {
     props.conn.disconnect()

packages/hoppscotch-common/src/components/graphql/RequestOptions.vue

@@ -373,7 +373,6 @@ import { commonHeaders } from "~/helpers/headers"
 import { GQLConnection } from "~/helpers/GQLConnection"
 import { makeGQLHistoryEntry, addGraphqlHistoryEntry } from "~/newstore/history"
 import { platform } from "~/platform"
-import { getCurrentStrategyID } from "~/helpers/network"
 import { useCodemirror } from "@composables/codemirror"
 import jsonLinter from "~/helpers/editor/linting/json"
 import { createGQLQueryLinter } from "~/helpers/editor/linting/gqlQuery"
@@ -381,6 +380,8 @@ import queryCompleter from "~/helpers/editor/completion/gqlQuery"
 import { defineActionHandler } from "~/helpers/actions"
 import { getPlatformSpecialKey as getSpecialKey } from "~/helpers/platformutils"
 import { objRemoveKey } from "~/helpers/functional/object"
+import { useService } from "dioc/vue"
+import { InterceptorService } from "~/services/interceptor.service"
 
 type OptionTabs = "query" | "headers" | "variables" | "authorization"
 
@@ -390,6 +391,8 @@ const selectedOptionTab = ref<OptionTabs>("query")
 
 const t = useI18n()
 
+const interceptorService = useService(InterceptorService)
+
 const props = defineProps<{
   conn: GQLConnection
 }>()
@@ -744,7 +747,7 @@ const runQuery = async () => {
   platform.analytics?.logEvent({
     type: "HOPP_REQUEST_RUN",
     platform: "graphql-query",
-    strategy: getCurrentStrategyID(),
+    strategy: interceptorService.currentInterceptorID.value!,
   })
 }
 

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

@@ -241,17 +241,12 @@ import { useReadonlyStream, useStreamSubscriber } from "@composables/stream"
 import { useToast } from "@composables/toast"
 import { refAutoReset, useVModel } from "@vueuse/core"
 import * as E from "fp-ts/Either"
-import { isLeft, isRight } from "fp-ts/lib/Either"
-import { computed, onBeforeUnmount, ref } from "vue"
+import { Ref, computed, onBeforeUnmount, ref } from "vue"
 import { defineActionHandler } from "~/helpers/actions"
 import { runMutation } from "~/helpers/backend/GQLClient"
 import { UpdateRequestDocument } from "~/helpers/backend/graphql"
 import { createShortcode } from "~/helpers/backend/mutations/Shortcode"
 import { getPlatformSpecialKey as getSpecialKey } from "~/helpers/platformutils"
-import {
-  cancelRunningExtensionRequest,
-  hasExtensionInstalled,
-} from "~/helpers/strategies/ExtensionStrategy"
 import { runRESTRequest$ } from "~/helpers/RequestRunner"
 import { HoppRESTResponse } from "~/helpers/types/HoppRESTResponse"
 import { copyToClipboard } from "~/helpers/utils/clipboard"
@@ -270,12 +265,13 @@ 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"
+import { InterceptorService } from "~/services/interceptor.service"
 
 const t = useI18n()
+const interceptorService = useService(InterceptorService)
 
 const methods = [
   "GET",
@@ -328,6 +324,8 @@ const saveRequestAction = ref<any | null>(null)
 
 const history = useReadonlyStream<RESTHistoryEntry[]>(restHistory$, [])
 
+const requestCancelFunc: Ref<(() => void) | null> = ref(null)
+
 const userHistories = computed(() => {
   return history.value.map((history) => history.request.endpoint).slice(0, 10)
 })
@@ -346,13 +344,15 @@ const newSendRequest = async () => {
   platform.analytics?.logEvent({
     type: "HOPP_REQUEST_RUN",
     platform: "rest",
-    strategy: getCurrentStrategyID(),
+    strategy: interceptorService.currentInterceptorID.value!,
   })
 
-  // Double calling is because the function returns a TaskEither than should be executed
-  const streamResult = await runRESTRequest$(tab)()
+  const [cancel, streamPromise] = runRESTRequest$(tab)
+  const streamResult = await streamPromise
 
-  if (isRight(streamResult)) {
+  requestCancelFunc.value = cancel
+
+  if (E.isRight(streamResult)) {
     subscribeToStream(
       streamResult.right,
       (responseState) => {
@@ -369,7 +369,7 @@ const newSendRequest = async () => {
         loading.value = false
       }
     )
-  } else if (isLeft(streamResult)) {
+  } else {
     loading.value = false
     toast.error(`${t("error.script_fail")}`)
     let error: Error
@@ -419,9 +419,8 @@ function isCURL(curl: string) {
 
 const cancelRequest = () => {
   loading.value = false
-  if (hasExtensionInstalled()) {
-    cancelRunningExtensionRequest()
-  }
+  requestCancelFunc.value?.()
+
   updateRESTResponse(null)
 }
 

packages/hoppscotch-common/src/components/interceptors/ExtensionSubtitle.vue

@@ -0,0 +1,39 @@
+<template>
+  <div
+    v-if="
+      interceptorSelection === extensionService.interceptorID &&
+      extensionService.extensionStatus.value !== 'available'
+    "
+    class="flex space-x-2"
+  >
+    <HoppButtonSecondary
+      to="https://chrome.google.com/webstore/detail/hoppscotch-browser-extens/amknoiejhlmhancpahfcfcfhllgkpbld"
+      blank
+      :icon="IconChrome"
+      label="Chrome"
+      outline
+      class="!flex-1"
+    />
+    <HoppButtonSecondary
+      to="https://addons.mozilla.org/en-US/firefox/addon/hoppscotch"
+      blank
+      :icon="IconFirefox"
+      label="Firefox"
+      outline
+      class="!flex-1"
+    />
+  </div>
+</template>
+
+<script setup lang="ts">
+import IconChrome from "~icons/brands/chrome"
+import IconFirefox from "~icons/brands/firefox"
+import { InterceptorService } from "~/services/interceptor.service"
+import { useService } from "dioc/vue"
+import { ExtensionInterceptorService } from "~/platform/std/interceptors/extension"
+
+const interceptorService = useService(InterceptorService)
+const extensionService = useService(ExtensionInterceptorService)
+
+const interceptorSelection = interceptorService.currentInterceptorID
+</script>

packages/hoppscotch-common/src/components/settings/Extension.vue

@@ -0,0 +1,88 @@
+<template>
+  <div class="my-1 text-secondaryLight">
+    <span v-if="extensionVersion != null">
+      {{
+        `${t("settings.extension_version")}: v${extensionVersion.major}.${
+          extensionVersion.minor
+        }`
+      }}
+    </span>
+    <span v-else>
+      {{ t("settings.extension_version") }}:
+      {{ t("settings.extension_ver_not_reported") }}
+    </span>
+  </div>
+  <div class="flex flex-col py-4 space-y-2">
+    <span>
+      <HoppSmartItem
+        to="https://chrome.google.com/webstore/detail/hoppscotch-browser-extens/amknoiejhlmhancpahfcfcfhllgkpbld"
+        blank
+        :icon="IconChrome"
+        label="Chrome"
+        :info-icon="hasChromeExtInstalled ? IconCheckCircle : null"
+        :active-info-icon="hasChromeExtInstalled"
+        outline
+      />
+    </span>
+    <span>
+      <HoppSmartItem
+        to="https://addons.mozilla.org/en-US/firefox/addon/hoppscotch"
+        blank
+        :icon="IconFirefox"
+        label="Firefox"
+        :info-icon="hasFirefoxExtInstalled ? IconCheckCircle : null"
+        :active-info-icon="hasFirefoxExtInstalled"
+        outline
+      />
+    </span>
+  </div>
+  <div class="py-4 space-y-4">
+    <div class="flex items-center">
+      <HoppSmartToggle
+        :on="extensionEnabled"
+        @change="extensionEnabled = !extensionEnabled"
+      >
+        {{ t("settings.extensions_use_toggle") }}
+      </HoppSmartToggle>
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import IconChrome from "~icons/brands/chrome"
+import IconFirefox from "~icons/brands/firefox"
+import IconCheckCircle from "~icons/lucide/check-circle"
+import { useI18n } from "@composables/i18n"
+import { ExtensionInterceptorService } from "~/platform/std/interceptors/extension"
+import { useService } from "dioc/vue"
+import { computed } from "vue"
+import { InterceptorService } from "~/services/interceptor.service"
+import { platform } from "~/platform"
+
+const t = useI18n()
+
+const interceptorService = useService(InterceptorService)
+const extensionService = useService(ExtensionInterceptorService)
+
+const extensionVersion = extensionService.extensionVersion
+const hasChromeExtInstalled = extensionService.chromeExtensionInstalled
+const hasFirefoxExtInstalled = extensionService.firefoxExtensionInstalled
+
+const extensionEnabled = computed({
+  get() {
+    return (
+      interceptorService.currentInterceptorID.value ===
+      extensionService.interceptorID
+    )
+  },
+  set(active) {
+    if (active) {
+      interceptorService.currentInterceptorID.value =
+        extensionService.interceptorID
+    } else {
+      interceptorService.currentInterceptorID.value =
+        platform.interceptors.default
+    }
+  },
+})
+</script>

packages/hoppscotch-common/src/components/settings/Proxy.vue

@@ -0,0 +1,94 @@
+<template>
+  <div class="my-1 text-secondaryLight">
+    {{ `${t("settings.official_proxy_hosting")} ${t("settings.read_the")}` }}
+    <HoppSmartAnchor
+      class="link"
+      to="https://docs.hoppscotch.io/support/privacy"
+      blank
+      :label="t('app.proxy_privacy_policy')"
+    />.
+  </div>
+  <div class="py-4 space-y-4">
+    <div class="flex items-center">
+      <HoppSmartToggle
+        :on="proxyEnabled"
+        @change="proxyEnabled = !proxyEnabled"
+      >
+        {{ t("settings.proxy_use_toggle") }}
+      </HoppSmartToggle>
+    </div>
+  </div>
+  <div class="flex items-center py-4 space-x-2">
+    <HoppSmartInput
+      v-model="PROXY_URL"
+      styles="flex-1"
+      placeholder=" "
+      input-styles="input floating-input"
+      :disabled="!proxyEnabled"
+    >
+      <template #label>
+        <label for="url">
+          {{ t("settings.proxy_url") }}
+        </label>
+      </template>
+    </HoppSmartInput>
+    <HoppButtonSecondary
+      v-tippy="{ theme: 'tooltip' }"
+      :title="t('settings.reset_default')"
+      :icon="clearIcon"
+      outline
+      class="rounded"
+      @click="resetProxy"
+    />
+  </div>
+</template>
+
+<script setup lang="ts">
+import { refAutoReset } from "@vueuse/core"
+import { useI18n } from "~/composables/i18n"
+import { useSetting } from "~/composables/settings"
+import IconRotateCCW from "~icons/lucide/rotate-ccw"
+import IconCheck from "~icons/lucide/check"
+import { useToast } from "~/composables/toast"
+import { computed } from "vue"
+import { useService } from "dioc/vue"
+import { InterceptorService } from "~/services/interceptor.service"
+import { proxyInterceptor } from "~/platform/std/interceptors/proxy"
+import { platform } from "~/platform"
+
+const t = useI18n()
+const toast = useToast()
+
+const interceptorService = useService(InterceptorService)
+
+const PROXY_URL = useSetting("PROXY_URL")
+
+const proxyEnabled = computed({
+  get() {
+    return (
+      interceptorService.currentInterceptorID.value ===
+      proxyInterceptor.interceptorID
+    )
+  },
+  set(active) {
+    if (active) {
+      interceptorService.currentInterceptorID.value =
+        proxyInterceptor.interceptorID
+    } else {
+      interceptorService.currentInterceptorID.value =
+        platform.interceptors.default
+    }
+  },
+})
+
+const clearIcon = refAutoReset<typeof IconRotateCCW | typeof IconCheck>(
+  IconRotateCCW,
+  1000
+)
+
+const resetProxy = () => {
+  PROXY_URL.value = "https://proxy.hoppscotch.io/"
+  clearIcon.value = IconCheck
+  toast.success(`${t("state.cleared")}`)
+}
+</script>