From 5a06e52389e2444b2d23081e343340dbc4cff60e Mon Sep 17 00:00:00 2001 From: Dmitry Date: Thu, 19 Sep 2024 19:53:40 +0700 Subject: [PATCH] feat(filename): added filename in download functional (#4329) Co-authored-by: Dmitry Mukovkin Co-authored-by: nivedin --- packages/hoppscotch-common/locales/en.json | 7 ++++++ .../src/components/cookies/EditCookie.vue | 5 ++-- .../src/components/graphql/Response.vue | 3 ++- .../src/components/http/Codegen.vue | 8 ++++++- .../src/components/http/ImportCurl.vue | 12 +--------- .../lenses/renderers/AudioLensRenderer.vue | 5 +++- .../lenses/renderers/HTMLLensRenderer.vue | 5 +++- .../lenses/renderers/ImageLensRenderer.vue | 5 +++- .../lenses/renderers/JSONLensRenderer.vue | 5 +++- .../lenses/renderers/PDFLensRenderer.vue | 5 +++- .../lenses/renderers/RawLensRenderer.vue | 5 +++- .../lenses/renderers/VideoLensRenderer.vue | 5 +++- .../lenses/renderers/XMLLensRenderer.vue | 5 +++- .../src/components/realtime/LogEntry.vue | 3 ++- .../src/composables/lens-actions.ts | 24 ++----------------- 15 files changed, 56 insertions(+), 46 deletions(-) diff --git a/packages/hoppscotch-common/locales/en.json b/packages/hoppscotch-common/locales/en.json index 745b6b3a6..312a8ff2d 100644 --- a/packages/hoppscotch-common/locales/en.json +++ b/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", diff --git a/packages/hoppscotch-common/src/components/cookies/EditCookie.vue b/packages/hoppscotch-common/src/components/cookies/EditCookie.vue index 79c80f1a0..bd9503e0c 100644 --- a/packages/hoppscotch-common/src/components/cookies/EditCookie.vue +++ b/packages/hoppscotch-common/src/components/cookies/EditCookie.vue @@ -187,8 +187,9 @@ function saveCookieChange() { const { copyIcon, copyResponse } = useCopyResponse(rawCookieString) const { downloadIcon, downloadResponse } = useDownloadResponse( - "", - rawCookieString + "text/plain", + rawCookieString, + t("filename.cookie_key_value_pairs") ) function clearContent() { diff --git a/packages/hoppscotch-common/src/components/graphql/Response.vue b/packages/hoppscotch-common/src/components/graphql/Response.vue index 8a867ee59..81d187504 100644 --- a/packages/hoppscotch-common/src/components/graphql/Response.vue +++ b/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( diff --git a/packages/hoppscotch-common/src/components/http/Codegen.vue b/packages/hoppscotch-common/src/components/http/Codegen.vue index d3a25058c..53c6ac894 100644 --- a/packages/hoppscotch-common/src/components/http/Codegen.vue +++ b/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, + }) +) diff --git a/packages/hoppscotch-common/src/components/http/ImportCurl.vue b/packages/hoppscotch-common/src/components/http/ImportCurl.vue index d9a319c32..36deeaa01 100644 --- a/packages/hoppscotch-common/src/components/http/ImportCurl.vue +++ b/packages/hoppscotch-common/src/components/http/ImportCurl.vue @@ -26,12 +26,6 @@ :icon="IconWrapText" @click.prevent="toggleNestedSetting('WRAP_LINES', 'importCurl')" /> - { } const { copyIcon, copyResponse } = useCopyResponse(curl) -const { downloadIcon, downloadResponse } = useDownloadResponse("", curl) const clearContent = () => { curl.value = "" diff --git a/packages/hoppscotch-common/src/components/lenses/renderers/AudioLensRenderer.vue b/packages/hoppscotch-common/src/components/lenses/renderers/AudioLensRenderer.vue index e06a67d34..4ebc08555 100644 --- a/packages/hoppscotch-common/src/components/lenses/renderers/AudioLensRenderer.vue +++ b/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()) diff --git a/packages/hoppscotch-common/src/components/lenses/renderers/HTMLLensRenderer.vue b/packages/hoppscotch-common/src/components/lenses/renderers/HTMLLensRenderer.vue index 4c74a4ef0..9d10236e1 100644 --- a/packages/hoppscotch-common/src/components/lenses/renderers/HTMLLensRenderer.vue +++ b/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" diff --git a/packages/hoppscotch-common/src/components/lenses/renderers/ImageLensRenderer.vue b/packages/hoppscotch-common/src/components/lenses/renderers/ImageLensRenderer.vue index c0142549f..1260f6eff 100644 --- a/packages/hoppscotch-common/src/components/lenses/renderers/ImageLensRenderer.vue +++ b/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, () => { diff --git a/packages/hoppscotch-common/src/components/lenses/renderers/JSONLensRenderer.vue b/packages/hoppscotch-common/src/components/lenses/renderers/JSONLensRenderer.vue index c9dff574d..8d7afe383 100644 --- a/packages/hoppscotch-common/src/components/lenses/renderers/JSONLensRenderer.vue +++ b/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 diff --git a/packages/hoppscotch-common/src/components/lenses/renderers/PDFLensRenderer.vue b/packages/hoppscotch-common/src/components/lenses/renderers/PDFLensRenderer.vue index e916e97d9..c41acd935 100644 --- a/packages/hoppscotch-common/src/components/lenses/renderers/PDFLensRenderer.vue +++ b/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()) diff --git a/packages/hoppscotch-common/src/components/lenses/renderers/RawLensRenderer.vue b/packages/hoppscotch-common/src/components/lenses/renderers/RawLensRenderer.vue index fc24434d2..9a5f7fedc 100644 --- a/packages/hoppscotch-common/src/components/lenses/renderers/RawLensRenderer.vue +++ b/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) diff --git a/packages/hoppscotch-common/src/components/lenses/renderers/VideoLensRenderer.vue b/packages/hoppscotch-common/src/components/lenses/renderers/VideoLensRenderer.vue index dc3db979f..455165412 100644 --- a/packages/hoppscotch-common/src/components/lenses/renderers/VideoLensRenderer.vue +++ b/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()) diff --git a/packages/hoppscotch-common/src/components/lenses/renderers/XMLLensRenderer.vue b/packages/hoppscotch-common/src/components/lenses/renderers/XMLLensRenderer.vue index faab1cc91..c94940899 100644 --- a/packages/hoppscotch-common/src/components/lenses/renderers/XMLLensRenderer.vue +++ b/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) diff --git a/packages/hoppscotch-common/src/components/realtime/LogEntry.vue b/packages/hoppscotch-common/src/components/realtime/LogEntry.vue index 907af3766..a760b1995 100644 --- a/packages/hoppscotch-common/src/components/realtime/LogEntry.vue +++ b/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( diff --git a/packages/hoppscotch-common/src/composables/lens-actions.ts b/packages/hoppscotch-common/src/composables/lens-actions.ts index b7bf90010..2f4624050 100644 --- a/packages/hoppscotch-common/src/composables/lens-actions.ts +++ b/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 export function useDownloadResponse( contentType: string, - responseBody: Ref + responseBody: Ref, + 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,