From d9b2bb3d0647fa9576569a634faec799d9c1ac98 Mon Sep 17 00:00:00 2001
From: Rajan Mistry <rmistry@gitlab.com>
Date: Wed, 1 Nov 2023 22:43:29 +0530
Subject: [PATCH 1/6] Add support to search by work item links in token input

Add support to search by work item links in token input

Changelog: added
---
 .../shared/work_item_token_input.vue          |  80 ++++--
 .../components/work_item_parent_inline.vue    |   2 +-
 .../javascripts/work_items/constants.js       |   8 +-
 .../graphql/project_work_items.query.graphql  |   7 +-
 .../work_items_by_references.query.graphql    |  10 +
 locale/gitlab.pot                             |   5 +-
 .../work_items/linked_work_items_spec.rb      |  52 ++--
 .../shared/work_item_token_input_spec.js      | 232 +++++++++++++++---
 .../work_item_parent_inline_spec.js           |   6 +-
 .../work_item_parent_with_edit_spec.js        |   4 +
 spec/frontend/work_items/mock_data.js         |  39 +++
 11 files changed, 365 insertions(+), 80 deletions(-)
 create mode 100644 app/assets/javascripts/work_items/graphql/work_items_by_references.query.graphql

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 c122db6c9024ee..ecda94395fb37a 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,19 +1,22 @@
 <script>
 import { GlTokenSelector, GlAlert } from '@gitlab/ui';
 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 { isSafeURL } from '~/lib/utils/url_utility';
+
 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';
+import workItemsByReferencesQuery from '../../graphql/work_items_by_references.query.graphql';
 import {
   WORK_ITEMS_TYPE_MAP,
   I18N_WORK_ITEM_SEARCH_INPUT_PLACEHOLDER,
   I18N_WORK_ITEM_SEARCH_ERROR,
+  I18N_WORK_ITEM_NO_MATCHES_FOUND,
   sprintfWorkItem,
 } from '../../constants';
 
@@ -64,7 +67,6 @@ export default {
           fullPath: this.fullPath,
           searchTerm: '',
           types: this.childrenType ? [this.childrenType] : [],
-          isNumber: false,
         };
       },
       skip() {
@@ -73,7 +75,7 @@ export default {
       update(data) {
         return [
           ...this.filterItems(data.workspace.workItemsByIid?.nodes),
-          ...this.filterItems(data.workspace.workItems.nodes),
+          ...this.filterItems(data.workspace.workItems?.nodes),
         ];
       },
       error() {
@@ -87,6 +89,9 @@ export default {
       query: '',
       searchStarted: false,
       error: '',
+      textInputAttrs: {
+        class: 'gl-min-w-fit-content!',
+      },
     };
   },
   computed: {
@@ -102,7 +107,7 @@ export default {
       return this.$apollo.queries.availableWorkItems.loading;
     },
     addInputPlaceholder() {
-      return sprintfWorkItem(I18N_WORK_ITEM_SEARCH_INPUT_PLACEHOLDER, this.childrenTypeName);
+      return I18N_WORK_ITEM_SEARCH_INPUT_PLACEHOLDER;
     },
     childrenTypeName() {
       return WORK_ITEMS_TYPE_MAP[this.childrenType]?.name;
@@ -110,31 +115,58 @@ export default {
     tokenSelectorContainerClass() {
       return !this.areWorkItemsToAddValid ? 'gl-inset-border-1-red-500!' : '';
     },
+    noMatchesFoundMessage() {
+      return I18N_WORK_ITEM_NO_MATCHES_FOUND;
+    },
   },
   created() {
     this.debouncedSearchKeyUpdate = debounce(this.setSearchKey, DEFAULT_DEBOUNCE_AND_THROTTLE_MS);
   },
   methods: {
     getIdFromGraphQLId,
-    setSearchKey(value) {
-      this.query = value;
+    async setSearchKey(value) {
+      /**
+       * The regular expression checks if the `value` is
+       * a project work item or group work item.
+       * e.g., gitlab-org/project-path#101 or gitlab-org&101
+       */
+      const referenceRegExp = /^([\w-]+(?:\/[\w-]+)*)[#&](\d+)$/;
+      const isReference = new RegExp(referenceRegExp).test(value);
+      this.searchTerm = value;
+      // Check if it is a URL or reference
+      if (isReference || isSafeURL(value)) {
+        const {
+          data: {
+            workItemsByReference: { nodes },
+          },
+        } = await this.$apollo.query({
+          query: workItemsByReferencesQuery,
+          variables: {
+            contextNamespacePath: this.fullPath,
+            refs: [value],
+          },
+        });
 
-      // Query parameters for searching by text
-      const variables = {
-        searchTerm: value,
-        in: value ? 'TITLE' : undefined,
-        iid: null,
-        isNumber: false,
-      };
+        this.availableWorkItems = nodes;
+      } else {
+        // Query parameters for searching by text
+        const variables = {
+          searchTerm: this.searchTerm,
+          in: this.searchTerm ? 'TITLE' : undefined,
+          iid: null,
+          searchByIid: false,
+          searchByText: true,
+        };
 
-      // Check if it is a number, add iid as query parameter
-      if (isNumeric(value) && value) {
-        variables.iid = value;
-        variables.isNumber = true;
-      }
+        // Check if it is a number, add iid as query parameter
+        if (isNumeric(this.searchTerm) && this.searchTerm) {
+          variables.iid = this.searchTerm;
+          variables.searchByIid = true;
+        }
 
-      // Fetch combined results of search by iid and search by title.
-      this.$apollo.queries.availableWorkItems.refetch(variables);
+        // Fetch combined results of search by iid and search by title.
+        this.$apollo.queries.availableWorkItems.refetch(variables);
+      }
     },
     handleFocus() {
       this.searchStarted = true;
@@ -159,11 +191,11 @@ export default {
       });
     },
     formatResults(input) {
-      if (!this.query) {
+      if (!this.searchTerm) {
         return input;
       }
 
-      return highlighter(`<span class="gl-text-black-normal">${input}</span>`, this.query);
+      return highlighter(`<span class="gl-text-black-normal">${input}</span>`, this.searchTerm);
     },
     unsetError() {
       this.error = '';
@@ -192,6 +224,7 @@ export default {
       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-attrs="textInputAttrs"
       @text-input="debouncedSearchKeyUpdate"
       @focus="handleFocus"
       @mouseover.native="handleMouseOver"
@@ -210,6 +243,9 @@ export default {
           <div v-safe-html="formatResults(dropdownItem.title)" class="gl-text-truncate"></div>
         </div>
       </template>
+      <template #no-results-content>
+        <span data-testid="no-match-found-namespace-message">{{ noMatchesFoundMessage }}</span>
+      </template>
     </gl-token-selector>
   </div>
 </template>
diff --git a/app/assets/javascripts/work_items/components/work_item_parent_inline.vue b/app/assets/javascripts/work_items/components/work_item_parent_inline.vue
index 0c0842a3e051e8..bb75de677c3ec7 100644
--- a/app/assets/javascripts/work_items/components/work_item_parent_inline.vue
+++ b/app/assets/javascripts/work_items/components/work_item_parent_inline.vue
@@ -108,7 +108,7 @@ export default {
           types: this.parentType,
           in: this.search ? 'TITLE' : undefined,
           iid: null,
-          isNumber: false,
+          searchByIid: false,
         };
       },
       skip() {
diff --git a/app/assets/javascripts/work_items/constants.js b/app/assets/javascripts/work_items/constants.js
index 41cf5d8932d507..51f63b147ac2a7 100644
--- a/app/assets/javascripts/work_items/constants.js
+++ b/app/assets/javascripts/work_items/constants.js
@@ -46,6 +46,9 @@ export const WORK_ITEM_TYPE_VALUE_REQUIREMENTS = 'Requirements';
 export const WORK_ITEM_TYPE_VALUE_KEY_RESULT = 'Key Result';
 export const WORK_ITEM_TYPE_VALUE_OBJECTIVE = 'Objective';
 
+export const NAMESPACE_GROUP = 'group';
+export const NAMESPACE_PROJECT = 'project';
+
 export const WORK_ITEM_TITLE_MAX_LENGTH = 255;
 
 export const i18n = {
@@ -91,10 +94,13 @@ 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 items');
+export const I18N_WORK_ITEM_SEARCH_INPUT_PLACEHOLDER = s__(
+  'WorkItem|Search existing items, paste URL, or enter reference ID',
+);
 export const I18N_WORK_ITEM_SEARCH_ERROR = s__(
   'WorkItem|Something went wrong while fetching the %{workItemType}. Please try again.',
 );
+export const I18N_WORK_ITEM_NO_MATCHES_FOUND = s__('WorkItem|No matches found');
 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 7efd67467e5644..17b338f7a8d98c 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
@@ -4,11 +4,12 @@ query projectWorkItems(
   $types: [IssueType!]
   $in: [IssuableSearchableField!]
   $iid: String = null
-  $isNumber: Boolean!
+  $searchByIid: Boolean = false
+  $searchByText: Boolean = true
 ) {
   workspace: project(fullPath: $fullPath) {
     id
-    workItems(search: $searchTerm, types: $types, in: $in) {
+    workItems(search: $searchTerm, types: $types, in: $in) @include(if: $searchByText) {
       nodes {
         id
         iid
@@ -16,7 +17,7 @@ query projectWorkItems(
         confidential
       }
     }
-    workItemsByIid: workItems(iid: $iid, types: $types) @include(if: $isNumber) {
+    workItemsByIid: workItems(iid: $iid, types: $types) @include(if: $searchByIid) {
       nodes {
         id
         iid
diff --git a/app/assets/javascripts/work_items/graphql/work_items_by_references.query.graphql b/app/assets/javascripts/work_items/graphql/work_items_by_references.query.graphql
new file mode 100644
index 00000000000000..1e8d62596b747e
--- /dev/null
+++ b/app/assets/javascripts/work_items/graphql/work_items_by_references.query.graphql
@@ -0,0 +1,10 @@
+query getWorkItemsByReferences($contextNamespacePath: ID!, $refs: [String!]!) {
+  workItemsByReference(contextNamespacePath: $contextNamespacePath, refs: $refs) {
+    nodes {
+      id
+      iid
+      title
+      confidential
+    }
+  }
+}
diff --git a/locale/gitlab.pot b/locale/gitlab.pot
index f5478c84e575dc..8bfebf1ac77f0f 100644
--- a/locale/gitlab.pot
+++ b/locale/gitlab.pot
@@ -55156,6 +55156,9 @@ msgstr ""
 msgid "WorkItem|No iteration"
 msgstr ""
 
+msgid "WorkItem|No matches found"
+msgstr ""
+
 msgid "WorkItem|No matching results"
 msgstr ""
 
@@ -55207,7 +55210,7 @@ msgstr ""
 msgid "WorkItem|Save and overwrite"
 msgstr ""
 
-msgid "WorkItem|Search existing items"
+msgid "WorkItem|Search existing items, paste URL, or enter reference ID"
 msgstr ""
 
 msgid "WorkItem|Select type"
diff --git a/spec/features/projects/work_items/linked_work_items_spec.rb b/spec/features/projects/work_items/linked_work_items_spec.rb
index 49f723c3055408..2ed972e610e59f 100644
--- a/spec/features/projects/work_items/linked_work_items_spec.rb
+++ b/spec/features/projects/work_items/linked_work_items_spec.rb
@@ -11,6 +11,8 @@
   let_it_be(:task) { create(:work_item, :task, project: project, title: 'Task 1') }
 
   context 'for signed in user' do
+    let(:token_input_selector) { '[data-testid="work-item-token-select-input"] .gl-token-selector-input' }
+
     before_all do
       project.add_developer(user)
     end
@@ -62,25 +64,20 @@
       end
     end
 
-    it 'links a new item', :aggregate_failures do
-      page.within('.work-item-relationships') do
-        click_button 'Add'
-
-        within_testid('link-work-item-form') do
-          expect(page).to have_button('Add', disabled: true)
-          find_by_testid('work-item-token-select-input').set(task.title)
-          wait_for_all_requests
-          click_button task.title
-
-          expect(page).to have_button('Add', disabled: false)
+    it 'links a new item with work item text', :aggregate_failures do
+      verify_linked_item_added(task.title)
+    end
 
-          click_button 'Add'
+    it 'links a new item with work item iid', :aggregate_failures do
+      verify_linked_item_added(task.iid)
+    end
 
-          wait_for_all_requests
-        end
+    it 'links a new item with work item reference', :aggregate_failures do
+      verify_linked_item_added(task.to_reference(full: true))
+    end
 
-        expect(find('.work-items-list')).to have_content('Task 1')
-      end
+    it 'links a new item with work item url', :aggregate_failures do
+      verify_linked_item_added("#{task.project.web_url}/-/work_items/#{task.iid}")
     end
 
     it 'removes a linked item', :aggregate_failures do
@@ -111,4 +108,27 @@
       end
     end
   end
+
+  def verify_linked_item_added(input)
+    page.within('.work-item-relationships') do
+      click_button 'Add'
+
+      within_testid('link-work-item-form') do
+        expect(page).to have_button('Add', disabled: true)
+
+        find(token_input_selector).set(input)
+        wait_for_all_requests
+
+        click_button task.title
+
+        expect(page).to have_button('Add', disabled: false)
+
+        click_button 'Add'
+
+        wait_for_all_requests
+      end
+
+      expect(find('.work-items-list')).to have_content('Task 1')
+    end
+  end
 end
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 5726aaaa2d0419..000ccf38ce9188 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,23 +8,78 @@ 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,
-  searchWorkItemsTextResponse,
-  searchWorkItemsIidResponse,
-  searchWorkItemsTextIidResponse,
-} from '../../mock_data';
+import workItemsByReferencesQuery from '~/work_items/graphql/work_items_by_references.query.graphql';
+import { searchWorkItemsResponse } from '../../mock_data';
 
 Vue.use(VueApollo);
 
 describe('WorkItemTokenInput', () => {
   let wrapper;
 
-  const availableWorkItemsResolver = jest.fn().mockResolvedValue(availableWorkItemsResponse);
-  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 availableWorkItemsResolver = jest.fn().mockResolvedValue(
+    searchWorkItemsResponse({
+      workItems: [
+        {
+          id: 'gid://gitlab/WorkItem/458',
+          iid: '2',
+          title: 'Task 1',
+          confidential: false,
+          __typename: 'WorkItem',
+        },
+        {
+          id: 'gid://gitlab/WorkItem/459',
+          iid: '3',
+          title: 'Task 2',
+          confidential: false,
+          __typename: 'WorkItem',
+        },
+        {
+          id: 'gid://gitlab/WorkItem/460',
+          iid: '4',
+          title: 'Task 3',
+          confidential: false,
+          __typename: 'WorkItem',
+        },
+      ],
+    }),
+  );
+
+  const mockWorkItem = {
+    id: 'gid://gitlab/WorkItem/459',
+    iid: '3',
+    title: 'Task 2',
+    confidential: false,
+    __typename: 'WorkItem',
+  };
+  const groupSearchedWorkItemResolver = jest.fn().mockResolvedValue(
+    searchWorkItemsResponse({
+      workItems: [mockWorkItem],
+    }),
+  );
+  const searchWorkItemTextResolver = jest.fn().mockResolvedValue(
+    searchWorkItemsResponse({
+      workItems: [mockWorkItem],
+    }),
+  );
+  const mockworkItemReferenceQueryResponse = {
+    data: {
+      workItemsByReference: {
+        nodes: [
+          {
+            id: 'gid://gitlab/WorkItem/705',
+            iid: '111',
+            title: 'Objective linked items 104',
+            confidential: false,
+            __typename: 'WorkItem',
+          },
+        ],
+        __typename: 'WorkItemConnection',
+      },
+    },
+  };
+  const workItemReferencesQueryResolver = jest
+    .fn()
+    .mockResolvedValue(mockworkItemReferenceQueryResponse);
 
   const createComponent = async ({
     workItemsToAdd = [],
@@ -38,6 +93,7 @@ describe('WorkItemTokenInput', () => {
       apolloProvider: createMockApollo([
         [projectWorkItemsQuery, workItemsResolver],
         [groupWorkItemsQuery, groupSearchedWorkItemResolver],
+        [workItemsByReferencesQuery, workItemReferencesQueryResolver],
       ]),
       provide: {
         isGroup,
@@ -58,6 +114,7 @@ describe('WorkItemTokenInput', () => {
 
   const findTokenSelector = () => wrapper.findComponent(GlTokenSelector);
   const findGlAlert = () => wrapper.findComponent(GlAlert);
+  const findNoMatchFoundMessage = () => wrapper.findByTestId('no-match-found-namespace-message');
 
   it('searches for available work items on focus', async () => {
     createComponent({ workItemsResolver: availableWorkItemsResolver });
@@ -68,42 +125,149 @@ describe('WorkItemTokenInput', () => {
       fullPath: 'test-project-path',
       searchTerm: '',
       types: [WORK_ITEM_TYPE_ENUM_TASK],
-      in: undefined,
       iid: null,
-      isNumber: false,
+      searchByIid: false,
+      searchByText: true,
     });
     expect(findTokenSelector().props('dropdownItems')).toHaveLength(3);
   });
 
-  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 });
+  it('renders red border around token selector input when work item is not valid', () => {
+    createComponent({
+      areWorkItemsToAddValid: false,
+    });
+
+    expect(findTokenSelector().props('containerClass')).toBe('gl-inset-border-1-red-500!');
+  });
+
+  describe('when input data is provided', () => {
+    const fillWorkItemInput = (input) => {
       findTokenSelector().vm.$emit('focus');
       findTokenSelector().vm.$emit('text-input', input);
+    };
+
+    const mockWorkItemResponseItem1 = {
+      id: 'gid://gitlab/WorkItem/460',
+      iid: '101',
+      title: 'Task 3',
+      confidential: false,
+      __typename: 'WorkItem',
+    };
+    const mockWorkItemResponseItem2 = {
+      id: 'gid://gitlab/WorkItem/461',
+      iid: '3',
+      title: 'Task 123',
+      confidential: false,
+      __typename: 'WorkItem',
+    };
+    const mockWorkItemResponseItem3 = {
+      id: 'gid://gitlab/WorkItem/462',
+      iid: '123',
+      title: 'Task 2',
+      confidential: false,
+      __typename: 'WorkItem',
+    };
+
+    const searchWorkItemIidResolver = jest.fn().mockResolvedValue(
+      searchWorkItemsResponse({
+        workItemsByIid: [mockWorkItemResponseItem1],
+      }),
+    );
+    const searchWorkItemTextIidResolver = jest.fn().mockResolvedValue(
+      searchWorkItemsResponse({
+        workItems: [mockWorkItemResponseItem2],
+        workItemsByIid: [mockWorkItemResponseItem3],
+      }),
+    );
+
+    const emptyWorkItemResolver = jest.fn().mockResolvedValue(searchWorkItemsResponse());
+
+    const validIid = mockWorkItemResponseItem1.iid;
+    const searchedText = mockWorkItem.title;
+    const searchedIidText = mockWorkItemResponseItem3.iid;
+    const nonExistentIid = '111';
+    const nonExistentWorkItem = 'Key result';
+    const validWorkItemUrl = 'http://localhost/gitlab-org/test-project-path/-/work_items/111';
+    const validWorkItemReference = 'gitlab-org/test-project-path#111';
+    const invalidWorkItemUrl = 'invalid-url/gitlab-org/test-project-path/-/work_items/101';
+
+    it.each`
+      inputType         | input              | resolver                         | searchTerm         | iid                | searchByText | searchByIid | length
+      ${'iid'}          | ${validIid}        | ${searchWorkItemIidResolver}     | ${validIid}        | ${validIid}        | ${true}      | ${true}     | ${1}
+      ${'text'}         | ${searchedText}    | ${searchWorkItemTextResolver}    | ${searchedText}    | ${null}            | ${true}      | ${false}    | ${1}
+      ${'iid and text'} | ${searchedIidText} | ${searchWorkItemTextIidResolver} | ${searchedIidText} | ${searchedIidText} | ${true}      | ${true}     | ${2}
+    `(
+      'lists work items when $inputType is valid',
+      async ({ input, resolver, searchTerm, iid, searchByIid, searchByText, length }) => {
+        createComponent({ workItemsResolver: resolver });
+
+        fillWorkItemInput(input);
+
+        await waitForPromises();
+
+        expect(resolver).toHaveBeenCalledWith({
+          searchTerm,
+          in: 'TITLE',
+          iid,
+          searchByIid,
+          searchByText,
+        });
+        expect(findTokenSelector().props('dropdownItems')).toHaveLength(length);
+      },
+    );
+
+    it.each`
+      inputType | input                  | searchTerm             | iid               | searchByText | searchByIid
+      ${'iid'}  | ${nonExistentIid}      | ${nonExistentIid}      | ${nonExistentIid} | ${true}      | ${true}
+      ${'text'} | ${nonExistentWorkItem} | ${nonExistentWorkItem} | ${null}           | ${true}      | ${false}
+      ${'url'}  | ${invalidWorkItemUrl}  | ${invalidWorkItemUrl}  | ${null}           | ${true}      | ${false}
+    `(
+      'list is empty when $inputType is invalid',
+      async ({ input, searchTerm, iid, searchByIid, searchByText }) => {
+        createComponent({ workItemsResolver: emptyWorkItemResolver });
+
+        fillWorkItemInput(input);
+
+        await waitForPromises();
+
+        expect(emptyWorkItemResolver).toHaveBeenCalledWith({
+          searchTerm,
+          in: 'TITLE',
+          iid,
+          searchByIid,
+          searchByText,
+        });
+        expect(findTokenSelector().props('dropdownItems')).toHaveLength(0);
+      },
+    );
+
+    it.each`
+      inputType      | input                     | refs                        | length
+      ${'url'}       | ${validWorkItemUrl}       | ${[validWorkItemUrl]}       | ${1}
+      ${'reference'} | ${validWorkItemReference} | ${[validWorkItemReference]} | ${1}
+    `('lists work items when valid $inputType is pasted', async ({ input, refs, length }) => {
+      createComponent({ workItemsResolver: workItemReferencesQueryResolver });
+
+      fillWorkItemInput(input);
+
       await waitForPromises();
 
-      expect(resolver).toHaveBeenCalledWith({
-        searchTerm,
-        in: 'TITLE',
-        iid,
-        isNumber,
+      expect(workItemReferencesQueryResolver).toHaveBeenCalledWith({
+        contextNamespacePath: 'test-project-path',
+        refs,
       });
       expect(findTokenSelector().props('dropdownItems')).toHaveLength(length);
-    },
-  );
-
-  it('renders red border around token selector input when work item is not valid', () => {
-    createComponent({
-      areWorkItemsToAddValid: false,
     });
 
-    expect(findTokenSelector().props('containerClass')).toBe('gl-inset-border-1-red-500!');
+    it('shows proper message if provided with cross project URL', async () => {
+      createComponent({ workItemsResolver: emptyWorkItemResolver });
+
+      fillWorkItemInput('http://localhost/gitlab-org/cross-project-path/-/work_items/101');
+
+      await waitForPromises();
+
+      expect(findNoMatchFoundMessage().text()).toBe('No matches found');
+    });
   });
 
   describe('when project context', () => {
diff --git a/spec/frontend/work_items/components/work_item_parent_inline_spec.js b/spec/frontend/work_items/components/work_item_parent_inline_spec.js
index 3e4f99d593569f..0cd314c377af33 100644
--- a/spec/frontend/work_items/components/work_item_parent_inline_spec.js
+++ b/spec/frontend/work_items/components/work_item_parent_inline_spec.js
@@ -157,7 +157,8 @@ describe('WorkItemParentInline component', () => {
         types: [WORK_ITEM_TYPE_ENUM_OBJECTIVE],
         in: undefined,
         iid: null,
-        isNumber: false,
+        searchByIid: false,
+        searchByText: true,
       });
 
       await findCollapsibleListbox().vm.$emit('search', 'Objective 101');
@@ -168,7 +169,8 @@ describe('WorkItemParentInline component', () => {
         types: [WORK_ITEM_TYPE_ENUM_OBJECTIVE],
         in: 'TITLE',
         iid: null,
-        isNumber: false,
+        searchByIid: false,
+        searchByText: true,
       });
 
       await nextTick();
diff --git a/spec/frontend/work_items/components/work_item_parent_with_edit_spec.js b/spec/frontend/work_items/components/work_item_parent_with_edit_spec.js
index 61e43456479293..d5fab9353ac233 100644
--- a/spec/frontend/work_items/components/work_item_parent_with_edit_spec.js
+++ b/spec/frontend/work_items/components/work_item_parent_with_edit_spec.js
@@ -290,6 +290,8 @@ describe('WorkItemParent component', () => {
         in: undefined,
         iid: null,
         isNumber: false,
+        searchByIid: false,
+        searchByText: true,
       });
 
       await findCollapsibleListbox().vm.$emit('search', 'Objective 101');
@@ -301,6 +303,8 @@ describe('WorkItemParent component', () => {
         in: 'TITLE',
         iid: null,
         isNumber: false,
+        searchByIid: false,
+        searchByText: true,
       });
 
       await nextTick();
diff --git a/spec/frontend/work_items/mock_data.js b/spec/frontend/work_items/mock_data.js
index 9d4606eb95ae29..9e39380750fb32 100644
--- a/spec/frontend/work_items/mock_data.js
+++ b/spec/frontend/work_items/mock_data.js
@@ -1734,6 +1734,28 @@ export const searchWorkItemsIidResponse = {
   },
 };
 
+export const searchWorkItemsURLRefResponse = {
+  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: {
@@ -1765,6 +1787,23 @@ export const searchWorkItemsTextIidResponse = {
   },
 };
 
+export const searchWorkItemsResponse = ({ workItems = [], workItemsByIid = [] } = {}) => {
+  return {
+    data: {
+      workspace: {
+        __typename: 'Project',
+        id: 'gid://gitlab/Project/2',
+        workItems: {
+          nodes: workItems,
+        },
+        workItemsByIid: {
+          nodes: workItemsByIid,
+        },
+      },
+    },
+  };
+};
+
 export const projectMembersResponseWithCurrentUser = {
   data: {
     workspace: {
-- 
GitLab


From b0bac74bb83a5ea6f11dfd513421b146fa387e80 Mon Sep 17 00:00:00 2001
From: Rajan Mistry <rmistry@gitlab.com>
Date: Tue, 12 Dec 2023 19:11:20 +0530
Subject: [PATCH 2/6] Add documentation and improve the text message

---
 .../components/shared/work_item_token_input.vue      | 12 ++++++++----
 .../work_item_add_relationship_form.vue              |  2 +-
 doc/user/okrs.md                                     |  3 ++-
 doc/user/tasks.md                                    |  3 ++-
 locale/gitlab.pot                                    |  2 +-
 5 files changed, 14 insertions(+), 8 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 ecda94395fb37a..2b1ade9103af92 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
@@ -133,6 +133,7 @@ export default {
       const referenceRegExp = /^([\w-]+(?:\/[\w-]+)*)[#&](\d+)$/;
       const isReference = new RegExp(referenceRegExp).test(value);
       this.searchTerm = value;
+
       // Check if it is a URL or reference
       if (isReference || isSafeURL(value)) {
         const {
@@ -150,7 +151,7 @@ export default {
         this.availableWorkItems = nodes;
       } else {
         // Query parameters for searching by text
-        const variables = {
+        let variables = {
           searchTerm: this.searchTerm,
           in: this.searchTerm ? 'TITLE' : undefined,
           iid: null,
@@ -159,9 +160,12 @@ export default {
         };
 
         // Check if it is a number, add iid as query parameter
-        if (isNumeric(this.searchTerm) && this.searchTerm) {
-          variables.iid = this.searchTerm;
-          variables.searchByIid = true;
+        if (this.searchTerm && isNumeric(this.searchTerm)) {
+          variables = {
+            ...variables,
+            iid: this.searchTerm,
+            searchByIid: true,
+          };
         }
 
         // Fetch combined results of search by iid and search by title.
diff --git a/app/assets/javascripts/work_items/components/work_item_relationships/work_item_add_relationship_form.vue b/app/assets/javascripts/work_items/components/work_item_relationships/work_item_add_relationship_form.vue
index c98bd6ce1e9878..10c59d677f748f 100644
--- a/app/assets/javascripts/work_items/components/work_item_relationships/work_item_add_relationship_form.vue
+++ b/app/assets/javascripts/work_items/components/work_item_relationships/work_item_add_relationship_form.vue
@@ -172,7 +172,7 @@ export default {
     relatedToLabel: s__('WorkItem|relates to'),
     blockingLabel: s__('WorkItem|blocks'),
     blockedByLabel: s__('WorkItem|is blocked by'),
-    linkItemInputLabel: s__('WorkItem|the following item(s)'),
+    linkItemInputLabel: s__('WorkItem|the following items'),
     addLinkedItemErrorMessage: s__(
       'WorkItem|Something went wrong when trying to link a item. Please try again.',
     ),
diff --git a/doc/user/okrs.md b/doc/user/okrs.md
index 2d24bf0a193e46..980eb6f84bb920 100644
--- a/doc/user/okrs.md
+++ b/doc/user/okrs.md
@@ -498,6 +498,7 @@ or assignees, on the right.
 
 > - [Introduced](https://gitlab.com/gitlab-org/gitlab/-/issues/416558) in GitLab 16.5 [with a flag](../administration/feature_flags.md) named `linked_work_items`. Enabled by default.
 > - [Enabled on GitLab.com and self-managed](https://gitlab.com/gitlab-org/gitlab/-/merge_requests/139394) in GitLab 16.7.
+> - Adding related items by entering their URLs and IDs [introduced](https://gitlab.com/gitlab-org/gitlab/-/issues/427594) in GitLab 16.8.
 
 FLAG:
 On self-managed GitLab, by default this feature is available. To hide the feature, an administrator can [disable the feature flag](../administration/feature_flags.md) named `linked_work_items`.
@@ -522,7 +523,7 @@ To link an item to an objective or key result:
    - **Relates to**
    - **Blocks**
    - **Is blocked by**
-1. Enter the search text of the item.
+1. Enter the search text of the item, URL, or its reference ID.
 1. When you have added all the items to be linked, select **Add** below the search box.
 
 When you have finished adding all linked items, you can see
diff --git a/doc/user/tasks.md b/doc/user/tasks.md
index 1ec211dcab3ae8..12b12ceccc654b 100644
--- a/doc/user/tasks.md
+++ b/doc/user/tasks.md
@@ -497,6 +497,7 @@ or assignees, on the right.
 
 > - [Introduced](https://gitlab.com/gitlab-org/gitlab/-/issues/416558) in GitLab 16.5 [with a flag](../administration/feature_flags.md) named `linked_work_items`. Disabled by default.
 > - [Enabled on GitLab.com and self-managed](https://gitlab.com/gitlab-org/gitlab/-/merge_requests/139394) in GitLab 16.7.
+> - Adding related items by entering their URLs and IDs [introduced](https://gitlab.com/gitlab-org/gitlab/-/issues/427594) in GitLab 16.8.
 
 FLAG:
 On self-managed GitLab, by default this feature is available. To hide the feature, an administrator can [disable the feature flag](../administration/feature_flags.md) named `linked_work_items`.
@@ -524,7 +525,7 @@ To link an item to a task:
    - **relates to**
    - **blocks**
    - **is blocked by**
-1. Enter the search text of the item.
+1. Enter the search text of the item, URL, or its reference ID.
 1. When you have added all the items to be linked, select **Add** below the search box.
 
 When you have finished adding all linked items, you can see
diff --git a/locale/gitlab.pot b/locale/gitlab.pot
index 8bfebf1ac77f0f..db7d999cf1dd74 100644
--- a/locale/gitlab.pot
+++ b/locale/gitlab.pot
@@ -55375,7 +55375,7 @@ msgstr ""
 msgid "WorkItem|relates to"
 msgstr ""
 
-msgid "WorkItem|the following item(s)"
+msgid "WorkItem|the following items"
 msgstr ""
 
 msgid "Workspaces"
-- 
GitLab


From 1e0baa49c596464910ef688bb1c33c6bcb96c22f Mon Sep 17 00:00:00 2001
From: Rajan Mistry <rmistry@gitlab.com>
Date: Thu, 14 Dec 2023 22:23:26 +0530
Subject: [PATCH 3/6] Cover review comments for work item token form

---
 .../shared/work_item_token_input.vue          | 26 +++++++------------
 app/assets/javascripts/work_items/utils.js    | 10 +++++++
 spec/frontend/work_items/utils_spec.js        | 18 ++++++++++++-
 3 files changed, 37 insertions(+), 17 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 2b1ade9103af92..f7f9ca4315a71f 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
@@ -19,6 +19,7 @@ import {
   I18N_WORK_ITEM_NO_MATCHES_FOUND,
   sprintfWorkItem,
 } from '../../constants';
+import { isReference } from '../../utils';
 
 export default {
   components: {
@@ -106,18 +107,12 @@ export default {
     isLoading() {
       return this.$apollo.queries.availableWorkItems.loading;
     },
-    addInputPlaceholder() {
-      return I18N_WORK_ITEM_SEARCH_INPUT_PLACEHOLDER;
-    },
     childrenTypeName() {
       return WORK_ITEMS_TYPE_MAP[this.childrenType]?.name;
     },
     tokenSelectorContainerClass() {
       return !this.areWorkItemsToAddValid ? 'gl-inset-border-1-red-500!' : '';
     },
-    noMatchesFoundMessage() {
-      return I18N_WORK_ITEM_NO_MATCHES_FOUND;
-    },
   },
   created() {
     this.debouncedSearchKeyUpdate = debounce(this.setSearchKey, DEFAULT_DEBOUNCE_AND_THROTTLE_MS);
@@ -125,17 +120,10 @@ export default {
   methods: {
     getIdFromGraphQLId,
     async setSearchKey(value) {
-      /**
-       * The regular expression checks if the `value` is
-       * a project work item or group work item.
-       * e.g., gitlab-org/project-path#101 or gitlab-org&101
-       */
-      const referenceRegExp = /^([\w-]+(?:\/[\w-]+)*)[#&](\d+)$/;
-      const isReference = new RegExp(referenceRegExp).test(value);
       this.searchTerm = value;
 
       // Check if it is a URL or reference
-      if (isReference || isSafeURL(value)) {
+      if (isReference(value) || isSafeURL(value)) {
         const {
           data: {
             workItemsByReference: { nodes },
@@ -212,6 +200,10 @@ export default {
       );
     },
   },
+  i18n: {
+    noMatchesFoundMessage: I18N_WORK_ITEM_NO_MATCHES_FOUND,
+    addInputPlaceholder: I18N_WORK_ITEM_SEARCH_INPUT_PLACEHOLDER,
+  },
 };
 </script>
 <template>
@@ -224,7 +216,7 @@ export default {
       v-model="workItemsToAdd"
       :dropdown-items="availableWorkItems"
       :loading="isLoading"
-      :placeholder="addInputPlaceholder"
+      :placeholder="$options.i18n.addInputPlaceholder"
       menu-class="gl-dropdown-menu-wide dropdown-reduced-height gl-min-h-7!"
       :container-class="tokenSelectorContainerClass"
       data-testid="work-item-token-select-input"
@@ -248,7 +240,9 @@ export default {
         </div>
       </template>
       <template #no-results-content>
-        <span data-testid="no-match-found-namespace-message">{{ noMatchesFoundMessage }}</span>
+        <span data-testid="no-match-found-namespace-message">{{
+          $options.i18n.noMatchesFoundMessage
+        }}</span>
       </template>
     </gl-token-selector>
   </div>
diff --git a/app/assets/javascripts/work_items/utils.js b/app/assets/javascripts/work_items/utils.js
index c3c292c3dd94e8..816acbef33c598 100644
--- a/app/assets/javascripts/work_items/utils.js
+++ b/app/assets/javascripts/work_items/utils.js
@@ -55,3 +55,13 @@ export const markdownPreviewPath = (fullPath, iid) =>
   `${
     gon.relative_url_root || ''
   }/${fullPath}/preview_markdown?target_type=WorkItem&target_id=${iid}`;
+
+export const isReference = (input) => {
+  /**
+   * The regular expression checks if the `value` is
+   * a project work item or group work item.
+   * e.g., gitlab-org/project-path#101 or gitlab-org&101
+   */
+  const referenceRegExp = /^([\w-]+(?:\/[\w-]+)*)[#&](\d+)$/;
+  return new RegExp(referenceRegExp).test(input);
+};
diff --git a/spec/frontend/work_items/utils_spec.js b/spec/frontend/work_items/utils_spec.js
index aa24b80cf08037..c8435f78696312 100644
--- a/spec/frontend/work_items/utils_spec.js
+++ b/spec/frontend/work_items/utils_spec.js
@@ -1,4 +1,4 @@
-import { autocompleteDataSources, markdownPreviewPath } from '~/work_items/utils';
+import { autocompleteDataSources, markdownPreviewPath, isReference } from '~/work_items/utils';
 
 describe('autocompleteDataSources', () => {
   beforeEach(() => {
@@ -25,3 +25,19 @@ describe('markdownPreviewPath', () => {
     );
   });
 });
+
+describe('isReference', () => {
+  it.each`
+    referenceId                                | result
+    ${'gitlab-org&101'}                        | ${true}
+    ${'gitlab-org/project-path#101'}           | ${true}
+    ${'gitlab-org/sub-group/project-path#101'} | ${true}
+    ${'gitlab-org'}                            | ${false}
+    ${'gitlab-org101#'}                        | ${false}
+    ${'gitlab-org101&'}                        | ${false}
+    ${'#gitlab-org101'}                        | ${false}
+    ${'&gitlab-org101'}                        | ${false}
+  `('returns corrrect result for $referenceId', ({ referenceId, result }) => {
+    expect(isReference(referenceId)).toEqual(result);
+  });
+});
-- 
GitLab


From 84eca826554a02062df80d896a6d345ed17b13db Mon Sep 17 00:00:00 2001
From: Rajan Mistry <rmistry@gitlab.com>
Date: Mon, 18 Dec 2023 16:25:35 +0530
Subject: [PATCH 4/6] Remove the constructor of regex and use test directly

---
 app/assets/javascripts/work_items/utils.js | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/app/assets/javascripts/work_items/utils.js b/app/assets/javascripts/work_items/utils.js
index 816acbef33c598..1e694b767810b4 100644
--- a/app/assets/javascripts/work_items/utils.js
+++ b/app/assets/javascripts/work_items/utils.js
@@ -63,5 +63,5 @@ export const isReference = (input) => {
    * e.g., gitlab-org/project-path#101 or gitlab-org&101
    */
   const referenceRegExp = /^([\w-]+(?:\/[\w-]+)*)[#&](\d+)$/;
-  return new RegExp(referenceRegExp).test(input);
+  return referenceRegExp.test(input);
 };
-- 
GitLab


From ecbb7d173db84a282f9e84cc962f86461731ac7a Mon Sep 17 00:00:00 2001
From: Rajan Mistry <rmistry@gitlab.com>
Date: Tue, 19 Dec 2023 14:03:47 +0530
Subject: [PATCH 5/6] Support the wildcard symbol to search project work items

---
 .../components/shared/work_item_token_input.vue        |  2 +-
 .../projects/work_items/linked_work_items_spec.rb      |  4 ++++
 .../components/shared/work_item_token_input_spec.js    | 10 ++++++----
 3 files changed, 11 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 f7f9ca4315a71f..ee50cbc677b75b 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
@@ -120,7 +120,7 @@ export default {
   methods: {
     getIdFromGraphQLId,
     async setSearchKey(value) {
-      this.searchTerm = value;
+      this.searchTerm = value.startsWith('#') ? value.substring(1) : value;
 
       // Check if it is a URL or reference
       if (isReference(value) || isSafeURL(value)) {
diff --git a/spec/features/projects/work_items/linked_work_items_spec.rb b/spec/features/projects/work_items/linked_work_items_spec.rb
index 2ed972e610e59f..963be23e5a8d4b 100644
--- a/spec/features/projects/work_items/linked_work_items_spec.rb
+++ b/spec/features/projects/work_items/linked_work_items_spec.rb
@@ -72,6 +72,10 @@
       verify_linked_item_added(task.iid)
     end
 
+    it 'links a new item with work item wildcard iid', :aggregate_failures do
+      verify_linked_item_added("##{task.iid}")
+    end
+
     it 'links a new item with work item reference', :aggregate_failures do
       verify_linked_item_added(task.to_reference(full: true))
     end
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 000ccf38ce9188..c2c76d028037f6 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
@@ -183,6 +183,7 @@ describe('WorkItemTokenInput', () => {
     const emptyWorkItemResolver = jest.fn().mockResolvedValue(searchWorkItemsResponse());
 
     const validIid = mockWorkItemResponseItem1.iid;
+    const validWildCardIid = `#${mockWorkItemResponseItem1.iid}`;
     const searchedText = mockWorkItem.title;
     const searchedIidText = mockWorkItemResponseItem3.iid;
     const nonExistentIid = '111';
@@ -192,10 +193,11 @@ describe('WorkItemTokenInput', () => {
     const invalidWorkItemUrl = 'invalid-url/gitlab-org/test-project-path/-/work_items/101';
 
     it.each`
-      inputType         | input              | resolver                         | searchTerm         | iid                | searchByText | searchByIid | length
-      ${'iid'}          | ${validIid}        | ${searchWorkItemIidResolver}     | ${validIid}        | ${validIid}        | ${true}      | ${true}     | ${1}
-      ${'text'}         | ${searchedText}    | ${searchWorkItemTextResolver}    | ${searchedText}    | ${null}            | ${true}      | ${false}    | ${1}
-      ${'iid and text'} | ${searchedIidText} | ${searchWorkItemTextIidResolver} | ${searchedIidText} | ${searchedIidText} | ${true}      | ${true}     | ${2}
+      inputType         | input               | resolver                         | searchTerm         | iid                | searchByText | searchByIid | length
+      ${'iid'}          | ${validIid}         | ${searchWorkItemIidResolver}     | ${validIid}        | ${validIid}        | ${true}      | ${true}     | ${1}
+      ${'wildcard iid'} | ${validWildCardIid} | ${searchWorkItemIidResolver}     | ${validIid}        | ${validIid}        | ${true}      | ${true}     | ${1}
+      ${'text'}         | ${searchedText}     | ${searchWorkItemTextResolver}    | ${searchedText}    | ${null}            | ${true}      | ${false}    | ${1}
+      ${'iid and text'} | ${searchedIidText}  | ${searchWorkItemTextIidResolver} | ${searchedIidText} | ${searchedIidText} | ${true}      | ${true}     | ${2}
     `(
       'lists work items when $inputType is valid',
       async ({ input, resolver, searchTerm, iid, searchByIid, searchByText, length }) => {
-- 
GitLab


From 5d8acb7e61c54870dbc2d97e861a6eef9b550bf1 Mon Sep 17 00:00:00 2001
From: Rajan Mistry <rmistry@gitlab.com>
Date: Tue, 19 Dec 2023 17:14:31 +0530
Subject: [PATCH 6/6] Search only id if wildcard is entered

---
 .../components/shared/work_item_token_input.vue  |  2 +-
 app/assets/javascripts/work_items/utils.js       |  5 +++--
 .../shared/work_item_token_input_spec.js         | 16 ++++++++--------
 spec/frontend/work_items/utils_spec.js           |  8 +++++++-
 4 files changed, 19 insertions(+), 12 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 ee50cbc677b75b..f7f9ca4315a71f 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
@@ -120,7 +120,7 @@ export default {
   methods: {
     getIdFromGraphQLId,
     async setSearchKey(value) {
-      this.searchTerm = value.startsWith('#') ? value.substring(1) : value;
+      this.searchTerm = value;
 
       // Check if it is a URL or reference
       if (isReference(value) || isSafeURL(value)) {
diff --git a/app/assets/javascripts/work_items/utils.js b/app/assets/javascripts/work_items/utils.js
index 1e694b767810b4..6d304e7ebf01ab 100644
--- a/app/assets/javascripts/work_items/utils.js
+++ b/app/assets/javascripts/work_items/utils.js
@@ -61,7 +61,8 @@ export const isReference = (input) => {
    * The regular expression checks if the `value` is
    * a project work item or group work item.
    * e.g., gitlab-org/project-path#101 or gitlab-org&101
+   * or #1234
    */
-  const referenceRegExp = /^([\w-]+(?:\/[\w-]+)*)[#&](\d+)$/;
-  return referenceRegExp.test(input);
+
+  return /^([\w-]+(?:\/[\w-]+)*)?[#&](\d+)$/.test(input);
 };
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 c2c76d028037f6..8ad2a34055e38c 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
@@ -193,11 +193,10 @@ describe('WorkItemTokenInput', () => {
     const invalidWorkItemUrl = 'invalid-url/gitlab-org/test-project-path/-/work_items/101';
 
     it.each`
-      inputType         | input               | resolver                         | searchTerm         | iid                | searchByText | searchByIid | length
-      ${'iid'}          | ${validIid}         | ${searchWorkItemIidResolver}     | ${validIid}        | ${validIid}        | ${true}      | ${true}     | ${1}
-      ${'wildcard iid'} | ${validWildCardIid} | ${searchWorkItemIidResolver}     | ${validIid}        | ${validIid}        | ${true}      | ${true}     | ${1}
-      ${'text'}         | ${searchedText}     | ${searchWorkItemTextResolver}    | ${searchedText}    | ${null}            | ${true}      | ${false}    | ${1}
-      ${'iid and text'} | ${searchedIidText}  | ${searchWorkItemTextIidResolver} | ${searchedIidText} | ${searchedIidText} | ${true}      | ${true}     | ${2}
+      inputType         | input              | resolver                         | searchTerm         | iid                | searchByText | searchByIid | length
+      ${'iid'}          | ${validIid}        | ${searchWorkItemIidResolver}     | ${validIid}        | ${validIid}        | ${true}      | ${true}     | ${1}
+      ${'text'}         | ${searchedText}    | ${searchWorkItemTextResolver}    | ${searchedText}    | ${null}            | ${true}      | ${false}    | ${1}
+      ${'iid and text'} | ${searchedIidText} | ${searchWorkItemTextIidResolver} | ${searchedIidText} | ${searchedIidText} | ${true}      | ${true}     | ${2}
     `(
       'lists work items when $inputType is valid',
       async ({ input, resolver, searchTerm, iid, searchByIid, searchByText, length }) => {
@@ -244,9 +243,10 @@ describe('WorkItemTokenInput', () => {
     );
 
     it.each`
-      inputType      | input                     | refs                        | length
-      ${'url'}       | ${validWorkItemUrl}       | ${[validWorkItemUrl]}       | ${1}
-      ${'reference'} | ${validWorkItemReference} | ${[validWorkItemReference]} | ${1}
+      inputType              | input                     | refs                        | length
+      ${'iid with wildcard'} | ${validWildCardIid}       | ${[validWildCardIid]}       | ${1}
+      ${'url'}               | ${validWorkItemUrl}       | ${[validWorkItemUrl]}       | ${1}
+      ${'reference'}         | ${validWorkItemReference} | ${[validWorkItemReference]} | ${1}
     `('lists work items when valid $inputType is pasted', async ({ input, refs, length }) => {
       createComponent({ workItemsResolver: workItemReferencesQueryResolver });
 
diff --git a/spec/frontend/work_items/utils_spec.js b/spec/frontend/work_items/utils_spec.js
index c8435f78696312..166712de20b8c3 100644
--- a/spec/frontend/work_items/utils_spec.js
+++ b/spec/frontend/work_items/utils_spec.js
@@ -29,6 +29,12 @@ describe('markdownPreviewPath', () => {
 describe('isReference', () => {
   it.each`
     referenceId                                | result
+    ${'#101'}                                  | ${true}
+    ${'&101'}                                  | ${true}
+    ${'101'}                                   | ${false}
+    ${'#'}                                     | ${false}
+    ${'&'}                                     | ${false}
+    ${' &101'}                                 | ${false}
     ${'gitlab-org&101'}                        | ${true}
     ${'gitlab-org/project-path#101'}           | ${true}
     ${'gitlab-org/sub-group/project-path#101'} | ${true}
@@ -37,7 +43,7 @@ describe('isReference', () => {
     ${'gitlab-org101&'}                        | ${false}
     ${'#gitlab-org101'}                        | ${false}
     ${'&gitlab-org101'}                        | ${false}
-  `('returns corrrect result for $referenceId', ({ referenceId, result }) => {
+  `('returns $result for $referenceId', ({ referenceId, result }) => {
     expect(isReference(referenceId)).toEqual(result);
   });
 });
-- 
GitLab