refactor: revamp the importers & exporters systems to be reused (#3425)

Co-authored-by: jamesgeorge007 <jamesgeorge998001@gmail.com>
2023-12-06 21:24:29 +05:30
parent d9c75ed79e
commit ab7c29d228
90 changed files with 2399 additions and 1892 deletions
--- a/packages/hoppscotch-common/src/components/environments/Add.vue
+++ b/packages/hoppscotch-common/src/components/environments/Add.vue
@@ -205,15 +205,14 @@ const addEnvironment = async () => {
 const getErrorMessage = (err: GQLError<string>) => {
  if (err.type === "network_error") {
    return t("error.network_error")
-  } else {
-    switch (err.error) {
-      case "team_environment/not_found":
-        return t("team_environment.not_found")
-      case "Forbidden resource":
-        return t("profile.no_permission")
-      default:
-        return t("error.something_went_wrong")
-    }
+  }
+  switch (err.error) {
+    case "team_environment/not_found":
+      return t("team_environment.not_found")
+    case "Forbidden resource":
+      return t("profile.no_permission")
+    default:
+      return t("error.something_went_wrong")
  }
 }
 </script>
--- a/packages/hoppscotch-common/src/components/environments/ImportExport.vue
+++ b/packages/hoppscotch-common/src/components/environments/ImportExport.vue
@@ -1,154 +1,60 @@
 <template>
-  <HoppSmartModal
-    v-if="show"
-    dialog
-    :title="`${t('environment.title')}`"
-    styles="sm:max-w-md"
-    @close="hideModal"
-  >
-    <template #actions>
-      <span>
-        <tippy
-          interactive
-          trigger="click"
-          theme="popover"
-          :on-shown="() => tippyActions!.focus()"
-        >
-          <HoppButtonSecondary
-            v-tippy="{ theme: 'tooltip' }"
-            :title="t('action.more')"
-            :icon="IconMoreVertical"
-          />
-          <template #content="{ hide }">
-            <div
-              ref="tippyActions"
-              class="flex flex-col focus:outline-none"
-              tabindex="0"
-              @keyup.escape="hide()"
-            >
-              <HoppSmartItem
-                :icon="IconGithub"
-                :label="t('import.from_gist')"
-                @click="
-                  () => {
-                    readEnvironmentGist()
-                    hide()
-                  }
-                "
-              />
-              <span
-                v-tippy="{ theme: 'tooltip' }"
-                :title="
-                  !currentUser
-                    ? `${t('export.require_github')}`
-                    : currentUser.provider !== 'github.com'
-                      ? `${t('export.require_github')}`
-                      : undefined
-                "
-              >
-                <HoppSmartItem
-                  :disabled="
-                    !currentUser
-                      ? true
-                      : currentUser.provider !== 'github.com'
-                        ? true
-                        : false
-                  "
-                  :icon="IconGithub"
-                  :label="t('export.create_secret_gist')"
-                  @click="
-                    () => {
-                      createEnvironmentGist()
-                      hide()
-                    }
-                  "
-                />
-              </span>
-            </div>
-          </template>
-        </tippy>
-      </span>
-    </template>
-    <template #body>
-      <div v-if="loading" class="flex flex-col items-center justify-center p-4">
-        <HoppSmartSpinner class="my-4" />
-        <span class="text-secondaryLight">{{ t("state.loading") }}</span>
-      </div>
-      <div v-else class="flex flex-col space-y-2">
-        <HoppSmartItem
-          :icon="IconFolderPlus"
-          :label="t('import.from_json')"
-          @click="openDialogChooseFileToImportFrom"
-        />
-        <input
-          ref="inputChooseFileToImportFrom"
-          class="input"
-          type="file"
-          accept="application/json"
-          @change="importFromJSON"
-        />
-        <hr />
-        <HoppSmartItem
-          v-tippy="{ theme: 'tooltip' }"
-          :title="t('action.download_file')"
-          :icon="IconDownload"
-          :label="t('export.as_json')"
-          @click="exportJSON"
-        />
-      </div>
-    </template>
-  </HoppSmartModal>
+  <ImportExportBase
+    ref="collections-import-export"
+    modal-title="environment.title"
+    :importer-modules="importerModules"
+    :exporter-modules="exporterModules"
+    @hide-modal="emit('hide-modal')"
+  />
 </template>

 <script setup lang="ts">
-import IconMoreVertical from "~icons/lucide/more-vertical"
-import IconFolderPlus from "~icons/lucide/folder-plus"
-import IconDownload from "~icons/lucide/download"
-import IconGithub from "~icons/lucide/github"
-import { computed, ref } from "vue"
+import { useI18n } from "~/composables/i18n"
+import { useToast } from "~/composables/toast"
 import { Environment } from "@hoppscotch/data"
-import { platform } from "~/platform"
-import axios from "axios"
-import { useI18n } from "@composables/i18n"
-import { useReadonlyStream } from "@composables/stream"
-import { useToast } from "@composables/toast"
-import {
-  environments$,
-  replaceEnvironments,
-  appendEnvironments,
-} from "~/newstore/environments"
-import { TeamEnvironment } from "~/helpers/teams/TeamEnvironment"
-import * as TE from "fp-ts/TaskEither"
-import { pipe } from "fp-ts/function"
+import { ImporterOrExporter } from "~/components/importExport/types"
+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 * as E from "fp-ts/Either"
+import { 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 { TippyComponent } from "vue-tippy"
+import { CreateTeamEnvironmentMutation } from "~/helpers/backend/graphql"
+import { postmanEnvImporter } from "~/helpers/import-export/import/postmanEnv"
+
+import IconFolderPlus from "~icons/lucide/folder-plus"
+import IconPostman from "~icons/hopp/postman"
+import IconUser from "~icons/lucide/user"
+import { initializeDownloadCollection } from "~/helpers/import-export/export"
+import { computed } from "vue"
+import { useReadonlyStream } from "~/composables/stream"
+import { environmentsExporter } from "~/helpers/import-export/export/environments"
+import { environmentsGistExporter } from "~/helpers/import-export/export/environmentsGistExport"
+import { platform } from "~/platform"
+
+const t = useI18n()
+const toast = useToast()

 const props = defineProps<{
-  show: boolean
  teamEnvironments?: TeamEnvironment[]
  teamId?: string | undefined
  environmentType: "MY_ENV" | "TEAM_ENV"
 }>()

-const emit = defineEmits<{
-  (e: "hide-modal"): void
-}>()
-
-const toast = useToast()
-const t = useI18n()
-
-const loading = ref(false)
-
 const myEnvironments = useReadonlyStream(environments$, [])
+
 const currentUser = useReadonlyStream(
  platform.auth.getCurrentUserStream(),
  platform.auth.getCurrentUser()
 )

-// Template refs
-const tippyActions = ref<TippyComponent | null>(null)
-const inputChooseFileToImportFrom = ref<HTMLInputElement>()
+const isTeamEnvironment = computed(() => {
+  return props.environmentType === "TEAM_ENV"
+})

 const environmentJson = computed(() => {
  if (
@@ -158,266 +64,249 @@ const environmentJson = computed(() => {
    const teamEnvironments = props.teamEnvironments.map(
      (x) => x.environment as Environment
    )
-    return JSON.stringify(teamEnvironments, null, 2)
-  } else {
-    return JSON.stringify(myEnvironments.value, null, 2)
+    return teamEnvironments
  }
+
+  return myEnvironments.value
 })

-const createEnvironmentGist = async () => {
-  if (!currentUser.value) {
-    toast.error(t("profile.no_permission").toString())
+const HoppEnvironmentsImport: ImporterOrExporter = {
+  metadata: {
+    id: "import.from_json",
+    name: "import.from_json",
+    icon: IconFolderPlus,
+    title: "import.from_json",
+    applicableTo: ["personal-workspace", "team-workspace"],
+    disabled: false,
+  },
+  component: FileSource({
+    acceptedFileTypes: "application/json",
+    caption: "import.hoppscotch_environment_description",
+    onImportFromFile: async (environments) => {
+      const res = await hoppEnvImporter(environments)()

-    return
-  }
-
-  try {
-    const res = await axios.post(
-      "https://api.github.com/gists",
-      {
-        files: {
-          "hoppscotch-environments.json": {
-            content: environmentJson.value,
-          },
-        },
-      },
-      {
-        headers: {
-          Authorization: `token ${currentUser.value.accessToken}`,
-          Accept: "application/vnd.github.v3+json",
-        },
+      if (E.isLeft(res)) {
+        showImportFailedError()
+        return
      }
+
+      handleImportToStore(res.right)
+
+      platform.analytics?.logEvent({
+        type: "HOPP_IMPORT_ENVIRONMENT",
+        platform: "rest",
+        workspaceType: isTeamEnvironment.value ? "team" : "personal",
+      })
+
+      emit("hide-modal")
+    },
+  }),
+}
+
+const PostmanEnvironmentsImport: ImporterOrExporter = {
+  metadata: {
+    id: "import.from_postman",
+    name: "import.from_postman",
+    icon: IconPostman,
+    title: "import.from_json",
+    applicableTo: ["personal-workspace", "team-workspace"],
+    disabled: false,
+  },
+  component: FileSource({
+    acceptedFileTypes: "application/json",
+    caption: "import.postman_environment_description",
+    onImportFromFile: async (environments) => {
+      const res = await postmanEnvImporter(environments)()
+
+      if (E.isLeft(res)) {
+        showImportFailedError()
+        return
+      }
+
+      handleImportToStore([res.right])
+
+      platform.analytics?.logEvent({
+        type: "HOPP_IMPORT_ENVIRONMENT",
+        platform: "rest",
+        workspaceType: isTeamEnvironment.value ? "team" : "personal",
+      })
+
+      emit("hide-modal")
+    },
+  }),
+}
+
+const EnvironmentsImportFromGIST: ImporterOrExporter = {
+  metadata: {
+    id: "import.environments_from_gist",
+    name: "import.environments_from_gist",
+    icon: IconFolderPlus,
+    title: "import.environments_from_gist",
+    applicableTo: ["personal-workspace", "team-workspace"],
+    disabled: false,
+  },
+  component: GistSource({
+    caption: "import.environments_from_gist_description",
+    onImportFromGist: async (environments) => {
+      if (E.isLeft(environments)) {
+        showImportFailedError()
+        return
+      }
+
+      const res = await hoppEnvImporter(environments.right)()
+
+      if (E.isLeft(res)) {
+        showImportFailedError()
+        return
+      }
+
+      handleImportToStore(res.right)
+      platform.analytics?.logEvent({
+        type: "HOPP_IMPORT_ENVIRONMENT",
+        platform: "rest",
+        workspaceType: isTeamEnvironment.value ? "team" : "personal",
+      })
+      emit("hide-modal")
+    },
+  }),
+}
+
+const HoppEnvironmentsExport: ImporterOrExporter = {
+  metadata: {
+    id: "export.as_json",
+    name: "export.as_json",
+    title: "action.download_file",
+    icon: IconUser,
+    disabled: false,
+    applicableTo: ["personal-workspace", "team-workspace"],
+  },
+  action: () => {
+    if (!environmentJson.value.length) {
+      return toast.error(t("error.no_environments_to_export"))
+    }
+
+    const message = initializeDownloadCollection(
+      environmentsExporter(environmentJson.value),
+      "Environments"
    )

-    toast.success(t("export.gist_created").toString())
+    if (E.isLeft(message)) {
+      toast.error(t(message.left))
+      return
+    }
+
+    toast.success(t(message.right))

    platform.analytics?.logEvent({
      type: "HOPP_EXPORT_ENVIRONMENT",
      platform: "rest",
    })
-
-    window.open(res.data.html_url)
-  } catch (e) {
-    toast.error(t("error.something_went_wrong").toString())
-    console.error(e)
-  }
+  },
 }

-const fileImported = () => {
-  toast.success(t("state.file_imported").toString())
-}
-
-const failedImport = () => {
-  toast.error(t("import.failed").toString())
-}
-
-const readEnvironmentGist = async () => {
-  const gist = prompt(t("import.gist_url").toString())
-  if (!gist) return
-
-  try {
-    const { files } = (await axios.get(
-      `https://api.github.com/gists/${gist.split("/").pop()}`,
-      {
-        headers: {
-          Accept: "application/vnd.github.v3+json",
-        },
-      }
-    )) as {
-      files: {
-        [fileName: string]: {
-          content: any
-        }
-      }
-    }
-    const environments = JSON.parse(Object.values(files)[0].content)
-
-    if (props.environmentType === "MY_ENV") {
-      replaceEnvironments(environments)
-      fileImported()
-    } else {
-      importToTeams(environments)
-    }
-  } catch (e) {
-    failedImport()
-    console.error(e)
-  }
-}
-
-const hideModal = () => {
-  emit("hide-modal")
-}
-
-const openDialogChooseFileToImportFrom = () => {
-  if (inputChooseFileToImportFrom.value)
-    inputChooseFileToImportFrom.value.click()
-}
-
-const importToTeams = async (content: Environment[]) => {
-  loading.value = true
-
-  platform.analytics?.logEvent({
-    type: "HOPP_IMPORT_ENVIRONMENT",
-    platform: "rest",
-    workspaceType: "team",
-  })
-
-  for (const [i, env] of content.entries()) {
-    if (i === content.length - 1) {
-      await pipe(
-        createTeamEnvironment(
-          JSON.stringify(env.variables),
-          props.teamId as string,
-          env.name
-        ),
-        TE.match(
-          (err: GQLError<string>) => {
-            console.error(err)
-            toast.error(`${getErrorMessage(err)}`)
-          },
-          () => {
-            loading.value = false
-            hideModal()
-            fileImported()
-          }
-        )
-      )()
-    } else {
-      await pipe(
-        createTeamEnvironment(
-          JSON.stringify(env.variables),
-          props.teamId as string,
-          env.name
-        ),
-        TE.match(
-          (err: GQLError<string>) => {
-            console.error(err)
-            toast.error(`${getErrorMessage(err)}`)
-          },
-          () => {
-            // wait for all the environments to be created then fire the toast
-          }
-        )
-      )()
-    }
-  }
-}
-
-const importFromJSON = () => {
-  if (!inputChooseFileToImportFrom.value) return
-
-  if (
-    !inputChooseFileToImportFrom.value.files ||
-    inputChooseFileToImportFrom.value.files.length === 0
-  ) {
-    toast.show(t("action.choose_file").toString())
-    return
-  }
-
-  platform.analytics?.logEvent({
-    type: "HOPP_IMPORT_ENVIRONMENT",
-    platform: "rest",
-    workspaceType: "personal",
-  })
-
-  const reader = new FileReader()
-
-  reader.onload = ({ target }) => {
-    const content = target!.result as string | null
-
-    if (!content) {
-      toast.show(t("action.choose_file").toString())
+const HoppEnvironmentsGistExporter: ImporterOrExporter = {
+  metadata: {
+    id: "export.as_gist",
+    name: "export.create_secret_gist",
+    title:
+      // eslint-disable-next-line @typescript-eslint/ban-ts-comment
+      // @ts-ignore
+      currentUser?.provider === "github.com"
+        ? "export.create_secret_gist"
+        : "export.require_github",
+    icon: IconUser,
+    disabled: !currentUser.value
+      ? true
+      : currentUser.value.provider !== "github.com",
+    applicableTo: ["personal-workspace", "team-workspace"],
+  },
+  action: async () => {
+    if (!currentUser.value) {
+      toast.error(t("profile.no_permission"))
      return
    }

-    const environments = JSON.parse(content)
+    const accessToken = currentUser.value?.accessToken

-    if (
-      environments._postman_variable_scope === "environment" ||
-      environments._postman_variable_scope === "globals"
-    ) {
-      importFromPostman(environments)
-    } else if (environments[0]) {
-      const [name, variables] = Object.keys(environments[0])
-      if (name === "name" && variables === "variables") {
-        // Do nothing
+    if (accessToken) {
+      const res = await environmentsGistExporter(
+        JSON.stringify(environmentJson.value),
+        accessToken
+      )
+
+      if (E.isLeft(res)) {
+        toast.error(t("export.failed"))
+        return
      }
-      importFromHoppscotch(environments)
-    } else {
-      failedImport()
-    }
-  }

-  reader.readAsText(inputChooseFileToImportFrom.value.files[0])
-  inputChooseFileToImportFrom.value.value = ""
+      toast.success(t("export.success"))
+
+      platform.analytics?.logEvent({
+        type: "HOPP_EXPORT_ENVIRONMENT",
+        platform: "rest",
+      })
+
+      window.open(res.right, "_blank")
+    }
+  },
 }

-const importFromHoppscotch = (environments: Environment[]) => {
+const importerModules = [
+  HoppEnvironmentsImport,
+  EnvironmentsImportFromGIST,
+  PostmanEnvironmentsImport,
+]
+
+const exporterModules = computed(() => {
+  const enabledExporters = [HoppEnvironmentsExport]
+
+  if (platform.platformFeatureFlags.exportAsGIST) {
+    enabledExporters.push(HoppEnvironmentsGistExporter)
+  }
+
+  return enabledExporters
+})
+
+const showImportFailedError = () => {
+  toast.error(t("import.failed").toString())
+}
+
+const handleImportToStore = async (environments: Environment[]) => {
  if (props.environmentType === "MY_ENV") {
    appendEnvironments(environments)
-    fileImported()
+    toast.success(t("state.file_imported"))
  } else {
-    importToTeams(environments)
+    await importToTeams(environments)
  }
 }

-const importFromPostman = ({
-  name,
-  values,
-}: {
-  name: string
-  values: { key: string; value: string }[]
-}) => {
-  const environment: Environment = { name, variables: [] }
-  values.forEach(({ key, value }) => environment.variables.push({ key, value }))
-  const environments = [environment]
+const importToTeams = async (content: Environment[]) => {
+  const envImportPromises: Promise<
+    E.Either<GQLError<"">, CreateTeamEnvironmentMutation>
+  >[] = []

-  importFromHoppscotch(environments)
-}
+  for (const [, env] of content.entries()) {
+    const res = createTeamEnvironment(
+      JSON.stringify(env.variables),
+      props.teamId as string,
+      env.name
+    )()

-const exportJSON = async () => {
-  const dataToWrite = environmentJson.value
-
-  const parsedCollections = JSON.parse(dataToWrite)
-
-  if (!parsedCollections.length) {
-    return toast.error(t("error.no_environments_to_export"))
+    envImportPromises.push(res)
  }

-  const file = new Blob([dataToWrite], { type: "application/json" })
-  const url = URL.createObjectURL(file)
+  const res = await Promise.all(envImportPromises)

-  const filename = `${url.split("/").pop()!.split("#")[0].split("?")[0]}.json`
+  const failedImports = res.some((r) => E.isLeft(r))

-  URL.revokeObjectURL(url)
-
-  const result = await platform.io.saveFileWithDialog({
-    data: dataToWrite,
-    contentType: "application/json",
-    suggestedFilename: filename,
-    filters: [
-      {
-        name: "JSON file",
-        extensions: ["json"],
-      },
-    ],
-  })
-
-  if (result.type === "unknown" || result.type === "saved") {
-    toast.success(t("state.download_started").toString())
-  }
-}
-
-const getErrorMessage = (err: GQLError<string>) => {
-  if (err.type === "network_error") {
-    return t("error.network_error")
+  if (failedImports) {
+    toast.error(t("import.failed"))
  } else {
-    switch (err.error) {
-      case "team_environment/not_found":
-        return t("team_environment.not_found")
-      default:
-        return t("error.something_went_wrong")
-    }
+    toast.success(t("import.success"))
  }
 }
+
+const emit = defineEmits<{
+  (e: "hide-modal"): () => void
+}>()
 </script>
--- a/packages/hoppscotch-common/src/components/environments/Selector.vue
+++ b/packages/hoppscotch-common/src/components/environments/Selector.vue
@@ -453,12 +453,11 @@ const isEnvActive = (id: string | number) => {
  } else {
    if (selectedEnvironmentIndex.value.type === "MY_ENV") {
      return selectedEnv.value.index === id
-    } else {
-      return (
-        selectedEnvironmentIndex.value.type === "TEAM_ENV" &&
-        selectedEnv.value.teamEnvID === id
-      )
    }
+    return (
+      selectedEnvironmentIndex.value.type === "TEAM_ENV" &&
+      selectedEnv.value.teamEnvID === id
+    )
  }
 }

@@ -503,40 +502,36 @@ const selectedEnv = computed(() => {
        name: props.modelValue.environment.environment.name,
        teamEnvID: props.modelValue.environment.id,
      }
-    } else {
-      return { type: "global", name: "Global" }
-    }
-  } else {
-    if (selectedEnvironmentIndex.value.type === "MY_ENV") {
-      const environment =
-        myEnvironments.value[selectedEnvironmentIndex.value.index]
-      return {
-        type: "MY_ENV",
-        index: selectedEnvironmentIndex.value.index,
-        name: environment.name,
-        variables: environment.variables,
-      }
-    } else if (selectedEnvironmentIndex.value.type === "TEAM_ENV") {
-      const teamEnv = teamEnvironmentList.value.find(
-        (env) =>
-          env.id ===
-          (selectedEnvironmentIndex.value.type === "TEAM_ENV" &&
-            selectedEnvironmentIndex.value.teamEnvID)
-      )
-      if (teamEnv) {
-        return {
-          type: "TEAM_ENV",
-          name: teamEnv.environment.name,
-          teamEnvID: selectedEnvironmentIndex.value.teamEnvID,
-          variables: teamEnv.environment.variables,
-        }
-      } else {
-        return { type: "NO_ENV_SELECTED" }
-      }
-    } else {
-      return { type: "NO_ENV_SELECTED" }
    }
+    return { type: "global", name: "Global" }
  }
+  if (selectedEnvironmentIndex.value.type === "MY_ENV") {
+    const environment =
+      myEnvironments.value[selectedEnvironmentIndex.value.index]
+    return {
+      type: "MY_ENV",
+      index: selectedEnvironmentIndex.value.index,
+      name: environment.name,
+      variables: environment.variables,
+    }
+  } else if (selectedEnvironmentIndex.value.type === "TEAM_ENV") {
+    const teamEnv = teamEnvironmentList.value.find(
+      (env) =>
+        env.id ===
+        (selectedEnvironmentIndex.value.type === "TEAM_ENV" &&
+          selectedEnvironmentIndex.value.teamEnvID)
+    )
+    if (teamEnv) {
+      return {
+        type: "TEAM_ENV",
+        name: teamEnv.environment.name,
+        teamEnvID: selectedEnvironmentIndex.value.teamEnvID,
+        variables: teamEnv.environment.variables,
+      }
+    }
+    return { type: "NO_ENV_SELECTED" }
+  }
+  return { type: "NO_ENV_SELECTED" }
 })

 // Set the selected environment as initial scope value
@@ -584,13 +579,12 @@ const envQuickPeekActions = ref<TippyComponent | null>(null)
 const getErrorMessage = (err: GQLError<string>) => {
  if (err.type === "network_error") {
    return t("error.network_error")
-  } else {
-    switch (err.error) {
-      case "team_environment/not_found":
-        return t("team_environment.not_found")
-      default:
-        return t("error.something_went_wrong")
-    }
+  }
+  switch (err.error) {
+    case "team_environment/not_found":
+      return t("team_environment.not_found")
+    default:
+      return t("error.something_went_wrong")
  }
 }

@@ -599,9 +593,8 @@ const globalEnvs = useReadonlyStream(globalEnv$, [])
 const environmentVariables = computed(() => {
  if (selectedEnv.value.variables) {
    return selectedEnv.value.variables
-  } else {
-    return []
  }
+  return []
 })

 const editGlobalEnv = () => {
--- a/packages/hoppscotch-common/src/components/environments/my/Details.vue
+++ b/packages/hoppscotch-common/src/components/environments/my/Details.vue
@@ -198,9 +198,8 @@ const workingEnv = computed(() => {
      type: "MY_ENV",
      index: props.editingEnvironmentIndex,
    })
-  } else {
-    return null
  }
+  return null
 })

 const envList = useReadonlyStream(environments$, []) || props.envVars()
@@ -226,12 +225,11 @@ const liveEnvs = computed(() => {
    return [
      ...vars.value.map((x) => ({ ...x.env, source: editingName.value! })),
    ]
-  } else {
-    return [
-      ...vars.value.map((x) => ({ ...x.env, source: editingName.value! })),
-      ...globalVars.value.map((x) => ({ ...x, source: "Global" })),
-    ]
  }
+  return [
+    ...vars.value.map((x) => ({ ...x.env, source: editingName.value! })),
+    ...globalVars.value.map((x) => ({ ...x, source: "Global" })),
+  ]
 })

 watch(
--- a/packages/hoppscotch-common/src/components/environments/my/index.vue
+++ b/packages/hoppscotch-common/src/components/environments/my/index.vue
@@ -68,7 +68,7 @@
      @hide-modal="displayModalEdit(false)"
    />
    <EnvironmentsImportExport
-      :show="showModalImportExport"
+      v-if="showModalImportExport"
      environment-type="MY_ENV"
      @hide-modal="displayModalImportExport(false)"
    />
--- a/packages/hoppscotch-common/src/components/environments/teams/Details.vue
+++ b/packages/hoppscotch-common/src/components/environments/teams/Details.vue
@@ -205,11 +205,8 @@ const evnExpandError = computed(() => {
 const liveEnvs = computed(() => {
  if (evnExpandError.value) {
    return []
-  } else {
-    return [
-      ...vars.value.map((x) => ({ ...x.env, source: editingName.value! })),
-    ]
  }
+  return [...vars.value.map((x) => ({ ...x.env, source: editingName.value! }))]
 })

 watch(
@@ -338,13 +335,12 @@ const hideModal = () => {
 const getErrorMessage = (err: GQLError<string>) => {
  if (err.type === "network_error") {
    return t("error.network_error")
-  } else {
-    switch (err.error) {
-      case "team_environment/not_found":
-        return t("team_environment.not_found")
-      default:
-        return t("error.something_went_wrong")
-    }
+  }
+  switch (err.error) {
+    case "team_environment/not_found":
+      return t("team_environment.not_found")
+    default:
+      return t("error.something_went_wrong")
  }
 }
 </script>
--- a/packages/hoppscotch-common/src/components/environments/teams/Environment.vue
+++ b/packages/hoppscotch-common/src/components/environments/teams/Environment.vue
@@ -184,13 +184,12 @@ const duplicateEnvironments = () => {
 const getErrorMessage = (err: GQLError<string>) => {
  if (err.type === "network_error") {
    return t("error.network_error")
-  } else {
-    switch (err.error) {
-      case "team_environment/not_found":
-        return t("team_environment.not_found")
-      default:
-        return t("error.something_went_wrong")
-    }
+  }
+  switch (err.error) {
+    case "team_environment/not_found":
+      return t("team_environment.not_found")
+    default:
+      return t("error.something_went_wrong")
  }
 }
 </script>
--- a/packages/hoppscotch-common/src/components/environments/teams/index.vue
+++ b/packages/hoppscotch-common/src/components/environments/teams/index.vue
@@ -107,7 +107,7 @@
      @hide-modal="displayModalEdit(false)"
    />
    <EnvironmentsImportExport
-      :show="showModalImportExport"
+      v-if="showModalImportExport"
      :team-environments="teamEnvironments"
      :team-id="team?.id"
      environment-type="TEAM_ENV"
@@ -174,13 +174,12 @@ const resetSelectedData = () => {
 const getErrorMessage = (err: GQLError<string>) => {
  if (err.type === "network_error") {
    return t("error.network_error")
-  } else {
-    switch (err.error) {
-      case "team_environment/not_found":
-        return t("team_environment.not_found")
-      default:
-        return t("error.something_went_wrong")
-    }
+  }
+  switch (err.error) {
+    case "team_environment/not_found":
+      return t("team_environment.not_found")
+    default:
+      return t("error.something_went_wrong")
  }
 }