Add Reviewer names

This commit adds sidebar reviewer names instead of only showing
their username.

For parity with the Assignees part of the sidebar, it also
increases the size of the Reviewers' avatar.

Changelog: added

app/assets/javascripts/sidebar/components/reviewers/reviewer_avatar_link.vue

@@ -77,7 +77,7 @@ export default {
   >
     <!-- use d-flex so that slot can be appropriately styled -->
     <span class="gl-display-flex gl-align-items-center">
-      <reviewer-avatar :user="user" :img-size="24" :issuable-type="issuableType" />
+      <reviewer-avatar :user="user" :img-size="32" :issuable-type="issuableType" />
       <slot :user="user"></slot>
     </span>
   </gl-link>

app/assets/javascripts/sidebar/components/reviewers/uncollapsed_reviewer_list.vue

@@ -91,7 +91,10 @@ export default {
       data-testid="reviewer"
     >
       <reviewer-avatar-link :user="user" :root-path="rootPath" :issuable-type="issuableType">
-        <div class="gl-ml-3">@{{ user.username }}</div>
+        <div class="gl-ml-3 gl-line-height-normal gl-display-grid">
+          <span>{{ user.name }}</span>
+          <span>@{{ user.username }}</span>
+        </div>
       </reviewer-avatar-link>
       <gl-icon
         v-if="user.approved"

spec/frontend/sidebar/components/reviewers/uncollapsed_reviewer_list_spec.js

@@ -26,9 +26,9 @@ describe('UncollapsedReviewerList component', () => {
   });
 
   describe('single reviewer', () => {
-    beforeEach(() => {
-      const user = userDataMock();
+    const user = userDataMock();
 
+    beforeEach(() => {
       createComponent({
         users: [user],
       });
@@ -39,6 +39,7 @@ describe('UncollapsedReviewerList component', () => {
     });
 
     it('shows one user with avatar, username and author name', () => {
+      expect(wrapper.text()).toContain(user.name);
       expect(wrapper.text()).toContain(`@root`);
     });
 
@@ -56,11 +57,18 @@ describe('UncollapsedReviewerList component', () => {
   });
 
   describe('multiple reviewers', () => {
-    beforeEach(() => {
-      const user = userDataMock();
+    const user = userDataMock();
+    const user2 = {
+      ...user,
+      id: 2,
+      name: 'nonrooty-nonrootersen',
+      username: 'hello-world',
+      approved: true,
+    };
 
+    beforeEach(() => {
       createComponent({
-        users: [user, { ...user, id: 2, username: 'hello-world', approved: true }],
+        users: [user, user2],
       });
     });
 
@@ -69,7 +77,9 @@ describe('UncollapsedReviewerList component', () => {
     });
 
     it('shows both users with avatar, username and author name', () => {
+      expect(wrapper.text()).toContain(user.name);
       expect(wrapper.text()).toContain(`@root`);
+      expect(wrapper.text()).toContain(user2.name);
       expect(wrapper.text()).toContain(`@hello-world`);
     });