Make epics searchable by my reaction emoji

Make reaction emoji available as a search token on epics lists

doc/user/group/epics/manage_epics.md

@@ -117,6 +117,7 @@ that of Issues and Merge Requests) based on following parameters:
 - Title or description
 - Author name / username
 - Labels
+- Reaction emoji
 
 ![epics search](img/epics_search.png)
 

ee/app/assets/javascripts/filtered_search/filtered_search_token_keys_epics.js

@@ -22,6 +22,19 @@ const tokenKeys = [
   },
 ];
 
+if (gon.current_user_id) {
+  // Appending tokenkeys only logged-in
+  tokenKeys.push({
+    formattedKey: __('My-Reaction'),
+    key: 'my-reaction',
+    type: 'string',
+    param: 'emoji',
+    symbol: '',
+    icon: 'thumb-up',
+    tag: 'emoji',
+  });
+}
+
 const alternativeTokenKeys = [
   {
     formattedKey: __('Label'),
@@ -45,6 +58,16 @@ const conditions = [
     value: 'none',
     operator: '!=',
   },
+  {
+    url: 'my_reaction_emoji=None',
+    tokenKey: 'my-reaction',
+    value: __('None'),
+  },
+  {
+    url: 'my_reaction_emoji=Any',
+    tokenKey: 'my-reaction',
+    value: __('Any'),
+  },
 ];
 
 const EpicsFilteredSearchTokenKeysEE = new FilteredSearchTokenKeys(

ee/app/views/shared/epic/_search_bar.html.haml

@@ -79,6 +79,21 @@
                     %span.dropdown-label-box{ style: 'background: {{color}}' }
                     %span.label-title.js-data-value
                       {{ title }}
+            #js-dropdown-my-reaction.filtered-search-input-dropdown-menu.dropdown-menu
+              %ul{ data: { dropdown: true } }
+                %li.filter-dropdown-item{ data: { value: 'None' } }
+                  %button.btn.btn-link{ type: 'button' }
+                    = _('None')
+                %li.filter-dropdown-item{ data: { value: 'Any' } }
+                  %button.btn.btn-link{ type: 'button' }
+                    = _('Any')
+                %li.divider.droplab-item-ignore
+              %ul.filter-dropdown{ data: { dynamic: true, dropdown: true } }
+                %li.filter-dropdown-item
+                  %button.btn.btn-link{ type: 'button' }
+                    %gl-emoji
+                    %span.js-data-value.gl-ml-3
+                      {{name}}
 
           %button.clear-search.hidden{ type: 'button' }
             = sprite_icon('close', size: 16, css_class: 'clear-search-icon')

ee/changelogs/unreleased/325630-make-epic-searchable-by-reaction-emoji.yml

+---
+title: Make epics searchable by my reaction emoji
+merge_request: 57190
+author:
+type: added

ee/spec/features/epics/filtered_search/visual_tokens_spec.rb

@@ -13,6 +13,10 @@ RSpec.describe 'epics list', :js do
   let(:filtered_search) { find('.filtered-search') }
   let(:filter_author_dropdown) { find("#js-dropdown-author .filter-dropdown") }
   let(:filter_label_dropdown) { find("#js-dropdown-label .filter-dropdown") }
+  let(:js_dropdown_my_reaction) { '#js-dropdown-my-reaction' }
+  let(:filter_emoji_dropdown) { find("#js-dropdown-my-reaction .filter-dropdown") }
+
+  let!(:award_emoji_star) { create(:award_emoji, name: 'star', user: user, awardable: epic) }
 
   before do
     stub_licensed_features(epics: true)
@@ -83,4 +87,31 @@ RSpec.describe 'epics list', :js do
       expect(page.all('#js-dropdown-label .filter-dropdown .filter-dropdown-item').size).to eq(1)
     end
   end
+
+  context 'editing reaction emoji token' do
+    before do
+      group.add_maintainer(user)
+      create_list(:award_emoji, 2, user: user, name: 'thumbsup')
+      create_list(:award_emoji, 1, user: user, name: 'thumbsdown')
+      create_list(:award_emoji, 3, user: user, name: 'star')
+    end
+
+    it 'opens when the search bar has my-reaction=' do
+      filtered_search.set('my-reaction:=')
+
+      expect(page).to have_css(js_dropdown_my_reaction, visible: true)
+    end
+
+    it 'loads all the emojis when opened' do
+      input_filtered_search('my-reaction:=', submit: false, extra_space: false)
+
+      expect_filtered_search_dropdown_results(filter_emoji_dropdown, 3)
+    end
+
+    it 'shows the most populated emoji at top of dropdown' do
+      input_filtered_search('my-reaction:=', submit: false, extra_space: false)
+
+      expect(first("#{js_dropdown_my_reaction} .filter-dropdown li")).to have_content(award_emoji_star.name)
+    end
+  end
 end