Skip to content

Commit

Permalink
feat: add loading state for import actions (#4217)
Browse files Browse the repository at this point in the history 
Co-authored-by: jamesgeorge007 <[email protected]>
  • Loading branch information
@HelixY2J @jamesgeorge007
HelixY2J and jamesgeorge007 authored Sep 23, 2024
1 parent e9e1366 commit 1701961
Show file tree
Hide file tree
Showing 9 changed files with 194 additions and 93 deletions.
100 changes: 73 additions & 27 deletions packages/hoppscotch-common/src/components/collections/ImportExport.vue
View file
Original file line number Diff line number Diff line change
Expand Up @@ -19,30 +19,30 @@ import { UrlSource } from "~/helpers/import-export/import/import-sources/UrlSour
import IconFile from "~icons/lucide/file"
import {
hoppRESTImporter,
harImporter,
hoppInsomniaImporter,
hoppOpenAPIImporter,
hoppPostmanImporter,
hoppRESTImporter,
toTeamsImporter,
hoppOpenAPIImporter,
harImporter,
} from "~/helpers/import-export/import/importers"
import { defineStep } from "~/composables/step-components"
import MyCollectionImport from "~/components/importExport/ImportExportSteps/MyCollectionImport.vue"
import { useI18n } from "~/composables/i18n"
import { useToast } from "~/composables/toast"
import { appendRESTCollections, restCollections$ } from "~/newstore/collections"
import MyCollectionImport from "~/components/importExport/ImportExportSteps/MyCollectionImport.vue"
import IconFolderPlus from "~icons/lucide/folder-plus"
import IconOpenAPI from "~icons/lucide/file"
import IconPostman from "~icons/hopp/postman"
import IconInsomnia from "~icons/hopp/insomnia"
import IconPostman from "~icons/hopp/postman"
import IconOpenAPI from "~icons/lucide/file"
import IconFolderPlus from "~icons/lucide/folder-plus"
import IconGithub from "~icons/lucide/github"
import IconLink from "~icons/lucide/link"
import IconUser from "~icons/lucide/user"
import { useReadonlyStream } from "~/composables/stream"
import IconUser from "~icons/lucide/user"
import { getTeamCollectionJSON } from "~/helpers/backend/helpers"
Expand All @@ -53,10 +53,18 @@ import { gistExporter } from "~/helpers/import-export/export/gist"
import { myCollectionsExporter } from "~/helpers/import-export/export/myCollections"
import { teamCollectionsExporter } from "~/helpers/import-export/export/teamCollections"
import { GistSource } from "~/helpers/import-export/import/import-sources/GistSource"
import { ImporterOrExporter } from "~/components/importExport/types"
import { GistSource } from "~/helpers/import-export/import/import-sources/GistSource"
import { TeamWorkspace } from "~/services/workspace.service"
const isPostmanImporterInProgress = ref(false)
const isInsomniaImporterInProgress = ref(false)
const isOpenAPIImporterInProgress = ref(false)
const isRESTImporterInProgress = ref(false)
const isPersonalCollectionImporterInProgress = ref(false)
const isHarImporterInProgress = ref(false)
const isGistImporterInProgress = ref(false)
const t = useI18n()
const toast = useToast()
Expand Down Expand Up @@ -92,7 +100,7 @@ const showImportFailedError = () => {
const handleImportToStore = async (collections: HoppCollection[]) => {
const importResult =
props.collectionsType.type === "my-collections"
? await importToPersonalWorkspace(collections)
? importToPersonalWorkspace(collections)
: await importToTeamsWorkspace(collections)
if (E.isRight(importResult)) {
Expand Down Expand Up @@ -179,10 +187,11 @@ const HoppRESTImporter: ImporterOrExporter = {
caption: "import.from_file",
acceptedFileTypes: ".json",
onImportFromFile: async (content) => {
isRESTImporterInProgress.value = true
const res = await hoppRESTImporter(content)()
if (E.isRight(res)) {
handleImportToStore(res.right)
await handleImportToStore(res.right)
platform.analytics?.logEvent({
type: "HOPP_IMPORT_COLLECTION",
Expand All @@ -193,7 +202,10 @@ const HoppRESTImporter: ImporterOrExporter = {
} else {
showImportFailedError()
}
isRESTImporterInProgress.value = false
},
isLoading: isRESTImporterInProgress,
}),
}
Expand All @@ -207,15 +219,20 @@ const HoppMyCollectionImporter: ImporterOrExporter = {
applicableTo: ["team-workspace"],
},
component: defineStep("my_collection_import", MyCollectionImport, () => ({
loading: isPersonalCollectionImporterInProgress.value,
async onImportFromMyCollection(content) {
handleImportToStore([content])
isPersonalCollectionImporterInProgress.value = true
await handleImportToStore([content])
// our analytics consider this as an export event, so keeping compatibility with that
platform.analytics?.logEvent({
type: "HOPP_EXPORT_COLLECTION",
exporter: "import_to_teams",
platform: "rest",
})
isPersonalCollectionImporterInProgress.value = false
},
})),
}
Expand All @@ -238,10 +255,12 @@ const HoppOpenAPIImporter: ImporterOrExporter = {
caption: "import.from_file",
acceptedFileTypes: ".json, .yaml, .yml",
onImportFromFile: async (content) => {
isOpenAPIImporterInProgress.value = true
const res = await hoppOpenAPIImporter(content)()
if (E.isRight(res)) {
handleImportToStore(res.right)
await handleImportToStore(res.right)
platform.analytics?.logEvent({
platform: "rest",
Expand All @@ -252,7 +271,10 @@ const HoppOpenAPIImporter: ImporterOrExporter = {
} else {
showImportFailedError()
}
isOpenAPIImporterInProgress.value = false
},
isLoading: isOpenAPIImporterInProgress,
}),
},
{
Expand All @@ -262,10 +284,12 @@ const HoppOpenAPIImporter: ImporterOrExporter = {
step: UrlSource({
caption: "import.from_url",
onImportFromURL: async (content) => {
isOpenAPIImporterInProgress.value = true
const res = await hoppOpenAPIImporter([content])()
if (E.isRight(res)) {
handleImportToStore(res.right)
await handleImportToStore(res.right)
platform.analytics?.logEvent({
platform: "rest",
Expand All @@ -276,7 +300,10 @@ const HoppOpenAPIImporter: ImporterOrExporter = {
} else {
showImportFailedError()
}
isOpenAPIImporterInProgress.value = false
},
isLoading: isOpenAPIImporterInProgress,
}),
},
],
Expand All @@ -295,10 +322,12 @@ const HoppPostmanImporter: ImporterOrExporter = {
caption: "import.from_file",
acceptedFileTypes: ".json",
onImportFromFile: async (content) => {
isPostmanImporterInProgress.value = true
const res = await hoppPostmanImporter(content)()
if (E.isRight(res)) {
handleImportToStore(res.right)
await handleImportToStore(res.right)
platform.analytics?.logEvent({
platform: "rest",
Expand All @@ -309,7 +338,10 @@ const HoppPostmanImporter: ImporterOrExporter = {
} else {
showImportFailedError()
}
isPostmanImporterInProgress.value = false
},
isLoading: isPostmanImporterInProgress,
}),
}
Expand All @@ -326,10 +358,12 @@ const HoppInsomniaImporter: ImporterOrExporter = {
caption: "import.from_file",
acceptedFileTypes: ".json",
onImportFromFile: async (content) => {
isInsomniaImporterInProgress.value = true
const res = await hoppInsomniaImporter(content)()
if (E.isRight(res)) {
handleImportToStore(res.right)
await handleImportToStore(res.right)
platform.analytics?.logEvent({
platform: "rest",
Expand All @@ -340,7 +374,10 @@ const HoppInsomniaImporter: ImporterOrExporter = {
} else {
showImportFailedError()
}
isInsomniaImporterInProgress.value = false
},
isLoading: isInsomniaImporterInProgress,
}),
}
Expand All @@ -361,10 +398,12 @@ const HoppGistImporter: ImporterOrExporter = {
return
}
isGistImporterInProgress.value = true
const res = await hoppRESTImporter(content.right)()
if (E.isRight(res)) {
handleImportToStore(res.right)
await handleImportToStore(res.right)
platform.analytics?.logEvent({
platform: "rest",
Expand All @@ -375,7 +414,10 @@ const HoppGistImporter: ImporterOrExporter = {
} else {
showImportFailedError()
}
isGistImporterInProgress.value = false
},
isLoading: isGistImporterInProgress,
}),
}
Expand Down Expand Up @@ -528,22 +570,26 @@ const HARImporter: ImporterOrExporter = {
caption: "import.from_file",
acceptedFileTypes: ".har",
onImportFromFile: async (content) => {
isHarImporterInProgress.value = true
const res = await harImporter(content)
if (E.isLeft(res)) {
if (E.isRight(res)) {
await handleImportToStore(res.right)
platform.analytics?.logEvent({
type: "HOPP_IMPORT_COLLECTION",
importer: "import.from_har",
platform: "rest",
workspaceType: isTeamWorkspace.value ? "team" : "personal",
})
} else {
showImportFailedError()
return
}
handleImportToStore(res.right)
platform.analytics?.logEvent({
type: "HOPP_IMPORT_COLLECTION",
importer: "import.from_har",
platform: "rest",
workspaceType: isTeamWorkspace.value ? "team" : "personal",
})
isHarImporterInProgress.value = false
},
isLoading: isHarImporterInProgress,
}),
}
Expand Down
2 changes: 1 addition & 1 deletion packages/hoppscotch-common/src/components/collections/graphql/ImportExport.vue
View file
Original file line number Diff line number Diff line change
Expand Up @@ -231,7 +231,7 @@ const showImportFailedError = () => {
toast.error(t("import.failed"))
}
const handleImportToStore = async (gqlCollections: HoppCollection[]) => {
const handleImportToStore = (gqlCollections: HoppCollection[]) => {
appendGraphqlCollections(gqlCollections)
toast.success(t("state.file_imported"))
}
Expand Down
Loading

0 comments on commit 1701961

Please sign in to comment.