feat: save api responses (#4382)

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

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

@@ -19,7 +19,10 @@
     <LensesHeadersRendererEntry
       v-for="(header, index) in headers"
       :key="index"
-      :header="header"
+      v-model:headerKey="header.key"
+      v-model:headerValue="header.value"
+      :is-editable="isEditable"
+      @delete-header="deleteHeader(index)"
     />
   </div>
 </template>
@@ -32,23 +35,35 @@ import { copyToClipboard } from "~/helpers/utils/clipboard"
 import { useI18n } from "@composables/i18n"
 import { useToast } from "@composables/toast"
 import type { HoppRESTResponseHeader } from "~/helpers/types/HoppRESTResponse"
+import { useVModel } from "@vueuse/core"
 
 const t = useI18n()
 
 const toast = useToast()
 
 const props = defineProps<{
-  headers: HoppRESTResponseHeader[]
+  modelValue: HoppRESTResponseHeader[]
+  isEditable: boolean
 }>()
 
+const emit = defineEmits<{
+  (e: "update:modelValue"): void
+}>()
+
+const headers = useVModel(props, "modelValue", emit)
+
 const copyIcon = refAutoReset<typeof IconCopy | typeof IconCheck>(
   IconCopy,
   1000
 )
 
 const copyHeaders = () => {
-  copyToClipboard(JSON.stringify(props.headers))
+  copyToClipboard(JSON.stringify(props.modelValue))
   copyIcon.value = IconCheck
   toast.success(`${t("state.copied_to_clipboard")}`)
 }
+
+const deleteHeader = (index: number) => {
+  headers.value.splice(index, 1)
+}
 </script>

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

@@ -2,25 +2,47 @@
   <div
     class="group flex divide-x divide-dividerLight border-b border-dividerLight"
   >
-    <span
-      class="flex min-w-0 flex-1 px-4 py-2 transition group-hover:text-secondaryDark"
-    >
-      <span class="select-all truncate rounded-sm">
-        {{ header.key }}
+    <span class="flex min-w-0 flex-1 transition group-hover:text-secondaryDark">
+      <span
+        v-if="!isEntryEditable"
+        class="select-all truncate rounded-sm py-2 pl-4"
+      >
+        {{ headerKey }}
       </span>
+      <SmartEnvInput
+        v-else
+        :model-value="headerKey"
+        @update:model-value="emit('update:headerKey', $event)"
+      />
     </span>
     <span
-      class="flex min-w-0 flex-1 justify-between py-2 pl-4 transition group-hover:text-secondaryDark"
+      class="flex min-w-0 flex-1 justify-between transition group-hover:text-secondaryDark"
     >
-      <span class="select-all truncate rounded-sm">
-        {{ header.value }}
+      <span
+        v-if="!isEntryEditable"
+        class="select-all truncate rounded-sm py-2 pl-4"
+      >
+        {{ headerValue }}
       </span>
+      <SmartEnvInput
+        v-else
+        :model-value="headerValue"
+        @update:model-value="emit('update:headerValue', $event)"
+      />
       <HoppButtonSecondary
         v-tippy="{ theme: 'tooltip' }"
         :title="t('action.copy')"
         :icon="copyIcon"
         class="hidden !py-0 group-hover:inline-flex"
-        @click="copyHeader(header.value)"
+        @click="copyHeader(headerValue)"
+      />
+      <HoppButtonSecondary
+        v-if="isEntryEditable"
+        v-tippy="{ theme: 'tooltip' }"
+        :title="t('action.delete')"
+        :icon="IconTrash"
+        class="hidden !py-0 group-hover:inline-flex"
+        @click="deleteHeader(headerKey)"
       />
     </span>
   </div>
@@ -28,21 +50,36 @@
 
 <script setup lang="ts">
 import IconCopy from "~icons/lucide/copy"
+import IconTrash from "~icons/lucide/trash"
 import IconCheck from "~icons/lucide/check"
 import { refAutoReset } from "@vueuse/core"
-import type { HoppRESTResponseHeader } from "~/helpers/types/HoppRESTResponse"
 import { copyToClipboard } from "~/helpers/utils/clipboard"
 import { useI18n } from "@composables/i18n"
 import { useToast } from "@composables/toast"
+import { computed } from "vue"
 
 const t = useI18n()
 
 const toast = useToast()
 
-defineProps<{
-  header: HoppRESTResponseHeader
+const props = defineProps<{
+  headerKey: string
+  headerValue: string
+  isEditable: boolean
 }>()
 
+const emit = defineEmits<{
+  (e: "update:headerKey", value: string): void
+  (e: "update:headerValue", value: string): void
+  (e: "delete-header", key: string): void
+}>()
+
+// we can allow editing only if the header is not content-type
+// because editing content-type can break lense
+const isEntryEditable = computed(
+  () => props.isEditable && props.headerKey.toLowerCase() !== "content-type"
+)
+
 const copyIcon = refAutoReset<typeof IconCopy | typeof IconCheck>(
   IconCopy,
   1000
@@ -53,4 +90,8 @@ const copyHeader = (headerValue: string) => {
   copyIcon.value = IconCheck
   toast.success(`${t("state.copied_to_clipboard")}`)
 }
+
+const deleteHeader = (headerKey: string) => {
+  emit("delete-header", headerKey)
+}
 </script>

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

@@ -13,7 +13,10 @@
     >
       <component
         :is="lensRendererFor(lens.renderer)"
-        :response="doc.response"
+        v-model:response="doc.response"
+        :is-savable="isSavable"
+        :is-editable="isEditable"
+        @save-as-example="$emit('save-as-example')"
       />
     </HoppSmartTab>
     <HoppSmartTab
@@ -23,9 +26,10 @@
       :info="`${maybeHeaders.length}`"
       class="flex flex-1 flex-col"
     >
-      <LensesHeadersRenderer :headers="maybeHeaders" />
+      <LensesHeadersRenderer v-model="maybeHeaders" />
     </HoppSmartTab>
     <HoppSmartTab
+      v-if="!isEditable"
       id="results"
       :label="t('test.results')"
       :indicator="showIndicator"
@@ -45,18 +49,24 @@ import {
 } from "~/helpers/lenses/lenses"
 import { useI18n } from "@composables/i18n"
 import { useVModel } from "@vueuse/core"
-import { HoppRESTDocument } from "~/helpers/rest/document"
+import { HoppRequestDocument } from "~/helpers/rest/document"
 
 const props = defineProps<{
-  document: HoppRESTDocument
+  document: HoppRequestDocument
+  isEditable: boolean
 }>()
 
 const emit = defineEmits<{
-  (e: "update:document", document: HoppRESTDocument): void
+  (e: "update:document", document: HoppRequestDocument): void
+  (e: "save-as-example"): void
 }>()
 
 const doc = useVModel(props, "document", emit)
 
+const isSavable = computed(() => {
+  return doc.value.response?.type === "success" && doc.value.saveContext
+})
+
 const showIndicator = computed(() => {
   if (!doc.value.testResults) return false
 

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

@@ -2,6 +2,7 @@
   <div class="flex flex-1 flex-col">
     <div
       class="sticky top-lowerSecondaryStickyFold z-10 flex flex-shrink-0 items-center justify-between overflow-x-auto border-b border-dividerLight bg-primary pl-4"
+      :class="{ 'py-2': !responseBodyText }"
     >
       <label class="truncate font-semibold text-secondaryLight">
         {{ t("response.body") }}
@@ -33,6 +34,22 @@
           :icon="downloadIcon"
           @click="downloadResponse"
         />
+        <HoppButtonSecondary
+          v-if="response.body"
+          v-tippy="{ theme: 'tooltip', allowHTML: true }"
+          :title="
+            isSavable
+              ? `${t(
+                  'action.save_as_example'
+                )} <kbd>${getSpecialKey()}</kbd><kbd>E</kbd>`
+              : t('response.please_save_request')
+          "
+          :icon="IconSave"
+          :class="{
+            'opacity-75 cursor-not-allowed select-none': !isSavable,
+          }"
+          @click="isSavable ? saveAsExample() : null"
+        />
         <HoppButtonSecondary
           v-if="response.body"
           v-tippy="{ theme: 'tooltip', allowHTML: true }"
@@ -68,7 +85,7 @@ import {
   useResponseBody,
 } from "@composables/lens-actions"
 import { useService } from "dioc/vue"
-import { reactive, ref } from "vue"
+import { reactive, ref, computed } from "vue"
 
 import { useNestedSetting } from "~/composables/settings"
 import { defineActionHandler } from "~/helpers/actions"
@@ -79,23 +96,44 @@ 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"
+import IconSave from "~icons/lucide/save"
+import { HoppRESTRequestResponse } from "@hoppscotch/data"
 
 const t = useI18n()
 const persistenceService = useService(PersistenceService)
 
 const props = defineProps<{
-  response: HoppRESTResponse & { type: "success" | "fail" }
+  response:
+    | (HoppRESTResponse & { type: "success" | "fail" })
+    | HoppRESTRequestResponse
+  isSavable: boolean
+  isEditable: boolean
+}>()
+
+const emit = defineEmits<{
+  (e: "save-as-example"): void
 }>()
 
 const htmlResponse = ref<any | null>(null)
 const WRAP_LINES = useNestedSetting("WRAP_LINES", "httpResponseBody")
 
+const responseName = computed(() => {
+  if ("type" in props.response) {
+    if (props.response.type === "success" || props.response.type === "fail") {
+      return props.response.req.name
+    }
+    return "Untitled"
+  }
+
+  return props.response.name
+})
+
 const { responseBodyText } = useResponseBody(props.response)
 const { downloadIcon, downloadResponse } = useDownloadResponse(
   "text/html",
   responseBodyText,
   t("filename.lens", {
-    request_name: props.response.req.name,
+    request_name: responseName.value,
   })
 )
 const defaultPreview =
@@ -116,13 +154,17 @@ const doTogglePreview = () => {
 
 const { copyIcon, copyResponse } = useCopyResponse(responseBodyText)
 
+const saveAsExample = () => {
+  emit("save-as-example")
+}
+
 useCodemirror(
   htmlResponse,
   responseBodyText,
   reactive({
     extendedEditorConfig: {
       mode: "htmlmixed",
-      readOnly: true,
+      readOnly: !props.isEditable,
       lineWrapping: WRAP_LINES,
     },
     linter: null,
@@ -134,6 +176,9 @@ useCodemirror(
 defineActionHandler("response.preview.toggle", () => doTogglePreview())
 defineActionHandler("response.file.download", () => downloadResponse())
 defineActionHandler("response.copy", () => copyResponse())
+defineActionHandler("response.save-as-example", () => {
+  props.isSavable ? saveAsExample() : null
+})
 </script>
 
 <style lang="scss" scoped>

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

@@ -1,17 +1,15 @@
 <template>
-  <div
-    v-if="response.type === 'success' || response.type === 'fail'"
-    class="flex flex-1 flex-col"
-  >
+  <div v-if="showResponse" class="flex flex-1 flex-col">
     <div
       class="sticky top-lowerSecondaryStickyFold z-10 flex flex-shrink-0 items-center justify-between overflow-x-auto border-b border-dividerLight bg-primary pl-4"
+      :class="{ 'py-2': !responseBodyText }"
     >
       <label class="truncate font-semibold text-secondaryLight">
         {{ t("response.body") }}
       </label>
       <div class="flex items-center">
         <HoppButtonSecondary
-          v-if="response.body"
+          v-if="showResponse"
           v-tippy="{ theme: 'tooltip' }"
           :title="t('state.linewrap')"
           :class="{ '!text-accent': WRAP_LINES }"
@@ -19,7 +17,7 @@
           @click.prevent="toggleNestedSetting('WRAP_LINES', 'httpResponseBody')"
         />
         <HoppButtonSecondary
-          v-if="response.body"
+          v-if="showResponse"
           v-tippy="{ theme: 'tooltip' }"
           :title="t('action.filter')"
           :icon="IconFilter"
@@ -27,7 +25,7 @@
           @click.prevent="toggleFilterState"
         />
         <HoppButtonSecondary
-          v-if="response.body"
+          v-if="showResponse"
           v-tippy="{ theme: 'tooltip', allowHTML: true }"
           :title="`${t(
             'action.download_file'
@@ -36,7 +34,23 @@
           @click="downloadResponse"
         />
         <HoppButtonSecondary
-          v-if="response.body"
+          v-if="showResponse && !isEditable"
+          v-tippy="{ theme: 'tooltip', allowHTML: true }"
+          :title="
+            isSavable
+              ? `${t(
+                  'action.save_as_example'
+                )} <kbd>${getSpecialKey()}</kbd><kbd>E</kbd>`
+              : t('response.please_save_request')
+          "
+          :icon="IconSave"
+          :class="{
+            'opacity-75 cursor-not-allowed select-none': !isSavable,
+          }"
+          @click="isSavable ? saveAsExample() : null"
+        />
+        <HoppButtonSecondary
+          v-if="showResponse"
           v-tippy="{ theme: 'tooltip', allowHTML: true }"
           :title="`${t(
             'action.copy'
@@ -45,7 +59,7 @@
           @click="copyResponse"
         />
         <tippy
-          v-if="response.body"
+          v-if="showResponse"
           interactive
           trigger="click"
           theme="popover"
@@ -109,7 +123,7 @@
           <span>{{ filterResponseError.error }}</span>
         </div>
         <HoppButtonSecondary
-          v-if="response.body"
+          v-if="showResponse"
           v-tippy="{ theme: 'tooltip' }"
           :title="t('app.wiki')"
           :icon="IconHelpCircle"
@@ -234,6 +248,7 @@ import IconFilter from "~icons/lucide/filter"
 import IconMore from "~icons/lucide/more-horizontal"
 import IconHelpCircle from "~icons/lucide/help-circle"
 import IconNetwork from "~icons/lucide/network"
+import IconSave from "~icons/lucide/save"
 import * as LJSON from "lossless-json"
 import * as O from "fp-ts/Option"
 import * as E from "fp-ts/Either"
@@ -258,14 +273,35 @@ import { defineActionHandler, invokeAction } from "~/helpers/actions"
 import { getPlatformSpecialKey as getSpecialKey } from "~/helpers/platformutils"
 import { useNestedSetting } from "~/composables/settings"
 import { toggleNestedSetting } from "~/newstore/settings"
+import { HoppRESTRequestResponse } from "@hoppscotch/data"
 
 const t = useI18n()
 
 const props = defineProps<{
-  response: HoppRESTResponse
+  response: HoppRESTResponse | HoppRESTRequestResponse
+  isSavable: boolean
+  isEditable: boolean
 }>()
 
-const { responseBodyText } = useResponseBody(props.response)
+const emit = defineEmits<{
+  (e: "save-as-example"): void
+  (e: "update:response", val: HoppRESTRequestResponse): void
+}>()
+
+const showResponse = computed(() => {
+  if ("type" in props.response) {
+    return props.response.type === "success" || props.response.type === "fail"
+  }
+
+  return "body" in props.response
+})
+
+const isHttpResponse = computed(() => {
+  return (
+    "type" in props.response &&
+    (props.response.type === "success" || props.response.type === "fail")
+  )
+})
 
 const toggleFilter = ref(false)
 const filterQueryText = ref("")
@@ -274,18 +310,39 @@ type BodyParseError =
   | { type: "JSON_PARSE_FAILED" }
   | { type: "JSON_PATH_QUERY_FAILED"; error: Error }
 
-const responseJsonObject = computed(() =>
-  pipe(
-    responseBodyText.value,
-    E.tryCatchK(
-      LJSON.parse,
-      (): BodyParseError => ({ type: "JSON_PARSE_FAILED" })
+const responseJsonObject = computed(() => {
+  if (isHttpResponse.value) {
+    const { responseBodyText } = useResponseBody(
+      props.response as HoppRESTResponse
     )
-  )
-)
+
+    return pipe(
+      responseBodyText.value,
+      E.tryCatchK(
+        LJSON.parse,
+        (): BodyParseError => ({ type: "JSON_PARSE_FAILED" })
+      )
+    )
+  }
+
+  return undefined
+})
+
+const responseName = computed(() => {
+  if ("type" in props.response) {
+    if (props.response.type === "success") {
+      return props.response.req.name
+    }
+    return "Untitled"
+  }
+
+  return props.response.name
+})
+
+const { responseBodyText } = useResponseBody(props.response)
 
 const jsonResponseBodyText = computed(() => {
-  if (filterQueryText.value.length > 0) {
+  if (filterQueryText.value.length > 0 && responseJsonObject.value) {
     return pipe(
       responseJsonObject.value,
       E.chain((parsedJSON) =>
@@ -307,15 +364,19 @@ const jsonResponseBodyText = computed(() => {
   return E.right(responseBodyText.value)
 })
 
-const jsonBodyText = computed(() =>
-  pipe(
+const jsonBodyText = computed(() => {
+  const { responseBodyText } = useResponseBody(
+    props.response as HoppRESTResponse
+  )
+
+  return pipe(
     jsonResponseBodyText.value,
     E.getOrElse(() => responseBodyText.value),
     O.tryCatchK(LJSON.parse),
     O.map((val) => LJSON.stringify(val, undefined, 2)),
     O.getOrElse(() => responseBodyText.value)
   )
-)
+})
 
 const ast = computed(() =>
   pipe(
@@ -351,12 +412,16 @@ const filterResponseError = computed(() =>
   )
 )
 
+const saveAsExample = () => {
+  emit("save-as-example")
+}
+
 const { copyIcon, copyResponse } = useCopyResponse(jsonBodyText)
 const { downloadIcon, downloadResponse } = useDownloadResponse(
   "application/json",
   jsonBodyText,
   t("filename.lens", {
-    request_name: props.response.req.name,
+    request_name: responseName.value,
   })
 )
 
@@ -372,12 +437,15 @@ const { cursor } = useCodemirror(
   reactive({
     extendedEditorConfig: {
       mode: "application/ld+json",
-      readOnly: true,
+      readOnly: !props.isEditable,
       lineWrapping: WRAP_LINES,
     },
     linter: null,
     completer: null,
     environmentHighlights: true,
+    onChange: (update: string) => {
+      emit("update:response", { ...props.response, body: update })
+    },
   })
 )
 
@@ -408,6 +476,9 @@ const toggleFilterState = () => {
 
 defineActionHandler("response.file.download", () => downloadResponse())
 defineActionHandler("response.copy", () => copyResponse())
+defineActionHandler("response.save-as-example", () => {
+  props.isSavable ? saveAsExample() : null
+})
 </script>
 
 <style lang="scss" scoped>

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

@@ -1,7 +1,8 @@
 <template>
   <div class="flex flex-1 flex-col">
     <div
-      class="sticky top-lowerSecondaryStickyFold z-10 flex flex-shrink-0 items-center justify-between overflow-x-auto border-b border-dividerLight bg-primary pl-4"
+      class="sticky top-lowerSecondaryStickyFold z-10 flex flex-shrink-0 items-center justify-between overflow-x-auto border-b border-dividerLight bg-primary pl-4 py-1"
+      :class="{ 'py-2': !responseBodyText }"
     >
       <label class="truncate font-semibold text-secondaryLight">
         {{ t("response.body") }}
@@ -24,6 +25,22 @@
           :icon="downloadIcon"
           @click="downloadResponse"
         />
+        <HoppButtonSecondary
+          v-if="showResponse && !isEditable"
+          v-tippy="{ theme: 'tooltip', allowHTML: true }"
+          :title="
+            isSavable
+              ? `${t(
+                  'action.save_as_example'
+                )} <kbd>${getSpecialKey()}</kbd><kbd>E</kbd>`
+              : t('response.please_save_request')
+          "
+          :icon="IconSave"
+          :class="{
+            'opacity-75 cursor-not-allowed select-none': !isSavable,
+          }"
+          @click="isSavable ? saveAsExample() : null"
+        />
         <HoppButtonSecondary
           v-if="response.body"
           v-tippy="{ theme: 'tooltip', allowHTML: true }"
@@ -43,6 +60,7 @@
 
 <script setup lang="ts">
 import IconWrapText from "~icons/lucide/wrap-text"
+import IconSave from "~icons/lucide/save"
 import { ref, computed, reactive } from "vue"
 import { flow, pipe } from "fp-ts/function"
 import * as S from "fp-ts/string"
@@ -62,21 +80,53 @@ import { defineActionHandler } from "~/helpers/actions"
 import { getPlatformSpecialKey as getSpecialKey } from "~/helpers/platformutils"
 import { useNestedSetting } from "~/composables/settings"
 import { toggleNestedSetting } from "~/newstore/settings"
+import { HoppRESTRequestResponse } from "@hoppscotch/data"
 
 const t = useI18n()
 
 const props = defineProps<{
-  response: HoppRESTResponse & { type: "success" | "fail" }
+  response:
+    | (HoppRESTResponse & { type: "success" | "fail" })
+    | HoppRESTRequestResponse
+  isEditable: boolean
+  isSavable: boolean
+}>()
+
+const emit = defineEmits<{
+  (
+    e: "update:response",
+    val:
+      | (HoppRESTResponse & { type: "success" | "fail" })
+      | HoppRESTRequestResponse
+  ): void
+  (e: "save-as-example"): void
 }>()
 
 const { responseBodyText } = useResponseBody(props.response)
 
+const isHttpResponse = computed(() => {
+  return (
+    "type" in props.response &&
+    (props.response.type === "success" || props.response.type === "fail")
+  )
+})
+
 const rawResponseBody = computed(() =>
-  props.response.type === "fail" || props.response.type === "success"
-    ? props.response.body
-    : new ArrayBuffer(0)
+  isHttpResponse.value ? props.response.body : new ArrayBuffer(0)
 )
 
+const showResponse = computed(() => {
+  if ("type" in props.response) {
+    return props.response.type === "success" || props.response.type === "fail"
+  }
+
+  return "body" in props.response
+})
+
+const saveAsExample = () => {
+  emit("save-as-example")
+}
+
 const responseType = computed(() =>
   pipe(
     props.response,
@@ -93,11 +143,22 @@ const responseType = computed(() =>
   )
 )
 
+const responseName = computed(() => {
+  if ("type" in props.response) {
+    if (props.response.type === "success" || props.response.type === "fail") {
+      return props.response.req.name
+    }
+    return "Untitled"
+  }
+
+  return props.response.name
+})
+
 const { downloadIcon, downloadResponse } = useDownloadResponse(
   responseType.value,
   rawResponseBody,
   t("filename.lens", {
-    request_name: props.response.req.name,
+    request_name: responseName.value,
   })
 )
 
@@ -112,12 +173,15 @@ useCodemirror(
   reactive({
     extendedEditorConfig: {
       mode: "text/plain",
-      readOnly: true,
+      readOnly: !props.isEditable,
       lineWrapping: WRAP_LINES,
     },
     linter: null,
     completer: null,
     environmentHighlights: true,
+    onChange: (update: string) => {
+      emit("update:response", { ...props.response, body: update })
+    },
   })
 )
 

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

@@ -24,6 +24,22 @@
           :icon="downloadIcon"
           @click="downloadResponse"
         />
+        <HoppButtonSecondary
+          v-if="response.body && !isEditable"
+          v-tippy="{ theme: 'tooltip', allowHTML: true }"
+          :title="
+            isSavable
+              ? `${t(
+                  'action.save_as_example'
+                )} <kbd>${getSpecialKey()}</kbd><kbd>E</kbd>`
+              : t('response.please_save_request')
+          "
+          :icon="IconSave"
+          :class="{
+            'opacity-75 cursor-not-allowed select-none': !isSavable,
+          }"
+          @click="isSavable ? saveAsExample() : null"
+        />
         <HoppButtonSecondary
           v-if="response.body"
           v-tippy="{ theme: 'tooltip', allowHTML: true }"
@@ -43,6 +59,7 @@
 
 <script setup lang="ts">
 import IconWrapText from "~icons/lucide/wrap-text"
+import IconSave from "~icons/lucide/save"
 import { computed, ref, reactive } from "vue"
 import { flow, pipe } from "fp-ts/function"
 import * as S from "fp-ts/string"
@@ -62,36 +79,67 @@ import { getPlatformSpecialKey as getSpecialKey } from "~/helpers/platformutils"
 import { objFieldMatches } from "~/helpers/functional/object"
 import { useNestedSetting } from "~/composables/settings"
 import { toggleNestedSetting } from "~/newstore/settings"
+import { HoppRESTRequestResponse } from "@hoppscotch/data"
 
 const t = useI18n()
 
 const props = defineProps<{
-  response: HoppRESTResponse & { type: "success" | "fail" }
+  response:
+    | (HoppRESTResponse & { type: "success" | "fail" })
+    | HoppRESTRequestResponse
+  isEditable: boolean
+  isSavable: boolean
+}>()
+
+const emit = defineEmits<{
+  (e: "save-as-example"): void
 }>()
 
 const { responseBodyText } = useResponseBody(props.response)
 
-const responseType = computed(() =>
-  pipe(
-    props.response,
-    O.fromPredicate(objFieldMatches("type", ["fail", "success"] as const)),
-    O.chain(
-      // Try getting content-type
-      flow(
-        (res) => res.headers,
-        A.findFirst((h) => h.key.toLowerCase() === "content-type"),
-        O.map(flow((h) => h.value, S.split(";"), RNEA.head, S.toLowerCase))
-      )
-    ),
-    O.getOrElse(() => "text/plain")
+const isHttpResponse = computed(() => {
+  return (
+    "type" in props.response &&
+    (props.response.type === "success" || props.response.type === "fail")
   )
-)
+})
+
+const responseType = computed(() => {
+  if (isHttpResponse.value) {
+    return pipe(
+      props.response,
+      O.fromPredicate(objFieldMatches("type", ["fail", "success"] as const)),
+      O.chain(
+        // Try getting content-type
+        flow(
+          (res) => res.headers,
+          A.findFirst((h) => h.key.toLowerCase() === "content-type"),
+          O.map(flow((h) => h.value, S.split(";"), RNEA.head, S.toLowerCase))
+        )
+      ),
+      O.getOrElse(() => "text/plain")
+    )
+  }
+
+  return "text/plain"
+})
+
+const responseName = computed(() => {
+  if ("type" in props.response) {
+    if (props.response.type === "success") {
+      return props.response.req.name
+    }
+    return "Untitled"
+  }
+
+  return props.response.name
+})
 
 const { downloadIcon, downloadResponse } = useDownloadResponse(
   responseType.value,
   responseBodyText,
   t("filename.lens", {
-    request_name: props.response.req.name,
+    request_name: responseName.value,
   })
 )
 
@@ -100,13 +148,17 @@ const { copyIcon, copyResponse } = useCopyResponse(responseBodyText)
 const xmlResponse = ref<any | null>(null)
 const WRAP_LINES = useNestedSetting("WRAP_LINES", "httpResponseBody")
 
+const saveAsExample = () => {
+  emit("save-as-example")
+}
+
 useCodemirror(
   xmlResponse,
   responseBodyText,
   reactive({
     extendedEditorConfig: {
       mode: "application/xml",
-      readOnly: true,
+      readOnly: !props.isEditable,
       lineWrapping: WRAP_LINES,
     },
     linter: null,
@@ -117,4 +169,7 @@ useCodemirror(
 
 defineActionHandler("response.file.download", () => downloadResponse())
 defineActionHandler("response.copy", () => copyResponse())
+defineActionHandler("response.save-as-example", () => {
+  props.isSavable ? saveAsExample() : null
+})
 </script>