# Summary Work Items support emoji reactions both at the root object (https://gitlab.com/gitlab-org/gitlab/-/issues/393599 & https://gitlab.com/gitlab-org/gitlab/-/merge_requests/119585) as well as in discussions (https://gitlab.com/gitlab-org/gitlab/-/issues/389967 & https://gitlab.com/gitlab-org/gitlab/-/merge_requests/115972). We recently added support for emoji reactions to design discussions too (https://gitlab.com/gitlab-org/gitlab/-/issues/29756 & https://gitlab.com/gitlab-org/gitlab/-/merge_requests/125740). All these instances of emoji reactions use [`awardEmojiAdd`](https://docs.gitlab.com/ee/api/graphql/reference/index.html#mutationawardemojiadd), [`awardEmojiRemove`](https://docs.gitlab.com/ee/api/graphql/reference/index.html#mutationawardemojiremove), or [`awardEmojiToggle`](https://docs.gitlab.com/ee/api/graphql/reference/index.html#mutationawardemojitoggle) mutations. These mutations can work with `awardableId` which can accept GraphQL Global ID of any awardable reference and requires the user to be logged in to use it. The frontend implementation uses [`vue_shared/components/awards_list.vue`](https://gitlab.com/gitlab-org/gitlab/-/blob/master/app/assets/javascripts/vue_shared/components/awards_list.vue) to show emoji reactions already added by users (along with optionally showing :thumbsup: & :thumbsdown: buttons), in places where we need to show emoji picker button (eg; note header section), [`emoji/components/picker.vue`](https://gitlab.com/gitlab-org/gitlab/-/blob/master/app/assets/javascripts/emoji/components/picker.vue) is used. The components where repeating logic is present on the frontend are; - [`work_items/components/work_item_award_emoji.vue`](https://gitlab.com/gitlab-org/gitlab/-/blob/master/app/assets/javascripts/work_items/components/work_item_award_emoji.vue) - [`work_items/components/notes/work_item_note_awards_list.vue`](https://gitlab.com/gitlab-org/gitlab/-/blob/master/app/assets/javascripts/work_items/components/notes/work_item_note_awards_list.vue) - [`design_management/components/design_notes/design_note.vue`](https://gitlab.com/gitlab-org/gitlab/-/blob/master/app/assets/javascripts/design_management/components/design_notes/design_note.vue) Additionally, there may be other places too where logic is duplicated, like handling mutation response and writing Apollo cache with correct object structure, and paginating emoji list when reactions are more than 100. # Proposal We need to find a way to unify frontend logic in some way, some of the approaches I can think of are; - Create a wrapper for `vue_shared/components/awards_list.vue` that can accept permissions for visibility of adding reactions and awardableId and return mutation response that the parent component can consume to write Apollo cache as per its needs, this wrapper should also be able to handle pagination. - Create a wrapper for `emoji/components/picker.vue` similar to above, pagination is not applicable here.