Add latest changes from gitlab-org/gitlab@13-4-stable-ee

5 files changed, 24 insertions, 21 deletions

diff --git a/app/assets/javascripts/batch_comments/components/draft_note.vue b/app/assets/javascripts/batch_comments/components/draft_note.vue
index 39c1b8decee..a6cd36caede 100644
--- a/app/assets/javascripts/batch_comments/components/draft_note.vue
+++ b/app/assets/javascripts/batch_comments/components/draft_note.vue
@@ -1,4 +1,5 @@
 <script>
+/* eslint-disable vue/no-v-html */
 import { mapActions, mapGetters, mapState } from 'vuex';
 import { GlButton } from '@gitlab/ui';
 import NoteableNote from '~/notes/components/noteable_note.vue';
diff --git a/app/assets/javascripts/batch_comments/components/preview_dropdown.vue b/app/assets/javascripts/batch_comments/components/preview_dropdown.vue
index 7520cc2401b..2b37ed19176 100644
--- a/app/assets/javascripts/batch_comments/components/preview_dropdown.vue
+++ b/app/assets/javascripts/batch_comments/components/preview_dropdown.vue
@@ -1,16 +1,16 @@
 <script>
 import { mapActions, mapGetters, mapState } from 'vuex';
-import { GlLoadingIcon } from '@gitlab/ui';
+import { GlButton, GlLoadingIcon, GlIcon } from '@gitlab/ui';
 import { sprintf, n__ } from '~/locale';
-import Icon from '~/vue_shared/components/icon.vue';
 import DraftsCount from './drafts_count.vue';
 import PublishButton from './publish_button.vue';
 import PreviewItem from './preview_item.vue';
 
 export default {
   components: {
+    GlButton,
     GlLoadingIcon,
-    Icon,
+    GlIcon,
     DraftsCount,
     PublishButton,
     PreviewItem,
@@ -29,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());
       }
     },
   },
@@ -63,32 +63,35 @@ 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 />
-      <icon name="angle-up" />
-    </button>
+      <gl-icon name="angle-up" />
+    </gl-button>
     <div
       class="dropdown-menu dropdown-menu-large dropdown-menu-right dropdown-open-top"
       :class="{
         show: showPreviewDropdown,
       }"
     >
-      <div class="dropdown-title">
-        {{ dropdownTitle }}
-        <button
+      <div class="dropdown-title gl-display-flex gl-align-items-center">
+        <span class="gl-ml-auto">{{ dropdownTitle }}</span>
+        <gl-button
           :aria-label="__('Close')"
           type="button"
-          class="dropdown-title-button dropdown-menu-close"
+          category="tertiary"
+          size="small"
+          class="dropdown-title-button gl-ml-auto gl-p-0!"
+          icon="close"
           @click="toggleReviewDropdown"
-        >
-          <icon name="close" />
-        </button>
+        />
       </div>
       <div class="dropdown-content">
         <ul v-if="isNotesFetched">
diff --git a/app/assets/javascripts/batch_comments/components/preview_item.vue b/app/assets/javascripts/batch_comments/components/preview_item.vue
index 982fb01f49a..c89a6b537ef 100644
--- a/app/assets/javascripts/batch_comments/components/preview_item.vue
+++ b/app/assets/javascripts/batch_comments/components/preview_item.vue
@@ -1,9 +1,8 @@
 <script>
 import { mapActions, mapGetters } from 'vuex';
-import { GlSprintf } from '@gitlab/ui';
+import { GlSprintf, GlIcon } from '@gitlab/ui';
 import { IMAGE_DIFF_POSITION_TYPE } from '~/diffs/constants';
 import { sprintf, __ } from '~/locale';
-import Icon from '~/vue_shared/components/icon.vue';
 import resolvedStatusMixin from '../mixins/resolved_status';
 import glFeatureFlagsMixin from '~/vue_shared/mixins/gl_feature_flags_mixin';
 import {
@@ -14,7 +13,7 @@ import {
 
 export default {
   components: {
-    Icon,
+    GlIcon,
     GlSprintf,
   },
   mixins: [resolvedStatusMixin, glFeatureFlagsMixin()],
@@ -101,7 +100,7 @@ export default {
     @click="scrollToDraft(draft)"
   >
     <span class="review-preview-item-header">
-      <icon class="flex-shrink-0" :name="iconName" />
+      <gl-icon class="flex-shrink-0" :name="iconName" />
       <span
         class="bold text-nowrap"
         :class="{ 'gl-align-items-center': glFeatures.multilineComments }"
@@ -138,7 +137,7 @@ export default {
       v-if="draft.discussion_id && resolvedStatusMessage"
       class="review-preview-item-footer draft-note-resolution p-0"
     >
-      <icon class="gl-mr-3" name="status_success" /> {{ resolvedStatusMessage }}
+      <gl-icon class="gl-mr-3" name="status_success" /> {{ resolvedStatusMessage }}
     </span>
   </button>
 </template>
diff --git a/app/assets/javascripts/batch_comments/components/review_bar.vue b/app/assets/javascripts/batch_comments/components/review_bar.vue
index 2d7b86d2431..e51888eabc1 100644
--- a/app/assets/javascripts/batch_comments/components/review_bar.vue
+++ b/app/assets/javascripts/batch_comments/components/review_bar.vue
@@ -1,4 +1,5 @@
 <script>
+/* eslint-disable vue/no-v-html */
 import { mapActions, mapState, mapGetters } from 'vuex';
 import { GlModal, GlModalDirective, GlButton } from '@gitlab/ui';
 import { sprintf, s__ } from '~/locale';
diff --git a/app/assets/javascripts/batch_comments/index.js b/app/assets/javascripts/batch_comments/index.js
index e06285c0b37..9c763e70d63 100644
--- a/app/assets/javascripts/batch_comments/index.js
+++ b/app/assets/javascripts/batch_comments/index.js
@@ -3,7 +3,6 @@ import { mapActions } from 'vuex';
 import store from '~/mr_notes/stores';
 import ReviewBar from './components/review_bar.vue';
 
-// eslint-disable-next-line import/prefer-default-export
 export const initReviewBar = () => {
   const el = document.getElementById('js-review-bar');