Add latest changes from gitlab-org/gitlab@13-11-stable-eev13.11.0-rc43

4 files changed, 37 insertions, 15 deletions

diff --git a/app/assets/javascripts/projects/pipelines/charts/components/app.vue b/app/assets/javascripts/projects/pipelines/charts/components/app.vue
index 4a8e1424fa8..8d005373508 100644
--- a/app/assets/javascripts/projects/pipelines/charts/components/app.vue
+++ b/app/assets/javascripts/projects/pipelines/charts/components/app.vue
@@ -3,8 +3,6 @@ import { GlTabs, GlTab } from '@gitlab/ui';
 import { mergeUrlParams, updateHistory, getParameterValues } from '~/lib/utils/url_utility';
 import PipelineCharts from './pipeline_charts.vue';
 
-const charts = ['pipelines', 'deployments'];
-
 export default {
   components: {
     GlTabs,
@@ -12,9 +10,11 @@ export default {
     PipelineCharts,
     DeploymentFrequencyCharts: () =>
       import('ee_component/projects/pipelines/charts/components/deployment_frequency_charts.vue'),
+    LeadTimeCharts: () =>
+      import('ee_component/projects/pipelines/charts/components/lead_time_charts.vue'),
   },
   inject: {
-    shouldRenderDeploymentFrequencyCharts: {
+    shouldRenderDoraCharts: {
       type: Boolean,
       default: false,
     },
@@ -24,20 +24,31 @@ export default {
       selectedTab: 0,
     };
   },
+  computed: {
+    charts() {
+      const chartsToShow = ['pipelines'];
+
+      if (this.shouldRenderDoraCharts) {
+        chartsToShow.push('deployments', 'lead-time');
+      }
+
+      return chartsToShow;
+    },
+  },
   created() {
     this.selectTab();
     window.addEventListener('popstate', this.selectTab);
   },
   methods: {
     selectTab() {
-      const [chart] = getParameterValues('chart') || charts;
-      const tab = charts.indexOf(chart);
+      const [chart] = getParameterValues('chart') || this.charts;
+      const tab = this.charts.indexOf(chart);
       this.selectedTab = tab >= 0 ? tab : 0;
     },
     onTabChange(index) {
       if (index !== this.selectedTab) {
         this.selectedTab = index;
-        const path = mergeUrlParams({ chart: charts[index] }, window.location.pathname);
+        const path = mergeUrlParams({ chart: this.charts[index] }, window.location.pathname);
         updateHistory({ url: path, title: window.title });
       }
     },
@@ -46,13 +57,18 @@ export default {
 </script>
 <template>
   <div>
-    <gl-tabs v-if="shouldRenderDeploymentFrequencyCharts" :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 :title="__('Deployments')">
-        <deployment-frequency-charts />
-      </gl-tab>
+      <template v-if="shouldRenderDoraCharts">
+        <gl-tab :title="__('Deployments')">
+          <deployment-frequency-charts />
+        </gl-tab>
+        <gl-tab :title="__('Lead Time')">
+          <lead-time-charts />
+        </gl-tab>
+      </template>
     </gl-tabs>
     <pipeline-charts v-else />
   </div>
diff --git a/app/assets/javascripts/projects/pipelines/charts/components/ci_cd_analytics_area_chart.vue b/app/assets/javascripts/projects/pipelines/charts/components/ci_cd_analytics_area_chart.vue
index 3590e2c4632..ad3e6713e45 100644
--- a/app/assets/javascripts/projects/pipelines/charts/components/ci_cd_analytics_area_chart.vue
+++ b/app/assets/javascripts/projects/pipelines/charts/components/ci_cd_analytics_area_chart.vue
@@ -30,12 +30,16 @@ export default {
     <resizable-chart-container>
       <gl-area-chart
         slot-scope="{ width }"
+        v-bind="$attrs"
         :width="width"
         :height="$options.chartContainerHeight"
         :data="chartData"
         :include-legend-avg-max="false"
         :option="areaChartOptions"
-      />
+      >
+        <slot slot="tooltip-title" name="tooltip-title"></slot>
+        <slot slot="tooltip-content" name="tooltip-content"></slot>
+      </gl-area-chart>
     </resizable-chart-container>
   </div>
 </template>
diff --git a/app/assets/javascripts/projects/pipelines/charts/components/ci_cd_analytics_charts.vue b/app/assets/javascripts/projects/pipelines/charts/components/ci_cd_analytics_charts.vue
index 43b36da8b2c..f4fd57e4cdc 100644
--- a/app/assets/javascripts/projects/pipelines/charts/components/ci_cd_analytics_charts.vue
+++ b/app/assets/javascripts/projects/pipelines/charts/components/ci_cd_analytics_charts.vue
@@ -41,10 +41,14 @@ export default {
     <gl-segmented-control v-model="selectedChart" :options="chartRanges" class="gl-mb-4" />
     <ci-cd-analytics-area-chart
       v-if="chart"
+      v-bind="$attrs"
       :chart-data="chart.data"
       :area-chart-options="chartOptions"
     >
       {{ dateRange }}
+
+      <slot slot="tooltip-title" name="tooltip-title"></slot>
+      <slot slot="tooltip-content" name="tooltip-content"></slot>
     </ci-cd-analytics-area-chart>
   </div>
 </template>
diff --git a/app/assets/javascripts/projects/pipelines/charts/index.js b/app/assets/javascripts/projects/pipelines/charts/index.js
index 7e746423b6a..5f5ee44c204 100644
--- a/app/assets/javascripts/projects/pipelines/charts/index.js
+++ b/app/assets/javascripts/projects/pipelines/charts/index.js
@@ -13,9 +13,7 @@ const apolloProvider = new VueApollo({
 const mountPipelineChartsApp = (el) => {
   const { projectPath } = el.dataset;
 
-  const shouldRenderDeploymentFrequencyCharts = parseBoolean(
-    el.dataset.shouldRenderDeploymentFrequencyCharts,
-  );
+  const shouldRenderDoraCharts = parseBoolean(el.dataset.shouldRenderDoraCharts);
 
   return new Vue({
     el,
@@ -26,7 +24,7 @@ const mountPipelineChartsApp = (el) => {
     apolloProvider,
     provide: {
       projectPath,
-      shouldRenderDeploymentFrequencyCharts,
+      shouldRenderDoraCharts,
     },
     render: (createElement) => createElement(ProjectPipelinesCharts, {}),
   });