Use EpicActionsSplitButton in RelatedItemsTreeHeader

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

+<script>
+import SplitButton from '~/vue_shared/components/split_button.vue';
+
+import { s__ } from '~/locale';
+
+const actionItems = [
+  {
+    title: s__('Epics|Add an epic'),
+    description: s__('Epics|Add an existing epic as a child epic.'),
+    eventName: 'showAddEpicForm',
+  },
+  {
+    title: s__('Epics|Create new epic'),
+    description: s__('Epics|Create an epic within this group and add it as a child epic.'),
+    eventName: 'showCreateEpicForm',
+  },
+];
+
+export default {
+  actionItems,
+
+  components: {
+    SplitButton,
+  },
+};
+</script>
+
+<template>
+  <split-button
+    :action-items="$options.actionItems"
+    class="js-add-epics-button"
+    menu-class="dropdown-menu-large"
+    right
+    size="sm"
+    v-on="$listeners"
+  />
+</template>

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

@@ -6,16 +6,15 @@ import { GlButton, GlTooltipDirective } from '@gitlab/ui';
 import { sprintf, s__ } from '~/locale';
 
 import Icon from '~/vue_shared/components/icon.vue';
-import DroplabDropdownButton from '~/vue_shared/components/droplab_dropdown_button.vue';
+import { issuableTypesMap } from 'ee/related_issues/constants';
 
-import { EpicDropdownActions } from '../constants';
+import EpicActionsSplitButton from './epic_actions_split_button.vue';
 
 export default {
-  EpicDropdownActions,
   components: {
     Icon,
     GlButton,
-    DroplabDropdownButton,
+    EpicActionsSplitButton,
   },
   directives: {
     GlTooltip: GlTooltipDirective,
@@ -32,15 +31,20 @@ export default {
   },
   methods: {
     ...mapActions(['toggleAddItemForm', 'toggleCreateEpicForm']),
-    handleActionClick({ id, issuableType }) {
-      if (id === 0) {
-        this.toggleAddItemForm({
-          issuableType,
-          toggleState: true,
-        });
-      } else {
-        this.toggleCreateEpicForm({ toggleState: true });
-      }
+    showAddEpicForm() {
+      this.toggleAddItemForm({
+        issuableType: issuableTypesMap.EPIC,
+        toggleState: true,
+      });
+    },
+    showAddIssueForm() {
+      this.toggleAddItemForm({
+        issuableType: issuableTypesMap.ISSUE,
+        toggleState: true,
+      });
+    },
+    showCreateEpicForm() {
+      this.toggleCreateEpicForm({ toggleState: true });
     },
   },
 };
@@ -67,13 +71,10 @@ export default {
     </div>
     <div class="d-inline-flex">
       <template v-if="parentItem.userPermissions.adminEpic">
-        <droplab-dropdown-button
-          :actions="$options.EpicDropdownActions"
-          :default-action="0"
-          :primary-button-class="`${headerItems[0].qaClass} js-add-epics-button`"
-          class="btn-create-epic"
-          size="sm"
-          @onActionClick="handleActionClick"
+        <epic-actions-split-button
+          :class="headerItems[0].qaClass"
+          @showAddEpicForm="showAddEpicForm"
+          @showCreateEpicForm="showCreateEpicForm"
         />
 
         <slot name="issueActions">
@@ -81,7 +82,7 @@ export default {
             :class="headerItems[1].qaClass"
             class="ml-1 js-add-issues-button"
             size="sm"
-            @click="handleActionClick({ id: 0, issuableType: 'issue' })"
+            @click="showAddIssueForm"
             >{{ __('Add an issue') }}</gl-button
           >
         </slot>

ee/app/assets/javascripts/related_items_tree/constants.js

 import { s__ } from '~/locale';
-import { issuableTypesMap } from 'ee/related_issues/constants';
 
 export const ChildType = {
   // eslint-disable-next-line @gitlab/i18n/no-non-i18n-strings
@@ -43,21 +42,6 @@ export const RemoveItemModalProps = {
   },
 };
 
-export const EpicDropdownActions = [
-  {
-    id: 0,
-    issuableType: issuableTypesMap.EPIC,
-    title: s__('Epics|Add an epic'),
-    description: s__('Epics|Add an existing epic as a child epic.'),
-  },
-  {
-    id: 1,
-    issuableType: issuableTypesMap.EPIC,
-    title: s__('Epics|Create new epic'),
-    description: s__('Epics|Create an epic within this group and add it as a child epic.'),
-  },
-];
-
 export const OVERFLOW_AFTER = 5;
 
 export const itemRemoveModalId = 'item-remove-confirmation';

ee/app/assets/stylesheets/components/related_items_tree.scss

@@ -2,15 +2,6 @@
   border-top-left-radius: 0;
   border-top-right-radius: 0;
 
-  .btn-create-epic {
-    .dropdown-menu {
-      top: 100%;
-      right: 0;
-      bottom: auto;
-      left: auto;
-    }
-  }
-
   .add-item-form-container {
     border-bottom: 1px solid $border-color;
   }

ee/spec/javascripts/related_items_tree/components/related_items_tree_header_spec.js

@@ -3,10 +3,10 @@ import { GlButton } from '@gitlab/ui';
 
 import RelatedItemsTreeHeader from 'ee/related_items_tree/components/related_items_tree_header.vue';
 import Icon from '~/vue_shared/components/icon.vue';
-import DroplabDropdownButton from '~/vue_shared/components/droplab_dropdown_button.vue';
 import createDefaultStore from 'ee/related_items_tree/store';
 import * as epicUtils from 'ee/related_items_tree/utils/epic_utils';
 import { issuableTypesMap } from 'ee/related_issues/constants';
+import EpicActionsSplitButton from 'ee/related_items_tree/components/epic_actions_split_button.vue';
 
 import { mockParentItem, mockQueryResponse } from '../mock_data';
 
@@ -37,6 +37,9 @@ describe('RelatedItemsTree', () => {
   describe('RelatedItemsTreeHeader', () => {
     let wrapper;
 
+    const findAddIssuesButton = () => wrapper.find(GlButton);
+    const findEpicsSplitButton = () => wrapper.find(EpicActionsSplitButton);
+
     afterEach(() => {
       wrapper.destroy();
     });
@@ -53,34 +56,89 @@ describe('RelatedItemsTree', () => {
       });
     });
 
-    describe('methods', () => {
+    describe('epic actions split button', () => {
       beforeEach(() => {
         wrapper = createComponent();
       });
 
-      describe('handleActionClick', () => {
-        const issuableType = issuableTypesMap.Epic;
-
-        it('calls `toggleAddItemForm` action when provided `id` param as value `0`', () => {
-          spyOn(wrapper.vm, 'toggleAddItemForm');
+      describe('showAddEpicForm event', () => {
+        let toggleAddItemForm;
 
-          wrapper.vm.handleActionClick({
-            id: 0,
-            issuableType,
+        beforeEach(() => {
+          toggleAddItemForm = jasmine.createSpy();
+          wrapper.vm.$store.hotUpdate({
+            actions: {
+              toggleAddItemForm,
+            },
           });
+        });
 
-          expect(wrapper.vm.toggleAddItemForm).toHaveBeenCalledWith({
-            issuableType,
+        it('dispatches toggleAddItemForm action', () => {
+          findEpicsSplitButton().vm.$emit('showAddEpicForm');
+
+          expect(toggleAddItemForm).toHaveBeenCalled();
+
+          const payload = toggleAddItemForm.calls.mostRecent().args[1];
+
+          expect(payload).toEqual({
+            issuableType: issuableTypesMap.EPIC,
             toggleState: true,
           });
         });
+      });
+
+      describe('showCreateEpicForm event', () => {
+        let toggleCreateEpicForm;
+
+        beforeEach(() => {
+          toggleCreateEpicForm = jasmine.createSpy();
+          wrapper.vm.$store.hotUpdate({
+            actions: {
+              toggleCreateEpicForm,
+            },
+          });
+        });
+
+        it('dispatches toggleCreateEpicForm action', () => {
+          findEpicsSplitButton().vm.$emit('showCreateEpicForm');
+
+          expect(toggleCreateEpicForm).toHaveBeenCalled();
+
+          const payload = toggleCreateEpicForm.calls.mostRecent().args[1];
+
+          expect(payload).toEqual({ toggleState: true });
+        });
+      });
+    });
+
+    describe('add issues button', () => {
+      beforeEach(() => {
+        wrapper = createComponent();
+      });
+
+      describe('click event', () => {
+        let toggleAddItemForm;
+
+        beforeEach(() => {
+          toggleAddItemForm = jasmine.createSpy();
+          wrapper.vm.$store.hotUpdate({
+            actions: {
+              toggleAddItemForm,
+            },
+          });
+        });
+
+        it('dispatches toggleAddItemForm action', () => {
+          findAddIssuesButton().vm.$emit('click');
 
-        it('calls `toggleCreateEpicForm` action when provided `id` param value is not `0`', () => {
-          spyOn(wrapper.vm, 'toggleCreateEpicForm');
+          expect(toggleAddItemForm).toHaveBeenCalled();
 
-          wrapper.vm.handleActionClick({ id: 1 });
+          const payload = toggleAddItemForm.calls.mostRecent().args[1];
 
-          expect(wrapper.vm.toggleCreateEpicForm).toHaveBeenCalledWith({ toggleState: true });
+          expect(payload).toEqual({
+            issuableType: issuableTypesMap.ISSUE,
+            toggleState: true,
+          });
         });
       });
     });
@@ -115,11 +173,11 @@ describe('RelatedItemsTree', () => {
       });
 
       it('renders `Add an epic` dropdown button', () => {
-        expect(wrapper.find(DroplabDropdownButton).isVisible()).toBe(true);
+        expect(findEpicsSplitButton().isVisible()).toBe(true);
       });
 
       it('renders `Add an issue` dropdown button', () => {
-        const addIssueBtn = wrapper.find(GlButton);
+        const addIssueBtn = findAddIssuesButton();
 
         expect(addIssueBtn.isVisible()).toBe(true);
         expect(addIssueBtn.text()).toBe('Add an issue');
@@ -131,7 +189,7 @@ describe('RelatedItemsTree', () => {
         it('defaults to button', () => {
           wrapper = createComponent();
 
-          expect(wrapper.find(GlButton).exists()).toBe(true);
+          expect(findAddIssuesButton().exists()).toBe(true);
         });
 
         it('uses provided slot content', () => {
@@ -145,7 +203,7 @@ describe('RelatedItemsTree', () => {
             },
           });
 
-          expect(wrapper.find(GlButton).exists()).toBe(false);
+          expect(findAddIssuesButton().exists()).toBe(false);
           expect(wrapper.find(issueActions).exists()).toBe(true);
         });
       });