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

3 files changed, 23 insertions, 25 deletions

diff --git a/app/assets/javascripts/badges/components/badge.vue b/app/assets/javascripts/badges/components/badge.vue
index 3242993b06a..3dd05f73841 100644
--- a/app/assets/javascripts/badges/components/badge.vue
+++ b/app/assets/javascripts/badges/components/badge.vue
@@ -1,13 +1,12 @@
 <script>
-import { GlLoadingIcon, GlTooltipDirective } from '@gitlab/ui';
-import Icon from '~/vue_shared/components/icon.vue';
+import { GlLoadingIcon, GlTooltipDirective, GlIcon } from '@gitlab/ui';
 
 export default {
   // name: 'Badge' is a false positive: https://gitlab.com/gitlab-org/frontend/eslint-plugin-i18n/issues/25
   // eslint-disable-next-line @gitlab/require-i18n-strings
   name: 'Badge',
   components: {
-    Icon,
+    GlIcon,
     GlLoadingIcon,
   },
   directives: {
@@ -84,7 +83,7 @@ export default {
 
     <div v-show="hasError" class="btn-group">
       <div class="btn btn-default btn-sm disabled">
-        <icon :size="16" class="gl-ml-3 gl-mr-3" name="doc-image" aria-hidden="true" />
+        <gl-icon :size="16" class="gl-ml-3 gl-mr-3" name="doc-image" aria-hidden="true" />
       </div>
       <div class="btn btn-default btn-sm disabled">
         <span class="gl-ml-3 gl-mr-3">{{ s__('Badges|No badge image') }}</span>
@@ -99,7 +98,7 @@ export default {
       type="button"
       @click="reloadImage"
     >
-      <icon :size="16" name="retry" />
+      <gl-icon :size="16" name="retry" />
     </button>
   </div>
 </template>
diff --git a/app/assets/javascripts/badges/components/badge_form.vue b/app/assets/javascripts/badges/components/badge_form.vue
index 08834df0a9b..6afb10dd2ad 100644
--- a/app/assets/javascripts/badges/components/badge_form.vue
+++ b/app/assets/javascripts/badges/components/badge_form.vue
@@ -1,10 +1,10 @@
 <script>
+/* eslint-disable vue/no-v-html */
 import { escape, debounce } from 'lodash';
 import { mapActions, mapState } from 'vuex';
-import { GlLoadingIcon, GlFormInput, GlFormGroup } from '@gitlab/ui';
+import { GlLoadingIcon, GlFormInput, GlFormGroup, GlButton } from '@gitlab/ui';
 import { deprecatedCreateFlash as createFlash } from '~/flash';
 import { s__, sprintf } from '~/locale';
-import LoadingButton from '~/vue_shared/components/loading_button.vue';
 import createEmptyBadge from '../empty_badge';
 import Badge from './badge.vue';
 
@@ -14,7 +14,7 @@ export default {
   name: 'BadgeForm',
   components: {
     Badge,
-    LoadingButton,
+    GlButton,
     GlLoadingIcon,
     GlFormInput,
     GlFormGroup,
@@ -219,23 +219,23 @@ export default {
     </div>
 
     <div v-if="isEditing" class="row-content-block gl-display-flex gl-justify-content-end">
-      <button class="btn btn-cancel gl-mr-4" type="button" @click="onCancel">
+      <gl-button class="btn-cancel gl-mr-4" data-testid="cancelEditing" @click="onCancel">
         {{ __('Cancel') }}
-      </button>
-      <loading-button
+      </gl-button>
+      <gl-button
         :loading="isSaving"
-        :label="s__('Badges|Save changes')"
         type="submit"
-        container-class="btn btn-success"
-      />
+        variant="success"
+        category="primary"
+        data-testid="saveEditing"
+      >
+        {{ s__('Badges|Save changes') }}
+      </gl-button>
     </div>
     <div v-else class="gl-display-flex gl-justify-content-end form-group">
-      <loading-button
-        :loading="isSaving"
-        :label="s__('Badges|Add badge')"
-        type="submit"
-        container-class="btn btn-success"
-      />
+      <gl-button :loading="isSaving" type="submit" variant="success" category="primary">
+        {{ s__('Badges|Add badge') }}
+      </gl-button>
     </div>
   </form>
 </template>
diff --git a/app/assets/javascripts/badges/components/badge_list_row.vue b/app/assets/javascripts/badges/components/badge_list_row.vue
index bad14666bb2..3343634ecad 100644
--- a/app/assets/javascripts/badges/components/badge_list_row.vue
+++ b/app/assets/javascripts/badges/components/badge_list_row.vue
@@ -1,8 +1,7 @@
 <script>
 import { mapActions, mapState } from 'vuex';
-import { GlLoadingIcon } from '@gitlab/ui';
+import { GlLoadingIcon, GlIcon } from '@gitlab/ui';
 import { s__ } from '~/locale';
-import Icon from '~/vue_shared/components/icon.vue';
 import { PROJECT_BADGE } from '../constants';
 import Badge from './badge.vue';
 
@@ -10,7 +9,7 @@ export default {
   name: 'BadgeListRow',
   components: {
     Badge,
-    Icon,
+    GlIcon,
     GlLoadingIcon,
   },
   props: {
@@ -58,7 +57,7 @@ export default {
           type="button"
           @click="editBadge(badge)"
         >
-          <icon :size="16" :aria-label="__('Edit')" name="pencil" />
+          <gl-icon :size="16" :aria-label="__('Edit')" name="pencil" />
         </button>
         <button
           :disabled="badge.isDeleting"
@@ -68,7 +67,7 @@ export default {
           data-target="#delete-badge-modal"
           @click="updateBadgeInModal(badge)"
         >
-          <icon :size="16" :aria-label="__('Delete')" name="remove" />
+          <gl-icon :size="16" :aria-label="__('Delete')" name="remove" />
         </button>
         <gl-loading-icon v-show="badge.isDeleting" :inline="true" />
       </div>