feat: added codegen tab in the sidebar (#4099)
This commit is contained in:
Anwarul Islam
GitHub
253
packages/hoppscotch-common/src/components/http/Codegen.vue
Normal file
253
packages/hoppscotch-common/src/components/http/Codegen.vue
Normal file
@@ -0,0 +1,253 @@
|
||||
<template>
|
||||
<div class="flex flex-col">
|
||||
<label for="requestType" class="px-4 pb-4" v-if="!hideLabel">
|
||||
{{ t("request.choose_language") }}
|
||||
</label>
|
||||
<tippy
|
||||
interactive
|
||||
trigger="click"
|
||||
theme="popover"
|
||||
placement="bottom"
|
||||
:on-shown="() => tippyActions.focus()"
|
||||
>
|
||||
<HoppSmartSelectWrapper>
|
||||
<HoppButtonSecondary
|
||||
:label="
|
||||
CodegenDefinitions.find((x) => x.name === codegenType)!.caption
|
||||
"
|
||||
outline
|
||||
class="flex-1 pr-8"
|
||||
/>
|
||||
</HoppSmartSelectWrapper>
|
||||
<template #content="{ hide }">
|
||||
<div class="flex flex-col space-y-2">
|
||||
<div class="sticky top-0 z-10 flex-shrink-0 overflow-x-auto">
|
||||
<input
|
||||
v-model="searchQuery"
|
||||
type="search"
|
||||
autocomplete="off"
|
||||
class="input flex w-full !bg-primaryContrast p-4 py-2"
|
||||
:placeholder="`${t('action.search')}`"
|
||||
/>
|
||||
</div>
|
||||
<div
|
||||
ref="tippyActions"
|
||||
class="flex flex-col focus:outline-none"
|
||||
tabindex="0"
|
||||
@keyup.escape="hide()"
|
||||
>
|
||||
<HoppSmartItem
|
||||
v-for="codegen in filteredCodegenDefinitions"
|
||||
:key="codegen.name"
|
||||
:label="codegen.caption"
|
||||
:info-icon="codegen.name === codegenType ? IconCheck : undefined"
|
||||
:active-info-icon="codegen.name === codegenType"
|
||||
@click="
|
||||
() => {
|
||||
codegenType = codegen.name
|
||||
hide()
|
||||
}
|
||||
"
|
||||
/>
|
||||
<HoppSmartPlaceholder
|
||||
v-if="filteredCodegenDefinitions.length === 0"
|
||||
:text="`${t('state.nothing_found')} ‟${searchQuery}”`"
|
||||
>
|
||||
<template #icon>
|
||||
<icon-lucide-search class="svg-icons opacity-75" />
|
||||
</template>
|
||||
</HoppSmartPlaceholder>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
</tippy>
|
||||
<div
|
||||
v-if="errorState"
|
||||
class="mt-4 w-full overflow-auto whitespace-normal rounded bg-primaryLight px-4 py-2 font-mono text-red-400"
|
||||
>
|
||||
{{ t("error.something_went_wrong") }}
|
||||
</div>
|
||||
<div
|
||||
v-else-if="codegenType"
|
||||
class="mt-4 rounded border border-dividerLight"
|
||||
>
|
||||
<div class="flex items-center justify-between pl-4">
|
||||
<label class="truncate font-semibold text-secondaryLight">
|
||||
{{ t("request.generated_code") }}
|
||||
</label>
|
||||
<div class="flex items-center">
|
||||
<HoppButtonSecondary
|
||||
v-tippy="{ theme: 'tooltip' }"
|
||||
:title="t('state.linewrap')"
|
||||
:class="{ '!text-accent': WRAP_LINES }"
|
||||
:icon="IconWrapText"
|
||||
@click.prevent="toggleNestedSetting('WRAP_LINES', 'codeGen')"
|
||||
/>
|
||||
<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')"
|
||||
:icon="copyIcon"
|
||||
@click="copyResponse"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
<div
|
||||
ref="generatedCode"
|
||||
class="rounded-b border-t border-dividerLight"
|
||||
></div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import { useCodemirror } from "@composables/codemirror"
|
||||
import { useI18n } from "@composables/i18n"
|
||||
import { Environment, makeRESTRequest } from "@hoppscotch/data"
|
||||
import * as O from "fp-ts/Option"
|
||||
import { computed, reactive, ref } from "vue"
|
||||
import {
|
||||
useCopyResponse,
|
||||
useDownloadResponse,
|
||||
} from "~/composables/lens-actions"
|
||||
import {
|
||||
CodegenDefinitions,
|
||||
CodegenName,
|
||||
generateCode,
|
||||
} from "~/helpers/new-codegen"
|
||||
import {
|
||||
getEffectiveRESTRequest,
|
||||
resolvesEnvsInBody,
|
||||
} from "~/helpers/utils/EffectiveURL"
|
||||
import { getAggregateEnvs } from "~/newstore/environments"
|
||||
|
||||
import { useService } from "dioc/vue"
|
||||
import cloneDeep from "lodash-es/cloneDeep"
|
||||
import { onMounted } from "vue"
|
||||
import { useNestedSetting } from "~/composables/settings"
|
||||
import { toggleNestedSetting } from "~/newstore/settings"
|
||||
import { platform } from "~/platform"
|
||||
import { RESTTabService } from "~/services/tab/rest"
|
||||
import IconCheck from "~icons/lucide/check"
|
||||
import IconWrapText from "~icons/lucide/wrap-text"
|
||||
|
||||
const t = useI18n()
|
||||
|
||||
const tabs = useService(RESTTabService)
|
||||
const request = computed(() =>
|
||||
cloneDeep(tabs.currentActiveTab.value.document.request)
|
||||
)
|
||||
const codegenType = ref<CodegenName>("shell-curl")
|
||||
const errorState = ref(false)
|
||||
|
||||
defineProps({
|
||||
hideLabel: {
|
||||
type: Boolean,
|
||||
default: false,
|
||||
},
|
||||
})
|
||||
|
||||
const emit = defineEmits<{
|
||||
(e: "request-code", value: string): void
|
||||
}>()
|
||||
|
||||
const requestCode = computed(() => {
|
||||
const aggregateEnvs = getAggregateEnvs()
|
||||
const requestVariables = request.value.requestVariables.map(
|
||||
(requestVariable) => {
|
||||
if (requestVariable.active)
|
||||
return {
|
||||
key: requestVariable.key,
|
||||
value: requestVariable.value,
|
||||
secret: false,
|
||||
}
|
||||
return {}
|
||||
}
|
||||
)
|
||||
const env: Environment = {
|
||||
v: 1,
|
||||
id: "env",
|
||||
name: "Env",
|
||||
variables: [
|
||||
...(requestVariables as Environment["variables"]),
|
||||
...aggregateEnvs,
|
||||
],
|
||||
}
|
||||
const effectiveRequest = getEffectiveRESTRequest(request.value, env)
|
||||
|
||||
const result = generateCode(
|
||||
codegenType.value,
|
||||
makeRESTRequest({
|
||||
...effectiveRequest,
|
||||
body: resolvesEnvsInBody(effectiveRequest.body, env),
|
||||
headers: effectiveRequest.effectiveFinalHeaders.map((header) => ({
|
||||
...header,
|
||||
active: true,
|
||||
})),
|
||||
params: effectiveRequest.effectiveFinalParams.map((param) => ({
|
||||
...param,
|
||||
active: true,
|
||||
})),
|
||||
endpoint: effectiveRequest.effectiveFinalURL,
|
||||
requestVariables: effectiveRequest.effectiveFinalRequestVariables.map(
|
||||
(requestVariable) => ({
|
||||
...requestVariable,
|
||||
active: true,
|
||||
})
|
||||
),
|
||||
})
|
||||
)
|
||||
|
||||
if (O.isSome(result)) {
|
||||
errorState.value = false
|
||||
emit("request-code", result.value)
|
||||
return result.value
|
||||
}
|
||||
errorState.value = true
|
||||
return ""
|
||||
})
|
||||
|
||||
// Template refs
|
||||
const tippyActions = ref<any | null>(null)
|
||||
const generatedCode = ref<any | null>(null)
|
||||
const WRAP_LINES = useNestedSetting("WRAP_LINES", "codeGen")
|
||||
|
||||
useCodemirror(
|
||||
generatedCode,
|
||||
requestCode,
|
||||
reactive({
|
||||
extendedEditorConfig: {
|
||||
mode: "text/plain",
|
||||
readOnly: true,
|
||||
lineWrapping: WRAP_LINES,
|
||||
},
|
||||
linter: null,
|
||||
completer: null,
|
||||
environmentHighlights: false,
|
||||
})
|
||||
)
|
||||
|
||||
onMounted(() => {
|
||||
platform.analytics?.logEvent({
|
||||
type: "HOPP_REST_CODEGEN_OPENED",
|
||||
})
|
||||
})
|
||||
|
||||
const searchQuery = ref("")
|
||||
|
||||
const filteredCodegenDefinitions = computed(() => {
|
||||
return CodegenDefinitions.filter((obj) =>
|
||||
Object.values(obj).some((val) =>
|
||||
val.toLowerCase().includes(searchQuery.value.toLowerCase())
|
||||
)
|
||||
)
|
||||
})
|
||||
|
||||
const { copyIcon, copyResponse } = useCopyResponse(requestCode)
|
||||
const { downloadIcon, downloadResponse } = useDownloadResponse("", requestCode)
|
||||
</script>
|
||||
@@ -6,110 +6,7 @@
|
||||
@close="hideModal"
|
||||
>
|
||||
<template #body>
|
||||
<div class="flex flex-col">
|
||||
<label for="requestType" class="px-4 pb-4">
|
||||
{{ t("request.choose_language") }}
|
||||
</label>
|
||||
<tippy
|
||||
interactive
|
||||
trigger="click"
|
||||
theme="popover"
|
||||
placement="bottom"
|
||||
:on-shown="() => tippyActions.focus()"
|
||||
>
|
||||
<HoppSmartSelectWrapper>
|
||||
<HoppButtonSecondary
|
||||
:label="
|
||||
CodegenDefinitions.find((x) => x.name === codegenType)!.caption
|
||||
"
|
||||
outline
|
||||
class="flex-1 pr-8"
|
||||
/>
|
||||
</HoppSmartSelectWrapper>
|
||||
<template #content="{ hide }">
|
||||
<div class="flex flex-col space-y-2">
|
||||
<div class="sticky top-0 z-10 flex-shrink-0 overflow-x-auto">
|
||||
<input
|
||||
v-model="searchQuery"
|
||||
type="search"
|
||||
autocomplete="off"
|
||||
class="input flex w-full !bg-primaryContrast p-4 py-2"
|
||||
:placeholder="`${t('action.search')}`"
|
||||
/>
|
||||
</div>
|
||||
<div
|
||||
ref="tippyActions"
|
||||
class="flex flex-col focus:outline-none"
|
||||
tabindex="0"
|
||||
@keyup.escape="hide()"
|
||||
>
|
||||
<HoppSmartItem
|
||||
v-for="codegen in filteredCodegenDefinitions"
|
||||
:key="codegen.name"
|
||||
:label="codegen.caption"
|
||||
:info-icon="codegen.name === codegenType ? IconCheck : null"
|
||||
:active-info-icon="codegen.name === codegenType"
|
||||
@click="
|
||||
() => {
|
||||
codegenType = codegen.name
|
||||
hide()
|
||||
}
|
||||
"
|
||||
/>
|
||||
<HoppSmartPlaceholder
|
||||
v-if="filteredCodegenDefinitions.length === 0"
|
||||
:text="`${t('state.nothing_found')} ‟${searchQuery}”`"
|
||||
>
|
||||
<template #icon>
|
||||
<icon-lucide-search class="svg-icons opacity-75" />
|
||||
</template>
|
||||
</HoppSmartPlaceholder>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
</tippy>
|
||||
<div
|
||||
v-if="errorState"
|
||||
class="mt-4 w-full overflow-auto whitespace-normal rounded bg-primaryLight px-4 py-2 font-mono text-red-400"
|
||||
>
|
||||
{{ t("error.something_went_wrong") }}
|
||||
</div>
|
||||
<div
|
||||
v-else-if="codegenType"
|
||||
class="mt-4 rounded border border-dividerLight"
|
||||
>
|
||||
<div class="flex items-center justify-between pl-4">
|
||||
<label class="truncate font-semibold text-secondaryLight">
|
||||
{{ t("request.generated_code") }}
|
||||
</label>
|
||||
<div class="flex items-center">
|
||||
<HoppButtonSecondary
|
||||
v-tippy="{ theme: 'tooltip' }"
|
||||
:title="t('state.linewrap')"
|
||||
:class="{ '!text-accent': WRAP_LINES }"
|
||||
:icon="IconWrapText"
|
||||
@click.prevent="toggleNestedSetting('WRAP_LINES', 'codeGen')"
|
||||
/>
|
||||
<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')"
|
||||
:icon="copyIcon"
|
||||
@click="copyResponse"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
<div
|
||||
ref="generatedCode"
|
||||
class="rounded-b border-t border-dividerLight"
|
||||
></div>
|
||||
</div>
|
||||
</div>
|
||||
<HttpCodegen @request-code="requestCode = $event" />
|
||||
</template>
|
||||
<template #footer>
|
||||
<span class="flex space-x-2">
|
||||
@@ -131,38 +28,15 @@
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import { computed, reactive, ref, watch } from "vue"
|
||||
import * as O from "fp-ts/Option"
|
||||
import { Environment, makeRESTRequest } from "@hoppscotch/data"
|
||||
import { refAutoReset } from "@vueuse/core"
|
||||
import { useCodemirror } from "@composables/codemirror"
|
||||
import { copyToClipboard } from "~/helpers/utils/clipboard"
|
||||
import {
|
||||
getEffectiveRESTRequest,
|
||||
resolvesEnvsInBody,
|
||||
} from "~/helpers/utils/EffectiveURL"
|
||||
import { getAggregateEnvs } from "~/newstore/environments"
|
||||
import { useI18n } from "@composables/i18n"
|
||||
import { useToast } from "@composables/toast"
|
||||
import {
|
||||
CodegenDefinitions,
|
||||
CodegenName,
|
||||
generateCode,
|
||||
} from "~/helpers/new-codegen"
|
||||
import {
|
||||
useCopyResponse,
|
||||
useDownloadResponse,
|
||||
} from "~/composables/lens-actions"
|
||||
import { refAutoReset } from "@vueuse/core"
|
||||
import { ref, watch } from "vue"
|
||||
import { copyToClipboard } from "~/helpers/utils/clipboard"
|
||||
|
||||
import IconCopy from "~icons/lucide/copy"
|
||||
import IconCheck from "~icons/lucide/check"
|
||||
import IconWrapText from "~icons/lucide/wrap-text"
|
||||
import cloneDeep from "lodash-es/cloneDeep"
|
||||
import { platform } from "~/platform"
|
||||
import { RESTTabService } from "~/services/tab/rest"
|
||||
import { useService } from "dioc/vue"
|
||||
import { useNestedSetting } from "~/composables/settings"
|
||||
import { toggleNestedSetting } from "~/newstore/settings"
|
||||
import IconCheck from "~icons/lucide/check"
|
||||
import IconCopy from "~icons/lucide/copy"
|
||||
|
||||
const t = useI18n()
|
||||
|
||||
@@ -176,99 +50,17 @@ const emit = defineEmits<{
|
||||
|
||||
const toast = useToast()
|
||||
|
||||
const tabs = useService(RESTTabService)
|
||||
const request = ref(cloneDeep(tabs.currentActiveTab.value.document.request))
|
||||
const codegenType = ref<CodegenName>("shell-curl")
|
||||
const errorState = ref(false)
|
||||
|
||||
const copyCodeIcon = refAutoReset<typeof IconCopy | typeof IconCheck>(
|
||||
IconCopy,
|
||||
1000
|
||||
)
|
||||
|
||||
const requestCode = computed(() => {
|
||||
const aggregateEnvs = getAggregateEnvs()
|
||||
const requestVariables = request.value.requestVariables.map(
|
||||
(requestVariable) => {
|
||||
if (requestVariable.active)
|
||||
return {
|
||||
key: requestVariable.key,
|
||||
value: requestVariable.value,
|
||||
secret: false,
|
||||
}
|
||||
return {}
|
||||
}
|
||||
)
|
||||
const env: Environment = {
|
||||
v: 1,
|
||||
id: "env",
|
||||
name: "Env",
|
||||
variables: [
|
||||
...(requestVariables as Environment["variables"]),
|
||||
...aggregateEnvs,
|
||||
],
|
||||
}
|
||||
const effectiveRequest = getEffectiveRESTRequest(request.value, env)
|
||||
|
||||
if (!props.show) return ""
|
||||
|
||||
const result = generateCode(
|
||||
codegenType.value,
|
||||
makeRESTRequest({
|
||||
...effectiveRequest,
|
||||
body: resolvesEnvsInBody(effectiveRequest.body, env),
|
||||
headers: effectiveRequest.effectiveFinalHeaders.map((header) => ({
|
||||
...header,
|
||||
active: true,
|
||||
})),
|
||||
params: effectiveRequest.effectiveFinalParams.map((param) => ({
|
||||
...param,
|
||||
active: true,
|
||||
})),
|
||||
endpoint: effectiveRequest.effectiveFinalURL,
|
||||
requestVariables: effectiveRequest.effectiveFinalRequestVariables.map(
|
||||
(requestVariable) => ({
|
||||
...requestVariable,
|
||||
active: true,
|
||||
})
|
||||
),
|
||||
})
|
||||
)
|
||||
|
||||
if (O.isSome(result)) {
|
||||
errorState.value = false
|
||||
return result.value
|
||||
}
|
||||
errorState.value = true
|
||||
return ""
|
||||
})
|
||||
|
||||
// Template refs
|
||||
const tippyActions = ref<any | null>(null)
|
||||
const generatedCode = ref<any | null>(null)
|
||||
const WRAP_LINES = useNestedSetting("WRAP_LINES", "codeGen")
|
||||
|
||||
useCodemirror(
|
||||
generatedCode,
|
||||
requestCode,
|
||||
reactive({
|
||||
extendedEditorConfig: {
|
||||
mode: "text/plain",
|
||||
readOnly: true,
|
||||
lineWrapping: WRAP_LINES,
|
||||
},
|
||||
linter: null,
|
||||
completer: null,
|
||||
environmentHighlights: false,
|
||||
})
|
||||
)
|
||||
const requestCode = ref<string>("")
|
||||
|
||||
watch(
|
||||
() => props.show,
|
||||
(goingToShow) => {
|
||||
if (goingToShow) {
|
||||
request.value = cloneDeep(tabs.currentActiveTab.value.document.request)
|
||||
|
||||
platform.analytics?.logEvent({
|
||||
type: "HOPP_REST_CODEGEN_OPENED",
|
||||
})
|
||||
@@ -283,17 +75,4 @@ const copyRequestCode = () => {
|
||||
copyCodeIcon.value = IconCheck
|
||||
toast.success(`${t("state.copied_to_clipboard")}`)
|
||||
}
|
||||
|
||||
const searchQuery = ref("")
|
||||
|
||||
const filteredCodegenDefinitions = computed(() => {
|
||||
return CodegenDefinitions.filter((obj) =>
|
||||
Object.values(obj).some((val) =>
|
||||
val.toLowerCase().includes(searchQuery.value.toLowerCase())
|
||||
)
|
||||
)
|
||||
})
|
||||
|
||||
const { copyIcon, copyResponse } = useCopyResponse(requestCode)
|
||||
const { downloadIcon, downloadResponse } = useDownloadResponse("", requestCode)
|
||||
</script>
|
||||
|
||||
@@ -33,6 +33,24 @@
|
||||
>
|
||||
<Share />
|
||||
</HoppSmartTab>
|
||||
<HoppSmartTab
|
||||
:id="'codegen'"
|
||||
:icon="IconCode"
|
||||
:label="`${t('tab.codegen')}`"
|
||||
>
|
||||
<div
|
||||
class="flex items-center overflow-x-auto whitespace-nowrap border-b border-dividerLight px-4 py-2 text-tiny text-secondaryLight"
|
||||
>
|
||||
<span class="truncate"> {{ t("request.title") }} </span>
|
||||
<icon-lucide-chevron-right class="mx-2" />
|
||||
{{ t("tab.code_snippet") }}
|
||||
</div>
|
||||
<HttpCodegen
|
||||
:hide-label="true"
|
||||
class="px-4 mt-4"
|
||||
v-if="selectedNavigationTab === 'codegen'"
|
||||
/>
|
||||
</HoppSmartTab>
|
||||
</HoppSmartTabs>
|
||||
</template>
|
||||
|
||||
@@ -41,12 +59,18 @@ import IconClock from "~icons/lucide/clock"
|
||||
import IconLayers from "~icons/lucide/layers"
|
||||
import IconFolder from "~icons/lucide/folder"
|
||||
import IconShare2 from "~icons/lucide/share-2"
|
||||
import IconCode from "~icons/lucide/code"
|
||||
import { ref } from "vue"
|
||||
import { useI18n } from "@composables/i18n"
|
||||
|
||||
const t = useI18n()
|
||||
|
||||
type RequestOptionTabs = "history" | "collections" | "env"
|
||||
type RequestOptionTabs =
|
||||
| "history"
|
||||
| "collections"
|
||||
| "env"
|
||||
| "share-request"
|
||||
| "codegen"
|
||||
|
||||
const selectedNavigationTab = ref<RequestOptionTabs>("collections")
|
||||
</script>
|
||||
|
||||
Reference in New Issue
Block a user