refactor: revamp the importers & exporters systems to be reused (#3425)
Co-authored-by: jamesgeorge007 <jamesgeorge998001@gmail.com>
This commit is contained in:
Akash K
GitHub
163
packages/hoppscotch-common/src/components/importExport/Base.vue
Normal file
163
packages/hoppscotch-common/src/components/importExport/Base.vue
Normal file
@@ -0,0 +1,163 @@
|
||||
<template>
|
||||
<HoppSmartModal
|
||||
dialog
|
||||
:title="t(modalTitle)"
|
||||
styles="sm:max-w-md"
|
||||
@close="hideModal"
|
||||
>
|
||||
<template #actions>
|
||||
<HoppButtonSecondary
|
||||
v-if="hasPreviousStep"
|
||||
v-tippy="{ theme: 'tooltip' }"
|
||||
:title="t('action.go_back')"
|
||||
:icon="IconArrowLeft"
|
||||
@click="goToPreviousStep"
|
||||
/>
|
||||
</template>
|
||||
<template #body>
|
||||
<component :is="currentStep.component" v-bind="currentStep.props()" />
|
||||
</template>
|
||||
</HoppSmartModal>
|
||||
</template>
|
||||
<script setup lang="ts">
|
||||
import IconArrowLeft from "~icons/lucide/arrow-left"
|
||||
|
||||
import { useI18n } from "~/composables/i18n"
|
||||
import { PropType, ref } from "vue"
|
||||
|
||||
import { useSteps, defineStep } from "~/composables/step-components"
|
||||
import ImportExportList from "./ImportExportList.vue"
|
||||
|
||||
import ImportExportSourcesList from "./ImportExportSourcesList.vue"
|
||||
import { ImporterOrExporter } from "~/components/importExport/types"
|
||||
|
||||
const t = useI18n()
|
||||
|
||||
const props = defineProps({
|
||||
importerModules: {
|
||||
// type: Array as PropType<ReturnType<typeof defineImporter>[]>,
|
||||
type: Array as PropType<ImporterOrExporter[]>,
|
||||
default: () => [],
|
||||
required: true,
|
||||
},
|
||||
exporterModules: {
|
||||
type: Array as PropType<ImporterOrExporter[]>,
|
||||
default: () => [],
|
||||
required: true,
|
||||
},
|
||||
modalTitle: {
|
||||
type: String,
|
||||
required: true,
|
||||
},
|
||||
})
|
||||
|
||||
const {
|
||||
addStep,
|
||||
currentStep,
|
||||
goToStep,
|
||||
goToNextStep,
|
||||
goToPreviousStep,
|
||||
hasPreviousStep,
|
||||
} = useSteps()
|
||||
|
||||
const selectedImporterID = ref<string | null>(null)
|
||||
const selectedSourceID = ref<string | null>(null)
|
||||
|
||||
const chooseImporterOrExporter = defineStep(
|
||||
"choose_importer_or_exporter",
|
||||
ImportExportList,
|
||||
() => ({
|
||||
importers: props.importerModules.map((importer) => ({
|
||||
id: importer.metadata.id,
|
||||
name: importer.metadata.name,
|
||||
title: importer.metadata.title,
|
||||
icon: importer.metadata.icon,
|
||||
disabled: importer.metadata.disabled,
|
||||
})),
|
||||
exporters: props.exporterModules.map((exporter) => ({
|
||||
id: exporter.metadata.id,
|
||||
name: exporter.metadata.name,
|
||||
title: exporter.metadata.title,
|
||||
icon: exporter.metadata.icon,
|
||||
disabled: exporter.metadata.disabled,
|
||||
loading: exporter.metadata.isLoading?.value ?? false,
|
||||
})),
|
||||
"onImporter-selected": (id: string) => {
|
||||
selectedImporterID.value = id
|
||||
|
||||
const selectedImporter = props.importerModules.find(
|
||||
(i) => i.metadata.id === id
|
||||
)
|
||||
|
||||
if (selectedImporter?.supported_sources) goToNextStep()
|
||||
else if (selectedImporter?.component)
|
||||
goToStep(selectedImporter.component.id)
|
||||
},
|
||||
"onExporter-selected": (id: string) => {
|
||||
const selectedExporter = props.exporterModules.find(
|
||||
(i) => i.metadata.id === id
|
||||
)
|
||||
|
||||
if (selectedExporter && selectedExporter.action) {
|
||||
selectedExporter.action()
|
||||
}
|
||||
},
|
||||
})
|
||||
)
|
||||
|
||||
const chooseImportSource = defineStep(
|
||||
"choose_import_source",
|
||||
ImportExportSourcesList,
|
||||
() => {
|
||||
const currentImporter = props.importerModules.find(
|
||||
(i) => i.metadata.id === selectedImporterID.value
|
||||
)
|
||||
|
||||
const sources = currentImporter?.supported_sources
|
||||
|
||||
if (!sources)
|
||||
return {
|
||||
sources: [],
|
||||
}
|
||||
|
||||
sources.forEach((source) => {
|
||||
addStep(source.step)
|
||||
})
|
||||
|
||||
return {
|
||||
sources: sources.map((source) => ({
|
||||
id: source.id,
|
||||
name: source.name,
|
||||
icon: source.icon,
|
||||
})),
|
||||
"onImport-source-selected": (sourceID) => {
|
||||
selectedSourceID.value = sourceID
|
||||
|
||||
const sourceStep = sources.find((s) => s.id === sourceID)?.step
|
||||
|
||||
if (sourceStep) {
|
||||
goToStep(sourceStep.id)
|
||||
}
|
||||
},
|
||||
}
|
||||
}
|
||||
)
|
||||
|
||||
addStep(chooseImporterOrExporter)
|
||||
addStep(chooseImportSource)
|
||||
|
||||
props.importerModules.forEach((importer) => {
|
||||
if (importer.component) {
|
||||
addStep(importer.component)
|
||||
}
|
||||
})
|
||||
|
||||
const emit = defineEmits<{
|
||||
(e: "hide-modal"): void
|
||||
}>()
|
||||
|
||||
const hideModal = () => {
|
||||
// resetImport()
|
||||
emit("hide-modal")
|
||||
}
|
||||
</script>
|
||||
@@ -0,0 +1,75 @@
|
||||
<template>
|
||||
<div class="flex flex-col">
|
||||
<HoppSmartExpand>
|
||||
<template #body>
|
||||
<HoppSmartItem
|
||||
v-for="importer in importers"
|
||||
:key="importer.id"
|
||||
:icon="importer.icon"
|
||||
:label="t(`${importer.name}`)"
|
||||
@click="emit('importer-selected', importer.id)"
|
||||
/>
|
||||
</template>
|
||||
</HoppSmartExpand>
|
||||
<hr />
|
||||
<div class="flex flex-col space-y-2">
|
||||
<template v-for="exporter in exporters" :key="exporter.id">
|
||||
<!-- adding the title to a span if the item is visible, otherwise the title won't be shown -->
|
||||
|
||||
<span
|
||||
v-if="exporter.disabled && exporter.title"
|
||||
v-tippy="{ theme: 'tooltip' }"
|
||||
:title="t(`${exporter.title}`)"
|
||||
class="flex"
|
||||
>
|
||||
<HoppSmartItem
|
||||
v-tippy="{ theme: 'tooltip' }"
|
||||
:icon="exporter.icon"
|
||||
:label="t(`${exporter.name}`)"
|
||||
:disabled="exporter.disabled"
|
||||
:loading="exporter.loading"
|
||||
@click="emit('exporter-selected', exporter.id)"
|
||||
/>
|
||||
</span>
|
||||
|
||||
<HoppSmartItem
|
||||
v-else
|
||||
v-tippy="{ theme: 'tooltip' }"
|
||||
:icon="exporter.icon"
|
||||
:title="t(`${exporter.title}`)"
|
||||
:label="t(`${exporter.name}`)"
|
||||
:loading="exporter.loading"
|
||||
:disabled="exporter.disabled"
|
||||
@click="emit('exporter-selected', exporter.id)"
|
||||
/>
|
||||
</template>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import { useI18n } from "@composables/i18n"
|
||||
import { Component } from "vue"
|
||||
|
||||
const t = useI18n()
|
||||
|
||||
type ImportExportEntryMeta = {
|
||||
id: string
|
||||
name: string
|
||||
icon: Component
|
||||
disabled: boolean
|
||||
title?: string
|
||||
loading?: boolean
|
||||
isVisible?: boolean
|
||||
}
|
||||
|
||||
defineProps<{
|
||||
importers: ImportExportEntryMeta[]
|
||||
exporters: ImportExportEntryMeta[]
|
||||
}>()
|
||||
|
||||
const emit = defineEmits<{
|
||||
(e: "importer-selected", importerID: string): void
|
||||
(e: "exporter-selected", exporterID: string): void
|
||||
}>()
|
||||
</script>
|
||||
@@ -0,0 +1,33 @@
|
||||
<template>
|
||||
<div class="flex flex-col">
|
||||
<HoppSmartItem
|
||||
v-for="source in sources"
|
||||
:key="source.id"
|
||||
:icon="source.icon"
|
||||
:label="t(`${source.name}`)"
|
||||
@click="emit('import-source-selected', source.id)"
|
||||
/>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import { useI18n } from "@composables/i18n"
|
||||
import { Component } from "vue"
|
||||
|
||||
const t = useI18n()
|
||||
|
||||
type ListItemMeta = {
|
||||
id: string
|
||||
name: string
|
||||
icon: Component
|
||||
title?: string
|
||||
}
|
||||
|
||||
defineProps<{
|
||||
sources: ListItemMeta[]
|
||||
}>()
|
||||
|
||||
const emit = defineEmits<{
|
||||
(e: "import-source-selected", sourceID: string): void
|
||||
}>()
|
||||
</script>
|
||||
@@ -0,0 +1,95 @@
|
||||
<template>
|
||||
<div class="space-y-4">
|
||||
<p class="flex items-center">
|
||||
<span
|
||||
class="inline-flex items-center justify-center flex-shrink-0 mr-4 border-4 rounded-full border-primary text-dividerDark"
|
||||
:class="{
|
||||
'!text-green-500': hasFile,
|
||||
}"
|
||||
>
|
||||
<icon-lucide-check-circle class="svg-icons" />
|
||||
</span>
|
||||
<span>
|
||||
{{ t(`${caption}`) }}
|
||||
</span>
|
||||
</p>
|
||||
<div
|
||||
class="flex flex-col ml-10 border border-dashed rounded border-dividerDark"
|
||||
>
|
||||
<input
|
||||
id="inputChooseFileToImportFrom"
|
||||
ref="inputChooseFileToImportFrom"
|
||||
name="inputChooseFileToImportFrom"
|
||||
type="file"
|
||||
class="p-4 cursor-pointer transition file:transition file:cursor-pointer text-secondary hover:text-secondaryDark file:mr-2 file:py-2 file:px-4 file:rounded file:border-0 file:text-secondary hover:file:text-secondaryDark file:bg-primaryLight hover:file:bg-primaryDark"
|
||||
:accept="acceptedFileTypes"
|
||||
@change="onFileChange"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<HoppButtonPrimary
|
||||
class="w-full"
|
||||
:label="t('import.title')"
|
||||
:disabled="!hasFile"
|
||||
@click="emit('importFromFile', fileContent)"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import { ref } from "vue"
|
||||
import { useI18n } from "@composables/i18n"
|
||||
import { useToast } from "@composables/toast"
|
||||
|
||||
defineProps<{
|
||||
caption: string
|
||||
acceptedFileTypes: string
|
||||
}>()
|
||||
|
||||
const t = useI18n()
|
||||
const toast = useToast()
|
||||
|
||||
const hasFile = ref(false)
|
||||
const fileContent = ref("")
|
||||
|
||||
const inputChooseFileToImportFrom = ref<HTMLInputElement | any>()
|
||||
|
||||
const emit = defineEmits<{
|
||||
(e: "importFromFile", content: string): void
|
||||
}>()
|
||||
|
||||
const onFileChange = () => {
|
||||
const inputFileToImport = inputChooseFileToImportFrom.value
|
||||
|
||||
if (!inputFileToImport) {
|
||||
hasFile.value = false
|
||||
return
|
||||
}
|
||||
|
||||
if (!inputFileToImport.files || inputFileToImport.files.length === 0) {
|
||||
inputChooseFileToImportFrom.value[0].value = ""
|
||||
hasFile.value = false
|
||||
toast.show(t("action.choose_file").toString())
|
||||
return
|
||||
}
|
||||
|
||||
const reader = new FileReader()
|
||||
|
||||
reader.onload = ({ target }) => {
|
||||
const content = target!.result as string | null
|
||||
if (!content) {
|
||||
hasFile.value = false
|
||||
toast.show(t("action.choose_file").toString())
|
||||
return
|
||||
}
|
||||
|
||||
fileContent.value = content
|
||||
|
||||
hasFile.value = !!content?.length
|
||||
}
|
||||
|
||||
reader.readAsText(inputFileToImport.files[0])
|
||||
}
|
||||
</script>
|
||||
@@ -0,0 +1,65 @@
|
||||
<template>
|
||||
<div class="select-wrapper">
|
||||
<select
|
||||
v-model="mySelectedCollectionID"
|
||||
autocomplete="off"
|
||||
class="select"
|
||||
autofocus
|
||||
>
|
||||
<option :key="undefined" :value="undefined" disabled selected>
|
||||
{{ t("collection.select") }}
|
||||
</option>
|
||||
<option
|
||||
v-for="(collection, collectionIndex) in myCollections"
|
||||
:key="`collection-${collectionIndex}`"
|
||||
:value="collectionIndex"
|
||||
class="bg-primary"
|
||||
>
|
||||
{{ collection.name }}
|
||||
</option>
|
||||
</select>
|
||||
</div>
|
||||
|
||||
<div class="my-4">
|
||||
<HoppButtonPrimary
|
||||
class="w-full"
|
||||
:label="t('import.title')"
|
||||
:disabled="!hasSelectedCollectionID"
|
||||
@click="fetchCollectionFromMyCollections"
|
||||
/>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import { HoppCollection, HoppRESTRequest } from "@hoppscotch/data"
|
||||
import { computed, ref } from "vue"
|
||||
import { useI18n } from "~/composables/i18n"
|
||||
import { useReadonlyStream } from "~/composables/stream"
|
||||
import { getRESTCollection, restCollections$ } from "~/newstore/collections"
|
||||
|
||||
const t = useI18n()
|
||||
|
||||
const mySelectedCollectionID = ref<number | undefined>(undefined)
|
||||
|
||||
const hasSelectedCollectionID = computed(() => {
|
||||
return mySelectedCollectionID.value !== undefined
|
||||
})
|
||||
|
||||
const myCollections = useReadonlyStream(restCollections$, [])
|
||||
|
||||
const emit = defineEmits<{
|
||||
(e: "importFromMyCollection", content: HoppCollection<HoppRESTRequest>): void
|
||||
}>()
|
||||
|
||||
const fetchCollectionFromMyCollections = async () => {
|
||||
if (mySelectedCollectionID.value === undefined) {
|
||||
return
|
||||
}
|
||||
|
||||
const collection = getRESTCollection(mySelectedCollectionID.value)
|
||||
|
||||
if (collection) {
|
||||
emit("importFromMyCollection", collection)
|
||||
}
|
||||
}
|
||||
</script>
|
||||
@@ -0,0 +1,95 @@
|
||||
<template>
|
||||
<div class="space-y-4">
|
||||
<p class="flex items-center">
|
||||
<span
|
||||
class="inline-flex items-center justify-center flex-shrink-0 mr-4 border-4 rounded-full border-primary text-dividerDark"
|
||||
:class="{
|
||||
'!text-green-500': hasURL,
|
||||
}"
|
||||
>
|
||||
<icon-lucide-check-circle class="svg-icons" />
|
||||
</span>
|
||||
<span>
|
||||
{{ t(caption) }}
|
||||
</span>
|
||||
</p>
|
||||
<p class="flex flex-col ml-10">
|
||||
<input
|
||||
v-model="inputChooseGistToImportFrom"
|
||||
type="url"
|
||||
class="input"
|
||||
:placeholder="`${t('import.from_url')}`"
|
||||
/>
|
||||
</p>
|
||||
|
||||
<div>
|
||||
<HoppButtonPrimary
|
||||
class="w-full"
|
||||
:label="t('import.title')"
|
||||
:disabled="!hasURL"
|
||||
:loading="isFetchingUrl"
|
||||
@click="fetchUrlData"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import { ref, watch } from "vue"
|
||||
import { useI18n } from "@composables/i18n"
|
||||
import { useToast } from "~/composables/toast"
|
||||
import axios, { AxiosResponse } from "axios"
|
||||
|
||||
const t = useI18n()
|
||||
|
||||
const toast = useToast()
|
||||
|
||||
const props = defineProps<{
|
||||
caption: string
|
||||
fetchLogic?: (url: string) => Promise<AxiosResponse<any>>
|
||||
}>()
|
||||
|
||||
const emit = defineEmits<{
|
||||
(e: "importFromURL", content: unknown): void
|
||||
}>()
|
||||
|
||||
const inputChooseGistToImportFrom = ref<string>("")
|
||||
const hasURL = ref(false)
|
||||
|
||||
const isFetchingUrl = ref(false)
|
||||
|
||||
watch(inputChooseGistToImportFrom, (url) => {
|
||||
hasURL.value = !!url
|
||||
})
|
||||
|
||||
const urlFetchLogic =
|
||||
props.fetchLogic ??
|
||||
async function (url: string) {
|
||||
const res = await axios.get(url, {
|
||||
transitional: {
|
||||
forcedJSONParsing: false,
|
||||
silentJSONParsing: false,
|
||||
clarifyTimeoutError: true,
|
||||
},
|
||||
})
|
||||
|
||||
return res
|
||||
}
|
||||
|
||||
async function fetchUrlData() {
|
||||
isFetchingUrl.value = true
|
||||
|
||||
try {
|
||||
const res = await urlFetchLogic(inputChooseGistToImportFrom.value)
|
||||
|
||||
if (res.status === 200) {
|
||||
emit("importFromURL", res.data)
|
||||
}
|
||||
} catch (e) {
|
||||
toast.error(t("import.failed"))
|
||||
console.log(e)
|
||||
} finally {
|
||||
isFetchingUrl.value = false
|
||||
}
|
||||
}
|
||||
</script>
|
||||
@@ -0,0 +1,23 @@
|
||||
import { Component, Ref } from "vue"
|
||||
import { defineStep } from "~/composables/step-components"
|
||||
|
||||
// TODO: move the metadata except disabled and isLoading to importers.ts
|
||||
export type ImporterOrExporter = {
|
||||
metadata: {
|
||||
id: string
|
||||
name: string
|
||||
icon: any
|
||||
title: string
|
||||
disabled: boolean
|
||||
applicableTo: Array<"personal-workspace" | "team-workspace" | "url-import">
|
||||
isLoading?: Ref<boolean>
|
||||
}
|
||||
supported_sources?: {
|
||||
id: string
|
||||
name: string
|
||||
icon: Component
|
||||
step: ReturnType<typeof defineStep>
|
||||
}[]
|
||||
component?: ReturnType<typeof defineStep>
|
||||
action?: (...args: any[]) => any
|
||||
}
|
||||
Reference in New Issue
Block a user