feat: active tab no longer resets after request (#2917)

Co-authored-by: Andrew Bastin <andrewbastin.k@gmail.com>
Closes https://github.com/hoppscotch/hoppscotch/issues/2080

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

@@ -3,40 +3,32 @@
     <HttpResponseMeta :response="response" />
     <LensesResponseBodyRenderer
       v-if="!loading && hasResponse"
+      v-model:selected-tab-preference="selectedTabPreference"
       :response="response"
     />
   </div>
 </template>
 
-<script lang="ts">
-import { computed, defineComponent, watch } from "vue"
+<script setup lang="ts">
+import { ref, computed, watch } from "vue"
 import { startPageProgress, completePageProgress } from "@modules/loadingbar"
 import { useReadonlyStream } from "@composables/stream"
 import { restResponse$ } from "~/newstore/RESTSession"
 
-export default defineComponent({
-  setup() {
-    const response = useReadonlyStream(restResponse$, null)
+const selectedTabPreference = ref<string | null>(null)
 
-    const hasResponse = computed(
-      () =>
-        response.value?.type === "success" || response.value?.type === "fail"
-    )
+const response = useReadonlyStream(restResponse$, null)
 
-    const loading = computed(
-      () => response.value === null || response.value.type === "loading"
-    )
+const hasResponse = computed(
+  () => response.value?.type === "success" || response.value?.type === "fail"
+)
 
-    watch(response, () => {
-      if (response.value?.type === "loading") startPageProgress()
-      else completePageProgress()
-    })
+const loading = computed(
+  () => response.value === null || response.value.type === "loading"
+)
 
-    return {
-      hasResponse,
-      response,
-      loading,
-    }
-  },
+watch(response, () => {
+  if (response.value?.type === "loading") startPageProgress()
+  else completePageProgress()
 })
 </script>

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

@@ -107,7 +107,7 @@ const t = useI18n()
 const colorMode = useColorMode()
 
 const props = defineProps<{
-  response: HoppRESTResponse
+  response: HoppRESTResponse | null
 }>()
 
 /**
@@ -118,6 +118,7 @@ const props = defineProps<{
  */
 const readableResponseSize = computed(() => {
   if (
+    props.response === null ||
     props.response.type === "loading" ||
     props.response.type === "network_fail" ||
     props.response.type === "script_fail" ||
@@ -135,6 +136,7 @@ const readableResponseSize = computed(() => {
 
 const statusCategory = computed(() => {
   if (
+    props.response === null ||
     props.response.type === "loading" ||
     props.response.type === "network_fail" ||
     props.response.type === "script_fail" ||

packages/hoppscotch-common/src/components/lenses/HeadersRenderer.vue

@@ -27,18 +27,18 @@
 <script setup lang="ts">
 import IconCopy from "~icons/lucide/copy"
 import IconCheck from "~icons/lucide/check"
-import { HoppRESTHeader } from "@hoppscotch/data"
 import { refAutoReset } from "@vueuse/core"
 import { copyToClipboard } from "~/helpers/utils/clipboard"
 import { useI18n } from "@composables/i18n"
 import { useToast } from "@composables/toast"
+import type { HoppRESTResponseHeader } from "~/helpers/types/HoppRESTResponse"
 
 const t = useI18n()
 
 const toast = useToast()
 
 const props = defineProps<{
-  headers: Array<HoppRESTHeader>
+  headers: HoppRESTResponseHeader[]
 }>()
 
 const copyIcon = refAutoReset<typeof IconCopy | typeof IconCheck>(

packages/hoppscotch-common/src/components/lenses/HeadersRendererEntry.vue

@@ -30,7 +30,7 @@
 import IconCopy from "~icons/lucide/copy"
 import IconCheck from "~icons/lucide/check"
 import { refAutoReset } from "@vueuse/core"
-import type { HoppRESTHeader } from "@hoppscotch/data"
+import type { HoppRESTResponseHeader } from "~/helpers/types/HoppRESTResponse"
 import { copyToClipboard } from "~/helpers/utils/clipboard"
 import { useI18n } from "@composables/i18n"
 import { useToast } from "@composables/toast"
@@ -40,7 +40,7 @@ const t = useI18n()
 const toast = useToast()
 
 defineProps<{
-  header: HoppRESTHeader
+  header: HoppRESTResponseHeader
 }>()
 
 const copyIcon = refAutoReset<typeof IconCopy | typeof IconCheck>(

packages/hoppscotch-common/src/components/lenses/ResponseBodyRenderer.vue

@@ -11,16 +11,16 @@
       :label="t(lens.lensName)"
       class="flex flex-col flex-1 w-full h-full"
     >
-      <component :is="lens.renderer" :response="response" />
+      <component :is="lensRendererFor(lens.renderer)" :response="response" />
     </SmartTab>
     <SmartTab
-      v-if="headerLength"
+      v-if="maybeHeaders"
       id="headers"
       :label="t('response.headers')"
-      :info="`${headerLength}`"
+      :info="`${maybeHeaders.length}`"
       class="flex flex-col flex-1"
     >
-      <LensesHeadersRenderer :headers="response.headers" />
+      <LensesHeadersRenderer :headers="maybeHeaders" />
     </SmartTab>
     <SmartTab
       id="results"
@@ -42,54 +42,77 @@
   </SmartTabs>
 </template>
 
-<script lang="ts">
-import { defineComponent } from "vue"
-import { getSuitableLenses, getLensRenderers } from "~/helpers/lenses/lenses"
+<script setup lang="ts">
+import { computed, ref, watch } from "vue"
+import {
+  getSuitableLenses,
+  getLensRenderers,
+  Lens,
+} from "~/helpers/lenses/lenses"
 import { useReadonlyStream } from "@composables/stream"
 import { useI18n } from "@composables/i18n"
+import type { HoppRESTResponse } from "~/helpers/types/HoppRESTResponse"
 import { restTestResults$ } from "~/newstore/RESTSession"
 
-export default defineComponent({
-  components: {
-    // Lens Renderers
-    ...getLensRenderers(),
-  },
-  props: {
-    response: { type: Object, default: () => ({}) },
-  },
-  setup() {
-    const testResults = useReadonlyStream(restTestResults$, null)
+const props = defineProps<{
+  response: HoppRESTResponse | null
+  selectedTabPreference: string | null
+}>()
 
-    return {
-      testResults,
-      t: useI18n(),
+const emit = defineEmits<{
+  (e: "update:selectedTabPreference", newTab: string): void
+}>()
+
+const allLensRenderers = getLensRenderers()
+
+function lensRendererFor(name: string) {
+  return allLensRenderers[name]
+}
+
+const testResults = useReadonlyStream(restTestResults$, null)
+
+const t = useI18n()
+
+const selectedLensTab = ref("")
+
+const maybeHeaders = computed(() => {
+  if (
+    !props.response ||
+    !(props.response.type === "success" || props.response.type === "fail")
+  )
+    return null
+  return props.response.headers
+})
+
+const validLenses = computed(() => {
+  if (!props.response) return []
+  return getSuitableLenses(props.response)
+})
+
+watch(
+  validLenses,
+  (newLenses: Lens[]) => {
+    if (newLenses.length === 0) return
+
+    const validRenderers = [
+      ...newLenses.map((x) => x.renderer),
+      "headers",
+      "results",
+    ]
+
+    if (
+      props.selectedTabPreference &&
+      validRenderers.includes(props.selectedTabPreference)
+    ) {
+      selectedLensTab.value = props.selectedTabPreference
+    } else {
+      selectedLensTab.value = newLenses[0].renderer
     }
   },
-  data() {
-    return {
-      selectedLensTab: "",
-    }
-  },
-  computed: {
-    headerLength() {
-      if (!this.response || !this.response.headers) return 0
+  { immediate: true }
+)
 
-      return Object.keys(this.response.headers).length
-    },
-    validLenses() {
-      if (!this.response) return []
-
-      return getSuitableLenses(this.response)
-    },
-  },
-  watch: {
-    validLenses: {
-      handler(newValue) {
-        if (newValue.length === 0) return
-        this.selectedLensTab = newValue[0].renderer
-      },
-      immediate: true,
-    },
-  },
+watch(selectedLensTab, (newLensID) => {
+  emit("update:selectedTabPreference", newLensID)
 })
 </script>

packages/hoppscotch-common/src/helpers/types/HoppRESTResponse.ts

@@ -1,10 +1,12 @@
 import { HoppRESTRequest } from "@hoppscotch/data"
 
+export type HoppRESTResponseHeader = { key: string; value: string }
+
 export type HoppRESTResponse =
   | { type: "loading"; req: HoppRESTRequest }
   | {
       type: "fail"
-      headers: { key: string; value: string }[]
+      headers: HoppRESTResponseHeader[]
       body: ArrayBuffer
       statusCode: number
 
@@ -27,7 +29,7 @@ export type HoppRESTResponse =
     }
   | {
       type: "success"
-      headers: { key: string; value: string }[]
+      headers: HoppRESTResponseHeader[]
       body: ArrayBuffer
       statusCode: number
       meta: {