Merge branch...

Merge branch '119341-automatically-update-widget-when-creating-a-new-epic-or-issue-from-an-epic' into 'master'

Update widget on click dropdown item when creating epic from epic

See merge request gitlab-org/gitlab!22511

app/assets/javascripts/vue_shared/components/split_button.vue

@@ -49,6 +49,10 @@ export default {
     triggerEvent() {
       this.$emit(this.selectedItem.eventName);
     },
+    changeSelectedItem(item) {
+      this.selectedItem = item;
+      this.$emit('change', item);
+    },
   },
 };
 </script>
@@ -67,7 +71,7 @@ export default {
         :key="item.eventName"
         :active="selectedItem === item"
         active-class="is-active"
-        @click="selectedItem = item"
+        @click="changeSelectedItem(item)"
       >
         <strong>{{ item.title }}</strong>
         <div>{{ item.description }}</div>

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

@@ -22,6 +22,11 @@ export default {
   components: {
     SplitButton,
   },
+  methods: {
+    change(item) {
+      this.$emit(item.eventName);
+    },
+  },
 };
 </script>
 
@@ -33,5 +38,6 @@ export default {
     right
     size="sm"
     v-on="$listeners"
+    @change="change"
   />
 </template>

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

@@ -22,6 +22,11 @@ export default {
   components: {
     SplitButton,
   },
+  methods: {
+    change(item) {
+      this.$emit(item.eventName);
+    },
+  },
 };
 </script>
 
@@ -33,5 +38,6 @@ export default {
     right
     size="sm"
     v-on="$listeners"
+    @change="change"
   />
 </template>

ee/changelogs/unreleased/119341-automatically-update-widget-when-creating-a-new-epic-or-issue-from.yml

+---
+title: Update widget on click dropdown item when creating epic from epic
+merge_request: 22511
+author:
+type: fixed

ee/spec/features/epics/epic_issues_spec.rb

@@ -98,6 +98,15 @@ describe 'Epic Issues', :js do
       visit_epic
     end
 
+    it 'user can display create new epic form by clicking the dropdown item' do
+      expect(page).not_to have_selector('input[placeholder="New epic title"]')
+
+      find('.related-items-tree-container .js-add-epics-button .dropdown-toggle').click
+      find('.related-items-tree-container .js-add-epics-button .dropdown-item', text: 'Create new epic').click
+
+      expect(page).to have_selector('input[placeholder="New epic title"]')
+    end
+
     it 'user can see all issues of the group and delete the associations' do
       within('.related-items-tree-container ul.related-items-list') do
         expect(page).to have_selector('li.js-item-type-issue', count: 2)

spec/frontend/vue_shared/components/split_button_spec.js

@@ -74,6 +74,7 @@ describe('SplitButton', () => {
 
   describe('emitted event', () => {
     let eventHandler;
+    let changeEventHandler;
 
     beforeEach(() => {
       createComponent({ actionItems: mockActionItems });
@@ -84,6 +85,11 @@ describe('SplitButton', () => {
       wrapper.vm.$once(eventName, () => eventHandler());
     };
 
+    const addChangeEventHandler = () => {
+      changeEventHandler = jest.fn();
+      wrapper.vm.$once('change', item => changeEventHandler(item));
+    };
+
     it('defaults to first actionItems event', () => {
       addEventHandler(mockActionItems[0]);
 
@@ -99,5 +105,13 @@ describe('SplitButton', () => {
         .then(() => {
           expect(eventHandler).toHaveBeenCalled();
         }));
+
+    it('change to selected actionItem emits change event', () => {
+      addChangeEventHandler();
+
+      return selectItem(1).then(() => {
+        expect(changeEventHandler).toHaveBeenCalledWith(mockActionItems[1]);
+      });
+    });
   });
 });