refactor: combine add and edit environment modals (#2131)

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

@@ -1,78 +0,0 @@
-<template>
-  <SmartModal
-    v-if="show"
-    :title="`${$t('environment.new')}`"
-    @close="hideModal"
-  >
-    <template #body>
-      <div class="flex flex-col px-2">
-        <input
-          id="selectLabelEnvAdd"
-          v-model="name"
-          v-focus
-          class="input floating-input"
-          placeholder=" "
-          type="text"
-          autocomplete="off"
-          @keyup.enter="addNewEnvironment"
-        />
-        <label for="selectLabelEnvAdd">
-          {{ $t("action.label") }}
-        </label>
-      </div>
-    </template>
-    <template #footer>
-      <span>
-        <ButtonPrimary
-          :label="`${$t('action.save')}`"
-          @click.native="addNewEnvironment"
-        />
-        <ButtonSecondary
-          :label="`${$t('action.cancel')}`"
-          @click.native="hideModal"
-        />
-      </span>
-    </template>
-  </SmartModal>
-</template>
-
-<script lang="ts">
-import { defineComponent } from "@nuxtjs/composition-api"
-import { useReadonlyStream } from "~/helpers/utils/composables"
-import { createEnvironment, environments$ } from "~/newstore/environments"
-
-export default defineComponent({
-  props: {
-    show: Boolean,
-  },
-  setup() {
-    return {
-      envList: useReadonlyStream(environments$, []),
-    }
-  },
-  data() {
-    return {
-      name: null as string | null,
-    }
-  },
-  methods: {
-    addNewEnvironment() {
-      if (!this.name) {
-        this.$toast.error(`${this.$t("environment.invalid_name")}`)
-        return
-      }
-      createEnvironment(this.name)
-      // TODO: find better way to get index of new environment
-      this.$emit("environment-added", {
-        name: this.name,
-        index: this.envList.length - 1,
-      })
-      this.hideModal()
-    },
-    hideModal() {
-      this.name = null
-      this.$emit("hide-modal")
-    },
-  },
-})
-</script>

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

@@ -1,7 +1,7 @@
 <template>
   <SmartModal
     v-if="show"
-    :title="`${$t('environment.edit')}`"
+    :title="$t(`environment.${action}`)"
     @close="hideModal"
   >
     <template #body>
@@ -120,9 +120,12 @@ import { computed, defineComponent, PropType } from "@nuxtjs/composition-api"
 import * as E from "fp-ts/Either"
 import { Environment, parseTemplateStringE } from "@hoppscotch/data"
 import {
+  createEnvironment,
+  environments$,
   getEnviroment,
   getGlobalVariables,
   globalEnv$,
+  setCurrentEnvironment,
   setGlobalEnvVariables,
   updateEnvironment,
 } from "~/newstore/environments"
@@ -131,30 +134,44 @@ import { useReadonlyStream } from "~/helpers/utils/composables"
 export default defineComponent({
   props: {
     show: Boolean,
+    action: {
+      type: String as PropType<"new" | "edit">,
+      default: "edit",
+    },
     editingEnvironmentIndex: {
       type: [Number, String] as PropType<number | "Global" | null>,
       default: null,
     },
+    envVars: {
+      type: Function as PropType<() => Environment["variables"]>,
+      default: () => [],
+    },
   },
   setup(props) {
     const globalVars = useReadonlyStream(globalEnv$, [])
 
     const workingEnv = computed(() => {
-      if (props.editingEnvironmentIndex === null) return null
-
       if (props.editingEnvironmentIndex === "Global") {
         return {
           name: "Global",
           variables: getGlobalVariables(),
         } as Environment
-      } else {
+      } else if (props.action === "new") {
+        return {
+          name: "",
+          variables: props.envVars(),
+        }
+      } else if (props.editingEnvironmentIndex !== null) {
         return getEnviroment(props.editingEnvironmentIndex)
+      } else {
+        return null
       }
     })
 
     return {
       globalVars,
       workingEnv,
+      envList: useReadonlyStream(environments$, []) || props.envVars(),
     }
   },
   data() {
@@ -219,6 +236,11 @@ export default defineComponent({
         return
       }
 
+      if (this.action === "new") {
+        createEnvironment(this.name)
+        setCurrentEnvironment(this.envList.length - 1)
+      }
+
       const environmentUpdated: Environment = {
         name: this.name,
         variables: this.vars,
@@ -226,7 +248,11 @@ export default defineComponent({
 
       if (this.editingEnvironmentIndex === "Global")
         setGlobalEnvVariables(environmentUpdated.variables)
-      else updateEnvironment(this.editingEnvironmentIndex!, environmentUpdated)
+      else if (this.action === "new") {
+        updateEnvironment(this.envList.length - 1, environmentUpdated)
+      } else {
+        updateEnvironment(this.editingEnvironmentIndex!, environmentUpdated)
+      }
       this.hideModal()
     },
     hideModal() {

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

@@ -107,12 +107,9 @@
         @click.native="displayModalAdd(true)"
       />
     </div>
-    <EnvironmentsAdd
+    <EnvironmentsDetails
-      :show="showModalAdd"
+      :show="showModalDetails"
-      @hide-modal="displayModalAdd(false)"
+      :action="action"
-    />
-    <EnvironmentsEdit
-      :show="showModalEdit"
       :editing-environment-index="editingEnvironmentIndex"
       @hide-modal="displayModalEdit(false)"
     />
@@ -155,17 +152,19 @@ export default defineComponent({
   data() {
     return {
       showModalImportExport: false,
-      showModalAdd: false,
+      showModalDetails: false,
-      showModalEdit: false,
+      action: "edit" as "new" | "edit",
       editingEnvironmentIndex: undefined as number | "Global" | undefined,
     }
   },
   methods: {
     displayModalAdd(shouldDisplay: boolean) {
-      this.showModalAdd = shouldDisplay
+      this.action = "new"
+      this.showModalDetails = shouldDisplay
     },
     displayModalEdit(shouldDisplay: boolean) {
-      this.showModalEdit = shouldDisplay
+      this.action = "edit"
+      this.showModalDetails = shouldDisplay
 
       if (!shouldDisplay) this.resetSelectedData()
     },
@@ -174,6 +173,7 @@ export default defineComponent({
     },
     editEnvironment(environmentIndex: number | "Global") {
       this.$data.editingEnvironmentIndex = environmentIndex
+      this.action = "edit"
       this.displayModalEdit(true)
     },
     resetSelectedData() {

packages/hoppscotch-app/components/http/TestResult.vue

@@ -182,10 +182,11 @@
         class="my-4"
       />
     </div>
-    <EnvironmentsAdd
+    <EnvironmentsDetails
-      :show="showModalAdd"
+      :show="showModalDetails"
+      action="new"
+      :env-vars="getAdditionVars"
       @hide-modal="displayModalAdd(false)"
-      @environment-added="createNewEnv($event)"
     />
   </div>
 </template>
@@ -203,17 +204,16 @@ import {
   selectedEnvIndex$,
   setCurrentEnvironment,
   setGlobalEnvVariables,
-  updateEnvironment,
 } from "~/newstore/environments"
 import { restTestResults$, setRESTTestResults } from "~/newstore/RESTSession"
 import { HoppTestResult } from "~/helpers/types/HoppTestResult"
 
 const t = useI18n()
 
-const showModalAdd = ref(false)
+const showModalDetails = ref(false)
 
 const displayModalAdd = (shouldDisplay: boolean) => {
-  showModalAdd.value = shouldDisplay
+  showModalDetails.value = shouldDisplay
 }
 
 const testResults = useReadonlyStream(
@@ -221,6 +221,15 @@ const testResults = useReadonlyStream(
   null
 ) as Ref<HoppTestResult | null>
 
+/**
+ * Get the "addition" environment variables
+ * @returns Array of objects with key-value pairs of arguments
+ */
+const getAdditionVars = () =>
+  testResults?.value?.envDiff?.selected?.additions
+    ? testResults.value.envDiff.selected.additions
+    : []
+
 const clearContent = () => setRESTTestResults(null)
 
 const haveEnvVariables = computed(() => {
@@ -266,13 +275,4 @@ const addEnvToGlobal = () => {
     ...testResults.value.envDiff.selected.additions,
   ])
 }
-
-const createNewEnv = ({ name, index }: { name: string; index: number }) => {
-  if (!testResults.value?.envDiff.selected.additions) return
-  updateEnvironment(index, {
-    name,
-    variables: testResults.value.envDiff.selected.additions,
-  })
-  setCurrentEnvironment(index)
-}
 </script>