feat: persist HTML response preview preference (#4177)

Co-authored-by: jamesgeorge007 <25279263+jamesgeorge007@users.noreply.github.com>
Co-authored-by: nivedin <nivedinp@gmail.com>

packages/hoppscotch-common/src/components/http/ResponseMeta.vue

@@ -143,7 +143,8 @@ const readableResponseSize = computed(() => {
     props.response.type === "loading" ||
     props.response.type === "network_fail" ||
     props.response.type === "script_fail" ||
-    props.response.type === "fail"
+    props.response.type === "fail" ||
+    props.response.type === "extension_error"
   )
     return undefined
 
@@ -162,7 +163,8 @@ const statusCategory = computed(() => {
     props.response.type === "loading" ||
     props.response.type === "network_fail" ||
     props.response.type === "script_fail" ||
-    props.response.type === "fail"
+    props.response.type === "fail" ||
+    props.response.type === "extension_error"
   )
     return {
       name: "error",

packages/hoppscotch-common/src/components/lenses/renderers/HTMLLensRenderer.vue

@@ -8,7 +8,7 @@
       </label>
       <div class="flex">
         <HoppButtonSecondary
-          v-if="response.body"
+          v-if="response.body && !previewEnabled"
           v-tippy="{ theme: 'tooltip' }"
           :title="t('state.linewrap')"
           :class="{ '!text-accent': WRAP_LINES }"
@@ -22,7 +22,7 @@
             previewEnabled ? t('hide.preview') : t('response.preview_html')
           } <kbd>${getSpecialKey()}</kbd><kbd>Shift</kbd><kbd>P</kbd>`"
           :icon="!previewEnabled ? IconEye : IconEyeOff"
-          @click.prevent="togglePreview"
+          @click.prevent="doTogglePreview"
         />
         <HoppButtonSecondary
           v-if="response.body"
@@ -44,8 +44,8 @@
         />
       </div>
     </div>
-    <div v-show="!previewEnabled" class="h-full">
+    <div v-show="!previewEnabled" class="h-full relative flex flex-col flex-1">
-      <div ref="htmlResponse" class="flex flex-1 flex-col"></div>
+      <div ref="htmlResponse" class="absolute inset-0"></div>
     </div>
     <iframe
       v-show="previewEnabled"
@@ -59,25 +59,29 @@
 </template>
 
 <script setup lang="ts">
-import IconWrapText from "~icons/lucide/wrap-text"
-import IconEye from "~icons/lucide/eye"
-import IconEyeOff from "~icons/lucide/eye-off"
-import { ref, reactive } from "vue"
-import {
-  usePreview,
-  useResponseBody,
-  useCopyResponse,
-  useDownloadResponse,
-} from "@composables/lens-actions"
 import { useCodemirror } from "@composables/codemirror"
 import { useI18n } from "@composables/i18n"
-import type { HoppRESTResponse } from "~/helpers/types/HoppRESTResponse"
+import {
+  useCopyResponse,
+  useDownloadResponse,
+  usePreview,
+  useResponseBody,
+} from "@composables/lens-actions"
+import { useService } from "dioc/vue"
+import { reactive, ref } from "vue"
+
+import { useNestedSetting } from "~/composables/settings"
 import { defineActionHandler } from "~/helpers/actions"
 import { getPlatformSpecialKey as getSpecialKey } from "~/helpers/platformutils"
-import { useNestedSetting } from "~/composables/settings"
+import type { HoppRESTResponse } from "~/helpers/types/HoppRESTResponse"
 import { toggleNestedSetting } from "~/newstore/settings"
+import { PersistenceService } from "~/services/persistence"
+import IconEye from "~icons/lucide/eye"
+import IconEyeOff from "~icons/lucide/eye-off"
+import IconWrapText from "~icons/lucide/wrap-text"
 
 const t = useI18n()
+const persistenceService = useService(PersistenceService)
 
 const props = defineProps<{
   response: HoppRESTResponse & { type: "success" | "fail" }
@@ -91,10 +95,22 @@ const { downloadIcon, downloadResponse } = useDownloadResponse(
   "text/html",
   responseBodyText
 )
+const defaultPreview =
+  persistenceService.getLocalConfig("lens_html_preview") === "true"
+
 const { previewFrame, previewEnabled, togglePreview } = usePreview(
-  false,
+  defaultPreview,
   responseBodyText
 )
+
+const doTogglePreview = () => {
+  persistenceService.setLocalConfig(
+    "lens_html_preview",
+    previewEnabled.value ? "false" : "true"
+  )
+  togglePreview()
+}
+
 const { copyIcon, copyResponse } = useCopyResponse(responseBodyText)
 
 useCodemirror(
@@ -112,7 +128,7 @@ useCodemirror(
   })
 )
 
-defineActionHandler("response.preview.toggle", () => togglePreview())
+defineActionHandler("response.preview.toggle", () => doTogglePreview())
 defineActionHandler("response.file.download", () => downloadResponse())
 defineActionHandler("response.copy", () => copyResponse())
 </script>

packages/hoppscotch-common/src/composables/lens-actions.ts

@@ -1,17 +1,18 @@
-import { computed, ComputedRef, ref, Ref } from "vue"
-import IconDownload from "~icons/lucide/download"
-import IconCopy from "~icons/lucide/copy"
-import IconCheck from "~icons/lucide/check"
-import { pipe } from "fp-ts/function"
-import * as S from "fp-ts/string"
-import * as RNEA from "fp-ts/ReadonlyNonEmptyArray"
-import { useToast } from "./toast"
-import { useI18n } from "./i18n"
-import { refAutoReset } from "@vueuse/core"
-import { copyToClipboard } from "@helpers/utils/clipboard"
 import { HoppRESTResponse } from "@helpers/types/HoppRESTResponse"
-import { platform } from "~/platform"
+import { copyToClipboard } from "@helpers/utils/clipboard"
+import { refAutoReset } from "@vueuse/core"
+import { pipe } from "fp-ts/function"
+import * as RNEA from "fp-ts/ReadonlyNonEmptyArray"
+import * as S from "fp-ts/string"
+import { computed, ComputedRef, onMounted, ref, Ref } from "vue"
+
 import jsonToLanguage from "~/helpers/utils/json-to-language"
+import { platform } from "~/platform"
+import IconCheck from "~icons/lucide/check"
+import IconCopy from "~icons/lucide/copy"
+import IconDownload from "~icons/lucide/download"
+import { useI18n } from "./i18n"
+import { useToast } from "./toast"
 
 export function useCopyInterface(responseBodyText: Ref<string>) {
   const toast = useToast()
@@ -109,19 +110,29 @@ export function usePreview(
   previewEnabledDefault: boolean,
   responseBodyText: Ref<string>
 ): {
-  previewFrame: any
+  previewFrame: Ref<HTMLIFrameElement | null>
   previewEnabled: Ref<boolean>
   togglePreview: () => void
 } {
-  const previewFrame = ref<any | null>(null)
+  const previewFrame: Ref<HTMLIFrameElement | null> = ref(null)
   const previewEnabled = ref(previewEnabledDefault)
   const url = ref("")
 
-  const togglePreview = () => {
+  // `previewFrame` is a template ref that gets attached to the `iframe` element when the component mounts
-    previewEnabled.value = !previewEnabled.value
+  // Ensures the HTML content is rendered immediately after a request, persists between tab switches, and is not limited to preview toggles
-    if (previewEnabled.value) {
+  onMounted(() => updatePreviewFrame())
-      if (previewFrame.value.getAttribute("data-previewing-url") === url.value)
+
-        return
+  // Prevent updating the `iframe` element attributes during preview toggle actions after they are set initially
+  const shouldUpdatePreviewFrame = computed(
+    () => previewFrame.value?.getAttribute("data-previewing-url") !== url.value
+  )
+
+  const updatePreviewFrame = () => {
+    if (
+      previewEnabled.value &&
+      previewFrame.value &&
+      shouldUpdatePreviewFrame.value
+    ) {
       // Use DOMParser to parse document HTML.
       const previewDocument = new DOMParser().parseFromString(
         responseBodyText.value,
@@ -130,12 +141,18 @@ export function usePreview(
       // Inject <base href="..."> tag to head, to fix relative CSS/HTML paths.
       previewDocument.head.innerHTML =
         `<base href="${url.value}">` + previewDocument.head.innerHTML
+
       // Finally, set the iframe source to the resulting HTML.
       previewFrame.value.srcdoc = previewDocument.documentElement.outerHTML
       previewFrame.value.setAttribute("data-previewing-url", url.value)
     }
   }
 
+  const togglePreview = () => {
+    previewEnabled.value = !previewEnabled.value
+    updatePreviewFrame()
+  }
+
   return {
     previewFrame,
     previewEnabled,
@@ -151,7 +168,8 @@ export function useResponseBody(response: HoppRESTResponse): {
       response.type === "loading" ||
       response.type === "network_fail" ||
       response.type === "script_fail" ||
-      response.type === "fail"
+      response.type === "fail" ||
+      response.type === "extension_error"
     )
       return ""
     if (typeof response.body === "string") return response.body

packages/hoppscotch-common/src/helpers/lenses/lenses.ts

@@ -33,7 +33,8 @@ export function getSuitableLenses(response: HoppRESTResponse): Lens[] {
     response.type === "loading" ||
     response.type === "network_fail" ||
     response.type === "script_fail" ||
-    response.type === "fail"
+    response.type === "fail" ||
+    response.type === "extension_error"
   )
     return []