diff options
author | GitLab Bot <gitlab-bot@gitlab.com> | 2022-08-02 15:09:26 +0300 |
---|---|---|
committer | GitLab Bot <gitlab-bot@gitlab.com> | 2022-08-02 15:09:26 +0300 |
commit | c658e2d29296721aa65d569a42b778485042795a (patch) | |
tree | 24a39099120ead3fc31d7f115094dc928c38af29 /app/assets/javascripts/work_items | |
parent | 3256c55b0f188227e27a4863532feee84e654911 (diff) |
Add latest changes from gitlab-org/gitlab@master
Diffstat (limited to 'app/assets/javascripts/work_items')
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 } } |