Add latest changes from gitlab-org/gitlab@master

10 files changed, 164 insertions, 5 deletions

diff --git a/app/assets/javascripts/ci_variable_list/components/ci_environments_dropdown.vue b/app/assets/javascripts/ci_variable_list/components/ci_environments_dropdown.vue
new file mode 100644
index 00000000000..175e89a454b
--- /dev/null
+++ b/app/assets/javascripts/ci_variable_list/components/ci_environments_dropdown.vue
@@ -0,0 +1,93 @@
+<script>
+import {
+  GlDropdown,
+  GlDropdownItem,
+  GlDropdownDivider,
+  GlSearchBoxByType,
+  GlIcon,
+} from '@gitlab/ui';
+import { __, sprintf } from '~/locale';
+import { mapGetters } from 'vuex';
+
+export default {
+  name: 'CiEnvironmentsDropdown',
+  components: {
+    GlDropdown,
+    GlDropdownItem,
+    GlDropdownDivider,
+    GlSearchBoxByType,
+    GlIcon,
+  },
+  props: {
+    value: {
+      type: String,
+      required: false,
+      default: '',
+    },
+  },
+  data() {
+    return {
+      searchTerm: this.value || '',
+    };
+  },
+  computed: {
+    ...mapGetters(['joinedEnvironments']),
+    composedCreateButtonLabel() {
+      return sprintf(__('Create wildcard: %{searchTerm}'), { searchTerm: this.searchTerm });
+    },
+    shouldRenderCreateButton() {
+      return this.searchTerm && !this.joinedEnvironments.includes(this.searchTerm);
+    },
+    filteredResults() {
+      const lowerCasedSearchTerm = this.searchTerm.toLowerCase();
+      return this.joinedEnvironments.filter(resultString =>
+        resultString.toLowerCase().includes(lowerCasedSearchTerm),
+      );
+    },
+  },
+  watch: {
+    value(newVal) {
+      this.searchTerm = newVal;
+    },
+  },
+  methods: {
+    selectEnvironment(selected) {
+      this.$emit('selectEnvironment', selected);
+      this.searchTerm = '';
+    },
+    createClicked() {
+      this.$emit('createClicked', this.searchTerm);
+      this.searchTerm = '';
+    },
+    isSelected(env) {
+      return this.value === env;
+    },
+  },
+};
+</script>
+<template>
+  <gl-dropdown :text="value">
+    <gl-search-box-by-type v-model.trim="searchTerm" class="m-2" />
+    <gl-dropdown-item
+      v-for="environment in filteredResults"
+      :key="environment"
+      @click="selectEnvironment(environment)"
+    >
+      <gl-icon
+        :class="{ invisible: !isSelected(environment) }"
+        name="mobile-issue-close"
+        class="vertical-align-middle"
+      />
+      {{ environment }}
+    </gl-dropdown-item>
+    <gl-dropdown-item v-if="!filteredResults.length" ref="noMatchingResults">{{
+      __('No matching results')
+    }}</gl-dropdown-item>
+    <template v-if="shouldRenderCreateButton">
+      <gl-dropdown-divider />
+      <gl-dropdown-item @click="createClicked">
+        {{ composedCreateButtonLabel }}
+      </gl-dropdown-item>
+    </template>
+  </gl-dropdown>
+</template>
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>
diff --git a/app/assets/javascripts/ci_variable_list/components/ci_variable_table.vue b/app/assets/javascripts/ci_variable_list/components/ci_variable_table.vue
index 3f2f89ada6f..806fa3e1191 100644
--- a/app/assets/javascripts/ci_variable_list/components/ci_variable_table.vue
+++ b/app/assets/javascripts/ci_variable_list/components/ci_variable_table.vue
@@ -92,6 +92,7 @@ export default {
       sort-by="key"
       sort-direction="asc"
       stacked="lg"
+      table-class="text-secondary"
       fixed
       show-empty
       sort-icon-left
diff --git a/app/assets/javascripts/ci_variable_list/constants.js b/app/assets/javascripts/ci_variable_list/constants.js
index b2fa980c546..d22138db102 100644
--- a/app/assets/javascripts/ci_variable_list/constants.js
+++ b/app/assets/javascripts/ci_variable_list/constants.js
@@ -6,7 +6,7 @@ export const ADD_CI_VARIABLE_MODAL_ID = 'add-ci-variable';
 export const displayText = {
   variableText: __('Var'),
   fileText: __('File'),
-  allEnvironmentsText: __('All'),
+  allEnvironmentsText: __('All (default)'),
 };
 
 export const types = {
diff --git a/app/assets/javascripts/ci_variable_list/store/actions.js b/app/assets/javascripts/ci_variable_list/store/actions.js
index f3a629b84ee..a22fa03e16d 100644
--- a/app/assets/javascripts/ci_variable_list/store/actions.js
+++ b/app/assets/javascripts/ci_variable_list/store/actions.js
@@ -153,3 +153,22 @@ export const fetchEnvironments = ({ dispatch, state }) => {
       createFlash(__('There was an error fetching the environments information.'));
     });
 };
+
+export const setEnvironmentScope = ({ commit, dispatch }, environment) => {
+  commit(types.SET_ENVIRONMENT_SCOPE, environment);
+  dispatch('setSelectedEnvironment', environment);
+};
+
+export const addWildCardScope = ({ commit, dispatch }, environment) => {
+  commit(types.ADD_WILD_CARD_SCOPE, environment);
+  commit(types.SET_ENVIRONMENT_SCOPE, environment);
+  dispatch('setSelectedEnvironment', environment);
+};
+
+export const resetSelectedEnvironment = ({ commit }) => {
+  commit(types.RESET_SELECTED_ENVIRONMENT);
+};
+
+export const setSelectedEnvironment = ({ commit }, environment) => {
+  commit(types.SET_SELECTED_ENVIRONMENT, environment);
+};
diff --git a/app/assets/javascripts/ci_variable_list/store/getters.js b/app/assets/javascripts/ci_variable_list/store/getters.js
new file mode 100644
index 00000000000..14b728302f9
--- /dev/null
+++ b/app/assets/javascripts/ci_variable_list/store/getters.js
@@ -0,0 +1,9 @@
+/* eslint-disable import/prefer-default-export */
+// Disabling import/prefer-default-export can be
+// removed once a second getter is added to this file
+import { uniq } from 'lodash';
+
+export const joinedEnvironments = state => {
+  const scopesFromVariables = (state.variables || []).map(variable => variable.environment_scope);
+  return uniq(state.environments.concat(scopesFromVariables)).sort();
+};
diff --git a/app/assets/javascripts/ci_variable_list/store/index.js b/app/assets/javascripts/ci_variable_list/store/index.js
index db4ba95b3c2..83802f6a36f 100644
--- a/app/assets/javascripts/ci_variable_list/store/index.js
+++ b/app/assets/javascripts/ci_variable_list/store/index.js
@@ -1,6 +1,7 @@
 import Vue from 'vue';
 import Vuex from 'vuex';
 import * as actions from './actions';
+import * as getters from './getters';
 import mutations from './mutations';
 import state from './state';
 
@@ -10,6 +11,7 @@ export default (initialState = {}) =>
   new Vuex.Store({
     actions,
     mutations,
+    getters,
     state: {
       ...state(),
       ...initialState,
diff --git a/app/assets/javascripts/ci_variable_list/store/mutation_types.js b/app/assets/javascripts/ci_variable_list/store/mutation_types.js
index 240066d0f22..0b41c20bce7 100644
--- a/app/assets/javascripts/ci_variable_list/store/mutation_types.js
+++ b/app/assets/javascripts/ci_variable_list/store/mutation_types.js
@@ -20,3 +20,7 @@ export const RECEIVE_UPDATE_VARIABLE_ERROR = 'RECEIVE_UPDATE_VARIABLE_ERROR';
 
 export const REQUEST_ENVIRONMENTS = 'REQUEST_ENVIRONMENTS';
 export const RECEIVE_ENVIRONMENTS_SUCCESS = 'RECEIVE_ENVIRONMENTS_SUCCESS';
+export const SET_ENVIRONMENT_SCOPE = 'SET_ENVIRONMENT_SCOPE';
+export const ADD_WILD_CARD_SCOPE = 'ADD_WILD_CARD_SCOPE';
+export const RESET_SELECTED_ENVIRONMENT = 'RESET_SELECTED_ENVIRONMENT';
+export const SET_SELECTED_ENVIRONMENT = 'SET_SELECTED_ENVIRONMENT';
diff --git a/app/assets/javascripts/ci_variable_list/store/mutations.js b/app/assets/javascripts/ci_variable_list/store/mutations.js
index c75eb4a91fd..7ee7d7bdc26 100644
--- a/app/assets/javascripts/ci_variable_list/store/mutations.js
+++ b/app/assets/javascripts/ci_variable_list/store/mutations.js
@@ -83,4 +83,25 @@ export default {
     state.variableBeingEdited = null;
     state.showInputValue = false;
   },
+
+  [types.SET_ENVIRONMENT_SCOPE](state, environment) {
+    if (state.variableBeingEdited) {
+      state.variableBeingEdited.environment_scope = environment;
+    } else {
+      state.variable.environment_scope = environment;
+    }
+  },
+
+  [types.ADD_WILD_CARD_SCOPE](state, environment) {
+    state.environments.push(environment);
+    state.environments.sort();
+  },
+
+  [types.RESET_SELECTED_ENVIRONMENT](state) {
+    state.selectedEnvironment = '';
+  },
+
+  [types.SET_SELECTED_ENVIRONMENT](state, environment) {
+    state.selectedEnvironment = environment;
+  },
 };
diff --git a/app/assets/javascripts/ci_variable_list/store/state.js b/app/assets/javascripts/ci_variable_list/store/state.js
index 5166321d6a7..8c0b9c6966f 100644
--- a/app/assets/javascripts/ci_variable_list/store/state.js
+++ b/app/assets/javascripts/ci_variable_list/store/state.js
@@ -21,4 +21,5 @@ export default () => ({
   environments: [],
   typeOptions: [displayText.variableText, displayText.fileText],
   variableBeingEdited: null,
+  selectedEnvironment: '',
 });