Add latest changes from gitlab-org/gitlab@master

2 files changed, 4 insertions, 172 deletions

diff --git a/app/assets/javascripts/ci_variable_list/components/ci_key_field.vue b/app/assets/javascripts/ci_variable_list/components/ci_key_field.vue
deleted file mode 100644
index c15d638d92b..00000000000
--- a/app/assets/javascripts/ci_variable_list/components/ci_key_field.vue
+++ /dev/null
@@ -1,169 +0,0 @@
-<script>
-import { uniqueId } from 'lodash';
-import { GlButton, GlFormGroup, GlFormInput } from '@gitlab/ui';
-
-export default {
-  name: 'CiKeyField',
-  components: {
-    GlButton,
-    GlFormGroup,
-    GlFormInput,
-  },
-  model: {
-    prop: 'value',
-    event: 'input',
-  },
-  props: {
-    tokenList: {
-      type: Array,
-      required: true,
-    },
-    value: {
-      type: String,
-      required: true,
-    },
-  },
-  data() {
-    return {
-      results: [],
-      arrowCounter: -1,
-      userDismissedResults: false,
-      suggestionsId: uniqueId('token-suggestions-'),
-    };
-  },
-  computed: {
-    showAutocomplete() {
-      return this.showSuggestions ? 'off' : 'on';
-    },
-    showSuggestions() {
-      return this.results.length > 0;
-    },
-  },
-  mounted() {
-    document.addEventListener('click', this.handleClickOutside);
-  },
-  destroyed() {
-    document.removeEventListener('click', this.handleClickOutside);
-  },
-  methods: {
-    closeSuggestions() {
-      this.results = [];
-      this.arrowCounter = -1;
-    },
-    handleClickOutside(event) {
-      if (!this.$el.contains(event.target)) {
-        this.closeSuggestions();
-      }
-    },
-    onArrowDown() {
-      const newCount = this.arrowCounter + 1;
-
-      if (newCount >= this.results.length) {
-        this.arrowCounter = 0;
-        return;
-      }
-
-      this.arrowCounter = newCount;
-    },
-    onArrowUp() {
-      const newCount = this.arrowCounter - 1;
-
-      if (newCount < 0) {
-        this.arrowCounter = this.results.length - 1;
-        return;
-      }
-
-      this.arrowCounter = newCount;
-    },
-    onEnter() {
-      const currentToken = this.results[this.arrowCounter] || this.value;
-      this.selectToken(currentToken);
-    },
-    onEsc() {
-      if (!this.showSuggestions) {
-        this.$emit('input', '');
-      }
-      this.closeSuggestions();
-      this.userDismissedResults = true;
-    },
-    onEntry(value) {
-      this.$emit('input', value);
-      this.userDismissedResults = false;
-
-      // short circuit so that we don't false match on empty string
-      if (value.length < 1) {
-        this.closeSuggestions();
-        return;
-      }
-
-      const filteredTokens = this.tokenList.filter(token =>
-        token.toLowerCase().includes(value.toLowerCase()),
-      );
-
-      if (filteredTokens.length) {
-        this.openSuggestions(filteredTokens);
-      } else {
-        this.closeSuggestions();
-      }
-    },
-    openSuggestions(filteredResults) {
-      this.results = filteredResults;
-    },
-    selectToken(value) {
-      this.$emit('input', value);
-      this.closeSuggestions();
-      this.$emit('key-selected');
-    },
-  },
-};
-</script>
-<template>
-  <div>
-    <div class="dropdown position-relative" role="combobox" aria-owns="token-suggestions">
-      <gl-form-group :label="__('Key')" label-for="ci-variable-key">
-        <gl-form-input
-          id="ci-variable-key"
-          :value="value"
-          type="text"
-          role="searchbox"
-          class="form-control pl-2 js-env-input"
-          :autocomplete="showAutocomplete"
-          aria-autocomplete="list"
-          aria-controls="token-suggestions"
-          aria-haspopup="listbox"
-          :aria-expanded="showSuggestions"
-          data-qa-selector="ci_variable_key_field"
-          @input="onEntry"
-          @keydown.down="onArrowDown"
-          @keydown.up="onArrowUp"
-          @keydown.enter.prevent="onEnter"
-          @keydown.esc.stop="onEsc"
-          @keydown.tab="closeSuggestions"
-        />
-      </gl-form-group>
-
-      <div
-        v-show="showSuggestions && !userDismissedResults"
-        id="ci-variable-dropdown"
-        class="dropdown-menu dropdown-menu-selectable dropdown-menu-full-width"
-        :class="{ 'd-block': showSuggestions }"
-      >
-        <div class="dropdown-content">
-          <ul :id="suggestionsId">
-            <li
-              v-for="(result, i) in results"
-              :key="i"
-              role="option"
-              :class="{ 'gl-bg-gray-50': i === arrowCounter }"
-              :aria-selected="i === arrowCounter"
-            >
-              <gl-button tabindex="-1" class="btn-transparent pl-2" @click="selectToken(result)">{{
-                result
-              }}</gl-button>
-            </li>
-          </ul>
-        </div>
-      </div>
-    </div>
-  </div>
-</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 10909230726..0ba58430de1 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
@@ -5,6 +5,7 @@ import {
   GlCollapse,
   GlDeprecatedButton,
   GlFormCheckbox,
+  GlFormCombobox,
   GlFormGroup,
   GlFormInput,
   GlFormSelect,
@@ -26,7 +27,6 @@ import {
   AWS_TIP_MESSAGE,
 } from '../constants';
 import { awsTokens, awsTokenList } from './ci_variable_autocomplete_tokens';
-import CiKeyField from './ci_key_field.vue';
 import CiEnvironmentsDropdown from './ci_environments_dropdown.vue';
 
 export default {
@@ -36,12 +36,12 @@ export default {
   awsTipMessage: AWS_TIP_MESSAGE,
   components: {
     CiEnvironmentsDropdown,
-    CiKeyField,
     GlAlert,
     GlButton,
     GlCollapse,
     GlDeprecatedButton,
     GlFormCheckbox,
+    GlFormCombobox,
     GlFormGroup,
     GlFormInput,
     GlFormSelect,
@@ -205,10 +205,11 @@ export default {
     @shown="setVariableProtectedByDefault"
   >
     <form>
-      <ci-key-field
+      <gl-form-combobox
         v-if="glFeatures.ciKeyAutocomplete"
         v-model="key"
         :token-list="$options.tokenList"
+        :label-text="__('Key')"
       />
 
       <gl-form-group v-else :label="__('Key')" label-for="ci-variable-key">