Truncated user list in award emoji tooltips

CHANGELOG

@@ -76,6 +76,7 @@ v 8.11.0 (unreleased)
   - Remove `search_id` of labels dropdown filter to fix 'Missleading URI for labels in Merge Requests and Issues view'. !5368 (Scott Le)
   - Load project invited groups and members eagerly in `ProjectTeam#fetch_members`
   - Add pipeline events hook
+  - Award emoji tooltips containing more than 10 usernames are now truncated !4780 (jlogandavison)
   - Bump gitlab_git to speedup DiffCollection iterations
   - Rewrite description of a blocked user in admin settings. (Elias Werberich)
   - Make branches sortable without push permission !5462 (winniehell)

app/assets/javascripts/awards_handler.js

@@ -223,7 +223,7 @@
       if (origTitle) {
         users = origTitle.trim().split(', ');
       }
-      users.push('me');
+      users.unshift('me');
       awardBlock.attr('title', users.join(', '));
       return this.resetTooltip(awardBlock);
     };

app/helpers/issues_helper.rb

@@ -114,9 +114,13 @@ module IssuesHelper
   end
 
   def award_user_list(awards, current_user)
-    awards.map do |award|
+    names = awards.first(10).map do |award|
       award.user == current_user ? 'me' : award.user.name
-    end.join(', ')
+    end
+
+    names << "and #{awards.size - names.size} more." if awards.size > names.size
+
+    names.join(', ')
   end
 
   def award_active_class(awards, current_user)

spec/helpers/issues_helper_spec.rb

@@ -62,6 +62,22 @@ describe IssuesHelper do
     it { is_expected.to eq("!1, !2, or !3") }
   end
 
+  describe '#award_user_list' do
+    let!(:awards) { build_list(:award_emoji, 15) }
+
+    it "returns a comma seperated list of 1-10 users" do
+      expect(award_user_list(awards.first(10), nil)).to eq(awards.first(10).map { |a| a.user.name }.join(', '))
+    end
+
+    it "displays the current user's name as 'me'" do
+      expect(award_user_list(awards.first(1), awards[0].user)).to eq('me')
+    end
+
+    it "truncates lists of larger than 10 users" do
+      expect(award_user_list(awards, nil)).to eq(awards.first(10).map { |a| a.user.name }.join(', ') + ", and 5 more.")
+    end
+  end
+
   describe '#award_active_class' do
     let!(:upvote) { create(:award_emoji) }
 

spec/javascripts/awards_handler_spec.js

@@ -143,6 +143,31 @@
         return expect($votesBlock.find('[data-emoji=fire]').length).toBe(0);
       });
     });
+    describe('::addMeToUserList', function() {
+      return it('should prepend "me" to the award tooltip', function() {
+        var $thumbsUpEmoji, $votesBlock, awardUrl;
+        awardUrl = awardsHandler.getAwardUrl();
+        $votesBlock = $('.js-awards-block').eq(0);
+        $thumbsUpEmoji = $votesBlock.find('[data-emoji=thumbsup]').parent();
+        $thumbsUpEmoji.attr('data-title', 'sam, jerry, max, andy');
+        awardsHandler.addAward($votesBlock, awardUrl, 'thumbsup', false);
+        $thumbsUpEmoji.tooltip();
+        return expect($thumbsUpEmoji.data("original-title")).toBe('me, sam, jerry, max, andy');
+      });
+    });
+    describe('::removeMeToUserList', function() {
+      return it('removes "me" from the front of the tooltip', function() {
+        var $thumbsUpEmoji, $votesBlock, awardUrl;
+        awardUrl = awardsHandler.getAwardUrl();
+        $votesBlock = $('.js-awards-block').eq(0);
+        $thumbsUpEmoji = $votesBlock.find('[data-emoji=thumbsup]').parent();
+        $thumbsUpEmoji.attr('data-title', 'me, sam, jerry, max, andy');
+        $thumbsUpEmoji.addClass('active');
+        awardsHandler.addAward($votesBlock, awardUrl, 'thumbsup', false);
+        $thumbsUpEmoji.tooltip();
+        return expect($thumbsUpEmoji.data("original-title")).toBe('sam, jerry, max, andy');
+      });
+    });
     describe('search', function() {
       return it('should filter the emoji', function() {
         $('.js-add-award').eq(0).click();