Hide widget body on approved status change.

app/assets/javascripts/merge_request_widget/approvals/stores/approvals_store.js.es6

@@ -20,10 +20,6 @@
       };
     }
 
-    assignToRootStore(data, key = 'approvals') {
-      return this.rootStore.assignToData(key, data);
-    }
-
     initStoreOnce() {
       const state = this.state;
       if (!state.loading) {
@@ -47,13 +43,26 @@
 
     approve() {
       return this.api.approveMergeRequest()
-        .then(res => this.assignToRootStore(res.data));
+        .then(res => this.assignToRootStore(res.data))
+        .then(data => this.maybeHideWidgetBody(data.approvals_left));
     }
 
     unapprove() {
       return this.api.unapproveMergeRequest()
-        .then(res => this.assignToRootStore(res.data));
+        .then(res => this.assignToRootStore(res.data))
+        .then(data => this.maybeHideWidgetBody(data.approvals_left));
+    }
+
+    assignToRootStore(data, key = 'approvals') {
+      return this.rootStore.assignToData(key, data);
     }
+
+    maybeHideWidgetBody(approvalsLeft) {
+      if (!approvalsLeft) {
+        this.assignToRootStore(false, 'showWidgetBody');
+      }
+    }
+
   }
 
   gl.ApprovalsStore = ApprovalsStore;

app/assets/javascripts/merge_request_widget/widget_store.js.es6

@@ -24,6 +24,7 @@
 
     initState() {
       this.assignToData('loading', true);
+      this.assignToData('showWidgetBody', true);
     }
 
     initApprovals() {

app/views/projects/merge_requests/widget/_open.html.haml

@@ -3,7 +3,7 @@
 
 #merge-request-widget-app.mr-state-widget{ 'data-endpoint'=> merge_request_path(@merge_request) }
   = render 'projects/merge_requests/widget/heading'
-  .mr-widget-body
+  .mr-widget-body{'v-show' => 'showWidgetBody' }
     -# After conflicts are resolved, the user is redirected back to the MR page.
     -# There is a short window before background workers run and GitLab processes
     -# the new push and commits, during which it will think the conflicts still exist.
@@ -26,7 +26,7 @@
       = render 'projects/merge_requests/widget/open/conflicts'
     - elsif @merge_request.work_in_progress?
       = render 'projects/merge_requests/widget/open/wip'
-    - elsif @merge_request.requires_approve?
+    - elsif @merge_request.requires_approve? && !@merge_request.approved?
       = render 'projects/merge_requests/widget/open/approvals_body'
     - elsif @merge_request.merge_when_build_succeeds?
       = render 'projects/merge_requests/widget/open/merge_when_build_succeeds'