Merge branch 'ph/15744/reorderEmojiMenu' into 'master'

Updates the gemojione ruby gem

See merge request gitlab-org/gitlab!55068

Gemfile

@@ -293,7 +293,7 @@ gem 'autoprefixer-rails', '10.2.0.0'
 gem 'terser', '1.0.2'
 
 gem 'addressable', '~> 2.7'
-gem 'gemojione', '~> 3.3'
+gem 'gemojione', '~> 4.3.3'
 gem 'gon', '~> 6.2'
 gem 'request_store', '~> 1.5'
 gem 'base32', '~> 0.3.0'

Gemfile.lock

@@ -412,7 +412,7 @@ GEM
       ruby-progressbar (~> 1.4)
     fuzzyurl (0.9.0)
     gemoji (3.0.1)
-    gemojione (3.3.0)
+    gemojione (4.3.3)
       json
     get_process_mem (0.2.5)
       ffi (~> 1.0)
@@ -1414,7 +1414,7 @@ DEPENDENCIES
   fog-rackspace (~> 0.1.1)
   fugit (~> 1.2.1)
   fuubar (~> 2.2.0)
-  gemojione (~> 3.3)
+  gemojione (~> 4.3.3)
   gettext (~> 3.3)
   gettext_i18n_rails (~> 1.8.0)
   gettext_i18n_rails_js (~> 1.3)

app/assets/javascripts/emoji/constants.js

@@ -3,10 +3,10 @@ export const FREQUENTLY_USED_COOKIE_KEY = 'frequently_used_emojis';
 
 export const CATEGORY_ICON_MAP = {
   [FREQUENTLY_USED_KEY]: 'history',
-  activity: 'dumbbell',
   people: 'smiley',
   nature: 'nature',
   food: 'food',
+  activity: 'dumbbell',
   travel: 'car',
   objects: 'object',
   symbols: 'heart',

app/assets/javascripts/emoji/index.js

@@ -8,7 +8,7 @@ let emojiMap = null;
 let validEmojiNames = null;
 export const FALLBACK_EMOJI_KEY = 'grey_question';
 
-export const EMOJI_VERSION = '1';
+export const EMOJI_VERSION = '2';
 
 const isLocalStorageAvailable = AccessorUtilities.isLocalStorageAccessSafe();
 

app/assets/javascripts/emoji/support/unicode_support_map.js

 import AccessorUtilities from '../../lib/utils/accessor';
 
-const GL_EMOJI_VERSION = '0.2.0';
+const GL_EMOJI_VERSION = '0.3.0';
 
 const unicodeSupportTestMap = {
   // man, student (emojione does not have any of these yet), http://emojipedia.org/emoji-zwj-sequences/
@@ -25,6 +25,8 @@ const unicodeSupportTestMap = {
     // angel_tone5
     '\u{1F47C}\u{1F3FF}',
   ],
+  // star_struck, http://emojipedia.org/unicode-9.0/
+  '10.0': '\u{1F929}',
   // rofl, http://emojipedia.org/unicode-9.0/
   '9.0': '\u{1F923}',
   // metal, http://emojipedia.org/unicode-8.0/

lib/gitlab/emoji.rb

@@ -8,6 +8,13 @@ module Gitlab
       Gemojione.index.instance_variable_get(:@emoji_by_name)
     end
 
+    def emojis_by_category
+      Gemojione::Categories.all.values.flatten.flat_map do |emoji|
+        tone_emojis = (1..5).map { |i| Gemojione.index.find_by_name("#{emoji['name']}_tone#{i}") }
+        [emoji] + tone_emojis.compact
+      end
+    end
+
     def emojis_by_moji
       Gemojione.index.instance_variable_get(:@emoji_by_moji)
     end

lib/tasks/gemojione.rake

 # frozen_string_literal: true
 
+EMOJI_VERSION = "2"
+
 namespace :gemojione do
   desc 'Generates Emoji SHA256 digests'
 
   task aliases: ['yarn:check', 'environment'] do
     require 'json'
 
-    aliases = {}
+    aliases = {
+      basketball_player: "man_bouncing_ball",
+      basketball_player_tone1: "man_bouncing_ball_tone1",
+      basketball_player_tone2: "man_bouncing_ball_tone2",
+      basketball_player_tone3: "man_bouncing_ball_tone3",
+      basketball_player_tone4: "man_bouncing_ball_tone4",
+      basketball_player_tone5: "man_bouncing_ball_tone5"
+    }
 
     index_file = File.join(Rails.root, 'fixtures', 'emojis', 'index.json')
     index = Gitlab::Json.parse(File.read(index_file))
@@ -36,7 +45,9 @@ namespace :gemojione do
     resultant_emoji_map = {}
     resultant_emoji_map_new = {}
 
-    Gitlab::Emoji.emojis.each do |name, emoji_hash|
+    Gitlab::Emoji.emojis_by_category.each do |emoji_hash|
+      name = emoji_hash['name']
+
       # Ignore aliases
       unless Gitlab::Emoji.emojis_aliases.key?(name)
         fpath = File.join(dir, "#{emoji_hash['unicode']}.png")
@@ -74,7 +85,7 @@ namespace :gemojione do
       handle.write(Gitlab::Json.pretty_generate(resultant_emoji_map))
     end
 
-    out_new = File.join(Rails.root, 'public', '-', 'emojis', '1', 'emojis.json')
+    out_new = File.join(Rails.root, 'public', '-', 'emojis', EMOJI_VERSION, 'emojis.json')
     File.open(out_new, 'w') do |handle|
       handle.write(Gitlab::Json.pretty_generate(resultant_emoji_map_new))
     end
@@ -101,22 +112,21 @@ namespace :gemojione do
 
     # Update these values to the width and height of the spritesheet when
     # new emoji are added.
-    SPRITESHEET_WIDTH = 860
-    SPRITESHEET_HEIGHT = 840
+    SPRITESHEET_WIDTH = 1080
+    SPRITESHEET_HEIGHT = 1060
 
     # Set up a map to rename image files
     emoji_unicode_string_to_name_map = {}
     Gitlab::Emoji.emojis.each do |name, emoji_hash|
       # Ignore aliases
       unless Gitlab::Emoji.emojis_aliases.key?(name)
-        emoji_unicode_string_to_name_map[emoji_hash['unicode']] = name
+        emoji_unicode_string_to_name_map[emoji_hash['unicode'].downcase] = name
       end
     end
 
     # Copy the Gemojione assets to the temporary folder for renaming
-    emoji_dir = "app/assets/images/emoji"
+    emoji_dir = "public/-/emojis/#{EMOJI_VERSION}"
     FileUtils.rm_rf(emoji_dir)
-    FileUtils.mkdir_p(emoji_dir, mode: 0700)
     FileUtils.cp_r(File.join(Gemojione.images_path, '.'), emoji_dir)
     Dir[File.join(emoji_dir, "**/*.png")].each do |png|
       image_path = png
@@ -133,7 +143,7 @@ namespace :gemojione do
         end
       end
 
-      style_path = Rails.root.join(*%w(app assets stylesheets framework emoji_sprites.scss))
+      style_path = Rails.root.join(*%w(app assets stylesheets emoji_sprites.scss))
 
       # Combine the resized assets into a packed sprite and re-generate the SCSS
       SpriteFactory.cssurl = "image-url('$IMAGE')"
@@ -165,15 +175,17 @@ namespace :gemojione do
           height: #{SIZE}px;
           width: #{SIZE}px;
 
+          /* stylelint-disable media-feature-name-no-vendor-prefix */
           @media only screen and (-webkit-min-device-pixel-ratio: 2),
-                 only screen and (min--moz-device-pixel-ratio: 2),
-                 only screen and (-o-min-device-pixel-ratio: 2/1),
-                 only screen and (min-device-pixel-ratio: 2),
-                 only screen and (min-resolution: 192dpi),
-                 only screen and (min-resolution: 2dppx) {
+            only screen and (min--moz-device-pixel-ratio: 2),
+            only screen and (-o-min-device-pixel-ratio: 2/1),
+            only screen and (min-device-pixel-ratio: 2),
+            only screen and (min-resolution: 192dpi),
+            only screen and (min-resolution: 2dppx) {
             background-image: image-url('emoji@2x.png');
             background-size: #{SPRITESHEET_WIDTH}px #{SPRITESHEET_HEIGHT}px;
           }
+          /* stylelint-enable media-feature-name-no-vendor-prefix */
         }
         CSS
       end

package.json

@@ -101,7 +101,7 @@
     "dropzone": "^4.2.0",
     "editorconfig": "^0.15.3",
     "emoji-regex": "^7.0.3",
-    "emoji-unicode-version": "^0.2.1",
+    "emoji-unicode-version": "^0.3.0",
     "exports-loader": "^0.7.0",
     "fast-mersenne-twister": "1.0.2",
     "file-loader": "^5.1.0",

spec/features/issues/gfm_autocomplete_spec.rb

@@ -212,11 +212,11 @@ RSpec.describe 'GFM autocomplete', :js do
       end
 
       it 'doesn\'t wrap for emoji values' do
-        fill_in 'Comment', with: ':cartwheel_'
+        fill_in 'Comment', with: ':thumb'
 
         find_highlighted_autocomplete_item.click
 
-        expect(find_field('Comment').value).to have_text('cartwheel_tone1')
+        expect(find_field('Comment').value).to have_text('thumbsdown')
       end
 
       it 'doesn\'t open autocomplete after non-word character' do

spec/features/issues/user_interacts_with_awards_spec.rb

@@ -137,11 +137,11 @@ RSpec.describe 'User interacts with awards' do
         page.within('.note-actions') do
           find('.note-emoji-button').click
         end
-        find('gl-emoji[data-name="8ball"]').click
+        find('gl-emoji[data-name="grinning"]').click
         wait_for_requests
 
         page.within('.note-awards') do
-          expect(page).to have_emoji('8ball')
+          expect(page).to have_emoji('grinning')
         end
         expect(note.reload.award_emoji.size).to eq(2)
       end

spec/frontend/behaviors/gl_emoji_spec.js

@@ -56,13 +56,13 @@ describe('gl_emoji', () => {
       'bomb emoji just with name attribute',
       '<gl-emoji data-name="bomb"></gl-emoji>',
       '<gl-emoji data-name="bomb" data-unicode-version="6.0" title="bomb">💣</gl-emoji>',
-      '<gl-emoji data-name="bomb" data-unicode-version="6.0" title="bomb"><img class="emoji" title=":bomb:" alt=":bomb:" src="/-/emojis/1/bomb.png" width="20" height="20" align="absmiddle"></gl-emoji>',
+      '<gl-emoji data-name="bomb" data-unicode-version="6.0" title="bomb"><img class="emoji" title=":bomb:" alt=":bomb:" src="/-/emojis/2/bomb.png" width="20" height="20" align="absmiddle"></gl-emoji>',
     ],
     [
       'bomb emoji with name attribute and unicode version',
       '<gl-emoji data-name="bomb" data-unicode-version="6.0">💣</gl-emoji>',
       '<gl-emoji data-name="bomb" data-unicode-version="6.0">💣</gl-emoji>',
-      '<gl-emoji data-name="bomb" data-unicode-version="6.0"><img class="emoji" title=":bomb:" alt=":bomb:" src="/-/emojis/1/bomb.png" width="20" height="20" align="absmiddle"></gl-emoji>',
+      '<gl-emoji data-name="bomb" data-unicode-version="6.0"><img class="emoji" title=":bomb:" alt=":bomb:" src="/-/emojis/2/bomb.png" width="20" height="20" align="absmiddle"></gl-emoji>',
     ],
     [
       'bomb emoji with sprite fallback',
@@ -80,7 +80,7 @@ describe('gl_emoji', () => {
       'invalid emoji',
       '<gl-emoji data-name="invalid_emoji"></gl-emoji>',
       '<gl-emoji data-name="grey_question" data-unicode-version="6.0" title="white question mark ornament">❔</gl-emoji>',
-      '<gl-emoji data-name="grey_question" data-unicode-version="6.0" title="white question mark ornament"><img class="emoji" title=":grey_question:" alt=":grey_question:" src="/-/emojis/1/grey_question.png" width="20" height="20" align="absmiddle"></gl-emoji>',
+      '<gl-emoji data-name="grey_question" data-unicode-version="6.0" title="white question mark ornament"><img class="emoji" title=":grey_question:" alt=":grey_question:" src="/-/emojis/2/grey_question.png" width="20" height="20" align="absmiddle"></gl-emoji>',
     ],
   ])('%s', (name, markup, withEmojiSupport, withoutEmojiSupport) => {
     it(`renders correctly with emoji support`, async () => {

spec/frontend/emoji/support/unicode_support_map_spec.js

@@ -28,7 +28,7 @@ describe('Unicode Support Map', () => {
         expect(getArgs[1][0]).toBe('gl-emoji-user-agent');
 
         expect(setArgs[0][0]).toBe('gl-emoji-version');
-        expect(setArgs[0][1]).toBe('0.2.0');
+        expect(setArgs[0][1]).toBe('0.3.0');
         expect(setArgs[1][0]).toBe('gl-emoji-user-agent');
         expect(setArgs[1][1]).toBe(navigator.userAgent);
         expect(setArgs[2][0]).toBe('gl-emoji-unicode-support-map');

spec/frontend/vue_shared/components/user_popover/user_popover_spec.js

@@ -183,14 +183,14 @@ describe('User Popover Component', () => {
     it('should show message and emoji', () => {
       const user = {
         ...DEFAULT_PROPS.user,
-        status: { emoji: 'basketball_player', message_html: 'Hello World' },
+        status: { emoji: 'thumbsup', message_html: 'Hello World' },
       };
 
       createWrapper({ user });
 
       expect(findUserStatus().exists()).toBe(true);
       expect(wrapper.text()).toContain('Hello World');
-      expect(wrapper.html()).toContain('<gl-emoji data-name="basketball_player"');
+      expect(wrapper.html()).toContain('<gl-emoji data-name="thumbsup"');
     });
 
     it('hides the div when status is null', () => {

spec/lib/gitlab/emoji_spec.rb

@@ -16,6 +16,19 @@ RSpec.describe Gitlab::Emoji do
     end
   end
 
+  describe '.emojis_by_category' do
+    it 'contains emojis with tones' do
+      emojis = described_class.emojis_by_category
+
+      angel_index = emojis.find_index { |e| e['name'] == 'angel' }
+      angel_tones = emojis[angel_index..angel_index + 5].map { |e| e['name'] }
+
+      expect(angel_tones).to eq(
+        %w[angel angel_tone1 angel_tone2 angel_tone3 angel_tone4 angel_tone5]
+      )
+    end
+  end
+
   describe '.emojis_by_moji' do
     it 'return emojis by moji' do
       current_emojis_by_moji = described_class.emojis_by_moji

yarn.lock

@@ -4388,10 +4388,10 @@ emoji-regex@^8.0.0:
   resolved "https://registry.yarnpkg.com/emoji-regex/-/emoji-regex-8.0.0.tgz#e818fd69ce5ccfcb404594f842963bf53164cc37"
   integrity sha512-MSjYzcWNOA0ewAHpz0MxpYFvwg6yjy1NG3xteoqz644VCo/RPgnr1/GGt+ic3iJTzQ8Eu3TdM14SawnVUmGE6A==
 
-emoji-unicode-version@^0.2.1:
-  version "0.2.1"
-  resolved "https://registry.yarnpkg.com/emoji-unicode-version/-/emoji-unicode-version-0.2.1.tgz#0ebf3666b5414097971d34994e299fce75cdbafc"
-  integrity sha1-Dr82ZrVBQJeXHTSZTimfznXNuvw=
+emoji-unicode-version@^0.3.0:
+  version "0.3.0"
+  resolved "https://registry.yarnpkg.com/emoji-unicode-version/-/emoji-unicode-version-0.3.0.tgz#5cfc511d4a7ccacf3cd02887909a5911b6dde5ec"
+  integrity sha512-DCHEeGr11QbUy9HMZ70f/NsOJp+cqzMktO5tBMJhX393ZphHDH5WAp3CzZmMawRxfc4Opr1GZTAwWtSGC8/flA==
 
 emojis-list@^3.0.0:
   version "3.0.0"