Add latest changes from gitlab-org/gitlab@master

5 files changed, 106 insertions, 26 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 bdfff100333..60b30a82e9d 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
@@ -77,6 +77,9 @@ export default {
     isLoading() {
       return this.$apollo.queries.children.loading;
     },
+    childrenIds() {
+      return this.children.map((c) => c.id);
+    },
   },
   methods: {
     badgeVariant(state) {
@@ -88,13 +91,16 @@ export default {
     toggleAddForm() {
       this.isShownAddForm = !this.isShownAddForm;
     },
+    addChild(child) {
+      this.children = [child, ...this.children];
+    },
   },
   i18n: {
     title: s__('WorkItem|Child items'),
     emptyStateMessage: s__(
       'WorkItem|No child items are currently assigned. Use child items to prioritize tasks that your team should complete in order to accomplish your goals!',
     ),
-    addChildButtonLabel: s__('WorkItem|Add a child'),
+    addChildButtonLabel: s__('WorkItem|Add a task'),
   },
   WIDGET_TYPE_TASK_ICON: WIDGET_ICONS.TASK,
   WORK_ITEM_STATUS_TEXT,
@@ -107,8 +113,16 @@ export default {
       class="gl-p-4 gl-display-flex gl-justify-content-space-between"
       :class="{ 'gl-border-b-1 gl-border-b-solid gl-border-b-gray-100': isOpen }"
     >
-      <h5 class="gl-m-0 gl-line-height-32">{{ $options.i18n.title }}</h5>
-      <div class="gl-border-l-1 gl-border-l-solid gl-border-l-gray-50 gl-pl-4">
+      <h5 class="gl-m-0 gl-line-height-32 gl-flex-grow-1">{{ $options.i18n.title }}</h5>
+      <gl-button
+        v-if="!isShownAddForm"
+        category="secondary"
+        data-testid="toggle-add-form"
+        @click="toggleAddForm"
+      >
+        {{ $options.i18n.addChildButtonLabel }}
+      </gl-button>
+      <div class="gl-border-l-1 gl-border-l-solid gl-border-l-gray-50 gl-pl-4 gl-ml-3">
         <gl-button
           category="tertiary"
           :icon="toggleIcon"
@@ -126,21 +140,19 @@ export default {
       <gl-loading-icon v-if="isLoading" color="dark" class="gl-my-3" />
 
       <template v-else>
-        <div v-if="isChildrenEmpty" class="gl-px-8" data-testid="links-empty">
-          <p>
+        <div v-if="isChildrenEmpty && !isShownAddForm" data-testid="links-empty">
+          <p class="gl-my-3">
             {{ $options.i18n.emptyStateMessage }}
           </p>
-          <gl-button
-            v-if="!isShownAddForm"
-            category="secondary"
-            variant="confirm"
-            data-testid="toggle-add-form"
-            @click="toggleAddForm"
-          >
-            {{ $options.i18n.addChildButtonLabel }}
-          </gl-button>
-          <work-item-links-form v-else data-testid="add-links-form" @cancel="toggleAddForm" />
         </div>
+        <work-item-links-form
+          v-if="isShownAddForm"
+          data-testid="add-links-form"
+          :issuable-gid="issuableGid"
+          :children-ids="childrenIds"
+          @cancel="toggleAddForm"
+          @addWorkItemChild="addChild"
+        />
         <div
           v-for="child in children"
           :key="child.id"
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 9b981460f99..fadba0753db 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,48 +1,107 @@
 <script>
-import { GlForm, GlFormCombobox, GlButton } from '@gitlab/ui';
+import { GlAlert, GlForm, GlFormCombobox, GlButton } from '@gitlab/ui';
 import { getIdFromGraphQLId } from '~/graphql_shared/utils';
-import { __ } from '~/locale';
+import { __, s__ } from '~/locale';
 import projectWorkItemsQuery from '../../graphql/project_work_items.query.graphql';
+import updateWorkItemMutation from '../../graphql/update_work_item.mutation.graphql';
 
 export default {
   components: {
+    GlAlert,
     GlForm,
     GlFormCombobox,
     GlButton,
   },
   inject: ['projectPath'],
+  props: {
+    issuableGid: {
+      type: String,
+      required: false,
+      default: null,
+    },
+    childrenIds: {
+      type: Array,
+      required: false,
+      default: () => [],
+    },
+  },
   apollo: {
     availableWorkItems: {
       query: projectWorkItemsQuery,
       variables() {
         return {
           projectPath: this.projectPath,
-          searchTerm: this.search,
+          searchTerm: this.search?.title || this.search,
+          types: ['TASK'],
         };
       },
+      skip() {
+        return this.search.length === 0;
+      },
       update(data) {
-        return data.workspace.workItems.edges.map((wi) => wi.node);
+        return data.workspace.workItems.edges
+          .filter((wi) => !this.childrenIds.includes(wi.node.id))
+          .map((wi) => wi.node);
       },
     },
   },
   data() {
     return {
-      relatedWorkItem: '',
       availableWorkItems: [],
       search: '',
+      error: null,
     };
   },
   methods: {
     getIdFromGraphQLId,
+    unsetError() {
+      this.error = null;
+    },
+    addChild() {
+      this.$apollo
+        .mutate({
+          mutation: updateWorkItemMutation,
+          variables: {
+            input: {
+              id: this.issuableGid,
+              hierarchyWidget: {
+                childrenIds: [this.search.id],
+              },
+            },
+          },
+        })
+        .then(({ data }) => {
+          if (data.workItemUpdate?.errors?.length) {
+            [this.error] = data.workItemUpdate.errors;
+          } else {
+            this.unsetError();
+            this.$emit('addWorkItemChild', this.search);
+          }
+        })
+        .catch(() => {
+          this.error = this.$options.i18n.errorMessage;
+        })
+        .finally(() => {
+          this.search = '';
+        });
+    },
   },
   i18n: {
     inputLabel: __('Children'),
+    errorMessage: s__(
+      'WorkItem|Something went wrong when trying to add a child. Please try again.',
+    ),
   },
 };
 </script>
 
 <template>
-  <gl-form @submit.prevent>
+  <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"
+  >
+    <gl-alert v-if="error" variant="danger" class="gl-mb-3" @dismiss="unsetError">
+      {{ error }}
+    </gl-alert>
     <gl-form-combobox
       v-model="search"
       :token-list="availableWorkItems"
@@ -59,10 +118,10 @@ export default {
         </div>
       </template>
     </gl-form-combobox>
-    <gl-button type="submit" category="secondary" variant="confirm">
-      {{ s__('WorkItem|Add') }}
+    <gl-button category="secondary" data-testid="add-child-button" @click="addChild">
+      {{ s__('WorkItem|Add task') }}
     </gl-button>
-    <gl-button category="tertiary" class="gl-float-right" @click="$emit('cancel')">
+    <gl-button category="tertiary" @click="$emit('cancel')">
       {{ s__('WorkItem|Cancel') }}
     </gl-button>
   </gl-form>
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 173a29be6a9..7d38d203b84 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
@@ -1,11 +1,12 @@
-query projectWorkItems($searchTerm: String, $projectPath: ID!) {
+query projectWorkItems($searchTerm: String, $projectPath: ID!, $types: [IssueType!]) {
   workspace: project(fullPath: $projectPath) {
     id
-    workItems(search: $searchTerm) {
+    workItems(search: $searchTerm, types: $types) {
       edges {
         node {
           id
           title
+          state
         }
       }
     }
diff --git a/app/assets/javascripts/work_items/graphql/update_work_item.mutation.graphql b/app/assets/javascripts/work_items/graphql/update_work_item.mutation.graphql
index c0b6e856411..25eb8099251 100644
--- a/app/assets/javascripts/work_items/graphql/update_work_item.mutation.graphql
+++ b/app/assets/javascripts/work_items/graphql/update_work_item.mutation.graphql
@@ -5,5 +5,6 @@ mutation workItemUpdate($input: WorkItemUpdateInput!) {
     workItem {
       ...WorkItem
     }
+    errors
   }
 }
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 78ed8d43c77..5f64eda96aa 100644
--- a/app/assets/javascripts/work_items/graphql/work_item.fragment.graphql
+++ b/app/assets/javascripts/work_items/graphql/work_item.fragment.graphql
@@ -35,6 +35,13 @@ fragment WorkItem on WorkItem {
         iid
         title
       }
+      children {
+        edges {
+          node {
+            id
+          }
+        }
+      }
     }
   }
 }