Merge branch 'add-user-avatar-username-link' into 'master'

Add configurable option to display username in user avatar link component

See merge request gitlab-org/gitlab-ce!14902

2 files changed, 65 insertions, 3 deletions

diff --git a/app/assets/javascripts/vue_shared/components/user_avatar/user_avatar_link.vue b/app/assets/javascripts/vue_shared/components/user_avatar/user_avatar_link.vue
index 95898d54cf7..dc32e783258 100644
--- a/app/assets/javascripts/vue_shared/components/user_avatar/user_avatar_link.vue
+++ b/app/assets/javascripts/vue_shared/components/user_avatar/user_avatar_link.vue
@@ -12,12 +12,14 @@
     :img-alt="tooltipText"
     :img-size="20"
     :tooltip-text="tooltipText"
-    tooltip-placement="top"
+    :tooltip-placement="top"
+    :username="username"
   />
 
 */
 
 import userAvatarImage from './user_avatar_image.vue';
+import tooltip from '../../directives/tooltip';
 
 export default {
   name: 'UserAvatarLink',
@@ -60,6 +62,22 @@ export default {
       required: false,
       default: 'top',
     },
+    username: {
+      type: String,
+      required: false,
+      default: '',
+    },
+  },
+  computed: {
+    shouldShowUsername() {
+      return this.username.length > 0;
+    },
+    avatarTooltipText() {
+      return this.shouldShowUsername ? '' : this.tooltipText;
+    },
+  },
+  directives: {
+    tooltip,
   },
 };
 </script>
@@ -73,8 +91,13 @@ export default {
       :img-alt="imgAlt"
       :css-classes="imgCssClasses"
       :size="imgSize"
-      :tooltip-text="tooltipText"
+      :tooltip-text="avatarTooltipText"
+      :tooltip-placement="tooltipPlacement"
+    /><span
+      v-if="shouldShowUsername"
+      v-tooltip
+      :title="tooltipText"
       :tooltip-placement="tooltipPlacement"
-    />
+    >{{username}}</span>
   </a>
 </template>
diff --git a/spec/javascripts/vue_shared/components/user_avatar/user_avatar_link_spec.js b/spec/javascripts/vue_shared/components/user_avatar/user_avatar_link_spec.js
index 52e450e9ba5..8450ad9dbcb 100644
--- a/spec/javascripts/vue_shared/components/user_avatar/user_avatar_link_spec.js
+++ b/spec/javascripts/vue_shared/components/user_avatar/user_avatar_link_spec.js
@@ -11,6 +11,7 @@ describe('User Avatar Link Component', function () {
       imgCssClasses: 'myextraavatarclass',
       tooltipText: 'tooltip text',
       tooltipPlacement: 'bottom',
+      username: 'username',
     };
 
     const UserAvatarLinkComponent = Vue.extend(UserAvatarLink);
@@ -47,4 +48,42 @@ describe('User Avatar Link Component', function () {
       expect(this.userAvatarLink[key]).toBeDefined();
     });
   });
+
+  describe('no username', function () {
+    beforeEach(function (done) {
+      this.userAvatarLink.username = '';
+
+      Vue.nextTick(done);
+    });
+
+    it('should only render image tag in link', function () {
+      const childElements = this.userAvatarLink.$el.childNodes;
+      expect(childElements[0].tagName).toBe('IMG');
+
+      // Vue will render the hidden component as <!---->
+      expect(childElements[1].tagName).toBeUndefined();
+    });
+
+    it('should render avatar image tooltip', function () {
+      expect(this.userAvatarLink.$el.querySelector('img').dataset.originalTitle).toEqual(this.propsData.tooltipText);
+    });
+  });
+
+  describe('username', function () {
+    it('should not render avatar image tooltip', function () {
+      expect(this.userAvatarLink.$el.querySelector('img').dataset.originalTitle).toEqual('');
+    });
+
+    it('should render username prop in <span>', function () {
+      expect(this.userAvatarLink.$el.querySelector('span').innerText.trim()).toEqual(this.propsData.username);
+    });
+
+    it('should render text tooltip for <span>', function () {
+      expect(this.userAvatarLink.$el.querySelector('span').dataset.originalTitle).toEqual(this.propsData.tooltipText);
+    });
+
+    it('should render text tooltip placement for <span>', function () {
+      expect(this.userAvatarLink.$el.querySelector('span').getAttribute('tooltip-placement')).toEqual(this.propsData.tooltipPlacement);
+    });
+  });
 });