feat: configure interceptor when request fail

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

@@ -0,0 +1,55 @@
+<template>
+  <div class="flex p-4 space-y-4 items-start flex-col">
+    <SmartToggle
+      :on="PROXY_ENABLED"
+      @change="toggleSettingKey('PROXY_ENABLED')"
+    >
+      {{ $t("settings.proxy") }}
+    </SmartToggle>
+    <SmartToggle
+      :on="EXTENSIONS_ENABLED"
+      @change="toggleSettingKey('EXTENSIONS_ENABLED')"
+    >
+      {{ $t("settings.extensions") }}:
+      {{
+        extensionVersion != null
+          ? `v${extensionVersion.major}.${extensionVersion.minor}`
+          : $t("settings.extension_ver_not_reported")
+      }}
+    </SmartToggle>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { defineComponent } from "@nuxtjs/composition-api"
+import { KeysMatching } from "~/types/ts-utils"
+import { SettingsType, toggleSetting, useSetting } from "~/newstore/settings"
+import { hasExtensionInstalled } from "~/helpers/strategies/ExtensionStrategy"
+
+const PROXY_ENABLED = useSetting("PROXY_ENABLED")
+const EXTENSIONS_ENABLED = useSetting("EXTENSIONS_ENABLED")
+
+const toggleSettingKey = <K extends KeysMatching<SettingsType, boolean>>(
+  key: K
+) => {
+  if (key === "EXTENSIONS_ENABLED" && PROXY_ENABLED.value) {
+    toggleSetting("PROXY_ENABLED")
+  }
+  if (key === "PROXY_ENABLED" && EXTENSIONS_ENABLED.value) {
+    toggleSetting("EXTENSIONS_ENABLED")
+  }
+  toggleSetting(key)
+}
+</script>
+
+<script lang="ts">
+export default defineComponent({
+  data() {
+    return {
+      extensionVersion: hasExtensionInstalled()
+        ? window.__POSTWOMAN_EXTENSION_HOOK__.getVersion()
+        : null,
+    }
+  },
+})
+</script>

packages/hoppscotch-app/components/http/ResponseMeta.vue

@@ -60,13 +60,7 @@
       </div>
       <div
         v-if="response.type === 'network_fail'"
-        class="
+        class="flex flex-col flex-1 p-4 items-center justify-center"
-          flex flex-col flex-1
-          text-secondaryLight
-          p-4
-          items-center
-          justify-center
-        "
       >
         <img
           :src="`/images/states/${$colorMode.value}/youre_lost.svg`"
@@ -81,21 +75,13 @@
           "
           :alt="$t('empty.network_fail')"
         />
-        <span class="text-center mb-2">
+        <span class="text-center font-semibold mb-2">
           {{ $t("error.network_fail") }}
         </span>
-        <span class="text-center mb-4 max-w-sm">
+        <span class="text-center text-secondaryLight mb-4 max-w-sm">
           {{ $t("helpers.network_fail") }}
         </span>
-        <ButtonSecondary
+        <AppInterceptor />
-          outline
-          :label="$t('action.learn_more')"
-          to="https://docs.hoppscotch.io"
-          blank
-          svg="external-link"
-          reverse
-          class="my-4"
-        />
       </div>
       <div
         v-if="response.type === 'success' || 'fail'"

packages/hoppscotch-app/locales/en.json

@@ -203,7 +203,7 @@
   "helpers": {
     "authorization": "The authorization header will be automatically generated when you send the request.",
     "generate_documentation_first": "Generate documentation first",
-    "network_fail": "Unable to reach the API endpoint. Check your network connection and try again.",
+    "network_fail": "Unable to reach the API endpoint. Check your network connection or turn on Proxy Interceptor and try again.",
     "offline": "You seem to be offline. Data in this workspace might not be up to date.",
     "offline_short": "You seem to be offline.",
     "post_request_tests": "Test scripts are written in JavaScript, and are run after the response is received.",
@@ -339,7 +339,7 @@
     "experiments_notice": "This is a collection of experiments we're working on that might turn out to be useful, fun, both, or neither. They're not final and may not be stable, so if something overly weird happens, don't panic. Just turn the dang thing off. Jokes aside, ",
     "extension_ver_not_reported": "Not Reported",
     "extension_version": "Extension Version",
-    "extensions": "Extensions",
+    "extensions": "Browser extensions",
     "extensions_use_toggle": "Use the browser extension to send requests (if present)",
     "font_size": "Font size",
     "font_size_large": "Large",