feat(filename): added filename in download functional (#4329)

Co-authored-by: Dmitry Mukovkin <d.mukovkin@cft.ru>
Co-authored-by: nivedin <nivedinp@gmail.com>

packages/hoppscotch-common/locales/en.json

@@ -383,6 +383,13 @@
     "title": "Export",
     "success": "Successfully exported"
   },
+  "filename": {
+    "cookie_key_value_pairs": "Cookie",
+    "codegen": "{request_name} - code",
+    "graphql_response": "GraphQL-Response",
+    "lens": "{request_name} - response",
+    "realtime_response": "Realtime-Response"
+  },
   "filter": {
     "all": "All",
     "none": "None",

packages/hoppscotch-common/src/components/cookies/EditCookie.vue

@@ -187,8 +187,9 @@ function saveCookieChange() {
 
 const { copyIcon, copyResponse } = useCopyResponse(rawCookieString)
 const { downloadIcon, downloadResponse } = useDownloadResponse(
-  "",
+  "text/plain",
-  rawCookieString
+  rawCookieString,
+  t("filename.cookie_key_value_pairs")
 )
 
 function clearContent() {

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

@@ -157,7 +157,8 @@ useCodemirror(
 const { copyIcon, copyResponse } = useCopyResponse(responseString)
 const { downloadIcon, downloadResponse } = useDownloadResponse(
   "application/json",
-  responseString
+  responseString,
+  t("filename.graphql_response")
 )
 
 defineActionHandler(

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

@@ -259,5 +259,11 @@ const filteredCodegenDefinitions = computed(() => {
 })
 
 const { copyIcon, copyResponse } = useCopyResponse(requestCode)
-const { downloadIcon, downloadResponse } = useDownloadResponse("", requestCode)
+const { downloadIcon, downloadResponse } = useDownloadResponse(
+  "",
+  requestCode,
+  t("filename.codegen", {
+    request_name: request.value.name,
+  })
+)
 </script>

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

@@ -26,12 +26,6 @@
                 :icon="IconWrapText"
                 @click.prevent="toggleNestedSetting('WRAP_LINES', 'importCurl')"
               />
-              <HoppButtonSecondary
-                v-tippy="{ theme: 'tooltip', allowHTML: true }"
-                :title="t('action.download_file')"
-                :icon="downloadIcon"
-                @click="downloadResponse"
-              />
               <HoppButtonSecondary
                 v-tippy="{ theme: 'tooltip', allowHTML: true }"
                 :title="t('action.copy')"
@@ -84,10 +78,7 @@ import { useCodemirror } from "@composables/codemirror"
 import { useI18n } from "@composables/i18n"
 import { useToast } from "@composables/toast"
 import { parseCurlToHoppRESTReq } from "~/helpers/curl"
-import {
+import { useCopyResponse } from "~/composables/lens-actions"
-  useCopyResponse,
-  useDownloadResponse,
-} from "~/composables/lens-actions"
 
 import IconWrapText from "~icons/lucide/wrap-text"
 import IconClipboard from "~icons/lucide/clipboard"
@@ -183,7 +174,6 @@ const handlePaste = async () => {
 }
 
 const { copyIcon, copyResponse } = useCopyResponse(curl)
-const { downloadIcon, downloadResponse } = useDownloadResponse("", curl)
 
 const clearContent = () => {
   curl.value = ""

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

@@ -72,7 +72,10 @@ const responseType = computed(() =>
 
 const { downloadIcon, downloadResponse } = useDownloadResponse(
   responseType.value,
-  computed(() => props.response.body)
+  computed(() => props.response.body),
+  t("filename.lens", {
+    request_name: props.response.req.name,
+  })
 )
 
 defineActionHandler("response.file.download", () => downloadResponse())

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

@@ -93,7 +93,10 @@ const WRAP_LINES = useNestedSetting("WRAP_LINES", "httpResponseBody")
 const { responseBodyText } = useResponseBody(props.response)
 const { downloadIcon, downloadResponse } = useDownloadResponse(
   "text/html",
-  responseBodyText
+  responseBodyText,
+  t("filename.lens", {
+    request_name: props.response.req.name,
+  })
 )
 const defaultPreview =
   persistenceService.getLocalConfig("lens_html_preview") === "true"

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

@@ -67,7 +67,10 @@ const responseType = computed(() =>
 
 const { downloadIcon, downloadResponse } = useDownloadResponse(
   responseType.value,
-  computed(() => props.response.body)
+  computed(() => props.response.body),
+  t("filename.lens", {
+    request_name: props.response.req.name,
+  })
 )
 
 watch(props.response, () => {

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

@@ -354,7 +354,10 @@ const filterResponseError = computed(() =>
 const { copyIcon, copyResponse } = useCopyResponse(jsonBodyText)
 const { downloadIcon, downloadResponse } = useDownloadResponse(
   "application/json",
-  jsonBodyText
+  jsonBodyText,
+  t("filename.lens", {
+    request_name: props.response.req.name,
+  })
 )
 
 // Template refs

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

@@ -53,7 +53,10 @@ const pdfsrc = computed(() =>
 
 const { downloadIcon, downloadResponse } = useDownloadResponse(
   "application/pdf",
-  computed(() => props.response.body)
+  computed(() => props.response.body),
+  t("filename.lens", {
+    request_name: props.response.req.name,
+  })
 )
 
 defineActionHandler("response.file.download", () => downloadResponse())

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

@@ -95,7 +95,10 @@ const responseType = computed(() =>
 
 const { downloadIcon, downloadResponse } = useDownloadResponse(
   responseType.value,
-  rawResponseBody
+  rawResponseBody,
+  t("filename.lens", {
+    request_name: props.response.req.name,
+  })
 )
 
 const { copyIcon, copyResponse } = useCopyResponse(responseBodyText)

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

@@ -72,7 +72,10 @@ const responseType = computed(() =>
 
 const { downloadIcon, downloadResponse } = useDownloadResponse(
   responseType.value,
-  computed(() => props.response.body)
+  computed(() => props.response.body),
+  t("filename.lens", {
+    request_name: props.response.req.name,
+  })
 )
 
 defineActionHandler("response.file.download", () => downloadResponse())

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

@@ -89,7 +89,10 @@ const responseType = computed(() =>
 
 const { downloadIcon, downloadResponse } = useDownloadResponse(
   responseType.value,
-  responseBodyText
+  responseBodyText,
+  t("filename.lens", {
+    request_name: props.response.req.name,
+  })
 )
 
 const { copyIcon, copyResponse } = useCopyResponse(responseBodyText)

packages/hoppscotch-common/src/components/realtime/LogEntry.vue

@@ -326,7 +326,8 @@ const { copyIcon, copyResponse } = useCopyResponse(logPayload)
 
 const { downloadIcon, downloadResponse } = useDownloadResponse(
   "application/json",
-  logPayload
+  logPayload,
+  t("filename.realtime_response")
 )
 
 const copyQueryIcon = refAutoReset<typeof IconCopy | typeof IconCheck>(

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

@@ -1,9 +1,6 @@
 import { HoppRESTResponse } from "@helpers/types/HoppRESTResponse"
 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"
@@ -58,7 +55,8 @@ export type downloadResponseReturnType = (() => void) | Ref<any>
 
 export function useDownloadResponse(
   contentType: string,
-  responseBody: Ref<string | ArrayBuffer>
+  responseBody: Ref<string | ArrayBuffer>,
+  filename: string
 ) {
   const downloadIcon = refAutoReset(IconDownload, 1000)
 
@@ -68,24 +66,6 @@ export function useDownloadResponse(
   const downloadResponse = async () => {
     const dataToWrite = responseBody.value
 
-    // Guess extension and filename
-    const file = new Blob([dataToWrite], { type: contentType })
-    const url = URL.createObjectURL(file)
-
-    const filename = pipe(
-      url,
-      S.split("/"),
-      RNEA.last,
-      S.split("#"),
-      RNEA.head,
-      S.split("?"),
-      RNEA.head
-    )
-
-    URL.revokeObjectURL(url)
-
-    console.log(filename)
-
     // TODO: Look at the mime type and determine extension ?
     const result = await platform.io.saveFileWithDialog({
       data: dataToWrite,