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="
-          flex flex-col flex-1
-          text-secondaryLight
-          p-4
-          items-center
-          justify-center
-        "
+        class="flex flex-col flex-1 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
-          outline
-          :label="$t('action.learn_more')"
-          to="https://docs.hoppscotch.io"
-          blank
-          svg="external-link"
-          reverse
-          class="my-4"
-        />
+        <AppInterceptor />
       </div>
       <div
         v-if="response.type === 'success' || 'fail'"