diff options
author | GitLab Bot <gitlab-bot@gitlab.com> | 2022-07-15 09:09:57 +0300 |
---|---|---|
committer | GitLab Bot <gitlab-bot@gitlab.com> | 2022-07-15 09:09:57 +0300 |
commit | 4b41b57abf3ad9c2e0e81b3804cb01af6f879349 (patch) | |
tree | fc8919c5c45d52d860b0f267fdab23c787243659 /app/assets/javascripts/work_items | |
parent | 08e3d715127256b53529a7719b80569aa0d8bc52 (diff) |
Add latest changes from gitlab-org/gitlab@master
Diffstat (limited to 'app/assets/javascripts/work_items')
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 + } + } + } } } } |