Commit 939784d2 authored by Florie Guibert's avatar Florie Guibert

Consolidate epic tree buttons

- Feedback
parent b38c9bd2
...@@ -72,7 +72,11 @@ export default { ...@@ -72,7 +72,11 @@ export default {
mounted() { mounted() {
this.setupAutoComplete(); this.setupAutoComplete();
if (this.focusOnMount) { if (this.focusOnMount) {
this.$refs.input.focus(); this.$nextTick()
.then(() => {
this.$refs.input.focus();
})
.catch(() => {});
} }
}, },
beforeUpdate() { beforeUpdate() {
......
...@@ -29,7 +29,11 @@ export default { ...@@ -29,7 +29,11 @@ export default {
}, },
}, },
mounted() { mounted() {
this.$refs.input.focus(); this.$nextTick()
.then(() => {
this.$refs.input.focus();
})
.catch(() => {});
}, },
methods: { methods: {
onFormSubmit() { onFormSubmit() {
......
<script> <script>
import { GlDropdown, GlDropdownDivider, GlDropdownHeader, GlDropdownItem } from '@gitlab/ui'; import { GlDropdown, GlDropdownDivider, GlDropdownHeader, GlDropdownItem } from '@gitlab/ui';
import { s__ } from '~/locale'; import { s__, __ } from '~/locale';
const epicActionItems = [ const issueActionItems = [
{ {
title: s__('Epics|Add an epic'), title: __('Add a new issue'),
description: s__('Epics|Add an existing epic as a child epic.'), eventName: 'showCreateIssueForm',
eventName: 'showAddEpicForm',
}, },
{ {
title: s__('Epics|Create new epic'), title: __('Add an existing issue'),
description: s__('Epics|Create an epic within this group and add it as a child epic.'), eventName: 'showAddIssueForm',
eventName: 'showCreateEpicForm',
}, },
]; ];
const issueActionItems = [ const epicActionItems = [
{ {
title: s__('Add an issue'), title: s__('Epics|Add a new epic'),
description: s__('Add an existing issue to the epic.'), eventName: 'showCreateEpicForm',
eventName: 'showAddIssueForm',
}, },
{ {
title: s__('Create an issue'), title: s__('Epics|Add an existing epic'),
description: s__('Create a new issue and add it to the epic.'), eventName: 'showAddEpicForm',
eventName: 'showCreateIssueForm',
}, },
]; ];
...@@ -45,14 +41,9 @@ export default { ...@@ -45,14 +41,9 @@ export default {
default: false, default: false,
}, },
}, },
computed: {
actionItems() {
return this.allowSubEpics ? [...epicActionItems, ...issueActionItems] : issueActionItems;
},
},
methods: { methods: {
change(item) { change({ eventName }) {
this.$emit(item.eventName); this.$emit(eventName);
}, },
}, },
}; };
...@@ -60,26 +51,31 @@ export default { ...@@ -60,26 +51,31 @@ export default {
<template> <template>
<gl-dropdown <gl-dropdown
:menu-class="`dropdown-menu-selectable`" :text="__('Add')"
:text="s__('Add')"
variant="secondary" variant="secondary"
data-qa-selector="epic_issue_actions_split_button" data-qa-selector="epic_issue_actions_split_button"
v-on="$listeners" right
> >
<gl-dropdown-header>{{ s__('Issue') }}</gl-dropdown-header> <gl-dropdown-header>{{ __('Issue') }}</gl-dropdown-header>
<template v-for="item in $options.issueActionItems"> <gl-dropdown-item
<gl-dropdown-item :key="item.eventName" active-class="is-active" @click="change(item)"> v-for="item in $options.issueActionItems"
{{ item.title }} :key="item.eventName"
</gl-dropdown-item> active-class="is-active"
</template> @click="change(item)"
>
{{ item.title }}
</gl-dropdown-item>
<template v-if="allowSubEpics"> <template v-if="allowSubEpics">
<gl-dropdown-divider /> <gl-dropdown-divider />
<gl-dropdown-header>{{ s__('Epic') }}</gl-dropdown-header> <gl-dropdown-header>{{ __('Epic') }}</gl-dropdown-header>
<template v-for="item in $options.epicActionItems"> <gl-dropdown-item
<gl-dropdown-item :key="item.eventName" active-class="is-active" @click="change(item)"> v-for="item in $options.epicActionItems"
{{ item.title }} :key="item.eventName"
</gl-dropdown-item> active-class="is-active"
</template> @click="change(item)"
>
{{ item.title }}
</gl-dropdown-item>
</template> </template>
</gl-dropdown> </gl-dropdown>
</template> </template>
...@@ -95,17 +95,18 @@ export default { ...@@ -95,17 +95,18 @@ export default {
</div> </div>
<epic-health-status v-if="healthStatus" :health-status="healthStatus" /> <epic-health-status v-if="healthStatus" :health-status="healthStatus" />
</div> </div>
<div class="d-inline-flex flex-column flex-sm-row js-button-container"> <div
<template v-if="parentItem.userPermissions.adminEpic"> v-if="parentItem.userPermissions.adminEpic"
<epic-actions-split-button class="d-inline-flex flex-column flex-sm-row js-button-container"
:allow-sub-epics="allowSubEpics" >
class="js-add-epics-issues-button qa-add-epics-button mb-2 mb-sm-0" <epic-actions-split-button
@showAddIssueForm="showAddIssueForm" :allow-sub-epics="allowSubEpics"
@showCreateIssueForm="showCreateIssueForm" class="js-add-epics-issues-button qa-add-epics-button mb-2 mb-sm-0"
@showAddEpicForm="showAddEpicForm" @showAddIssueForm="showAddIssueForm"
@showCreateEpicForm="showCreateEpicForm" @showCreateIssueForm="showCreateIssueForm"
/> @showAddEpicForm="showAddEpicForm"
</template> @showCreateEpicForm="showCreateEpicForm"
/>
</div> </div>
</div> </div>
</template> </template>
...@@ -142,17 +142,20 @@ export default { ...@@ -142,17 +142,20 @@ export default {
state.showAddItemForm = toggleState; state.showAddItemForm = toggleState;
state.showCreateEpicForm = false; state.showCreateEpicForm = false;
state.showCreateIssueForm = false;
}, },
[types.TOGGLE_CREATE_EPIC_FORM](state, { toggleState }) { [types.TOGGLE_CREATE_EPIC_FORM](state, { toggleState }) {
state.showCreateEpicForm = toggleState; state.showCreateEpicForm = toggleState;
state.showAddItemForm = false; state.showAddItemForm = false;
state.showCreateIssueForm = false;
state.issuableType = issuableTypesMap.EPIC; state.issuableType = issuableTypesMap.EPIC;
}, },
[types.TOGGLE_CREATE_ISSUE_FORM](state, { toggleState }) { [types.TOGGLE_CREATE_ISSUE_FORM](state, { toggleState }) {
state.showCreateIssueForm = toggleState; state.showCreateIssueForm = toggleState;
state.showAddItemForm = false; state.showAddItemForm = false;
state.showCreateEpicForm = false;
}, },
[types.SET_PENDING_REFERENCES](state, references) { [types.SET_PENDING_REFERENCES](state, references) {
......
...@@ -71,7 +71,7 @@ describe 'Epic Issues', :js do ...@@ -71,7 +71,7 @@ describe 'Epic Issues', :js do
def add_issues(references) def add_issues(references)
find(".related-items-tree-container .js-add-epics-issues-button").click find(".related-items-tree-container .js-add-epics-issues-button").click
find('.related-items-tree-container .js-add-epics-issues-button .dropdown-item', text: 'Add an issue').click find('.related-items-tree-container .js-add-epics-issues-button .dropdown-item', text: 'Add an existing issue').click
find('.related-items-tree-container .js-add-issuable-form-input').set(references) find('.related-items-tree-container .js-add-issuable-form-input').set(references)
# When adding long references, for some reason the input gets stuck # When adding long references, for some reason the input gets stuck
# waiting for more text. Send a keystroke before clicking the button to # waiting for more text. Send a keystroke before clicking the button to
...@@ -84,7 +84,7 @@ describe 'Epic Issues', :js do ...@@ -84,7 +84,7 @@ describe 'Epic Issues', :js do
def add_epics(references) def add_epics(references)
find('.related-items-tree-container .js-add-epics-issues-button').click find('.related-items-tree-container .js-add-epics-issues-button').click
find('.related-items-tree-container .js-add-epics-issues-button .dropdown-item', text: 'Add an epic').click find('.related-items-tree-container .js-add-epics-issues-button .dropdown-item', text: 'Add an existing epic').click
find('.related-items-tree-container .js-add-issuable-form-input').set(references) find('.related-items-tree-container .js-add-issuable-form-input').set(references)
find('.related-items-tree-container .js-add-issuable-form-input').send_keys(:tab) find('.related-items-tree-container .js-add-issuable-form-input').send_keys(:tab)
...@@ -103,7 +103,7 @@ describe 'Epic Issues', :js do ...@@ -103,7 +103,7 @@ describe 'Epic Issues', :js do
expect(page).not_to have_selector('input[placeholder="New epic title"]') expect(page).not_to have_selector('input[placeholder="New epic title"]')
find('.related-items-tree-container .js-add-epics-issues-button .dropdown-toggle').click find('.related-items-tree-container .js-add-epics-issues-button .dropdown-toggle').click
find('.related-items-tree-container .js-add-epics-issues-button .dropdown-item', text: 'Create new epic').click find('.related-items-tree-container .js-add-epics-issues-button .dropdown-item', text: 'Add a new epic').click
expect(page).to have_selector('input[placeholder="New epic title"]') expect(page).to have_selector('input[placeholder="New epic title"]')
end end
...@@ -226,8 +226,8 @@ describe 'Epic Issues', :js do ...@@ -226,8 +226,8 @@ describe 'Epic Issues', :js do
visit_epic visit_epic
find('.related-items-tree-container .js-add-epics-issues-button').click find('.related-items-tree-container .js-add-epics-issues-button').click
expect(page).not_to have_selector('.related-items-tree-container .js-add-epics-issues-button .dropdown-item', text: 'Add an epic') expect(page).not_to have_selector('.related-items-tree-container .js-add-epics-issues-button .dropdown-item', text: 'Add an existing epic')
expect(page).not_to have_selector('.related-items-tree-container .js-add-epics-issues-button .dropdown-item', text: 'Create new epic') expect(page).not_to have_selector('.related-items-tree-container .js-add-epics-issues-button .dropdown-item', text: 'Add a new epic')
end end
end end
end end
......
...@@ -1191,6 +1191,9 @@ msgstr "" ...@@ -1191,6 +1191,9 @@ msgstr ""
msgid "Add a link" msgid "Add a link"
msgstr "" msgstr ""
msgid "Add a new issue"
msgstr ""
msgid "Add a numbered list" msgid "Add a numbered list"
msgstr "" msgstr ""
...@@ -1206,7 +1209,7 @@ msgstr "" ...@@ -1206,7 +1209,7 @@ msgstr ""
msgid "Add an SSH key" msgid "Add an SSH key"
msgstr "" msgstr ""
msgid "Add an existing issue to the epic." msgid "Add an existing issue"
msgstr "" msgstr ""
msgid "Add an issue" msgid "Add an issue"
...@@ -6153,9 +6156,6 @@ msgstr "" ...@@ -6153,9 +6156,6 @@ msgstr ""
msgid "Create a new issue" msgid "Create a new issue"
msgstr "" msgstr ""
msgid "Create a new issue and add it to the epic."
msgstr ""
msgid "Create a new repository" msgid "Create a new repository"
msgstr "" msgstr ""
...@@ -6165,9 +6165,6 @@ msgstr "" ...@@ -6165,9 +6165,6 @@ msgstr ""
msgid "Create an account using:" msgid "Create an account using:"
msgstr "" msgstr ""
msgid "Create an issue"
msgstr ""
msgid "Create an issue. Issues are created for each alert triggered." msgid "Create an issue. Issues are created for each alert triggered."
msgstr "" msgstr ""
...@@ -8324,10 +8321,10 @@ msgstr "" ...@@ -8324,10 +8321,10 @@ msgstr ""
msgid "Epics, Issues, and Merge Requests" msgid "Epics, Issues, and Merge Requests"
msgstr "" msgstr ""
msgid "Epics|Add an epic" msgid "Epics|Add a new epic"
msgstr "" msgstr ""
msgid "Epics|Add an existing epic as a child epic." msgid "Epics|Add an existing epic"
msgstr "" msgstr ""
msgid "Epics|An error occurred while saving the %{epicDateType} date" msgid "Epics|An error occurred while saving the %{epicDateType} date"
...@@ -8339,12 +8336,6 @@ msgstr "" ...@@ -8339,12 +8336,6 @@ msgstr ""
msgid "Epics|Are you sure you want to remove %{bStart}%{targetIssueTitle}%{bEnd} from %{bStart}%{parentEpicTitle}%{bEnd}?" msgid "Epics|Are you sure you want to remove %{bStart}%{targetIssueTitle}%{bEnd} from %{bStart}%{parentEpicTitle}%{bEnd}?"
msgstr "" msgstr ""
msgid "Epics|Create an epic within this group and add it as a child epic."
msgstr ""
msgid "Epics|Create new epic"
msgstr ""
msgid "Epics|How can I solve this?" msgid "Epics|How can I solve this?"
msgstr "" msgstr ""
......
Markdown is supported
0%
or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment