Consolidate epic tree buttons

- Feedback

ee/app/assets/javascripts/related_issues/components/related_issuable_input.vue

@@ -72,7 +72,11 @@ export default {
   mounted() {
     this.setupAutoComplete();
     if (this.focusOnMount) {
-      this.$refs.input.focus();
+      this.$nextTick()
+        .then(() => {
+          this.$refs.input.focus();
+        })
+        .catch(() => {});
     }
   },
   beforeUpdate() {

ee/app/assets/javascripts/related_items_tree/components/create_epic_form.vue

@@ -29,7 +29,11 @@ export default {
     },
   },
   mounted() {
-    this.$refs.input.focus();
+    this.$nextTick()
+      .then(() => {
+        this.$refs.input.focus();
+      })
+      .catch(() => {});
   },
   methods: {
     onFormSubmit() {

ee/app/assets/javascripts/related_items_tree/components/epic_issue_actions_split_button.vue

 <script>
 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'),
-    description: s__('Epics|Add an existing epic as a child epic.'),
-    eventName: 'showAddEpicForm',
+    title: __('Add a new issue'),
+    eventName: 'showCreateIssueForm',
   },
   {
-    title: s__('Epics|Create new epic'),
-    description: s__('Epics|Create an epic within this group and add it as a child epic.'),
-    eventName: 'showCreateEpicForm',
+    title: __('Add an existing issue'),
+    eventName: 'showAddIssueForm',
   },
 ];
 
-const issueActionItems = [
+const epicActionItems = [
   {
-    title: s__('Add an issue'),
-    description: s__('Add an existing issue to the epic.'),
-    eventName: 'showAddIssueForm',
+    title: s__('Epics|Add a new epic'),
+    eventName: 'showCreateEpicForm',
   },
   {
-    title: s__('Create an issue'),
-    description: s__('Create a new issue and add it to the epic.'),
-    eventName: 'showCreateIssueForm',
+    title: s__('Epics|Add an existing epic'),
+    eventName: 'showAddEpicForm',
   },
 ];
 
@@ -45,14 +41,9 @@ export default {
       default: false,
     },
   },
-  computed: {
-    actionItems() {
-      return this.allowSubEpics ? [...epicActionItems, ...issueActionItems] : issueActionItems;
-    },
-  },
   methods: {
-    change(item) {
-      this.$emit(item.eventName);
+    change({ eventName }) {
+      this.$emit(eventName);
     },
   },
 };
@@ -60,26 +51,31 @@ export default {
 
 <template>
   <gl-dropdown
-    :menu-class="`dropdown-menu-selectable`"
-    :text="s__('Add')"
+    :text="__('Add')"
     variant="secondary"
     data-qa-selector="epic_issue_actions_split_button"
-    v-on="$listeners"
+    right
   >
-    <gl-dropdown-header>{{ s__('Issue') }}</gl-dropdown-header>
-    <template v-for="item in $options.issueActionItems">
-      <gl-dropdown-item :key="item.eventName" active-class="is-active" @click="change(item)">
-        {{ item.title }}
-      </gl-dropdown-item>
-    </template>
+    <gl-dropdown-header>{{ __('Issue') }}</gl-dropdown-header>
+    <gl-dropdown-item
+      v-for="item in $options.issueActionItems"
+      :key="item.eventName"
+      active-class="is-active"
+      @click="change(item)"
+    >
+      {{ item.title }}
+    </gl-dropdown-item>
     <template v-if="allowSubEpics">
       <gl-dropdown-divider />
-      <gl-dropdown-header>{{ s__('Epic') }}</gl-dropdown-header>
-      <template v-for="item in $options.epicActionItems">
-        <gl-dropdown-item :key="item.eventName" active-class="is-active" @click="change(item)">
-          {{ item.title }}
-        </gl-dropdown-item>
-      </template>
+      <gl-dropdown-header>{{ __('Epic') }}</gl-dropdown-header>
+      <gl-dropdown-item
+        v-for="item in $options.epicActionItems"
+        :key="item.eventName"
+        active-class="is-active"
+        @click="change(item)"
+      >
+        {{ item.title }}
+      </gl-dropdown-item>
     </template>
   </gl-dropdown>
 </template>

ee/app/assets/javascripts/related_items_tree/components/related_items_tree_header.vue

@@ -95,17 +95,18 @@ export default {
       </div>
       <epic-health-status v-if="healthStatus" :health-status="healthStatus" />
     </div>
-    <div class="d-inline-flex flex-column flex-sm-row js-button-container">
-      <template v-if="parentItem.userPermissions.adminEpic">
-        <epic-actions-split-button
-          :allow-sub-epics="allowSubEpics"
-          class="js-add-epics-issues-button qa-add-epics-button mb-2 mb-sm-0"
-          @showAddIssueForm="showAddIssueForm"
-          @showCreateIssueForm="showCreateIssueForm"
-          @showAddEpicForm="showAddEpicForm"
-          @showCreateEpicForm="showCreateEpicForm"
-        />
-      </template>
+    <div
+      v-if="parentItem.userPermissions.adminEpic"
+      class="d-inline-flex flex-column flex-sm-row js-button-container"
+    >
+      <epic-actions-split-button
+        :allow-sub-epics="allowSubEpics"
+        class="js-add-epics-issues-button qa-add-epics-button mb-2 mb-sm-0"
+        @showAddIssueForm="showAddIssueForm"
+        @showCreateIssueForm="showCreateIssueForm"
+        @showAddEpicForm="showAddEpicForm"
+        @showCreateEpicForm="showCreateEpicForm"
+      />
     </div>
   </div>
 </template>

ee/app/assets/javascripts/related_items_tree/store/mutations.js

@@ -142,17 +142,20 @@ export default {
 
     state.showAddItemForm = toggleState;
     state.showCreateEpicForm = false;
+    state.showCreateIssueForm = false;
   },
 
   [types.TOGGLE_CREATE_EPIC_FORM](state, { toggleState }) {
     state.showCreateEpicForm = toggleState;
     state.showAddItemForm = false;
+    state.showCreateIssueForm = false;
     state.issuableType = issuableTypesMap.EPIC;
   },
 
   [types.TOGGLE_CREATE_ISSUE_FORM](state, { toggleState }) {
     state.showCreateIssueForm = toggleState;
     state.showAddItemForm = false;
+    state.showCreateEpicForm = false;
   },
 
   [types.SET_PENDING_REFERENCES](state, references) {

ee/spec/features/epics/epic_issues_spec.rb

@@ -71,7 +71,7 @@ describe 'Epic Issues', :js do
 
     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 .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)
       # When adding long references, for some reason the input gets stuck
       # waiting for more text. Send a keystroke before clicking the button to
@@ -84,7 +84,7 @@ describe 'Epic Issues', :js do
 
     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 .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').send_keys(:tab)
@@ -103,7 +103,7 @@ describe 'Epic Issues', :js do
         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-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"]')
       end
@@ -226,8 +226,8 @@ describe 'Epic Issues', :js do
           visit_epic
           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: 'Create new 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: 'Add a new epic')
         end
       end
     end

locale/gitlab.pot

@@ -1191,6 +1191,9 @@ msgstr ""
 msgid "Add a link"
 msgstr ""
 
+msgid "Add a new issue"
+msgstr ""
+
 msgid "Add a numbered list"
 msgstr ""
 
@@ -1206,7 +1209,7 @@ msgstr ""
 msgid "Add an SSH key"
 msgstr ""
 
-msgid "Add an existing issue to the epic."
+msgid "Add an existing issue"
 msgstr ""
 
 msgid "Add an issue"
@@ -6153,9 +6156,6 @@ msgstr ""
 msgid "Create a new issue"
 msgstr ""
 
-msgid "Create a new issue and add it to the epic."
-msgstr ""
-
 msgid "Create a new repository"
 msgstr ""
 
@@ -6165,9 +6165,6 @@ msgstr ""
 msgid "Create an account using:"
 msgstr ""
 
-msgid "Create an issue"
-msgstr ""
-
 msgid "Create an issue. Issues are created for each alert triggered."
 msgstr ""
 
@@ -8324,10 +8321,10 @@ msgstr ""
 msgid "Epics, Issues, and Merge Requests"
 msgstr ""
 
-msgid "Epics|Add an epic"
+msgid "Epics|Add a new epic"
 msgstr ""
 
-msgid "Epics|Add an existing epic as a child epic."
+msgid "Epics|Add an existing epic"
 msgstr ""
 
 msgid "Epics|An error occurred while saving the %{epicDateType} date"
@@ -8339,12 +8336,6 @@ msgstr ""
 msgid "Epics|Are you sure you want to remove %{bStart}%{targetIssueTitle}%{bEnd} from %{bStart}%{parentEpicTitle}%{bEnd}?"
 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?"
 msgstr ""