Add icon to subepics issues filtered by Epic

If the issues are being filtered by epic_id, any issueable with a
different epic_id is considered a child, so an icon indicator is shown
with information on a tooltip.

app/assets/javascripts/boards/filtered_search_boards.js

 import IssuableFilteredSearchTokenKeys from 'ee_else_ce/filtered_search/issuable_filtered_search_token_keys';
 import FilteredSearchContainer from '../filtered_search/container';
-import FilteredSearchManager from '../filtered_search/filtered_search_manager';
+import FilteredSearchManager from 'ee_else_ce/filtered_search/filtered_search_manager';
 import boardsStore from './stores/boards_store';
 
 export default class FilteredSearchBoards extends FilteredSearchManager {

app/assets/javascripts/filtered_search/filtered_search_manager.js

@@ -710,13 +710,17 @@ export default class FilteredSearchManager {
     }
   }
 
-  search(state = null) {
-    const paths = [];
+  getSearchTokens() {
     const searchQuery = DropdownUtils.getSearchQuery();
     this.saveCurrentSearchQuery();
 
     const tokenKeys = this.filteredSearchTokenKeys.getKeys();
-    const { tokens, searchToken } = this.tokenizer.processTokens(searchQuery, tokenKeys);
+    return this.tokenizer.processTokens(searchQuery, tokenKeys);
+  }
+
+  search(state = null) {
+    const paths = [];
+    const { tokens, searchToken } = this.getSearchTokens();
     const currentState = state || getParameterByName('state') || 'opened';
     paths.push(`state=${currentState}`);
 

app/assets/javascripts/pages/search/init_filtered_search.js

-import FilteredSearchManager from '~/filtered_search/filtered_search_manager';
+import FilteredSearchManager from 'ee_else_ce/filtered_search/filtered_search_manager';
 
 export default ({
   page,

app/assets/stylesheets/utilities.scss

@@ -7,6 +7,12 @@
     #{'.text-#{$variant}-#{$suffix}'} {
       color: $color;
     }
+
+    #{'.hover-text-#{$variant}-#{$suffix}'} {
+      &:hover {
+        color: $color;
+      }
+    }
   }
 }
 

app/views/projects/issues/_issue.html.haml

@@ -6,12 +6,13 @@
         = check_box_tag dom_id(issue, "selected"), nil, false, 'data-id' => issue.id, class: "selected-issuable"
     .issuable-info-container
       .issuable-main-info
-        .issue-title.title
+        .issue-title.title.d-flex.align-items-center
           %span.issue-title-text.js-onboarding-issue-item{ dir: "auto" }
             - if issue.confidential?
               %span.has-tooltip{ title: _('Confidential') }
                 = confidential_icon(issue)
             = link_to issue.title, issue_path(issue)
+          = render_if_exists 'projects/issues/subepic_flag', issue: issue
           - if issue.tasks?
             %span.task-status.d-none.d-sm-inline-block
                

ee/app/assets/javascripts/analytics/code_review_analytics/filtered_search_code_review_analytics.js

 import CodeReviewAnalyticsFilteredSearchTokenKeys from './code_review_analytics_filtered_search_token_keys';
-import FilteredSearchManager from '~/filtered_search/filtered_search_manager';
+import FilteredSearchManager from 'ee_else_ce/filtered_search/filtered_search_manager';
 import { urlParamsToObject } from '~/lib/utils/common_utils';
 import store from './store';
 

ee/app/assets/javascripts/analytics/productivity_analytics/filtered_search_productivity_analytics.js

 import ProductivityAnalyticsFilteredSearchTokenKeys from './productivity_analytics_filtered_search_token_keys';
-import FilteredSearchManager from '~/filtered_search/filtered_search_manager';
+import FilteredSearchManager from 'ee_else_ce/filtered_search/filtered_search_manager';
 import { urlParamsToObject } from '~/lib/utils/common_utils';
 import store from './store';
 

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

+import FilteredSearchManager from '~/filtered_search/filtered_search_manager';
+import { epicTokenKey } from './issuable_filtered_search_token_keys';
+
+export default class extends FilteredSearchManager {
+  getSearchTokens() {
+    const { tokens, ...rest } = super.getSearchTokens();
+
+    const hasEqualsToEpicIdToken = tokens.some(
+      token =>
+        token?.key === epicTokenKey.key &&
+        token?.operator === '=' &&
+        !Number.isNaN(Number(token?.value)),
+    );
+
+    if (hasEqualsToEpicIdToken) {
+      tokens.push({
+        key: 'include_subepics',
+        operator: '=',
+        value: '✓',
+        symbol: '',
+      });
+    }
+
+    return { tokens, ...rest };
+  }
+}

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

@@ -6,7 +6,7 @@ import {
 } from '~/filtered_search/issuable_filtered_search_token_keys';
 import { __ } from '~/locale';
 
-const weightTokenKey = {
+export const weightTokenKey = {
   formattedKey: __('Weight'),
   key: 'weight',
   type: 'string',
@@ -16,7 +16,7 @@ const weightTokenKey = {
   tag: 'number',
 };
 
-const epicTokenKey = {
+export const epicTokenKey = {
   formattedKey: __('Epic'),
   key: 'epic',
   type: 'string',
@@ -25,7 +25,7 @@ const epicTokenKey = {
   icon: 'epic',
 };
 
-const weightConditions = [
+export const weightConditions = [
   {
     url: 'weight=None',
     operator: '=',
@@ -52,7 +52,7 @@ const weightConditions = [
   },
 ];
 
-const epicConditions = [
+export const epicConditions = [
   {
     url: 'epic_id=None',
     operator: '=',

ee/app/assets/javascripts/issues_analytics/filtered_search_issues_analytics.js

 import IssuableFilteredSearchTokenKeys from 'ee_else_ce/filtered_search/issuable_filtered_search_token_keys';
 import FilteredSearchTokenKeys from '~/filtered_search/filtered_search_token_keys';
-import FilteredSearchManager from '~/filtered_search/filtered_search_manager';
+import FilteredSearchManager from 'ee_else_ce/filtered_search/filtered_search_manager';
 import { historyPushState } from '~/lib/utils/common_utils';
 import issueAnalyticsStore from './stores';
 

ee/app/assets/javascripts/pages/projects/issues/service_desk/filtered_search.js

 /* eslint-disable class-methods-use-this */
 import IssuableFilteredSearchTokenKeys from 'ee_else_ce/filtered_search/issuable_filtered_search_token_keys';
-import FilteredSearchManager from '~/filtered_search/filtered_search_manager';
+import FilteredSearchManager from 'ee_else_ce/filtered_search/filtered_search_manager';
 
 const AUTHOR_PARAM_KEY = 'author_username';
 

ee/app/controllers/concerns/ee/issuable_collections.rb

@@ -10,9 +10,19 @@ module EE
       @preload_for_collection ||= case collection_type
                                   when 'MergeRequest'
                                     super.push(:approvals, :approval_rules)
+                                  when 'Issue'
+                                    super.push(*issue_preloads)
                                   else
                                     super
                                   end
     end
+
+    private
+
+    def issue_preloads
+      [].tap do |issue_params|
+        issue_params << :epic_issue if params[:include_subepics].present?
+      end
+    end
   end
 end

ee/app/finders/ee/issues_finder.rb

@@ -11,7 +11,7 @@ module EE
 
       override :scalar_params
       def scalar_params
-        @scalar_params ||= super + [:weight, :epic_id]
+        @scalar_params ||= super + [:weight, :epic_id, :include_subepics]
       end
     end
 

ee/app/helpers/ee/issues_helper.rb

@@ -40,6 +40,17 @@ module EE
       end
     end
 
+    def issue_in_subepic?(issue, epic_id)
+      # This helper is used if a list of issues are filtered by epic id
+      return false if epic_id.blank?
+      return false if %w(any none).include?(epic_id)
+      return false if issue.epic_issue.nil?
+
+      # An issue is member of a subepic when its epic id is different
+      # than the filter epic id on params
+      epic_id.to_i != issue.epic_issue.epic_id
+    end
+
     override :show_moved_service_desk_issue_warning?
     def show_moved_service_desk_issue_warning?(issue)
       return false unless issue.moved_from

ee/app/views/projects/issues/_subepic_flag.html.haml

+- return unless issue_in_subepic?(issue, params[:epic_id])
+
+%span.d-inline-block.ml-1{ title: _('This issue is in a child epic of the filtered epic'), data: { toggle: 'tooltip', container: 'body' } }
+  = sprite_icon('information-o', size: 16, css_class: 'd-block text-primary-500 hover-text-primary-800')

ee/changelogs/unreleased/9029-filter-issue-list-by-sub-epic.yml

+---
+title: Add an indicator icon to issues on subepics when filtering by epic
+merge_request: 27212
+author:
+type: added

ee/spec/frontend/filtered_search/filtered_search_manager_spec.js

+import { FILTERED_SEARCH } from '~/pages/constants';
+import FilteredSearchManager from 'ee/filtered_search/filtered_search_manager';
+import IssuableFilteredSearchTokenKeys from 'ee/filtered_search/issuable_filtered_search_token_keys';
+import FilteredSearchDropdownManager from '~/filtered_search/filtered_search_dropdown_manager';
+import FilteredSearchSpecHelper from 'helpers/filtered_search_spec_helper';
+
+const TEST_EPICS_ENDPOINT = '/test/epics/endpoint';
+
+describe('Filtered Search Manager (EE)', () => {
+  let manager;
+
+  const createSubject = () => {
+    manager = new FilteredSearchManager({
+      page: FILTERED_SEARCH.ISSUES,
+      filteredSearchTokenKeys: IssuableFilteredSearchTokenKeys,
+    });
+    manager.setup();
+  };
+
+  const findSearchInput = () => document.querySelector('.filtered-search');
+  const findTokensContainer = () => document.querySelector('.tokens-container');
+  const createVisualToken = (name, operator, value) => {
+    findTokensContainer().appendChild(
+      FilteredSearchSpecHelper.createFilterVisualToken(name, operator, value),
+    );
+  };
+
+  beforeEach(() => {
+    setFixtures(`
+      <div class="filtered-search-box">
+        <form>
+          <ul class="tokens-container list-unstyled">
+            ${FilteredSearchSpecHelper.createInputHTML()}
+          </ul>
+          <button class="clear-search" type="button">
+            <i class="fa fa-times"></i>
+          </button>
+        </form>
+      </div>
+    `);
+
+    const search = findSearchInput();
+    search.dataset.epicsEndpoint = TEST_EPICS_ENDPOINT;
+
+    jest.spyOn(FilteredSearchDropdownManager.prototype, 'setDropdown').mockImplementation();
+  });
+
+  afterEach(() => {
+    manager.cleanup();
+  });
+
+  describe('getSearchTokens', () => {
+    describe('Epic token', () => {
+      beforeEach(() => {
+        createSubject();
+      });
+
+      it.each`
+        token                                           | extraTokens
+        ${{ key: 'epic', operator: '=', value: '1' }}   | ${[{ key: 'include_subepics', operator: '=', value: '✓', symbol: '' }]}
+        ${{ key: 'epic', operator: '=', value: 'any' }} | ${[]}
+        ${{ key: 'epic', operator: '!=', value: '1' }}  | ${[]}
+      `('handles include_subepics with $token', ({ token, extraTokens }) => {
+        createVisualToken(token.key, token.operator, token.value);
+        const { tokens } = manager.getSearchTokens();
+
+        expect(tokens).toEqual([
+          { key: token.key, operator: token.operator, value: token.value.toString(), symbol: '' },
+          ...extraTokens,
+        ]);
+      });
+    });
+  });
+});

ee/spec/helpers/ee/issues_helper_spec.rb

@@ -43,6 +43,33 @@ describe EE::IssuesHelper do
     end
   end
 
+  describe '#issue_in_subepic?' do
+    let_it_be(:epic) { create(:epic) }
+    let_it_be(:epic_issue) { create(:epic_issue, epic: epic) }
+    let(:issue) { build_stubbed(:issue, epic_issue: epic_issue) }
+    let(:new_issue) { build_stubbed(:issue) }
+
+    it 'returns false if epic_id parameter is not set or is wildcard' do
+      ['', nil, 'none', 'any'].each do |epic_id|
+        expect(helper.issue_in_subepic?(issue, epic_id)).to be_falsy
+      end
+    end
+
+    it 'returns false if epic_id parameter is the same as issue epic_id' do
+      expect(helper.issue_in_subepic?(issue, epic.id)).to be_falsy
+    end
+
+    it 'returns false if the issue is not part of an epic' do
+      expect(helper.issue_in_subepic?(new_issue, epic.id)).to be_falsy
+    end
+
+    it 'returns true if epic_id parameter is not the same as issue epic_id' do
+      # When issue_in_subepic? is used, any epic with a different
+      # id than the one on the params is considered a child
+      expect(helper.issue_in_subepic?(issue, 'subepic_id')).to be_truthy
+    end
+  end
+
   describe '#show_moved_service_desk_issue_warning?' do
     let(:project1) { create(:project, service_desk_enabled: true) }
     let(:project2) { create(:project, service_desk_enabled: true) }

ee/spec/requests/projects/issues_controller_spec.rb

@@ -4,6 +4,7 @@ require 'spec_helper'
 
 describe Projects::IssuesController do
   let_it_be(:issue) { create(:issue) }
+  let_it_be(:group) { create(:group) }
   let_it_be(:project) { issue.project }
   let_it_be(:user) { issue.author }
   let_it_be(:blocking_issue) { create(:issue, project: project) }
@@ -38,4 +39,31 @@ describe Projects::IssuesController do
       end
     end
   end
+
+  describe 'GET #index' do
+    def get_issues
+      get project_issues_path(project, params: params)
+    end
+
+    context 'when listing epic issues' do
+      let_it_be(:epic) { create(:epic, group: group) }
+      let_it_be(:subepic) { create(:epic, group: group, parent: epic) }
+      let(:params) { { epic_id: epic.id, include_subepics: true } }
+
+      before do
+        get_issues # Warm the cache
+      end
+
+      it 'does not cause extra queries when there are other subepic issues' do
+        create(:epic_issue, issue: issue, epic: epic)
+
+        control = ActiveRecord::QueryRecorder.new { get_issues }
+
+        subepic_issue = create(:issue, project: project)
+        create(:epic_issue, issue: subepic_issue, epic: subepic)
+
+        expect { get_issues }.not_to exceed_query_limit(control)
+      end
+    end
+  end
 end

locale/gitlab.pot

@@ -21182,6 +21182,9 @@ msgstr ""
 msgid "This issue is currently blocked by the following issues: %{issues}."
 msgstr ""
 
+msgid "This issue is in a child epic of the filtered epic"
+msgstr ""
+
 msgid "This issue is locked."
 msgstr ""
 

spec/frontend/helpers/filtered_search_spec_helper.js

+export default class FilteredSearchSpecHelper {
+  static createFilterVisualTokenHTML(name, operator, value, isSelected) {
+    return FilteredSearchSpecHelper.createFilterVisualToken(name, operator, value, isSelected)
+      .outerHTML;
+  }
+
+  static createFilterVisualToken(name, operator, value, isSelected = false) {
+    const li = document.createElement('li');
+    li.classList.add('js-visual-token', 'filtered-search-token', `search-token-${name}`);
+
+    li.innerHTML = `
+      <div class="selectable ${isSelected ? 'selected' : ''}" role="button">
+        <div class="name">${name}</div>
+        <div class="operator">${operator}</div>
+        <div class="value-container">
+          <div class="value">${value}</div>
+          <div class="remove-token" role="button">
+            <i class="fa fa-close"></i>
+          </div>
+        </div>
+      </div>
+    `;
+
+    return li;
+  }
+
+  static createNameFilterVisualTokenHTML(name) {
+    return `
+      <li class="js-visual-token filtered-search-token">
+        <div class="name">${name}</div>
+      </li>
+    `;
+  }
+
+  static createNameOperatorFilterVisualTokenHTML(name, operator) {
+    return `
+      <li class="js-visual-token filtered-search-token">
+        <div class="name">${name}</div>
+        <div class="operator">${operator}</div>
+      </li>
+    `;
+  }
+
+  static createSearchVisualToken(name) {
+    const li = document.createElement('li');
+    li.classList.add('js-visual-token', 'filtered-search-term');
+    li.innerHTML = `<div class="name">${name}</div>`;
+    return li;
+  }
+
+  static createSearchVisualTokenHTML(name) {
+    return FilteredSearchSpecHelper.createSearchVisualToken(name).outerHTML;
+  }
+
+  static createInputHTML(placeholder = '', value = '') {
+    return `
+      <li class="input-token">
+        <input type='text' class='filtered-search' placeholder='${placeholder}' value='${value}'/>
+      </li>
+    `;
+  }
+
+  static createTokensContainerHTML(html, inputPlaceholder) {
+    return `
+      ${html}
+      ${FilteredSearchSpecHelper.createInputHTML(inputPlaceholder)}
+    `;
+  }
+}

spec/javascripts/helpers/filtered_search_spec_helper.js

-export default class FilteredSearchSpecHelper {
-  static createFilterVisualTokenHTML(name, operator, value, isSelected) {
-    return FilteredSearchSpecHelper.createFilterVisualToken(name, operator, value, isSelected)
-      .outerHTML;
-  }
-
-  static createFilterVisualToken(name, operator, value, isSelected = false) {
-    const li = document.createElement('li');
-    li.classList.add('js-visual-token', 'filtered-search-token', `search-token-${name}`);
-
-    li.innerHTML = `
-      <div class="selectable ${isSelected ? 'selected' : ''}" role="button">
-        <div class="name">${name}</div>
-        <div class="operator">${operator}</div>
-        <div class="value-container">
-          <div class="value">${value}</div>
-          <div class="remove-token" role="button">
-            <i class="fa fa-close"></i>
-          </div>
-        </div>
-      </div>
-    `;
-
-    return li;
-  }
-
-  static createNameFilterVisualTokenHTML(name) {
-    return `
-      <li class="js-visual-token filtered-search-token">
-        <div class="name">${name}</div>
-      </li>
-    `;
-  }
-
-  static createNameOperatorFilterVisualTokenHTML(name, operator) {
-    return `
-      <li class="js-visual-token filtered-search-token">
-        <div class="name">${name}</div>
-        <div class="operator">${operator}</div>
-      </li>
-    `;
-  }
-
-  static createSearchVisualToken(name) {
-    const li = document.createElement('li');
-    li.classList.add('js-visual-token', 'filtered-search-term');
-    li.innerHTML = `<div class="name">${name}</div>`;
-    return li;
-  }
-
-  static createSearchVisualTokenHTML(name) {
-    return FilteredSearchSpecHelper.createSearchVisualToken(name).outerHTML;
-  }
-
-  static createInputHTML(placeholder = '', value = '') {
-    return `
-      <li class="input-token">
-        <input type='text' class='filtered-search' placeholder='${placeholder}' value='${value}'/>
-      </li>
-    `;
-  }
-
-  static createTokensContainerHTML(html, inputPlaceholder) {
-    return `
-      ${html}
-      ${FilteredSearchSpecHelper.createInputHTML(inputPlaceholder)}
-    `;
-  }
-}
+export { default } from '../../frontend/helpers/filtered_search_spec_helper';