Merge branch '332306-reuse-ancestors-widget-in-epic-sidebar' into 'master'

Migrate epic sidebar ancestors to widget

See merge request gitlab-org/gitlab!68428

ee/app/assets/javascripts/epic/components/epic_sidebar.vue

 <script>
 import { mapState, mapGetters, mapActions } from 'vuex';
 
-import AncestorsTree from 'ee/sidebar/components/ancestors_tree/ancestors_tree.vue';
+import SidebarAncestorsWidget from 'ee_component/sidebar/components/ancestors_tree/sidebar_ancestors_widget.vue';
 
 import { TYPE_EPIC } from '~/graphql_shared/constants';
 import { convertToGraphQLId } from '~/graphql_shared/utils';
@@ -28,7 +28,7 @@ export default {
     SidebarDatePicker,
     SidebarDatePickerCollapsed,
     SidebarLabels,
-    AncestorsTree,
+    SidebarAncestorsWidget,
     SidebarParticipants,
     SidebarConfidentialityWidget,
     SidebarSubscriptionsWidget,
@@ -73,7 +73,6 @@ export default {
       'dueDateTimeFromMilestones',
       'dueDateTime',
       'dueDateForCollapsedSidebar',
-      'ancestors',
     ]),
     issuableType() {
       return IssuableType.Epic;
@@ -246,9 +245,12 @@ export default {
         @expandSidebar="handleSidebarToggle"
         @confidentialityUpdated="updateConfidentialityOnIssuable($event)"
       />
-      <div v-if="allowSubEpics" class="block ancestors">
-        <ancestors-tree :ancestors="ancestors" :is-fetching="false" data-testid="ancestors" />
-      </div>
+      <sidebar-ancestors-widget
+        v-if="allowSubEpics"
+        :iid="String(iid)"
+        :full-path="fullPath"
+        :issuable-type="issuableType"
+      />
       <div class="block participants">
         <sidebar-participants
           :participants="participants"

ee/app/assets/javascripts/epic/store/getters.js

@@ -54,5 +54,3 @@ export const isDateInvalid = (state, getters) => {
     getters.dueDateTimeFromMilestones,
   );
 };
-
-export const ancestors = (state) => (state.ancestors ? [...state.ancestors].reverse() : []);

ee/app/assets/javascripts/epic/store/state.js

@@ -55,7 +55,6 @@ export default () => ({
   dueDateFromMilestones: '',
   dueDate: '',
   labels: [],
-  ancestors: [],
   participants: [],
   subscribed: false,
   confidential: false,

ee/spec/frontend/epic/components/epic_sidebar_spec.js

@@ -8,13 +8,15 @@ import { getStoreConfig } from 'ee/epic/store';
 
 import epicUtils from 'ee/epic/utils/epic_utils';
 
+import SidebarAncestorsWidget from 'ee_component/sidebar/components/ancestors_tree/sidebar_ancestors_widget.vue';
+
 import { parsePikadayDate } from '~/lib/utils/datetime_utility';
 
 import SidebarReferenceWidget from '~/sidebar/components/reference/sidebar_reference_widget.vue';
 import SidebarSubscriptionsWidget from '~/sidebar/components/subscriptions/sidebar_subscriptions_widget.vue';
 import SidebarTodoWidget from '~/sidebar/components/todo_toggle/sidebar_todo_widget.vue';
 
-import { mockEpicMeta, mockEpicData, mockAncestors } from '../mock_data';
+import { mockEpicMeta, mockEpicData } from '../mock_data';
 
 describe('EpicSidebarComponent', () => {
   const originalUserId = gon.current_user_id;
@@ -29,7 +31,6 @@ describe('EpicSidebarComponent', () => {
         ...state,
         ...mockEpicMeta,
         ...mockEpicData,
-        ancestors: mockAncestors,
       },
 
       actions: { ...actions, ...actionMocks },
@@ -222,9 +223,8 @@ describe('EpicSidebarComponent', () => {
       expect(wrapper.find(SidebarReferenceWidget).exists()).toBe(true);
     });
 
-    describe('when sub-epics feature is available', () => {
-      it('renders ancestors list', async () => {
-        store.dispatch('toggleSidebarFlag', false);
+    describe('when sub-epics feature is not available', () => {
+      it('does not renders ancestors list', async () => {
         store.dispatch('setEpicMeta', {
           ...mockEpicMeta,
           allowSubEpics: false,
@@ -232,20 +232,13 @@ describe('EpicSidebarComponent', () => {
 
         await nextTick();
 
-        expect(wrapper.find('.block.ancestors').exists()).toBe(false);
+        expect(wrapper.find(SidebarAncestorsWidget).exists()).toBe(false);
       });
     });
 
-    describe('when sub-epics feature is not available', () => {
-      it('does not render ancestors list', async () => {
-        wrapper.vm.$store.dispatch('toggleSidebarFlag', false);
-
-        await nextTick();
-
-        const ancestorsEl = wrapper.find('[data-testid="ancestors"]');
-
-        expect(ancestorsEl.exists()).toBe(true);
-        expect(ancestorsEl.props('ancestors')).toEqual([...mockAncestors].reverse());
+    describe('when sub-epics feature is available', () => {
+      it('renders ancestors list', () => {
+        expect(wrapper.find(SidebarAncestorsWidget).exists()).toBe(true);
       });
     });
 

ee/spec/frontend/epic/store/getters_spec.js

@@ -259,21 +259,4 @@ describe('Epic Store Getters', () => {
       ).toBe(false);
     });
   });
-
-  describe('ancestors', () => {
-    it('returns `ancestors` from state when ancestors is not null', () => {
-      const ancestors = getters.ancestors({
-        ancestors: [{ id: 1, title: 'Parent' }],
-      });
-
-      expect(ancestors).toHaveLength(1);
-    });
-
-    it('returns empty array when `ancestors` within state is null', () => {
-      const ancestors = getters.ancestors({});
-
-      expect(ancestors).not.toBeNull();
-      expect(ancestors).toHaveLength(0);
-    });
-  });
 });