diff --git a/app/assets/javascripts/vue_merge_request_widget/components/approvals/approvals.vue b/app/assets/javascripts/vue_merge_request_widget/components/approvals/approvals.vue
index f56eb8e2688bfdaf48db0def2e7d37872e8742aa..15064c5fd225254ed9698b69bdbb1ee5e42e8f60 100644
--- a/app/assets/javascripts/vue_merge_request_widget/components/approvals/approvals.vue
+++ b/app/assets/javascripts/vue_merge_request_widget/components/approvals/approvals.vue
@@ -1,5 +1,6 @@
 <script>
 import { GlForm, GlButton, GlSprintf } from '@gitlab/ui';
+import { mapActions } from 'pinia';
 import { createAlert } from '~/alert';
 import csrf from '~/lib/utils/csrf';
 import { STATUS_MERGED } from '~/issues/constants';
@@ -7,6 +8,7 @@ import { BV_SHOW_MODAL } from '~/lib/utils/constants';
 import { HTTP_STATUS_UNAUTHORIZED } from '~/lib/utils/http_status';
 import { s__, __, n__, sprintf } from '~/locale';
 import { getIdFromGraphQLId } from '~/graphql_shared/utils';
+import { useBatchComments } from '~/batch_comments/store';
 import approvalsMixin from '../../mixins/approvals';
 import StateContainer from '../state_container.vue';
 import { INVALID_RULES_DOCS_PATH } from '../../constants';
@@ -190,13 +192,15 @@ export default {
     },
   },
   methods: {
+    ...mapActions(useBatchComments, ['clearDrafts']),
     approve() {
       if (this.requirePasswordToApprove) {
         this.$root.$emit(BV_SHOW_MODAL, this.modalId);
         return;
       }
       this.updateApproval(
-        () => this.service.approveMergeRequest(),
+        () =>
+          this.service.approveMergeRequest({ publish_review: true }).then(() => this.clearDrafts()),
         () =>
           this.alerts.push(
             createAlert({
@@ -207,7 +211,7 @@ export default {
     },
     approveWithAuth(data) {
       this.updateApproval(
-        () => this.service.approveMergeRequestWithAuth(data),
+        () => this.service.approveMergeRequestWithAuth(data).then(() => this.clearDrafts()),
         (error) => {
           if (error?.response?.status === HTTP_STATUS_UNAUTHORIZED) {
             this.hasApprovalAuthError = true;
diff --git a/app/assets/javascripts/vue_merge_request_widget/services/mr_widget_service.js b/app/assets/javascripts/vue_merge_request_widget/services/mr_widget_service.js
index 7b8bf1ce199352e2cab75b60249a8ef6f88e1e35..318fef5b6c57fedafd84b860907cc3f09445989f 100644
--- a/app/assets/javascripts/vue_merge_request_widget/services/mr_widget_service.js
+++ b/app/assets/javascripts/vue_merge_request_widget/services/mr_widget_service.js
@@ -64,8 +64,8 @@ export default class MRWidgetService {
     return axios.get(this.apiApprovalsPath).then((res) => res.data);
   }
 
-  approveMergeRequest() {
-    return axios.post(this.apiApprovePath).then((res) => res.data);
+  approveMergeRequest(data) {
+    return axios.post(this.apiApprovePath, data).then((res) => res.data);
   }
 
   unapproveMergeRequest() {
diff --git a/doc/user/project/merge_requests/reviews/_index.md b/doc/user/project/merge_requests/reviews/_index.md
index 75103a4c0e3bfb7c8be423b02fdec82849d5a6ba..b100e13d2958f5946edddabe5080c2a2c3d2ac28 100644
--- a/doc/user/project/merge_requests/reviews/_index.md
+++ b/doc/user/project/merge_requests/reviews/_index.md
@@ -200,7 +200,13 @@ until you publish the comment:
 
 ## Submit a review
 
-When you submit a review, GitLab does the following:
+{{< history >}}
+
+- Using **Approve** to submit pending review comments [introduced](https://gitlab.com/gitlab-org/gitlab/-/issues/562579) in GitLab 18.6.
+
+{{< /history >}}
+
+When you submit a review, GitLab:
 
 - Publishes the comments in your review.
 - Sends a single email to every notifiable user of the merge request, with your
@@ -208,7 +214,14 @@ When you submit a review, GitLab does the following:
 - Performs any quick actions you added to your review comments.
 - Shows the outcome of your review.
 
-1. In the upper right, select **Your review** to show details about your review:
+To submit your review of a merge request quickly:
+
+- Go to the merge request widget and select **Approve**. The merge request is also approved by you.
+- Use the `/submit_review` [quick action](../../quick_actions.md) in the text of a non-review comment.
+
+To read through and edit your review comments when you submit your review:
+
+1. On the top right, select **Your review** to show details about your review:
 
    ![The review drawer, showing a review in progress. It contains a single-line review comment, and a comment spanning two lines of code.](img/review_drawer_v18_3.png)
 
@@ -224,8 +237,6 @@ When you submit a review, GitLab does the following:
    **Add summary** ({{< icon name="tanuki-ai">}}) to create a summary for you. Include any
    quick actions you want performed.
 
-You can also use the `/submit_review` [quick action](../../quick_actions.md) in the text of a non-review comment.
-
 ### Discard your pending review
 
 When you discard a review, your unpublished comments are deleted and you cannot restore them.
diff --git a/ee/app/assets/javascripts/vue_merge_request_widget/services/mr_widget_service.js b/ee/app/assets/javascripts/vue_merge_request_widget/services/mr_widget_service.js
index 084400f1141fffdb161046728745ea2c17ae08c6..df84d27162fa87c4195ed35a12bbbc68183484a1 100644
--- a/ee/app/assets/javascripts/vue_merge_request_widget/services/mr_widget_service.js
+++ b/ee/app/assets/javascripts/vue_merge_request_widget/services/mr_widget_service.js
@@ -10,7 +10,7 @@ export default class MRWidgetService extends CEWidgetService {
 
   approveMergeRequestWithAuth(approvalPassword) {
     return axios
-      .post(this.apiApprovePath, { approval_password: approvalPassword })
+      .post(this.apiApprovePath, { approval_password: approvalPassword, publish_review: true })
       .then((res) => res.data);
   }
 
diff --git a/ee/spec/frontend/vue_merge_request_widget/components/approvals/approvals_spec.js b/ee/spec/frontend/vue_merge_request_widget/components/approvals/approvals_spec.js
index a120b1881df10d1feff0db4a8974dc0395141693..19bb5bf8af5e2a610b7f7056169c321df1797fc1 100644
--- a/ee/spec/frontend/vue_merge_request_widget/components/approvals/approvals_spec.js
+++ b/ee/spec/frontend/vue_merge_request_widget/components/approvals/approvals_spec.js
@@ -1,11 +1,14 @@
 import Vue, { nextTick } from 'vue';
 import VueApollo from 'vue-apollo';
 import { GlButton, GlSprintf } from '@gitlab/ui';
+import { createTestingPinia } from '@pinia/testing';
+import { PiniaVuePlugin } from 'pinia';
 import { createMockSubscription as createMockApolloSubscription } from 'mock-apollo-client';
 import approvedByCurrentUser from 'test_fixtures/graphql/merge_requests/approvals/approvals.query.graphql.json';
 import createMockApollo from 'helpers/mock_apollo_helper';
 import waitForPromises from 'helpers/wait_for_promises';
 import { mountExtended } from 'helpers/vue_test_utils_helper';
+import { globalAccessorPlugin } from '~/pinia/plugins';
 import { getIdFromGraphQLId } from '~/graphql_shared/utils';
 import { createAlert } from '~/alert';
 import Approvals from 'ee/vue_merge_request_widget/components/approvals/approvals.vue';
@@ -17,8 +20,12 @@ import { createCanApproveResponse } from 'jest/approvals/mock_data';
 import { HTTP_STATUS_UNAUTHORIZED } from '~/lib/utils/http_status';
 import mergeRequestApprovalStateUpdated from 'ee/vue_merge_request_widget/components/approvals/queries/approval_rules.subscription.graphql';
 import userPermissionsQuery from '~/merge_requests/components/reviewers/queries/user_permissions.query.graphql';
+import { useLegacyDiffs } from '~/diffs/stores/legacy_diffs';
+import { useNotes } from '~/notes/store/legacy_notes';
+import { useBatchComments } from '~/batch_comments/store';
 
 Vue.use(VueApollo);
+Vue.use(PiniaVuePlugin);
 
 const mockAlertDismiss = jest.fn();
 jest.mock('~/alert', () => ({
@@ -55,6 +62,7 @@ describe('MRWidget approvals', () => {
   let wrapper;
   let service;
   let mr;
+  let pinia;
 
   const createComponent = (props = {}, response = approvedByCurrentUser) => {
     const mockedSubscription = createMockApolloSubscription();
@@ -86,6 +94,7 @@ describe('MRWidget approvals', () => {
         service,
         ...props,
       },
+      pinia,
       stubs: {
         GlSprintf,
       },
@@ -129,6 +138,17 @@ describe('MRWidget approvals', () => {
       iid: '1',
     };
 
+    pinia = createTestingPinia({
+      plugins: [globalAccessorPlugin],
+    });
+    useLegacyDiffs().projectPath = 'gitlab-org/gitlab';
+    useNotes().noteableData.id = 1;
+    useNotes().noteableData.preview_note_path = '/preview';
+    useNotes().noteableData.noteableType = 'merge_request';
+    useNotes().notesData.markdownDocsPath = '/markdown/docs';
+    useNotes().notesData.quickActionsDocsPath = '/quickactions/docs';
+    useBatchComments();
+
     jest.spyOn(eventHub, '$emit').mockImplementation(() => {});
 
     gon.current_user_id = getIdFromGraphQLId(
@@ -273,6 +293,7 @@ describe('MRWidget approvals', () => {
               jest
                 .spyOn(service, 'approveMergeRequestWithAuth')
                 .mockRejectedValue({ response: { status: HTTP_STATUS_UNAUTHORIZED } });
+
               findApprovalsAuth().vm.$emit('approve', TEST_PASSWORD);
             });
 
diff --git a/spec/frontend/vue_merge_request_widget/components/approvals/approvals_spec.js b/spec/frontend/vue_merge_request_widget/components/approvals/approvals_spec.js
index 166534b627f13f649d893c4436c46ba0d8279a3a..be96f44cc83802a053b3b1d6d130ee68f0b64f6d 100644
--- a/spec/frontend/vue_merge_request_widget/components/approvals/approvals_spec.js
+++ b/spec/frontend/vue_merge_request_widget/components/approvals/approvals_spec.js
@@ -1,12 +1,15 @@
 import Vue, { nextTick } from 'vue';
 import VueApollo from 'vue-apollo';
 import { GlButton, GlSprintf } from '@gitlab/ui';
+import { createTestingPinia } from '@pinia/testing';
+import { PiniaVuePlugin } from 'pinia';
 import { createMockSubscription as createMockApolloSubscription } from 'mock-apollo-client';
 import approvedByCurrentUser from 'test_fixtures/graphql/merge_requests/approvals/approvals.query.graphql.json';
 import { shallowMountExtended } from 'helpers/vue_test_utils_helper';
 import createMockApollo from 'helpers/mock_apollo_helper';
 import { stubComponent } from 'helpers/stub_component';
 import waitForPromises from 'helpers/wait_for_promises';
+import { globalAccessorPlugin } from '~/pinia/plugins';
 import { getIdFromGraphQLId } from '~/graphql_shared/utils';
 import { createAlert } from '~/alert';
 import Approvals from '~/vue_merge_request_widget/components/approvals/approvals.vue';
@@ -18,9 +21,13 @@ import {
 import eventHub from '~/vue_merge_request_widget/event_hub';
 import approvedByQuery from 'ee_else_ce/vue_merge_request_widget/components/approvals/queries/approvals.query.graphql';
 import approvedBySubscription from 'ee_else_ce/vue_merge_request_widget/components/approvals/queries/approvals.subscription.graphql';
+import { useLegacyDiffs } from '~/diffs/stores/legacy_diffs';
+import { useNotes } from '~/notes/store/legacy_notes';
+import { useBatchComments } from '~/batch_comments/store';
 import { createCanApproveResponse } from 'jest/approvals/mock_data';
 
 Vue.use(VueApollo);
+Vue.use(PiniaVuePlugin);
 
 const mockAlertDismiss = jest.fn();
 jest.mock('~/alert', () => ({
@@ -47,6 +54,7 @@ describe('MRWidget approvals', () => {
   let wrapper;
   let service;
   let mr;
+  let pinia;
   const submitSpy = jest.fn().mockImplementation((e) => {
     e.preventDefault();
   });
@@ -73,6 +81,7 @@ describe('MRWidget approvals', () => {
         ...options.props,
       },
       provide,
+      pinia,
       stubs: {
         GlSprintf,
         GlForm: {
@@ -127,6 +136,16 @@ describe('MRWidget approvals', () => {
       iid: '1',
       requireSamlAuthToApprove: false,
     };
+    pinia = createTestingPinia({
+      plugins: [globalAccessorPlugin],
+    });
+    useLegacyDiffs().projectPath = 'gitlab-org/gitlab';
+    useNotes().noteableData.id = 1;
+    useNotes().noteableData.preview_note_path = '/preview';
+    useNotes().noteableData.noteableType = 'merge_request';
+    useNotes().notesData.markdownDocsPath = '/markdown/docs';
+    useNotes().notesData.quickActionsDocsPath = '/quickactions/docs';
+    useBatchComments();
 
     jest.spyOn(eventHub, '$emit').mockImplementation(() => {});