FEATURE: Render emojis on GitHub labels when oneboxing an issue. (#13531)

app/assets/stylesheets/common/base/onebox.scss

@@ -505,6 +505,11 @@ pre.onebox code {
     color: var(--secondary) !important;
     padding: 2px 4px !important;
   }
+
+  .emoji {
+    max-height: 15px;
+    margin: 0.2em;
+  }
 }
 
 .onebox.githubactions {

app/helpers/emoji_helper.rb

@@ -2,21 +2,6 @@
 
 module EmojiHelper
   def emoji_codes_to_img(str)
-    return if str.blank?
-
-    str = str.gsub(/:([\w\-+]*(?::t\d)?):/) do |name|
-      code = $1
-
-      if code && Emoji.custom?(code)
-        emoji = Emoji[code]
-        "<img src=\"#{emoji.url}\" title=\"#{code}\" class=\"emoji\" alt=\"#{code}\">"
-      elsif code && Emoji.exists?(code)
-        "<img src=\"#{Emoji.url_for(code)}\" title=\"#{code}\" class=\"emoji\" alt=\"#{code}\">"
-      else
-        name
-      end
-    end
-
-    raw(str)
+    raw(Emoji.codes_to_img(str))
   end
 end

app/models/emoji.rb

@@ -231,4 +231,20 @@ class Emoji
     @unicode_replacements_json ||= unicode_replacements.to_json
   end
 
+  def self.codes_to_img(str)
+    return if str.blank?
+
+    str = str.gsub(/:([\w\-+]*(?::t\d)?):/) do |name|
+      code = $1
+
+      if code && Emoji.custom?(code)
+        emoji = Emoji[code]
+        "<img src=\"#{emoji.url}\" title=\"#{code}\" class=\"emoji\" alt=\"#{code}\">"
+      elsif code && Emoji.exists?(code)
+        "<img src=\"#{Emoji.url_for(code)}\" title=\"#{code}\" class=\"emoji\" alt=\"#{code}\">"
+      else
+        name
+      end
+    end
+  end
 end

lib/onebox/engine/github_issue_onebox.rb

@@ -31,19 +31,23 @@ module Onebox
         body, excerpt = compute_body(raw['body'])
         ulink = URI(link)
 
+        labels = raw['labels'].map do |l|
+          { name: Emoji.codes_to_img(l['name']) }
+        end
+
         {
           link: @url,
-          title: raw["title"],
+          title: raw['title'],
           body: body,
           excerpt: excerpt,
-          labels: raw["labels"],
+          labels: labels,
           user: raw['user'],
-          created_at: created_at.strftime("%I:%M%p - %d %b %y %Z"),
-          created_at_date: created_at.strftime("%F"),
-          created_at_time: created_at.strftime("%T"),
-          closed_at: closed_at&.strftime("%I:%M%p - %d %b %y %Z"),
-          closed_at_date: closed_at&.strftime("%F"),
-          closed_at_time: closed_at&.strftime("%T"),
+          created_at: created_at.strftime('%I:%M%p - %d %b %y %Z'),
+          created_at_date: created_at.strftime('%F'),
+          created_at_time: created_at.strftime('%T'),
+          closed_at: closed_at&.strftime('%I:%M%p - %d %b %y %Z'),
+          closed_at_date: closed_at&.strftime('%F'),
+          closed_at_time: closed_at&.strftime('%T'),
           closed_by: raw['closed_by'],
           avatar: "https://avatars1.githubusercontent.com/u/#{raw['user']['id']}?v=2&s=96",
           domain: "#{ulink.host}/#{ulink.path.split('/')[1]}/#{ulink.path.split('/')[2]}",

lib/onebox/templates/githubissue.mustache

@@ -29,7 +29,9 @@
 
     <div class="labels">
       {{#labels}}
-        <span style="display:inline-block;margin-top:2px;background-color: #B8B8B8;padding: 2px;border-radius: 4px;color: #fff;margin-left: 3px;">{{name}}</span>
+        <span style="display:inline-block;margin-top:2px;background-color: #B8B8B8;padding: 2px;border-radius: 4px;color: #fff;margin-left: 3px;">
+          {{{name}}}
+        </span>
       {{/labels}}
     </div>
   </div>

spec/helpers/emoji_helper_spec.rb

@@ -1,32 +0,0 @@
-# coding: utf-8
-# frozen_string_literal: true
-
-require 'rails_helper'
-
-describe EmojiHelper do
-  before do
-    Plugin::CustomEmoji.clear_cache
-  end
-
-  after do
-    Plugin::CustomEmoji.clear_cache
-  end
-
-  describe "emoji_codes_to_img" do
-    it "replaces emoji codes by images" do
-      Plugin::CustomEmoji.register("xxxxxx", "/public/xxxxxx.png")
-
-      str = "This is a good day :xxxxxx: :woman: :man:t4:"
-      replaced_str = helper.emoji_codes_to_img(str)
-
-      expect(replaced_str).to eq("This is a good day <img src=\"/public/xxxxxx.png\" title=\"xxxxxx\" class=\"emoji\" alt=\"xxxxxx\"> <img src=\"/images/emoji/twitter/woman.png?v=#{Emoji::EMOJI_VERSION}\" title=\"woman\" class=\"emoji\" alt=\"woman\"> <img src=\"/images/emoji/twitter/man/4.png?v=#{Emoji::EMOJI_VERSION}\" title=\"man:t4\" class=\"emoji\" alt=\"man:t4\">")
-    end
-
-    it "doesn't replace if code doesn't exist" do
-      str = "This is a good day :woman: :foo: :bar:t4: :man:t8:"
-      replaced_str = helper.emoji_codes_to_img(str)
-
-      expect(replaced_str).to eq("This is a good day <img src=\"/images/emoji/twitter/woman.png?v=#{Emoji::EMOJI_VERSION}\" title=\"woman\" class=\"emoji\" alt=\"woman\"> :foo: :bar:t4: :man:t8:")
-    end
-  end
-end

spec/models/emoji_spec.rb

@@ -87,4 +87,24 @@ describe Emoji do
     end
   end
 
+  describe '.codes_to_img' do
+    before { Plugin::CustomEmoji.clear_cache }
+    after { Plugin::CustomEmoji.clear_cache }
+
+    it "replaces emoji codes by images" do
+      Plugin::CustomEmoji.register("xxxxxx", "/public/xxxxxx.png")
+
+      str = "This is a good day :xxxxxx: :woman: :man:t4:"
+      replaced_str = described_class.codes_to_img(str)
+
+      expect(replaced_str).to eq("This is a good day <img src=\"/public/xxxxxx.png\" title=\"xxxxxx\" class=\"emoji\" alt=\"xxxxxx\"> <img src=\"/images/emoji/twitter/woman.png?v=#{Emoji::EMOJI_VERSION}\" title=\"woman\" class=\"emoji\" alt=\"woman\"> <img src=\"/images/emoji/twitter/man/4.png?v=#{Emoji::EMOJI_VERSION}\" title=\"man:t4\" class=\"emoji\" alt=\"man:t4\">")
+    end
+
+    it "doesn't replace if code doesn't exist" do
+      str = "This is a good day :woman: :foo: :bar:t4: :man:t8:"
+      replaced_str = described_class.codes_to_img(str)
+
+      expect(replaced_str).to eq("This is a good day <img src=\"/images/emoji/twitter/woman.png?v=#{Emoji::EMOJI_VERSION}\" title=\"woman\" class=\"emoji\" alt=\"woman\"> :foo: :bar:t4: :man:t8:")
+    end
+  end
 end