From 872ba2d48e15420d129d73d5e5793c8870c907b2 Mon Sep 17 00:00:00 2001
From: liyasthomas <liyascthomas@gmail.com>
Date: Sun, 15 Aug 2021 11:57:20 +0530
Subject: [PATCH] fix: catch network failed error and show prompt in response
 section

---
 components/http/ResponseMeta.vue              | 38 ++++++++++++++++---
 .../lenses/renderers/HTMLLensRenderer.vue     |  2 +-
 lang/en-US.json                               |  6 ++-
 3 files changed, 37 insertions(+), 9 deletions(-)

diff --git a/components/http/ResponseMeta.vue b/components/http/ResponseMeta.vue
index 9c6a1aaf9..6208ff3e1 100644
--- a/components/http/ResponseMeta.vue
+++ b/components/http/ResponseMeta.vue
@@ -50,12 +50,38 @@
         reverse
       />
     </div>
-    <div v-else>
-      <i v-if="response.type === 'loading'" class="animate-spin material-icons">
-        refresh
-      </i>
+    <div v-else class="flex flex-col flex-1">
+      <div v-if="response.type === 'loading'">
+        <i class="animate-spin material-icons"> refresh </i>
+      </div>
       <div
-        v-else
+        v-if="response.type === 'network_fail'"
+        class="
+          flex flex-col flex-1
+          text-secondaryLight
+          p-4
+          items-center
+          justify-center
+        "
+      >
+        <i class="opacity-75 pb-2 material-icons">cloud_off</i>
+        <span class="text-center pb-2">
+          {{ $t("error.network_fail") }}
+        </span>
+        <span class="text-center pb-4">
+          {{ $t("helpers.network_fail") }}
+        </span>
+        <ButtonSecondary
+          outline
+          :label="$t('action.learn_more')"
+          to="https://docs.hoppscotch.io"
+          blank
+          icon="open_in_new"
+          reverse
+        />
+      </div>
+      <div
+        v-if="response.type === 'success' || 'fail'"
         :class="statusCategory.className"
         class="font-semibold space-x-4"
       >
@@ -84,7 +110,7 @@ export default {
   props: {
     response: {
       type: Object,
-      default: () => {},
+      default: () => null,
     },
   },
   computed: {
diff --git a/components/lenses/renderers/HTMLLensRenderer.vue b/components/lenses/renderers/HTMLLensRenderer.vue
index fe7d1cdb8..16b2f6149 100644
--- a/components/lenses/renderers/HTMLLensRenderer.vue
+++ b/components/lenses/renderers/HTMLLensRenderer.vue
@@ -141,7 +141,7 @@ export default {
 .covers-response {
   @apply absolute;
   @apply inset-0;
-  @apply bg-primary;
+  @apply bg-white;
   @apply h-full;
   @apply w-full;
   @apply border;
diff --git a/lang/en-US.json b/lang/en-US.json
index d16dd7d56..cb5334492 100644
--- a/lang/en-US.json
+++ b/lang/en-US.json
@@ -250,7 +250,8 @@
   },
   "error": {
     "something_went_wrong": "Something went wrong",
-    "check_console_details": "Check console log for details."
+    "check_console_details": "Check console log for details.",
+    "network_fail": "Could not send request"
   },
   "helpers": {
     "authorization": "The authorization header will be automatically generated when you send the request.",
@@ -258,7 +259,8 @@
     "post_request_tests": "Test scripts are written in JavaScript, and are run after the response is received.",
     "offline_short": "You seem to be offline.",
     "offline": "You seem to be offline. Data in this workspace might not be up to date.",
-    "tests": "Write a test script to automate debugging"
+    "tests": "Write a test script to automate debugging.",
+    "network_fail": "Unable to reach the API endpoint. Check your network connection and try again."
   },
   "options": "Options",
   "communication": "Communication",