fix: issues with global environment writes

components/environments/Edit.vue

@@ -101,9 +101,11 @@
 
 <script lang="ts">
 import clone from "lodash/clone"
-import { defineComponent, PropType } from "@nuxtjs/composition-api"
+import { computed, defineComponent, PropType } from "@nuxtjs/composition-api"
 import {
   Environment,
+  getEnviroment,
+  getGlobalVariables,
   setGlobalEnvVariables,
   updateEnvironment,
 } from "~/newstore/environments"
@@ -111,15 +113,29 @@ import {
 export default defineComponent({
   props: {
     show: Boolean,
-    editingEnvironment: {
-      type: Object as PropType<Environment | null>,
-      default: null,
-    },
     editingEnvironmentIndex: {
-      type: [Number, String] as PropType<number | "global">,
+      type: [Number, String] as PropType<number | "global" | null>,
       default: null,
     },
   },
+  setup(props) {
+    const workingEnv = computed(() => {
+      if (props.editingEnvironmentIndex === null) return null
+
+      if (props.editingEnvironmentIndex === "global") {
+        return {
+          name: "Global",
+          variables: getGlobalVariables(),
+        } as Environment
+      } else {
+        return getEnviroment(props.editingEnvironmentIndex)
+      }
+    })
+
+    return {
+      workingEnv,
+    }
+  },
   data() {
     return {
       name: null as string | null,
@@ -128,13 +144,9 @@ export default defineComponent({
     }
   },
   watch: {
-    editingEnvironment() {
-      this.name = this.editingEnvironment?.name ?? null
-      this.vars = clone(this.editingEnvironment?.variables ?? [])
-    },
     show() {
-      this.name = this.editingEnvironment?.name ?? null
+      this.name = this.workingEnv?.name ?? null
-      this.vars = clone(this.editingEnvironment?.variables ?? [])
+      this.vars = clone(this.workingEnv?.variables ?? [])
     },
   },
   methods: {
@@ -170,7 +182,7 @@ export default defineComponent({
 
       if (this.editingEnvironmentIndex === "global")
         setGlobalEnvVariables(environmentUpdated.variables)
-      else updateEnvironment(this.editingEnvironmentIndex, environmentUpdated)
+      else updateEnvironment(this.editingEnvironmentIndex!, environmentUpdated)
       this.hideModal()
     },
     hideModal() {

components/environments/index.vue

@@ -67,7 +67,6 @@
     />
     <EnvironmentsEdit
       :show="showModalEdit"
-      :editing-environment="editingEnvironment"
       :editing-environment-index="editingEnvironmentIndex"
       @hide-modal="displayModalEdit(false)"
     />
@@ -80,14 +79,14 @@
         environment-index="global"
         :environment="globalEnvironment"
         class="border-b border-dashed border-dividerLight"
-        @edit-environment="editEnvironment(globalEnvironment, 'global')"
+        @edit-environment="editEnvironment('global')"
       />
       <EnvironmentsEnvironment
         v-for="(environment, index) in environments"
         :key="`environment-${index}`"
         :environment-index="index"
         :environment="environment"
-        @edit-environment="editEnvironment(environment, index)"
+        @edit-environment="editEnvironment(index)"
       />
     </div>
     <div
@@ -107,26 +106,23 @@
 </template>
 
 <script lang="ts">
-import { defineComponent } from "@nuxtjs/composition-api"
+import { computed, defineComponent } from "@nuxtjs/composition-api"
 import { useReadonlyStream, useStream } from "~/helpers/utils/composables"
 import {
   environments$,
   setCurrentEnvironment,
   selectedEnvIndex$,
-  Environment,
   globalEnv$,
 } from "~/newstore/environments"
 
 export default defineComponent({
   setup() {
     const globalEnv = useReadonlyStream(globalEnv$, [])
-    const globalEnvName = {
+
+    const globalEnvironment = computed(() => ({
       name: "Global",
-    }
-    const globalEnvVariables = {
       variables: globalEnv.value,
-    }
+    }))
-    const globalEnvironment = Object.assign(globalEnvName, globalEnvVariables)
 
     return {
       environments: useReadonlyStream(environments$, []),
@@ -143,8 +139,7 @@ export default defineComponent({
       showModalImportExport: false,
       showModalAdd: false,
       showModalEdit: false,
-      editingEnvironment: undefined as Environment | undefined,
+      editingEnvironmentIndex: undefined as number | "global" | undefined,
-      editingEnvironmentIndex: undefined as number | undefined,
     }
   },
   methods: {
@@ -159,13 +154,11 @@ export default defineComponent({
     displayModalImportExport(shouldDisplay: boolean) {
       this.showModalImportExport = shouldDisplay
     },
-    editEnvironment(environment: Environment, environmentIndex: number) {
+    editEnvironment(environmentIndex: number | "global") {
-      this.$data.editingEnvironment = environment
       this.$data.editingEnvironmentIndex = environmentIndex
       this.displayModalEdit(true)
     },
     resetSelectedData() {
-      this.$data.editingEnvironment = undefined
       this.$data.editingEnvironmentIndex = undefined
     },
   },

newstore/environments.ts

@@ -476,3 +476,7 @@ export function updateEnvironmentVariable(
     },
   })
 }
+
+export function getEnviroment(index: number) {
+  return environmentsStore.value.environments[index]
+}

newstore/localpersistence.ts

@@ -187,7 +187,7 @@ function setupGlobalEnvsPersistence() {
   setGlobalEnvVariables(globals)
 
   globalEnv$.subscribe((vars) => {
-    window.localStorage.setItem("globalEnvs", JSON.stringify(vars))
+    window.localStorage.setItem("globalEnv", JSON.stringify(vars))
   })
 }