Fix avatarSizeClass error and nonUser -> clickable.

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

@@ -12,6 +12,11 @@
       },
       approverNamesStringified() {
         const approvers = this.suggestedApprovers;
+
+        if (!approvers) {
+          return '';
+        }
+
         return approvers.length === 1 ? approvers[0].name :
           approvers.reduce((memo, curr, index) => {
           const nextMemo = `${memo}${curr.name}`;

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

@@ -36,7 +36,7 @@
         </span>
         <span v-for='n in approvalsLeft'>
           <link-to-member-avatar
-            :non-user='true'
+            :clickable='false'
             :avatar-html='pendingAvatarSvg'
             :show-tooltip='false'
             extra-link-class='hide-asset'>

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

@@ -32,9 +32,9 @@
         required: false,
         default: false,
       },
-      nonUser: {
+      clickable: {
         type: Boolean,
-        default: false,
+        default: true,
         required: false,
       },
       tooltipContainer: {
@@ -53,13 +53,12 @@
     },
     data() {
       return {
-        // TODO: Rename baseClass
         avatarBaseClass: 'avatar avatar-inline',
       };
     },
     computed: {
       avatarSizeClass() {
-        return `s${this.avatarSizeClass}`;
+        return `s${this.size}`;
       },
       avatarHtmlClass() {
         return `${this.avatarSizeClass} ${this.avatarBaseClass}`;
@@ -71,7 +70,7 @@
         return `${this.avatarBaseClass} ${this.avatarSizeClass} ${this.extraAvatarClass}`;
       },
       disabledClass() {
-        return this.nonUser ? 'disabled' : '';
+        return !this.clickable ? 'disabled' : '';
       },
       linkClass() {
         return `author_link ${this.tooltipClass} ${this.extraLinkClass} ${this.disabledClass}`