Simplify state between components on pageload.

app/assets/javascripts/merge_request_widget/approvals/components/approvals_body.js.es6

@@ -33,7 +33,7 @@
         return this.userCanApprove && !this.userHasApproved;
       },
       showApprovalsBody() {
-        return !this.widgetLoading && this.approvalsLeft && this.suggestedApprovers.length;
+        return !this.widgetLoading;
       }
     },
     methods: {
@@ -45,8 +45,10 @@
       gl.ApprovalsStore.initStoreOnce();
     },
     template: `
-      <div class='approvals-body' v-if='showApprovalsBody'>
-        <h4> Requires {{ approvalsRequiredStringified }} (from {{ approverNamesStringified }})</h4>
+      <div class='approvals-body mr-widget-body' v-if='showApprovalsBody'>
+        <h4> Requires {{ approvalsRequiredStringified }}
+          <span v-if='!!suggestedApprovers.length'> (from {{ approverNamesStringified }}) </span>
+        </h4>
         <div v-if='showApproveButton' class='append-bottom-10'>
           <button
             @click='approveMergeRequest'

app/assets/stylesheets/pages/merge_requests.scss

@@ -93,6 +93,10 @@
     display: inline-block;
   }
 
+  .mr-widget-body ~ .mr-widget-body {
+    border-top: 1px solid $well-inner-border;
+  }
+
   .mr-widget-body {
     h4 {
       font-weight: 600;
@@ -104,7 +108,6 @@
         color: $gl-warning;
       }
     }
-
     p:last-child {
       margin-bottom: 0;
     }

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{'v-show' => 'showWidgetBody' }
+  .mr-widget-body
     -# 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,8 +26,6 @@
       = 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? && !@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'
     - elsif !@merge_request.can_be_merged_by?(current_user)
@@ -51,6 +49,7 @@
         = mr_assign_issues_link
 
   - if @merge_request.requires_approve?
+    = render 'projects/merge_requests/widget/open/approvals_body'
     = render 'projects/merge_requests/widget/open/approvals_footer'