1 files changed, 47 insertions, 39 deletions

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 095ea86e0d8..5cf0c4154bb 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
@@ -9,7 +9,16 @@ import projectWorkItemTypesQuery from '~/work_items/graphql/project_work_item_ty
 import projectWorkItemsQuery from '../../graphql/project_work_items.query.graphql';
 import updateWorkItemMutation from '../../graphql/update_work_item.mutation.graphql';
 import createWorkItemMutation from '../../graphql/create_work_item.mutation.graphql';
-import { FORM_TYPES, TASK_TYPE_NAME } from '../../constants';
+import {
+  FORM_TYPES,
+  WORK_ITEMS_TYPE_MAP,
+  WORK_ITEM_TYPE_ENUM_TASK,
+  I18N_WORK_ITEM_CREATE_BUTTON_LABEL,
+  I18N_WORK_ITEM_SEARCH_INPUT_PLACEHOLDER,
+  I18N_WORK_ITEM_ADD_BUTTON_LABEL,
+  I18N_WORK_ITEM_ADD_MULTIPLE_BUTTON_LABEL,
+  sprintfWorkItem,
+} from '../../constants';
 
 export default {
   components: {
@@ -52,6 +61,11 @@ export default {
       type: String,
       required: true,
     },
+    childrenType: {
+      type: String,
+      required: false,
+      default: WORK_ITEM_TYPE_ENUM_TASK,
+    },
   },
   apollo: {
     workItemTypes: {
@@ -71,7 +85,7 @@ export default {
         return {
           projectPath: this.projectPath,
           searchTerm: this.search?.title || this.search,
-          types: ['TASK'],
+          types: [this.childrenType],
           in: this.search ? 'TITLE' : undefined,
         };
       },
@@ -79,7 +93,9 @@ export default {
         return !this.searchStarted;
       },
       update(data) {
-        return data.workspace.workItems.nodes.filter((wi) => !this.childrenIds.includes(wi.id));
+        return data.workspace.workItems.nodes.filter(
+          (wi) => !this.childrenIds.includes(wi.id) && this.issuableGid !== wi.id,
+        );
       },
     },
   },
@@ -99,14 +115,14 @@ export default {
       let workItemInput = {
         title: this.search?.title || this.search,
         projectPath: this.projectPath,
-        workItemTypeId: this.taskWorkItemType,
+        workItemTypeId: this.childWorkItemType,
         hierarchyWidget: {
           parentId: this.issuableGid,
         },
         confidential: this.parentConfidential,
       };
 
-      if (this.associateMilestone) {
+      if (this.parentMilestoneId) {
         workItemInput = {
           ...workItemInput,
           milestoneWidget: {
@@ -114,46 +130,62 @@ export default {
           },
         };
       }
+
+      if (this.associateIteration) {
+        workItemInput = {
+          ...workItemInput,
+          iterationWidget: {
+            iterationId: this.parentIterationId,
+          },
+        };
+      }
+
       return workItemInput;
     },
+    workItemsMvcEnabled() {
+      return this.glFeatures.workItemsMvc;
+    },
     workItemsMvc2Enabled() {
       return this.glFeatures.workItemsMvc2;
     },
     isCreateForm() {
       return this.formType === FORM_TYPES.create;
     },
+    childrenTypeName() {
+      return WORK_ITEMS_TYPE_MAP[this.childrenType]?.name;
+    },
     addOrCreateButtonLabel() {
       if (this.isCreateForm) {
-        return this.$options.i18n.createChildOptionLabel;
+        return sprintfWorkItem(I18N_WORK_ITEM_CREATE_BUTTON_LABEL, this.childrenTypeName);
       } else if (this.workItemsToAdd.length > 1) {
-        return this.$options.i18n.addTasksButtonLabel;
+        return sprintfWorkItem(I18N_WORK_ITEM_ADD_MULTIPLE_BUTTON_LABEL, this.childrenTypeName);
       }
-      return this.$options.i18n.addTaskButtonLabel;
+      return sprintfWorkItem(I18N_WORK_ITEM_ADD_BUTTON_LABEL, this.childrenTypeName);
     },
     addOrCreateMethod() {
       return this.isCreateForm ? this.createChild : this.addChild;
     },
-    taskWorkItemType() {
-      return this.workItemTypes.find((type) => type.name === TASK_TYPE_NAME)?.id;
+    childWorkItemType() {
+      return this.workItemTypes.find((type) => type.name === this.childrenTypeName)?.id;
     },
     parentIterationId() {
       return this.parentIteration?.id;
     },
     associateIteration() {
-      return this.parentIterationId && this.hasIterationsFeature && this.workItemsMvc2Enabled;
+      return this.parentIterationId && this.hasIterationsFeature;
     },
     parentMilestoneId() {
       return this.parentMilestone?.id;
     },
-    associateMilestone() {
-      return this.parentMilestoneId && this.workItemsMvc2Enabled;
-    },
     isSubmitButtonDisabled() {
       return this.isCreateForm ? this.search.length === 0 : this.workItemsToAdd.length === 0;
     },
     isLoading() {
       return this.$apollo.queries.availableWorkItems.loading;
     },
+    addInputPlaceholder() {
+      return sprintfWorkItem(I18N_WORK_ITEM_SEARCH_INPUT_PLACEHOLDER, this.childrenTypeName);
+    },
   },
   created() {
     this.debouncedSearchKeyUpdate = debounce(this.setSearchKey, DEFAULT_DEBOUNCE_AND_THROTTLE_MS);
@@ -206,13 +238,6 @@ export default {
           } else {
             this.unsetError();
             this.$emit('addWorkItemChild', data.workItemCreate.workItem);
-            /**
-             * call update mutation only when there is an iteration associated with the issue
-             */
-            // TODO: setting the iteration should be moved to the creation mutation once the backend is done
-            if (this.associateIteration) {
-              this.addIterationToWorkItem(data.workItemCreate.workItem.id);
-            }
           }
         })
         .catch(() => {
@@ -223,19 +248,6 @@ export default {
           this.childToCreateTitle = null;
         });
     },
-    async addIterationToWorkItem(workItemId) {
-      await this.$apollo.mutate({
-        mutation: updateWorkItemMutation,
-        variables: {
-          input: {
-            id: workItemId,
-            iterationWidget: {
-              iterationId: this.parentIterationId,
-            },
-          },
-        },
-      });
-    },
     setSearchKey(value) {
       this.search = value;
     },
@@ -253,17 +265,13 @@ export default {
   },
   i18n: {
     inputLabel: __('Title'),
-    addTaskButtonLabel: s__('WorkItem|Add task'),
-    addTasksButtonLabel: s__('WorkItem|Add tasks'),
     addChildErrorMessage: s__(
       'WorkItem|Something went wrong when trying to add a child. Please try again.',
     ),
-    createChildOptionLabel: s__('WorkItem|Create task'),
     createChildErrorMessage: s__(
       'WorkItem|Something went wrong when trying to create a child. Please try again.',
     ),
     createPlaceholder: s__('WorkItem|Add a title'),
-    addPlaceholder: s__('WorkItem|Search existing tasks'),
     fieldValidationMessage: __('Maximum of 255 characters'),
   },
 };
@@ -296,7 +304,7 @@ export default {
       v-model="workItemsToAdd"
       :dropdown-items="availableWorkItems"
       :loading="isLoading"
-      :placeholder="$options.i18n.addPlaceholder"
+      :placeholder="addInputPlaceholder"
       menu-class="gl-dropdown-menu-wide dropdown-reduced-height gl-min-h-7!"
       class="gl-mb-4"
       data-testid="work-item-token-select-input"