Prettify for RAW responses

components/lenses/renderers/JSONLensRenderer.vue

@@ -17,15 +17,6 @@
               {{ !expandResponse ? "unfold_more" : "unfold_less" }}
             </i>
           </button>
-          <button
-            class="icon"
-            ref="prettifyResponse"
-            @click="prettifyResponseBody"
-            v-tooltip="$t('prettify_body')"
-            v-if="response.body && this.responseType.endsWith('json')"
-          >
-            <i class="material-icons">photo_filter</i>
-          </button>
           <button
             class="icon"
             @click="downloadResponse"
@@ -85,26 +76,29 @@ export default {
     }
   },
   computed: {
-    responseBodyText: {
+    responseBodyText() {
-      get: function () {
+      try {
-        try {
+        return JSON.stringify(
-          return JSON.stringify(
+          JSON.parse(new TextDecoder("utf-8").decode(new Uint8Array(this.response.body))),
-            JSON.parse(new TextDecoder("utf-8").decode(new Uint8Array(this.response.body))),
+          null,
-            null,
+          2
-            2
+        )
-          )
+      } catch (e) {
-        } catch (e) {
+        // Most probs invalid JSON was returned, so drop prettification (should we warn ?)
-          // Most probs invalid JSON was returned, so drop prettification (should we warn ?)
+        return new TextDecoder("utf-8").decode(new Uint8Array(this.response.body))
-          return new TextDecoder("utf-8").decode(new Uint8Array(this.response.body))
+      }
-        }
-      },
-      set: function (newValue) {
-        return newValue
-      },
     },
     responseType() {
       return (this.response.headers["content-type"] || "").split(";")[0].toLowerCase()
     },
+    canDownloadResponse() {
+      return (
+        this.response &&
+        this.response.headers &&
+        this.response.headers["content-type"] &&
+        isJSONContentType(this.response.headers["content-type"])
+      )
+    },
   },
   methods: {
     ToggleExpandResponse() {
@@ -131,14 +125,6 @@ export default {
         this.$refs.downloadResponse.innerHTML = this.downloadButton
       }, 1000)
     },
-    canDownloadResponse() {
-      return (
-        this.response &&
-        this.response.headers &&
-        this.response.headers["content-type"] &&
-        isJSONContentType(this.response.headers["content-type"])
-      )
-    },
     copyResponse() {
       this.$refs.copyResponse.innerHTML = this.doneButton
       this.$toast.success(this.$t("copied_to_clipboard"), {
@@ -153,19 +139,6 @@ export default {
       document.body.removeChild(aux)
       setTimeout(() => (this.$refs.copyResponse.innerHTML = this.copyButton), 1000)
     },
-    prettifyResponseBody() {
-      try {
-        const jsonObj = JSON.parse(this.responseBodyText)
-        this.responseBodyText = JSON.stringify(jsonObj, null, 2)
-        let oldIcon = this.$refs.prettifyResponse.innerHTML
-        this.$refs.prettifyResponse.innerHTML = this.doneButton
-        setTimeout(() => (this.$refs.prettifyResponse.innerHTML = oldIcon), 1000)
-      } catch (e) {
-        this.$toast.error(`${this.$t("json_prettify_invalid_body")}`, {
-          icon: "error",
-        })
-      }
-    },
   },
 }
 </script>

components/lenses/renderers/RawLensRenderer.vue

@@ -17,6 +17,15 @@
               {{ !expandResponse ? "unfold_more" : "unfold_less" }}
             </i>
           </button>
+          <button
+            class="icon"
+            ref="prettifyResponse"
+            @click="prettifyResponseBody"
+            v-tooltip="$t('prettify_body')"
+            v-if="response.body && this.responseType.endsWith('json')"
+          >
+            <i class="material-icons">photo_filter</i>
+          </button>
           <button
             class="icon"
             @click="downloadResponse"
@@ -73,15 +82,21 @@ export default {
       doneButton: '<i class="material-icons">done</i>',
       downloadButton: '<i class="material-icons">save_alt</i>',
       copyButton: '<i class="material-icons">content_copy</i>',
+      responseBodyText: new TextDecoder("utf-8").decode(new Uint8Array(this.response.body)),
     }
   },
   computed: {
-    responseBodyText() {
-      return new TextDecoder("utf-8").decode(new Uint8Array(this.response.body))
-    },
     responseType() {
       return (this.response.headers["content-type"] || "").split(";")[0].toLowerCase()
     },
+    canDownloadResponse() {
+      return (
+        this.response &&
+        this.response.headers &&
+        this.response.headers["content-type"] &&
+        isJSONContentType(this.response.headers["content-type"])
+      )
+    },
   },
   methods: {
     ToggleExpandResponse() {
@@ -108,14 +123,6 @@ export default {
         this.$refs.downloadResponse.innerHTML = this.downloadButton
       }, 1000)
     },
-    canDownloadResponse() {
-      return (
-        this.response &&
-        this.response.headers &&
-        this.response.headers["content-type"] &&
-        isJSONContentType(this.response.headers["content-type"])
-      )
-    },
     copyResponse() {
       this.$refs.copyResponse.innerHTML = this.doneButton
       this.$toast.success(this.$t("copied_to_clipboard"), {
@@ -130,6 +137,19 @@ export default {
       document.body.removeChild(aux)
       setTimeout(() => (this.$refs.copyResponse.innerHTML = this.copyButton), 1000)
     },
+    prettifyResponseBody() {
+      try {
+        const jsonObj = JSON.parse(this.responseBodyText)
+        this.responseBodyText = JSON.stringify(jsonObj, null, 2)
+        let oldIcon = this.$refs.prettifyResponse.innerHTML
+        this.$refs.prettifyResponse.innerHTML = this.doneButton
+        setTimeout(() => (this.$refs.prettifyResponse.innerHTML = oldIcon), 1000)
+      } catch (e) {
+        this.$toast.error(`${this.$t("json_prettify_invalid_body")}`, {
+          icon: "error",
+        })
+      }
+    },
   },
 }
 </script>