Merge branch '229337-preview-dropdown' into 'master'

Migration batch comment finish review loading button

Closes #229337

See merge request gitlab-org/gitlab!39521

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

 <script>
 import { mapActions, mapGetters, mapState } from 'vuex';
-import { GlLoadingIcon, GlIcon } from '@gitlab/ui';
+import { GlLoadingIcon, GlButton, GlIcon } from '@gitlab/ui';
 import { sprintf, n__ } from '~/locale';
 import DraftsCount from './drafts_count.vue';
 import PublishButton from './publish_button.vue';
@@ -9,6 +9,7 @@ import PreviewItem from './preview_item.vue';
 export default {
   components: {
     GlLoadingIcon,
+    GlButton,
     GlIcon,
     DraftsCount,
     PublishButton,
@@ -28,7 +29,7 @@ export default {
   watch: {
     showPreviewDropdown() {
       if (this.showPreviewDropdown && this.$refs.dropdown) {
-        this.$nextTick(() => this.$refs.dropdown.focus());
+        this.$nextTick(() => this.$refs.dropdown.$el.focus());
       }
     },
   },
@@ -62,16 +63,18 @@ export default {
       show: showPreviewDropdown,
     }"
   >
-    <button
+    <gl-button
       ref="dropdown"
       type="button"
-      class="btn btn-success review-preview-dropdown-toggle qa-review-preview-toggle"
+      category="primary"
+      variant="success"
+      class="review-preview-dropdown-toggle qa-review-preview-toggle"
       @click="toggleReviewDropdown"
     >
       {{ __('Finish review') }}
       <drafts-count />
       <gl-icon name="angle-up" />
-    </button>
+    </gl-button>
     <div
       class="dropdown-menu dropdown-menu-large dropdown-menu-right dropdown-open-top"
       :class="{