Search for epics by iid if search starts with &

Changelog: added
EE: true

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

@@ -22,6 +22,7 @@ import {
   issuableAttributesQueries,
   noAttributeId,
   defaultEpicSort,
+  epicIidPattern,
 } from '~/sidebar/constants';
 
 export default {
@@ -118,17 +119,37 @@ export default {
         return query;
       },
       skip() {
+        if (this.isEpic && this.searchTerm.startsWith('&') && this.searchTerm.length < 2) {
+          return true;
+        }
+
         return !this.editing;
       },
       debounce: 250,
       variables() {
-        return {
+        if (!this.isEpic) {
+          return {
+            fullPath: this.attrWorkspacePath,
+            title: this.searchTerm,
+            state: this.$options.IssuableAttributeState[this.issuableAttribute],
+          };
+        }
+
+        const variables = {
           fullPath: this.attrWorkspacePath,
-          title: this.searchTerm,
-          in: this.searchTerm && this.issuableAttribute === IssuableType.Epic ? 'TITLE' : undefined,
           state: this.$options.IssuableAttributeState[this.issuableAttribute],
-          sort: this.issuableAttribute === IssuableType.Epic ? defaultEpicSort : null,
+          sort: defaultEpicSort,
         };
+
+        if (epicIidPattern.test(this.searchTerm)) {
+          const matches = this.searchTerm.match(epicIidPattern);
+          variables.iidStartsWith = matches.groups.iid;
+        } else if (this.searchTerm !== '') {
+          variables.in = 'TITLE';
+          variables.title = this.searchTerm;
+        }
+
+        return variables;
       },
       update(data) {
         if (data?.workspace) {
@@ -214,6 +235,9 @@ export default {
         ),
       };
     },
+    isEpic() {
+      return this.issuableAttribute === IssuableType.Epic;
+    },
   },
   methods: {
     updateAttribute(attributeId) {

app/assets/javascripts/sidebar/constants.js

@@ -48,6 +48,8 @@ export const ASSIGNEES_DEBOUNCE_DELAY = DEFAULT_DEBOUNCE_AND_THROTTLE_MS;
 
 export const defaultEpicSort = 'TITLE_ASC';
 
+export const epicIidPattern = /^&(?<iid>\d+)$/;
+
 export const assigneesQueries = {
   [IssuableType.Issue]: {
     query: getIssueAssignees,

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

@@ -5,6 +5,7 @@ query issueEpics(
   $title: String
   $state: EpicState
   $in: [IssuableSearchableField!]
+  $iidStartsWith: String
 ) {
   workspace: group(fullPath: $fullPath) {
     attributes: epics(
@@ -13,6 +14,7 @@ query issueEpics(
       state: $state
       includeAncestorGroups: true
       includeDescendantGroups: false
+      iidStartsWith: $iidStartsWith
     ) {
       nodes {
         ...EpicFragment

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

@@ -452,7 +452,6 @@ describe('SidebarDropdownWidget', () => {
               fullPath: mockIssue.groupPath,
               sort: 'TITLE_ASC',
               state: 'opened',
-              title: '',
             });
           });
 
@@ -501,8 +500,21 @@ describe('SidebarDropdownWidget', () => {
                 fullPath: mockIssue.groupPath,
                 sort: 'TITLE_ASC',
                 state: 'opened',
-                title: '',
-                in: undefined,
+              });
+            });
+
+            it('sends a groupEpics query for an IID with the entered search term "&1"', async () => {
+              findSearchBox().vm.$emit('input', '&1');
+              await wrapper.vm.$nextTick();
+
+              // Account for debouncing
+              jest.runAllTimers();
+
+              expect(groupEpicsSpy).toHaveBeenNthCalledWith(2, {
+                fullPath: mockIssue.groupPath,
+                iidStartsWith: '1',
+                sort: 'TITLE_ASC',
+                state: 'opened',
               });
             });
           });

spec/frontend/sidebar/components/sidebar_dropdown_widget_spec.js

@@ -451,7 +451,6 @@ describe('SidebarDropdownWidget', () => {
 
             expect(projectMilestonesSpy).toHaveBeenNthCalledWith(1, {
               fullPath: mockIssue.projectPath,
-              sort: null,
               state: 'active',
               title: '',
             });
@@ -478,7 +477,6 @@ describe('SidebarDropdownWidget', () => {
 
               expect(projectMilestonesSpy).toHaveBeenNthCalledWith(2, {
                 fullPath: mockIssue.projectPath,
-                sort: null,
                 state: 'active',
                 title: mockSearchTerm,
               });