Merge branch 'ph/fixApprovalsButtonText' into 'master'

Fixes the approval button text

See merge request https://gitlab.com/gitlab-org/gitlab/-/merge_requests/143958



Merged-by: Kushal Pandya <kushal@gitlab.com>
Approved-by: Kushal Pandya <kushal@gitlab.com>
Co-authored-by: Phil Hughes <me@iamphill.com>

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;

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 }">

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;

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', () => {