Rendering of emoji's in Group-Overview

Allows rendering of emoji's in the Group Overview.

6 files changed, 44 insertions, 3 deletions

diff --git a/app/assets/javascripts/groups/components/group_item.vue b/app/assets/javascripts/groups/components/group_item.vue
index 6421547bbde..ad01c261b7f 100644
--- a/app/assets/javascripts/groups/components/group_item.vue
+++ b/app/assets/javascripts/groups/components/group_item.vue
@@ -139,7 +139,8 @@ export default {
       <div
         v-if="group.description"
         class="description">
-        {{group.description}}
+        <span v-html="group.description">
+        </span>
       </div>
     </div>
     <group-folder
diff --git a/app/assets/javascripts/groups/store/groups_store.js b/app/assets/javascripts/groups/store/groups_store.js
index a1689f4c5cc..cbb7ec57e34 100644
--- a/app/assets/javascripts/groups/store/groups_store.js
+++ b/app/assets/javascripts/groups/store/groups_store.js
@@ -71,7 +71,7 @@ export default class GroupsStore {
       id: rawGroupItem.id,
       name: rawGroupItem.name,
       fullName: rawGroupItem.full_name,
-      description: rawGroupItem.description,
+      description: rawGroupItem.markdown_description,
       visibility: rawGroupItem.visibility,
       avatarUrl: rawGroupItem.avatar_url,
       relativePath: rawGroupItem.relative_path,
diff --git a/app/serializers/group_child_entity.rb b/app/serializers/group_child_entity.rb
index 37240bfb0b1..aca4e4ca488 100644
--- a/app/serializers/group_child_entity.rb
+++ b/app/serializers/group_child_entity.rb
@@ -1,6 +1,7 @@
 class GroupChildEntity < Grape::Entity
   include ActionView::Helpers::NumberHelper
   include RequestAwareEntity
+  include MarkupHelper
 
   expose :id, :name, :description, :visibility, :full_name,
          :created_at, :updated_at, :avatar_url
@@ -59,6 +60,10 @@ class GroupChildEntity < Grape::Entity
     number_with_delimiter(instance.member_count)
   end
 
+  expose :markdown_description do |instance|
+    markdown_description
+  end
+
   private
 
   def membership
@@ -74,4 +79,8 @@ class GroupChildEntity < Grape::Entity
   def type
     object.class.name.downcase
   end
+
+  def markdown_description
+    markdown_field(object, :description)
+  end
 end
diff --git a/changelogs/unreleased/40549-render-emoj-in-groups-overview.yml b/changelogs/unreleased/40549-render-emoj-in-groups-overview.yml
new file mode 100644
index 00000000000..9b2f58df440
--- /dev/null
+++ b/changelogs/unreleased/40549-render-emoj-in-groups-overview.yml
@@ -0,0 +1,5 @@
+---
+title: Rendering of emoji's in Group-Overview
+merge_request: 16098
+author: Jacopo Beschi @jacopo-beschi
+type: added
diff --git a/spec/features/groups/show_spec.rb b/spec/features/groups/show_spec.rb
index 7fc2b383749..ceccc471405 100644
--- a/spec/features/groups/show_spec.rb
+++ b/spec/features/groups/show_spec.rb
@@ -55,4 +55,20 @@ feature 'Group show page' do
       end
     end
   end
+
+  context 'group has a project with emoji in description', :js do
+    let(:user) { create(:user) }
+    let!(:project) { create(:project, description: ':smile:', namespace: group) }
+
+    before do
+      group.add_owner(user)
+      sign_in(user)
+      visit path
+    end
+
+    it 'shows the project info' do
+      expect(page).to have_content(project.title)
+      expect(page).to have_selector('gl-emoji[data-name="smile"]')
+    end
+  end
 end
diff --git a/spec/serializers/group_child_entity_spec.rb b/spec/serializers/group_child_entity_spec.rb
index 452754d7a79..505a9eaac5a 100644
--- a/spec/serializers/group_child_entity_spec.rb
+++ b/spec/serializers/group_child_entity_spec.rb
@@ -22,6 +22,7 @@ describe GroupChildEntity do
        avatar_url
        name
        description
+       markdown_description
        visibility
        type
        can_edit
@@ -60,9 +61,10 @@ describe GroupChildEntity do
   end
 
   describe 'for a group', :nested_groups do
+    let(:description) { 'Awesomeness' }
     let(:object) do
       create(:group, :nested, :with_avatar,
-             description: 'Awesomeness')
+             description: description)
     end
 
     before do
@@ -96,6 +98,14 @@ describe GroupChildEntity do
       expect(json[:edit_path]).to eq(edit_group_path(object))
     end
 
+    context 'emoji in description' do
+      let(:description) { ':smile:' }
+
+      it 'has the correct markdown_description' do
+        expect(json[:markdown_description]).to eq('<p dir="auto"><gl-emoji title="smiling face with open mouth and smiling eyes" data-name="smile" data-unicode-version="6.0">😄</gl-emoji></p>')
+      end
+    end
+
     it_behaves_like 'group child json'
   end
 end