From 925c1246984a33b4c408848298dc544757656499 Mon Sep 17 00:00:00 2001
From: Thomas Randolph <trandolph@gitlab.com>
Date: Tue, 12 Oct 2021 14:32:24 -0600
Subject: [PATCH] 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
---
 .../reviewers/reviewer_avatar_link.vue        |  2 +-
 .../reviewers/uncollapsed_reviewer_list.vue   |  5 ++++-
 .../uncollapsed_reviewer_list_spec.js         | 20 ++++++++++++++-----
 3 files changed, 20 insertions(+), 7 deletions(-)

diff --git a/app/assets/javascripts/sidebar/components/reviewers/reviewer_avatar_link.vue b/app/assets/javascripts/sidebar/components/reviewers/reviewer_avatar_link.vue
index 87780888c2fa5b..361a082def62ee 100644
--- a/app/assets/javascripts/sidebar/components/reviewers/reviewer_avatar_link.vue
+++ b/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>
diff --git a/app/assets/javascripts/sidebar/components/reviewers/uncollapsed_reviewer_list.vue b/app/assets/javascripts/sidebar/components/reviewers/uncollapsed_reviewer_list.vue
index c6fef86c6ff69f..2922008cfb2129 100644
--- a/app/assets/javascripts/sidebar/components/reviewers/uncollapsed_reviewer_list.vue
+++ b/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"
diff --git a/spec/frontend/sidebar/components/reviewers/uncollapsed_reviewer_list_spec.js b/spec/frontend/sidebar/components/reviewers/uncollapsed_reviewer_list_spec.js
index 9f6878db7854d9..6b80224083aac1 100644
--- a/spec/frontend/sidebar/components/reviewers/uncollapsed_reviewer_list_spec.js
+++ b/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`);
     });
 
-- 
GitLab