Merge branch '340571-hide-roadmap-view-on-tree-tab' into 'master'

Fix tabs switching between tree and roadmap in Epic show page

See merge request gitlab-org/gitlab!71398

ee/app/assets/javascripts/epic/epic_tabs.js

@@ -4,9 +4,10 @@ import { parseBoolean } from '~/lib/utils/common_utils';
 
 export default class EpicTabs {
   constructor() {
-    this.epicTreesEnabled = gon.features && gon.features.epicTrees;
     this.wrapper = document.querySelector('.js-epic-container');
     this.epicTabs = this.wrapper.querySelector('.js-epic-tabs-container');
+    this.treeTabPane = document.querySelector('#tree.tab-pane');
+    this.roadmapTabPane = document.querySelector('#roadmap.tab-pane');
     this.discussionFilterContainer = this.epicTabs.querySelector('.js-discussion-filter-container');
     const allowSubEpics = parseBoolean(this.epicTabs.dataset.allowSubEpics);
 
@@ -48,9 +49,13 @@ export default class EpicTabs {
       this.initRoadmap();
       this.roadmapTabLoaded = true;
     }
+    this.roadmapTabPane.classList.remove('gl-display-none', 'show');
+    this.treeTabPane.classList.add('gl-display-none', 'show');
   }
 
   onRoadmapHide() {
     this.wrapper.classList.add('container-limited');
+    this.roadmapTabPane.classList.add('gl-display-none', 'show');
+    this.treeTabPane.classList.remove('gl-display-none', 'show');
   }
 }

ee/app/views/groups/epics/show.html.haml

@@ -58,7 +58,7 @@
             allow_issuable_health_status: allow_issuable_health_status,
             initial: issuable_initial_data(@epic).to_json } }
     - if sub_epics_feature_available
-      #roadmap.tab-pane
+      #roadmap.tab-pane.gl-display-none
         .row
           %section.col-md-12
             #js-roadmap{ data: { epics_path: group_epics_path(@group, parent_id: @epic.id, format: :json),

ee/spec/features/epics/epic_show_spec.rb

@@ -117,9 +117,26 @@ RSpec.describe 'Epic show', :js do
         expect(find('.content-wrapper .container-fluid:not(.breadcrumbs)')[:class]).not_to include('container-limited')
       end
     end
+
+    it 'switches between Epics and Issues tab and Roadmap tab when clicking on tab links', :aggregate_failures do
+      find('.js-epic-tabs-container #roadmap-tab').click
+      wait_for_all_requests # Wait for Roadmap bundle load and then Epics fetch load
+
+      page.within('.js-epic-tabs-content') do
+        expect(page).to have_selector('#roadmap.tab-pane', visible: true)
+        expect(page).to have_selector('#tree.tab-pane', visible: false)
+      end
+
+      find('.js-epic-tabs-container #tree-tab').click
+
+      page.within('.js-epic-tabs-content') do
+        expect(page).to have_selector('#tree.tab-pane', visible: true)
+        expect(page).to have_selector('#roadmap.tab-pane', visible: false)
+      end
+    end
   end
 
-  describe 'when sub-epics feature not is available' do
+  describe 'when the sub-epics feature is not available' do
     before do
       visit group_epic_path(group, epic)
     end