Give issuableType an ordering id for reorders

This change introduces drag and drop for epics nested inside epics.
Previously it was available only for issues under epics. This commit
adds the same functionality to epics.

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

@@ -124,8 +124,8 @@ export default {
       const nextItemEl = itemEl.nextElementSibling;
 
       return {
-        beforeId: prevItemEl && parseInt(prevItemEl.dataset.epicIssueId, 0),
-        afterId: nextItemEl && parseInt(nextItemEl.dataset.epicIssueId, 0),
+        beforeId: prevItemEl && parseInt(prevItemEl.dataset.orderingId, 0),
+        afterId: nextItemEl && parseInt(nextItemEl.dataset.orderingId, 0),
       };
     },
     reordered(event) {
@@ -147,6 +147,9 @@ export default {
     removeDraggingCursor() {
       document.body.classList.remove('is-dragging');
     },
+    issuableOrderingId({ epic_issue_id: epicIssueId, id }) {
+      return this.issuableType === 'issue' ? epicIssueId : id;
+    },
   },
 };
 </script>
@@ -231,7 +234,7 @@ export default {
               'card-slim': canReorder,
             }"
             :data-key="issue.id"
-            :data-epic-issue-id="issue.epic_issue_id"
+            :data-ordering-id="issuableOrderingId(issue)"
             class="js-related-issues-token-list-item list-item pt-0 pb-0"
           >
             <issue-item

ee/changelogs/unreleased/7328-epic-in-epic-fe.yml

+---
+title: Give issuableType an ordering id for reorders
+merge_request: 9355
+author:
+type: added

ee/spec/features/epics/epic_issues_spec.rb

@@ -18,6 +18,13 @@ describe 'Epic Issues', :js do
     ]
   end
 
+  let!(:nested_epics) do
+    [
+      create(:epic, group: group, parent_id: epic.id, relative_position: 1),
+      create(:epic, group: group, parent_id: epic.id, relative_position: 2)
+    ]
+  end
+
   def visit_epic
     stub_licensed_features(epics: true)
 
@@ -43,14 +50,23 @@ describe 'Epic Issues', :js do
       expect(page).not_to have_selector('.js-related-issues-block h3.card-title button')
     end
 
+    it 'user cannot add new epics to the epic', :postgresql do
+      expect(page).not_to have_selector('.js-related-epics-block h3.card-title button')
+    end
+
     it 'user cannot reorder issues in epic' do
       expect(page).not_to have_selector('.js-related-issues-block .js-related-issues-token-list-item.user-can-drag')
     end
+
+    it 'user cannot reorder epics in epic', :postgresql do
+      expect(page).not_to have_selector('.js-related-epics-block .js-related-epics-token-list-item.user-can-drag')
+    end
   end
 
   context 'when user is a group member' do
     let(:issue_to_add) { create(:issue, project: private_project) }
     let(:issue_invalid) { create(:issue) }
+    let(:epic_to_add) { create(:epic, group: group) }
 
     def add_issues(references)
       find('.js-related-issues-block h3.card-title button').click
@@ -64,6 +80,16 @@ describe 'Epic Issues', :js do
       wait_for_requests
     end
 
+    def add_epics(references)
+      find('.js-related-epics-block h3.card-title button').click
+      find('.js-related-epics-block .js-add-issuable-form-input').set(references)
+
+      find('.js-related-epics-block .js-add-issuable-form-input').send_keys(:tab)
+      find('.js-related-epics-block .js-add-issuable-form-add-button').click
+
+      wait_for_requests
+    end
+
     before do
       group.add_developer(user)
       visit_epic
@@ -85,6 +111,22 @@ describe 'Epic Issues', :js do
       end
     end
 
+    it 'user can see all epics of the group and delete the associations', :postgresql do
+      within('.js-related-epics-block ul.related-items-list') do
+        expect(page).to have_selector('li', count: 2)
+        expect(page).to have_content(nested_epics[0].title)
+        expect(page).to have_content(nested_epics[1].title)
+
+        first('li button.js-issue-item-remove-button').click
+      end
+
+      wait_for_requests
+
+      within('.js-related-epics-block ul.related-items-list') do
+        expect(page).to have_selector('li', count: 1)
+      end
+    end
+
     it 'user cannot add new issues to the epic from another group' do
       add_issues("#{issue_invalid.to_reference(full: true)}")
 
@@ -106,6 +148,19 @@ describe 'Epic Issues', :js do
       end
     end
 
+    it 'user can add new epics to the epic', :postgresql do
+      references = "#{epic_to_add.to_reference(full: true)}"
+      add_epics(references)
+
+      expect(page).not_to have_selector('.content-wrapper .alert-wrapper .flash-text')
+      expect(page).not_to have_content('No Epic found for given params')
+
+      within('.js-related-epics-block ul.related-items-list') do
+        expect(page).to have_selector('li', count: 3)
+        expect(page).to have_content(epic_to_add.title)
+      end
+    end
+
     it 'user can reorder issues in epic' do
       expect(first('.js-related-issues-block .js-related-issues-token-list-item')).to have_content(public_issue.title)
       expect(page.all('.js-related-issues-block .js-related-issues-token-list-item').last).to have_content(private_issue.title)
@@ -115,5 +170,15 @@ describe 'Epic Issues', :js do
       expect(first('.js-related-issues-block .js-related-issues-token-list-item')).to have_content(private_issue.title)
       expect(page.all('.js-related-issues-block .js-related-issues-token-list-item').last).to have_content(public_issue.title)
     end
+
+    it 'user can reorder epics in epic', :postgresql do
+      expect(first('.js-related-epics-block .js-related-issues-token-list-item')).to have_content(nested_epics[0].title)
+      expect(page.all('.js-related-epics-block .js-related-issues-token-list-item').last).to have_content(nested_epics[1].title)
+
+      drag_to(selector: '.js-related-epics-block .related-items-list', to_index: 1)
+
+      expect(first('.js-related-epics-block .js-related-issues-token-list-item')).to have_content(nested_epics[1].title)
+      expect(page.all('.js-related-epics-block .js-related-issues-token-list-item').last).to have_content(nested_epics[0].title)
+    end
   end
 end

ee/spec/javascripts/issuable/related_issues/components/related_issues_block_spec.js

@@ -173,4 +173,72 @@ describe('RelatedIssuesBlock', () => {
       });
     });
   });
+
+  describe('issuableOrderingId returns correct issuable order id when', () => {
+    it('issuableType is epic', () => {
+      vm = new RelatedIssuesBlock({
+        propsData: {
+          pathIdSeparator: '#',
+          issuableType: 'issue',
+        },
+      }).$mount();
+
+      const orderId = vm.issuableOrderingId(issuable1);
+
+      expect(orderId).toBe(issuable1.epic_issue_id);
+    });
+
+    it('issuableType is issue', () => {
+      vm = new RelatedIssuesBlock({
+        propsData: {
+          pathIdSeparator: '#',
+          issuableType: 'epic',
+        },
+      }).$mount();
+
+      const orderId = vm.issuableOrderingId(issuable1);
+
+      expect(orderId).toBe(issuable1.id);
+    });
+  });
+
+  describe('renders correct ordering id when', () => {
+    let relatedIssues;
+
+    beforeAll(() => {
+      relatedIssues = [issuable1, issuable2, issuable3, issuable4, issuable5];
+    });
+
+    it('issuableType is epic', () => {
+      vm = new RelatedIssuesBlock({
+        propsData: {
+          pathIdSeparator: '#',
+          issuableType: 'epic',
+          relatedIssues,
+        },
+      }).$mount();
+
+      const listItems = vm.$el.querySelectorAll('.list-item');
+
+      Array.from(listItems).forEach((item, index) => {
+        expect(Number(item.dataset.orderingId)).toBe(relatedIssues[index].id);
+      });
+    });
+
+    it('issuableType is issue', () => {
+      vm = new RelatedIssuesBlock({
+        propsData: {
+          pathIdSeparator: '#',
+          issuableType: 'issue',
+          relatedIssues,
+        },
+      }).$mount();
+
+      const listItems = vm.$el.querySelectorAll('.list-item');
+
+      Array.from(listItems).forEach((item, index) => {
+        expect(Number(item.dataset.orderingId)).toBe(relatedIssues[index].epic_issue_id);
+      });
+    });
+  });
 });