diff options
Diffstat (limited to 'app/assets/javascripts/work_items/components/work_item_links/work_item_links.vue')
-rw-r--r-- | app/assets/javascripts/work_items/components/work_item_links/work_item_links.vue | 56 |
1 files changed, 46 insertions, 10 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 0d3e951de7e..3d469b790a1 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 @@ -1,5 +1,13 @@ <script> -import { GlButton, GlIcon, GlAlert, GlLoadingIcon, GlTooltipDirective } from '@gitlab/ui'; +import { + GlButton, + GlDropdown, + GlDropdownItem, + GlIcon, + GlAlert, + GlLoadingIcon, + GlTooltipDirective, +} from '@gitlab/ui'; import { produce } from 'immer'; import { s__ } from '~/locale'; import { convertToGraphQLId, getIdFromGraphQLId } from '~/graphql_shared/utils'; @@ -9,7 +17,12 @@ import getIssueDetailsQuery from 'ee_else_ce/work_items/graphql/get_issue_detail import { isMetaKey } from '~/lib/utils/common_utils'; import { setUrlParams, updateHistory } from '~/lib/utils/url_utility'; -import { WIDGET_ICONS, WORK_ITEM_STATUS_TEXT, WIDGET_TYPE_HIERARCHY } from '../../constants'; +import { + FORM_TYPES, + WIDGET_ICONS, + WORK_ITEM_STATUS_TEXT, + WIDGET_TYPE_HIERARCHY, +} from '../../constants'; import getWorkItemLinksQuery from '../../graphql/work_item_links.query.graphql'; import updateWorkItemMutation from '../../graphql/update_work_item.mutation.graphql'; import workItemQuery from '../../graphql/work_item.query.graphql'; @@ -20,6 +33,8 @@ import WorkItemLinksForm from './work_item_links_form.vue'; export default { components: { GlButton, + GlDropdown, + GlDropdownItem, GlIcon, GlAlert, GlLoadingIcon, @@ -80,6 +95,7 @@ export default { prefetchedWorkItem: null, error: undefined, parentIssue: null, + formType: null, }; }, computed: { @@ -89,6 +105,9 @@ export default { issuableIteration() { return this.parentIssue?.iteration; }, + issuableMilestone() { + return this.parentIssue?.milestone; + }, children() { return ( this.workItem?.widgets.find((widget) => widget.type === WIDGET_TYPE_HIERARCHY)?.children @@ -125,9 +144,10 @@ export default { toggle() { this.isOpen = !this.isOpen; }, - showAddForm() { + showAddForm(formType) { this.isOpen = true; this.isShownAddForm = true; + this.formType = formType; this.$nextTick(() => { this.$refs.wiLinksForm.$refs.wiTitleInput?.$el.focus(); }); @@ -239,15 +259,18 @@ export default { 'WorkItem|No tasks are currently assigned. Use tasks to break down this issue into smaller parts.', ), addChildButtonLabel: s__('WorkItem|Add'), + addChildOptionLabel: s__('WorkItem|Existing task'), + createChildOptionLabel: s__('WorkItem|New task'), }, WIDGET_TYPE_TASK_ICON: WIDGET_ICONS.TASK, WORK_ITEM_STATUS_TEXT, + FORM_TYPES, }; </script> <template> <div - class="gl-rounded-base gl-border-1 gl-border-solid gl-border-gray-100 gl-bg-gray-10 gl-mt-5" + class="gl-rounded-base gl-border-1 gl-border-solid gl-border-gray-100 gl-bg-gray-10 gl-mt-4" data-testid="work-item-links" > <div @@ -264,15 +287,26 @@ export default { {{ childrenCountLabel }} </span> </div> - <gl-button + <gl-dropdown v-if="canUpdate" - category="secondary" + right size="small" - data-testid="toggle-add-form" - @click="showAddForm" + :text="$options.i18n.addChildButtonLabel" + data-testid="toggle-form" > - {{ $options.i18n.addChildButtonLabel }} - </gl-button> + <gl-dropdown-item + data-testid="toggle-create-form" + @click="showAddForm($options.FORM_TYPES.create)" + > + {{ $options.i18n.createChildOptionLabel }} + </gl-dropdown-item> + <gl-dropdown-item + data-testid="toggle-add-form" + @click="showAddForm($options.FORM_TYPES.add)" + > + {{ $options.i18n.addChildOptionLabel }} + </gl-dropdown-item> + </gl-dropdown> <div class="gl-border-l-1 gl-border-l-solid gl-border-l-gray-100 gl-pl-3 gl-ml-3"> <gl-button category="tertiary" @@ -309,6 +343,8 @@ export default { :children-ids="childrenIds" :parent-confidential="confidential" :parent-iteration="issuableIteration" + :parent-milestone="issuableMilestone" + :form-type="formType" @cancel="hideAddForm" @addWorkItemChild="addChild" /> |