refactor(ui): global environment

components/environments/Edit.vue

@@ -10,6 +10,7 @@
             class="input floating-input"
             placeholder=" "
             type="text"
+            :disabled="editingEnvironmentIndex === 'global'"
             @keyup.enter="saveEnvironment"
           />
           <label for="selectLabelEnvEdit">
@@ -101,8 +102,11 @@
 <script lang="ts">
 import clone from "lodash/clone"
 import { defineComponent, PropType } from "@nuxtjs/composition-api"
-import type { Environment } from "~/newstore/environments"
+import {
-import { updateEnvironment } from "~/newstore/environments"
+  Environment,
+  setGlobalEnvVariables,
+  updateEnvironment,
+} from "~/newstore/environments"
 
 export default defineComponent({
   props: {
@@ -111,7 +115,10 @@ export default defineComponent({
       type: Object as PropType<Environment | null>,
       default: null,
     },
-    editingEnvironmentIndex: { type: Number, default: null },
+    editingEnvironmentIndex: {
+      type: [Number, String] as PropType<number | "global">,
+      default: null,
+    },
   },
   data() {
     return {
@@ -161,7 +168,9 @@ export default defineComponent({
         variables: this.vars,
       }
 
-      updateEnvironment(this.editingEnvironmentIndex, environmentUpdated)
+      if (this.editingEnvironmentIndex === "global")
+        setGlobalEnvVariables(environmentUpdated.variables)
+      else updateEnvironment(this.editingEnvironmentIndex, environmentUpdated)
       this.hideModal()
     },
     hideModal() {

components/environments/Environment.vue

@@ -40,6 +40,7 @@
           "
         />
         <SmartItem
+          v-if="!(environmentIndex === 'global')"
           icon="remove_circle_outline"
           color="red"
           :label="$t('delete')"
@@ -60,13 +61,17 @@
 </template>
 
 <script lang="ts">
+import { PropType } from "@nuxtjs/composition-api"
 import Vue from "vue"
 import { deleteEnvironment } from "~/newstore/environments"
 
 export default Vue.extend({
   props: {
     environment: { type: Object, default: () => {} },
-    environmentIndex: { type: Number, default: null },
+    environmentIndex: {
+      type: [Number, String] as PropType<number | "global">,
+      default: null,
+    },
   },
   data() {
     return {
@@ -75,7 +80,8 @@ export default Vue.extend({
   },
   methods: {
     removeEnvironment() {
-      deleteEnvironment(this.environmentIndex)
+      if (this.environmentIndex !== "global")
+        deleteEnvironment(this.environmentIndex)
       this.$toast.error(this.$t("deleted").toString(), {
         icon: "delete",
       })

components/environments/index.vue

@@ -75,6 +75,21 @@
       :show="showModalImportExport"
       @hide-modal="displayModalImportExport(false)"
     />
+    <div class="flex flex-col">
+      <EnvironmentsEnvironment
+        environment-index="global"
+        :environment="globalEnvironment"
+        class="border-b border-dashed border-dividerLight"
+        @edit-environment="editEnvironment(globalEnvironment, 'global')"
+      />
+      <EnvironmentsEnvironment
+        v-for="(environment, index) in environments"
+        :key="`environment-${index}`"
+        :environment-index="index"
+        :environment="environment"
+        @edit-environment="editEnvironment(environment, index)"
+      />
+    </div>
     <div
       v-if="environments.length === 0"
       class="flex flex-col text-secondaryLight p-4 items-center justify-center"
@@ -88,15 +103,6 @@
         @click.native="displayModalAdd(true)"
       />
     </div>
-    <div class="flex flex-col">
-      <EnvironmentsEnvironment
-        v-for="(environment, index) in environments"
-        :key="`environment-${index}`"
-        :environment-index="index"
-        :environment="environment"
-        @edit-environment="editEnvironment(environment, index)"
-      />
-    </div>
   </AppSection>
 </template>
 
@@ -108,12 +114,23 @@ import {
   setCurrentEnvironment,
   selectedEnvIndex$,
   Environment,
+  globalEnv$,
 } from "~/newstore/environments"
 
 export default defineComponent({
   setup() {
+    const globalEnv = useReadonlyStream(globalEnv$, [])
+    const globalEnvName = {
+      name: "Global",
+    }
+    const globalEnvVariables = {
+      variables: globalEnv.value,
+    }
+    const globalEnvironment = Object.assign(globalEnvName, globalEnvVariables)
+
     return {
       environments: useReadonlyStream(environments$, []),
+      globalEnvironment,
       selectedEnvironmentIndex: useStream(
         selectedEnvIndex$,
         -1,