Merge branch '325630-make-epic-searchable-by-reaction-emoji' into 'master'

Make epics searchable by my reaction emoji

See merge request gitlab-org/gitlab!57190

doc/user/group/epics/manage_epics.md

@@ -110,15 +110,17 @@ link in the issue sidebar.
 
 > - Introduced in [GitLab Ultimate](https://about.gitlab.com/pricing/) 10.5.
 > - [Moved](https://gitlab.com/gitlab-org/gitlab/-/issues/37081) to the [Premium](https://about.gitlab.com/pricing/) tier in GitLab 12.8.
+> - Searching by the user's reaction emoji [introduced](https://gitlab.com/gitlab-org/gitlab/-/issues/325630) in GitLab 13.11.
 
 You can search for an epic from the list of epics using filtered search bar (similar to
-that of Issues and Merge Requests) based on following parameters:
+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)
+![epics search](img/epics_search_v13_11.png)
 
 To search, go to the list of epics and select the field **Search or filter results**.
 It displays a dropdown menu, from which you can add an author. You can also enter plain

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

@@ -5,14 +5,18 @@ require 'spec_helper'
 RSpec.describe 'epics list', :js do
   include FilteredSearchHelpers
 
-  let(:user) { create(:user) }
-  let(:group) { create(:group, :public) }
-  let(:label) { create(:group_label, group: group, title: 'bug') }
-  let!(:epic) { create(:epic, group: group, start_date: 10.days.ago, due_date: 5.days.ago) }
+  let_it_be(:user) { create(:user) }
+  let_it_be(:group) { create(:group, :public) }
+  let_it_be(:label) { create(:group_label, group: group, title: 'bug') }
+  let_it_be(:epic) { create(:epic, group: group, start_date: 10.days.ago, due_date: 5.days.ago) }
 
   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_it_be(:award_emoji_star) { create(:award_emoji, name: 'star', user: user, awardable: epic) }
 
   before do
     stub_licensed_features(epics: true)
@@ -83,4 +87,44 @@ 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_all do
+      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
+
+    context 'when user is not logged in' do
+      it 'does not open when the search bar has my-reaction=' do
+        filtered_search.set('my-reaction=')
+
+        expect(page).not_to have_css(js_dropdown_my_reaction)
+      end
+    end
+
+    context 'when user is logged in' do
+      before_all do
+        group.add_maintainer(user)
+      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
 end