btwedutech/hoppscotch
5
0
Fork 0
Code Issues Pull Requests Packages Projects Releases 6 Wiki Activity

Merge branch 'main' into feat/short-code

Browse Source
This commit is contained in:
liyasthomas
2021-11-22 11:35:16 +05:30
parent 6ed4211004 1e08e7f73d
commit 56cdb79773
103 changed files with 2125 additions and 2203 deletions
Download Patch File Download Diff File Expand all files Collapse all files

8
packages/hoppscotch-app/components/http/Authorization.vue
View File

@@ -107,7 +107,7 @@
<ButtonSecondary
outline
:label="$t('app.documentation')"
to="https://docs.hoppscotch.io"
to="https://docs.hoppscotch.io/features/authorization"
blank
svg="external-link"
reverse
@@ -151,7 +151,7 @@
<SmartAnchor
class="link"
:label="`${$t('authorization.learn')} \xA0 →`"
to="https://docs.hoppscotch.io/"
to="https://docs.hoppscotch.io/features/authorization"
blank
/>
</div>
@@ -187,7 +187,7 @@
<SmartAnchor
class="link"
:label="`${$t('authorization.learn')} \xA0 →`"
to="https://docs.hoppscotch.io/"
to="https://docs.hoppscotch.io/features/authorization"
blank
/>
</div>
@@ -227,7 +227,7 @@
<SmartAnchor
class="link"
:label="`${$t('authorization.learn')} \xA0 →`"
to="https://docs.hoppscotch.io/"
to="https://docs.hoppscotch.io/features/authorization"
blank
/>
</div>

2
packages/hoppscotch-app/components/http/Body.vue
View File

@@ -77,7 +77,7 @@
<ButtonSecondary
outline
:label="`${$t('app.documentation')}`"
to="https://docs.hoppscotch.io"
to="https://docs.hoppscotch.io/features/body"
blank
svg="external-link"
reverse

17
packages/hoppscotch-app/components/http/CodegenModal.vue
View File

@@ -7,7 +7,7 @@
<template #body>
<div class="flex flex-col px-2">
<label for="requestType" class="px-4 pb-4">
{{ $t("request.choose_language") }}
{{ t("request.choose_language") }}
</label>
<tippy ref="options" interactive trigger="click" theme="popover" arrow>
<template #trigger>
@@ -62,13 +62,16 @@
</template>
<script setup lang="ts">
import { computed, ref, useContext, watch } from "@nuxtjs/composition-api"
import { computed, ref, watch } from "@nuxtjs/composition-api"
import { codegens, generateCodegenContext } from "~/helpers/codegen/codegen"
import { useCodemirror } from "~/helpers/editor/codemirror"
import { copyToClipboard } from "~/helpers/utils/clipboard"
import { getEffectiveRESTRequest } from "~/helpers/utils/EffectiveURL"
import { getCurrentEnvironment } from "~/newstore/environments"
import { getRESTRequest } from "~/newstore/RESTSession"
import { useI18n, useToast } from "~/helpers/utils/composables"
const t = useI18n()
const props = defineProps<{
show: boolean
@@ -78,11 +81,7 @@ const emit = defineEmits<{
(e: "hide-modal"): void
}>()
const {
$toast,
app: { i18n },
} = useContext()
const t = i18n.t.bind(i18n)
const toast = useToast()
const options = ref<any | null>(null)
@@ -126,9 +125,7 @@ const hideModal = () => emit("hide-modal")
const copyRequestCode = () => {
copyToClipboard(requestCode.value)
copyIcon.value = "check"
$toast.success(`${t("state.copied_to_clipboard")}`, {
icon: "content_paste",
})
toast.success(`${t("state.copied_to_clipboard")}`)
setTimeout(() => (copyIcon.value = "copy"), 1000)
}
</script>

70
packages/hoppscotch-app/components/http/Headers.vue
View File

@@ -14,32 +14,32 @@
"
>
<label class="font-semibold text-secondaryLight">
{{ $t("request.header_list") }}
{{ t("request.header_list") }}
</label>
<div class="flex">
<ButtonSecondary
v-tippy="{ theme: 'tooltip' }"
to="https://docs.hoppscotch.io/features/headers"
blank
:title="$t('app.wiki')"
:title="t('app.wiki')"
svg="help-circle"
/>
<ButtonSecondary
v-tippy="{ theme: 'tooltip' }"
:title="$t('action.clear_all')"
:title="t('action.clear_all')"
svg="trash-2"
@click.native="bulkMode ? clearBulkEditor() : clearContent()"
@click.native="clearContent()"
/>
<ButtonSecondary
v-tippy="{ theme: 'tooltip' }"
:title="$t('state.bulk_mode')"
:title="t('state.bulk_mode')"
svg="edit"
:class="{ '!text-accent': bulkMode }"
@click.native="bulkMode = !bulkMode"
/>
<ButtonSecondary
v-tippy="{ theme: 'tooltip' }"
:title="$t('add.new')"
:title="t('add.new')"
svg="plus"
:disabled="bulkMode"
@click.native="addHeader"
@@ -54,7 +54,7 @@
class="divide-x divide-dividerLight border-b border-dividerLight flex"
>
<SmartAutoComplete
:placeholder="`${$t('count.header', { count: index + 1 })}`"
:placeholder="`${t('count.header', { count: index + 1 })}`"
:source="commonHeaders"
:spellcheck="false"
:value="header.key"
@@ -78,7 +78,7 @@
/>
<SmartEnvInput
v-model="header.value"
:placeholder="`${$t('count.value', { count: index + 1 })}`"
:placeholder="`${t('count.value', { count: index + 1 })}`"
styles="
bg-transparent
flex
@@ -100,9 +100,9 @@
:title="
header.hasOwnProperty('active')
? header.active
? $t('action.turn_off')
: $t('action.turn_on')
: $t('action.turn_off')
? t('action.turn_off')
: t('action.turn_on')
: t('action.turn_off')
"
:svg="
header.hasOwnProperty('active')
@@ -126,7 +126,7 @@
<span>
<ButtonSecondary
v-tippy="{ theme: 'tooltip' }"
:title="$t('action.remove')"
:title="t('action.remove')"
svg="trash"
color="red"
@click.native="deleteHeader(index)"
@@ -154,14 +154,14 @@
w-16
inline-flex
"
:alt="$t('empty.headers')"
:alt="`${t('empty.headers')}`"
/>
<span class="text-center pb-4">
{{ $t("empty.headers") }}
{{ t("empty.headers") }}
</span>
<ButtonSecondary
filled
:label="`${$t('add.new')}`"
:label="`${t('add.new')}`"
svg="plus"
class="mb-4"
@click.native="addHeader"
@@ -172,7 +172,7 @@
</template>
<script setup lang="ts">
import { onBeforeUpdate, ref, useContext, watch } from "@nuxtjs/composition-api"
import { onBeforeUpdate, ref, watch } from "@nuxtjs/composition-api"
import { useCodemirror } from "~/helpers/editor/codemirror"
import {
addRESTHeader,
@@ -183,14 +183,16 @@ import {
updateRESTHeader,
} from "~/newstore/RESTSession"
import { commonHeaders } from "~/helpers/headers"
import { useReadonlyStream } from "~/helpers/utils/composables"
import {
useReadonlyStream,
useI18n,
useToast,
} from "~/helpers/utils/composables"
import { HoppRESTHeader } from "~/helpers/types/HoppRESTRequest"
const {
$toast,
app: { i18n },
} = useContext()
const t = i18n.t.bind(i18n)
const t = useI18n()
const toast = useToast()
const bulkMode = ref(false)
const bulkHeaders = ref("")
@@ -212,11 +214,9 @@ watch(bulkHeaders, () => {
value: item.substring(item.indexOf(":") + 1).trim(),
active: !item.trim().startsWith("//"),
}))
setRESTHeaders(transformation)
setRESTHeaders(transformation as HoppRESTHeader[])
} catch (e) {
$toast.error(`${t("error.something_went_wrong")}`, {
icon: "error_outline",
})
toast.error(`${t("error.something_went_wrong")}`)
console.error(e)
}
})
@@ -226,12 +226,13 @@ const headers$ = useReadonlyStream(restHeaders$, [])
watch(
headers$,
(newValue) => {
if (
(newValue[newValue.length - 1]?.key !== "" ||
newValue[newValue.length - 1]?.value !== "") &&
newValue.length
)
addHeader()
if (!bulkMode.value)
if (
(newValue[newValue.length - 1]?.key !== "" ||
newValue[newValue.length - 1]?.value !== "") &&
newValue.length
)
addHeader()
},
{ deep: true }
)
@@ -277,11 +278,10 @@ const deleteHeader = (index: number) => {
const deletedItem = headersBeforeDeletion[index]
if (deletedItem.key || deletedItem.value) {
$toast.success(t("state.deleted").toString(), {
icon: "delete",
toast.success(`${t("state.deleted")}`, {
action: [
{
text: t("action.undo").toString(),
text: `${t("action.undo")}`,
onClick: (_, toastObject) => {
setRESTHeaders(headersBeforeDeletion as HoppRESTHeader[])
editBulkHeadersLine(index, deletedItem)

21
packages/hoppscotch-app/components/http/ImportCurl.vue
View File

@@ -1,5 +1,5 @@
<template>
<SmartModal v-if="show" :title="`${$t('import.curl')}`" @close="hideModal">
<SmartModal v-if="show" :title="`${t('import.curl')}`" @close="hideModal">
<template #body>
<div class="flex flex-col px-2">
<div ref="curlEditor" class="border border-dividerLight rounded"></div>
@@ -8,11 +8,11 @@
<template #footer>
<span class="flex">
<ButtonPrimary
:label="`${$t('import.title')}`"
:label="`${t('import.title')}`"
@click.native="handleImport"
/>
<ButtonSecondary
:label="`${$t('action.cancel')}`"
:label="`${t('action.cancel')}`"
@click.native="hideModal"
/>
</span>
@@ -21,7 +21,7 @@
</template>
<script setup lang="ts">
import { ref, useContext } from "@nuxtjs/composition-api"
import { ref } from "@nuxtjs/composition-api"
import parseCurlCommand from "~/helpers/curlparser"
import { useCodemirror } from "~/helpers/editor/codemirror"
import {
@@ -30,12 +30,11 @@ import {
makeRESTRequest,
} from "~/helpers/types/HoppRESTRequest"
import { setRESTRequest } from "~/newstore/RESTSession"
import { useI18n, useToast } from "~/helpers/utils/composables"
const {
$toast,
app: { i18n },
} = useContext()
const t = i18n.t.bind(i18n)
const t = useI18n()
const toast = useToast()
const curl = ref("")
@@ -123,9 +122,7 @@ const handleImport = () => {
)
} catch (e) {
console.error(e)
$toast.error(`${t("error.curl_invalid_format")}`, {
icon: "error_outline",
})
toast.error(`${t("error.curl_invalid_format")}`)
}
hideModal()
}

26
packages/hoppscotch-app/components/http/OAuth2Authorization.vue
View File

@@ -48,7 +48,7 @@
<div class="p-2">
<ButtonSecondary
filled
:label="`${$t('authorization.generate_token')}`"
:label="`${t('authorization.generate_token')}`"
@click.native="handleAccessTokenRequest()"
/>
</div>
@@ -56,19 +56,21 @@
</template>
<script lang="ts">
import { Ref, useContext } from "@nuxtjs/composition-api"
import { pluckRef, useStream } from "~/helpers/utils/composables"
import { Ref } from "@nuxtjs/composition-api"
import {
pluckRef,
useI18n,
useStream,
useToast,
} from "~/helpers/utils/composables"
import { HoppRESTAuthOAuth2 } from "~/helpers/types/HoppRESTAuth"
import { restAuth$, setRESTAuth } from "~/newstore/RESTSession"
import { tokenRequest } from "~/helpers/oauth"
export default {
setup() {
const {
$toast,
app: { i18n },
} = useContext()
const $t = i18n.t.bind(i18n)
const t = useI18n()
const toast = useToast()
const auth = useStream(
restAuth$,
@@ -97,9 +99,7 @@ export default {
oidcDiscoveryURL.value === "" &&
(authURL.value === "" || accessTokenURL.value === "")
) {
$toast.error(`${$t("complete_config_urls")}`, {
icon: "error",
})
toast.error(`${t("complete_config_urls")}`)
return
}
try {
@@ -113,9 +113,7 @@ export default {
}
await tokenRequest(tokenReqParams)
} catch (e) {
$toast.error(`${e}`, {
icon: "code",
})
toast.error(`${e}`)
}
}

70
packages/hoppscotch-app/components/http/Parameters.vue
View File

@@ -14,32 +14,32 @@
"
>
<label class="font-semibold text-secondaryLight">
{{ $t("request.parameter_list") }}
{{ t("request.parameter_list") }}
</label>
<div class="flex">
<ButtonSecondary
v-tippy="{ theme: 'tooltip' }"
to="https://docs.hoppscotch.io/features/parameters"
blank
:title="$t('app.wiki')"
:title="t('app.wiki')"
svg="help-circle"
/>
<ButtonSecondary
v-tippy="{ theme: 'tooltip' }"
:title="$t('action.clear_all')"
:title="t('action.clear_all')"
svg="trash-2"
@click.native="bulkMode ? clearBulkEditor() : clearContent()"
@click.native="clearContent()"
/>
<ButtonSecondary
v-tippy="{ theme: 'tooltip' }"
:title="$t('state.bulk_mode')"
:title="t('state.bulk_mode')"
svg="edit"
:class="{ '!text-accent': bulkMode }"
@click.native="bulkMode = !bulkMode"
/>
<ButtonSecondary
v-tippy="{ theme: 'tooltip' }"
:title="$t('add.new')"
:title="t('add.new')"
svg="plus"
:disabled="bulkMode"
@click.native="addParam"
@@ -55,7 +55,7 @@
>
<SmartEnvInput
v-model="param.key"
:placeholder="`${$t('count.parameter', { count: index + 1 })}`"
:placeholder="`${t('count.parameter', { count: index + 1 })}`"
styles="
bg-transparent
flex
@@ -73,7 +73,7 @@
/>
<SmartEnvInput
v-model="param.value"
:placeholder="`${$t('count.value', { count: index + 1 })}`"
:placeholder="`${t('count.value', { count: index + 1 })}`"
styles="
bg-transparent
flex
@@ -95,9 +95,9 @@
:title="
param.hasOwnProperty('active')
? param.active
? $t('action.turn_off')
: $t('action.turn_on')
: $t('action.turn_off')
? t('action.turn_off')
: t('action.turn_on')
: t('action.turn_off')
"
:svg="
param.hasOwnProperty('active')
@@ -119,7 +119,7 @@
<span>
<ButtonSecondary
v-tippy="{ theme: 'tooltip' }"
:title="$t('action.remove')"
:title="t('action.remove')"
svg="trash"
color="red"
@click.native="deleteParam(index)"
@@ -147,13 +147,13 @@
w-16
inline-flex
"
:alt="$t('empty.parameters')"
:alt="`${t('empty.parameters')}`"
/>
<span class="text-center pb-4">
{{ $t("empty.parameters") }}
{{ t("empty.parameters") }}
</span>
<ButtonSecondary
:label="`${$t('add.new')}`"
:label="`${t('add.new')}`"
svg="plus"
filled
class="mb-4"
@@ -165,10 +165,14 @@
</template>
<script setup lang="ts">
import { ref, useContext, watch, onBeforeUpdate } from "@nuxtjs/composition-api"
import { ref, watch, onBeforeUpdate } from "@nuxtjs/composition-api"
import { useCodemirror } from "~/helpers/editor/codemirror"
import { HoppRESTParam } from "~/helpers/types/HoppRESTRequest"
import { useReadonlyStream } from "~/helpers/utils/composables"
import {
useReadonlyStream,
useI18n,
useToast,
} from "~/helpers/utils/composables"
import {
restParams$,
addRESTParam,
@@ -178,11 +182,9 @@ import {
setRESTParams,
} from "~/newstore/RESTSession"
const {
$toast,
app: { i18n },
} = useContext()
const t = i18n.t.bind(i18n)
const t = useI18n()
const toast = useToast()
const bulkMode = ref(false)
const bulkParams = ref("")
@@ -194,11 +196,9 @@ watch(bulkParams, () => {
value: item.substring(item.indexOf(":") + 1).trim(),
active: !item.trim().startsWith("//"),
}))
setRESTParams(transformation)
setRESTParams(transformation as HoppRESTParam[])
} catch (e) {
$toast.error(`${t("error.something_went_wrong")}`, {
icon: "error_outline",
})
toast.error(`${t("error.something_went_wrong")}`)
console.error(e)
}
})
@@ -219,12 +219,13 @@ const params$ = useReadonlyStream(restParams$, [])
watch(
params$,
(newValue) => {
if (
(newValue[newValue.length - 1]?.key !== "" ||
newValue[newValue.length - 1]?.value !== "") &&
newValue.length
)
addParam()
if (!bulkMode.value)
if (
(newValue[newValue.length - 1]?.key !== "" ||
newValue[newValue.length - 1]?.value !== "") &&
newValue.length
)
addParam()
},
{ deep: true }
)
@@ -270,11 +271,10 @@ const deleteParam = (index: number) => {
const deletedItem = parametersBeforeDeletion[index]
if (deletedItem.key || deletedItem.value) {
$toast.success(t("state.deleted").toString(), {
icon: "delete",
toast.success(`${t("state.deleted")}`, {
action: [
{
text: t("action.undo").toString(),
text: `${t("action.undo")}`,
onClick: (_, toastObject) => {
setRESTParams(parametersBeforeDeletion as HoppRESTParam[])
editBulkParamsLine(index, deletedItem)

24
packages/hoppscotch-app/components/http/PreRequestScript.vue
View File

@@ -1,5 +1,5 @@
<template>
<AppSection id="script" :label="`${$t('preRequest.script')}`">
<AppSection id="script" :label="`${t('preRequest.script')}`">
<div
class="
bg-primary
@@ -14,26 +14,26 @@
"
>
<label class="font-semibold text-secondaryLight">
{{ $t("preRequest.javascript_code") }}
{{ t("preRequest.javascript_code") }}
</label>
<div class="flex">
<ButtonSecondary
v-tippy="{ theme: 'tooltip' }"
to="https://docs.hoppscotch.io/features/pre-request-script"
blank
:title="$t('app.wiki')"
:title="t('app.wiki')"
svg="help-circle"
/>
<ButtonSecondary
v-tippy="{ theme: 'tooltip' }"
:title="$t('state.linewrap')"
:title="t('state.linewrap')"
:class="{ '!text-accent': linewrapEnabled }"
svg="corner-down-left"
@click.native.prevent="linewrapEnabled = !linewrapEnabled"
/>
<ButtonSecondary
v-tippy="{ theme: 'tooltip' }"
:title="$t('action.clear')"
:title="t('action.clear')"
svg="trash-2"
@click.native="clearContent"
/>
@@ -57,15 +57,15 @@
"
>
<div class="text-secondaryLight pb-2">
{{ $t("helpers.pre_request_script") }}
{{ t("helpers.pre_request_script") }}
</div>
<SmartAnchor
:label="`${$t('preRequest.learn')}`"
:label="`${t('preRequest.learn')}`"
to="https://docs.hoppscotch.io/features/pre-request-script"
blank
/>
<h4 class="font-bold text-secondaryLight pt-6">
{{ $t("preRequest.snippets") }}
{{ t("preRequest.snippets") }}
</h4>
<div class="flex flex-col pt-4">
<TabSecondary
@@ -82,17 +82,15 @@
</template>
<script setup lang="ts">
import { reactive, ref, useContext } from "@nuxtjs/composition-api"
import { reactive, ref } from "@nuxtjs/composition-api"
import { usePreRequestScript } from "~/newstore/RESTSession"
import snippets from "~/helpers/preRequestScriptSnippets"
import { useCodemirror } from "~/helpers/editor/codemirror"
import linter from "~/helpers/editor/linting/preRequest"
import completer from "~/helpers/editor/completion/preRequest"
import { useI18n } from "~/helpers/utils/composables"
const {
app: { i18n },
} = useContext()
const t = i18n.t.bind(i18n)
const t = useI18n()
const preRequestScript = usePreRequestScript()

36
packages/hoppscotch-app/components/http/RawBody.vue
View File

@@ -14,26 +14,26 @@
"
>
<label class="font-semibold text-secondaryLight">
{{ $t("request.raw_body") }}
{{ t("request.raw_body") }}
</label>
<div class="flex">
<ButtonSecondary
v-tippy="{ theme: 'tooltip' }"
to="https://docs.hoppscotch.io/features/body"
blank
:title="$t('app.wiki')"
:title="t('app.wiki')"
svg="help-circle"
/>
<ButtonSecondary
v-tippy="{ theme: 'tooltip' }"
:title="$t('state.linewrap')"
:title="t('state.linewrap')"
:class="{ '!text-accent': linewrapEnabled }"
svg="corner-down-left"
@click.native.prevent="linewrapEnabled = !linewrapEnabled"
/>
<ButtonSecondary
v-tippy="{ theme: 'tooltip' }"
:title="$t('action.clear')"
:title="t('action.clear')"
svg="trash-2"
@click.native="clearContent"
/>
@@ -41,14 +41,14 @@
v-if="contentType && contentType.endsWith('json')"
ref="prettifyRequest"
v-tippy="{ theme: 'tooltip' }"
:title="$t('action.prettify')"
:title="t('action.prettify')"
:svg="prettifyIcon"
@click.native="prettifyRequestBody"
/>
<label for="payload">
<ButtonSecondary
v-tippy="{ theme: 'tooltip' }"
:title="$t('import.json')"
:title="t('import.json')"
svg="file-plus"
@click.native="$refs.payload.click()"
/>
@@ -67,21 +67,19 @@
</template>
<script setup lang="ts">
import { computed, reactive, ref, useContext } from "@nuxtjs/composition-api"
import { computed, reactive, ref } from "@nuxtjs/composition-api"
import { useCodemirror } from "~/helpers/editor/codemirror"
import { getEditorLangForMimeType } from "~/helpers/editorutils"
import { pluckRef } from "~/helpers/utils/composables"
import { pluckRef, useI18n, useToast } from "~/helpers/utils/composables"
import { useRESTRequestBody } from "~/newstore/RESTSession"
const t = useI18n()
const props = defineProps<{
contentType: string
}>()
const {
$toast,
app: { i18n },
} = useContext()
const t = i18n.t.bind(i18n)
const toast = useToast()
const rawParamsBody = pluckRef(useRESTRequestBody(), "body")
const prettifyIcon = ref("wand")
@@ -118,13 +116,9 @@ const uploadPayload = (e: InputEvent) => {
rawParamsBody.value = target?.result
}
reader.readAsText(file)
$toast.success(`${t("state.file_imported")}`, {
icon: "attach_file",
})
toast.success(`${t("state.file_imported")}`)
} else {
$toast.error(`${t("action.choose_file")}`, {
icon: "attach_file",
})
toast.error(`${t("action.choose_file")}`)
}
}
const prettifyRequestBody = () => {
@@ -135,9 +129,7 @@ const prettifyRequestBody = () => {
setTimeout(() => (prettifyIcon.value = "wand"), 1000)
} catch (e) {
console.error(e)
$toast.error(`${t("error.json_prettify_invalid_body")}`, {
icon: "error_outline",
})
toast.error(`${t("error.json_prettify_invalid_body")}`)
}
}
</script>

49
packages/hoppscotch-app/components/http/Request.vue
View File

@@ -43,7 +43,7 @@
"
:value="newMethod"
:readonly="!isCustomMethod"
:placeholder="`${$t('request.method')}`"
:placeholder="`${t('request.method')}`"
@input="onSelectMethod($event.target.value)"
/>
</span>
@@ -60,7 +60,7 @@
<div class="flex flex-1">
<SmartEnvInput
v-model="newEndpoint"
:placeholder="`${$t('request.url')}`"
:placeholder="`${t('request.url')}`"
styles="
bg-primaryLight
border border-divider
@@ -83,7 +83,7 @@
<ButtonPrimary
id="send"
class="rounded-r-none flex-1 min-w-20"
:label="`${!loading ? $t('action.send') : $t('action.cancel')}`"
:label="`${!loading ? t('action.send') : t('action.cancel')}`"
@click.native="!loading ? newSendRequest() : cancelRequest()"
/>
<span class="flex">
@@ -98,7 +98,7 @@
<ButtonPrimary class="rounded-l-none" filled svg="chevron-down" />
</template>
<SmartItem
:label="`${$t('import.curl')}`"
:label="`${t('import.curl')}`"
svg="file-code"
@click.native="
() => {
@@ -108,7 +108,7 @@
"
/>
<SmartItem
:label="`${$t('show.code')}`"
:label="`${t('show.code')}`"
svg="code-2"
@click.native="
() => {
@@ -119,7 +119,7 @@
/>
<SmartItem
ref="clearAll"
:label="`${$t('action.clear_all')}`"
:label="`${t('action.clear_all')}`"
svg="rotate-ccw"
@click.native="
() => {
@@ -134,7 +134,7 @@
class="rounded rounded-r-none ml-2"
:label="
windowInnerWidth.x.value >= 768 && COLUMN_LAYOUT
? `${$t('request.save')}`
? `${t('request.save')}`
: ''
"
filled
@@ -159,7 +159,7 @@
<input
id="request-name"
v-model="requestName"
:placeholder="`${$t('request.name')}`"
:placeholder="`${t('request.name')}`"
name="request-name"
type="text"
autocomplete="off"
@@ -179,7 +179,7 @@
/>
<SmartItem
ref="saveRequest"
:label="`${$t('request.save_as')}`"
:label="`${t('request.save_as')}`"
svg="folder-plus"
@click.native="
() => {
@@ -208,7 +208,7 @@
</template>
<script setup lang="ts">
import { computed, ref, useContext, watch } from "@nuxtjs/composition-api"
import { computed, ref, watch } from "@nuxtjs/composition-api"
import { isRight } from "fp-ts/lib/Either"
import * as E from "fp-ts/Either"
import {
@@ -228,6 +228,8 @@ import {
useStreamSubscriber,
useStream,
useNuxt,
useI18n,
useToast,
} from "~/helpers/utils/composables"
import { defineActionHandler } from "~/helpers/actions"
import { copyToClipboard } from "~/helpers/utils/clipboard"
@@ -237,6 +239,8 @@ import { apolloClient } from "~/helpers/apollo"
import useWindowSize from "~/helpers/utils/useWindowSize"
import { createShortcode } from "~/helpers/backend/mutations/Shortcode"
const t = useI18n()
const methods = [
"GET",
"POST",
@@ -250,12 +254,9 @@ const methods = [
"CUSTOM",
]
const {
$toast,
app: { i18n },
} = useContext()
const toast = useToast()
const nuxt = useNuxt()
const t = i18n.t.bind(i18n)
const { subscribeToStream } = useStreamSubscriber()
const newEndpoint = useStream(restEndpoint$, "", setRESTEndpoint)
@@ -373,7 +374,7 @@ const copyShareLink = (shareLink: string) => {
} else {
copyLinkIcon.value = "check"
copyToClipboard(`https://hopp.sh/r${shareLink}`)
$toast.success(`${t("state.copied_to_clipboard")}`, {
toast.success(`${t("state.copied_to_clipboard")}`, {
icon: "content_paste",
})
setTimeout(() => (copyLinkIcon.value = "copy"), 2000)
@@ -415,9 +416,7 @@ const saveRequest = () => {
if (saveCtx.originLocation === "user-collection") {
editRESTRequest(saveCtx.folderPath, saveCtx.requestIndex, getRESTRequest())
$toast.success(`${t("request.saved")}`, {
icon: "playlist_add_check",
})
toast.success(`${t("request.saved")}`)
} else if (saveCtx.originLocation === "team-collection") {
const req = getRESTRequest()
@@ -430,20 +429,14 @@ const saveRequest = () => {
saveCtx.requestID
)
.then(() => {
$toast.success(`${t("request.saved")}`, {
icon: "playlist_add_check",
})
toast.success(`${t("request.saved")}`)
})
.catch(() => {
$toast.error(t("profile.no_permission").toString(), {
icon: "error_outline",
})
toast.error(`${t("profile.no_permission")}`)
})
} catch (error) {
showSaveRequestModal.value = true
$toast.error(t("error.something_went_wrong").toString(), {
icon: "error_outline",
})
toast.error(`${t("error.something_went_wrong")}`)
console.error(error)
}
}

46
packages/hoppscotch-app/components/http/ResponseMeta.vue
View File

@@ -1,5 +1,18 @@
<template>
<div class="bg-primary flex p-4 top-0 z-10 sticky items-center">
<div
class="
bg-primary
flex
p-4
top-0
z-10
sticky
items-center
overflow-auto
hide-scrollbar
whitespace-nowrap
"
>
<div
v-if="response == null"
class="
@@ -12,16 +25,16 @@
<div class="flex space-x-2 pb-4 my-4">
<div class="flex flex-col space-y-4 text-right items-end">
<span class="flex flex-1 items-center">
{{ $t("shortcut.request.send_request") }}
{{ t("shortcut.request.send_request") }}
</span>
<span class="flex flex-1 items-center">
{{ $t("shortcut.general.show_all") }}
{{ t("shortcut.general.show_all") }}
</span>
<span class="flex flex-1 items-center">
{{ $t("shortcut.general.command_menu") }}
{{ t("shortcut.general.command_menu") }}
</span>
<span class="flex flex-1 items-center">
{{ $t("shortcut.general.help_menu") }}
{{ t("shortcut.general.help_menu") }}
</span>
</div>
<div class="flex flex-col space-y-4">
@@ -42,8 +55,8 @@
</div>
</div>
<ButtonSecondary
:label="$t('app.documentation')"
to="https://docs.hoppscotch.io"
:label="t('app.documentation')"
to="https://docs.hoppscotch.io/features/response"
svg="external-link"
blank
outline
@@ -56,7 +69,7 @@
class="flex flex-col items-center justify-center"
>
<SmartSpinner class="my-4" />
<span class="text-secondaryLight">{{ $t("state.loading") }}</span>
<span class="text-secondaryLight">{{ t("state.loading") }}</span>
</div>
<div
v-if="response.type === 'network_fail'"
@@ -73,13 +86,13 @@
w-32
inline-flex
"
:alt="$t('empty.network_fail')"
:alt="`${t('error.network_fail')}`"
/>
<span class="text-center font-semibold mb-2">
{{ $t("error.network_fail") }}
{{ t("error.network_fail") }}
</span>
<span class="text-center text-secondaryLight mb-4 max-w-sm">
{{ $t("helpers.network_fail") }}
{{ t("helpers.network_fail") }}
</span>
<AppInterceptor />
</div>
@@ -89,15 +102,15 @@
class="font-semibold space-x-4"
>
<span v-if="response.statusCode">
<span class="text-secondary"> {{ $t("response.status") }}: </span>
{{ response.statusCode || $t("state.waiting_send_request") }}
<span class="text-secondary"> {{ t("response.status") }}: </span>
{{ response.statusCode || t("state.waiting_send_request") }}
</span>
<span v-if="response.meta && response.meta.responseDuration">
<span class="text-secondary"> {{ $t("response.time") }}: </span>
<span class="text-secondary"> {{ t("response.time") }}: </span>
{{ `${response.meta.responseDuration} ms` }}
</span>
<span v-if="response.meta && response.meta.responseSize">
<span class="text-secondary"> {{ $t("response.size") }}: </span>
<span class="text-secondary"> {{ t("response.size") }}: </span>
{{ `${response.meta.responseSize} B` }}
</span>
</div>
@@ -110,6 +123,9 @@ import { computed } from "@nuxtjs/composition-api"
import findStatusGroup from "~/helpers/findStatusGroup"
import { HoppRESTResponse } from "~/helpers/types/HoppRESTResponse"
import { getPlatformSpecialKey as getSpecialKey } from "~/helpers/platformutils"
import { useI18n } from "~/helpers/utils/composables"
const t = useI18n()
const props = defineProps<{
response: HoppRESTResponse

24
packages/hoppscotch-app/components/http/TestResult.vue
View File

@@ -1,5 +1,5 @@
<template>
<AppSection :label="`${$t('test.results')}`">
<AppSection :label="`${t('test.results')}`">
<div
v-if="
testResults &&
@@ -20,11 +20,11 @@
"
>
<label class="font-semibold text-secondaryLight">
{{ $t("test.report") }}
{{ t("test.report") }}
</label>
<ButtonSecondary
v-tippy="{ theme: 'tooltip' }"
:title="$t('action.clear')"
:title="t('action.clear')"
svg="trash-2"
@click.native="clearContent()"
/>
@@ -64,9 +64,7 @@
<span class="text-secondaryLight">
{{
` \xA0 — \xA0 ${
result.status === "pass"
? $t("test.passed")
: $t("test.failed")
result.status === "pass" ? t("test.passed") : t("test.failed")
}`
}}
</span>
@@ -82,18 +80,18 @@
:src="`/images/states/${$colorMode.value}/validation.svg`"
loading="lazy"
class="flex-col my-4 object-contain object-center h-16 w-16 inline-flex"
:alt="$t('empty.tests')"
:alt="`${t('empty.tests')}`"
/>
<span class="text-center pb-2">
{{ $t("empty.tests") }}
{{ t("empty.tests") }}
</span>
<span class="text-center pb-4">
{{ $t("helpers.tests") }}
{{ t("helpers.tests") }}
</span>
<ButtonSecondary
outline
:label="`${$t('action.learn_more')}`"
to="https://docs.hoppscotch.io"
:label="`${t('action.learn_more')}`"
to="https://docs.hoppscotch.io/features/tests"
blank
svg="external-link"
reverse
@@ -104,9 +102,11 @@
</template>
<script setup lang="ts">
import { useReadonlyStream } from "~/helpers/utils/composables"
import { useReadonlyStream, useI18n } from "~/helpers/utils/composables"
import { restTestResults$, setRESTTestResults } from "~/newstore/RESTSession"
const t = useI18n()
const testResults = useReadonlyStream(restTestResults$, null)
const clearContent = () => setRESTTestResults(null)

24
packages/hoppscotch-app/components/http/Tests.vue
View File

@@ -1,5 +1,5 @@
<template>
<AppSection id="script" :label="`${$t('test.script')}`">
<AppSection id="script" :label="`${t('test.script')}`">
<div
class="
bg-primary
@@ -14,26 +14,26 @@
"
>
<label class="font-semibold text-secondaryLight">
{{ $t("test.javascript_code") }}
{{ t("test.javascript_code") }}
</label>
<div class="flex">
<ButtonSecondary
v-tippy="{ theme: 'tooltip' }"
to="https://docs.hoppscotch.io/features/tests"
blank
:title="$t('app.wiki')"
:title="t('app.wiki')"
svg="help-circle"
/>
<ButtonSecondary
v-tippy="{ theme: 'tooltip' }"
:title="$t('state.linewrap')"
:title="t('state.linewrap')"
:class="{ '!text-accent': linewrapEnabled }"
svg="corner-down-left"
@click.native.prevent="linewrapEnabled = !linewrapEnabled"
/>
<ButtonSecondary
v-tippy="{ theme: 'tooltip' }"
:title="$t('action.clear')"
:title="t('action.clear')"
svg="trash-2"
@click.native="clearContent"
/>
@@ -57,15 +57,15 @@
"
>
<div class="text-secondaryLight pb-2">
{{ $t("helpers.post_request_tests") }}
{{ t("helpers.post_request_tests") }}
</div>
<SmartAnchor
:label="`${$t('test.learn')}`"
:label="`${t('test.learn')}`"
to="https://docs.hoppscotch.io/features/tests"
blank
/>
<h4 class="font-bold text-secondaryLight pt-6">
{{ $t("test.snippets") }}
{{ t("test.snippets") }}
</h4>
<div class="flex flex-col pt-4">
<TabSecondary
@@ -82,17 +82,15 @@
</template>
<script setup lang="ts">
import { reactive, ref, useContext } from "@nuxtjs/composition-api"
import { reactive, ref } from "@nuxtjs/composition-api"
import { useTestScript } from "~/newstore/RESTSession"
import testSnippets from "~/helpers/testSnippets"
import { useCodemirror } from "~/helpers/editor/codemirror"
import linter from "~/helpers/editor/linting/testScript"
import completer from "~/helpers/editor/completion/testScript"
import { useI18n } from "~/helpers/utils/composables"
const {
app: { i18n },
} = useContext()
const t = i18n.t.bind(i18n)
const t = useI18n()
const testScript = useTestScript()