Add Project Quality tab to pipeline charts

Blank placeholder tab for now
Only show it if the licensed feature is available
and the feature flag is enabled

app/assets/javascripts/projects/pipelines/charts/components/app.vue

@@ -11,12 +11,17 @@ export default {
     DeploymentFrequencyCharts: () =>
       import('ee_component/dora/components/deployment_frequency_charts.vue'),
     LeadTimeCharts: () => import('ee_component/dora/components/lead_time_charts.vue'),
+    ProjectQualitySummary: () => import('ee_component/project_quality_summary/app.vue'),
   },
   inject: {
     shouldRenderDoraCharts: {
       type: Boolean,
       default: false,
     },
+    shouldRenderQualitySummary: {
+      type: Boolean,
+      default: false,
+    },
   },
   data() {
     return {
@@ -31,6 +36,10 @@ export default {
         chartsToShow.push('deployment-frequency', 'lead-time');
       }
 
+      if (this.shouldRenderQualitySummary) {
+        chartsToShow.push('project-quality');
+      }
+
       return chartsToShow;
     },
   },
@@ -68,6 +77,9 @@ export default {
           <lead-time-charts />
         </gl-tab>
       </template>
+      <gl-tab v-if="shouldRenderQualitySummary" :title="s__('QualitySummary|Project quality')">
+        <project-quality-summary />
+      </gl-tab>
     </gl-tabs>
     <pipeline-charts v-else />
   </div>

app/assets/javascripts/projects/pipelines/charts/index.js

@@ -14,6 +14,7 @@ const mountPipelineChartsApp = (el) => {
   const { projectPath } = el.dataset;
 
   const shouldRenderDoraCharts = parseBoolean(el.dataset.shouldRenderDoraCharts);
+  const shouldRenderQualitySummary = parseBoolean(el.dataset.shouldRenderQualitySummary);
 
   return new Vue({
     el,
@@ -25,6 +26,7 @@ const mountPipelineChartsApp = (el) => {
     provide: {
       projectPath,
       shouldRenderDoraCharts,
+      shouldRenderQualitySummary,
     },
     render: (createElement) => createElement(ProjectPipelinesCharts, {}),
   });

app/helpers/graph_helper.rb

@@ -26,6 +26,10 @@ module GraphHelper
   def should_render_dora_charts
     false
   end
+
+  def should_render_quality_summary
+    false
+  end
 end
 
 GraphHelper.prepend_mod_with('GraphHelper')

app/views/projects/pipelines/charts.html.haml

 - page_title _('CI/CD Analytics')
 
 #js-project-pipelines-charts-app{ data: { project_path: @project.full_path,
-  should_render_dora_charts: should_render_dora_charts.to_s } }
+  should_render_dora_charts: should_render_dora_charts.to_s,
+  should_render_quality_summary: should_render_quality_summary.to_s } }

ee/app/assets/javascripts/project_quality_summary/app.vue

+<script>
+export default {};
+</script>
+<template><div></div></template>

ee/app/helpers/ee/graph_helper.rb

@@ -12,5 +12,11 @@ module EE
 
       can?(current_user, :read_dora4_analytics, container)
     end
+
+    override :should_render_quality_summary
+    def should_render_quality_summary
+      @project.feature_available?(:project_quality_summary) &&
+        ::Feature.enabled?(:project_quality_summary_page, @project, default_enabled: :yaml)
+    end
   end
 end

ee/app/models/license.rb

@@ -177,6 +177,7 @@ class License < ApplicationRecord
     kubernetes_cluster_vulnerabilities
     license_scanning
     personal_access_token_expiration_policy
+    project_quality_summary
     prometheus_alerts
     pseudonymizer
     quality_management

ee/config/feature_flags/development/project_quality_summary_page.yml

+---
+name: project_quality_summary_page
+introduced_by_url: https://gitlab.com/gitlab-org/gitlab/-/merge_requests/72724
+rollout_issue_url: https://gitlab.com/gitlab-org/gitlab/-/issues/343687
+milestone: '14.4'
+type: development
+group: group::testing
+default_enabled: false

ee/spec/helpers/ee/graph_helper_spec.rb

@@ -58,4 +58,38 @@ RSpec.describe EE::GraphHelper do
       it_behaves_like '#should_render_dora_charts for a specific type of container'
     end
   end
+
+  describe '#should_render_quality_summary' do
+    subject { helper.should_render_quality_summary }
+
+    before do
+      self.instance_variable_set(:@project, project)
+    end
+
+    context 'when licensed feature is available' do
+      before do
+        stub_licensed_features(project_quality_summary: true)
+      end
+
+      context 'when feature flag is enabled' do
+        it { is_expected.to eq(true) }
+      end
+
+      context 'when feature flag is disabled' do
+        before do
+          stub_feature_flags(project_quality_summary_page: false)
+        end
+
+        it { is_expected.to eq(false) }
+      end
+    end
+
+    context 'when licensed feature is not available' do
+      before do
+        stub_licensed_features(project_quality_summary: false)
+      end
+
+      it { is_expected.to eq(false) }
+    end
+  end
 end

locale/gitlab.pot

@@ -28215,6 +28215,9 @@ msgstr ""
 msgid "PushoverService|Total commits count: %{total_commits_count}"
 msgstr ""
 
+msgid "QualitySummary|Project quality"
+msgstr ""
+
 msgid "Quarters"
 msgstr ""
 

spec/frontend/projects/pipelines/charts/components/app_spec.js

@@ -11,6 +11,7 @@ jest.mock('~/lib/utils/url_utility');
 
 const DeploymentFrequencyChartsStub = { name: 'DeploymentFrequencyCharts', render: () => {} };
 const LeadTimeChartsStub = { name: 'LeadTimeCharts', render: () => {} };
+const ProjectQualitySummaryStub = { name: 'ProjectQualitySummary', render: () => {} };
 
 describe('ProjectsPipelinesChartsApp', () => {
   let wrapper;
@@ -23,10 +24,12 @@ describe('ProjectsPipelinesChartsApp', () => {
         {
           provide: {
             shouldRenderDoraCharts: true,
+            shouldRenderQualitySummary: true,
           },
           stubs: {
             DeploymentFrequencyCharts: DeploymentFrequencyChartsStub,
             LeadTimeCharts: LeadTimeChartsStub,
+            ProjectQualitySummary: ProjectQualitySummaryStub,
           },
         },
         mountOptions,
@@ -44,6 +47,7 @@ describe('ProjectsPipelinesChartsApp', () => {
   const findLeadTimeCharts = () => wrapper.find(LeadTimeChartsStub);
   const findDeploymentFrequencyCharts = () => wrapper.find(DeploymentFrequencyChartsStub);
   const findPipelineCharts = () => wrapper.find(PipelineCharts);
+  const findProjectQualitySummary = () => wrapper.find(ProjectQualitySummaryStub);
 
   describe('when all charts are available', () => {
     beforeEach(() => {
@@ -70,6 +74,10 @@ describe('ProjectsPipelinesChartsApp', () => {
       expect(findLeadTimeCharts().exists()).toBe(true);
     });
 
+    it('renders the project quality summary', () => {
+      expect(findProjectQualitySummary().exists()).toBe(true);
+    });
+
     it('sets the tab and url when a tab is clicked', async () => {
       let chartsPath;
       setWindowLocation(`${TEST_HOST}/gitlab-org/gitlab-test/-/pipelines/charts`);
@@ -163,9 +171,11 @@ describe('ProjectsPipelinesChartsApp', () => {
     });
   });
 
-  describe('when the dora charts are not available', () => {
+  describe('when the dora charts are not available and project quality summary is not available', () => {
     beforeEach(() => {
-      createComponent({ provide: { shouldRenderDoraCharts: false } });
+      createComponent({
+        provide: { shouldRenderDoraCharts: false, shouldRenderQualitySummary: false },
+      });
     });
 
     it('does not render tabs', () => {
@@ -176,4 +186,14 @@ describe('ProjectsPipelinesChartsApp', () => {
       expect(findPipelineCharts().exists()).toBe(true);
     });
   });
+
+  describe('when the project quality summary is not available', () => {
+    beforeEach(() => {
+      createComponent({ provide: { shouldRenderQualitySummary: false } });
+    });
+
+    it('does not render the tab', () => {
+      expect(findProjectQualitySummary().exists()).toBe(false);
+    });
+  });
 });

spec/helpers/graph_helper_spec.rb

@@ -27,4 +27,16 @@ RSpec.describe GraphHelper do
       expect(should_render_dora_charts).to be(false)
     end
   end
+
+  describe '#should_render_quality_summary' do
+    let(:project) { create(:project, :private) }
+
+    before do
+      self.instance_variable_set(:@project, project)
+    end
+
+    it 'always returns false' do
+      expect(should_render_quality_summary).to be(false)
+    end
+  end
 end