From d0a9445dfc0cbb15f3db07673919f7e68655fff2 Mon Sep 17 00:00:00 2001
From: Liyas Thomas <liyascthomas@gmail.com>
Date: Thu, 3 Dec 2020 11:12:47 +0530
Subject: [PATCH] Environment select box - cherry picked from #1359

---
 components/environments/environment.vue |  8 +---
 components/environments/index.vue       | 62 +++++++++++++++++++++++--
 lang/en-US.json                         |  6 +--
 3 files changed, 64 insertions(+), 12 deletions(-)

diff --git a/components/environments/environment.vue b/components/environments/environment.vue
index 77a26cd98..2f68eebf2 100644
--- a/components/environments/environment.vue
+++ b/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>
diff --git a/components/environments/index.vue b/components/environments/index.vue
index 7886ad351..c2a6c8f7f 100644
--- a/components/environments/index.vue
+++ b/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") {
diff --git a/lang/en-US.json b/lang/en-US.json
index 4d46e9675..d992a9378 100644
--- a/lang/en-US.json
+++ b/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"
-}
\ No newline at end of file
+  "use_experimental_url_bar": "Use experimental URL bar with environment highlighting",
+  "select_environment": "Select environment"
+}