feat: introduces ability to export single environment variables and allow CLI to accept the export format used by the app (#3380)

* feat: add ability to export a single environment

* refactor: export environment without id

* feat: introducing zod for checking json format for environment variables

* refactor: new zod specific type for HoppEnvPair

* feat: add ability to export single environment in team environment

* refactor: moved zod as a dependency to devDependency

* refactor: separated repeating logic to helper file

* refactor: removed unnecessary to string operation

* chore: rearranged smart item placement

* refactor: introduced error type when a bulk environment export is used in cli

* refactor: removed unnecssary type exports and updated logic and variable names across most files

* refactor: better logic for type shapes

* chore: bump hoppscotch-cli package version

---------

Co-authored-by: Andrew Bastin <andrewbastin.k@gmail.com>

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

@@ -46,6 +46,7 @@
             role="menu"
             @keyup.e="edit!.$el.click()"
             @keyup.d="duplicate!.$el.click()"
+            @keyup.j="exportAsJsonEl!.$el.click()"
             @keyup.delete="
               !(environmentIndex === 'Global')
                 ? deleteAction!.$el.click()
@@ -77,6 +78,18 @@
                 }
               "
             />
+            <HoppSmartItem
+              ref="exportAsJsonEl"
+              :icon="IconEdit"
+              :label="`${t('export.as_json')}`"
+              :shortcut="['J']"
+              @click="
+                () => {
+                  exportEnvironmentAsJSON()
+                  hide()
+                }
+              "
+            />
             <HoppSmartItem
               v-if="environmentIndex !== 'Global'"
               ref="deleteAction"
@@ -121,6 +134,7 @@ import { useI18n } from "@composables/i18n"
 import { useToast } from "@composables/toast"
 import { TippyComponent } from "vue-tippy"
 import { HoppSmartItem } from "@hoppscotch/ui"
+import { exportAsJSON } from "~/helpers/import-export/export/environment"
 
 const t = useI18n()
 const toast = useToast()
@@ -136,10 +150,18 @@ const emit = defineEmits<{
 
 const confirmRemove = ref(false)
 
+const exportEnvironmentAsJSON = () => {
+  const { environment, environmentIndex } = props
+  exportAsJSON(environment, environmentIndex)
+    ? toast.success(t("state.download_started"))
+    : toast.error(t("state.download_failed"))
+}
+
 const tippyActions = ref<TippyComponent | null>(null)
 const options = ref<TippyComponent | null>(null)
 const edit = ref<typeof HoppSmartItem>()
 const duplicate = ref<typeof HoppSmartItem>()
+const exportAsJsonEl = ref<typeof HoppSmartItem>()
 const deleteAction = ref<typeof HoppSmartItem>()
 
 const removeEnvironment = () => {

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

@@ -39,6 +39,7 @@
             role="menu"
             @keyup.e="edit!.$el.click()"
             @keyup.d="duplicate!.$el.click()"
+            @keyup.j="exportAsJsonEl!.$el.click()"
             @keyup.delete="deleteAction!.$el.click()"
             @keyup.escape="options!.tippy().hide()"
           >
@@ -54,6 +55,7 @@
                 }
               "
             />
+
             <HoppSmartItem
               ref="duplicate"
               :icon="IconCopy"
@@ -66,6 +68,18 @@
                 }
               "
             />
+            <HoppSmartItem
+              ref="exportAsJsonEl"
+              :icon="IconEdit"
+              :label="`${t('export.as_json')}`"
+              :shortcut="['J']"
+              @click="
+                () => {
+                  exportEnvironmentAsJSON()
+                  hide()
+                }
+              "
+            />
             <HoppSmartItem
               ref="deleteAction"
               :icon="IconTrash2"
@@ -109,6 +123,7 @@ import IconTrash2 from "~icons/lucide/trash-2"
 import IconMoreVertical from "~icons/lucide/more-vertical"
 import { TippyComponent } from "vue-tippy"
 import { HoppSmartItem } from "@hoppscotch/ui"
+import { exportAsJSON } from "~/helpers/import-export/export/environment"
 
 const t = useI18n()
 const toast = useToast()
@@ -124,11 +139,17 @@ const emit = defineEmits<{
 
 const confirmRemove = ref(false)
 
+const exportEnvironmentAsJSON = () =>
+  exportAsJSON(props.environment)
+    ? toast.success(t("state.download_started"))
+    : toast.error(t("state.download_failed"))
+
 const tippyActions = ref<TippyComponent | null>(null)
 const options = ref<TippyComponent | null>(null)
 const edit = ref<typeof HoppSmartItem>()
 const duplicate = ref<typeof HoppSmartItem>()
 const deleteAction = ref<typeof HoppSmartItem>()
+const exportAsJsonEl = ref<typeof HoppSmartItem>()
 
 const removeEnvironment = () => {
   pipe(

packages/hoppscotch-common/src/helpers/import-export/export/environment.ts

@@ -0,0 +1,48 @@
+import { Environment } from "@hoppscotch/data"
+import { TeamEnvironment } from "~/helpers/teams/TeamEnvironment"
+import { cloneDeep } from "lodash-es"
+
+const getEnvironmentJson = (
+  environmentObj: TeamEnvironment | Environment,
+  environmentIndex?: number | "Global" | null
+) => {
+  const newEnvironment =
+    "environment" in environmentObj
+      ? cloneDeep(environmentObj.environment)
+      : cloneDeep(environmentObj)
+
+  delete newEnvironment.id
+
+  const environmentId =
+    environmentIndex || environmentIndex === 0
+      ? environmentIndex
+      : environmentObj.id
+
+  return environmentId !== null
+    ? JSON.stringify(newEnvironment, null, 2)
+    : undefined
+}
+
+export const exportAsJSON = (
+  environmentObj: Environment | TeamEnvironment,
+  environmentIndex?: number | "Global" | null
+): boolean => {
+  const dataToWrite = getEnvironmentJson(environmentObj, environmentIndex)
+
+  if (!dataToWrite) return false
+
+  const file = new Blob([dataToWrite], { type: "application/json" })
+  const a = document.createElement("a")
+  const url = URL.createObjectURL(file)
+  a.href = url
+
+  // Extracts the path from url, removes fragment identifier and query parameters if any, appends the ".json" extension, and assigns it
+  a.download = `${url.split("/").pop()!.split("#")[0].split("?")[0]}.json`
+  document.body.appendChild(a)
+  a.click()
+  setTimeout(() => {
+    document.body.removeChild(a)
+    window.URL.revokeObjectURL(url)
+  }, 0)
+  return true
+}