Merge branch 'tor/feature/reviewer-full-names' into 'master'

Add Reviewer name to sidebar Reviewers list

See merge request gitlab-org/gitlab!72244

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`);
     });