Replace deprecated buttons with GlButton in …badge_form.vue

app/assets/javascripts/badges/components/badge_form.vue

@@ -2,10 +2,9 @@
 /* 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';
 
@@ -15,7 +14,7 @@ export default {
   name: 'BadgeForm',
   components: {
     Badge,
-    LoadingButton,
+    GlButton,
     GlLoadingIcon,
     GlFormInput,
     GlFormGroup,
@@ -220,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>

changelogs/unreleased/229215-replace-loadingbutton-with-gitlab-ui-s-glbutton-in-app-assets-java.yml

+---
+title: Replacing deprecated buttons and loading buttons with new buttons
+merge_request: 40163
+author:
+type: other

spec/frontend/badges/components/badge_settings_spec.js

@@ -82,14 +82,14 @@ describe('BadgeSettings component', () => {
       const form = vm.$el.querySelector('form:nth-of-type(1)');
 
       expect(form).not.toBe(null);
-      const submitButton = form.querySelector('.btn-success');
-
-      expect(submitButton).not.toBe(null);
-      expect(submitButton).toHaveText(/Save changes/);
-      const cancelButton = form.querySelector('.btn-cancel');
+      const cancelButton = form.querySelector('[data-testid="cancelEditing"]');
 
       expect(cancelButton).not.toBe(null);
       expect(cancelButton).toHaveText(/Cancel/);
+      const submitButton = form.querySelector('[data-testid="saveEditing"]');
+
+      expect(submitButton).not.toBe(null);
+      expect(submitButton).toHaveText(/Save changes/);
     });
 
     it('displays no badge list', () => {