1 files changed, 13 insertions, 4 deletions
diff --git a/app/assets/javascripts/ci_variable_list/components/ci_variable_modal.vue b/app/assets/javascripts/ci_variable_list/components/ci_variable_modal.vue
index 0ccc58ec2da..0460181558b 100644
--- a/app/assets/javascripts/ci_variable_list/components/ci_variable_modal.vue
+++ b/app/assets/javascripts/ci_variable_list/components/ci_variable_modal.vue
@@ -2,6 +2,7 @@
 import { __ } from '~/locale';
 import { mapActions, mapState } from 'vuex';
 import { ADD_CI_VARIABLE_MODAL_ID } from '../constants';
+import CiEnvironmentsDropdown from './ci_environments_dropdown.vue';
 import {
   GlButton,
   GlModal,
@@ -17,6 +18,7 @@ import {
 export default {
   modalId: ADD_CI_VARIABLE_MODAL_ID,
   components: {
+    CiEnvironmentsDropdown,
     GlButton,
     GlModal,
     GlFormSelect,
@@ -36,6 +38,7 @@ export default {
       'variableBeingEdited',
       'isGroup',
       'maskableRegex',
+      'selectedEnvironment',
     ]),
     canSubmit() {
       if (this.variableData.masked && this.maskedState === false) {
@@ -80,6 +83,10 @@ export default {
       'displayInputValue',
       'clearModal',
       'deleteVariable',
+      'setEnvironmentScope',
+      'addWildCardScope',
+      'resetSelectedEnvironment',
+      'setSelectedEnvironment',
     ]),
     updateOrAddVariable() {
       if (this.variableBeingEdited) {
@@ -95,6 +102,7 @@ export default {
       } else {
         this.clearModal();
       }
+      this.resetSelectedEnvironment();
     },
     hideModal() {
       this.$refs.modal.hide();
@@ -158,10 +166,11 @@ export default {
           label-for="ci-variable-env"
           class="w-50"
         >
-          <gl-form-select
-            id="ci-variable-env"
-            v-model="variableData.environment_scope"
-            :options="environments"
+          <ci-environments-dropdown
+            class="w-100"
+            :value="variableData.environment_scope"
+            @selectEnvironment="setEnvironmentScope"
+            @createClicked="addWildCardScope"
           />
         </gl-form-group>
       </div>