Fix remove epic modal to include children info

Updates remove epic modal message to reflect
info that epic has children.

Changelog: fixed
EE: true

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

@@ -16,9 +16,16 @@ export default {
     SafeHtml: GlSafeHtmlDirective,
   },
   computed: {
-    ...mapState(['parentItem', 'removeItemModalProps']),
+    ...mapState(['childrenFlags', 'parentItem', 'removeItemModalProps']),
     removeItemType() {
-      return this.removeItemModalProps.item.type;
+      const removeItem = this.removeItemModalProps.item;
+      if (
+        removeItem.type === ChildType.Epic &&
+        this.childrenFlags[removeItem.reference].itemHasChildren
+      ) {
+        return ChildType.EpicWithChildren;
+      }
+      return removeItem.type;
     },
     modalTitle() {
       return this.removeItemType ? RemoveItemModalProps[this.removeItemType].title : '';
@@ -30,7 +37,10 @@ export default {
           bEnd: '</b>',
         };
 
-        if (this.removeItemType === ChildType.Epic) {
+        if (
+          this.removeItemType === ChildType.Epic ||
+          this.removeItemType === ChildType.EpicWithChildren
+        ) {
           Object.assign(sprintfParams, {
             targetEpicTitle: escape(this.removeItemModalProps.item.title),
             parentEpicTitle: escape(this.parentItem.title),

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

@@ -3,6 +3,7 @@ import { s__, __ } from '~/locale';
 export const ChildType = {
   // eslint-disable-next-line @gitlab/require-i18n-strings
   Epic: 'Epic',
+  EpicWithChildren: 'EpicWithChildren',
   // eslint-disable-next-line @gitlab/require-i18n-strings
   Issue: 'Issue',
 };
@@ -24,6 +25,12 @@ export const relativePositions = {
 
 export const RemoveItemModalProps = {
   Epic: {
+    title: s__('Epics|Remove epic'),
+    body: s__(
+      'Epics|Are you sure you want to remove %{bStart}%{targetEpicTitle}%{bEnd} from %{bStart}%{parentEpicTitle}%{bEnd}?',
+    ),
+  },
+  EpicWithChildren: {
     title: s__('Epics|Remove epic'),
     body: s__(
       'Epics|This will also remove any descendents of %{bStart}%{targetEpicTitle}%{bEnd} from %{bStart}%{parentEpicTitle}%{bEnd}. Are you sure?',

ee/spec/frontend/related_items_tree/components/tree_item_remove_modal_spec.js

 import { GlModal } from '@gitlab/ui';
 import { shallowMount } from '@vue/test-utils';
-import Vue, { nextTick } from 'vue';
+import Vue from 'vue';
 import Vuex from 'vuex';
 
 import TreeItemRemoveModal from 'ee/related_items_tree/components/tree_item_remove_modal.vue';
@@ -10,7 +10,7 @@ import createDefaultStore from 'ee/related_items_tree/store';
 import * as epicUtils from 'ee/related_items_tree/utils/epic_utils';
 import { PathIdSeparator } from '~/related_issues/constants';
 
-import { mockParentItem, mockQueryResponse, mockIssue1 } from '../mock_data';
+import { mockParentItem, mockQueryResponse, mockIssue1, mockEpic1 } from '../mock_data';
 
 Vue.use(Vuex);
 
@@ -21,6 +21,12 @@ const mockItem = {
   assignees: epicUtils.extractIssueAssignees(mockIssue1.assignees),
 };
 
+const mockItemWithChildren = {
+  ...mockEpic1,
+  type: ChildType.Epic,
+  pathIdSeparator: PathIdSeparator.Epic,
+};
+
 const createComponent = (parentItem = mockParentItem, item = mockItem) => {
   const store = createDefaultStore();
   const children = epicUtils.processQueryResponse(mockQueryResponse.data.group);
@@ -57,62 +63,6 @@ describe('RelatedItemsTree', () => {
       wrapper.destroy();
     });
 
-    describe('computed', () => {
-      describe('removeItemType', () => {
-        it('returns value of `state.removeItemModalProps.item.type', () => {
-          expect(wrapper.vm.removeItemType).toBe(mockItem.type);
-        });
-      });
-
-      describe('modalTitle', () => {
-        it('returns title for modal when item.type is `Epic`', async () => {
-          wrapper.vm.$store.dispatch('setRemoveItemModalProps', {
-            parentItem: mockParentItem,
-            item: { ...mockItem, type: ChildType.Epic },
-          });
-
-          await nextTick();
-          expect(wrapper.vm.modalTitle).toBe('Remove epic');
-        });
-
-        it('returns title for modal when item.type is `Issue`', async () => {
-          wrapper.vm.$store.dispatch('setRemoveItemModalProps', {
-            parentItem: mockParentItem,
-            item: mockItem,
-          });
-
-          await nextTick();
-          expect(wrapper.vm.modalTitle).toBe('Remove issue');
-        });
-      });
-
-      describe('modalBody', () => {
-        it('returns body text for modal when item.type is `Epic`', async () => {
-          wrapper.vm.$store.dispatch('setRemoveItemModalProps', {
-            parentItem: mockParentItem,
-            item: { ...mockItem, type: ChildType.Epic },
-          });
-
-          await nextTick();
-          expect(wrapper.vm.modalBody).toBe(
-            'This will also remove any descendents of <b>Nostrum cum mollitia quia recusandae fugit deleniti voluptatem delectus.</b> from <b>Some sample epic</b>. Are you sure?',
-          );
-        });
-
-        it('returns body text for modal when item.type is `Issue`', async () => {
-          wrapper.vm.$store.dispatch('setRemoveItemModalProps', {
-            parentItem: mockParentItem,
-            item: mockItem,
-          });
-
-          await nextTick();
-          expect(wrapper.vm.modalBody).toBe(
-            'Are you sure you want to remove <b>Nostrum cum mollitia quia recusandae fugit deleniti voluptatem delectus.</b> from <b>Some sample epic</b>?',
-          );
-        });
-      });
-    });
-
     describe('template', () => {
       it('renders modal component', () => {
         const modal = wrapper.findComponent(GlModal);
@@ -128,6 +78,35 @@ describe('RelatedItemsTree', () => {
           attributes: { variant: 'default' },
         });
       });
+
+      it.each`
+        type               | modalTitle
+        ${ChildType.Epic}  | ${'Remove epic'}
+        ${ChildType.Issue} | ${'Remove issue'}
+      `('renders modal title when item type is $itemType', ({ type, modalTitle }) => {
+        wrapper = createComponent(mockParentItem, { ...mockItem, type });
+        const modal = wrapper.findComponent(GlModal);
+
+        expect(modal.props('title')).toBe(modalTitle);
+      });
+
+      it('renders modal body message when item has no children present', () => {
+        wrapper = createComponent(mockParentItem, { ...mockItem, type: ChildType.Epic });
+        const modal = wrapper.findComponent(GlModal);
+
+        expect(modal.text()).toBe(
+          `Are you sure you want to remove ${mockItem.title} from ${mockParentItem.title}?`,
+        );
+      });
+
+      it('renders modal body message when item has children present', () => {
+        wrapper = createComponent(mockParentItem, mockItemWithChildren);
+        const modal = wrapper.findComponent(GlModal);
+
+        expect(modal.text()).toBe(
+          `This will also remove any descendents of ${mockItemWithChildren.title} from ${mockParentItem.title}. Are you sure?`,
+        );
+      });
     });
   });
 });

locale/gitlab.pot

@@ -15299,6 +15299,9 @@ msgstr ""
 msgid "Epics|Add an existing epic"
 msgstr ""
+msgid "Epics|Are you sure you want to remove %{bStart}%{targetEpicTitle}%{bEnd} from %{bStart}%{parentEpicTitle}%{bEnd}?"
+msgstr ""
+
 msgid "Epics|Are you sure you want to remove %{bStart}%{targetIssueTitle}%{bEnd} from %{bStart}%{parentEpicTitle}%{bEnd}?"
 msgstr ""