Remove approvals when in empty MR widget state

Fix https://gitlab.com/gitlab-org/gitlab-ce/issues/39009

app/assets/javascripts/vue_merge_request_widget/mr_widget_options.js

@@ -61,7 +61,7 @@ export default {
       return this.mr.hasCI;
     },
     shouldRenderRelatedLinks() {
-      return this.mr.relatedLinks;
+      return !!this.mr.relatedLinks;
     },
     shouldRenderDeployments() {
       return this.mr.deployments.length;

changelogs/unreleased-ee/ee-39009-fix-approvals-showing-up-in-empty-mr-widget.yml

+---
+title: Hide Approvals section when Merge Request Widget is showing the empty state
+merge_request: 3376
+author:
+type: fixed

ee/app/assets/javascripts/vue_merge_request_widget/mr_widget_options.js

@@ -14,7 +14,7 @@ export default {
   },
   computed: {
     shouldRenderApprovals() {
-      return this.mr.approvalsRequired;
+      return this.mr.approvalsRequired && this.mr.state !== 'nothingToMerge';
     },
     shouldRenderCodeQuality() {
       const { codeclimate } = this.mr;
@@ -35,7 +35,7 @@ export default {
         :mr="mr"
         :service="service" />
       <mr-widget-approvals
-        v-if="mr.approvalsRequired"
+        v-if="shouldRenderApprovals"
         :mr="mr"
         :service="service" />
       <mr-widget-code-quality

ee/app/assets/javascripts/vue_merge_request_widget/stores/mr_widget_store.js

@@ -38,7 +38,7 @@ export default class MergeRequestStore extends CEMergeRequestStore {
     this.isApproved = this.isApproved || false;
     this.approvals = this.approvals || null;
     this.approvalsPath = data.approvals_path || this.approvalsPath;
-    this.approvalsRequired = Boolean(this.approvalsPath);
+    this.approvalsRequired = data.approvalsRequired || Boolean(this.approvalsPath);
   }
 
   setApprovals(data) {
@@ -91,4 +91,3 @@ export default class MergeRequestStore extends CEMergeRequestStore {
     });
   }
 }
-

spec/javascripts/vue_mr_widget/ee_mr_widget_options_spec.js

+import Vue from 'vue';
+import mrWidgetOptionsEE from 'ee/vue_merge_request_widget/mr_widget_options';
+import mockData from './mock_data';
+import mountComponent from '../helpers/vue_mount_component_helper';
+
+describe('EE mrWidgetOptions', () => {
+  let vm;
+  let MrWidgetOptions;
+
+  beforeEach(() => {
+    // Prevent component mounting
+    delete mrWidgetOptionsEE.extends.el;
+
+    MrWidgetOptions = Vue.extend(mrWidgetOptionsEE);
+  });
+
+  afterEach(() => {
+    vm.$destroy();
+  });
+
+  describe('computed', () => {
+    describe('shouldRenderApprovals', () => {
+      it('should return false when no approvals', () => {
+        vm = mountComponent(MrWidgetOptions, {
+          mrData: {
+            ...mockData,
+            approvalsRequired: false,
+          },
+        });
+        vm.mr.state = 'readyToMerge';
+
+        expect(vm.shouldRenderApprovals).toBeFalsy();
+      });
+
+      it('should return false when in empty state', () => {
+        vm = mountComponent(MrWidgetOptions, {
+          mrData: {
+            ...mockData,
+            approvalsRequired: true,
+          },
+        });
+        vm.mr.state = 'nothingToMerge';
+
+        expect(vm.shouldRenderApprovals).toBeFalsy();
+      });
+
+      it('should return true when requiring approvals and in non-empty state', () => {
+        vm = mountComponent(MrWidgetOptions, {
+          mrData: {
+            ...mockData,
+            approvalsRequired: true,
+          },
+        });
+        vm.mr.state = 'readyToMerge';
+
+        expect(vm.shouldRenderApprovals).toBeTruthy();
+      });
+    });
+  });
+});

spec/javascripts/vue_mr_widget/mr_widget_options_spec.js

@@ -3,13 +3,7 @@ import mrWidgetOptions from '~/vue_merge_request_widget/mr_widget_options';
 import eventHub from '~/vue_merge_request_widget/event_hub';
 import notify from '~/lib/utils/notify';
 import mockData from './mock_data';
-
-const createComponent = () => {
-  delete mrWidgetOptions.el; // Prevent component mounting
-  gl.mrWidgetData = mockData;
-  const Component = Vue.extend(mrWidgetOptions);
-  return new Component();
-};
+import mountComponent from '../helpers/vue_mount_component_helper';
 
 const returnPromise = data => new Promise((resolve) => {
   resolve({
@@ -22,9 +16,16 @@ const returnPromise = data => new Promise((resolve) => {
 
 describe('mrWidgetOptions', () => {
   let vm;
+  let MrWidgetOptions;
 
   beforeEach(() => {
-    vm = createComponent();
+    // Prevent component mounting
+    delete mrWidgetOptions.el;
+
+    MrWidgetOptions = Vue.extend(mrWidgetOptions);
+    vm = mountComponent(MrWidgetOptions, {
+      mrData: { ...mockData },
+    });
   });
 
   describe('data', () => {
@@ -77,7 +78,8 @@ describe('mrWidgetOptions', () => {
       });
 
       it('should return true if there is relatedLinks in MR', () => {
-        vm.mr.relatedLinks = {};
+        Vue.set(vm.mr, 'relatedLinks', {});
+
         expect(vm.shouldRenderRelatedLinks).toBeTruthy();
       });
     });