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

<template>
  <SmartTabs
    v-if="response"
    v-model="selectedLensTab"
    styles="sticky z-10 bg-primary top-lowerPrimaryStickyFold"
    render-inactive-tabs
  >
    <SmartTab
      v-for="(lens, index) in validLenses"
      :id="lens.renderer"
      :key="`lens-${index}`"
      :label="t(lens.lensName)"
      class="flex flex-col flex-1 w-full h-full"
    >
      <component :is="lens.renderer" :response="response" />
    </SmartTab>
    <SmartTab
      v-if="headerLength"
      id="headers"
      :label="t('response.headers')"
      :info="`${headerLength}`"
      class="flex flex-col flex-1"
    >
      <LensesHeadersRenderer :headers="response.headers" />
    </SmartTab>
    <SmartTab
      id="results"
      :label="t('test.results')"
      :indicator="
        testResults &&
        (testResults.expectResults.length ||
          testResults.tests.length ||
          testResults.envDiff.selected.additions.length ||
          testResults.envDiff.selected.updations.length ||
          testResults.envDiff.global.updations.length)
          ? true
          : false
      "
      class="flex flex-col flex-1"
    >
      <HttpTestResult />
    </SmartTab>
  </SmartTabs>
</template>

<script lang="ts">
import { defineComponent } from "vue"
import { getSuitableLenses, getLensRenderers } from "~/helpers/lenses/lenses"
import { useReadonlyStream } from "@composables/stream"
import { useI18n } from "@composables/i18n"
import { restTestResults$ } from "~/newstore/RESTSession"

export default defineComponent({
  components: {
    // Lens Renderers
    ...getLensRenderers(),
  },
  props: {
    response: { type: Object, default: () => ({}) },
  },
  setup() {
    const testResults = useReadonlyStream(restTestResults$, null)

    return {
      testResults,
      t: useI18n(),
    }
  },
  data() {
    return {
      selectedLensTab: "",
    }
  },
  computed: {
    headerLength() {
      if (!this.response || !this.response.headers) return 0

      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,
    },
  },
})
</script>