Merge branch '3729-filtered-search-bar-roadmap' into 'master'

Filtered search bar support for Roadmap view

Closes #3729

See merge request gitlab-org/gitlab-ee!5417

ee/app/assets/javascripts/pages/groups/roadmap/show/index.js

+import initFilteredSearch from '~/pages/search/init_filtered_search';
+import FilteredSearchTokenKeysEpics from 'ee/filtered_search/filtered_search_token_keys_epics';
 import initNewEpic from 'ee/epics/new_epic/new_epic_bundle';
 import initRoadmap from 'ee/roadmap/index';
 
 document.addEventListener('DOMContentLoaded', () => {
+  initFilteredSearch({
+    page: 'epics',
+    isGroup: true,
+    isGroupDecendent: true,
+    filteredSearchTokenKeys: FilteredSearchTokenKeysEpics,
+    stateFiltersSelector: '.epics-state-filters',
+  });
   initNewEpic();
   initRoadmap();
 });

ee/app/assets/javascripts/roadmap/index.js

@@ -27,6 +27,7 @@ export default () => {
     },
     data() {
       const dataset = this.$options.el.dataset;
+      const filterQueryString = window.location.search.substring(1);
 
       // Construct Epic API path to include
       // `start_date` & `end_date` query params to get list of
@@ -36,7 +37,11 @@ export default () => {
       const end = timeframe[TIMEFRAME_LENGTH - 1];
       const startDate = `${start.getFullYear()}-${start.getMonth() + 1}-${start.getDate()}`;
       const endDate = `${end.getFullYear()}-${end.getMonth() + 1}-${end.getDate()}`;
-      const epicsPath = `${dataset.epicsPath}?start_date=${startDate}&end_date=${endDate}`;
+      let epicsPath = `${dataset.epicsPath}?start_date=${startDate}&end_date=${endDate}`;
+
+      if (filterQueryString) {
+        epicsPath += `&${filterQueryString}`;
+      }
 
       const store = new RoadmapStore(parseInt(dataset.groupId, 0), timeframe);
       const service = new RoadmapService(epicsPath);

ee/app/views/groups/roadmap/show.html.haml

@@ -5,6 +5,8 @@
 - breadcrumb_title _("Epics Roadmap")
 
 - if @epics_count != 0
+  = render 'shared/epic/search_bar', type: :epics, hide_sort_dropdown: true
+
   #js-roadmap{ data: { epics_path: group_epics_path(@group, format: :json), group_id: @group.id, empty_state_illustration: image_path('illustrations/epics/roadmap.svg') } }
 - else
   = render 'shared/empty_states/roadmap'

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

 - type = local_assigns.fetch(:type)
+- hide_sort_dropdown = local_assigns.fetch(:hide_sort_dropdown, false)
 - full_path = @project.present? ? @project.full_path : @group.full_path
 
 .epics-filters
@@ -61,5 +62,6 @@
 
           %button.clear-search.hidden{ type: 'button' }
             = icon('times')
+        - unless hide_sort_dropdown
           .filter-dropdown-container
             = render 'shared/epic/sort_dropdown'

ee/changelogs/unreleased/3729-filtered-search-bar-roadmap.yml

+---
+title: Filtered search bar support for Roadmap view
+merge_request: 5417
+author:
+type: added

ee/spec/features/groups/group_roadmap_spec.rb

+require 'spec_helper'
+
+describe 'group epic roadmap', :js do
+  include FilteredSearchHelpers
+
+  let(:user) { create(:user) }
+  let(:group) { create(:group) }
+  let(:filtered_search) { find('.filtered-search') }
+  let(:js_dropdown_label) { '#js-dropdown-label' }
+  let(:filter_dropdown) { find("#{js_dropdown_label} .filter-dropdown") }
+
+  let(:bug_label) { create(:group_label, group: group, title: 'Bug') }
+  let(:critical_label) { create(:group_label, group: group, title: 'Critical') }
+
+  def search_for_label(label)
+    init_label_search
+    filter_dropdown.find('.filter-dropdown-item', text: bug_label.title).click
+    filtered_search.send_keys(:enter)
+  end
+
+  before do
+    stub_licensed_features(epics: true)
+
+    sign_in(user)
+  end
+
+  context 'when epics exist for the group' do
+    let!(:epic_with_bug) { create(:labeled_epic, group: group, start_date: 10.days.ago, end_date: 1.day.ago, labels: [bug_label]) }
+    let!(:epic_with_critical) { create(:labeled_epic, group: group, start_date: 20.days.ago, end_date: 2.days.ago, labels: [critical_label]) }
+
+    before do
+      visit group_roadmap_path(group)
+      wait_for_requests
+    end
+
+    describe 'roadmap page' do
+      it 'renders the filtered search bar correctly' do
+        page.within('.content-wrapper .content') do
+          expect(page).to have_css('.epics-filters')
+        end
+      end
+
+      it 'renders roadmap view' do
+        page.within('.content-wrapper .content') do
+          expect(page).to have_css('.roadmap-container')
+        end
+      end
+
+      it 'renders all group epics within roadmap' do
+        page.within('.roadmap-container .epics-list-section') do
+          expect(page).to have_selector('.epics-list-item .epic-title', count: 2)
+        end
+      end
+    end
+
+    describe 'roadmap page with filter applied' do
+      before do
+        search_for_label(bug_label)
+      end
+
+      it 'renders filtered search bar with applied filter token' do
+        expect_tokens([label_token(bug_label.title)])
+      end
+
+      it 'renders roadmap view with matching epic' do
+        page.within('.roadmap-container .epics-list-section') do
+          expect(page).to have_selector('.epics-list-item .epic-title', count: 1)
+          expect(page).to have_content(epic_with_bug.title)
+        end
+      end
+    end
+  end
+
+  context 'when no epics exist for the group' do
+    before do
+      visit group_roadmap_path(group)
+    end
+
+    describe 'roadmap page' do
+      it 'does not render the filtered search bar' do
+        page.within('.content-wrapper .content') do
+          expect(page).not_to have_css('.epics-filters')
+        end
+      end
+    end
+  end
+end