Refactor(DevOps Adoption): move to ee

Move the DevOps Adoption tab to ee

Ref:
https://gitlab.com/gitlab-org/gitlab/-/issues/273406

app/assets/javascripts/admin/dev_ops_report/devops_adoption.js

-import Vue from 'vue';
-import DevopsAdoptionApp from './components/devops_adoption_app.vue';
-
-export default () => {
-  const el = document.querySelector('.js-devops-adoption');
-
-  if (!el) return false;
-
-  const { emptyStateSvgPath } = el.dataset;
-
-  return new Vue({
-    el,
-    provide: {
-      emptyStateSvgPath,
-    },
-    render(h) {
-      return h(DevopsAdoptionApp);
-    },
-  });
-};
+// EE-specific feature. Find the implementation in the `ee/`-folder
+export default () => {};

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

+import initDevopAdoption from 'ee_else_ce/admin/dev_ops_report/devops_adoption';
 import initDevOpsScoreEmptyState from '~/admin/dev_ops_report/devops_score_empty_state';
-import initDevopAdoption from '~/admin/dev_ops_report/devops_adoption';
 
 initDevOpsScoreEmptyState();
 initDevopAdoption();

app/views/admin/dev_ops_report/show.html.haml

@@ -4,17 +4,7 @@
 .container
   .gl-mt-3
     - if Feature.enabled?(:devops_adoption)
-      %h2
-        = _('DevOps Report')
-      %ul.nav-links.nav-tabs.nav.js-devops-tabs{ role: 'tablist' }
-        = render 'tab', active: true, title: _('DevOps Score'), target: '#devops_score_pane'
-        = render 'tab', active: false, title: _('Adoption'), target: '#devops_adoption_pane'
-
-      .tab-content
-        .tab-pane.active#devops_score_pane
-          = render 'report'
-        .tab-pane#devops_adoption_pane
-          .js-devops-adoption{ data: { empty_state_svg_path: image_path('illustrations/monitoring/getting_started.svg') } }
+      = render_if_exists 'admin/dev_ops_report/devops_tabs'
     - else
       = render 'report'
 

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

+import Vue from 'vue';
+import DevopsAdoptionApp from './components/devops_adoption_app.vue';
+
+export default () => {
+  const el = document.querySelector('.js-devops-adoption');
+
+  if (!el) return false;
+
+  const { emptyStateSvgPath } = el.dataset;
+
+  return new Vue({
+    el,
+    provide: {
+      emptyStateSvgPath,
+    },
+    render(h) {
+      return h(DevopsAdoptionApp);
+    },
+  });
+};

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: _('DevOps Score'), target: '#devops_score_pane'
+  = render 'tab', active: false, title: _('Adoption'), target: '#devops_adoption_pane'
+
+.tab-content
+  .tab-pane.active#devops_score_pane
+    = render_ce 'admin/dev_ops_report/report'
+  .tab-pane#devops_adoption_pane
+    .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

+# frozen_string_literal: true
+
+require 'spec_helper'
+
+RSpec.describe 'DevOps Report page', :js do
+  tabs_selector = '.js-devops-tabs'
+  tab_item_selector = '.js-devops-tab-item'
+  active_tab_selector = '.nav-link.active'
+
+  before do
+    sign_in(create(:admin))
+  end
+
+  context 'with devops_adoption feature flag disabled' do
+    before do
+      stub_feature_flags(devops_adoption: false)
+    end
+
+    it 'does not show the tabbed layout' do
+      visit admin_dev_ops_report_path
+
+      expect(page).not_to have_selector tabs_selector
+    end
+  end
+
+  context 'with devops_adoption feature flag enabled' do
+    it 'shows the tabbed layout' do
+      visit admin_dev_ops_report_path
+
+      expect(page).to have_selector tabs_selector
+    end
+
+    it 'shows the correct tabs' do
+      visit admin_dev_ops_report_path
+
+      within tabs_selector do
+        expect(page.all(:css, tab_item_selector).length).to be(2)
+        expect(page).to have_text 'DevOps Score Adoption'
+      end
+    end
+
+    it 'defaults to the DevOps Score tab' do
+      visit admin_dev_ops_report_path
+
+      within tabs_selector do
+        expect(page).to have_selector active_tab_selector, text: 'DevOps Score'
+      end
+    end
+
+    it 'displays the Adoption tab content when selected' do
+      visit admin_dev_ops_report_path
+
+      click_link '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
+
+        expect(page).to have_content 'Introducing Your DevOps Report'
+
+        find('.js-close-callout').click
+
+        expect(page).not_to have_content 'Introducing Your DevOps Report'
+      end
+
+      context 'when usage ping is disabled' do
+        before do
+          stub_application_setting(usage_ping_enabled: false)
+        end
+
+        it 'shows empty state' do
+          visit admin_dev_ops_report_path
+
+          expect(page).to have_selector(".js-empty-state")
+        end
+
+        it 'hides the intro callout' do
+          visit admin_dev_ops_report_path
+
+          expect(page).not_to have_content 'Introducing Your DevOps Report'
+        end
+      end
+
+      context 'when there is no data to display' do
+        it 'shows empty state' do
+          stub_application_setting(usage_ping_enabled: true)
+
+          visit admin_dev_ops_report_path
+
+          expect(page).to have_content('Data is still calculating')
+        end
+      end
+
+      context 'when there is data to display' do
+        it 'shows numbers for each metric' do
+          stub_application_setting(usage_ping_enabled: true)
+          create(:dev_ops_report_metric)
+
+          visit admin_dev_ops_report_path
+
+          expect(page).to have_content(
+            'Issues created per active user 1.2 You 9.3 Lead 13.3%'
+          )
+        end
+      end
+    end
+  end
+end

spec/frontend/admin/dev_ops_report/components/devops_adoption_app_spec.js → ee/spec/frontend/admin/dev_ops_report/components/devops_adoption_app_spec.js

 import { shallowMount } from '@vue/test-utils';
-import DevopsAdoptionApp from '~/admin/dev_ops_report/components/devops_adoption_app.vue';
-import DevopsAdoptionEmptyState from '~/admin/dev_ops_report/components/devops_adoption_empty_state.vue';
+import DevopsAdoptionApp from 'ee/admin/dev_ops_report/components/devops_adoption_app.vue';
+import DevopsAdoptionEmptyState from 'ee/admin/dev_ops_report/components/devops_adoption_empty_state.vue';
 
 describe('DevopsAdoptionApp', () => {
   let wrapper;

spec/frontend/admin/dev_ops_report/components/devops_adoption_empty_state_spec.js → ee/spec/frontend/admin/dev_ops_report/components/devops_adoption_empty_state_spec.js

 import { shallowMount } from '@vue/test-utils';
 import { GlEmptyState, GlButton } from '@gitlab/ui';
-import DevopsAdoptionEmptyState from '~/admin/dev_ops_report/components/devops_adoption_empty_state.vue';
-import { DEVOPS_ADOPTION_STRINGS } from '~/admin/dev_ops_report/constants';
+import DevopsAdoptionEmptyState from 'ee/admin/dev_ops_report/components/devops_adoption_empty_state.vue';
+import { DEVOPS_ADOPTION_STRINGS } from 'ee/admin/dev_ops_report/constants';
 
 const emptyStateSvgPath = 'illustrations/monitoring/getting_started.svg';
 

spec/features/admin/admin_dev_ops_report_spec.rb

@@ -3,10 +3,6 @@
 require 'spec_helper'
 
 RSpec.describe 'DevOps Report page', :js do
-  tabs_selector = '.js-devops-tabs'
-  tab_item_selector = '.js-devops-tab-item'
-  active_tab_selector = '.nav-link.active'
-
   before do
     sign_in(create(:admin))
   end
@@ -16,99 +12,6 @@ RSpec.describe 'DevOps Report page', :js do
       stub_feature_flags(devops_adoption: false)
     end
 
-    it 'does not show the tabbed layout' do
-      visit admin_dev_ops_report_path
-
-      expect(page).not_to have_selector tabs_selector
-    end
-
-    it 'has dismissable intro callout' do
-      visit admin_dev_ops_report_path
-
-      expect(page).to have_content 'Introducing Your DevOps Report'
-
-      find('.js-close-callout').click
-
-      expect(page).not_to have_content 'Introducing Your DevOps Report'
-    end
-
-    context 'when usage ping is disabled' do
-      before do
-        stub_application_setting(usage_ping_enabled: false)
-      end
-
-      it 'shows empty state' do
-        visit admin_dev_ops_report_path
-
-        expect(page).to have_selector(".js-empty-state")
-      end
-
-      it 'hides the intro callout' do
-        visit admin_dev_ops_report_path
-
-        expect(page).not_to have_content 'Introducing Your DevOps Report'
-      end
-    end
-
-    context 'when there is no data to display' do
-      it 'shows empty state' do
-        stub_application_setting(usage_ping_enabled: true)
-
-        visit admin_dev_ops_report_path
-
-        expect(page).to have_content('Data is still calculating')
-      end
-    end
-
-    context 'when there is data to display' do
-      it 'shows numbers for each metric' do
-        stub_application_setting(usage_ping_enabled: true)
-        create(:dev_ops_report_metric)
-
-        visit admin_dev_ops_report_path
-
-        expect(page).to have_content(
-          'Issues created per active user 1.2 You 9.3 Lead 13.3%'
-        )
-      end
-    end
-  end
-
-  context 'with devops_adoption feature flag enabled' do
-    it 'shows the tabbed layout' do
-      visit admin_dev_ops_report_path
-
-      expect(page).to have_selector tabs_selector
-    end
-
-    it 'shows the correct tabs' do
-      visit admin_dev_ops_report_path
-
-      within tabs_selector do
-        expect(page.all(:css, tab_item_selector).length).to be(2)
-        expect(page).to have_text 'DevOps Score Adoption'
-      end
-    end
-
-    it 'defaults to the DevOps Score tab' do
-      visit admin_dev_ops_report_path
-
-      within tabs_selector do
-        expect(page).to have_selector active_tab_selector, text: 'DevOps Score'
-      end
-    end
-
-    it 'displays the Adoption tab content when selected' do
-      visit admin_dev_ops_report_path
-
-      click_link '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
 
@@ -160,5 +63,4 @@ RSpec.describe 'DevOps Report page', :js do
       end
     end
   end
-  end
 end