Add latest changes from gitlab-org/gitlab@master

3 files changed, 34 insertions, 23 deletions

diff --git a/app/assets/javascripts/batch_comments/components/draft_note.vue b/app/assets/javascripts/batch_comments/components/draft_note.vue
index 92203381154..8fb383a5d73 100644
--- a/app/assets/javascripts/batch_comments/components/draft_note.vue
+++ b/app/assets/javascripts/batch_comments/components/draft_note.vue
@@ -1,7 +1,7 @@
 <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>
diff --git a/app/assets/javascripts/batch_comments/components/drafts_count.vue b/app/assets/javascripts/batch_comments/components/drafts_count.vue
index f1180760c4d..7a8482ac341 100644
--- a/app/assets/javascripts/batch_comments/components/drafts_count.vue
+++ b/app/assets/javascripts/batch_comments/components/drafts_count.vue
@@ -1,15 +1,19 @@
 <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>
diff --git a/app/assets/javascripts/batch_comments/components/publish_button.vue b/app/assets/javascripts/batch_comments/components/publish_button.vue
index f4dc0f04dc3..33d4ff6b19a 100644
--- a/app/assets/javascripts/batch_comments/components/publish_button.vue
+++ b/app/assets/javascripts/batch_comments/components/publish_button.vue
@@ -1,12 +1,12 @@
 <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>