From d81306ac1a20654b1aa47e40911340ab6d130f15 Mon Sep 17 00:00:00 2001
From: Liyas Thomas <liyascthomas@gmail.com>
Date: Mon, 22 Jun 2020 12:49:17 +0530
Subject: [PATCH] Actions for HTML responses

---
 .../lenses/renderers/HTMLLensRenderer.vue     | 165 ++++++++++++++++--
 pages/index.vue                               |  46 ++---
 2 files changed, 175 insertions(+), 36 deletions(-)

diff --git a/components/lenses/renderers/HTMLLensRenderer.vue b/components/lenses/renderers/HTMLLensRenderer.vue
index c311b0450..dc050b0a7 100644
--- a/components/lenses/renderers/HTMLLensRenderer.vue
+++ b/components/lenses/renderers/HTMLLensRenderer.vue
@@ -1,19 +1,75 @@
 <template>
   <ul>
     <li>
-      <Editor
-        :value="responseBodyText"
-        :lang="'html'"
-        :options="{
-          maxLines: 16,
-          minLines: '16',
-          fontSize: '16px',
-          autoScrollEditorIntoView: true,
-          readOnly: true,
-          showPrintMargin: false,
-          useWorker: false,
-        }"
-      />
+      <div class="flex-wrap">
+        <label for="body">{{ $t("response") }}</label>
+        <div>
+          <button
+            class="icon"
+            @click="ToggleExpandResponse"
+            ref="ToggleExpandResponse"
+            v-if="response.body"
+            v-tooltip="{
+              content: !expandResponse ? $t('expand_response') : $t('collapse_response'),
+            }"
+          >
+            <i class="material-icons">
+              {{ !expandResponse ? "unfold_more" : "unfold_less" }}
+            </i>
+          </button>
+          <button
+            v-if="response.body && responseType === 'text/html'"
+            class="icon"
+            @click.prevent="togglePreview"
+            v-tooltip="{
+              content: previewEnabled ? $t('hide_preview') : $t('preview_html'),
+            }"
+          >
+            <i class="material-icons">
+              {{ !previewEnabled ? "visibility" : "visibility_off" }}
+            </i>
+          </button>
+          <button
+            class="icon"
+            @click="downloadResponse"
+            ref="downloadResponse"
+            v-if="response.body && canDownloadResponse"
+            v-tooltip="$t('download_file')"
+          >
+            <i class="material-icons">save_alt</i>
+          </button>
+          <button
+            class="icon"
+            @click="copyResponse"
+            ref="copyResponse"
+            v-if="response.body"
+            v-tooltip="$t('copy_response')"
+          >
+            <i class="material-icons">content_copy</i>
+          </button>
+        </div>
+      </div>
+      <div id="response-details-wrapper">
+        <Editor
+          :value="responseBodyText"
+          :lang="'html'"
+          :options="{
+            maxLines: responseBodyMaxLines,
+            minLines: '16',
+            fontSize: '16px',
+            autoScrollEditorIntoView: true,
+            readOnly: true,
+            showPrintMargin: false,
+            useWorker: false,
+          }"
+        />
+        <iframe
+          :class="{ hidden: !previewEnabled }"
+          class="covers-response"
+          ref="previewFrame"
+          src="about:blank"
+        ></iframe>
+      </div>
     </li>
   </ul>
 </template>
@@ -27,10 +83,93 @@ export default {
   props: {
     response: {},
   },
+  data() {
+    return {
+      expandResponse: false,
+      responseBodyMaxLines: 16,
+      doneButton: '<i class="material-icons">done</i>',
+      downloadButton: '<i class="material-icons">save_alt</i>',
+      copyButton: '<i class="material-icons">content_copy</i>',
+      previewEnabled: false,
+    }
+  },
   computed: {
     responseBodyText() {
       return new TextDecoder("utf-8").decode(this.response.body)
     },
+    responseType() {
+      return (this.response.headers["content-type"] || "").split(";")[0].toLowerCase()
+    },
+  },
+  methods: {
+    ToggleExpandResponse() {
+      this.expandResponse = !this.expandResponse
+      this.responseBodyMaxLines = this.responseBodyMaxLines == Infinity ? 16 : Infinity
+    },
+    downloadResponse() {
+      const dataToWrite = this.responseBodyText
+      const file = new Blob([dataToWrite], { type: this.responseType })
+      const a = document.createElement("a")
+      const url = URL.createObjectURL(file)
+      a.href = url
+      // TODO get uri from meta
+      a.download = `response on ${Date()}`.replace(/\./g, "[dot]")
+      document.body.appendChild(a)
+      a.click()
+      this.$refs.downloadResponse.innerHTML = this.doneButton
+      this.$toast.success(this.$t("download_started"), {
+        icon: "done",
+      })
+      setTimeout(() => {
+        document.body.removeChild(a)
+        window.URL.revokeObjectURL(url)
+        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"), {
+        icon: "done",
+      })
+      const aux = document.createElement("textarea")
+      const copy = this.responseBodyText
+      aux.innerText = copy
+      document.body.appendChild(aux)
+      aux.select()
+      document.execCommand("copy")
+      document.body.removeChild(aux)
+      setTimeout(() => (this.$refs.copyResponse.innerHTML = this.copyButton), 1000)
+    },
+    togglePreview() {
+      this.previewEnabled = !this.previewEnabled
+      if (this.previewEnabled) {
+        // If you want to add 'preview' support for other response types,
+        // just add them here.
+        if (this.responseType === "text/html") {
+          // If the preview already has that URL loaded, let's not bother re-loading it all.
+          if (this.$refs.previewFrame.getAttribute("data-previewing-url") === this.url) return
+          // Use DOMParser to parse document HTML.
+          const previewDocument = new DOMParser().parseFromString(
+            this.responseBodyText,
+            this.responseType
+          )
+          // Inject <base href="..."> tag to head, to fix relative CSS/HTML paths.
+          previewDocument.head.innerHTML =
+            `<base href="${this.url}">` + previewDocument.head.innerHTML
+          // Finally, set the iframe source to the resulting HTML.
+          this.$refs.previewFrame.srcdoc = previewDocument.documentElement.outerHTML
+          this.$refs.previewFrame.setAttribute("data-previewing-url", this.url)
+        }
+      }
+    },
   },
 }
 </script>
diff --git a/pages/index.vue b/pages/index.vue
index 395b56fa1..c03949fec 100644
--- a/pages/index.vue
+++ b/pages/index.vue
@@ -1451,7 +1451,7 @@ export default {
         body: "",
       },
       validContentTypes: knownContentTypes,
-      previewEnabled: false,
+      // previewEnabled: false,
       paramsWatchEnabled: true,
       // expandResponse: false,
       showTokenList: false,
@@ -2518,28 +2518,28 @@ export default {
     //     this.$refs.downloadResponse.innerHTML = this.downloadButton
     //   }, 1000)
     // },
-    togglePreview() {
-      this.previewEnabled = !this.previewEnabled
-      if (this.previewEnabled) {
-        // If you want to add 'preview' support for other response types,
-        // just add them here.
-        if (this.responseType === "text/html") {
-          // If the preview already has that URL loaded, let's not bother re-loading it all.
-          if (this.$refs.previewFrame.getAttribute("data-previewing-url") === this.url) return
-          // Use DOMParser to parse document HTML.
-          const previewDocument = new DOMParser().parseFromString(
-            this.response.body,
-            this.responseType
-          )
-          // Inject <base href="..."> tag to head, to fix relative CSS/HTML paths.
-          previewDocument.head.innerHTML =
-            `<base href="${this.url}">` + previewDocument.head.innerHTML
-          // Finally, set the iframe source to the resulting HTML.
-          this.$refs.previewFrame.srcdoc = previewDocument.documentElement.outerHTML
-          this.$refs.previewFrame.setAttribute("data-previewing-url", this.url)
-        }
-      }
-    },
+    // togglePreview() {
+    //   this.previewEnabled = !this.previewEnabled
+    //   if (this.previewEnabled) {
+    //     // If you want to add 'preview' support for other response types,
+    //     // just add them here.
+    //     if (this.responseType === "text/html") {
+    //       // If the preview already has that URL loaded, let's not bother re-loading it all.
+    //       if (this.$refs.previewFrame.getAttribute("data-previewing-url") === this.url) return
+    //       // Use DOMParser to parse document HTML.
+    //       const previewDocument = new DOMParser().parseFromString(
+    //         this.response.body,
+    //         this.responseType
+    //       )
+    //       // Inject <base href="..."> tag to head, to fix relative CSS/HTML paths.
+    //       previewDocument.head.innerHTML =
+    //         `<base href="${this.url}">` + previewDocument.head.innerHTML
+    //       // Finally, set the iframe source to the resulting HTML.
+    //       this.$refs.previewFrame.srcdoc = previewDocument.documentElement.outerHTML
+    //       this.$refs.previewFrame.setAttribute("data-previewing-url", this.url)
+    //     }
+    //   }
+    // },
     setRouteQueryState() {
       const flat = (key) => (this[key] !== "" ? `${key}=${this[key]}&` : "")
       const deep = (key) => {