Rendering of emoji's in Group-Overview

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

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,

app/serializers/group_child_entity.rb

 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

changelogs/unreleased/40549-render-emoj-in-groups-overview.yml

+---
+title: Rendering of emoji's in Group-Overview
+merge_request: 16098
+author: Jacopo Beschi @jacopo-beschi
+type: added

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

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