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 5a304d083485223ce262988ada6033a8685e3eb5..da059e2b29f2c853709e36e9f2f1e7711fa2e2e7 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
@@ -61,6 +61,11 @@ export default {
       required: false,
       default: false,
     },
+    hasAllApprovals: {
+      type: Boolean,
+      required: false,
+      default: false,
+    },
   },
   data() {
     return {
@@ -73,7 +78,7 @@ export default {
       return this.mr.approvalsWidgetType === 'base';
     },
     isApproved() {
-      return Boolean(this.approvals.approved || this.approvedBy.length);
+      return this.hasAllApprovals;
     },
     isOptional() {
       return this.isOptionalDefault !== null ? this.isOptionalDefault : !this.approvedBy.length;
diff --git a/ee/app/assets/javascripts/vue_merge_request_widget/components/approvals/approvals.vue b/ee/app/assets/javascripts/vue_merge_request_widget/components/approvals/approvals.vue
index def27cc0e99dbd6052797325f8b6073b5abcd4bf..ab621267a22837c7bc8289934dfd744a873a48be 100644
--- a/ee/app/assets/javascripts/vue_merge_request_widget/components/approvals/approvals.vue
+++ b/ee/app/assets/javascripts/vue_merge_request_widget/components/approvals/approvals.vue
@@ -47,6 +47,9 @@ export default {
     requirePasswordToApprove() {
       return !this.isBasic && this.mr.requirePasswordToApprove;
     },
+    hasAllApprovals() {
+      return (this.approvals.approvalsLeft || 0) === 0;
+    },
   },
   methods: {
     toggleCollapsed() {
@@ -63,6 +66,7 @@ export default {
     :require-password-to-approve="requirePasswordToApprove"
     :modal-id="modalId"
     :collapsed="collapsed"
+    :has-all-approvals="hasAllApprovals"
     @toggle="toggleCollapsed"
   >
     <template v-if="!isBasic" #default="{ isApproving, approveWithAuth, hasApprovalAuthError }">
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 cafe2b1ef7c4057e0572dcabbbda3b6e5a085306..5d266916394f7544d476ab38ae1a2f54bedb0bb2 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
@@ -122,6 +122,75 @@ describe('MRWidget approvals', () => {
         canApproveResponse = createCanApproveResponse();
       });
 
+      describe('with approvers, with SAML auth requried for approval', () => {
+        beforeEach(async () => {
+          canApproveResponse.data.project.mergeRequest.approvedBy.nodes =
+            approvedByCurrentUser.data.project.mergeRequest.approvedBy.nodes;
+          canApproveResponse.data.project.mergeRequest.approvedBy.nodes[0].id = 69;
+
+          mr.requireSamlAuthToApprove = true;
+
+          createComponent({}, canApproveResponse);
+          await waitForPromises();
+        });
+
+        it('approve additionally action is rendered with correct text', () => {
+          expect(findActionData()).toEqual({
+            variant: 'confirm',
+            text: 'Approve additionally with SAML',
+            category: 'secondary',
+          });
+        });
+      });
+
+      describe('with approvers', () => {
+        beforeEach(async () => {
+          canApproveResponse.data.project.mergeRequest.approvedBy.nodes =
+            approvedByCurrentUser.data.project.mergeRequest.approvedBy.nodes;
+
+          canApproveResponse.data.project.mergeRequest.approvedBy.nodes[0].id = 2;
+
+          createComponent({}, canApproveResponse);
+          await waitForPromises();
+        });
+
+        it('approve additionally action is rendered', () => {
+          expect(findActionData()).toEqual({
+            variant: 'confirm',
+            text: 'Approve additionally',
+            category: 'secondary',
+          });
+        });
+      });
+
+      describe('has approvals left', () => {
+        it('shows approve text', async () => {
+          const response = JSON.parse(JSON.stringify(approvedByCurrentUser));
+          response.data.project.mergeRequest.approvalsLeft = 1;
+          response.data.project.mergeRequest.userPermissions.canApprove = true;
+          gon.current_user_id = 10000000;
+
+          createComponent({}, response);
+          await waitForPromises();
+
+          expect(findAction().text()).toBe('Approve');
+        });
+      });
+
+      describe('no approvals left', () => {
+        it('shows approve additionally text', async () => {
+          const response = JSON.parse(JSON.stringify(approvedByCurrentUser));
+          response.data.project.mergeRequest.approvalsLeft = 0;
+          response.data.project.mergeRequest.userPermissions.canApprove = true;
+          gon.current_user_id = 10000000;
+
+          createComponent({}, response);
+          await waitForPromises();
+
+          expect(findAction().text()).toBe('Approve additionally');
+        });
+      });
+
       describe('and MR is approved', () => {
         beforeEach(() => {
           canApproveResponse.data.project.mergeRequest.approved = true;
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 c3ed131d6e3986c75e8c27208a32da201d7a0758..3f59f9a1f8fa7a705a9891a940d048b1e44fbf1e 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
@@ -224,45 +224,6 @@ describe('MRWidget approvals', () => {
             });
           });
         });
-
-        describe('with approvers, with SAML auth requried for approval', () => {
-          beforeEach(async () => {
-            canApproveResponse.data.project.mergeRequest.approvedBy.nodes =
-              approvedByCurrentUser.data.project.mergeRequest.approvedBy.nodes;
-            canApproveResponse.data.project.mergeRequest.approvedBy.nodes[0].id = 69;
-            mr.requireSamlAuthToApprove = true;
-            createComponent({}, { query: canApproveResponse });
-            await waitForPromises();
-          });
-
-          it('approve additionally action is rendered with correct text', () => {
-            expect(findActionData()).toEqual({
-              variant: 'confirm',
-              text: 'Approve additionally with SAML',
-              category: 'secondary',
-            });
-          });
-        });
-
-        describe('with approvers', () => {
-          beforeEach(async () => {
-            canApproveResponse.data.project.mergeRequest.approvedBy.nodes =
-              approvedByCurrentUser.data.project.mergeRequest.approvedBy.nodes;
-
-            canApproveResponse.data.project.mergeRequest.approvedBy.nodes[0].id = 2;
-
-            createComponent({}, { query: canApproveResponse });
-            await waitForPromises();
-          });
-
-          it('approve additionally action is rendered', () => {
-            expect(findActionData()).toEqual({
-              variant: 'confirm',
-              text: 'Approve additionally',
-              category: 'secondary',
-            });
-          });
-        });
       });
 
       describe('when SAML auth is required and user clicks Approve with SAML', () => {