fix: ensure cross-platform compatibility with file exports (#4336)

packages/hoppscotch-common/src/components/environments/ImportExport.vue

@@ -13,36 +13,36 @@ import { Environment, NonSecretEnvironment } from "@hoppscotch/data"
 import * as E from "fp-ts/Either"
 import { ref } from "vue"
 
+import { ImporterOrExporter } from "~/components/importExport/types"
 import { useI18n } from "~/composables/i18n"
 import { useToast } from "~/composables/toast"
-import { ImporterOrExporter } from "~/components/importExport/types"
+import { hoppEnvImporter } from "~/helpers/import-export/import/hoppEnv"
 import { FileSource } from "~/helpers/import-export/import/import-sources/FileSource"
 import { GistSource } from "~/helpers/import-export/import/import-sources/GistSource"
-import { hoppEnvImporter } from "~/helpers/import-export/import/hoppEnv"
 
 import {
-  appendEnvironments,
   addGlobalEnvVariable,
+  appendEnvironments,
   environments$,
 } from "~/newstore/environments"
 
-import { createTeamEnvironment } from "~/helpers/backend/mutations/TeamEnvironment"
-import { TeamEnvironment } from "~/helpers/teams/TeamEnvironment"
 import { GQLError } from "~/helpers/backend/GQLClient"
 import { CreateTeamEnvironmentMutation } from "~/helpers/backend/graphql"
-import { postmanEnvImporter } from "~/helpers/import-export/import/postmanEnv"
+import { createTeamEnvironment } from "~/helpers/backend/mutations/TeamEnvironment"
 import { insomniaEnvImporter } from "~/helpers/import-export/import/insomniaEnv"
+import { postmanEnvImporter } from "~/helpers/import-export/import/postmanEnv"
+import { TeamEnvironment } from "~/helpers/teams/TeamEnvironment"
 
-import IconFolderPlus from "~icons/lucide/folder-plus"
-import IconPostman from "~icons/hopp/postman"
-import IconInsomnia from "~icons/hopp/insomnia"
-import IconUser from "~icons/lucide/user"
-import { initializeDownloadCollection } from "~/helpers/import-export/export"
 import { computed } from "vue"
 import { useReadonlyStream } from "~/composables/stream"
+import { initializeDownloadFile } from "~/helpers/import-export/export"
 import { environmentsExporter } from "~/helpers/import-export/export/environments"
 import { gistExporter } from "~/helpers/import-export/export/gist"
 import { platform } from "~/platform"
+import IconInsomnia from "~icons/hopp/insomnia"
+import IconPostman from "~icons/hopp/postman"
+import IconFolderPlus from "~icons/lucide/folder-plus"
+import IconUser from "~icons/lucide/user"
 
 const t = useI18n()
 const toast = useToast()
@@ -67,19 +67,17 @@ const isTeamEnvironment = computed(() => {
 })
 
 const environmentJson = computed(() => {
-  if (
-    props.environmentType === "TEAM_ENV" &&
-    props.teamEnvironments !== undefined
-  ) {
-    const teamEnvironments = props.teamEnvironments.map(
-      (x) => x.environment as Environment
-    )
-    return teamEnvironments
+  if (isTeamEnvironment.value && props.teamEnvironments) {
+    return props.teamEnvironments.map((x) => x.environment)
   }
 
   return myEnvironments.value
 })
 
+const workspaceType = computed(() =>
+  isTeamEnvironment.value ? "team" : "personal"
+)
+
 const HoppEnvironmentsImport: ImporterOrExporter = {
   metadata: {
     id: "import.from_json",
@@ -105,7 +103,7 @@ const HoppEnvironmentsImport: ImporterOrExporter = {
       platform.analytics?.logEvent({
         type: "HOPP_IMPORT_ENVIRONMENT",
         platform: "rest",
-        workspaceType: isTeamEnvironment.value ? "team" : "personal",
+        workspaceType: workspaceType.value,
       })
 
       emit("hide-modal")
@@ -138,7 +136,7 @@ const PostmanEnvironmentsImport: ImporterOrExporter = {
       platform.analytics?.logEvent({
         type: "HOPP_IMPORT_ENVIRONMENT",
         platform: "rest",
-        workspaceType: isTeamEnvironment.value ? "team" : "personal",
+        workspaceType: workspaceType.value,
       })
 
       emit("hide-modal")
@@ -178,7 +176,7 @@ const insomniaEnvironmentsImport: ImporterOrExporter = {
       platform.analytics?.logEvent({
         type: "HOPP_IMPORT_ENVIRONMENT",
         platform: "rest",
-        workspaceType: isTeamEnvironment.value ? "team" : "personal",
+        workspaceType: workspaceType.value,
       })
 
       emit("hide-modal")
@@ -214,7 +212,7 @@ const EnvironmentsImportFromGIST: ImporterOrExporter = {
       platform.analytics?.logEvent({
         type: "HOPP_IMPORT_ENVIRONMENT",
         platform: "rest",
-        workspaceType: isTeamEnvironment.value ? "team" : "personal",
+        workspaceType: workspaceType.value,
       })
       emit("hide-modal")
     },
@@ -230,14 +228,14 @@ const HoppEnvironmentsExport: ImporterOrExporter = {
     disabled: false,
     applicableTo: ["personal-workspace", "team-workspace"],
   },
-  action: () => {
+  action: async () => {
     if (!environmentJson.value.length) {
       return toast.error(t("error.no_environments_to_export"))
     }
 
-    const message = initializeDownloadCollection(
+    const message = await initializeDownloadFile(
       environmentsExporter(environmentJson.value),
-      "Environments"
+      `hoppscotch-${workspaceType.value}-environments`
     )
 
     if (E.isLeft(message)) {

packages/hoppscotch-common/src/components/environments/my/Environment.vue

@@ -126,6 +126,8 @@ import { useService } from "dioc/vue"
 import { cloneDeep } from "lodash-es"
 import { computed, ref } from "vue"
 import { TippyComponent } from "vue-tippy"
+import * as E from "fp-ts/Either"
+
 import { exportAsJSON } from "~/helpers/import-export/export/environment"
 import {
   createEnvironment,
@@ -163,11 +165,13 @@ const secretEnvironmentService = useService(SecretEnvironmentService)
 
 const isGlobalEnvironment = computed(() => props.environmentIndex === "Global")
 
-const exportEnvironmentAsJSON = () => {
+const exportEnvironmentAsJSON = async () => {
   const { environment, environmentIndex } = props
-  exportAsJSON(environment, environmentIndex)
-    ? toast.success(t("state.download_started"))
-    : toast.error(t("state.download_failed"))
+
+  const message = await exportAsJSON(environment, environmentIndex)
+  E.isRight(message)
+    ? toast.success(t(message.right))
+    : toast.error(t(message.left))
 }
 
 const tippyActions = ref<HTMLDivElement | null>(null)

packages/hoppscotch-common/src/components/environments/teams/Environment.vue

@@ -128,6 +128,7 @@ import * as TE from "fp-ts/TaskEither"
 import { pipe } from "fp-ts/function"
 import { ref } from "vue"
 import { TippyComponent } from "vue-tippy"
+import * as E from "fp-ts/Either"
 
 import { useI18n } from "~/composables/i18n"
 import { GQLError } from "~/helpers/backend/GQLClient"
@@ -161,10 +162,12 @@ const secretEnvironmentService = useService(SecretEnvironmentService)
 
 const confirmRemove = ref(false)
 
-const exportEnvironmentAsJSON = () =>
-  exportAsJSON(props.environment)
-    ? toast.success(t("state.download_started"))
-    : toast.error(t("state.download_failed"))
+const exportEnvironmentAsJSON = async () => {
+  const message = await exportAsJSON(props.environment)
+  E.isRight(message)
+    ? toast.success(t(message.right))
+    : toast.error(t(message.left))
+}
 
 const tippyActions = ref<TippyComponent | null>(null)
 const options = ref<TippyComponent | null>(null)