Add latest changes from gitlab-org/gitlab@13-3-stable-ee

7 files changed, 51 insertions, 49 deletions

diff --git a/app/assets/javascripts/ci_variable_list/ajax_variable_list.js b/app/assets/javascripts/ci_variable_list/ajax_variable_list.js
index 470649e63fb..b8bf363fc9d 100644
--- a/app/assets/javascripts/ci_variable_list/ajax_variable_list.js
+++ b/app/assets/javascripts/ci_variable_list/ajax_variable_list.js
@@ -1,7 +1,7 @@
 import { escape } from 'lodash';
 import axios from '../lib/utils/axios_utils';
 import { s__ } from '../locale';
-import Flash from '../flash';
+import { deprecatedCreateFlash as Flash } from '../flash';
 import { parseBoolean } from '../lib/utils/common_utils';
 import statusCodes from '../lib/utils/http_status';
 import VariableList from './ci_variable_list';
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 175e89a454b..d22fef27964 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,20 +1,20 @@
 <script>
 import {
-  GlDropdown,
-  GlDropdownItem,
-  GlDropdownDivider,
+  GlDeprecatedDropdown,
+  GlDeprecatedDropdownItem,
+  GlDeprecatedDropdownDivider,
   GlSearchBoxByType,
   GlIcon,
 } from '@gitlab/ui';
-import { __, sprintf } from '~/locale';
 import { mapGetters } from 'vuex';
+import { __, sprintf } from '~/locale';
 
 export default {
   name: 'CiEnvironmentsDropdown',
   components: {
-    GlDropdown,
-    GlDropdownItem,
-    GlDropdownDivider,
+    GlDeprecatedDropdown,
+    GlDeprecatedDropdownItem,
+    GlDeprecatedDropdownDivider,
     GlSearchBoxByType,
     GlIcon,
   },
@@ -66,9 +66,9 @@ export default {
 };
 </script>
 <template>
-  <gl-dropdown :text="value">
+  <gl-deprecated-dropdown :text="value">
     <gl-search-box-by-type v-model.trim="searchTerm" class="m-2" />
-    <gl-dropdown-item
+    <gl-deprecated-dropdown-item
       v-for="environment in filteredResults"
       :key="environment"
       @click="selectEnvironment(environment)"
@@ -79,15 +79,15 @@ export default {
         class="vertical-align-middle"
       />
       {{ environment }}
-    </gl-dropdown-item>
-    <gl-dropdown-item v-if="!filteredResults.length" ref="noMatchingResults">{{
+    </gl-deprecated-dropdown-item>
+    <gl-deprecated-dropdown-item v-if="!filteredResults.length" ref="noMatchingResults">{{
       __('No matching results')
-    }}</gl-dropdown-item>
+    }}</gl-deprecated-dropdown-item>
     <template v-if="shouldRenderCreateButton">
-      <gl-dropdown-divider />
-      <gl-dropdown-item @click="createClicked">
+      <gl-deprecated-dropdown-divider />
+      <gl-deprecated-dropdown-item @click="createClicked">
         {{ composedCreateButtonLabel }}
-      </gl-dropdown-item>
+      </gl-deprecated-dropdown-item>
     </template>
-  </gl-dropdown>
+  </gl-deprecated-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 0ba58430de1..fbf19847e9d 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
@@ -3,7 +3,6 @@ import {
   GlAlert,
   GlButton,
   GlCollapse,
-  GlDeprecatedButton,
   GlFormCheckbox,
   GlFormCombobox,
   GlFormGroup,
@@ -39,7 +38,6 @@ export default {
     GlAlert,
     GlButton,
     GlCollapse,
-    GlDeprecatedButton,
     GlFormCheckbox,
     GlFormCombobox,
     GlFormGroup,
@@ -210,6 +208,7 @@ export default {
         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">
@@ -242,7 +241,7 @@ export default {
         <gl-form-group
           :label="__('Type')"
           label-for="ci-variable-type"
-          class="w-50 append-right-15"
+          class="w-50 gl-mr-5"
           :class="{ 'w-100': isGroup }"
         >
           <gl-form-select id="ci-variable-type" v-model="variable_type" :options="typeOptions" />
@@ -339,24 +338,25 @@ export default {
       </gl-alert>
     </gl-collapse>
     <template #modal-footer>
-      <gl-deprecated-button @click="hideModal">{{ __('Cancel') }}</gl-deprecated-button>
-      <gl-deprecated-button
+      <gl-button @click="hideModal">{{ __('Cancel') }}</gl-button>
+      <gl-button
         v-if="variableBeingEdited"
         ref="deleteCiVariable"
-        category="secondary"
         variant="danger"
+        category="secondary"
         data-qa-selector="ci_variable_delete_button"
         @click="deleteVarAndClose"
-        >{{ __('Delete variable') }}</gl-deprecated-button
+        >{{ __('Delete variable') }}</gl-button
       >
-      <gl-deprecated-button
+      <gl-button
         ref="updateOrAddVariable"
         :disabled="!canSubmit"
         variant="success"
+        category="primary"
         data-qa-selector="ci_variable_save_button"
         @click="updateOrAddVariable"
         >{{ modalActionText }}
-      </gl-deprecated-button>
+      </gl-button>
     </template>
   </gl-modal>
 </template>
diff --git a/app/assets/javascripts/ci_variable_list/components/ci_variable_popover.vue b/app/assets/javascripts/ci_variable_list/components/ci_variable_popover.vue
index 07b0d55bd4c..431819124c2 100644
--- a/app/assets/javascripts/ci_variable_list/components/ci_variable_popover.vue
+++ b/app/assets/javascripts/ci_variable_list/components/ci_variable_popover.vue
@@ -1,12 +1,11 @@
 <script>
-import { GlPopover, GlIcon, GlDeprecatedButton, GlTooltipDirective } from '@gitlab/ui';
+import { GlPopover, GlButton, GlTooltipDirective } from '@gitlab/ui';
 
 export default {
   maxTextLength: 95,
   components: {
     GlPopover,
-    GlIcon,
-    GlDeprecatedButton,
+    GlButton,
   },
   directives: {
     GlTooltip: GlTooltipDirective,
@@ -39,16 +38,18 @@ export default {
 <template>
   <div id="popover-container">
     <gl-popover :target="target" triggers="hover" placement="top" container="popover-container">
-      <div class="d-flex justify-content-between position-relative">
-        <div class="pr-5 w-100 ci-popover-value">{{ displayValue }}</div>
-        <gl-deprecated-button
+      <div class="gl-display-flex gl-justify-content-space-between gl-align-items-center">
+        <div class="ci-popover-value gl-pr-3">
+          {{ displayValue }}
+        </div>
+        <gl-button
           v-gl-tooltip
-          class="btn-transparent btn-clipboard position-absolute position-top-0 position-right-0"
+          category="tertiary"
+          icon="copy-to-clipboard"
           :title="tooltipText"
           :data-clipboard-text="value"
-        >
-          <gl-icon name="copy-to-clipboard" />
-        </gl-deprecated-button>
+          :aria-label="__('Copy to clipboard')"
+        />
       </div>
     </gl-popover>
   </div>
diff --git a/app/assets/javascripts/ci_variable_list/components/ci_variable_settings.vue b/app/assets/javascripts/ci_variable_list/components/ci_variable_settings.vue
index ed1240c247f..12bc5ad3549 100644
--- a/app/assets/javascripts/ci_variable_list/components/ci_variable_settings.vue
+++ b/app/assets/javascripts/ci_variable_list/components/ci_variable_settings.vue
@@ -1,7 +1,7 @@
 <script>
+import { mapState, mapActions } from 'vuex';
 import CiVariableModal from './ci_variable_modal.vue';
 import CiVariableTable from './ci_variable_table.vue';
-import { mapState, mapActions } from 'vuex';
 
 export default {
   components: {
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 7b703c5ede1..018704bff74 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
@@ -1,7 +1,7 @@
 <script>
-import { GlTable, GlDeprecatedButton, GlModalDirective, GlIcon } from '@gitlab/ui';
-import { s__, __ } from '~/locale';
+import { GlTable, GlButton, GlModalDirective, GlIcon } from '@gitlab/ui';
 import { mapState, mapActions } from 'vuex';
+import { s__, __ } from '~/locale';
 import { ADD_CI_VARIABLE_MODAL_ID } from '../constants';
 import CiVariablePopover from './ci_variable_popover.vue';
 
@@ -51,7 +51,7 @@ export default {
   ],
   components: {
     GlTable,
-    GlDeprecatedButton,
+    GlButton,
     GlIcon,
     CiVariablePopover,
   },
@@ -147,14 +147,14 @@ export default {
         </div>
       </template>
       <template #cell(actions)="{ item }">
-        <gl-deprecated-button
+        <gl-button
           ref="edit-ci-variable"
           v-gl-modal-directive="$options.modalId"
+          icon="pencil"
+          :aria-label="__('Edit')"
           data-qa-selector="edit_ci_variable_button"
           @click="editVariable(item)"
-        >
-          <gl-icon :size="$options.iconSize" name="pencil" />
-        </gl-deprecated-button>
+        />
       </template>
       <template #empty>
         <p ref="empty-variables" class="text-center empty-variables text-plain">
@@ -166,20 +166,21 @@ export default {
       class="ci-variable-actions d-flex justify-content-end"
       :class="{ 'justify-content-center': !tableIsNotEmpty }"
     >
-      <gl-deprecated-button
+      <gl-button
         v-if="tableIsNotEmpty"
         ref="secret-value-reveal-button"
         data-qa-selector="reveal_ci_variable_value_button"
         class="gl-mr-3"
         @click="toggleValues(!valuesHidden)"
-        >{{ valuesButtonText }}</gl-deprecated-button
+        >{{ valuesButtonText }}</gl-button
       >
-      <gl-deprecated-button
+      <gl-button
         ref="add-ci-variable"
         v-gl-modal-directive="$options.modalId"
         data-qa-selector="add_ci_variable_button"
         variant="success"
-        >{{ __('Add Variable') }}</gl-deprecated-button
+        category="primary"
+        >{{ __('Add Variable') }}</gl-button
       >
     </div>
   </div>
diff --git a/app/assets/javascripts/ci_variable_list/store/actions.js b/app/assets/javascripts/ci_variable_list/store/actions.js
index 60c7a480769..e3e9dac0a79 100644
--- a/app/assets/javascripts/ci_variable_list/store/actions.js
+++ b/app/assets/javascripts/ci_variable_list/store/actions.js
@@ -1,7 +1,7 @@
 import * as types from './mutation_types';
 import axios from '~/lib/utils/axios_utils';
 import Api from '~/api';
-import createFlash from '~/flash';
+import { deprecatedCreateFlash as createFlash } from '~/flash';
 import { __ } from '~/locale';
 import { prepareDataForApi, prepareDataForDisplay, prepareEnvironments } from './utils';