Remove unneeded code upon UX spec change.

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

@@ -12,10 +12,8 @@
       },
       approverNamesStringified() {
         const approvers = this.suggestedApprovers;
-        if (approvers.length === 1) {
-          return approvers[0].name;
-        } else {
-          return approvers.reduce((memo, curr, index) => {
+        return approvers.length === 1 ? approvers[0].name :
+          approvers.reduce((memo, curr, index) => {
             const nextMemo = `${memo}${curr.name}`;
 
             if (index === approvers.length - 2) { // second to last index
@@ -27,25 +25,18 @@
             return `${nextMemo}, `;
           }, '');
         }
-        return null;
       },
       showApproveButton() {
         return this.userCanApprove && !this.userHasApproved;
       },
-      showApprovalsBody() {
-        return !this.widgetLoading;
-      }
     },
     methods: {
       approveMergeRequest() {
         return gl.ApprovalsStore.approve();
       },
     },
-    beforeCreate() {
-      gl.ApprovalsStore.initStoreOnce();
-    },
     template: `
-      <div class='approvals-body mr-widget-body' v-if='showApprovalsBody'>
+      <div class='approvals-body mr-widget-body'>
         <h4> Requires {{ approvalsRequiredStringified }}
           <span v-if='!!suggestedApprovers.length'> (from {{ approverNamesStringified }}) </span>
         </h4>

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

@@ -5,11 +5,6 @@
   Vue.component('approvals-footer', {
     name: 'approvals-footer',
     props: ['userCanApprove', 'userHasApproved', 'approvedBy', 'approvalsLeft', 'pendingAvatarSvg', 'checkmarkSvg'],
-    data() {
-      return {
-        loaded: false,
-      };
-    },
     computed: {
       hasApprovers() {
         return this.approvedBy && this.approvedBy.length;
@@ -23,20 +18,14 @@
         gl.ApprovalsStore.unapprove();
       },
     },
-    beforeCreate() {
-      gl.ApprovalsStore.initStoreOnce().then(() => {
-        this.loaded = true;
-      });
-    },
     template: `
-      <div v-if='loaded' class='mr-widget-footer approved-by-users approvals-footer clearfix'>
+      <div class='mr-widget-footer approved-by-users approvals-footer clearfix'>
         <span class='approvers-prefix'> Approved by </span>
         <span v-for='approver in approvedBy'>
           <link-to-member-avatar
             extra-link-class='approver-avatar'
             :avatar-url='approver.user.avatar_url'
             :display-name='approver.user.name'
-            :username='approver.user.username'
             :profile-url='approver.user.web_url'
             :avatar-html='checkmarkSvg'
             :show-tooltip='true'>

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

@@ -15,56 +15,29 @@
     init(rootStore) {
       this.rootStore = rootStore;
       this.api = new gl.ApprovalsApi(rootStore.dataset.endpoint);
-      this.state = {
-        loading: false,
-      };
-    }
-
-    initStoreOnce() {
-      const state = this.state;
-      if (!state.loading) {
-        state.loading = true;
-        return this.fetch()
-          .then(() => {
-            state.loading = false;
-            this.assignToRootStore(false, 'loading');
-          })
-          .catch((err) => {
-            console.error(`Failed to initialize approvals store: ${err}`);
-          });
-      }
-      return Promise.resolve();
     }
 
     fetch() {
       return this.api.fetchApprovals()
-        .then(res => this.assignToRootStore(res.data));
+        .then(res => this.assignToRootStore('approvals', res.data));
     }
 
     approve() {
       return this.api.approveMergeRequest()
-        .then(res => this.assignToRootStore(res.data))
+        .then(res => this.assignToRootStore('approvals', res.data))
         .then(data => this.maybeHideWidgetBody(data.approvals_left));
     }
 
     unapprove() {
       return this.api.unapproveMergeRequest()
-        .then(res => this.assignToRootStore(res.data))
+        .then(res => this.assignToRootStore('approvals', res.data))
         .then(data => this.maybeHideWidgetBody(data.approvals_left));
     }
 
-    assignToRootStore(data, key = 'approvals') {
+    assignToRootStore(key, data) {
       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

@@ -34,7 +34,7 @@
 
     assignToData(key, val) {
       this.data[key] = val;
-      return this.data[key];
+      return val;
     }
   }
   gl.MergeRequestWidgetStore = MergeRequestWidgetStore;

app/assets/javascripts/vue_common_component/link_to_member_avatar.js.es6

-/* Analogue of link_to_member_avatar in app/helpers/projects_helper.rb
-  TODO: Support gravatar link generation, adding name text, username text
-  TODO: 1:1 configuration compared to link_to_member_avatar
-  TODO: Backport to CE
-*/
+// Analogue of link_to_member_avatar in app/helpers/projects_helper.rb
+
 (() => {
   Vue.component('link-to-member-avatar', {
     props: {
       avatarUrl: {
         type: String,
-        required: false
+        required: true,
       },
-      username: {
+      profileUrl: {
         type: String,
         required: false,
+        default: '',
       },
       displayName: {
         type: String,
@@ -33,11 +31,6 @@
         required: false,
         default: false,
       },
-      size: {
-        type: Number,
-        default: 32,
-        required: false
-      },
       nonUser: {
         type: Boolean,
         default: false,
@@ -50,6 +43,11 @@
       avatarHtml: {
         type: String,
         required: false,
+      },
+      size: {
+        type: Number,
+        required: false,
+        default: 32,
       }
     },
     data() {
@@ -60,7 +58,7 @@
     },
     computed: {
       avatarSizeClass() {
-        return `s${this.size}`;
+        return `s{this.avatarSizeClass}`;
       },
       avatarHtmlClass() {
         return `${this.avatarSizeClass} ${this.defaultAvatarClass}`;
@@ -68,9 +66,6 @@
       avatarElemId() {
         return this.username ? `${this.username}-avatar-link` : 'non-user-avatar-link';
       },
-      userProfileUrl() {
-        return this.nonUser || !this.username ? '' : `/${this.username}`;
-      },
       preppedAvatarUrl() {
         return this.avatarUrl || this.noAvatarUrl;
       },
@@ -90,14 +85,9 @@
         return this.tooltipContainer || `#${this.avatarElemId}`;
       },
     },
-    methods: {
-      pixelizeValue(size) {
-        return size + 'px';
-      },
-    },
     template: `
       <div class='link-to-member-avatar' :id='avatarElemId'>
-        <a :href='userProfileUrl' :class='linkClass' :data-original-title='displayName' :data-container='tooltipContainerAttr'>
+        <a :href='profileUrl' :class='linkClass' :data-original-title='displayName' :data-container='tooltipContainerAttr'>
           <svg v-if='avatarHtml' v-html='avatarHtml' :class='avatarHtmlClass' :width='size' :height='size' :alt='displayName'></svg>
           <img :class='avatarClass' :src='preppedAvatarUrl' :width='size' :height='size' :alt='displayName'/>
         </a>

app/assets/stylesheets/pages/merge_requests.scss

@@ -468,7 +468,7 @@
     padding-left: 15px;
     margin-left: 10px;
     &:hover {
-      color: lighten($gl-gray, 10%);
+      color: $btn-gray-light;
     }
   }
 

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

@@ -4,6 +4,13 @@
 #merge-request-widget-app.mr-state-widget{ 'data-endpoint'=> merge_request_path(@merge_request) }
   = render 'projects/merge_requests/widget/heading'
   .mr-widget-body
+    - if @merge_request.requires_approve?
+      .loading{ 'v-show' => 'loading' }
+        = icon('spinner spin')
+      = render 'projects/merge_requests/widget/open/approvals_body'
+      = render 'projects/merge_requests/widget/open/approvals_footer'
+
+
     -# 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.
@@ -48,8 +55,3 @@
           != markdown issues_sentence(mr_closes_issues), pipeline: :gfm, author: @merge_request.author
         = 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'
-
-

app/views/projects/merge_requests/widget/open/_approvals_body.html.haml

-.loading{ 'v-show' => 'loading' }
-  = icon('spinner spin')
 %approvals-body{':user-can-approve' => 'approvals.user_can_approve', ':user-has-approved' => 'approvals.user_has_approved', ':approved-by' => 'approvals.approved_by', ':approvals-left':'approvals.approvals_left', ':suggested-approvers' => 'approvals.suggested_approvers', ':widget-loading' => 'loading'}

spec/javascripts/approvals/approvals_body_spec.js.es6

@@ -3,9 +3,6 @@
 //= require jquery
 //= require merge_request_widget/approvals/components/approvals_body
 
-
-//                  - showapprovebutton
-//
 (() => {
   gl.ApprovalsStore = {
     data: {},
@@ -38,7 +35,6 @@
     this.approvalsBody = new ApprovalsBodyComponent({
       el: '#mock-container',
       propsData: this.initialData,
-      beforeCreate() {},
     });
   }
 

spec/javascripts/vue_common_components/link_to_member_avatar_spec.js.es6

@@ -46,7 +46,6 @@
         });
 
         it('should correctly compute computed values', function() {
-          // disabledclass, avatarClass, tooltipClass, userProfileUrl, preppedAvatarUrl, linkClass, tooltipClass
           const correctVals = {
             'disabledClass': 'disabled',
             'avatarClass': 'avatar avatar-inline s48 ',
@@ -81,7 +80,6 @@
         });
 
         it('should correctly compute computed values', function(done) {
-          // disabledclass, avatarClass, tooltipClass, userProfileUrl, preppedAvatarUrl, linkClass, tooltipClass
           const correctVals = {
             'disabledClass': '',
             'avatarClass': 'avatar avatar-inline s48 ',
@@ -100,16 +98,5 @@
         });
       });
     });
-
-    describe('Interaction', function() {
-      it('should remove approval', function() {
-
-    });
-      it('should give approval', function() {
-
-      });
-     //  click link and handler fires
-    });
-
   });
 })(window.gl || (window.gl = {}));