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

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

@@ -182,10 +182,11 @@
         class="my-4"
       />
     </div>
-    <EnvironmentsAdd
-      :show="showModalAdd"
+    <EnvironmentsDetails
+      :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>