diff --git a/app/assets/javascripts/batch_comments/components/drafts_count.vue b/app/assets/javascripts/batch_comments/components/drafts_count.vue
index 61718b766d834d8de255476fb5d007f5bcdd3912..0cd093823bc028edb6ea8933ed470df8322c0367 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 e90c29e939f95c9e32f9ee32e07eb642f4f3af7a..f839056daf8addfc39c89f4986d394c7d8ccbdbc 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 bce13751448ea4db49beb6fdc78da4ba4d4a7a1a..3cd1a2525e9a72320f6f5a1b74e469719aad7d4a 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 0000000000000000000000000000000000000000..5f4a1e44ea394ca2550500e28c1992ce4fcb7949
--- /dev/null
+++ b/app/assets/javascripts/batch_comments/components/submit_dropdown.vue
@@ -0,0 +1,115 @@
+<script>
+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';
+
+export default {
+  components: {
+    GlDropdown,
+    GlButton,
+    GlIcon,
+    GlForm,
+    GlFormGroup,
+    MarkdownField,
+  },
+  data() {
+    return {
+      isSubmitting: false,
+      note: '',
+    };
+  },
+  computed: {
+    ...mapGetters(['getNotesData', 'getNoteableData', 'noteableType', 'getCurrentUserLastNote']),
+  },
+  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);
+
+      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;
+    },
+  },
+  restrictedToolbarItems: ['full-screen'],
+};
+</script>
+
+<template>
+  <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>
+    <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"
+          >
+            <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>
+      </gl-form-group>
+      <div class="gl-display-flex gl-justify-content-end gl-mt-5">
+        <gl-button
+          :loading="isSubmitting"
+          variant="confirm"
+          type="submit"
+          class="js-no-auto-disable"
+          data-testid="submit-review-button"
+        >
+          {{ __('Submit review') }}
+        </gl-button>
+      </div>
+    </gl-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 36d2f8df612c617066a2af0843d9dc654f12597a..b52e573d55d0ee342b7cc67e4f9e8de643af4a2b 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 4ee22918463ccb382bf153076ba830fa72ef8de8..2980ca6f16f26043ef5c7ab97d843cd1985491e2 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/gl_form.js b/app/assets/javascripts/gl_form.js
index 3a04779e48d82bdc4f8a6a9729d5d047883f4ab1..2b157fac878ad46124d83a0c85107e6b0b431871 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/stylesheets/page_bundles/merge_requests.scss b/app/assets/stylesheets/page_bundles/merge_requests.scss
index 76f84331790717536205c356b855e20103be21da..70bca3e5dd45b788925cae7c5525e0211c1d4dcd 100644
--- a/app/assets/stylesheets/page_bundles/merge_requests.scss
+++ b/app/assets/stylesheets/page_bundles/merge_requests.scss
@@ -754,3 +754,53 @@ $tabs-holder-z-index: 250;
     }
   }
 }
+
+.submit-review-dropdown {
+  &.show .dropdown-menu {
+    width: calc(100vw - 20px);
+    max-width: 650px;
+
+    .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 {
+    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 686d2c1dc1fcfc098a414eb8ded9596da935a4d3..db7557674b29ed9c708fef6696ba636d23190a9e 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 6737ac20d7a8b7c80f443bc065b1953f98853eb1..e10984a4833812bfcd39f7f4cf85bb97eac70c2a 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 0000000000000000000000000000000000000000..d06901d992cbd4dd7504345a1340119f55f1a3b0
--- /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 ebec4a84cda0bc2c3aa3a57b3621e814737ba67e..4dd8c936b725dc0d6f367f887d155a688a9163dd 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/controllers/projects/merge_requests/drafts_controller_spec.rb b/spec/controllers/projects/merge_requests/drafts_controller_spec.rb
index 222bb977beb62ce4ec9f86f1501bf9f17b9a18ee..b9ede84157d824b7e42cd7783e206875ae8189a2 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
diff --git a/spec/features/merge_request/batch_comments_spec.rb b/spec/features/merge_request/batch_comments_spec.rb
index 9b54d95be6b044e95388ed1a92dbfe324639a6df..2e9225ac78be473ab780eaf2f433ee2116446bb3 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
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 0000000000000000000000000000000000000000..4f5ff797230d6c4368b96f894b432618edd2e3b2
--- /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-gl-form');
+
+describe('Batch comments submit dropdown', () => {
+  afterEach(() => {
+    wrapper.destroy();
+  });
+
+  it('calls publishReview with note data', async () => {
+    factory();
+
+    findCommentTextarea().setValue('Hello world');
+
+    await findForm().vm.$emit('submit', { preventDefault: jest.fn() });
+
+    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().vm.$emit('submit', { preventDefault: jest.fn() });
+
+    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 e9535d8cc12b2a98aea9684bbbd24ec3937d5ebb..172b510645dd9a357b7cef5d8959cc6ce4587eb0 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
@@ -179,6 +179,16 @@ describe('Batch comments store actions', () => {
       });
     });
 
+    it('calls service with notes data', () => {
+      jest.spyOn(axios, 'post');
+
+      return actions
+        .publishReview({ dispatch, commit, getters, rootGetters }, { note: 'test' })
+        .then(() => {
+          expect(axios.post.mock.calls[0]).toEqual(['http://test.host', { note: 'test' }]);
+        });
+    });
+
     it('dispatches error commits', () => {
       mock.onAny().reply(500);