From a65ae3f03e7d70f9d9b4e692480d5f3749c5e872 Mon Sep 17 00:00:00 2001
From: Rajan Mistry <rmistry@gitlab.com>
Date: Thu, 7 Sep 2023 22:37:25 +0530
Subject: [PATCH] Ability to search and link work item

Ability to search and link work item

Changelog: added
---
 .../shared/work_item_token_input.vue          |  26 +-
 .../components/work_item_detail.vue           |   2 +
 .../work_item_links/work_item_links_form.vue  |   1 -
 .../work_item_add_relationship_form.vue       | 245 ++++++++++++++++++
 .../work_item_relationship_list.vue           |   2 +-
 .../work_item_relationships.vue               |  55 +++-
 .../javascripts/work_items/constants.js       |  17 +-
 .../graphql/add_linked_items.mutation.graphql |  10 +
 .../graphql/project_work_items.query.graphql  |   1 +
 .../graphql/work_item.fragment.graphql        |   1 +
 .../related_work_item_links/create_service.rb |   2 +-
 locale/gitlab.pot                             |  39 ++-
 .../work_items/linked_work_items_spec.rb      |  89 +++++++
 .../work_items/work_item_children_spec.rb     |   8 +-
 .../work_item_relationship_list_spec.js.snap  |   4 +-
 .../work_item_add_relationship_form_spec.js   | 170 ++++++++++++
 .../work_item_relationships_spec.js           |  48 +++-
 spec/frontend/work_items/mock_data.js         |  30 +++
 .../work_items/pages/create_work_item_spec.js |   4 +-
 .../create_service_spec.rb                    |   2 +-
 20 files changed, 718 insertions(+), 38 deletions(-)
 create mode 100644 app/assets/javascripts/work_items/components/work_item_relationships/work_item_add_relationship_form.vue
 create mode 100644 app/assets/javascripts/work_items/graphql/add_linked_items.mutation.graphql
 create mode 100644 spec/features/projects/work_items/linked_work_items_spec.rb
 create mode 100644 spec/frontend/work_items/components/work_item_relationships/work_item_add_relationship_form_spec.js

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 7b38e83803325f..3595ab631dfc77 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
@@ -7,7 +7,6 @@ import { DEFAULT_DEBOUNCE_AND_THROTTLE_MS } from '~/lib/utils/constants';
 import projectWorkItemsQuery from '../../graphql/project_work_items.query.graphql';
 import {
   WORK_ITEMS_TYPE_MAP,
-  WORK_ITEM_TYPE_ENUM_TASK,
   I18N_WORK_ITEM_SEARCH_INPUT_PLACEHOLDER,
   sprintfWorkItem,
 } from '../../constants';
@@ -29,7 +28,7 @@ export default {
     childrenType: {
       type: String,
       required: false,
-      default: WORK_ITEM_TYPE_ENUM_TASK,
+      default: '',
     },
     childrenIds: {
       type: Array,
@@ -53,7 +52,7 @@ export default {
         return {
           fullPath: this.fullPath,
           searchTerm: this.search?.title || this.search,
-          types: [this.childrenType],
+          types: this.childrenType ? [this.childrenType] : [],
           in: this.search ? 'TITLE' : undefined,
         };
       },
@@ -106,6 +105,7 @@ export default {
     },
     handleFocus() {
       this.searchStarted = true;
+      this.$emit('searching', true);
     },
     handleMouseOver() {
       this.timeout = setTimeout(() => {
@@ -115,11 +115,22 @@ export default {
     handleMouseOut() {
       clearTimeout(this.timeout);
     },
+    handleBlur() {
+      this.$emit('searching', false);
+    },
+    focusInputText() {
+      this.$nextTick(() => {
+        if (this.areWorkItemsToAddValid) {
+          this.$refs.tokenSelector.$el.querySelector('input[type="text"]').focus();
+        }
+      });
+    },
   },
 };
 </script>
 <template>
   <gl-token-selector
+    ref="tokenSelector"
     v-model="workItemsToAdd"
     :dropdown-items="availableWorkItems"
     :loading="isLoading"
@@ -131,13 +142,14 @@ export default {
     @focus="handleFocus"
     @mouseover.native="handleMouseOver"
     @mouseout.native="handleMouseOut"
+    @token-add="focusInputText"
+    @token-remove="focusInputText"
+    @blur="handleBlur"
   >
-    <template #token-content="{ token }">
-      {{ token.title }}
-    </template>
+    <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-mr-4">{{ getIdFromGraphQLId(dropdownItem.id) }}</div>
+        <div class="gl-text-secondary gl-font-sm gl-mr-4">{{ dropdownItem.iid }}</div>
         <div class="gl-text-truncate">{{ dropdownItem.title }}</div>
       </div>
     </template>
diff --git a/app/assets/javascripts/work_items/components/work_item_detail.vue b/app/assets/javascripts/work_items/components/work_item_detail.vue
index edecd7addcc727..b0a6a3f39d51b2 100644
--- a/app/assets/javascripts/work_items/components/work_item_detail.vue
+++ b/app/assets/javascripts/work_items/components/work_item_detail.vue
@@ -605,8 +605,10 @@ export default {
             />
             <work-item-relationships
               v-if="showWorkItemLinkedItems"
+              :work-item-id="workItem.id"
               :work-item-iid="workItemIid"
               :work-item-full-path="workItem.project.fullPath"
+              :work-item-type="workItem.workItemType.name"
               @showModal="openInModal"
             />
             <work-item-notes
diff --git a/app/assets/javascripts/work_items/components/work_item_links/work_item_links_form.vue b/app/assets/javascripts/work_items/components/work_item_links/work_item_links_form.vue
index 55440e1603c39c..456dee8dab16d5 100644
--- a/app/assets/javascripts/work_items/components/work_item_links/work_item_links_form.vue
+++ b/app/assets/javascripts/work_items/components/work_item_links/work_item_links_form.vue
@@ -225,7 +225,6 @@ export default {
       this.error = null;
     },
     addChild() {
-      this.searchStarted = false;
       this.$apollo
         .mutate({
           mutation: updateWorkItemMutation,
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
new file mode 100644
index 00000000000000..757c186e2e99a9
--- /dev/null
+++ b/app/assets/javascripts/work_items/components/work_item_relationships/work_item_add_relationship_form.vue
@@ -0,0 +1,245 @@
+<script>
+import { produce } from 'immer';
+import { GlFormGroup, GlForm, GlFormRadioGroup, GlButton, GlAlert } from '@gitlab/ui';
+import { __, s__ } from '~/locale';
+import WorkItemTokenInput from '../shared/work_item_token_input.vue';
+import addLinkedItemsMutation from '../../graphql/add_linked_items.mutation.graphql';
+import workItemByIidQuery from '../../graphql/work_item_by_iid.query.graphql';
+import {
+  LINK_ITEM_FORM_HEADER_LABEL,
+  WIDGET_TYPE_LINKED_ITEMS,
+  LINKED_ITEM_TYPE_VALUE,
+} from '../../constants';
+
+export default {
+  components: {
+    GlForm,
+    GlButton,
+    GlFormGroup,
+    GlFormRadioGroup,
+    GlAlert,
+    WorkItemTokenInput,
+  },
+  props: {
+    workItemId: {
+      type: String,
+      required: false,
+      default: null,
+    },
+    workItemIid: {
+      type: String,
+      required: false,
+      default: null,
+    },
+    workItemFullPath: {
+      type: String,
+      required: false,
+      default: null,
+    },
+    workItemType: {
+      type: String,
+      required: false,
+      default: null,
+    },
+    childrenIds: {
+      type: Array,
+      required: false,
+      default: () => [],
+    },
+  },
+  data() {
+    return {
+      linkedItemType: LINKED_ITEM_TYPE_VALUE.RELATED,
+      linkedItemTypes: [
+        {
+          text: this.$options.i18n.relatedToLabel,
+          value: LINKED_ITEM_TYPE_VALUE.RELATED,
+        },
+        {
+          text: this.$options.i18n.blockingLabel,
+          value: LINKED_ITEM_TYPE_VALUE.BLOCKS,
+        },
+        {
+          text: this.$options.i18n.blockedByLabel,
+          value: LINKED_ITEM_TYPE_VALUE.BLOCKED_BY,
+        },
+      ],
+      workItemsToAdd: [],
+      error: null,
+      showWorkItemsToAddInvalidMessage: false,
+      isSubmitting: false,
+      searchInProgress: false,
+    };
+  },
+  computed: {
+    linkItemFormHeaderLabel() {
+      return LINK_ITEM_FORM_HEADER_LABEL[this.workItemType];
+    },
+    workItemsToAddInvalidMessage() {
+      return this.$options.i18n.addChildErrorMessage;
+    },
+    isSubmitButtonDisabled() {
+      return this.workItemsToAdd.length <= 0 || !this.areWorkItemsToAddValid;
+    },
+    areWorkItemsToAddValid() {
+      return this.workItemsToAdd.length < 4;
+    },
+    errorMessage() {
+      return !this.areWorkItemsToAddValid ? this.$options.i18n.max3ItemsErrorMessage : '';
+    },
+  },
+  methods: {
+    async linkWorkItem() {
+      try {
+        if (this.searchInProgress) {
+          return;
+        }
+        this.isSubmitting = true;
+        const {
+          data: {
+            workItemAddLinkedItems: { errors },
+          },
+        } = await this.$apollo.mutate({
+          mutation: addLinkedItemsMutation,
+          variables: {
+            input: {
+              id: this.workItemId,
+              linkType: this.linkedItemType,
+              workItemsIds: this.workItemsToAdd.map((wi) => wi.id),
+            },
+          },
+          update: (
+            cache,
+            {
+              data: {
+                workItemAddLinkedItems: { workItem },
+              },
+            },
+          ) => {
+            const queryArgs = {
+              query: workItemByIidQuery,
+              variables: { fullPath: this.workItemFullPath, iid: this.workItemIid },
+            };
+            const sourceData = cache.readQuery(queryArgs);
+
+            if (!sourceData) {
+              return;
+            }
+
+            cache.writeQuery({
+              ...queryArgs,
+              data: produce(sourceData, (draftState) => {
+                const linkedItemsWidget = draftState.workspace.workItems.nodes[0].widgets?.find(
+                  (widget) => widget.type === WIDGET_TYPE_LINKED_ITEMS,
+                );
+
+                linkedItemsWidget.linkedItems = workItem.widgets?.find(
+                  (widget) => widget.type === WIDGET_TYPE_LINKED_ITEMS,
+                ).linkedItems;
+              }),
+            });
+          },
+        });
+
+        if (errors.length > 0) {
+          [this.error] = errors;
+          return;
+        }
+
+        this.workItemsToAdd = [];
+        this.unsetError();
+        this.showWorkItemsToAddInvalidMessage = false;
+        this.linkedItemType = LINKED_ITEM_TYPE_VALUE.RELATED;
+        this.$emit('submitted');
+      } catch (e) {
+        this.error = this.$options.i18n.addLinkedItemErrorMessage;
+      } finally {
+        this.isSubmitting = false;
+      }
+    },
+    unsetError() {
+      this.error = null;
+    },
+  },
+  i18n: {
+    addButtonLabel: __('Add'),
+    relatedToLabel: s__('WorkItem|relates to'),
+    blockingLabel: s__('WorkItem|blocks'),
+    blockedByLabel: s__('WorkItem|is blocked by'),
+    max3ItemsNoteLabel: s__('WorkItem|Add a maximum of 3 items at a time.'),
+    linkItemInputLabel: s__('WorkItem|the following item(s)'),
+    addLinkedItemErrorMessage: s__(
+      'WorkItem|Something went wrong when trying to link a item. Please try again.',
+    ),
+    max3ItemsErrorMessage: s__('WorkItem|Only 3 items can be added at a time.'),
+  },
+};
+</script>
+
+<template>
+  <gl-form
+    class="gl-new-card-add-form"
+    data-testid="link-work-item-form"
+    @submit.stop.prevent="linkWorkItem"
+  >
+    <gl-alert v-if="error" variant="danger" class="gl-mb-3" @dismiss="unsetError">
+      {{ error }}
+    </gl-alert>
+    <gl-form-group
+      :label="linkItemFormHeaderLabel"
+      label-for="linked-item-type-radio"
+      label-class="label-bold"
+      class="gl-mb-3"
+    >
+      <gl-form-radio-group
+        id="linked-item-type-radio"
+        v-model="linkedItemType"
+        :options="linkedItemTypes"
+        :checked="linkedItemType"
+      />
+    </gl-form-group>
+    <p class="gl-font-weight-bold gl-mb-2">
+      {{ $options.i18n.linkItemInputLabel }}
+    </p>
+    <div class="gl-mb-5">
+      <work-item-token-input
+        v-model="workItemsToAdd"
+        class="gl-mb-2"
+        :parent-work-item-id="workItemId"
+        :children-ids="childrenIds"
+        :are-work-items-to-add-valid="areWorkItemsToAddValid"
+        :full-path="workItemFullPath"
+        :max-selection-limit="3"
+        @searching="searchInProgress = $event"
+      />
+      <div v-if="errorMessage" class="gl-mb-2 gl-text-red-500">
+        {{ $options.i18n.max3ItemsErrorMessage }}
+      </div>
+      <div v-if="!errorMessage" data-testid="max-work-item-note" class="gl-text-gray-500">
+        {{ $options.i18n.max3ItemsNoteLabel }}
+      </div>
+      <div
+        v-if="showWorkItemsToAddInvalidMessage"
+        class="gl-text-red-500"
+        data-testid="work-items-invalid"
+      >
+        {{ workItemsToAddInvalidMessage }}
+      </div>
+    </div>
+    <gl-button
+      data-testid="link-work-item-button"
+      category="primary"
+      variant="confirm"
+      size="small"
+      type="submit"
+      :disabled="isSubmitButtonDisabled"
+      :loading="isSubmitting"
+      class="gl-mr-2"
+    >
+      {{ $options.i18n.addButtonLabel }}
+    </gl-button>
+    <gl-button category="secondary" size="small" @click="$emit('cancel')">
+      {{ s__('WorkItem|Cancel') }}
+    </gl-button>
+  </gl-form>
+</template>
diff --git a/app/assets/javascripts/work_items/components/work_item_relationships/work_item_relationship_list.vue b/app/assets/javascripts/work_items/components/work_item_relationships/work_item_relationship_list.vue
index cbe830f9565ae7..279e6ad01b3589 100644
--- a/app/assets/javascripts/work_items/components/work_item_relationships/work_item_relationship_list.vue
+++ b/app/assets/javascripts/work_items/components/work_item_relationships/work_item_relationship_list.vue
@@ -33,7 +33,7 @@ export default {
 };
 </script>
 <template>
-  <div>
+  <div data-testid="work-item-linked-items-list">
     <h4
       v-if="heading"
       data-testid="work-items-list-heading"
diff --git a/app/assets/javascripts/work_items/components/work_item_relationships/work_item_relationships.vue b/app/assets/javascripts/work_items/components/work_item_relationships/work_item_relationships.vue
index 4f6879e9605f4f..d32e3d3a5e5027 100644
--- a/app/assets/javascripts/work_items/components/work_item_relationships/work_item_relationships.vue
+++ b/app/assets/javascripts/work_items/components/work_item_relationships/work_item_relationships.vue
@@ -8,6 +8,7 @@ import { WIDGET_TYPE_LINKED_ITEMS, LINKED_CATEGORIES_MAP } from '../../constants
 
 import WidgetWrapper from '../widget_wrapper.vue';
 import WorkItemRelationshipList from './work_item_relationship_list.vue';
+import WorkItemAddRelationshipForm from './work_item_add_relationship_form.vue';
 
 export default {
   components: {
@@ -16,8 +17,14 @@ export default {
     GlButton,
     WidgetWrapper,
     WorkItemRelationshipList,
+    WorkItemAddRelationshipForm,
   },
   props: {
+    workItemId: {
+      type: String,
+      required: false,
+      default: null,
+    },
     workItemIid: {
       type: String,
       required: true,
@@ -26,6 +33,11 @@ export default {
       type: String,
       required: true,
     },
+    workItemType: {
+      type: String,
+      required: false,
+      default: null,
+    },
   },
   apollo: {
     workItem: {
@@ -74,13 +86,13 @@ export default {
       linksRelatesTo: [],
       linksIsBlockedBy: [],
       linksBlocks: [],
+      isShownLinkItemForm: false,
       widgetName: 'linkeditems',
     };
   },
   computed: {
-    canUpdate() {
-      // This will be false untill we implement remove item mutation
-      return false;
+    canAdminWorkItemLink() {
+      return this.workItem?.userPermissions?.adminWorkItemLink;
     },
     isLoading() {
       return this.$apollo.queries.workItem.loading;
@@ -91,11 +103,22 @@ export default {
     linkedWorkItems() {
       return this.linkedWorkItemsWidget?.linkedItems?.nodes || [];
     },
+    childrenIds() {
+      return this.linkedWorkItems.map((item) => item.workItem.id);
+    },
     linkedWorkItemsCount() {
       return this.linkedWorkItems.length;
     },
     isEmptyRelatedWorkItems() {
-      return !this.error && this.linkedWorkItems.length === 0;
+      return !this.isShownLinkItemForm && !this.error && this.linkedWorkItems.length === 0;
+    },
+  },
+  methods: {
+    showLinkItemForm() {
+      this.isShownLinkItemForm = true;
+    },
+    hideLinkItemForm() {
+      this.isShownLinkItemForm = false;
     },
   },
   i18n: {
@@ -131,12 +154,28 @@ export default {
       </div>
     </template>
     <template #header-right>
-      <gl-button size="small" class="gl-ml-3">
+      <gl-button
+        v-if="canAdminWorkItemLink"
+        data-testid="link-item-add-button"
+        size="small"
+        class="gl-ml-3"
+        @click="showLinkItemForm"
+      >
         <slot name="add-button-text">{{ $options.i18n.addLinkedWorkItemButtonLabel }}</slot>
       </gl-button>
     </template>
     <template #body>
       <div class="gl-new-card-content">
+        <work-item-add-relationship-form
+          v-if="isShownLinkItemForm"
+          :work-item-id="workItemId"
+          :work-item-iid="workItemIid"
+          :work-item-full-path="workItemFullPath"
+          :children-ids="childrenIds"
+          :work-item-type="workItemType"
+          @submitted="hideLinkItemForm"
+          @cancel="hideLinkItemForm"
+        />
         <gl-loading-icon v-if="isLoading" color="dark" class="gl-my-2" />
         <template v-else>
           <div v-if="isEmptyRelatedWorkItems" data-testid="links-empty">
@@ -154,7 +193,7 @@ export default {
               :linked-items="linksBlocks"
               :heading="$options.i18n.blockingTitle"
               :work-item-full-path="workItemFullPath"
-              :can-update="canUpdate"
+              :can-update="false"
               @showModal="$emit('showModal', { event: $event.event, modalWorkItem: $event.child })"
             />
             <work-item-relationship-list
@@ -166,7 +205,7 @@ export default {
               :linked-items="linksIsBlockedBy"
               :heading="$options.i18n.blockedByTitle"
               :work-item-full-path="workItemFullPath"
-              :can-update="canUpdate"
+              :can-update="false"
               @showModal="$emit('showModal', { event: $event.event, modalWorkItem: $event.child })"
             />
             <work-item-relationship-list
@@ -174,7 +213,7 @@ export default {
               :linked-items="linksRelatesTo"
               :heading="$options.i18n.relatedToTitle"
               :work-item-full-path="workItemFullPath"
-              :can-update="canUpdate"
+              :can-update="false"
               @showModal="$emit('showModal', { event: $event.event, modalWorkItem: $event.child })"
             />
           </template>
diff --git a/app/assets/javascripts/work_items/constants.js b/app/assets/javascripts/work_items/constants.js
index 2b118247426281..04ef2a65aab3a5 100644
--- a/app/assets/javascripts/work_items/constants.js
+++ b/app/assets/javascripts/work_items/constants.js
@@ -113,7 +113,7 @@ export const I18N_WORK_ITEM_COPY_CREATE_NOTE_EMAIL = s__(
 );
 
 export const sprintfWorkItem = (msg, workItemTypeArg, parentWorkItemType = '') => {
-  const workItemType = workItemTypeArg || s__('WorkItem|Work item');
+  const workItemType = workItemTypeArg || s__('WorkItem|item');
   return capitalizeFirstCharacter(
     sprintf(msg, {
       workItemType: workItemType.toLocaleLowerCase(),
@@ -186,8 +186,11 @@ export const WORK_ITEM_NAME_TO_ICON_MAP = {
   Issue: 'issue-type-issue',
   Task: 'issue-type-task',
   Objective: 'issue-type-objective',
+  Incident: 'issue-type-incident',
   // eslint-disable-next-line @gitlab/require-i18n-strings
   'Key Result': 'issue-type-keyresult',
+  // eslint-disable-next-line @gitlab/require-i18n-strings
+  'Test Case': 'issue-type-test-case',
 };
 
 export const FORM_TYPES = {
@@ -262,3 +265,15 @@ export const LINKED_CATEGORIES_MAP = {
   IS_BLOCKED_BY: 'is_blocked_by',
   BLOCKS: 'blocks',
 };
+
+export const LINKED_ITEM_TYPE_VALUE = {
+  RELATED: 'RELATED',
+  BLOCKED_BY: 'BLOCKED_BY',
+  BLOCKS: 'BLOCKS',
+};
+
+export const LINK_ITEM_FORM_HEADER_LABEL = {
+  [WORK_ITEM_TYPE_VALUE_OBJECTIVE]: s__('WorkItem|The current objective'),
+  [WORK_ITEM_TYPE_VALUE_KEY_RESULT]: s__('WorkItem|The current key result'),
+  [WORK_ITEM_TYPE_VALUE_TASK]: s__('WorkItem|The current task'),
+};
diff --git a/app/assets/javascripts/work_items/graphql/add_linked_items.mutation.graphql b/app/assets/javascripts/work_items/graphql/add_linked_items.mutation.graphql
new file mode 100644
index 00000000000000..ba12c7f9b51079
--- /dev/null
+++ b/app/assets/javascripts/work_items/graphql/add_linked_items.mutation.graphql
@@ -0,0 +1,10 @@
+#import "./work_item.fragment.graphql"
+
+mutation addLinkedItems($input: WorkItemAddLinkedItemsInput!) {
+  workItemAddLinkedItems(input: $input) {
+    workItem {
+      ...WorkItem
+    }
+    errors
+  }
+}
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 7d63af448d4eed..2be436aa8c20d6 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
@@ -9,6 +9,7 @@ query projectWorkItems(
     workItems(search: $searchTerm, types: $types, in: $in) {
       nodes {
         id
+        iid
         title
         state
         confidential
diff --git a/app/assets/javascripts/work_items/graphql/work_item.fragment.graphql b/app/assets/javascripts/work_items/graphql/work_item.fragment.graphql
index 1ae5617f04da8c..fac99310890042 100644
--- a/app/assets/javascripts/work_items/graphql/work_item.fragment.graphql
+++ b/app/assets/javascripts/work_items/graphql/work_item.fragment.graphql
@@ -33,6 +33,7 @@ fragment WorkItem on WorkItem {
     adminParentLink
     setWorkItemMetadata
     createNote
+    adminWorkItemLink
   }
   widgets {
     ...WorkItemWidgets
diff --git a/app/services/work_items/related_work_item_links/create_service.rb b/app/services/work_items/related_work_item_links/create_service.rb
index f313881470a3bb..1c638b5367effe 100644
--- a/app/services/work_items/related_work_item_links/create_service.rb
+++ b/app/services/work_items/related_work_item_links/create_service.rb
@@ -51,7 +51,7 @@ def linked_ids(created_links)
 
       override :issuables_already_assigned_message
       def issuables_already_assigned_message
-        _('Work items are already linked')
+        _('Items are already linked')
       end
 
       override :issuables_not_found_message
diff --git a/locale/gitlab.pot b/locale/gitlab.pot
index 643b05d4003ec7..1abe644f669b8a 100644
--- a/locale/gitlab.pot
+++ b/locale/gitlab.pot
@@ -26165,6 +26165,9 @@ msgstr ""
 msgid "Item with ID: %{id} cannot be added. You don't have permission to perform this action."
 msgstr ""
 
+msgid "Items are already linked"
+msgstr ""
+
 msgid "Iteration"
 msgstr ""
 
@@ -53534,9 +53537,6 @@ msgstr ""
 msgid "Work item promoted successfully."
 msgstr ""
 
-msgid "Work items are already linked"
-msgstr ""
-
 msgid "WorkItem|%{count} more assignees"
 msgstr ""
 
@@ -53561,6 +53561,9 @@ msgstr ""
 msgid "WorkItem|Add %{workItemType}s"
 msgstr ""
 
+msgid "WorkItem|Add a maximum of 3 items at a time."
+msgstr ""
+
 msgid "WorkItem|Add a title"
 msgstr ""
 
@@ -53719,6 +53722,9 @@ msgstr ""
 msgid "WorkItem|Objective"
 msgstr ""
 
+msgid "WorkItem|Only 3 items can be added at a time."
+msgstr ""
+
 msgid "WorkItem|Only project members with at least the Reporter role, the author, and assignees can view or be notified about this %{workItemType}."
 msgstr ""
 
@@ -53779,6 +53785,9 @@ msgstr ""
 msgid "WorkItem|Something went wrong when trying to create a child. Please try again."
 msgstr ""
 
+msgid "WorkItem|Something went wrong when trying to link a item. Please try again."
+msgstr ""
+
 msgid "WorkItem|Something went wrong while copying the %{workItemType} email address. Please try again."
 msgstr ""
 
@@ -53827,6 +53836,15 @@ msgstr ""
 msgid "WorkItem|Test case"
 msgstr ""
 
+msgid "WorkItem|The current key result"
+msgstr ""
+
+msgid "WorkItem|The current objective"
+msgstr ""
+
+msgid "WorkItem|The current task"
+msgstr ""
+
 msgid "WorkItem|This %{workItemType} is confidential and should only be visible to team members with at least Reporter access"
 msgstr ""
 
@@ -53857,6 +53875,21 @@ msgstr ""
 msgid "WorkItem|You're only seeing %{boldStart}other activity%{boldEnd} in the feed. To add a comment, switch to one of the following options."
 msgstr ""
 
+msgid "WorkItem|blocks"
+msgstr ""
+
+msgid "WorkItem|is blocked by"
+msgstr ""
+
+msgid "WorkItem|item"
+msgstr ""
+
+msgid "WorkItem|relates to"
+msgstr ""
+
+msgid "WorkItem|the following item(s)"
+msgstr ""
+
 msgid "Workspaces"
 msgstr ""
 
diff --git a/spec/features/projects/work_items/linked_work_items_spec.rb b/spec/features/projects/work_items/linked_work_items_spec.rb
new file mode 100644
index 00000000000000..c43e9aca09e2d0
--- /dev/null
+++ b/spec/features/projects/work_items/linked_work_items_spec.rb
@@ -0,0 +1,89 @@
+# frozen_string_literal: true
+
+require 'spec_helper'
+
+RSpec.describe 'Work item linked items', :js, feature_category: :team_planning do
+  let_it_be(:group) { create(:group) }
+  let_it_be(:project) { create(:project, :public, namespace: group) }
+  let_it_be(:user) { create(:user) }
+  let_it_be(:work_item) { create(:work_item, project: project) }
+  let(:work_items_path) { project_work_items_path(project, work_items_path: work_item.iid) }
+  let_it_be(:task) { create(:work_item, :task, project: project, title: 'Task 1') }
+
+  context 'for signed in user' do
+    include ContentEditorHelpers
+    before_all do
+      project.add_developer(user)
+    end
+
+    before do
+      sign_in(user)
+
+      stub_feature_flags(work_items: true)
+      stub_feature_flags(linked_work_items: true)
+
+      visit work_items_path
+
+      wait_for_requests
+
+      close_rich_text_promo_popover_if_present
+    end
+
+    it 'are not displayed when issue does not have work item links', :aggregate_failures do
+      page.within('.work-item-relationships') do
+        expect(page).to have_selector('[data-testid="link-item-add-button"]')
+        expect(page).not_to have_selector('[data-testid="link-work-item-form"]')
+        expect(page).not_to have_selector('[data-testid="work-item-linked-items-list"]')
+      end
+    end
+
+    it 'toggles widget body', :aggregate_failures do
+      page.within('.work-item-relationships') do
+        expect(page).to have_selector('[data-testid="widget-body"]')
+
+        click_button 'Collapse'
+
+        expect(page).not_to have_selector('[data-testid="widget-body"]')
+
+        click_button 'Expand'
+
+        expect(page).to have_selector('[data-testid="widget-body"]')
+      end
+    end
+
+    it 'toggles form', :aggregate_failures do
+      page.within('.work-item-relationships') do
+        expect(page).not_to have_selector('[data-testid="link-work-item-form"]')
+
+        click_button 'Add'
+
+        expect(page).to have_selector('[data-testid="link-work-item-form"]')
+
+        click_button 'Cancel'
+
+        expect(page).not_to have_selector('[data-testid="link-work-item-form"]')
+      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)
+
+          click_button 'Add'
+
+          wait_for_all_requests
+        end
+
+        expect(find('.work-items-list')).to have_content('Task 1')
+      end
+    end
+  end
+end
diff --git a/spec/features/projects/work_items/work_item_children_spec.rb b/spec/features/projects/work_items/work_item_children_spec.rb
index 43a6b2771f6f73..843afb54dec060 100644
--- a/spec/features/projects/work_items/work_item_children_spec.rb
+++ b/spec/features/projects/work_items/work_item_children_spec.rb
@@ -124,7 +124,9 @@
 
           expect(page).to have_button('Add task', disabled: false)
 
-          click_button 'Add task'
+          send_keys :escape
+
+          click_button('Add task')
 
           wait_for_all_requests
 
@@ -162,7 +164,9 @@
           wait_for_all_requests
           click_button task.title
 
-          click_button 'Add task'
+          send_keys :escape
+
+          click_button('Add task')
 
           wait_for_all_requests
         end
diff --git a/spec/frontend/work_items/components/work_item_relationships/__snapshots__/work_item_relationship_list_spec.js.snap b/spec/frontend/work_items/components/work_item_relationships/__snapshots__/work_item_relationship_list_spec.js.snap
index 9105e4de5e0a96..d3a6265934f58a 100644
--- a/spec/frontend/work_items/components/work_item_relationships/__snapshots__/work_item_relationship_list_spec.js.snap
+++ b/spec/frontend/work_items/components/work_item_relationships/__snapshots__/work_item_relationship_list_spec.js.snap
@@ -1,7 +1,9 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
 exports[`WorkItemRelationshipList renders linked item list 1`] = `
-<div>
+<div
+  data-testid="work-item-linked-items-list"
+>
   <h4
     class="gl-font-sm gl-font-weight-semibold gl-mb-2 gl-mt-3 gl-mx-2 gl-text-gray-700"
     data-testid="work-items-list-heading"
diff --git a/spec/frontend/work_items/components/work_item_relationships/work_item_add_relationship_form_spec.js b/spec/frontend/work_items/components/work_item_relationships/work_item_add_relationship_form_spec.js
new file mode 100644
index 00000000000000..4a5d9bb117593a
--- /dev/null
+++ b/spec/frontend/work_items/components/work_item_relationships/work_item_add_relationship_form_spec.js
@@ -0,0 +1,170 @@
+import Vue from 'vue';
+import VueApollo from 'vue-apollo';
+import { GlForm, GlFormRadioGroup, GlAlert } from '@gitlab/ui';
+import { s__ } from '~/locale';
+
+import createMockApollo from 'helpers/mock_apollo_helper';
+import waitForPromises from 'helpers/wait_for_promises';
+import { shallowMountExtended } from 'helpers/vue_test_utils_helper';
+
+import WorkItemAddRelationshipForm from '~/work_items/components/work_item_relationships/work_item_add_relationship_form.vue';
+import WorkItemTokenInput from '~/work_items/components/shared/work_item_token_input.vue';
+import addLinkedItemsMutation from '~/work_items/graphql/add_linked_items.mutation.graphql';
+import { LINKED_ITEM_TYPE_VALUE } from '~/work_items/constants';
+
+import { linkedWorkItemResponse } from '../../mock_data';
+
+describe('WorkItemAddRelationshipForm', () => {
+  Vue.use(VueApollo);
+
+  let wrapper;
+  const linkedWorkItemsSuccessMutationHandler = jest
+    .fn()
+    .mockResolvedValue(linkedWorkItemResponse());
+
+  const createComponent = async ({
+    workItemId = 'gid://gitlab/WorkItem/1',
+    workItemIid = '1',
+    workItemType = 'Objective',
+    childrenIds = [],
+    linkedWorkItemsMutationHandler = linkedWorkItemsSuccessMutationHandler,
+  } = {}) => {
+    const mockApolloProvider = createMockApollo([
+      [addLinkedItemsMutation, linkedWorkItemsMutationHandler],
+    ]);
+
+    wrapper = shallowMountExtended(WorkItemAddRelationshipForm, {
+      apolloProvider: mockApolloProvider,
+      propsData: {
+        workItemId,
+        workItemIid,
+        workItemFullPath: 'test-project-path',
+        workItemType,
+        childrenIds,
+      },
+    });
+
+    await waitForPromises();
+  };
+
+  const findLinkWorkItemForm = () => wrapper.findComponent(GlForm);
+  const findLinkWorkItemButton = () => wrapper.findByTestId('link-work-item-button');
+  const findMaxWorkItemNote = () => wrapper.findByTestId('max-work-item-note');
+  const findRadioGroup = () => wrapper.findComponent(GlFormRadioGroup);
+  const findWorkItemTokenInput = () => wrapper.findComponent(WorkItemTokenInput);
+  const findGlAlert = () => wrapper.findComponent(GlAlert);
+
+  beforeEach(async () => {
+    await createComponent();
+  });
+
+  it('renders link work item form with default values', () => {
+    expect(findLinkWorkItemForm().exists()).toBe(true);
+    expect(findRadioGroup().props('options')).toEqual([
+      { text: s__('WorkItem|relates to'), value: LINKED_ITEM_TYPE_VALUE.RELATED },
+      { text: s__('WorkItem|blocks'), value: LINKED_ITEM_TYPE_VALUE.BLOCKS },
+      { text: s__('WorkItem|is blocked by'), value: LINKED_ITEM_TYPE_VALUE.BLOCKED_BY },
+    ]);
+    expect(findLinkWorkItemButton().attributes('disabled')).toBe('true');
+    expect(findMaxWorkItemNote().text()).toBe(s__('WorkItem|Add a maximum of 3 items at a time.'));
+  });
+
+  it('renders work item token input with default props', () => {
+    expect(findWorkItemTokenInput().props()).toMatchObject({
+      value: [],
+      fullPath: 'test-project-path',
+      childrenIds: [],
+      parentWorkItemId: 'gid://gitlab/WorkItem/1',
+      areWorkItemsToAddValid: true,
+    });
+  });
+
+  describe('linking a work item', () => {
+    const selectWorkItemTokens = (workItems) => {
+      findWorkItemTokenInput().vm.$emit('input', workItems);
+    };
+
+    it('enables add button when work item is selected', async () => {
+      await selectWorkItemTokens([
+        {
+          id: 'gid://gitlab/WorkItem/644',
+        },
+      ]);
+      expect(findLinkWorkItemButton().attributes('disabled')).toBeUndefined();
+    });
+
+    it('disables button when more than 3 work items are selected', async () => {
+      await selectWorkItemTokens([
+        {
+          id: 'gid://gitlab/WorkItem/641',
+        },
+        {
+          id: 'gid://gitlab/WorkItem/642',
+        },
+        {
+          id: 'gid://gitlab/WorkItem/643',
+        },
+        {
+          id: 'gid://gitlab/WorkItem/644',
+        },
+      ]);
+
+      expect(findWorkItemTokenInput().props('areWorkItemsToAddValid')).toBe(false);
+      expect(findLinkWorkItemButton().attributes('disabled')).toBe('true');
+    });
+
+    it.each`
+      assertionName | linkTypeInput
+      ${'related'}  | ${LINKED_ITEM_TYPE_VALUE.RELATED}
+      ${'blocking'} | ${LINKED_ITEM_TYPE_VALUE.BLOCKED_BY}
+    `('selects and links $assertionName work item', async ({ linkTypeInput }) => {
+      findRadioGroup().vm.$emit('input', linkTypeInput);
+      await selectWorkItemTokens([
+        {
+          id: 'gid://gitlab/WorkItem/641',
+        },
+        {
+          id: 'gid://gitlab/WorkItem/642',
+        },
+      ]);
+
+      expect(findWorkItemTokenInput().props('areWorkItemsToAddValid')).toBe(true);
+
+      findLinkWorkItemForm().vm.$emit('submit', {
+        preventDefault: jest.fn(),
+        stopPropagation: jest.fn(),
+      });
+      await waitForPromises();
+
+      expect(linkedWorkItemsSuccessMutationHandler).toHaveBeenCalledWith({
+        input: {
+          id: 'gid://gitlab/WorkItem/1',
+          linkType: linkTypeInput,
+          workItemsIds: ['gid://gitlab/WorkItem/641', 'gid://gitlab/WorkItem/642'],
+        },
+      });
+    });
+
+    it.each`
+      errorType                              | mutationMock                                                                       | errorMessage
+      ${'an error in the mutation response'} | ${jest.fn().mockResolvedValue(linkedWorkItemResponse({}, ['Linked Item failed']))} | ${'Linked Item failed'}
+      ${'a network error'}                   | ${jest.fn().mockRejectedValue(new Error('Network Error'))}                         | ${'Something went wrong when trying to link a item. Please try again.'}
+    `('shows an error message when there is $errorType', async ({ mutationMock, errorMessage }) => {
+      createComponent({ linkedWorkItemsMutationHandler: mutationMock });
+      await selectWorkItemTokens([
+        {
+          id: 'gid://gitlab/WorkItem/641',
+        },
+      ]);
+
+      findLinkWorkItemForm().vm.$emit('submit', {
+        preventDefault: jest.fn(),
+        stopPropagation: jest.fn(),
+      });
+      await waitForPromises();
+
+      expect(findGlAlert().exists()).toBe(true);
+      expect(findGlAlert().text()).toBe(errorMessage);
+    });
+  });
+});
diff --git a/spec/frontend/work_items/components/work_item_relationships/work_item_relationships_spec.js b/spec/frontend/work_items/components/work_item_relationships/work_item_relationships_spec.js
index c9a2499b127db0..04b6e3d8df6de2 100644
--- a/spec/frontend/work_items/components/work_item_relationships/work_item_relationships_spec.js
+++ b/spec/frontend/work_items/components/work_item_relationships/work_item_relationships_spec.js
@@ -9,6 +9,7 @@ import waitForPromises from 'helpers/wait_for_promises';
 import WidgetWrapper from '~/work_items/components/widget_wrapper.vue';
 import WorkItemRelationships from '~/work_items/components/work_item_relationships/work_item_relationships.vue';
 import WorkItemRelationshipList from '~/work_items/components/work_item_relationships/work_item_relationship_list.vue';
+import WorkItemAddRelationshipForm from '~/work_items/components/work_item_relationships/work_item_add_relationship_form.vue';
 import workItemByIidQuery from '~/work_items/graphql/work_item_by_iid.query.graphql';
 
 import {
@@ -24,23 +25,20 @@ describe('WorkItemRelationships', () => {
   const emptyLinkedWorkItemsQueryHandler = jest
     .fn()
     .mockResolvedValue(workItemByIidResponseFactory());
-  const linkedWorkItemsQueryHandler = jest
-    .fn()
-    .mockResolvedValue(workItemByIidResponseFactory({ linkedItems: mockLinkedItems }));
-  const blockingLinkedWorkItemQueryHandler = jest
-    .fn()
-    .mockResolvedValue(workItemByIidResponseFactory({ linkedItems: mockBlockingLinkedItem }));
 
   const createComponent = async ({
     workItemQueryHandler = emptyLinkedWorkItemsQueryHandler,
+    workItemType = 'Task',
   } = {}) => {
     const mockApollo = createMockApollo([[workItemByIidQuery, workItemQueryHandler]]);
 
     wrapper = shallowMountExtended(WorkItemRelationships, {
       apolloProvider: mockApollo,
       propsData: {
+        workItemId: 'gid://gitlab/WorkItem/1',
         workItemIid: '1',
         workItemFullPath: 'test-project-path',
+        workItemType,
       },
     });
 
@@ -53,6 +51,8 @@ describe('WorkItemRelationships', () => {
   const findLinkedItemsCountContainer = () => wrapper.findByTestId('linked-items-count');
   const findAllWorkItemRelationshipListComponents = () =>
     wrapper.findAllComponents(WorkItemRelationshipList);
+  const findAddButton = () => wrapper.findByTestId('link-item-add-button');
+  const findWorkItemRelationshipForm = () => wrapper.findComponent(WorkItemAddRelationshipForm);
 
   it('shows loading icon when query is not processed', () => {
     createComponent();
@@ -60,22 +60,32 @@ describe('WorkItemRelationships', () => {
     expect(findLoadingIcon().exists()).toBe(true);
   });
 
-  it('renders the component with empty message when there are no items', async () => {
+  it('renders the component with with defaults', async () => {
     await createComponent();
 
     expect(wrapper.find('.work-item-relationships').exists()).toBe(true);
     expect(findEmptyRelatedMessageContainer().exists()).toBe(true);
+    expect(findAddButton().exists()).toBe(true);
+    expect(findWorkItemRelationshipForm().exists()).toBe(false);
   });
 
   it('renders blocking linked item lists', async () => {
-    await createComponent({ workItemQueryHandler: blockingLinkedWorkItemQueryHandler });
+    await createComponent({
+      workItemQueryHandler: jest
+        .fn()
+        .mockResolvedValue(workItemByIidResponseFactory({ linkedItems: mockBlockingLinkedItem })),
+    });
 
     expect(findAllWorkItemRelationshipListComponents().length).toBe(1);
     expect(findLinkedItemsCountContainer().text()).toBe('1');
   });
 
   it('renders blocking, blocked by and related to linked item lists with proper count', async () => {
-    await createComponent({ workItemQueryHandler: linkedWorkItemsQueryHandler });
+    await createComponent({
+      workItemQueryHandler: jest
+        .fn()
+        .mockResolvedValue(workItemByIidResponseFactory({ linkedItems: mockLinkedItems })),
+    });
 
     // renders all 3 lists: blocking, blocked by and related to
     expect(findAllWorkItemRelationshipListComponents().length).toBe(3);
@@ -90,4 +100,24 @@ describe('WorkItemRelationships', () => {
 
     expect(findWidgetWrapper().props('error')).toBe(errorMessage);
   });
+
+  it('does not render add button when there is no permission', async () => {
+    await createComponent({
+      workItemQueryHandler: jest
+        .fn()
+        .mockResolvedValue(workItemByIidResponseFactory({ canAdminWorkItemLink: false })),
+    });
+
+    expect(findAddButton().exists()).toBe(false);
+  });
+
+  it('shows form on add button and hides when cancel button is clicked', async () => {
+    await createComponent();
+
+    await findAddButton().vm.$emit('click');
+    expect(findWorkItemRelationshipForm().exists()).toBe(true);
+
+    await findWorkItemRelationshipForm().vm.$emit('cancel');
+    expect(findWorkItemRelationshipForm().exists()).toBe(false);
+  });
 });
diff --git a/spec/frontend/work_items/mock_data.js b/spec/frontend/work_items/mock_data.js
index ba244b19eb5c68..0250834fa85652 100644
--- a/spec/frontend/work_items/mock_data.js
+++ b/spec/frontend/work_items/mock_data.js
@@ -146,6 +146,7 @@ export const workItemQueryResponse = {
         setWorkItemMetadata: false,
         adminParentLink: false,
         createNote: false,
+        adminWorkItemLink: true,
         __typename: 'WorkItemPermissions',
       },
       widgets: [
@@ -251,6 +252,7 @@ export const updateWorkItemMutationResponse = {
           setWorkItemMetadata: false,
           adminParentLink: false,
           createNote: false,
+          adminWorkItemLink: true,
           __typename: 'WorkItemPermissions',
         },
         reference: 'test-project-path#1',
@@ -360,6 +362,7 @@ export const convertWorkItemMutationResponse = {
           setWorkItemMetadata: false,
           adminParentLink: false,
           createNote: false,
+          adminWorkItemLink: true,
           __typename: 'WorkItemPermissions',
         },
         reference: 'gitlab-org/gitlab-test#1',
@@ -579,6 +582,7 @@ export const workItemResponseFactory = ({
   canDelete = false,
   canCreateNote = false,
   adminParentLink = false,
+  canAdminWorkItemLink = true,
   notificationsWidgetPresent = true,
   currentUserTodosWidgetPresent = true,
   awardEmojiWidgetPresent = true,
@@ -636,6 +640,7 @@ export const workItemResponseFactory = ({
         updateWorkItem: canUpdate,
         setWorkItemMetadata: canUpdate,
         adminParentLink,
+        adminWorkItemLink: canAdminWorkItemLink,
         createNote: canCreateNote,
         __typename: 'WorkItemPermissions',
       },
@@ -914,6 +919,7 @@ export const createWorkItemMutationResponse = {
           setWorkItemMetadata: false,
           adminParentLink: false,
           createNote: false,
+          adminWorkItemLink: true,
           __typename: 'WorkItemPermissions',
         },
         reference: 'test-project-path#1',
@@ -996,6 +1002,7 @@ export const workItemHierarchyEmptyResponse = {
               setWorkItemMetadata: false,
               adminParentLink: false,
               createNote: false,
+              adminWorkItemLink: true,
               __typename: 'WorkItemPermissions',
             },
             confidential: false,
@@ -1046,6 +1053,7 @@ export const workItemHierarchyNoUpdatePermissionResponse = {
         setWorkItemMetadata: false,
         adminParentLink: false,
         createNote: false,
+        adminWorkItemLink: true,
         __typename: 'WorkItemPermissions',
       },
       project: {
@@ -1196,6 +1204,7 @@ export const workItemHierarchyResponse = {
               setWorkItemMetadata: true,
               adminParentLink: true,
               createNote: true,
+              adminWorkItemLink: true,
               __typename: 'WorkItemPermissions',
             },
             author: {
@@ -1297,6 +1306,7 @@ export const workItemObjectiveWithChild = {
     setWorkItemMetadata: true,
     adminParentLink: true,
     createNote: true,
+    adminWorkItemLink: true,
     __typename: 'WorkItemPermissions',
   },
   author: {
@@ -1368,6 +1378,7 @@ export const workItemHierarchyTreeResponse = {
         setWorkItemMetadata: true,
         adminParentLink: true,
         createNote: true,
+        adminWorkItemLink: true,
         __typename: 'WorkItemPermissions',
       },
       confidential: false,
@@ -1449,6 +1460,7 @@ export const changeIndirectWorkItemParentMutationResponse = {
           setWorkItemMetadata: true,
           adminParentLink: true,
           createNote: true,
+          adminWorkItemLink: true,
           __typename: 'WorkItemPermissions',
         },
         description: null,
@@ -1517,6 +1529,7 @@ export const changeWorkItemParentMutationResponse = {
           setWorkItemMetadata: true,
           adminParentLink: true,
           createNote: true,
+          adminWorkItemLink: true,
           __typename: 'WorkItemPermissions',
         },
         description: null,
@@ -1568,6 +1581,7 @@ export const availableWorkItemsResponse = {
         nodes: [
           {
             id: 'gid://gitlab/WorkItem/458',
+            iid: '2',
             title: 'Task 1',
             state: 'OPEN',
             createdAt: '2022-08-03T12:41:54Z',
@@ -1576,6 +1590,7 @@ export const availableWorkItemsResponse = {
           },
           {
             id: 'gid://gitlab/WorkItem/459',
+            iid: '3',
             title: 'Task 2',
             state: 'OPEN',
             createdAt: '2022-08-03T12:41:54Z',
@@ -1584,6 +1599,7 @@ export const availableWorkItemsResponse = {
           },
           {
             id: 'gid://gitlab/WorkItem/460',
+            iid: '4',
             title: 'Task 3',
             state: 'OPEN',
             createdAt: '2022-08-03T12:41:54Z',
@@ -1605,6 +1621,7 @@ export const searchedWorkItemsResponse = {
         nodes: [
           {
             id: 'gid://gitlab/WorkItem/459',
+            iid: '3',
             title: 'Task 2',
             state: 'OPEN',
             createdAt: '2022-08-03T12:41:54Z',
@@ -3439,6 +3456,19 @@ export const getTodosMutationResponse = (state) => {
   };
 };
 
+export const linkedWorkItemResponse = (options, errors = []) => {
+  const response = workItemResponseFactory(options);
+  return {
+    data: {
+      workItemAddLinkedItems: {
+        workItem: response.data.workItem,
+        errors,
+        __typename: 'WorkItemAddLinkedItemsPayload',
+      },
+    },
+  };
+};
+
 export const groupWorkItemsQueryResponse = {
   data: {
     group: {
diff --git a/spec/frontend/work_items/pages/create_work_item_spec.js b/spec/frontend/work_items/pages/create_work_item_spec.js
index c369a454286762..87dbb18dcc4b4a 100644
--- a/spec/frontend/work_items/pages/create_work_item_spec.js
+++ b/spec/frontend/work_items/pages/create_work_item_spec.js
@@ -199,8 +199,6 @@ describe('Create work item component', () => {
     wrapper.find('form').trigger('submit');
     await waitForPromises();
 
-    expect(findAlert().text()).toBe(
-      'Something went wrong when creating work item. Please try again.',
-    );
+    expect(findAlert().text()).toBe('Something went wrong when creating item. Please try again.');
   });
 });
diff --git a/spec/services/work_items/related_work_item_links/create_service_spec.rb b/spec/services/work_items/related_work_item_links/create_service_spec.rb
index 992beb705aa128..8afbe39459c6fd 100644
--- a/spec/services/work_items/related_work_item_links/create_service_spec.rb
+++ b/spec/services/work_items/related_work_item_links/create_service_spec.rb
@@ -28,7 +28,7 @@
 
     it_behaves_like 'issuable link creation', use_references: false do
       let(:response_keys) { [:status, :created_references, :message] }
-      let(:already_assigned_error_msg) { "Work items are already linked" }
+      let(:already_assigned_error_msg) { "Items are already linked" }
       let(:no_found_error_msg) do
         'No matching work item found. Make sure you are adding a valid ID and you have access to the item.'
       end
-- 
GitLab