From 18a7f6365f709257d87d30b57243bc6f7fcc5054 Mon Sep 17 00:00:00 2001
From: Rajan Mistry <rmistry@gitlab.com>
Date: Mon, 23 Oct 2023 18:47:03 +0530
Subject: [PATCH 1/6] Add support to search by iid in work item input component

Add support to search by iid in work item input component.

Chnagelog: added
---
 .../shared/work_item_token_input.vue          | 125 +++++++++++++-----
 .../components/work_item_parent.vue           |   2 +
 .../javascripts/work_items/constants.js       |   2 +-
 .../graphql/project_work_items.query.graphql  |  11 +-
 locale/gitlab.pot                             |   2 +-
 .../shared/work_item_token_input_spec.js      |  57 +++++---
 .../components/work_item_parent_spec.js       |  14 +-
 spec/frontend/work_items/mock_data.js         |  64 +++++++--
 8 files changed, 206 insertions(+), 71 deletions(-)

diff --git a/app/assets/javascripts/work_items/components/shared/work_item_token_input.vue b/app/assets/javascripts/work_items/components/shared/work_item_token_input.vue
index ce3d4749f17e26..cb1a911bd7e4bf 100644
--- a/app/assets/javascripts/work_items/components/shared/work_item_token_input.vue
+++ b/app/assets/javascripts/work_items/components/shared/work_item_token_input.vue
@@ -1,8 +1,9 @@
 <script>
-import { GlTokenSelector } from '@gitlab/ui';
-import { debounce } from 'lodash';
+import { GlTokenSelector, GlAlert } from '@gitlab/ui';
+import { debounce, escapeRegExp } from 'lodash';
 import { getIdFromGraphQLId } from '~/graphql_shared/utils';
 import { DEFAULT_DEBOUNCE_AND_THROTTLE_MS } from '~/lib/utils/constants';
+import SafeHtml from '~/vue_shared/directives/safe_html';
 
 import groupWorkItemsQuery from '../../graphql/group_work_items.query.graphql';
 import projectWorkItemsQuery from '../../graphql/project_work_items.query.graphql';
@@ -15,7 +16,9 @@ import {
 export default {
   components: {
     GlTokenSelector,
+    GlAlert,
   },
+  directives: { SafeHtml },
   inject: ['isGroup'],
   props: {
     value: {
@@ -55,26 +58,29 @@ export default {
       variables() {
         return {
           fullPath: this.fullPath,
-          searchTerm: this.search?.title || this.search,
+          searchTerm: '',
           types: this.childrenType ? [this.childrenType] : [],
-          in: this.search ? 'TITLE' : undefined,
+          in: undefined,
+          isNumber: false,
         };
       },
       skip() {
         return !this.searchStarted;
       },
       update(data) {
-        return data.workspace.workItems.nodes.filter(
-          (wi) => !this.childrenIds.includes(wi.id) && this.parentWorkItemId !== wi.id,
-        );
+        return [
+          ...this.filterItems(data.workspace.workItemsByIid?.nodes),
+          ...this.filterItems(data.workspace.workItems.nodes),
+        ];
       },
     },
   },
   data() {
     return {
       availableWorkItems: [],
-      search: '',
+      query: '',
       searchStarted: false,
+      error: '',
     };
   },
   computed: {
@@ -105,7 +111,25 @@ export default {
   methods: {
     getIdFromGraphQLId,
     setSearchKey(value) {
-      this.search = value;
+      this.query = value;
+
+      // Query parameters for searching by text
+      const variables = {
+        searchTerm: value,
+        in: value ? 'TITLE' : undefined,
+        iid: null,
+        isNumber: false,
+      };
+
+      // Check if it is a number, add iid as query parameter
+      const isNumber = /^\d+$/.test(value);
+      if (isNumber && value) {
+        variables.iid = value;
+        variables.isNumber = isNumber;
+      }
+
+      // Fetch combined results of search by iid and search by title.
+      this.$apollo.queries.availableWorkItems.refetch(variables);
     },
     handleFocus() {
       this.searchStarted = true;
@@ -129,33 +153,66 @@ export default {
         }
       });
     },
+    formatResults(input) {
+      if (!this.query) {
+        return input;
+      }
+
+      // Check the query term in the result item
+      const escapedQuery = escapeRegExp(this.query.trim());
+      const regexp = new RegExp(`\\s*([^<]*?)(${escapedQuery})([^<]*)\\s*`, 'ig');
+
+      // Enclose the characters with strong tag
+      return input.replace(
+        regexp,
+        (__, $1, $2, $3) => `${$1}<strong class="gl-text-black-normal">${$2}</strong>${$3}`,
+      );
+    },
+    unsetError() {
+      this.error = '';
+    },
+    filterItems(items) {
+      return (
+        items?.filter(
+          (wi) => !this.childrenIds.includes(wi.id) && this.parentWorkItemId !== wi.id,
+        ) || []
+      );
+    },
   },
 };
 </script>
 <template>
-  <gl-token-selector
-    ref="tokenSelector"
-    v-model="workItemsToAdd"
-    :dropdown-items="availableWorkItems"
-    :loading="isLoading"
-    :placeholder="addInputPlaceholder"
-    menu-class="gl-dropdown-menu-wide dropdown-reduced-height gl-min-h-7!"
-    :container-class="tokenSelectorContainerClass"
-    data-testid="work-item-token-select-input"
-    @text-input="debouncedSearchKeyUpdate"
-    @focus="handleFocus"
-    @mouseover.native="handleMouseOver"
-    @mouseout.native="handleMouseOut"
-    @token-add="focusInputText"
-    @token-remove="focusInputText"
-    @blur="handleBlur"
-  >
-    <template #token-content="{ token }"> {{ token.iid }} {{ token.title }} </template>
-    <template #dropdown-item-content="{ dropdownItem }">
-      <div class="gl-display-flex">
-        <div class="gl-text-secondary gl-font-sm gl-mr-4">{{ dropdownItem.iid }}</div>
-        <div class="gl-text-truncate">{{ dropdownItem.title }}</div>
-      </div>
-    </template>
-  </gl-token-selector>
+  <div>
+    <gl-alert v-if="error" variant="danger" class="gl-mb-3" @dismiss="unsetError">
+      {{ error }}
+    </gl-alert>
+    <gl-token-selector
+      ref="tokenSelector"
+      v-model="workItemsToAdd"
+      :dropdown-items="availableWorkItems"
+      :loading="isLoading"
+      :placeholder="addInputPlaceholder"
+      menu-class="gl-dropdown-menu-wide dropdown-reduced-height gl-min-h-7!"
+      :container-class="tokenSelectorContainerClass"
+      data-testid="work-item-token-select-input"
+      @text-input="debouncedSearchKeyUpdate"
+      @focus="handleFocus"
+      @mouseover.native="handleMouseOver"
+      @mouseout.native="handleMouseOut"
+      @token-add="focusInputText"
+      @token-remove="focusInputText"
+      @blur="handleBlur"
+    >
+      <template #token-content="{ token }"> {{ token.iid }} {{ token.title }} </template>
+      <template #dropdown-item-content="{ dropdownItem }">
+        <div class="gl-display-flex">
+          <div
+            v-safe-html="formatResults(dropdownItem.iid)"
+            class="gl-text-secondary gl-font-sm gl-mr-4"
+          ></div>
+          <div v-safe-html="formatResults(dropdownItem.title)" class="gl-text-truncate"></div>
+        </div>
+      </template>
+    </gl-token-selector>
+  </div>
 </template>
diff --git a/app/assets/javascripts/work_items/components/work_item_parent.vue b/app/assets/javascripts/work_items/components/work_item_parent.vue
index d0e83ba8c21d4a..ce30f7985cf504 100644
--- a/app/assets/javascripts/work_items/components/work_item_parent.vue
+++ b/app/assets/javascripts/work_items/components/work_item_parent.vue
@@ -107,6 +107,8 @@ export default {
           searchTerm: this.search,
           types: this.parentType,
           in: this.search ? 'TITLE' : undefined,
+          iid: null,
+          isNumber: false,
         };
       },
       skip() {
diff --git a/app/assets/javascripts/work_items/constants.js b/app/assets/javascripts/work_items/constants.js
index e2dbfeb55a5d1f..3f45ea562a58bc 100644
--- a/app/assets/javascripts/work_items/constants.js
+++ b/app/assets/javascripts/work_items/constants.js
@@ -95,7 +95,7 @@ export const I18N_WORK_ITEM_CREATE_BUTTON_LABEL = s__('WorkItem|Create %{workIte
 export const I18N_WORK_ITEM_ADD_BUTTON_LABEL = s__('WorkItem|Add %{workItemType}');
 export const I18N_WORK_ITEM_ADD_MULTIPLE_BUTTON_LABEL = s__('WorkItem|Add %{workItemType}s');
 export const I18N_WORK_ITEM_SEARCH_INPUT_PLACEHOLDER = s__(
-  'WorkItem|Search existing %{workItemType}s',
+  'WorkItem|Search existing %{workItemType}s or type the reference ids',
 );
 export const I18N_WORK_ITEM_CONFIDENTIALITY_CHECKBOX_LABEL = s__(
   'WorkItem|This %{workItemType} is confidential and should only be visible to team members with at least Reporter access',
diff --git a/app/assets/javascripts/work_items/graphql/project_work_items.query.graphql b/app/assets/javascripts/work_items/graphql/project_work_items.query.graphql
index 2be436aa8c20d6..4d3a7bdf44f3fe 100644
--- a/app/assets/javascripts/work_items/graphql/project_work_items.query.graphql
+++ b/app/assets/javascripts/work_items/graphql/project_work_items.query.graphql
@@ -3,6 +3,8 @@ query projectWorkItems(
   $fullPath: ID!
   $types: [IssueType!]
   $in: [IssuableSearchableField!]
+  $iid: String = null
+  $isNumber: Boolean!
 ) {
   workspace: project(fullPath: $fullPath) {
     id
@@ -11,8 +13,13 @@ query projectWorkItems(
         id
         iid
         title
-        state
-        confidential
+      }
+    }
+    workItemsByIid: workItems(iid: $iid) @include(if: $isNumber) {
+      nodes {
+        id
+        iid
+        title
       }
     }
   }
diff --git a/locale/gitlab.pot b/locale/gitlab.pot
index 9e8e539ff109e5..11d1c4d67e1795 100644
--- a/locale/gitlab.pot
+++ b/locale/gitlab.pot
@@ -54519,7 +54519,7 @@ msgstr ""
 msgid "WorkItem|Save and overwrite"
 msgstr ""
 
-msgid "WorkItem|Search existing %{workItemType}s"
+msgid "WorkItem|Search existing %{workItemType}s or type the reference ids"
 msgstr ""
 
 msgid "WorkItem|Select type"
diff --git a/spec/frontend/work_items/components/shared/work_item_token_input_spec.js b/spec/frontend/work_items/components/shared/work_item_token_input_spec.js
index c70dbbd909d517..3044adbe772d00 100644
--- a/spec/frontend/work_items/components/shared/work_item_token_input_spec.js
+++ b/spec/frontend/work_items/components/shared/work_item_token_input_spec.js
@@ -8,7 +8,12 @@ import WorkItemTokenInput from '~/work_items/components/shared/work_item_token_i
 import { WORK_ITEM_TYPE_ENUM_TASK } from '~/work_items/constants';
 import groupWorkItemsQuery from '~/work_items/graphql/group_work_items.query.graphql';
 import projectWorkItemsQuery from '~/work_items/graphql/project_work_items.query.graphql';
-import { availableWorkItemsResponse, searchedWorkItemsResponse } from '../../mock_data';
+import {
+  availableWorkItemsResponse,
+  searchWorkItemsTextResponse,
+  searchWorkItemsIidResponse,
+  searchWorkItemsTextIidResponse,
+} from '../../mock_data';
 
 Vue.use(VueApollo);
 
@@ -16,15 +21,17 @@ describe('WorkItemTokenInput', () => {
   let wrapper;
 
   const availableWorkItemsResolver = jest.fn().mockResolvedValue(availableWorkItemsResponse);
-  const groupSearchedWorkItemResolver = jest.fn().mockResolvedValue(searchedWorkItemsResponse);
-  const searchedWorkItemResolver = jest.fn().mockResolvedValue(searchedWorkItemsResponse);
+  const groupSearchedWorkItemResolver = jest.fn().mockResolvedValue(searchWorkItemsTextResponse);
+  const searchWorkItemTextResolver = jest.fn().mockResolvedValue(searchWorkItemsTextResponse);
+  const searchWorkItemIidResolver = jest.fn().mockResolvedValue(searchWorkItemsIidResponse);
+  const searchWorkItemTextIidResolver = jest.fn().mockResolvedValue(searchWorkItemsTextIidResponse);
 
   const createComponent = async ({
     workItemsToAdd = [],
     parentConfidential = false,
     childrenType = WORK_ITEM_TYPE_ENUM_TASK,
     areWorkItemsToAddValid = true,
-    workItemsResolver = searchedWorkItemResolver,
+    workItemsResolver = searchWorkItemTextResolver,
     isGroup = false,
   } = {}) => {
     wrapper = shallowMountExtended(WorkItemTokenInput, {
@@ -61,24 +68,34 @@ describe('WorkItemTokenInput', () => {
       searchTerm: '',
       types: [WORK_ITEM_TYPE_ENUM_TASK],
       in: undefined,
+      iid: null,
+      isNumber: false,
     });
     expect(findTokenSelector().props('dropdownItems')).toHaveLength(3);
   });
 
-  it('searches for available work items when typing in input', async () => {
-    createComponent({ workItemsResolver: searchedWorkItemResolver });
-    findTokenSelector().vm.$emit('focus');
-    findTokenSelector().vm.$emit('text-input', 'Task 2');
-    await waitForPromises();
-
-    expect(searchedWorkItemResolver).toHaveBeenCalledWith({
-      fullPath: 'test-project-path',
-      searchTerm: 'Task 2',
-      types: [WORK_ITEM_TYPE_ENUM_TASK],
-      in: 'TITLE',
-    });
-    expect(findTokenSelector().props('dropdownItems')).toHaveLength(1);
-  });
+  it.each`
+    inputType         | input       | resolver                         | searchTerm  | iid      | isNumber | length
+    ${'iid'}          | ${'101'}    | ${searchWorkItemIidResolver}     | ${'101'}    | ${'101'} | ${true}  | ${1}
+    ${'text'}         | ${'Task 2'} | ${searchWorkItemTextResolver}    | ${'Task 2'} | ${null}  | ${false} | ${1}
+    ${'iid and text'} | ${'123'}    | ${searchWorkItemTextIidResolver} | ${'123'}    | ${'123'} | ${true}  | ${2}
+  `(
+    'searches by $inputType for available work items when typing in input',
+    async ({ input, resolver, searchTerm, iid, isNumber, length }) => {
+      createComponent({ workItemsResolver: resolver });
+      findTokenSelector().vm.$emit('focus');
+      findTokenSelector().vm.$emit('text-input', input);
+      await waitForPromises();
+
+      expect(resolver).toHaveBeenCalledWith({
+        searchTerm,
+        in: 'TITLE',
+        iid,
+        isNumber,
+      });
+      expect(findTokenSelector().props('dropdownItems')).toHaveLength(length);
+    },
+  );
 
   it('renders red border around token selector input when work item is not valid', () => {
     createComponent({
@@ -95,7 +112,7 @@ describe('WorkItemTokenInput', () => {
     });
 
     it('calls the project work items query', () => {
-      expect(searchedWorkItemResolver).toHaveBeenCalled();
+      expect(searchWorkItemTextResolver).toHaveBeenCalled();
     });
 
     it('skips calling the group work items query', () => {
@@ -110,7 +127,7 @@ describe('WorkItemTokenInput', () => {
     });
 
     it('skips calling the project work items query', () => {
-      expect(searchedWorkItemResolver).not.toHaveBeenCalled();
+      expect(searchWorkItemTextResolver).not.toHaveBeenCalled();
     });
 
     it('calls the group work items query', () => {
diff --git a/spec/frontend/work_items/components/work_item_parent_spec.js b/spec/frontend/work_items/components/work_item_parent_spec.js
index 0c02f0c63ec45b..11fe6dffbfa416 100644
--- a/spec/frontend/work_items/components/work_item_parent_spec.js
+++ b/spec/frontend/work_items/components/work_item_parent_spec.js
@@ -148,15 +148,27 @@ describe('WorkItemParent component', () => {
       });
 
       await findCollapsibleListbox().vm.$emit('shown');
-      await findCollapsibleListbox().vm.$emit('search', 'Objective 101');
 
       await waitForPromises();
 
+      expect(searchedItemQueryHandler).toHaveBeenCalledWith({
+        fullPath: 'full-path',
+        searchTerm: '',
+        types: [WORK_ITEM_TYPE_ENUM_OBJECTIVE],
+        in: undefined,
+        iid: null,
+        isNumber: false,
+      });
+
+      await findCollapsibleListbox().vm.$emit('search', 'Objective 101');
+
       expect(searchedItemQueryHandler).toHaveBeenCalledWith({
         fullPath: 'full-path',
         searchTerm: 'Objective 101',
         types: [WORK_ITEM_TYPE_ENUM_OBJECTIVE],
         in: 'TITLE',
+        iid: null,
+        isNumber: false,
       });
 
       await nextTick();
diff --git a/spec/frontend/work_items/mock_data.js b/spec/frontend/work_items/mock_data.js
index 06d59a3436798e..3a2e36f2d5ef89 100644
--- a/spec/frontend/work_items/mock_data.js
+++ b/spec/frontend/work_items/mock_data.js
@@ -1640,24 +1640,18 @@ export const availableObjectivesResponse = {
             id: 'gid://gitlab/WorkItem/716',
             iid: '122',
             title: 'Objective 101',
-            state: 'OPEN',
-            confidential: false,
             __typename: 'WorkItem',
           },
           {
             id: 'gid://gitlab/WorkItem/712',
             iid: '118',
             title: 'Objective 103',
-            state: 'OPEN',
-            confidential: false,
             __typename: 'WorkItem',
           },
           {
             id: 'gid://gitlab/WorkItem/711',
             iid: '117',
             title: 'Objective 102',
-            state: 'OPEN',
-            confidential: false,
             __typename: 'WorkItem',
           },
         ],
@@ -1677,8 +1671,6 @@ export const searchedObjectiveResponse = {
             id: 'gid://gitlab/WorkItem/716',
             iid: '122',
             title: 'Objective 101',
-            state: 'OPEN',
-            confidential: false,
             __typename: 'WorkItem',
           },
         ],
@@ -1687,7 +1679,7 @@ export const searchedObjectiveResponse = {
   },
 };
 
-export const searchedWorkItemsResponse = {
+export const searchWorkItemsTextResponse = {
   data: {
     workspace: {
       __typename: 'Project',
@@ -1698,9 +1690,57 @@ export const searchedWorkItemsResponse = {
             id: 'gid://gitlab/WorkItem/459',
             iid: '3',
             title: 'Task 2',
-            state: 'OPEN',
-            createdAt: '2022-08-03T12:41:54Z',
-            confidential: false,
+            __typename: 'WorkItem',
+          },
+        ],
+      },
+    },
+  },
+};
+
+export const searchWorkItemsIidResponse = {
+  data: {
+    workspace: {
+      __typename: 'Project',
+      id: 'gid://gitlab/Project/2',
+      workItems: {
+        nodes: [],
+      },
+      workItemsByIid: {
+        nodes: [
+          {
+            id: 'gid://gitlab/WorkItem/460',
+            iid: '101',
+            title: 'Task 3',
+            __typename: 'WorkItem',
+          },
+        ],
+      },
+    },
+  },
+};
+
+export const searchWorkItemsTextIidResponse = {
+  data: {
+    workspace: {
+      __typename: 'Project',
+      id: 'gid://gitlab/Project/2',
+      workItems: {
+        nodes: [
+          {
+            id: 'gid://gitlab/WorkItem/459',
+            iid: '3',
+            title: 'Task 123',
+            __typename: 'WorkItem',
+          },
+        ],
+      },
+      workItemsByIid: {
+        nodes: [
+          {
+            id: 'gid://gitlab/WorkItem/460',
+            iid: '123',
+            title: 'Task 2',
             __typename: 'WorkItem',
           },
         ],
-- 
GitLab


From 8705d16b615f4eeb40eb2547065450f3c36acd7a Mon Sep 17 00:00:00 2001
From: Rajan Mistry <rmistry@gitlab.com>
Date: Thu, 2 Nov 2023 18:53:44 +0530
Subject: [PATCH 2/6] Apply review suggestions for number check and text

---
 .../components/shared/work_item_token_input.vue           | 8 +++-----
 app/assets/javascripts/work_items/constants.js            | 2 +-
 locale/gitlab.pot                                         | 2 +-
 3 files changed, 5 insertions(+), 7 deletions(-)

diff --git a/app/assets/javascripts/work_items/components/shared/work_item_token_input.vue b/app/assets/javascripts/work_items/components/shared/work_item_token_input.vue
index cb1a911bd7e4bf..63814a920963c5 100644
--- a/app/assets/javascripts/work_items/components/shared/work_item_token_input.vue
+++ b/app/assets/javascripts/work_items/components/shared/work_item_token_input.vue
@@ -1,6 +1,6 @@
 <script>
 import { GlTokenSelector, GlAlert } from '@gitlab/ui';
-import { debounce, escapeRegExp } from 'lodash';
+import { debounce, escapeRegExp, isNumber } from 'lodash';
 import { getIdFromGraphQLId } from '~/graphql_shared/utils';
 import { DEFAULT_DEBOUNCE_AND_THROTTLE_MS } from '~/lib/utils/constants';
 import SafeHtml from '~/vue_shared/directives/safe_html';
@@ -60,7 +60,6 @@ export default {
           fullPath: this.fullPath,
           searchTerm: '',
           types: this.childrenType ? [this.childrenType] : [],
-          in: undefined,
           isNumber: false,
         };
       },
@@ -122,10 +121,9 @@ export default {
       };
 
       // Check if it is a number, add iid as query parameter
-      const isNumber = /^\d+$/.test(value);
-      if (isNumber && value) {
+      if (isNumber(parseInt(value, 10)) && value) {
         variables.iid = value;
-        variables.isNumber = isNumber;
+        variables.isNumber = true;
       }
 
       // Fetch combined results of search by iid and search by title.
diff --git a/app/assets/javascripts/work_items/constants.js b/app/assets/javascripts/work_items/constants.js
index 3f45ea562a58bc..365347ac1cbf80 100644
--- a/app/assets/javascripts/work_items/constants.js
+++ b/app/assets/javascripts/work_items/constants.js
@@ -95,7 +95,7 @@ export const I18N_WORK_ITEM_CREATE_BUTTON_LABEL = s__('WorkItem|Create %{workIte
 export const I18N_WORK_ITEM_ADD_BUTTON_LABEL = s__('WorkItem|Add %{workItemType}');
 export const I18N_WORK_ITEM_ADD_MULTIPLE_BUTTON_LABEL = s__('WorkItem|Add %{workItemType}s');
 export const I18N_WORK_ITEM_SEARCH_INPUT_PLACEHOLDER = s__(
-  'WorkItem|Search existing %{workItemType}s or type the reference ids',
+  'WorkItem|Search existing %{workItemType}s or use reference ID (e.x. 1234) ',
 );
 export const I18N_WORK_ITEM_CONFIDENTIALITY_CHECKBOX_LABEL = s__(
   'WorkItem|This %{workItemType} is confidential and should only be visible to team members with at least Reporter access',
diff --git a/locale/gitlab.pot b/locale/gitlab.pot
index 11d1c4d67e1795..b0728550538e1f 100644
--- a/locale/gitlab.pot
+++ b/locale/gitlab.pot
@@ -54519,7 +54519,7 @@ msgstr ""
 msgid "WorkItem|Save and overwrite"
 msgstr ""
 
-msgid "WorkItem|Search existing %{workItemType}s or type the reference ids"
+msgid "WorkItem|Search existing %{workItemType}s or use reference ID (e.x. 1234) "
 msgstr ""
 
 msgid "WorkItem|Select type"
-- 
GitLab


From aeb07058bafd5b6ee077f8770b29c53f81972c3c Mon Sep 17 00:00:00 2001
From: Rajan Mistry <rmistry@gitlab.com>
Date: Thu, 2 Nov 2023 20:27:22 +0530
Subject: [PATCH 3/6] Reuse highlighter from gfm_autocomplete

---
 .../components/shared/work_item_token_input.vue | 17 ++++++-----------
 1 file changed, 6 insertions(+), 11 deletions(-)

diff --git a/app/assets/javascripts/work_items/components/shared/work_item_token_input.vue b/app/assets/javascripts/work_items/components/shared/work_item_token_input.vue
index 63814a920963c5..65817c2c6ddfca 100644
--- a/app/assets/javascripts/work_items/components/shared/work_item_token_input.vue
+++ b/app/assets/javascripts/work_items/components/shared/work_item_token_input.vue
@@ -1,9 +1,12 @@
 <script>
 import { GlTokenSelector, GlAlert } from '@gitlab/ui';
-import { debounce, escapeRegExp, isNumber } from 'lodash';
+import { debounce } from 'lodash';
+
 import { getIdFromGraphQLId } from '~/graphql_shared/utils';
+import { isNumeric } from '~/lib/utils/number_utils';
 import { DEFAULT_DEBOUNCE_AND_THROTTLE_MS } from '~/lib/utils/constants';
 import SafeHtml from '~/vue_shared/directives/safe_html';
+import { highlighter } from 'ee_else_ce/gfm_auto_complete';
 
 import groupWorkItemsQuery from '../../graphql/group_work_items.query.graphql';
 import projectWorkItemsQuery from '../../graphql/project_work_items.query.graphql';
@@ -121,7 +124,7 @@ export default {
       };
 
       // Check if it is a number, add iid as query parameter
-      if (isNumber(parseInt(value, 10)) && value) {
+      if (isNumeric(value) && value) {
         variables.iid = value;
         variables.isNumber = true;
       }
@@ -156,15 +159,7 @@ export default {
         return input;
       }
 
-      // Check the query term in the result item
-      const escapedQuery = escapeRegExp(this.query.trim());
-      const regexp = new RegExp(`\\s*([^<]*?)(${escapedQuery})([^<]*)\\s*`, 'ig');
-
-      // Enclose the characters with strong tag
-      return input.replace(
-        regexp,
-        (__, $1, $2, $3) => `${$1}<strong class="gl-text-black-normal">${$2}</strong>${$3}`,
-      );
+      return highlighter(`<span class="gl-text-black-normal">${input}</span>`, this.query);
     },
     unsetError() {
       this.error = '';
-- 
GitLab


From 6e04e78bce3a082d9769c9d4fb9c3af6c27ab360 Mon Sep 17 00:00:00 2001
From: Rajan Mistry <rmistry@gitlab.com>
Date: Thu, 2 Nov 2023 23:07:04 +0530
Subject: [PATCH 4/6] Handle errors after resolving merge conflict

---
 .../work_items/graphql/group_work_items.query.graphql    | 2 --
 spec/frontend/work_items/mock_data.js                    | 9 ---------
 2 files changed, 11 deletions(-)

diff --git a/app/assets/javascripts/work_items/graphql/group_work_items.query.graphql b/app/assets/javascripts/work_items/graphql/group_work_items.query.graphql
index 320bb4a2494502..5332e21a0cbd7d 100644
--- a/app/assets/javascripts/work_items/graphql/group_work_items.query.graphql
+++ b/app/assets/javascripts/work_items/graphql/group_work_items.query.graphql
@@ -11,8 +11,6 @@ query groupWorkItems(
         id
         iid
         title
-        state
-        confidential
       }
     }
   }
diff --git a/spec/frontend/work_items/mock_data.js b/spec/frontend/work_items/mock_data.js
index 3a2e36f2d5ef89..41e8a01de36272 100644
--- a/spec/frontend/work_items/mock_data.js
+++ b/spec/frontend/work_items/mock_data.js
@@ -1600,27 +1600,18 @@ export const availableWorkItemsResponse = {
             id: 'gid://gitlab/WorkItem/458',
             iid: '2',
             title: 'Task 1',
-            state: 'OPEN',
-            createdAt: '2022-08-03T12:41:54Z',
-            confidential: false,
             __typename: 'WorkItem',
           },
           {
             id: 'gid://gitlab/WorkItem/459',
             iid: '3',
             title: 'Task 2',
-            state: 'OPEN',
-            createdAt: '2022-08-03T12:41:54Z',
-            confidential: false,
             __typename: 'WorkItem',
           },
           {
             id: 'gid://gitlab/WorkItem/460',
             iid: '4',
             title: 'Task 3',
-            state: 'OPEN',
-            createdAt: '2022-08-03T12:41:54Z',
-            confidential: true,
             __typename: 'WorkItem',
           },
         ],
-- 
GitLab


From 4b635311159a40ce8da2568e095efce420fe351c Mon Sep 17 00:00:00 2001
From: Rajan Mistry <rmistry@gitlab.com>
Date: Mon, 6 Nov 2023 14:13:39 +0530
Subject: [PATCH 5/6] Restrict search by types while searching with iids

---
 .../shared/work_item_token_input.vue          |  4 +++
 .../javascripts/work_items/constants.js       |  5 +++-
 .../graphql/project_work_items.query.graphql  |  2 +-
 locale/gitlab.pot                             |  5 +++-
 .../shared/work_item_token_input_spec.js      | 29 +++++++++++++++++--
 5 files changed, 40 insertions(+), 5 deletions(-)

diff --git a/app/assets/javascripts/work_items/components/shared/work_item_token_input.vue b/app/assets/javascripts/work_items/components/shared/work_item_token_input.vue
index 65817c2c6ddfca..c122db6c9024ee 100644
--- a/app/assets/javascripts/work_items/components/shared/work_item_token_input.vue
+++ b/app/assets/javascripts/work_items/components/shared/work_item_token_input.vue
@@ -13,6 +13,7 @@ import projectWorkItemsQuery from '../../graphql/project_work_items.query.graphq
 import {
   WORK_ITEMS_TYPE_MAP,
   I18N_WORK_ITEM_SEARCH_INPUT_PLACEHOLDER,
+  I18N_WORK_ITEM_SEARCH_ERROR,
   sprintfWorkItem,
 } from '../../constants';
 
@@ -75,6 +76,9 @@ export default {
           ...this.filterItems(data.workspace.workItems.nodes),
         ];
       },
+      error() {
+        this.error = sprintfWorkItem(I18N_WORK_ITEM_SEARCH_ERROR, this.childrenTypeName);
+      },
     },
   },
   data() {
diff --git a/app/assets/javascripts/work_items/constants.js b/app/assets/javascripts/work_items/constants.js
index 365347ac1cbf80..8b933679867ffd 100644
--- a/app/assets/javascripts/work_items/constants.js
+++ b/app/assets/javascripts/work_items/constants.js
@@ -95,7 +95,10 @@ export const I18N_WORK_ITEM_CREATE_BUTTON_LABEL = s__('WorkItem|Create %{workIte
 export const I18N_WORK_ITEM_ADD_BUTTON_LABEL = s__('WorkItem|Add %{workItemType}');
 export const I18N_WORK_ITEM_ADD_MULTIPLE_BUTTON_LABEL = s__('WorkItem|Add %{workItemType}s');
 export const I18N_WORK_ITEM_SEARCH_INPUT_PLACEHOLDER = s__(
-  'WorkItem|Search existing %{workItemType}s or use reference ID (e.x. 1234) ',
+  'WorkItem|Search existing %{workItemType}s or use reference ID (e.x. 1234)',
+);
+export const I18N_WORK_ITEM_SEARCH_ERROR = s__(
+  'WorkItem|Something went wrong while fetching the %{workItemType}. Please try again.',
 );
 export const I18N_WORK_ITEM_CONFIDENTIALITY_CHECKBOX_LABEL = s__(
   'WorkItem|This %{workItemType} is confidential and should only be visible to team members with at least Reporter access',
diff --git a/app/assets/javascripts/work_items/graphql/project_work_items.query.graphql b/app/assets/javascripts/work_items/graphql/project_work_items.query.graphql
index 4d3a7bdf44f3fe..3aeaaa1116a541 100644
--- a/app/assets/javascripts/work_items/graphql/project_work_items.query.graphql
+++ b/app/assets/javascripts/work_items/graphql/project_work_items.query.graphql
@@ -15,7 +15,7 @@ query projectWorkItems(
         title
       }
     }
-    workItemsByIid: workItems(iid: $iid) @include(if: $isNumber) {
+    workItemsByIid: workItems(iid: $iid, types: $types) @include(if: $isNumber) {
       nodes {
         id
         iid
diff --git a/locale/gitlab.pot b/locale/gitlab.pot
index b0728550538e1f..8ea0e1f6ab4dc6 100644
--- a/locale/gitlab.pot
+++ b/locale/gitlab.pot
@@ -54519,7 +54519,7 @@ msgstr ""
 msgid "WorkItem|Save and overwrite"
 msgstr ""
 
-msgid "WorkItem|Search existing %{workItemType}s or use reference ID (e.x. 1234) "
+msgid "WorkItem|Search existing %{workItemType}s or use reference ID (e.x. 1234)"
 msgstr ""
 
 msgid "WorkItem|Select type"
@@ -54579,6 +54579,9 @@ msgstr ""
 msgid "WorkItem|Something went wrong while fetching milestones. Please try again."
 msgstr ""
 
+msgid "WorkItem|Something went wrong while fetching the %{workItemType}. Please try again."
+msgstr ""
+
 msgid "WorkItem|Something went wrong while fetching work item award emojis. Please try again."
 msgstr ""
 
diff --git a/spec/frontend/work_items/components/shared/work_item_token_input_spec.js b/spec/frontend/work_items/components/shared/work_item_token_input_spec.js
index 3044adbe772d00..5726aaaa2d0419 100644
--- a/spec/frontend/work_items/components/shared/work_item_token_input_spec.js
+++ b/spec/frontend/work_items/components/shared/work_item_token_input_spec.js
@@ -1,5 +1,5 @@
-import Vue from 'vue';
-import { GlTokenSelector } from '@gitlab/ui';
+import Vue, { nextTick } from 'vue';
+import { GlTokenSelector, GlAlert } from '@gitlab/ui';
 import VueApollo from 'vue-apollo';
 import { shallowMountExtended } from 'helpers/vue_test_utils_helper';
 import createMockApollo from 'helpers/mock_apollo_helper';
@@ -57,6 +57,7 @@ describe('WorkItemTokenInput', () => {
   };
 
   const findTokenSelector = () => wrapper.findComponent(GlTokenSelector);
+  const findGlAlert = () => wrapper.findComponent(GlAlert);
 
   it('searches for available work items on focus', async () => {
     createComponent({ workItemsResolver: availableWorkItemsResolver });
@@ -134,4 +135,28 @@ describe('WorkItemTokenInput', () => {
       expect(groupSearchedWorkItemResolver).toHaveBeenCalled();
     });
   });
+
+  describe('when project work items query fails', () => {
+    beforeEach(() => {
+      createComponent({
+        workItemsResolver: jest
+          .fn()
+          .mockRejectedValue('Something went wrong while fetching the results'),
+      });
+      findTokenSelector().vm.$emit('focus');
+    });
+
+    it('shows error and allows error alert to be closed', async () => {
+      await waitForPromises();
+      expect(findGlAlert().exists()).toBe(true);
+      expect(findGlAlert().text()).toBe(
+        'Something went wrong while fetching the task. Please try again.',
+      );
+
+      findGlAlert().vm.$emit('dismiss');
+      await nextTick();
+
+      expect(findGlAlert().exists()).toBe(false);
+    });
+  });
 });
-- 
GitLab


From cbdd208c11b6de67ea1ad5bc2e78865f89ccd7e4 Mon Sep 17 00:00:00 2001
From: Rajan Mistry <rmistry@gitlab.com>
Date: Wed, 8 Nov 2023 09:34:37 +0530
Subject: [PATCH 6/6] Change placeholder text as per new suggestions

---
 app/assets/javascripts/work_items/constants.js | 4 +---
 locale/gitlab.pot                              | 2 +-
 2 files changed, 2 insertions(+), 4 deletions(-)

diff --git a/app/assets/javascripts/work_items/constants.js b/app/assets/javascripts/work_items/constants.js
index 8b933679867ffd..c3d3d62351565c 100644
--- a/app/assets/javascripts/work_items/constants.js
+++ b/app/assets/javascripts/work_items/constants.js
@@ -94,9 +94,7 @@ export const I18N_WORK_ITEM_FETCH_AWARD_EMOJI_ERROR = s__(
 export const I18N_WORK_ITEM_CREATE_BUTTON_LABEL = s__('WorkItem|Create %{workItemType}');
 export const I18N_WORK_ITEM_ADD_BUTTON_LABEL = s__('WorkItem|Add %{workItemType}');
 export const I18N_WORK_ITEM_ADD_MULTIPLE_BUTTON_LABEL = s__('WorkItem|Add %{workItemType}s');
-export const I18N_WORK_ITEM_SEARCH_INPUT_PLACEHOLDER = s__(
-  'WorkItem|Search existing %{workItemType}s or use reference ID (e.x. 1234)',
-);
+export const I18N_WORK_ITEM_SEARCH_INPUT_PLACEHOLDER = s__('WorkItem|Search existing items');
 export const I18N_WORK_ITEM_SEARCH_ERROR = s__(
   'WorkItem|Something went wrong while fetching the %{workItemType}. Please try again.',
 );
diff --git a/locale/gitlab.pot b/locale/gitlab.pot
index 8ea0e1f6ab4dc6..b4fcb747bd211d 100644
--- a/locale/gitlab.pot
+++ b/locale/gitlab.pot
@@ -54519,7 +54519,7 @@ msgstr ""
 msgid "WorkItem|Save and overwrite"
 msgstr ""
 
-msgid "WorkItem|Search existing %{workItemType}s or use reference ID (e.x. 1234)"
+msgid "WorkItem|Search existing items"
 msgstr ""
 
 msgid "WorkItem|Select type"
-- 
GitLab