Only render lead time graphs if available

This commit updates the lead time graphs not to render if the DORA 4
metrics are not licensed.

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

@@ -18,6 +18,10 @@ export default {
       type: Boolean,
       default: false,
     },
+    shouldRenderLeadTimeCharts: {
+      type: Boolean,
+      default: false,
+    },
   },
   data() {
     return {
@@ -26,11 +30,17 @@ export default {
   },
   computed: {
     charts() {
+      const chartsToShow = ['pipelines'];
+
       if (this.shouldRenderDeploymentFrequencyCharts) {
-        return ['pipelines', 'deployments', 'lead-time'];
+        chartsToShow.push('deployments');
+      }
+
+      if (this.shouldRenderLeadTimeCharts) {
+        chartsToShow.push('lead-time');
       }
 
-      return ['pipelines', 'lead-time'];
+      return chartsToShow;
     },
   },
   created() {
@@ -55,16 +65,17 @@ export default {
 </script>
 <template>
   <div>
-    <gl-tabs :value="selectedTab" @input="onTabChange">
+    <gl-tabs v-if="charts.length > 1" :value="selectedTab" @input="onTabChange">
       <gl-tab :title="__('Pipelines')">
         <pipeline-charts />
       </gl-tab>
       <gl-tab v-if="shouldRenderDeploymentFrequencyCharts" :title="__('Deployments')">
         <deployment-frequency-charts />
       </gl-tab>
-      <gl-tab :title="__('Lead Time')">
+      <gl-tab v-if="shouldRenderLeadTimeCharts" :title="__('Lead Time')">
         <lead-time-charts />
       </gl-tab>
     </gl-tabs>
+    <pipeline-charts v-else />
   </div>
 </template>

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

@@ -16,6 +16,7 @@ const mountPipelineChartsApp = (el) => {
   const shouldRenderDeploymentFrequencyCharts = parseBoolean(
     el.dataset.shouldRenderDeploymentFrequencyCharts,
   );
+  const shouldRenderLeadTimeCharts = parseBoolean(el.dataset.shouldRenderLeadTimeCharts);
 
   return new Vue({
     el,
@@ -27,6 +28,7 @@ const mountPipelineChartsApp = (el) => {
     provide: {
       projectPath,
       shouldRenderDeploymentFrequencyCharts,
+      shouldRenderLeadTimeCharts,
     },
     render: (createElement) => createElement(ProjectPipelinesCharts, {}),
   });

app/helpers/graph_helper.rb

@@ -26,6 +26,10 @@ module GraphHelper
   def should_render_deployment_frequency_charts
     false
   end
+
+  def should_render_lead_time_charts
+    false
+  end
 end
 
 GraphHelper.prepend_if_ee('EE::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_deployment_frequency_charts: should_render_deployment_frequency_charts.to_s } }
+  should_render_deployment_frequency_charts: should_render_deployment_frequency_charts.to_s,
+  should_render_lead_time_charts: should_render_lead_time_charts.to_s } }

ee/app/helpers/ee/graph_helper.rb

@@ -11,5 +11,12 @@ module EE
 
       can?(current_user, :read_dora4_analytics, @project)
     end
+
+    override :should_render_lead_time_charts
+    def should_render_lead_time_charts
+      return false unless @project.feature_available?(:dora4_analytics)
+
+      can?(current_user, :read_dora4_analytics, @project)
+    end
   end
 end

ee/spec/helpers/ee/graph_helper_spec.rb

@@ -3,22 +3,25 @@
 require 'spec_helper'
 
 RSpec.describe EE::GraphHelper do
-  describe '#should_render_deployment_frequency_charts' do
   let_it_be(:current_user) { create(:user) }
   let(:project) { create(:project, :private) }
-
   let(:is_feature_licensed) { true }
-    let(:is_flag_enabled) { true }
   let(:is_user_authorized) { true }
 
   before do
     stub_licensed_features(dora4_analytics: is_feature_licensed)
-      stub_feature_flags(deployment_frequency_charts: is_flag_enabled)
     self.instance_variable_set(:@current_user, current_user)
     self.instance_variable_set(:@project, project)
     allow(self).to receive(:can?).with(current_user, :read_dora4_analytics, project).and_return(is_user_authorized)
   end
 
+  describe '#should_render_deployment_frequency_charts' do
+    let(:is_flag_enabled) { true }
+
+    before do
+      stub_feature_flags(deployment_frequency_charts: is_flag_enabled)
+    end
+
     shared_examples 'returns true' do
       it { expect(should_render_deployment_frequency_charts).to be(true) }
     end
@@ -47,4 +50,28 @@ RSpec.describe EE::GraphHelper do
       it_behaves_like 'returns false'
     end
   end
+
+  describe '#should_render_lead_time_charts' do
+    shared_examples 'returns true' do
+      it { expect(should_render_lead_time_charts).to be(true) }
+    end
+
+    shared_examples 'returns false' do
+      it { expect(should_render_lead_time_charts).to be(false) }
+    end
+
+    it_behaves_like 'returns true'
+
+    context 'when the feature is not available' do
+      let(:is_feature_licensed) { false }
+
+      it_behaves_like 'returns false'
+    end
+
+    context 'when the user does not have permission' do
+      let(:is_user_authorized) { false }
+
+      it_behaves_like 'returns false'
+    end
+  end
 end

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

@@ -22,7 +22,8 @@ describe('ProjectsPipelinesChartsApp', () => {
         {},
         {
           provide: {
-            shouldRenderDeploymentFrequencyCharts: false,
+            shouldRenderDeploymentFrequencyCharts: true,
+            shouldRenderLeadTimeCharts: true,
           },
           stubs: {
             DeploymentFrequencyCharts: DeploymentFrequencyChartsStub,
@@ -34,45 +35,45 @@ describe('ProjectsPipelinesChartsApp', () => {
     );
   }
 
-  beforeEach(() => {
-    createComponent();
-  });
-
   afterEach(() => {
     wrapper.destroy();
-    wrapper = null;
   });
 
   const findGlTabs = () => wrapper.find(GlTabs);
-  const findAllGlTab = () => wrapper.findAll(GlTab);
-  const findGlTabAt = (i) => findAllGlTab().at(i);
+  const findAllGlTabs = () => wrapper.findAll(GlTab);
   const findLeadTimeCharts = () => wrapper.find(LeadTimeChartsStub);
   const findDeploymentFrequencyCharts = () => wrapper.find(DeploymentFrequencyChartsStub);
   const findPipelineCharts = () => wrapper.find(PipelineCharts);
 
-  it('renders the pipeline charts', () => {
+  const expectCorrectTabs = ({ pipelines, leadTime, deploymentFreqency }) => {
+    it('renders the expected tabs', () => {
+      expect(findGlTabs().exists()).toBe(true);
+
+      const allTabTitles = findAllGlTabs().wrappers.map((w) => w.attributes('title'));
+
+      if (pipelines) {
+        expect(allTabTitles).toContain('Pipelines');
         expect(findPipelineCharts().exists()).toBe(true);
-  });
+      }
 
-  it('renders the lead time charts', () => {
+      if (deploymentFreqency) {
+        expect(allTabTitles).toContain('Deployments');
+        expect(findDeploymentFrequencyCharts().exists()).toBe(true);
+      }
+
+      if (leadTime) {
+        expect(allTabTitles).toContain('Lead Time');
         expect(findLeadTimeCharts().exists()).toBe(true);
+      }
     });
+  };
 
-  describe('when shouldRenderDeploymentFrequencyCharts is true', () => {
+  describe('when all charts are available', () => {
     beforeEach(() => {
-      createComponent({ provide: { shouldRenderDeploymentFrequencyCharts: true } });
-    });
-
-    it('renders the expected tabs', () => {
-      expect(findGlTabs().exists()).toBe(true);
-      expect(findGlTabAt(0).attributes('title')).toBe('Pipelines');
-      expect(findGlTabAt(1).attributes('title')).toBe('Deployments');
-      expect(findGlTabAt(2).attributes('title')).toBe('Lead Time');
+      createComponent();
     });
 
-    it('renders the deployment frequency charts', () => {
-      expect(findDeploymentFrequencyCharts().exists()).toBe(true);
-    });
+    expectCorrectTabs({ pipelines: true, deploymentFreqency: true, leadTime: true });
 
     it('sets the tab and url when a tab is clicked', async () => {
       let chartsPath;
@@ -172,14 +173,33 @@ describe('ProjectsPipelinesChartsApp', () => {
       createComponent({ provide: { shouldRenderDeploymentFrequencyCharts: false } });
     });
 
-    it('renders the expected tabs', () => {
-      expect(findGlTabs().exists()).toBe(true);
-      expect(findGlTabAt(0).attributes('title')).toBe('Pipelines');
-      expect(findGlTabAt(1).attributes('title')).toBe('Lead Time');
+    expectCorrectTabs({ pipelines: true, deploymentFreqency: false, leadTime: true });
   });
 
-    it('does not render the deployment frequency charts in a tab', () => {
-      expect(findDeploymentFrequencyCharts().exists()).toBe(false);
+  describe('when shouldRenderLeadTimeCharts is false', () => {
+    beforeEach(() => {
+      createComponent({ provide: { shouldRenderLeadTimeCharts: false } });
+    });
+
+    expectCorrectTabs({ pipelines: true, deploymentFreqency: true, leadTime: false });
+  });
+
+  describe('when shouldRenderDeploymentFrequencyCharts and shouldRenderLeadTimeCharts are false', () => {
+    beforeEach(() => {
+      createComponent({
+        provide: {
+          shouldRenderDeploymentFrequencyCharts: false,
+          shouldRenderLeadTimeCharts: false,
+        },
+      });
+    });
+
+    it('does not render tabs', () => {
+      expect(findGlTabs().exists()).toBe(false);
+    });
+
+    it('renders the pipeline charts', () => {
+      expect(findPipelineCharts().exists()).toBe(true);
     });
   });
 });

spec/helpers/graph_helper_spec.rb

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