Add latest changes from gitlab-org/gitlab@master

4 files changed, 116 insertions, 13 deletions

diff --git a/app/assets/javascripts/work_items/components/work_item_links/work_item_links.vue b/app/assets/javascripts/work_items/components/work_item_links/work_item_links.vue
index e65f0cfb1f2..6a43fdb541f 100644
--- a/app/assets/javascripts/work_items/components/work_item_links/work_item_links.vue
+++ b/app/assets/javascripts/work_items/components/work_item_links/work_item_links.vue
@@ -95,8 +95,14 @@ export default {
     toggle() {
       this.isOpen = !this.isOpen;
     },
-    toggleAddForm() {
-      this.isShownAddForm = !this.isShownAddForm;
+    showAddForm() {
+      this.isShownAddForm = true;
+      this.$nextTick(() => {
+        this.$refs.wiLinksForm.$refs.wiTitleInput?.$el.focus();
+      });
+    },
+    hideAddForm() {
+      this.isShownAddForm = false;
     },
     addChild(child) {
       this.children = [child, ...this.children];
@@ -122,10 +128,10 @@ export default {
     >
       <h5 class="gl-m-0 gl-line-height-32 gl-flex-grow-1">{{ $options.i18n.title }}</h5>
       <gl-button
-        v-if="!isShownAddForm && canUpdate"
+        v-if="canUpdate"
         category="secondary"
         data-testid="toggle-add-form"
-        @click="toggleAddForm"
+        @click="showAddForm"
       >
         {{ $options.i18n.addChildButtonLabel }}
       </gl-button>
@@ -154,10 +160,11 @@ export default {
         </div>
         <work-item-links-form
           v-if="isShownAddForm"
+          ref="wiLinksForm"
           data-testid="add-links-form"
           :issuable-gid="issuableGid"
           :children-ids="childrenIds"
-          @cancel="toggleAddForm"
+          @cancel="hideAddForm"
           @addWorkItemChild="addChild"
         />
         <div
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 fadba0753db..d01d59050e6 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
@@ -1,9 +1,11 @@
 <script>
-import { GlAlert, GlForm, GlFormCombobox, GlButton } from '@gitlab/ui';
+import { GlAlert, GlFormGroup, GlForm, GlFormCombobox, GlButton, GlFormInput } from '@gitlab/ui';
 import { getIdFromGraphQLId } from '~/graphql_shared/utils';
 import { __, s__ } from '~/locale';
 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 { WORK_ITEM_TYPE_IDS } from '../../constants';
 
 export default {
   components: {
@@ -11,6 +13,8 @@ export default {
     GlForm,
     GlFormCombobox,
     GlButton,
+    GlFormGroup,
+    GlFormInput,
   },
   inject: ['projectPath'],
   props: {
@@ -28,6 +32,7 @@ export default {
   apollo: {
     availableWorkItems: {
       query: projectWorkItemsQuery,
+      debounce: 200,
       variables() {
         return {
           projectPath: this.projectPath,
@@ -50,8 +55,29 @@ export default {
       availableWorkItems: [],
       search: '',
       error: null,
+      childToCreateTitle: null,
     };
   },
+  computed: {
+    actionsList() {
+      return [
+        {
+          label: this.$options.i18n.createChildOptionLabel,
+          fn: () => {
+            this.childToCreateTitle = this.search?.title || this.search;
+          },
+        },
+      ];
+    },
+    addOrCreateButtonLabel() {
+      return this.childToCreateTitle
+        ? this.$options.i18n.createChildOptionLabel
+        : this.$options.i18n.addTaskButtonLabel;
+    },
+    addOrCreateMethod() {
+      return this.childToCreateTitle ? this.createChild : this.addChild;
+    },
+  },
   methods: {
     getIdFromGraphQLId,
     unsetError() {
@@ -79,35 +105,77 @@ export default {
           }
         })
         .catch(() => {
-          this.error = this.$options.i18n.errorMessage;
+          this.error = this.$options.i18n.addChildErrorMessage;
         })
         .finally(() => {
           this.search = '';
         });
     },
+    createChild() {
+      this.$apollo
+        .mutate({
+          mutation: createWorkItemMutation,
+          variables: {
+            input: {
+              title: this.search?.title || this.search,
+              projectPath: this.projectPath,
+              workItemTypeId: WORK_ITEM_TYPE_IDS.TASK,
+              hierarchyWidget: {
+                parentId: this.issuableGid,
+              },
+            },
+          },
+        })
+        .then(({ data }) => {
+          if (data.workItemCreate?.errors?.length) {
+            [this.error] = data.workItemCreate.errors;
+          } else {
+            this.unsetError();
+            this.$emit('addWorkItemChild', data.workItemCreate.workItem);
+          }
+        })
+        .catch(() => {
+          this.error = this.$options.i18n.createChildErrorMessage;
+        })
+        .finally(() => {
+          this.search = '';
+          this.childToCreateTitle = null;
+        });
+    },
   },
   i18n: {
-    inputLabel: __('Children'),
-    errorMessage: s__(
+    inputLabel: __('Title'),
+    addTaskButtonLabel: s__('WorkItem|Add task'),
+    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.',
+    ),
+    placeholder: s__('WorkItem|Add a title'),
+    fieldValidationMessage: __('Maximum of 255 characters'),
   },
 };
 </script>
 
 <template>
   <gl-form
-    class="gl-mb-3 gl-bg-white gl-mb-3 gl-py-3 gl-px-4 gl-border gl-border-gray-100 gl-rounded-base"
+    class="gl-bg-white gl-mb-3 gl-p-4 gl-border gl-border-gray-100 gl-rounded-base"
+    @submit.prevent="createChild"
   >
     <gl-alert v-if="error" variant="danger" class="gl-mb-3" @dismiss="unsetError">
       {{ error }}
     </gl-alert>
+    <!-- Follow up issue to turn this functionality back on https://gitlab.com/gitlab-org/gitlab/-/issues/368757 -->
     <gl-form-combobox
+      v-if="false"
       v-model="search"
       :token-list="availableWorkItems"
       match-value-to-attr="title"
       class="gl-mb-4"
       :label-text="$options.i18n.inputLabel"
+      :action-list="actionsList"
       label-sr-only
       autofocus
     >
@@ -117,11 +185,34 @@ export default {
           <div>{{ item.title }}</div>
         </div>
       </template>
+      <template #action="{ item }">
+        <span class="gl-text-blue-500">{{ item.label }}</span>
+      </template>
     </gl-form-combobox>
-    <gl-button category="secondary" data-testid="add-child-button" @click="addChild">
-      {{ s__('WorkItem|Add task') }}
+    <gl-form-group
+      :label="$options.i18n.inputLabel"
+      :description="$options.i18n.fieldValidationMessage"
+    >
+      <gl-form-input
+        ref="wiTitleInput"
+        v-model="search"
+        :placeholder="$options.i18n.placeholder"
+        maxlength="255"
+        class="gl-mb-3"
+        autofocus
+      />
+    </gl-form-group>
+    <gl-button
+      category="primary"
+      variant="confirm"
+      size="small"
+      type="submit"
+      :disabled="search.length === 0"
+      data-testid="add-child-button"
+    >
+      {{ $options.i18n.createChildOptionLabel }}
     </gl-button>
-    <gl-button category="tertiary" @click="$emit('cancel')">
+    <gl-button category="secondary" size="small" @click="$emit('cancel')">
       {{ s__('WorkItem|Cancel') }}
     </gl-button>
   </gl-form>
diff --git a/app/assets/javascripts/work_items/constants.js b/app/assets/javascripts/work_items/constants.js
index 2b44642877b..00a5f050b77 100644
--- a/app/assets/javascripts/work_items/constants.js
+++ b/app/assets/javascripts/work_items/constants.js
@@ -35,3 +35,7 @@ export const WORK_ITEM_STATUS_TEXT = {
   CLOSED: s__('WorkItem|Closed'),
   OPEN: s__('WorkItem|Open'),
 };
+
+export const WORK_ITEM_TYPE_IDS = {
+  TASK: 'gid://gitlab/WorkItems::Type/5',
+};
diff --git a/app/assets/javascripts/work_items/graphql/create_work_item.mutation.graphql b/app/assets/javascripts/work_items/graphql/create_work_item.mutation.graphql
index 0a406187a09..4cc23fa0071 100644
--- a/app/assets/javascripts/work_items/graphql/create_work_item.mutation.graphql
+++ b/app/assets/javascripts/work_items/graphql/create_work_item.mutation.graphql
@@ -5,5 +5,6 @@ mutation createWorkItem($input: WorkItemCreateInput!) {
     workItem {
       ...WorkItem
     }
+    errors
   }
 }