feat: ability to export a single environment

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.x="exportAction!.$el.click()"
             @keyup.delete="
               !(environmentIndex === 'Global')
                 ? deleteAction!.$el.click()
@@ -77,6 +78,18 @@
                 }
               "
             />
+            <SmartItem
+              ref="exportAction"
+              :icon="IconDownload"
+              :label="t('export.title')"
+              :shortcut="['X']"
+              @click="
+                () => {
+                  exportEnvironment()
+                  hide()
+                }
+              "
+            />
             <SmartItem
               v-if="environmentIndex !== 'Global'"
               ref="deleteAction"
@@ -108,6 +121,7 @@ import IconMoreVertical from "~icons/lucide/more-vertical"
 import IconEdit from "~icons/lucide/edit"
 import IconCopy from "~icons/lucide/copy"
 import IconTrash2 from "~icons/lucide/trash-2"
+import IconDownload from "~icons/lucide/download"
 import { ref } from "vue"
 import { Environment } from "@hoppscotch/data"
 import { cloneDeep } from "lodash-es"
@@ -143,6 +157,7 @@ const options = ref<TippyComponent | null>(null)
 const edit = ref<typeof SmartItem | null>(null)
 const duplicate = ref<typeof SmartItem | null>(null)
 const deleteAction = ref<typeof SmartItem | null>(null)
+const exportAction = ref<typeof SmartItem | null>(null)
 
 const removeEnvironment = () => {
   if (props.environmentIndex === null) return
@@ -161,4 +176,22 @@ const duplicateEnvironments = () => {
     )
   } else duplicateEnvironment(props.environmentIndex)
 }
+
+const exportEnvironment = () => {
+  const environmentJSON = JSON.stringify(props.environment)
+
+  const file = new Blob([environmentJSON], { type: "application/json" })
+  const a = document.createElement("a")
+  const url = URL.createObjectURL(file)
+  a.href = url
+
+  a.download = `${props.environment.name}.json`
+  document.body.appendChild(a)
+  a.click()
+  toast.success(t("state.download_started").toString())
+  setTimeout(() => {
+    document.body.removeChild(a)
+    URL.revokeObjectURL(url)
+  }, 1000)
+}
 </script>

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

@@ -40,6 +40,7 @@
             role="menu"
             @keyup.e="edit!.$el.click()"
             @keyup.d="duplicate!.$el.click()"
+            @keyup.x="exportAction!.$el.click()"
             @keyup.delete="deleteAction!.$el.click()"
             @keyup.escape="options!.tippy().hide()"
           >
@@ -67,6 +68,18 @@
                 }
               "
             />
+            <SmartItem
+              ref="exportAction"
+              :icon="IconDownload"
+              :label="t('export.title')"
+              :shortcut="['X']"
+              @click="
+                () => {
+                  exportEnvironment()
+                  hide()
+                }
+              "
+            />
             <SmartItem
               ref="deleteAction"
               :icon="IconTrash2"
@@ -108,6 +121,7 @@ import IconEdit from "~icons/lucide/edit"
 import IconCopy from "~icons/lucide/copy"
 import IconTrash2 from "~icons/lucide/trash-2"
 import IconMoreVertical from "~icons/lucide/more-vertical"
+import IconDownload from "~icons/lucide/download"
 import { TippyComponent } from "vue-tippy"
 import SmartItem from "@components/smart/Item.vue"
 
@@ -130,6 +144,7 @@ const options = ref<TippyComponent | null>(null)
 const edit = ref<typeof SmartItem | null>(null)
 const duplicate = ref<typeof SmartItem | null>(null)
 const deleteAction = ref<typeof SmartItem | null>(null)
+const exportAction = ref<typeof SmartItem | null>(null)
 
 const removeEnvironment = () => {
   pipe(
@@ -173,4 +188,22 @@ const getErrorMessage = (err: GQLError<string>) => {
     }
   }
 }
+
+const exportEnvironment = () => {
+  const environmentJSON = JSON.stringify(props.environment.environment)
+
+  const file = new Blob([environmentJSON], { type: "application/json" })
+  const a = document.createElement("a")
+  const url = URL.createObjectURL(file)
+  a.href = url
+
+  a.download = `${props.environment.environment.name}.json`
+  document.body.appendChild(a)
+  a.click()
+  toast.success(t("state.download_started").toString())
+  setTimeout(() => {
+    document.body.removeChild(a)
+    URL.revokeObjectURL(url)
+  }, 1000)
+}
 </script>