Merge branch '229206-batch-publish-button' into 'master'

Migrate batch publish buttons

Closes #229204 and #229206

See merge request gitlab-org/gitlab!38839

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

 <script>
 import { mapActions, mapGetters, mapState } from 'vuex';
 import NoteableNote from '~/notes/components/noteable_note.vue';
-import LoadingButton from '~/vue_shared/components/loading_button.vue';
+import { GlButton } from '@gitlab/ui';
 import PublishButton from './publish_button.vue';
 import glFeatureFlagsMixin from '~/vue_shared/mixins/gl_feature_flags_mixin';
 
@@ -9,7 +9,7 @@ export default {
   components: {
     NoteableNote,
     PublishButton,
-    LoadingButton,
+    GlButton,
   },
   mixins: [glFeatureFlagsMixin()],
   props: {
@@ -115,18 +115,15 @@ export default {
       ></div>
 
       <p class="draft-note-actions d-flex">
-        <publish-button
-          :show-count="true"
-          :should-publish="false"
-          class="btn btn-success btn-inverted gl-mr-3"
-        />
-        <loading-button
+        <publish-button :show-count="true" :should-publish="false" category="secondary" />
+        <gl-button
           ref="publishNowButton"
           :loading="isPublishingDraft(draft.id) || isPublishing"
-          :label="__('Add comment now')"
-          container-class="btn btn-inverted"
+          class="gl-ml-3"
           @click="publishNow"
-        />
+        >
+          {{ __('Add comment now') }}
+        </gl-button>
       </p>
     </template>
   </article>

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

 <script>
 import { mapGetters } from 'vuex';
+import { GlBadge } from '@gitlab/ui';
 
 export default {
+  components: {
+    GlBadge,
+  },
   computed: {
     ...mapGetters('batchComments', ['draftsCount']),
   },
 };
 </script>
 <template>
-  <span class="drafts-count-component">
-    <span class="drafts-count-number">{{ draftsCount }}</span>
+  <gl-badge size="sm" variant="success">
+    {{ draftsCount }}
     <span class="sr-only"> {{ n__('draft', 'drafts', draftsCount) }} </span>
-  </span>
+  </gl-badge>
 </template>

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

 <script>
 import { mapActions, mapState } from 'vuex';
 import { __ } from '~/locale';
-import LoadingButton from '~/vue_shared/components/loading_button.vue';
+import { GlButton } from '@gitlab/ui';
 import DraftsCount from './drafts_count.vue';
 
 export default {
   components: {
-    LoadingButton,
+    GlButton,
     DraftsCount,
   },
   props: {
@@ -20,6 +20,16 @@ export default {
       required: false,
       default: __('Finish review'),
     },
+    category: {
+      type: String,
+      required: false,
+      default: 'primary',
+    },
+    variant: {
+      type: String,
+      required: false,
+      default: 'success',
+    },
     shouldPublish: {
       type: Boolean,
       required: true,
@@ -42,14 +52,14 @@ export default {
 </script>
 
 <template>
-  <loading-button
+  <gl-button
     :loading="isPublishing"
-    container-class="btn btn-success js-publish-draft-button qa-submit-review"
+    class="js-publish-draft-button qa-submit-review"
+    :category="category"
+    :variant="variant"
     @click="onClick"
   >
-    <span>
-      {{ label }}
-      <drafts-count v-if="showCount" />
-    </span>
-  </loading-button>
+    {{ label }}
+    <drafts-count v-if="showCount" />
+  </gl-button>
 </template>

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

@@ -4,18 +4,6 @@ $draft-actions-left-margin: 40px + $gl-padding;
   margin: 0;
   background: $orange-50;
 
-  .drafts-count-component {
-    @include transition(background-color);
-    background: rgba($green-500, 0.2);
-  }
-
-  button:focus,
-  button:hover {
-    .drafts-count-component {
-      background: $black-transparent;
-    }
-  }
-
   .referenced-commands.draft-note-commands {
     background: $orange-100;
     font-size: $label-font-size;
@@ -39,8 +27,9 @@ button[disabled] {
   &,
   &:focus,
   &:hover {
-    .drafts-count-component {
+    .gl-badge {
       background: $gl-gray-100;
+      color: $gl-gray-500;
     }
   }
 }

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

-$drafts-count-size: 1.6;
-
-.drafts-count-component {
-  font-size: $label-font-size;
-  display: inline-block;
-  min-width: $drafts-count-size * 1em;
-  height: $drafts-count-size * 1em;
-  line-height: $drafts-count-size;
-  background: $black-transparent;
-  border-radius: 50%;
-  margin-left: $gl-padding-4;
-  padding: 0 $gl-padding-4;
-}

spec/frontend/batch_comments/components/drafts_count_spec.js

@@ -24,7 +24,7 @@ describe('Batch comments drafts count component', () => {
   });
 
   it('renders count', () => {
-    expect(vm.$el.querySelector('.drafts-count-number').textContent).toBe('1');
+    expect(vm.$el.textContent).toContain('1');
   });
 
   it('renders screen reader text', done => {