feat: add ability to copy environments (#1848)

Co-authored-by: StephaneBischoffSSENSE <stephane.bischoff@ssense.com>

packages/hoppscotch-app/components/environments/Environment.vue

@@ -41,6 +41,17 @@
             }
           "
         />
+        <SmartItem
+          v-if="!(environmentIndex === 'Global')"
+          svg="copy"
+          :label="`${$t('action.duplicate')}`"
+          @click.native="
+            () => {
+              duplicateEnvironment()
+              $refs.options.tippy().hide()
+            }
+          "
+        />
         <SmartItem
           v-if="!(environmentIndex === 'Global')"
           svg="trash-2"
@@ -66,7 +77,10 @@
 
 <script lang="ts">
 import { defineComponent, PropType } from "@nuxtjs/composition-api"
-import { deleteEnvironment } from "~/newstore/environments"
+import {
+  deleteEnvironment,
+  duplicateEnvironment,
+} from "~/newstore/environments"
 
 export default defineComponent({
   props: {
@@ -89,6 +103,10 @@ export default defineComponent({
         icon: "delete",
       })
     },
+    duplicateEnvironment() {
+      if (this.environmentIndex !== "Global")
+        duplicateEnvironment(this.environmentIndex)
+    },
   },
 })
 </script>

packages/hoppscotch-app/locales/en.json

@@ -10,6 +10,7 @@
     "disconnect": "Disconnect",
     "dismiss": "Dismiss",
     "download_file": "Download file",
+    "duplicate": "Duplicate",
     "edit": "Edit",
     "go_back": "Go back",
     "label": "Label",

packages/hoppscotch-app/newstore/environments.ts

@@ -1,3 +1,4 @@
+import { cloneDeep } from "lodash"
 import isEqual from "lodash/isEqual"
 import { combineLatest } from "rxjs"
 import { distinctUntilChanged, map, pluck } from "rxjs/operators"
@@ -76,6 +77,26 @@ const dispatchers = defineDispatchers({
       ],
     }
   },
+  duplicateEnvironment(
+    { environments }: EnvironmentStore,
+    { envIndex }: { envIndex: number }
+  ) {
+    const newEnvironment = environments.find((_, index) => index === envIndex)
+    if (!newEnvironment) {
+      return {
+        environments,
+      }
+    }
+    return {
+      environments: [
+        ...environments,
+        {
+          ...cloneDeep(newEnvironment),
+          name: `Duplicate of ${newEnvironment.name}`,
+        },
+      ],
+    }
+  },
   deleteEnvironment(
     { environments, currentEnvironmentIndex }: EnvironmentStore,
     { envIndex }: { envIndex: number }
@@ -398,6 +419,15 @@ export function createEnvironment(envName: string) {
   })
 }
 
+export function duplicateEnvironment(envIndex: number) {
+  environmentsStore.dispatch({
+    dispatcher: "duplicateEnvironment",
+    payload: {
+      envIndex,
+    },
+  })
+}
+
 export function deleteEnvironment(envIndex: number) {
   environmentsStore.dispatch({
     dispatcher: "deleteEnvironment",