Environment select box - cherry picked from #1359

components/environments/environment.vue

@@ -1,12 +1,8 @@
 <template>
   <div class="row-wrapper">
     <div>
-      <button
-        class="icon"
-        @click="$emit('select-environment')"
-        v-tooltip.bottom="$t('use_environment')"
-      >
-        <i class="material-icons">insert_drive_file</i>
+      <button class="icon" @click="$emit('edit-environment')">
+        <i class="material-icons">layers</i>
         <span>{{ environment.name }}</span>
       </button>
     </div>

components/environments/index.vue

@@ -1,5 +1,27 @@
 <template>
   <pw-section class="green" icon="history" :label="$t('environments')" ref="environments">
+    <div class="show-on-large-screen">
+      <ul class="w-full">
+        <li>
+          <label for="currentEnvironment">{{ $t("select_environment") }}</label>
+          <span class="select-wrapper">
+            <select
+              id="currentEnvironment"
+              v-model="selectedEnvironmentIndex"
+              :disabled="environments.length == 0"
+            >
+              <option :value="-1">No environment</option>
+              <option v-if="environments.length === 0" value="0">
+                {{ $t("create_new_environment") }}
+              </option>
+              <option v-for="(environment, index) in environments" :value="index" :key="index">
+                {{ environment.name }}
+              </option>
+            </select>
+          </span>
+        </li>
+      </ul>
+    </div>
     <add-environment :show="showModalAdd" @hide-modal="displayModalAdd(false)" />
     <edit-environment
       :show="showModalEdit"
@@ -34,9 +56,6 @@
             :environmentIndex="index"
             :environment="environment"
             @edit-environment="editEnvironment(environment, index)"
-            @select-environment="
-              $emit('use-environment', { environment: environment, environments: environments })
-            "
           />
         </li>
       </ul>
@@ -61,6 +80,11 @@ export default {
       showModalEdit: false,
       editingEnvironment: undefined,
       editingEnvironmentIndex: undefined,
+      selectedEnvironmentIndex: -1,
+      defaultEnvironment: {
+        name: "My Environment Variables",
+        variables: [],
+      },
     }
   },
   computed: {
@@ -70,6 +94,38 @@ export default {
         : this.$store.state.postwoman.environments
     },
   },
+  watch: {
+    selectedEnvironmentIndex(val) {
+      if (val === -1)
+        this.$emit("use-environment", {
+          environment: this.defaultEnvironment,
+          environments: this.environments,
+        })
+      else
+        this.$emit("use-environment", {
+          environment: this.environments[val],
+          environments: this.environments,
+        })
+    },
+    environments: {
+      handler(val) {
+        if (val.length === 0) {
+          this.selectedEnvironmentIndex = -1
+          this.$emit("use-environment", {
+            environment: this.defaultEnvironment,
+            environments: this.environments,
+          })
+        } else {
+          if (this.environments[this.selectedEnvironmentIndex])
+            this.$emit("use-environment", {
+              environment: this.environments[this.selectedEnvironmentIndex],
+              environments: this.environments,
+            })
+          else this.selectedEnvironmentIndex = -1
+        }
+      },
+    },
+  },
   async mounted() {
     this._keyListener = function (e) {
       if (e.key === "Escape") {