Merge branch...

Merge branch '282421-devops-adoption-deeplink-to-adoption-tab-on-the-devops-report-page' into 'master'

Deeplink to Adoption tab on the DevOps Report page

See merge request gitlab-org/gitlab!50169

ee/app/assets/javascripts/admin/dev_ops_report/tabs.js

+import { historyPushState } from '~/lib/utils/common_utils';
+import { mergeUrlParams } from '~/lib/utils/url_utility';
+
+const DEVOPS_ADOPTION_PANE = 'devops-adoption';
+
+const tabClickHandler = (e) => {
+  const { hash } = e.currentTarget;
+  const tab = hash === `#${DEVOPS_ADOPTION_PANE}` ? DEVOPS_ADOPTION_PANE : null;
+  const newUrl = mergeUrlParams({ tab }, window.location.href);
+  historyPushState(newUrl);
+};
+
+const initTabs = () => {
+  const tabLinks = document.querySelectorAll('.js-devops-tab-item a');
+
+  if (tabLinks.length) {
+    tabLinks.forEach((tabLink) => {
+      tabLink.addEventListener('click', (e) => tabClickHandler(e));
+    });
+  }
+};
+
+export default initTabs;

ee/app/assets/javascripts/pages/admin/dev_ops_report/show/index.js

+import initTabs from 'ee/admin/dev_ops_report/tabs';
+
+document.addEventListener('DOMContentLoaded', () => initTabs());

ee/app/views/admin/dev_ops_report/_devops_tabs.html.haml

 %h2
   = _('DevOps Report')
 %ul.nav-links.nav-tabs.nav.js-devops-tabs{ role: 'tablist' }
-  = render 'tab', active: true, title: s_('DevopsReport|DevOps Score'), target: '#devops_score_pane'
-  = render 'tab', active: false, title: s_('DevopsReport|Adoption'), target: '#devops_adoption_pane'
+  = render 'tab', active: params[:tab] != 'devops-adoption', title: s_('DevopsReport|DevOps Score'), target: '#devops-score'
+  = render 'tab', active: params[:tab] == 'devops-adoption', title: s_('DevopsReport|Adoption'), target: '#devops-adoption'
 
 .tab-content
-  .tab-pane.active#devops_score_pane
+  .tab-pane{ id: 'devops-score', class: ('active' if params[:tab] != 'devops-adoption') }
     = render_ce 'admin/dev_ops_report/report'
-  .tab-pane#devops_adoption_pane
+  .tab-pane{ id: 'devops-adoption', class: ('active' if params[:tab] == 'devops-adoption') }
     .js-devops-adoption{ data: { empty_state_svg_path: image_path('illustrations/monitoring/getting_started.svg') } }

ee/spec/features/admin/admin_dev_ops_report_spec.rb

@@ -51,6 +51,30 @@ RSpec.describe 'DevOps Report page', :js do
       end
     end
 
+    it 'does not add the tab param when the DevOps Score tab is selected' do
+      visit admin_dev_ops_report_path
+
+      click_link 'DevOps Score'
+
+      expect(page).to have_current_path(admin_dev_ops_report_path)
+    end
+
+    it 'adds the ?tab=devops-adoption param when the Adoption tab is selected' do
+      visit admin_dev_ops_report_path
+
+      click_link 'Adoption'
+
+      expect(page).to have_current_path(admin_dev_ops_report_path(tab: 'devops-adoption'))
+    end
+
+    it 'shows the devops adoption tab when the tab param is set' do
+      visit admin_dev_ops_report_path(tab: 'devops-adoption')
+
+      within tabs_selector do
+        expect(page).to have_selector active_tab_selector, text: 'Adoption'
+      end
+    end
+
     context 'the devops score tab' do
       it 'has dismissable intro callout' do
         visit admin_dev_ops_report_path