Fix displaying emoji only comments.

To render emoji in the emoji bar of an issue or MR we actually need the emoji unicode and unicode info is stored in the emoji menu widget. That widget could only be visible if user clicks the "Add" button and there may not be a widget when posting emoji only comments. So this change will check existence of the widget and create it before posting the emoji if it's not exist to render it correctly.

2 files changed, 46 insertions, 24 deletions

diff --git a/app/assets/javascripts/awards_handler.coffee b/app/assets/javascripts/awards_handler.coffee
index 64f93d21fd8..0ab3796118e 100644
--- a/app/assets/javascripts/awards_handler.coffee
+++ b/app/assets/javascripts/awards_handler.coffee
@@ -20,7 +20,9 @@ class @AwardsHandler
       .off "click", ".js-emoji-btn"
       .on "click", ".js-emoji-btn", @handleClick
 
+
   handleClick: (e) =>
+
     e.preventDefault()
     $emojiBtn = $(e.currentTarget)
     $addAwardBtn = $('.js-add-award.is-active')
@@ -31,14 +33,14 @@ class @AwardsHandler
     else if $votesBlock.length is 0
       $votesBlock = $addAwardBtn.closest('.js-awards-block')
 
-    $votesBlock.addClass 'js-awards-block-current'
+    $votesBlock.addClass 'js-awards-block'
     awardUrl = $votesBlock.data 'award-url'
-    emoji = $emojiBtn
-      .find(".icon")
-      .data "emoji"
+    emoji = $emojiBtn.find('.icon').data('emoji')
     @addAward awardUrl, emoji
 
+
   showEmojiMenu: ($addBtn) ->
+
     $menu = $('.emoji-menu')
 
     if $menu.length
@@ -55,23 +57,29 @@ class @AwardsHandler
         $menu.addClass "is-visible"
         $("#emoji_search").focus()
     else
-      $addBtn.addClass "is-loading is-active"
-      $.get $addBtn.data('award-menu-url'), (response) =>
-        $addBtn.removeClass "is-loading"
-        $('body').append response
-
-        $menu = $(".emoji-menu")
+      $addBtn.addClass 'is-loading is-active'
+      url = $addBtn.data 'award-menu-url'
 
+      @createEmojiMenu url, =>
+        $addBtn.removeClass 'is-loading'
+        $menu = $('.emoji-menu')
         @positionMenu($menu, $addBtn)
-
         @renderFrequentlyUsedBlock()
 
         setTimeout =>
-          $menu.addClass "is-visible"
-          $("#emoji_search").focus()
+          $menu.addClass 'is-visible'
+          $('#emoji_search').focus()
           @setupSearch()
         , 200
 
+
+  createEmojiMenu: (awardMenuUrl, callback) ->
+
+    $.get awardMenuUrl, (response) =>
+      $('body').append response
+      callback()
+
+
   positionMenu: ($menu, $addBtn) ->
     position = $addBtn.data('position')
 
@@ -170,8 +178,9 @@ class @AwardsHandler
     ), 200
 
 
-  createEmoji: (emoji) ->
-    emojiCssClass = @resolveNameToCssClass(emoji)
+  createEmoji_: (emoji) ->
+
+    emojiCssClass = @resolveNameToCssClass emoji
 
     buttonHtml = "<button class='btn award-control js-emoji-btn has-tooltip active' title='me' data-placement='bottom'>
       <div class='icon emoji-icon #{emojiCssClass}' data-emoji='#{emoji}'></div>
@@ -179,16 +188,28 @@ class @AwardsHandler
     </button>"
 
     emoji_node = $(buttonHtml)
-      .insertBefore(".js-awards-block-current .js-award-holder:not(.js-award-action-btn)")
-      .find(".emoji-icon")
-      .data("emoji", emoji)
+      .insertBefore '.js-awards-block .js-award-holder:not(.js-award-action-btn)'
+      .find '.emoji-icon'
+      .data 'emoji', emoji
+
     $('.award-control').tooltip()
 
-    $currentBlock = $('.js-awards-block-current')
-    if $currentBlock.is('.hidden')
+    $currentBlock = $ '.js-awards-block'
+
+    if $currentBlock.is '.hidden'
       $currentBlock.removeClass 'hidden'
 
+
+  createEmoji: (emoji) ->
+
+    return @createEmoji_ emoji if $('.emoji-menu').length
+
+    awardMenuUrl = $('[data-award-menu-url]').data 'award-menu-url'
+    @createEmojiMenu awardMenuUrl, => @createEmoji emoji
+
+
   resolveNameToCssClass: (emoji) ->
+
     emoji_icon = $(".emoji-menu-content [data-emoji='#{emoji}']")
 
     if emoji_icon.length > 0
@@ -197,7 +218,8 @@ class @AwardsHandler
       # Find by alias
       unicodeName = $(".emoji-menu-content [data-aliases*=':#{emoji}:']").data("unicode-name")
 
-    "emoji-#{unicodeName}"
+    return "emoji-#{unicodeName}"
+
 
   postEmoji: (awardUrl, emoji, callback) ->
     $.post awardUrl, { name: emoji }, (data) ->
@@ -205,7 +227,7 @@ class @AwardsHandler
         callback.call()
 
   findEmojiIcon: (emoji) ->
-    $(".js-awards-block-current.awards > .js-emoji-btn [data-emoji='#{emoji}']")
+    $(".js-awards-block.awards > .js-emoji-btn [data-emoji='#{emoji}']")
 
   scrollToAwards: ->
     $('body, html').animate({
diff --git a/app/assets/javascripts/notes.js.coffee b/app/assets/javascripts/notes.js.coffee
index 6d9d6528f45..687dc285519 100644
--- a/app/assets/javascripts/notes.js.coffee
+++ b/app/assets/javascripts/notes.js.coffee
@@ -167,8 +167,8 @@ class @Notes
       return
 
     if note.award
-      awardsHandler.addAwardToEmojiBar(note.note)
-      awardsHandler.scrollToAwards()
+      awards_handler.addAwardToEmojiBar(note.name)
+      awards_handler.scrollToAwards()
 
     # render note if it not present in loaded list
     # or skip if rendered