Merge branch 'kp-fix-roadmap-epics-list' into 'master'

Include Epics in Roadmap whose parents are not part of Roadmap

See merge request gitlab-org/gitlab!34243

ee/app/assets/javascripts/roadmap/components/epics_list_section.vue

@@ -54,7 +54,7 @@ export default {
   computed: {
     ...mapState(['bufferSize', 'epicIid', 'childrenEpics', 'childrenFlags', 'epicIds']),
     emptyRowContainerVisible() {
-      return this.epics.length < this.bufferSize;
+      return this.displayedEpics.length < this.bufferSize;
     },
     sectionContainerStyles() {
       return {
@@ -66,21 +66,10 @@ export default {
         left: `${this.offsetLeft}px`,
       };
     },
-    findEpicsMatchingFilter() {
-      return this.epics.reduce((acc, epic) => {
-        if (!epic.hasParent || (epic.hasParent && this.epicIds.indexOf(epic.parent.id) < 0)) {
-          acc.push(epic);
-        }
-        return acc;
-      }, []);
-    },
-    findParentEpics() {
-      return this.epics.reduce((acc, epic) => {
-        if (!epic.hasParent) {
-          acc.push(epic);
-        }
-        return acc;
-      }, []);
+    epicsWithAssociatedParents() {
+      return this.epics.filter(
+        epic => !epic.hasParent || (epic.hasParent && this.epicIds.indexOf(epic.parent.id) < 0),
+      );
     },
     displayedEpics() {
       // If roadmap is accessed from epic, return all epics
@@ -88,8 +77,8 @@ export default {
         return this.epics;
       }
 
-      // If a search is being performed, add child as parent if parent doesn't match the search
-      return this.hasFiltersApplied ? this.findEpicsMatchingFilter : this.findParentEpics;
+      // Return epics with correct parent associations.
+      return this.epicsWithAssociatedParents;
     },
   },
   mounted() {

ee/app/assets/javascripts/roadmap/store/actions.js

@@ -107,13 +107,13 @@ export const receiveEpicsSuccess = (
   }, []);
 
   commit(types.UPDATE_EPIC_IDS, epicIds);
+  dispatch('initItemChildrenFlags', { epics });
 
   if (timeframeExtended) {
     const updatedEpics = state.epics.concat(epics);
     sortEpics(updatedEpics, state.sortedBy);
     commit(types.RECEIVE_EPICS_FOR_TIMEFRAME_SUCCESS, updatedEpics);
   } else {
-    dispatch('initItemChildrenFlags', { epics });
     commit(types.RECEIVE_EPICS_SUCCESS, epics);
   }
 };

ee/changelogs/unreleased/kp-fix-roadmap-epics-list.yml

+---
+title: Include Epics in Roadmap whose parents are not part of Roadmap
+merge_request: 34243
+author:
+type: fixed

ee/spec/frontend/roadmap/components/epics_list_section_spec.js

@@ -15,6 +15,7 @@ import {
   mockTimeframeInitialDate,
   mockGroupId,
   rawEpics,
+  mockEpicsWithParents,
   mockSortedBy,
   basePath,
   epicsPath,
@@ -119,20 +120,25 @@ describe('EpicsListSectionComponent', () => {
       });
     });
 
+    describe('epicsWithAssociatedParents', () => {
+      it('should return epics which contain parent associations', () => {
+        wrapper.setProps({
+          epics: mockEpicsWithParents,
+        });
+
+        return wrapper.vm.$nextTick(() => {
+          expect(wrapper.vm.epicsWithAssociatedParents).toEqual(mockEpicsWithParents);
+        });
+      });
+    });
+
     describe('displayedEpics', () => {
       beforeAll(() => {
         store.state.epicIds = ['1', '2', '3'];
       });
 
-      it('returns findParentEpics method by default', () => {
-        expect(wrapper.vm.displayedEpics).toEqual(wrapper.vm.findParentEpics);
-      });
-
-      it('returns findEpicsMatchingFilter method if filtered is applied', () => {
-        wrapper.setProps({
-          hasFiltersApplied: true,
-        });
-        expect(wrapper.vm.displayedEpics).toEqual(wrapper.vm.findEpicsMatchingFilter);
+      it('returns epicsWithAssociatedParents computed prop by default', () => {
+        expect(wrapper.vm.displayedEpics).toEqual(wrapper.vm.epicsWithAssociatedParents);
       });
 
       it('returns all epics if epicIid is specified', () => {

ee/spec/frontend/roadmap/mock_data.js

@@ -621,3 +621,34 @@ export const mockGroupMilestonesQueryResponse = {
     },
   },
 };
+
+export const mockEpicsWithParents = [
+  {
+    id: 'gid://gitlab-org/subgroup/Epic/1',
+    hasParent: true,
+    parent: {
+      id: 'gid://gitlab-org/Epic/1',
+    },
+  },
+  {
+    id: 'gid://gitlab-org/subgroup/Epic/2',
+    hasParent: true,
+    parent: {
+      id: 'gid://gitlab-org/subgroup/Epic/1',
+    },
+  },
+  {
+    id: 'gid://gitlab-org/subgroup/Epic/3',
+    hasParent: true,
+    parent: {
+      id: 'gid://gitlab-org/subgroup/Epic/1',
+    },
+  },
+  {
+    id: 'gid://gitlab-org/subgroup/Epic/4',
+    hasParent: true,
+    parent: {
+      id: 'gid://gitlab-org/subgroup/Epic/1',
+    },
+  },
+];

ee/spec/frontend/roadmap/store/actions_spec.js

@@ -155,7 +155,21 @@ describe('Roadmap Vuex Actions', () => {
             payload: [{ ...mockFormattedEpic, newEpic: true }],
           },
         ],
-        [],
+        [
+          {
+            type: 'initItemChildrenFlags',
+            payload: {
+              epics: [
+                {
+                  ...mockFormattedEpic,
+                  startDateOutOfRange: true,
+                  endDateOutOfRange: false,
+                  newEpic: true,
+                },
+              ],
+            },
+          },
+        ],
       );
     });
   });