From f228f37bb855e71dcad02bd71336b25a4caaada5 Mon Sep 17 00:00:00 2001
From: liyasthomas <liyascthomas@gmail.com>
Date: Sat, 13 Nov 2021 08:37:43 +0530
Subject: [PATCH] feat: configure interceptor when request fail

---
 .../components/app/Interceptor.vue            | 55 +++++++++++++++++++
 .../components/http/ResponseMeta.vue          | 22 ++------
 packages/hoppscotch-app/locales/en.json       |  4 +-
 3 files changed, 61 insertions(+), 20 deletions(-)
 create mode 100644 packages/hoppscotch-app/components/app/Interceptor.vue

diff --git a/packages/hoppscotch-app/components/app/Interceptor.vue b/packages/hoppscotch-app/components/app/Interceptor.vue
new file mode 100644
index 00000000..78d5e737
--- /dev/null
+++ b/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>
diff --git a/packages/hoppscotch-app/components/http/ResponseMeta.vue b/packages/hoppscotch-app/components/http/ResponseMeta.vue
index 9c762ef8..d213251d 100644
--- a/packages/hoppscotch-app/components/http/ResponseMeta.vue
+++ b/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'"
diff --git a/packages/hoppscotch-app/locales/en.json b/packages/hoppscotch-app/locales/en.json
index 533cf8a4..1e1c9836 100644
--- a/packages/hoppscotch-app/locales/en.json
+++ b/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",