Merge branch 'ph/344296/draftNoteGlBadge' into 'master'

Converted draft note pending label to GlBadge

See merge request gitlab-org/gitlab!78891

app/assets/javascripts/batch_comments/components/draft_note.vue

 <script>
-import { GlButton, GlSafeHtmlDirective } from '@gitlab/ui';
+import { GlButton, GlSafeHtmlDirective, GlBadge } from '@gitlab/ui';
 import { mapActions, mapGetters, mapState } from 'vuex';
 import NoteableNote from '~/notes/components/noteable_note.vue';
 import PublishButton from './publish_button.vue';
@@ -9,6 +9,7 @@ export default {
     NoteableNote,
     PublishButton,
     GlButton,
+    GlBadge,
   },
   directives: {
     SafeHtml: GlSafeHtmlDirective,
@@ -100,9 +101,7 @@ export default {
         @toggleResolveStatus="toggleResolveDiscussion(draft.id)"
       >
         <template #note-header-info>
-          <strong class="badge draft-pending-label gl-mr-2">
-            {{ __('Pending') }}
-          </strong>
+          <gl-badge variant="warning" class="gl-mr-2">{{ __('Pending') }}</gl-badge>
         </template>
       </noteable-note>
     </ul>

ee/app/assets/stylesheets/components/batch_comments/draft_note.scss

@@ -30,12 +30,6 @@ button[disabled] {
   }
 }
 
-.draft-pending-label {
-  background: $orange-500;
-  color: $white;
-  vertical-align: text-top;
-}
-
 .note.draft-note {
   margin: 0 0 $gl-padding;
   padding: 0;

spec/frontend/batch_comments/components/draft_note_spec.js

 import { nextTick } from 'vue';
-import { GlButton } from '@gitlab/ui';
+import { GlButton, GlBadge } from '@gitlab/ui';
 import { getByRole } from '@testing-library/dom';
 import { shallowMount } from '@vue/test-utils';
 import { stubComponent } from 'helpers/stub_component';
@@ -56,7 +56,7 @@ describe('Batch comments draft note component', () => {
 
   it('renders template', () => {
     createComponent();
-    expect(wrapper.find('.draft-pending-label').exists()).toBe(true);
+    expect(wrapper.findComponent(GlBadge).exists()).toBe(true);
 
     const note = wrapper.find(NoteableNote);