Merge branch...

Merge branch '434169-implement-search-mechanism-for-work-item-epic-in-legacy-issue-s-sidebar' into 'master' 

Enable search mechanism if work item epic are shown in issue sidebar

See merge request https://gitlab.com/gitlab-org/gitlab/-/merge_requests/144737



Merged-by: Florie Guibert <fguibert@gitlab.com>
Approved-by: Serena Fang <sfang@gitlab.com>
Approved-by: Florie Guibert <fguibert@gitlab.com>
Approved-by: Elwyn Benson <ebenson@gitlab.com>
Co-authored-by: Rajan Mistry <rmistry@gitlab.com>

app/assets/javascripts/sidebar/components/sidebar_dropdown.vue

@@ -29,6 +29,7 @@ import {
 import { issuableAttributesQueries } from 'ee_else_ce/sidebar/queries/constants';
 import { createAlert } from '~/alert';
 import { PathIdSeparator } from '~/related_issues/constants';
+import { WORK_ITEM_TYPE_ENUM_EPIC } from '~/work_items/constants';
 
 export default {
   noAttributeId,
@@ -123,6 +124,10 @@ export default {
           includeWorkItems: this.showWorkItemEpics,
         };
 
+        if (this.showWorkItemEpics) {
+          variables.types = [WORK_ITEM_TYPE_ENUM_EPIC];
+        }
+
         if (epicIidPattern.test(this.searchTerm)) {
           const matches = this.searchTerm.match(epicIidPattern);
           variables.iidStartsWith = matches.groups.iid;
@@ -222,12 +227,7 @@ export default {
     @show="handleShow"
     @shown="setFocus"
   >
-    <gl-search-box-by-type
-      v-if="!showWorkItemEpics"
-      ref="search"
-      v-model="searchTerm"
-      :placeholder="__('Search')"
-    />
+    <gl-search-box-by-type ref="search" v-model="searchTerm" :placeholder="__('Search')" />
     <gl-dropdown-item
       :data-testid="`no-${formatIssuableAttribute.kebab}-item`"
       is-check-item

ee/app/assets/javascripts/sidebar/queries/group_epics.query.graphql

@@ -7,6 +7,7 @@ query issueEpics(
   $in: [IssuableSearchableField!]
   $iidStartsWith: String
   $includeWorkItems: Boolean!
+  $types: [IssueType!]
 ) {
   workspace: group(fullPath: $fullPath) {
     id
@@ -23,7 +24,7 @@ query issueEpics(
         state
       }
     }
-    workItems @include(if: $includeWorkItems) {
+    workItems(types: $types) @include(if: $includeWorkItems) {
       nodes {
         id
         title

ee/spec/features/issues/epic_in_issue_sidebar_spec.rb

@@ -25,7 +25,6 @@
     before do
       group.add_owner(user)
 
-      # disable work item search until work items filters are available
       stub_feature_flags(display_work_item_epic_issue_sidebar: false)
 
       sign_in user
@@ -55,6 +54,7 @@
             expect(page).to have_content epic1.title
             expect(page).to have_content epic2.title
             expect(page).to have_content epic3.title
+            expect(page).not_to have_content work_item_epic.title
           end
         end
       end
@@ -170,6 +170,11 @@
         click_edit
 
         aggregate_failures do
+          expect(page).to have_selector('.gl-dropdown-contents .gl-dropdown-item', count: 5)
+          expect(page).to have_content 'No epic'
+          expect(page).to have_content epic1.title
+          expect(page).to have_content epic2.title
+          expect(page).to have_content epic3.title
           expect(page).to have_content work_item_epic.title
         end
       end

ee/spec/frontend/sidebar/components/sidebar_dropdown_widget_spec.js

-import { GlDropdown, GlFormInput, GlSearchBoxByType } from '@gitlab/ui';
+import { GlDropdown, GlFormInput } from '@gitlab/ui';
 import { mount } from '@vue/test-utils';
 import Vue from 'vue';
 import VueApollo from 'vue-apollo';
@@ -19,7 +19,7 @@ import { extendedWrapper } from 'helpers/vue_test_utils_helper';
 import waitForPromises from 'helpers/wait_for_promises';
 import { createAlert } from '~/alert';
 import { TYPE_ISSUE } from '~/issues/constants';
-import { WORK_ITEM_TYPE_VALUE_EPIC } from '~/work_items/constants';
+import { WORK_ITEM_TYPE_VALUE_EPIC, WORK_ITEM_TYPE_ENUM_EPIC } from '~/work_items/constants';
 import { clickEdit, search } from '../helpers';
 
 import {
@@ -51,7 +51,6 @@ describe('SidebarDropdownWidget', () => {
   const findSidebarDropdown = () => wrapper.findComponent(SidebarDropdown);
   const findPopoverCta = () => wrapper.findByTestId('confirm-edit-cta');
   const findPopoverCancel = () => wrapper.findByTestId('confirm-edit-cancel');
-  const findSearchBox = () => wrapper.findComponent(GlSearchBoxByType);
 
   const waitForDropdown = async () => {
     /** This sequence is important to wait for
@@ -108,6 +107,7 @@ describe('SidebarDropdownWidget', () => {
 
   describe('with mock apollo', () => {
     let error;
+    const mockSearchTerm = 'foobar';
 
     beforeEach(() => {
       jest.spyOn(Sentry, 'captureException');
@@ -155,8 +155,6 @@ describe('SidebarDropdownWidget', () => {
           let groupEpicsSpy;
 
           describe('when a user is searching epics', () => {
-            const mockSearchTerm = 'foobar';
-
             beforeEach(async () => {
               groupEpicsSpy = jest.fn().mockResolvedValueOnce(emptyGroupEpicsResponse);
               await createComponentWithApollo({ groupEpicsSpy });
@@ -301,15 +299,6 @@ describe('SidebarDropdownWidget', () => {
             .mockResolvedValue(mockSetWorkItemEpicNullMutationResponse);
           const groupWorkItemEpicsSpy = jest.fn().mockResolvedValue(mockGroupWorkItemEpicsResponse);
 
-          it('search textbox is not displayed', async () => {
-            await createComponentWithApollo({
-              showWorkItemEpics: true,
-            });
-
-            await clickEdit(wrapper);
-            expect(findSearchBox().exists()).toBe(false);
-          });
-
           describe('when hasParent is true', () => {
             beforeEach(async () => {
               await createComponentWithApollo({
@@ -322,6 +311,20 @@ describe('SidebarDropdownWidget', () => {
               await clickEdit(wrapper);
             });
 
+            it('sends a groupEpics query with the entered search term "foo" and in TITLE param', async () => {
+              await search(wrapper, mockSearchTerm);
+
+              expect(groupWorkItemEpicsSpy).toHaveBeenCalledWith({
+                fullPath: mockIssue.groupPath,
+                sort: 'TITLE_ASC',
+                state: 'opened',
+                title: mockSearchTerm,
+                includeWorkItems: true,
+                in: 'TITLE',
+                types: [WORK_ITEM_TYPE_ENUM_EPIC],
+              });
+            });
+
             it('calls work item query to fetch current work item epic', () => {
               expect(currentEpicHasParentSpy).toHaveBeenCalled();
               expect(currentWorkItemEpicSpy).toHaveBeenCalled();