From 935718e210c05002c30a69ca5d3e250bb9627809 Mon Sep 17 00:00:00 2001
From: Phil Hughes <me@iamphill.com>
Date: Wed, 1 Jun 2022 16:03:51 +0100
Subject: [PATCH 1/8] Added finish review dropdown

Adds the ability to add a comment when submitting a review
on a merge request.

Closes https://gitlab.com/gitlab-org/gitlab/-/issues/244044
---
 .../components/drafts_count.vue               |   9 +-
 .../components/preview_dropdown.vue           |   5 +
 .../batch_comments/components/review_bar.vue  |   7 +-
 .../components/submit_dropdown.vue            |  98 +++++++
 .../batch_comments/services/drafts_service.js |   4 +-
 .../stores/modules/batch_comments/actions.js  |   4 +-
 .../vue_shared/components/markdown/field.vue  |   7 +-
 .../page_bundles/merge_requests.scss          |  20 ++
 .../merge_requests/drafts_controller.rb       |  13 +
 .../projects/merge_requests_controller.rb     |   1 +
 .../development/mr_review_submit_comment.yml  |   8 +
 locale/gitlab.pot                             |   6 +
 .../merge_request/batch_comments_spec.rb      | 269 +++++++++---------
 13 files changed, 309 insertions(+), 142 deletions(-)
 create mode 100644 app/assets/javascripts/batch_comments/components/submit_dropdown.vue
 create mode 100644 config/feature_flags/development/mr_review_submit_comment.yml

diff --git a/app/assets/javascripts/batch_comments/components/drafts_count.vue b/app/assets/javascripts/batch_comments/components/drafts_count.vue
index 61718b766d834d..0cd093823bc028 100644
--- a/app/assets/javascripts/batch_comments/components/drafts_count.vue
+++ b/app/assets/javascripts/batch_comments/components/drafts_count.vue
@@ -6,13 +6,20 @@ export default {
   components: {
     GlBadge,
   },
+  props: {
+    variant: {
+      type: String,
+      required: false,
+      default: 'info',
+    },
+  },
   computed: {
     ...mapGetters('batchComments', ['draftsCount']),
   },
 };
 </script>
 <template>
-  <gl-badge size="sm" variant="info" class="gl-ml-2">
+  <gl-badge size="sm" :variant="variant" class="gl-ml-2">
     {{ draftsCount }}
     <span class="sr-only"> {{ n__('draft', 'drafts', draftsCount) }} </span>
   </gl-badge>
diff --git a/app/assets/javascripts/batch_comments/components/preview_dropdown.vue b/app/assets/javascripts/batch_comments/components/preview_dropdown.vue
index e90c29e939f95c..f839056daf8add 100644
--- a/app/assets/javascripts/batch_comments/components/preview_dropdown.vue
+++ b/app/assets/javascripts/batch_comments/components/preview_dropdown.vue
@@ -1,7 +1,9 @@
 <script>
 import { GlDropdown, GlDropdownItem, GlIcon } from '@gitlab/ui';
 import { mapActions, mapGetters, mapState } from 'vuex';
+import glFeatureFlagMixin from '~/vue_shared/mixins/gl_feature_flags_mixin';
 import PreviewItem from './preview_item.vue';
+import DraftsCount from './drafts_count.vue';
 
 export default {
   components: {
@@ -9,7 +11,9 @@ export default {
     GlDropdownItem,
     GlIcon,
     PreviewItem,
+    DraftsCount,
   },
+  mixins: [glFeatureFlagMixin()],
   computed: {
     ...mapState('diffs', ['viewDiffsFileByFile']),
     ...mapGetters('batchComments', ['draftsCount', 'sortedDrafts']),
@@ -39,6 +43,7 @@ export default {
   >
     <template #button-content>
       {{ __('Pending comments') }}
+      <drafts-count v-if="glFeatures.mrReviewSubmitComment" variant="neutral" />
       <gl-icon class="dropdown-chevron" name="chevron-up" />
     </template>
     <gl-dropdown-item
diff --git a/app/assets/javascripts/batch_comments/components/review_bar.vue b/app/assets/javascripts/batch_comments/components/review_bar.vue
index bce13751448ea4..3cd1a2525e9a72 100644
--- a/app/assets/javascripts/batch_comments/components/review_bar.vue
+++ b/app/assets/javascripts/batch_comments/components/review_bar.vue
@@ -1,14 +1,18 @@
 <script>
 import { mapActions, mapGetters } from 'vuex';
+import glFeatureFlagMixin from '~/vue_shared/mixins/gl_feature_flags_mixin';
 import { REVIEW_BAR_VISIBLE_CLASS_NAME } from '../constants';
 import PreviewDropdown from './preview_dropdown.vue';
 import PublishButton from './publish_button.vue';
+import SubmitDropdown from './submit_dropdown.vue';
 
 export default {
   components: {
     PreviewDropdown,
     PublishButton,
+    SubmitDropdown,
   },
+  mixins: [glFeatureFlagMixin()],
   computed: {
     ...mapGetters(['isNotesFetched']),
   },
@@ -38,7 +42,8 @@ export default {
         data-qa-selector="review_bar_content"
       >
         <preview-dropdown />
-        <publish-button class="gl-ml-3" show-count />
+        <publish-button v-if="!glFeatures.mrReviewSubmitComment" class="gl-ml-3" show-count />
+        <submit-dropdown v-else />
       </div>
     </nav>
   </div>
diff --git a/app/assets/javascripts/batch_comments/components/submit_dropdown.vue b/app/assets/javascripts/batch_comments/components/submit_dropdown.vue
new file mode 100644
index 00000000000000..f24a044e8bdd85
--- /dev/null
+++ b/app/assets/javascripts/batch_comments/components/submit_dropdown.vue
@@ -0,0 +1,98 @@
+<script>
+import { GlDropdown, GlButton, GlIcon } from '@gitlab/ui';
+import { mapGetters, mapActions } from 'vuex';
+import MarkdownField from '~/vue_shared/components/markdown/field.vue';
+
+export default {
+  components: {
+    GlDropdown,
+    GlButton,
+    GlIcon,
+    MarkdownField,
+  },
+  data() {
+    return {
+      isSubmitting: false,
+      note: '',
+    };
+  },
+  computed: {
+    ...mapGetters(['getNotesData', 'getNoteableData', 'noteableType']),
+  },
+  methods: {
+    ...mapActions('batchComments', ['publishReview']),
+    async submitReview() {
+      const noteData = {
+        noteable_type: this.noteableType,
+        noteable_id: this.getNoteableData.id,
+        note: this.note,
+      };
+
+      this.isSubmitting = true;
+
+      await this.publishReview(noteData);
+
+      this.isSubmitting = false;
+    },
+  },
+  restrictedToolbarItems: ['full-screen'],
+};
+</script>
+
+<template>
+  <gl-dropdown right class="submit-review-dropdown" variant="info">
+    <template #button-content>
+      {{ __('Finish review') }}
+      <gl-icon class="dropdown-chevron" name="chevron-up" />
+    </template>
+    <form @submit.prevent="submitReview">
+      <label for="review-note-body" class="gl-font-weight-bold gl-mb-3">{{
+        __('Summary comment (optional)')
+      }}</label>
+      <div class="common-note-form gfm-form">
+        <div
+          class="comment-warning-wrapper gl-border-solid gl-border-1 gl-rounded-base gl-border-gray-100"
+        >
+          <markdown-field
+            ref="markdownField"
+            :is-submitting="isSubmitting"
+            :add-spacing-classes="false"
+            :textarea-value="note"
+            :markdown-preview-path="getNoteableData.preview_note_path"
+            :markdown-docs-path="getNotesData.markdownDocsPath"
+            :quick-actions-docs-path="getNotesData.quickActionsDocsPath"
+            :restricted-tool-bar-items="$options.restrictedToolbarItems"
+            :force-autosize="false"
+          >
+            <template #textarea>
+              <textarea
+                id="review-note-body"
+                ref="textarea"
+                v-model="note"
+                dir="auto"
+                :disabled="isSubmitting"
+                name="review[note]"
+                class="note-textarea js-gfm-input markdown-area"
+                data-supports-quick-actions="true"
+                :aria-label="__('Comment')"
+                :placeholder="__('Write a comment or drag your files here…')"
+                @keydown.meta.enter="submitReview"
+                @keydown.ctrl.enter="submitReview"
+              ></textarea>
+            </template>
+          </markdown-field>
+        </div>
+      </div>
+      <div class="gl-display-flex gl-mt-5">
+        <gl-button
+          :loading="isSubmitting"
+          variant="info"
+          type="submit"
+          class="gl-ml-auto js-no-auto-disable"
+        >
+          {{ __('Submit review') }}
+        </gl-button>
+      </div>
+    </form>
+  </gl-dropdown>
+</template>
diff --git a/app/assets/javascripts/batch_comments/services/drafts_service.js b/app/assets/javascripts/batch_comments/services/drafts_service.js
index 36d2f8df612c61..b52e573d55d0ee 100644
--- a/app/assets/javascripts/batch_comments/services/drafts_service.js
+++ b/app/assets/javascripts/batch_comments/services/drafts_service.js
@@ -19,8 +19,8 @@ export default {
   fetchDrafts(endpoint) {
     return axios.get(endpoint);
   },
-  publish(endpoint) {
-    return axios.post(endpoint);
+  publish(endpoint, noteData) {
+    return axios.post(endpoint, noteData);
   },
   discard(endpoint) {
     return axios.delete(endpoint);
diff --git a/app/assets/javascripts/batch_comments/stores/modules/batch_comments/actions.js b/app/assets/javascripts/batch_comments/stores/modules/batch_comments/actions.js
index 4ee22918463ccb..2980ca6f16f260 100644
--- a/app/assets/javascripts/batch_comments/stores/modules/batch_comments/actions.js
+++ b/app/assets/javascripts/batch_comments/stores/modules/batch_comments/actions.js
@@ -77,11 +77,11 @@ export const publishSingleDraft = ({ commit, dispatch, getters }, draftId) => {
     .catch(() => commit(types.RECEIVE_PUBLISH_DRAFT_ERROR, draftId));
 };
 
-export const publishReview = ({ commit, dispatch, getters }) => {
+export const publishReview = ({ commit, dispatch, getters }, noteData = {}) => {
   commit(types.REQUEST_PUBLISH_REVIEW);
 
   return service
-    .publish(getters.getNotesData.draftsPublishPath)
+    .publish(getters.getNotesData.draftsPublishPath, noteData)
     .then(() => dispatch('updateDiscussionsAfterPublish'))
     .then(() => commit(types.RECEIVE_PUBLISH_REVIEW_SUCCESS))
     .catch(() => commit(types.RECEIVE_PUBLISH_REVIEW_ERROR));
diff --git a/app/assets/javascripts/vue_shared/components/markdown/field.vue b/app/assets/javascripts/vue_shared/components/markdown/field.vue
index 1f309a19b14cea..c331d623711512 100644
--- a/app/assets/javascripts/vue_shared/components/markdown/field.vue
+++ b/app/assets/javascripts/vue_shared/components/markdown/field.vue
@@ -121,6 +121,11 @@ export default {
       required: false,
       default: () => [],
     },
+    forceAutosize: {
+      type: Boolean,
+      required: false,
+      default: true,
+    },
   },
   data() {
     return {
@@ -250,7 +255,7 @@ export default {
         vulnerabilities: this.enableAutocomplete,
         contacts: this.enableAutocomplete && this.glFeatures.contactsAutocomplete,
       },
-      true,
+      this.forceAutosize,
     );
   },
   beforeDestroy() {
diff --git a/app/assets/stylesheets/page_bundles/merge_requests.scss b/app/assets/stylesheets/page_bundles/merge_requests.scss
index 76f84331790717..aa6d4b5c70e8b4 100644
--- a/app/assets/stylesheets/page_bundles/merge_requests.scss
+++ b/app/assets/stylesheets/page_bundles/merge_requests.scss
@@ -754,3 +754,23 @@ $tabs-holder-z-index: 250;
     }
   }
 }
+
+.submit-review-dropdown {
+  .dropdown-menu {
+    width: 650px;
+    max-width: 650px;
+
+    .gl-new-dropdown-inner {
+      max-height: none !important;
+    }
+  }
+
+  .gl-new-dropdown-contents {
+    padding: $gl-spacing-scale-4 !important;
+  }
+
+  .md-preview-holder {
+    max-height: 180px;
+    height: 180px;
+  }
+}
diff --git a/app/controllers/projects/merge_requests/drafts_controller.rb b/app/controllers/projects/merge_requests/drafts_controller.rb
index 686d2c1dc1fcfc..db7557674b29ed 100644
--- a/app/controllers/projects/merge_requests/drafts_controller.rb
+++ b/app/controllers/projects/merge_requests/drafts_controller.rb
@@ -49,6 +49,10 @@ def destroy
   def publish
     result = DraftNotes::PublishService.new(merge_request, current_user).execute(draft_note(allow_nil: true))
 
+    if Feature.enabled?(:mr_review_submit_comment, @project) && create_note_params[:note]
+      Notes::CreateService.new(@project, current_user, create_note_params).execute
+    end
+
     if result[:status] == :success
       head :ok
     else
@@ -102,6 +106,15 @@ def draft_note_params
     end
   end
 
+  def create_note_params
+    params.permit(
+      :note
+    ).tap do |create_params|
+      create_params[:noteable_type] = merge_request.class.name
+      create_params[:noteable_id] = merge_request.id
+    end
+  end
+
   def prepare_notes_for_rendering(notes)
     return [] unless notes
 
diff --git a/app/controllers/projects/merge_requests_controller.rb b/app/controllers/projects/merge_requests_controller.rb
index 6737ac20d7a8b7..e10984a4833812 100644
--- a/app/controllers/projects/merge_requests_controller.rb
+++ b/app/controllers/projects/merge_requests_controller.rb
@@ -49,6 +49,7 @@ class Projects::MergeRequestsController < Projects::MergeRequests::ApplicationCo
     push_frontend_feature_flag(:remove_diff_header_icons, project)
     push_frontend_feature_flag(:moved_mr_sidebar, project)
     push_frontend_feature_flag(:paginated_mr_discussions, project)
+    push_frontend_feature_flag(:mr_review_submit_comment, project)
   end
 
   before_action do
diff --git a/config/feature_flags/development/mr_review_submit_comment.yml b/config/feature_flags/development/mr_review_submit_comment.yml
new file mode 100644
index 00000000000000..d06901d992cbd4
--- /dev/null
+++ b/config/feature_flags/development/mr_review_submit_comment.yml
@@ -0,0 +1,8 @@
+---
+name: mr_review_submit_comment
+introduced_by_url:
+rollout_issue_url:
+milestone: '15.1'
+type: development
+group: group::code review
+default_enabled: false
diff --git a/locale/gitlab.pot b/locale/gitlab.pot
index ebec4a84cda0bc..4dd8c936b725dc 100644
--- a/locale/gitlab.pot
+++ b/locale/gitlab.pot
@@ -16106,6 +16106,9 @@ msgstr ""
 msgid "Finish editing this message first!"
 msgstr ""
 
+msgid "Finish review"
+msgstr ""
+
 msgid "Finish setting up your dedicated account for %{group_name}."
 msgstr ""
 
@@ -36874,6 +36877,9 @@ msgstr ""
 msgid "Summary / Note"
 msgstr ""
 
+msgid "Summary comment (optional)"
+msgstr ""
+
 msgid "Sunday"
 msgstr ""
 
diff --git a/spec/features/merge_request/batch_comments_spec.rb b/spec/features/merge_request/batch_comments_spec.rb
index 9b54d95be6b044..2e9225ac78be47 100644
--- a/spec/features/merge_request/batch_comments_spec.rb
+++ b/spec/features/merge_request/batch_comments_spec.rb
@@ -18,219 +18,218 @@
     project.add_maintainer(user)
 
     sign_in(user)
+
+    visit_diffs
   end
 
-  context 'Feature is enabled' do
-    before do
-      visit_diffs
-    end
+  it 'adds draft note' do
+    write_diff_comment
 
-    it 'adds draft note' do
-      write_diff_comment
+    expect(find('.draft-note-component')).to have_content('Line is wrong')
 
-      expect(find('.draft-note-component')).to have_content('Line is wrong')
+    expect(page).to have_selector('[data-testid="review_bar_component"]')
 
-      expect(page).to have_selector('[data-testid="review_bar_component"]')
+    expect(find('[data-testid="review_bar_component"] .gl-badge')).to have_content('1')
+  end
 
-      expect(find('[data-testid="review_bar_component"] .btn-confirm')).to have_content('1')
+  it 'publishes review' do
+    write_diff_comment
+
+    page.within('.review-bar-content') do
+      click_button 'Finish review'
+      click_button 'Submit review'
     end
 
-    it 'publishes review' do
-      write_diff_comment
+    wait_for_requests
 
-      page.within('.review-bar-content') do
-        click_button 'Submit review'
-      end
+    expect(page).not_to have_selector('.draft-note-component', text: 'Line is wrong')
 
-      wait_for_requests
+    expect(page).to have_selector('.note:not(.draft-note)', text: 'Line is wrong')
+  end
 
-      expect(page).not_to have_selector('.draft-note-component', text: 'Line is wrong')
+  it 'publishes single comment' do
+    write_diff_comment
 
-      expect(page).to have_selector('.note:not(.draft-note)', text: 'Line is wrong')
-    end
+    click_button 'Add comment now'
 
-    it 'publishes single comment' do
-      write_diff_comment
+    wait_for_requests
 
-      click_button 'Add comment now'
+    expect(page).not_to have_selector('.draft-note-component', text: 'Line is wrong')
 
-      wait_for_requests
+    expect(page).to have_selector('.note:not(.draft-note)', text: 'Line is wrong')
+  end
 
-      expect(page).not_to have_selector('.draft-note-component', text: 'Line is wrong')
+  it 'deletes draft note' do
+    write_diff_comment
 
-      expect(page).to have_selector('.note:not(.draft-note)', text: 'Line is wrong')
+    find('.js-note-delete').click
+
+    page.within('.modal') do
+      click_button('Delete Comment', match: :first)
     end
 
-    it 'deletes draft note' do
-      write_diff_comment
+    wait_for_requests
 
-      find('.js-note-delete').click
+    expect(page).not_to have_selector('.draft-note-component', text: 'Line is wrong')
+  end
 
-      page.within('.modal') do
-        click_button('Delete Comment', match: :first)
-      end
+  it 'edits draft note' do
+    write_diff_comment
 
-      wait_for_requests
+    find('.js-note-edit').click
 
-      expect(page).not_to have_selector('.draft-note-component', text: 'Line is wrong')
-    end
+    # make sure comment form is in view
+    execute_script("window.scrollBy(0, 200)")
 
-    it 'edits draft note' do
-      write_diff_comment
+    write_comment(text: 'Testing update', button_text: 'Save comment')
 
-      find('.js-note-edit').click
+    expect(page).to have_selector('.draft-note-component', text: 'Testing update')
+  end
 
-      # make sure comment form is in view
-      execute_script("window.scrollBy(0, 200)")
+  context 'with image and file draft note' do
+    let(:merge_request) { create(:merge_request_with_diffs, :with_image_diffs, source_project: project) }
+    let!(:draft_on_text) { create(:draft_note_on_text_diff, merge_request: merge_request, author: user, path: 'README.md', note: 'Lorem ipsum on text...') }
+    let!(:draft_on_image) { create(:draft_note_on_image_diff, merge_request: merge_request, author: user, path: 'files/images/ee_repo_logo.png', note: 'Lorem ipsum on an image...') }
 
-      write_comment(text: 'Testing update', button_text: 'Save comment')
+    it 'does not show in overview' do
+      visit_overview
 
-      expect(page).to have_selector('.draft-note-component', text: 'Testing update')
+      expect(page).to have_no_text(draft_on_text.note)
+      expect(page).to have_no_text(draft_on_image.note)
     end
+  end
 
-    context 'with image and file draft note' do
-      let(:merge_request) { create(:merge_request_with_diffs, :with_image_diffs, source_project: project) }
-      let!(:draft_on_text) { create(:draft_note_on_text_diff, merge_request: merge_request, author: user, path: 'README.md', note: 'Lorem ipsum on text...') }
-      let!(:draft_on_image) { create(:draft_note_on_image_diff, merge_request: merge_request, author: user, path: 'files/images/ee_repo_logo.png', note: 'Lorem ipsum on an image...') }
-
-      it 'does not show in overview' do
-        visit_overview
+  context 'adding single comment to review' do
+    before do
+      visit_overview
+    end
 
-        expect(page).to have_no_text(draft_on_text.note)
-        expect(page).to have_no_text(draft_on_image.note)
-      end
+    it 'at first does not show `Add to review` and `Add comment now` buttons' do
+      expect(page).to have_no_button('Add to review')
+      expect(page).to have_no_button('Add comment now')
     end
 
-    context 'adding single comment to review' do
+    context 'when review has started' do
       before do
-        visit_overview
-      end
-
-      it 'at first does not show `Add to review` and `Add comment now` buttons' do
-        expect(page).to have_no_button('Add to review')
-        expect(page).to have_no_button('Add comment now')
-      end
-
-      context 'when review has started' do
-        before do
-          visit_diffs
+        visit_diffs
 
-          write_diff_comment
+        write_diff_comment
 
-          visit_overview
-        end
+        visit_overview
+      end
 
-        it 'can add comment to review' do
-          write_comment(selector: '.js-main-target-form', field: 'note-body', text: 'Its a draft comment', button_text: 'Add to review')
+      it 'can add comment to review' do
+        write_comment(selector: '.js-main-target-form', field: 'note-body', text: 'Its a draft comment', button_text: 'Add to review')
 
-          expect(page).to have_selector('.draft-note-component', text: 'Its a draft comment')
+        expect(page).to have_selector('.draft-note-component', text: 'Its a draft comment')
 
-          click_button('Pending comments')
+        click_button('Pending comments')
 
-          expect(page).to have_text('2 pending comments')
-        end
+        expect(page).to have_text('2 pending comments')
+      end
 
-        it 'can add comment right away' do
-          write_comment(selector: '.js-main-target-form', field: 'note-body', text: 'Its a regular comment', button_text: 'Add comment now')
+      it 'can add comment right away' do
+        write_comment(selector: '.js-main-target-form', field: 'note-body', text: 'Its a regular comment', button_text: 'Add comment now')
 
-          expect(page).to have_selector('.note:not(.draft-note)', text: 'Its a regular comment')
+        expect(page).to have_selector('.note:not(.draft-note)', text: 'Its a regular comment')
 
-          click_button('Pending comments')
+        click_button('Pending comments')
 
-          expect(page).to have_text('1 pending comment')
-        end
+        expect(page).to have_text('1 pending comment')
       end
     end
+  end
 
-    context 'in parallel diff' do
-      before do
-        find('.js-show-diff-settings').click
-        click_button 'Side-by-side'
-        find('.js-show-diff-settings').click
-      end
+  context 'in parallel diff' do
+    before do
+      find('.js-show-diff-settings').click
+      click_button 'Side-by-side'
+      find('.js-show-diff-settings').click
+    end
 
-      it 'adds draft comments to both sides' do
-        write_parallel_comment('2f6fcd96b88b36ce98c38da085c795a27d92a3dd_10_9')
-        write_parallel_comment('2f6fcd96b88b36ce98c38da085c795a27d92a3dd_9_9', button_text: 'Add to review', text: 'Another wrong line')
+    it 'adds draft comments to both sides' do
+      write_parallel_comment('2f6fcd96b88b36ce98c38da085c795a27d92a3dd_10_9')
+      write_parallel_comment('2f6fcd96b88b36ce98c38da085c795a27d92a3dd_9_9', button_text: 'Add to review', text: 'Another wrong line')
 
-        expect(find('.new .draft-note-component')).to have_content('Line is wrong')
-        expect(find('.old .draft-note-component')).to have_content('Another wrong line')
+      expect(find('.new .draft-note-component')).to have_content('Line is wrong')
+      expect(find('.old .draft-note-component')).to have_content('Another wrong line')
 
-        expect(find('.review-bar-content .btn-confirm')).to have_content('2')
-      end
+      expect(find('.review-bar-content .gl-badge')).to have_content('2')
     end
+  end
 
-    context 'thread is unresolved' do
-      let!(:active_discussion) { create(:diff_note_on_merge_request, noteable: merge_request, project: project).to_discussion }
+  context 'thread is unresolved' do
+    let!(:active_discussion) { create(:diff_note_on_merge_request, noteable: merge_request, project: project).to_discussion }
 
-      before do
-        visit_diffs
-      end
+    before do
+      visit_diffs
+    end
 
-      it 'publishes comment right away and resolves the thread' do
-        expect(active_discussion.resolved?).to eq(false)
+    it 'publishes comment right away and resolves the thread' do
+      expect(active_discussion.resolved?).to eq(false)
 
-        write_reply_to_discussion(button_text: 'Add comment now', resolve: true)
+      write_reply_to_discussion(button_text: 'Add comment now', resolve: true)
 
-        page.within '.discussions-counter' do
-          expect(page).to have_content('All threads resolved')
-        end
+      page.within '.discussions-counter' do
+        expect(page).to have_content('All threads resolved')
       end
+    end
 
-      it 'publishes review and resolves the thread' do
-        expect(active_discussion.resolved?).to eq(false)
+    it 'publishes review and resolves the thread' do
+      expect(active_discussion.resolved?).to eq(false)
 
-        write_reply_to_discussion(resolve: true)
+      write_reply_to_discussion(resolve: true)
 
-        page.within('.review-bar-content') do
-          click_button 'Submit review'
-        end
+      page.within('.review-bar-content') do
+        click_button 'Finish review'
+        click_button 'Submit review'
+      end
 
-        wait_for_requests
+      wait_for_requests
 
-        page.within '.discussions-counter' do
-          expect(page).to have_content('All threads resolved')
-        end
+      page.within '.discussions-counter' do
+        expect(page).to have_content('All threads resolved')
       end
     end
+  end
 
-    context 'thread is resolved' do
-      let!(:active_discussion) { create(:diff_note_on_merge_request, :resolved, noteable: merge_request, project: project).to_discussion }
+  context 'thread is resolved' do
+    let!(:active_discussion) { create(:diff_note_on_merge_request, :resolved, noteable: merge_request, project: project).to_discussion }
 
-      before do
-        active_discussion.resolve!(@current_user)
+    before do
+      active_discussion.resolve!(@current_user)
 
-        visit_diffs
+      visit_diffs
 
-        page.find('.js-diff-comment-avatar').click
-      end
+      page.find('.js-diff-comment-avatar').click
+    end
 
-      it 'publishes comment right away and unresolves the thread' do
-        expect(active_discussion.resolved?).to eq(true)
+    it 'publishes comment right away and unresolves the thread' do
+      expect(active_discussion.resolved?).to eq(true)
 
-        write_reply_to_discussion(button_text: 'Add comment now', unresolve: true)
+      write_reply_to_discussion(button_text: 'Add comment now', unresolve: true)
 
-        page.within '.discussions-counter' do
-          expect(page).to have_content('1 unresolved thread')
-        end
+      page.within '.discussions-counter' do
+        expect(page).to have_content('1 unresolved thread')
       end
+    end
 
-      it 'publishes review and unresolves the thread' do
-        expect(active_discussion.resolved?).to eq(true)
+    it 'publishes review and unresolves the thread' do
+      expect(active_discussion.resolved?).to eq(true)
 
-        wait_for_requests
+      wait_for_requests
 
-        write_reply_to_discussion(button_text: 'Start a review', unresolve: true)
+      write_reply_to_discussion(button_text: 'Start a review', unresolve: true)
 
-        page.within('.review-bar-content') do
-          click_button 'Submit review'
-        end
+      page.within('.review-bar-content') do
+        click_button 'Finish review'
+        click_button 'Submit review'
+      end
 
-        wait_for_requests
+      wait_for_requests
 
-        page.within '.discussions-counter' do
-          expect(page).to have_content('1 unresolved thread')
-        end
+      page.within '.discussions-counter' do
+        expect(page).to have_content('1 unresolved thread')
       end
     end
   end
-- 
GitLab


From 0649289f6df8a3a020191c7dcc8eb0230c18690e Mon Sep 17 00:00:00 2001
From: Phil Hughes <me@iamphill.com>
Date: Wed, 8 Jun 2022 10:41:22 +0100
Subject: [PATCH 2/8] Fixed styling of tabs in dropdown

Fixed quick actions not working
---
 .../components/submit_dropdown.vue            |  8 ++---
 app/assets/javascripts/gl_form.js             |  5 +++-
 .../vue_shared/components/markdown/field.vue  |  7 +----
 .../page_bundles/merge_requests.scss          | 30 +++++++++++++++++++
 4 files changed, 39 insertions(+), 11 deletions(-)

diff --git a/app/assets/javascripts/batch_comments/components/submit_dropdown.vue b/app/assets/javascripts/batch_comments/components/submit_dropdown.vue
index f24a044e8bdd85..4701a2fe7194f5 100644
--- a/app/assets/javascripts/batch_comments/components/submit_dropdown.vue
+++ b/app/assets/javascripts/batch_comments/components/submit_dropdown.vue
@@ -46,15 +46,14 @@ export default {
       <gl-icon class="dropdown-chevron" name="chevron-up" />
     </template>
     <form @submit.prevent="submitReview">
-      <label for="review-note-body" class="gl-font-weight-bold gl-mb-3">{{
-        __('Summary comment (optional)')
-      }}</label>
+      <label for="review-note-body" class="gl-font-weight-bold gl-mb-3">
+        {{ __('Summary comment (optional)') }}
+      </label>
       <div class="common-note-form gfm-form">
         <div
           class="comment-warning-wrapper gl-border-solid gl-border-1 gl-rounded-base gl-border-gray-100"
         >
           <markdown-field
-            ref="markdownField"
             :is-submitting="isSubmitting"
             :add-spacing-classes="false"
             :textarea-value="note"
@@ -63,6 +62,7 @@ export default {
             :quick-actions-docs-path="getNotesData.quickActionsDocsPath"
             :restricted-tool-bar-items="$options.restrictedToolbarItems"
             :force-autosize="false"
+            class="js-no-autosize"
           >
             <template #textarea>
               <textarea
diff --git a/app/assets/javascripts/gl_form.js b/app/assets/javascripts/gl_form.js
index 3a04779e48d82b..2b157fac878ad4 100644
--- a/app/assets/javascripts/gl_form.js
+++ b/app/assets/javascripts/gl_form.js
@@ -60,7 +60,10 @@ export default class GLForm {
       this.autoComplete = new GfmAutoComplete(gl.GfmAutoComplete && gl.GfmAutoComplete.dataSources);
       this.autoComplete.setup(this.form.find('.js-gfm-input'), this.enableGFM);
       this.formDropzone = dropzoneInput(this.form, { parallelUploads: 1 });
-      autosize(this.textarea);
+
+      if (this.form.is(':not(.js-no-autosize)')) {
+        autosize(this.textarea);
+      }
     }
     // form and textarea event listeners
     this.addEventListeners();
diff --git a/app/assets/javascripts/vue_shared/components/markdown/field.vue b/app/assets/javascripts/vue_shared/components/markdown/field.vue
index c331d623711512..1f309a19b14cea 100644
--- a/app/assets/javascripts/vue_shared/components/markdown/field.vue
+++ b/app/assets/javascripts/vue_shared/components/markdown/field.vue
@@ -121,11 +121,6 @@ export default {
       required: false,
       default: () => [],
     },
-    forceAutosize: {
-      type: Boolean,
-      required: false,
-      default: true,
-    },
   },
   data() {
     return {
@@ -255,7 +250,7 @@ export default {
         vulnerabilities: this.enableAutocomplete,
         contacts: this.enableAutocomplete && this.glFeatures.contactsAutocomplete,
       },
-      this.forceAutosize,
+      true,
     );
   },
   beforeDestroy() {
diff --git a/app/assets/stylesheets/page_bundles/merge_requests.scss b/app/assets/stylesheets/page_bundles/merge_requests.scss
index aa6d4b5c70e8b4..8ecc6c3d39a525 100644
--- a/app/assets/stylesheets/page_bundles/merge_requests.scss
+++ b/app/assets/stylesheets/page_bundles/merge_requests.scss
@@ -763,6 +763,36 @@ $tabs-holder-z-index: 250;
     .gl-new-dropdown-inner {
       max-height: none !important;
     }
+
+    .md-header {
+      .gl-tab-nav-item {
+        @include gl-text-gray-900;
+        @include gl-pb-5;
+
+        &:hover {
+          @include gl-bg-none;
+          @include gl-text-gray-900;
+
+          &:not(.gl-tab-nav-item-active) {
+            @include gl-inset-border-b-2-gray-200;
+          }
+        }
+      }
+
+      .gl-tab-nav-item-active {
+        @include gl-font-weight-bold;
+        @include gl-text-gray-900;
+        @include gl-inset-border-b-2-theme-accent;
+
+        &:active,
+        &:focus,
+        &:focus:active {
+          box-shadow: inset 0 -#{$gl-border-size-2} 0 0 var(--gl-theme-accent, $theme-indigo-500),
+            $focus-ring;
+          @include gl-outline-none;
+        }
+      }
+    }
   }
 
   .gl-new-dropdown-contents {
-- 
GitLab


From 2c46658bb259b5167cb188641627de84ab9cdf4c Mon Sep 17 00:00:00 2001
From: Phil Hughes <me@iamphill.com>
Date: Wed, 8 Jun 2022 10:49:02 +0100
Subject: [PATCH 3/8] Fixed size of dropdown on smaller screen sizes

---
 app/assets/stylesheets/page_bundles/merge_requests.scss | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/app/assets/stylesheets/page_bundles/merge_requests.scss b/app/assets/stylesheets/page_bundles/merge_requests.scss
index 8ecc6c3d39a525..70bca3e5dd45b7 100644
--- a/app/assets/stylesheets/page_bundles/merge_requests.scss
+++ b/app/assets/stylesheets/page_bundles/merge_requests.scss
@@ -756,8 +756,8 @@ $tabs-holder-z-index: 250;
 }
 
 .submit-review-dropdown {
-  .dropdown-menu {
-    width: 650px;
+  &.show .dropdown-menu {
+    width: calc(100vw - 20px);
     max-width: 650px;
 
     .gl-new-dropdown-inner {
-- 
GitLab


From f346b92289e2d7147d7b103c2f68b505d3b4fb74 Mon Sep 17 00:00:00 2001
From: Phil Hughes <me@iamphill.com>
Date: Wed, 8 Jun 2022 11:08:01 +0100
Subject: [PATCH 4/8] Added specs to actions

Added specs to submit dropdown
---
 .../components/submit_dropdown.vue            |  4 +-
 .../components/submit_dropdown_spec.js        | 69 +++++++++++++++++++
 .../modules/batch_comments/actions_spec.js    | 13 ++++
 3 files changed, 85 insertions(+), 1 deletion(-)
 create mode 100644 spec/frontend/batch_comments/components/submit_dropdown_spec.js

diff --git a/app/assets/javascripts/batch_comments/components/submit_dropdown.vue b/app/assets/javascripts/batch_comments/components/submit_dropdown.vue
index 4701a2fe7194f5..cd78af62d87cd9 100644
--- a/app/assets/javascripts/batch_comments/components/submit_dropdown.vue
+++ b/app/assets/javascripts/batch_comments/components/submit_dropdown.vue
@@ -45,7 +45,7 @@ export default {
       {{ __('Finish review') }}
       <gl-icon class="dropdown-chevron" name="chevron-up" />
     </template>
-    <form @submit.prevent="submitReview">
+    <form data-testid="submit-form" @submit.prevent="submitReview">
       <label for="review-note-body" class="gl-font-weight-bold gl-mb-3">
         {{ __('Summary comment (optional)') }}
       </label>
@@ -74,6 +74,7 @@ export default {
                 name="review[note]"
                 class="note-textarea js-gfm-input markdown-area"
                 data-supports-quick-actions="true"
+                data-testid="comment-textarea"
                 :aria-label="__('Comment')"
                 :placeholder="__('Write a comment or drag your files here…')"
                 @keydown.meta.enter="submitReview"
@@ -89,6 +90,7 @@ export default {
           variant="info"
           type="submit"
           class="gl-ml-auto js-no-auto-disable"
+          data-testid="submit-review-button"
         >
           {{ __('Submit review') }}
         </gl-button>
diff --git a/spec/frontend/batch_comments/components/submit_dropdown_spec.js b/spec/frontend/batch_comments/components/submit_dropdown_spec.js
new file mode 100644
index 00000000000000..884b30fe995629
--- /dev/null
+++ b/spec/frontend/batch_comments/components/submit_dropdown_spec.js
@@ -0,0 +1,69 @@
+import Vue from 'vue';
+import Vuex from 'vuex';
+import { mountExtended } from 'helpers/vue_test_utils_helper';
+import SubmitDropdown from '~/batch_comments/components/submit_dropdown.vue';
+
+Vue.use(Vuex);
+
+let wrapper;
+let publishReview;
+
+function factory() {
+  publishReview = jest.fn();
+
+  const store = new Vuex.Store({
+    getters: {
+      getNotesData: () => ({
+        markdownDocsPath: '/markdown/docs',
+        quickActionsDocsPath: '/quickactions/docs',
+      }),
+      getNoteableData: () => ({ id: 1, preview_note_path: '/preview' }),
+      noteableType: () => 'merge_request',
+    },
+    modules: {
+      batchComments: {
+        namespaced: true,
+        actions: {
+          publishReview,
+        },
+      },
+    },
+  });
+  wrapper = mountExtended(SubmitDropdown, {
+    store,
+  });
+}
+
+const findCommentTextarea = () => wrapper.findByTestId('comment-textarea');
+const findSubmitButton = () => wrapper.findByTestId('submit-review-button');
+const findForm = () => wrapper.findByTestId('submit-form');
+
+describe('Batch comments submit dropdown', () => {
+  afterEach(() => {
+    wrapper.destroy();
+  });
+
+  it('calls publishReview with note data', async () => {
+    factory();
+
+    findCommentTextarea().setValue('Hello world');
+
+    await findForm().trigger('submit');
+
+    expect(publishReview).toHaveBeenCalledWith(expect.anything(), {
+      noteable_type: 'merge_request',
+      noteable_id: 1,
+      note: 'Hello world',
+    });
+  });
+
+  it('sets submit dropdown to loading', async () => {
+    factory();
+
+    findCommentTextarea().setValue('Hello world');
+
+    await findForm().trigger('submit');
+
+    expect(findSubmitButton().props('loading')).toBe(true);
+  });
+});
diff --git a/spec/frontend/batch_comments/stores/modules/batch_comments/actions_spec.js b/spec/frontend/batch_comments/stores/modules/batch_comments/actions_spec.js
index e9535d8cc12b2a..62c1e104c1bb0b 100644
--- a/spec/frontend/batch_comments/stores/modules/batch_comments/actions_spec.js
+++ b/spec/frontend/batch_comments/stores/modules/batch_comments/actions_spec.js
@@ -168,6 +168,8 @@ describe('Batch comments store actions', () => {
       rootGetters = { discussionsStructuredByLineCode: 'discussions' };
     });
 
+    afterEach(() => jest.clearAllMocks());
+
     it('dispatches actions & commits', () => {
       mock.onAny().reply(200);
 
@@ -179,6 +181,17 @@ describe('Batch comments store actions', () => {
       });
     });
 
+    it('calls service with notes data', () => {
+      service.publish = jest.fn();
+      service.publish.mockResolvedValue({});
+
+      return actions
+        .publishReview({ dispatch, commit, getters, rootGetters }, { note: 'test' })
+        .then(() => {
+          expect(service.publish).toHaveBeenCalledWith('http://test.host', { note: 'test' });
+        });
+    });
+
     it('dispatches error commits', () => {
       mock.onAny().reply(500);
 
-- 
GitLab


From e58b8947f5000f196b8fac3849b502a8b9010668 Mon Sep 17 00:00:00 2001
From: Phil Hughes <me@iamphill.com>
Date: Wed, 8 Jun 2022 16:53:50 +0100
Subject: [PATCH 5/8] Fixed failing actions spec

---
 .../stores/modules/batch_comments/actions_spec.js          | 7 ++-----
 1 file changed, 2 insertions(+), 5 deletions(-)

diff --git a/spec/frontend/batch_comments/stores/modules/batch_comments/actions_spec.js b/spec/frontend/batch_comments/stores/modules/batch_comments/actions_spec.js
index 62c1e104c1bb0b..172b510645dd9a 100644
--- a/spec/frontend/batch_comments/stores/modules/batch_comments/actions_spec.js
+++ b/spec/frontend/batch_comments/stores/modules/batch_comments/actions_spec.js
@@ -168,8 +168,6 @@ describe('Batch comments store actions', () => {
       rootGetters = { discussionsStructuredByLineCode: 'discussions' };
     });
 
-    afterEach(() => jest.clearAllMocks());
-
     it('dispatches actions & commits', () => {
       mock.onAny().reply(200);
 
@@ -182,13 +180,12 @@ describe('Batch comments store actions', () => {
     });
 
     it('calls service with notes data', () => {
-      service.publish = jest.fn();
-      service.publish.mockResolvedValue({});
+      jest.spyOn(axios, 'post');
 
       return actions
         .publishReview({ dispatch, commit, getters, rootGetters }, { note: 'test' })
         .then(() => {
-          expect(service.publish).toHaveBeenCalledWith('http://test.host', { note: 'test' });
+          expect(axios.post.mock.calls[0]).toEqual(['http://test.host', { note: 'test' }]);
         });
     });
 
-- 
GitLab


From e1bb1cec3e2fa22957311a551b4a62c05820a94c Mon Sep 17 00:00:00 2001
From: Phil Hughes <me@iamphill.com>
Date: Thu, 9 Jun 2022 10:50:52 +0100
Subject: [PATCH 6/8] Scroll to note that was posted

---
 .../components/submit_dropdown.vue               | 16 +++++++++++++---
 1 file changed, 13 insertions(+), 3 deletions(-)

diff --git a/app/assets/javascripts/batch_comments/components/submit_dropdown.vue b/app/assets/javascripts/batch_comments/components/submit_dropdown.vue
index cd78af62d87cd9..7620f41457fc59 100644
--- a/app/assets/javascripts/batch_comments/components/submit_dropdown.vue
+++ b/app/assets/javascripts/batch_comments/components/submit_dropdown.vue
@@ -2,6 +2,7 @@
 import { GlDropdown, GlButton, GlIcon } from '@gitlab/ui';
 import { mapGetters, mapActions } from 'vuex';
 import MarkdownField from '~/vue_shared/components/markdown/field.vue';
+import { scrollToElement } from '~/lib/utils/common_utils';
 
 export default {
   components: {
@@ -17,7 +18,7 @@ export default {
     };
   },
   computed: {
-    ...mapGetters(['getNotesData', 'getNoteableData', 'noteableType']),
+    ...mapGetters(['getNotesData', 'getNoteableData', 'noteableType', 'getCurrentUserLastNote']),
   },
   methods: {
     ...mapActions('batchComments', ['publishReview']),
@@ -32,6 +33,15 @@ export default {
 
       await this.publishReview(noteData);
 
+      if (window.mrTabs && this.note) {
+        window.location.hash = `note_${this.getCurrentUserLastNote.id}`;
+        window.mrTabs.tabShown('show');
+
+        setTimeout(() =>
+          scrollToElement(document.getElementById(`note_${this.getCurrentUserLastNote.id}`)),
+        );
+      }
+
       this.isSubmitting = false;
     },
   },
@@ -40,13 +50,13 @@ export default {
 </script>
 
 <template>
-  <gl-dropdown right class="submit-review-dropdown" variant="info">
+  <gl-dropdown right class="submit-review-dropdown" variant="info" category="secondary">
     <template #button-content>
       {{ __('Finish review') }}
       <gl-icon class="dropdown-chevron" name="chevron-up" />
     </template>
     <form data-testid="submit-form" @submit.prevent="submitReview">
-      <label for="review-note-body" class="gl-font-weight-bold gl-mb-3">
+      <label for="review-note-body" class="gl-font-weight-bold gl-mb-4">
         {{ __('Summary comment (optional)') }}
       </label>
       <div class="common-note-form gfm-form">
-- 
GitLab


From 211d9bf28757a59f01e9975d0a03cd93bec6144e Mon Sep 17 00:00:00 2001
From: Phil Hughes <me@iamphill.com>
Date: Thu, 9 Jun 2022 11:32:52 +0100
Subject: [PATCH 7/8] Added spec for drafts controller

---
 .../merge_requests/drafts_controller_spec.rb  | 32 +++++++++++++++++++
 1 file changed, 32 insertions(+)

diff --git a/spec/controllers/projects/merge_requests/drafts_controller_spec.rb b/spec/controllers/projects/merge_requests/drafts_controller_spec.rb
index 222bb977beb62c..b9ede84157d824 100644
--- a/spec/controllers/projects/merge_requests/drafts_controller_spec.rb
+++ b/spec/controllers/projects/merge_requests/drafts_controller_spec.rb
@@ -385,6 +385,38 @@ def create_reply(discussion_id, resolves: false)
         expect(discussion.resolved?).to eq(false)
       end
     end
+
+    context 'publish with note' do
+      before do
+        create(:draft_note, merge_request: merge_request, author: user)
+      end
+
+      context 'when feature flag is disabled' do
+        before do
+          stub_feature_flags(mr_review_submit_comment: false)
+        end
+
+        it 'does not create note' do
+          post :publish, params: params.merge!(note: 'Hello world')
+
+          expect(merge_request.notes.reload.size).to be(1)
+        end
+      end
+
+      context 'when feature flag is enabled' do
+        it 'creates note' do
+          post :publish, params: params.merge!(note: 'Hello world')
+
+          expect(merge_request.notes.reload.size).to be(2)
+        end
+
+        it 'does not create note when note param is empty' do
+          post :publish, params: params.merge!(note: '')
+
+          expect(merge_request.notes.reload.size).to be(1)
+        end
+      end
+    end
   end
 
   describe 'DELETE #destroy' do
-- 
GitLab


From ddf3a6b857be6618547b0d3cec386dc1d4ea7758 Mon Sep 17 00:00:00 2001
From: Phil Hughes <me@iamphill.com>
Date: Thu, 9 Jun 2022 16:28:43 +0100
Subject: [PATCH 8/8] Use GitLab UI components for form

---
 .../components/submit_dropdown.vue            | 89 ++++++++++---------
 .../components/submit_dropdown_spec.js        |  6 +-
 2 files changed, 50 insertions(+), 45 deletions(-)

diff --git a/app/assets/javascripts/batch_comments/components/submit_dropdown.vue b/app/assets/javascripts/batch_comments/components/submit_dropdown.vue
index 7620f41457fc59..5f4a1e44ea394c 100644
--- a/app/assets/javascripts/batch_comments/components/submit_dropdown.vue
+++ b/app/assets/javascripts/batch_comments/components/submit_dropdown.vue
@@ -1,5 +1,5 @@
 <script>
-import { GlDropdown, GlButton, GlIcon } from '@gitlab/ui';
+import { GlDropdown, GlButton, GlIcon, GlForm, GlFormGroup } from '@gitlab/ui';
 import { mapGetters, mapActions } from 'vuex';
 import MarkdownField from '~/vue_shared/components/markdown/field.vue';
 import { scrollToElement } from '~/lib/utils/common_utils';
@@ -9,6 +9,8 @@ export default {
     GlDropdown,
     GlButton,
     GlIcon,
+    GlForm,
+    GlFormGroup,
     MarkdownField,
   },
   data() {
@@ -55,56 +57,59 @@ export default {
       {{ __('Finish review') }}
       <gl-icon class="dropdown-chevron" name="chevron-up" />
     </template>
-    <form data-testid="submit-form" @submit.prevent="submitReview">
-      <label for="review-note-body" class="gl-font-weight-bold gl-mb-4">
-        {{ __('Summary comment (optional)') }}
-      </label>
-      <div class="common-note-form gfm-form">
-        <div
-          class="comment-warning-wrapper gl-border-solid gl-border-1 gl-rounded-base gl-border-gray-100"
-        >
-          <markdown-field
-            :is-submitting="isSubmitting"
-            :add-spacing-classes="false"
-            :textarea-value="note"
-            :markdown-preview-path="getNoteableData.preview_note_path"
-            :markdown-docs-path="getNotesData.markdownDocsPath"
-            :quick-actions-docs-path="getNotesData.quickActionsDocsPath"
-            :restricted-tool-bar-items="$options.restrictedToolbarItems"
-            :force-autosize="false"
-            class="js-no-autosize"
+    <gl-form data-testid="submit-gl-form" @submit.prevent="submitReview">
+      <gl-form-group
+        :label="__('Summary comment (optional)')"
+        label-for="review-note-body"
+        label-class="gl-mb-2"
+      >
+        <div class="common-note-form gfm-form">
+          <div
+            class="comment-warning-wrapper gl-border-solid gl-border-1 gl-rounded-base gl-border-gray-100"
           >
-            <template #textarea>
-              <textarea
-                id="review-note-body"
-                ref="textarea"
-                v-model="note"
-                dir="auto"
-                :disabled="isSubmitting"
-                name="review[note]"
-                class="note-textarea js-gfm-input markdown-area"
-                data-supports-quick-actions="true"
-                data-testid="comment-textarea"
-                :aria-label="__('Comment')"
-                :placeholder="__('Write a comment or drag your files here…')"
-                @keydown.meta.enter="submitReview"
-                @keydown.ctrl.enter="submitReview"
-              ></textarea>
-            </template>
-          </markdown-field>
+            <markdown-field
+              :is-submitting="isSubmitting"
+              :add-spacing-classes="false"
+              :textarea-value="note"
+              :markdown-preview-path="getNoteableData.preview_note_path"
+              :markdown-docs-path="getNotesData.markdownDocsPath"
+              :quick-actions-docs-path="getNotesData.quickActionsDocsPath"
+              :restricted-tool-bar-items="$options.restrictedToolbarItems"
+              :force-autosize="false"
+              class="js-no-autosize"
+            >
+              <template #textarea>
+                <textarea
+                  id="review-note-body"
+                  ref="textarea"
+                  v-model="note"
+                  dir="auto"
+                  :disabled="isSubmitting"
+                  name="review[note]"
+                  class="note-textarea js-gfm-input markdown-area"
+                  data-supports-quick-actions="true"
+                  data-testid="comment-textarea"
+                  :aria-label="__('Comment')"
+                  :placeholder="__('Write a comment or drag your files here…')"
+                  @keydown.meta.enter="submitReview"
+                  @keydown.ctrl.enter="submitReview"
+                ></textarea>
+              </template>
+            </markdown-field>
+          </div>
         </div>
-      </div>
-      <div class="gl-display-flex gl-mt-5">
+      </gl-form-group>
+      <div class="gl-display-flex gl-justify-content-end gl-mt-5">
         <gl-button
           :loading="isSubmitting"
-          variant="info"
+          variant="confirm"
           type="submit"
-          class="gl-ml-auto js-no-auto-disable"
+          class="js-no-auto-disable"
           data-testid="submit-review-button"
         >
           {{ __('Submit review') }}
         </gl-button>
       </div>
-    </form>
+    </gl-form>
   </gl-dropdown>
 </template>
diff --git a/spec/frontend/batch_comments/components/submit_dropdown_spec.js b/spec/frontend/batch_comments/components/submit_dropdown_spec.js
index 884b30fe995629..4f5ff797230d6c 100644
--- a/spec/frontend/batch_comments/components/submit_dropdown_spec.js
+++ b/spec/frontend/batch_comments/components/submit_dropdown_spec.js
@@ -36,7 +36,7 @@ function factory() {
 
 const findCommentTextarea = () => wrapper.findByTestId('comment-textarea');
 const findSubmitButton = () => wrapper.findByTestId('submit-review-button');
-const findForm = () => wrapper.findByTestId('submit-form');
+const findForm = () => wrapper.findByTestId('submit-gl-form');
 
 describe('Batch comments submit dropdown', () => {
   afterEach(() => {
@@ -48,7 +48,7 @@ describe('Batch comments submit dropdown', () => {
 
     findCommentTextarea().setValue('Hello world');
 
-    await findForm().trigger('submit');
+    await findForm().vm.$emit('submit', { preventDefault: jest.fn() });
 
     expect(publishReview).toHaveBeenCalledWith(expect.anything(), {
       noteable_type: 'merge_request',
@@ -62,7 +62,7 @@ describe('Batch comments submit dropdown', () => {
 
     findCommentTextarea().setValue('Hello world');
 
-    await findForm().trigger('submit');
+    await findForm().vm.$emit('submit', { preventDefault: jest.fn() });
 
     expect(findSubmitButton().props('loading')).toBe(true);
   });
-- 
GitLab