Add support for Parent Epic in Epic sidebar

Add Parent epic link within Sidebar.

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

 <script>
 import { mapState, mapGetters, mapActions } from 'vuex';
 
+import SidebarParentEpic from 'ee/sidebar/components/sidebar_item_epic.vue';
+
 import epicUtils from '../utils/epic_utils';
 
 import SidebarHeader from './sidebar_items/sidebar_header.vue';
@@ -19,6 +21,7 @@ export default {
     SidebarDatePicker,
     SidebarDatePickerCollapsed,
     SidebarLabels,
+    SidebarParentEpic,
   },
   computed: {
     ...mapState([
@@ -48,6 +51,7 @@ export default {
       'dueDateTimeFromMilestones',
       'dueDateTime',
       'dueDateForCollapsedSidebar',
+      'parentEpic',
     ]),
   },
   mounted() {
@@ -175,6 +179,9 @@ export default {
         @toggleCollapse="toggleSidebar({ sidebarCollapsed })"
       />
       <sidebar-labels :can-update="canUpdate" :sidebar-collapsed="sidebarCollapsed" />
+      <div class="block parent-epic">
+        <sidebar-parent-epic :block-title="__('Parent epic')" :initial-epic="parentEpic" />
+      </div>
     </div>
   </aside>
 </template>

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

@@ -55,5 +55,7 @@ export const isDateInvalid = (state, getters) => {
   );
 };
 
+export const parentEpic = state => (state.parent ? state.parent : {});
+
 // prevent babel-plugin-rewire from generating an invalid default during karma tests
 export default () => {};

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

@@ -54,6 +54,7 @@ export default () => ({
   dueDateFromMilestones: '',
   dueDate: '',
   labels: [],
+  parent: null,
   participants: [],
   subscribed: false,
 

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

@@ -7,7 +7,7 @@ import epicUtils from 'ee/epic/utils/epic_utils';
 import { dateTypes } from 'ee/epic/constants';
 
 import { mountComponentWithStore } from 'spec/helpers/vue_mount_component_helper';
-import { mockEpicMeta, mockEpicData } from '../mock_data';
+import { mockEpicMeta, mockEpicData, mockParentEpic } from '../mock_data';
 
 describe('EpicSidebarComponent', () => {
   const originalUserId = gon.current_user_id;
@@ -19,6 +19,7 @@ describe('EpicSidebarComponent', () => {
     store = createStore();
     store.dispatch('setEpicMeta', mockEpicMeta);
     store.dispatch('setEpicData', mockEpicData);
+    store.state.parent = mockParentEpic;
 
     vm = mountComponentWithStore(Component, {
       store,
@@ -202,5 +203,23 @@ describe('EpicSidebarComponent', () => {
     it('renders labels select element', () => {
       expect(vm.$el.querySelector('.js-labels-block')).not.toBeNull();
     });
+
+    it('renders parent epic link element', done => {
+      store.dispatch('toggleSidebarFlag', false);
+
+      vm.$nextTick()
+        .then(() => {
+          const parentEpicEl = vm.$el.querySelector('.block.parent-epic');
+
+          expect(parentEpicEl).not.toBeNull();
+          expect(parentEpicEl.querySelector('.title').innerText.trim()).toBe('Parent epic');
+          expect(parentEpicEl.querySelector('.value').innerText.trim()).toBe(mockParentEpic.title);
+          expect(parentEpicEl.querySelector('.value a').getAttribute('href')).toBe(
+            mockParentEpic.url,
+          );
+        })
+        .then(done)
+        .catch(done.fail);
+    });
   });
 });

ee/spec/javascripts/epic/mock_data.js

@@ -44,3 +44,9 @@ export const mockLabels = [
     text_color: '#FFFFFF',
   },
 ];
+
+export const mockParentEpic = {
+  id: 1,
+  title: 'Sample Parent Epic',
+  url: '/groups/gitlab-org/-/epics/6',
+};

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

@@ -259,4 +259,24 @@ describe('Epic Store Getters', () => {
       ).toBe(false);
     });
   });
+
+  describe('parentEpic', () => {
+    it('returns `parent` from state when parent is not null', () => {
+      const parent = getters.parentEpic({
+        parent: {
+          id: 1,
+        },
+      });
+
+      expect(parent.id).toBe(1);
+    });
+
+    it('returns empty object when `parent` within state is null', () => {
+      const parent = getters.parentEpic({
+        parent: null,
+      });
+
+      expect(parent).not.toBeNull();
+    });
+  });
 });