Add latest changes from gitlab-org/gitlab@13-5-stable-eev13.5.0-rc42

3 files changed, 17 insertions, 46 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
index 0e09ae108ea..ceb94b1f0f8 100644
--- a/app/assets/javascripts/ci_variable_list/components/ci_environments_dropdown.vue
+++ b/app/assets/javascripts/ci_variable_list/components/ci_environments_dropdown.vue
@@ -1,22 +1,15 @@
 <script>
-import {
-  GlDeprecatedDropdown,
-  GlDeprecatedDropdownItem,
-  GlDeprecatedDropdownDivider,
-  GlSearchBoxByType,
-  GlIcon,
-} from '@gitlab/ui';
+import { GlDropdown, GlDropdownItem, GlDropdownDivider, GlSearchBoxByType } from '@gitlab/ui';
 import { mapGetters } from 'vuex';
 import { __, sprintf } from '~/locale';
 
 export default {
   name: 'CiEnvironmentsDropdown',
   components: {
-    GlDeprecatedDropdown,
-    GlDeprecatedDropdownItem,
-    GlDeprecatedDropdownDivider,
+    GlDropdown,
+    GlDropdownItem,
+    GlDropdownDivider,
     GlSearchBoxByType,
-    GlIcon,
   },
   props: {
     value: {
@@ -66,28 +59,25 @@ export default {
 };
 </script>
 <template>
-  <gl-deprecated-dropdown :text="value">
-    <gl-search-box-by-type v-model.trim="searchTerm" class="gl-m-3" />
-    <gl-deprecated-dropdown-item
+  <gl-dropdown :text="value">
+    <gl-search-box-by-type v-model.trim="searchTerm" />
+    <gl-dropdown-item
       v-for="environment in filteredResults"
       :key="environment"
+      :is-checked="isSelected(environment)"
+      is-check-item
       @click="selectEnvironment(environment)"
     >
-      <gl-icon
-        :class="{ invisible: !isSelected(environment) }"
-        name="mobile-issue-close"
-        class="vertical-align-middle"
-      />
       {{ environment }}
-    </gl-deprecated-dropdown-item>
-    <gl-deprecated-dropdown-item v-if="!filteredResults.length" ref="noMatchingResults">{{
+    </gl-dropdown-item>
+    <gl-dropdown-item v-if="!filteredResults.length" ref="noMatchingResults">{{
       __('No matching results')
-    }}</gl-deprecated-dropdown-item>
+    }}</gl-dropdown-item>
     <template v-if="shouldRenderCreateButton">
-      <gl-deprecated-dropdown-divider />
-      <gl-deprecated-dropdown-item @click="createClicked">
+      <gl-dropdown-divider />
+      <gl-dropdown-item @click="createClicked">
         {{ composedCreateButtonLabel }}
-      </gl-deprecated-dropdown-item>
+      </gl-dropdown-item>
     </template>
-  </gl-deprecated-dropdown>
+  </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 fbf19847e9d..a2f4bea2f61 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
@@ -6,7 +6,6 @@ import {
   GlFormCheckbox,
   GlFormCombobox,
   GlFormGroup,
-  GlFormInput,
   GlFormSelect,
   GlFormTextarea,
   GlIcon,
@@ -41,7 +40,6 @@ export default {
     GlFormCheckbox,
     GlFormCombobox,
     GlFormGroup,
-    GlFormInput,
     GlFormSelect,
     GlFormTextarea,
     GlIcon,
@@ -122,11 +120,6 @@ export default {
       return '';
     },
     tokenValidationState() {
-      // If the feature flag is off, do not validate. Remove when flag is removed.
-      if (!this.glFeatures.ciKeyAutocomplete) {
-        return true;
-      }
-
       const validator = this.$options.tokens?.[this.variable.key]?.validation;
 
       if (validator) {
@@ -204,21 +197,12 @@ export default {
   >
     <form>
       <gl-form-combobox
-        v-if="glFeatures.ciKeyAutocomplete"
         v-model="key"
         :token-list="$options.tokenList"
         :label-text="__('Key')"
         data-qa-selector="ci_variable_key_field"
       />
 
-      <gl-form-group v-else :label="__('Key')" label-for="ci-variable-key">
-        <gl-form-input
-          id="ci-variable-key"
-          v-model="key"
-          data-qa-selector="ci_variable_key_field"
-        />
-      </gl-form-group>
-
       <gl-form-group
         :label="__('Value')"
         label-for="ci-variable-value"
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 501c82b419e..07278bb442c 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
@@ -163,10 +163,7 @@ export default {
         </p>
       </template>
     </gl-table>
-    <div
-      class="ci-variable-actions d-flex justify-content-end"
-      :class="{ 'justify-content-center': !tableIsNotEmpty }"
-    >
+    <div class="ci-variable-actions" :class="{ 'justify-content-center': !tableIsNotEmpty }">
       <gl-button
         v-if="tableIsNotEmpty"
         ref="secret-value-reveal-button"