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

Co-authored-by: Dmitry Mukovkin <d.mukovkin@cft.ru>
Co-authored-by: nivedin <nivedinp@gmail.com>
This commit is contained in:
Dmitry
2024-09-19 19:53:40 +07:00
committed by GitHub
parent 875e2fae97
commit 5a06e52389
15 changed files with 56 additions and 46 deletions

View File

@@ -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",

View File

@@ -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() {

View File

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

View File

@@ -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>

View File

@@ -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 {
useCopyResponse,
useDownloadResponse,
} from "~/composables/lens-actions"
import { useCopyResponse } 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 = ""

View File

@@ -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())

View File

@@ -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"

View File

@@ -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, () => {

View File

@@ -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

View File

@@ -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())

View File

@@ -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)

View File

@@ -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())

View File

@@ -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)

View File

@@ -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>(

View File

@@ -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,