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") {

lang/en-US.json

@@ -50,7 +50,6 @@
   "edit_environment": "Edit Environment",
   "env_variable_list": "Variable List",
   "invalid_environment_name": "Please provide a valid name for the environment",
-  "use_environment": "Use Environment",
   "add_one_variable": "(add at least one variable)",
   "import_curl": "Import cURL",
   "import": "Import",
@@ -294,5 +293,6 @@
   "select_delete_method": "Select DELETE method",
   "experiments": "Experiments",
   "experiments_notice": "This is a collection of experiments we're working on that might turn out to be useful, fun, both, or neither. They're not final and may not be stable, so if something overly weird happens, don't panic. Just turn the dang thing off. Jokes aside, ",
-  "use_experimental_url_bar": "Use experimental URL bar with environment highlighting"
-}
+  "use_experimental_url_bar": "Use experimental URL bar with environment highlighting",
+  "select_environment": "Select environment"
+}