Add latest changes from gitlab-org/gitlab@master

5 files changed, 84 insertions, 3 deletions

diff --git a/app/assets/javascripts/analytics/cycle_analytics/components/base.vue b/app/assets/javascripts/analytics/cycle_analytics/components/base.vue
index a688e2f497b..a0416100e49 100644
--- a/app/assets/javascripts/analytics/cycle_analytics/components/base.vue
+++ b/app/assets/javascripts/analytics/cycle_analytics/components/base.vue
@@ -4,7 +4,7 @@ import { mapActions, mapState, mapGetters } from 'vuex';
 import { getCookie, setCookie } from '~/lib/utils/common_utils';
 import ValueStreamMetrics from '~/analytics/shared/components/value_stream_metrics.vue';
 import { VSA_METRICS_GROUPS } from '~/analytics/shared/constants';
-import { toYmd } from '~/analytics/shared/utils';
+import { toYmd, generateValueStreamsDashboardLink } from '~/analytics/shared/utils';
 import PathNavigation from '~/analytics/cycle_analytics/components/path_navigation.vue';
 import StageTable from '~/analytics/cycle_analytics/components/stage_table.vue';
 import ValueStreamFilters from '~/analytics/cycle_analytics/components/value_stream_filters.vue';
@@ -98,8 +98,22 @@ export default {
       }
       return 0;
     },
+    hasCycleAnalyticsForGroups() {
+      return this.features?.cycleAnalyticsForGroups;
+    },
     metricsRequests() {
-      return this.features?.cycleAnalyticsForGroups ? METRICS_REQUESTS : SUMMARY_METRICS_REQUEST;
+      return this.hasCycleAnalyticsForGroups ? METRICS_REQUESTS : SUMMARY_METRICS_REQUEST;
+    },
+    showLinkToDashboard() {
+      return this.hasCycleAnalyticsForGroups && this.features?.groupAnalyticsDashboardsPage;
+    },
+    dashboardsPath() {
+      const {
+        endpoints: { groupPath, fullPath },
+      } = this;
+      return this.showLinkToDashboard
+        ? generateValueStreamsDashboardLink(groupPath, [fullPath])
+        : null;
     },
     query() {
       return {
@@ -173,6 +187,7 @@ export default {
       :request-params="filterParams"
       :requests="metricsRequests"
       :group-by="$options.VSA_METRICS_GROUPS"
+      :dashboards-path="dashboardsPath"
     />
     <gl-loading-icon v-if="isLoading" size="lg" />
     <stage-table
diff --git a/app/assets/javascripts/analytics/cycle_analytics/utils.js b/app/assets/javascripts/analytics/cycle_analytics/utils.js
index 428bb11b950..0326aa1e70e 100644
--- a/app/assets/javascripts/analytics/cycle_analytics/utils.js
+++ b/app/assets/javascripts/analytics/cycle_analytics/utils.js
@@ -78,6 +78,7 @@ export const filterStagesByHiddenStatus = (stages = [], isHidden = true) =>
 
 const extractFeatures = (gon) => ({
   cycleAnalyticsForGroups: Boolean(gon?.licensed_features?.cycleAnalyticsForGroups),
+  groupAnalyticsDashboardsPage: Boolean(gon?.features?.groupAnalyticsDashboardsPage),
 });
 
 /**
diff --git a/app/assets/javascripts/analytics/shared/components/value_stream_metrics.vue b/app/assets/javascripts/analytics/shared/components/value_stream_metrics.vue
index cc7b554f32c..f917248cd13 100644
--- a/app/assets/javascripts/analytics/shared/components/value_stream_metrics.vue
+++ b/app/assets/javascripts/analytics/shared/components/value_stream_metrics.vue
@@ -4,6 +4,7 @@ import { isEqual, keyBy } from 'lodash';
 import { createAlert } from '~/flash';
 import { sprintf, s__ } from '~/locale';
 import { fetchMetricsData, removeFlash } from '../utils';
+import ValueStreamsDashboardLink from './value_streams_dashboard_link.vue';
 import MetricTile from './metric_tile.vue';
 
 const extractMetricsGroupData = (keyList = [], data = []) => {
@@ -28,6 +29,7 @@ export default {
   components: {
     GlSkeletonLoader,
     MetricTile,
+    ValueStreamsDashboardLink,
   },
   props: {
     requestPath: {
@@ -52,6 +54,11 @@ export default {
       required: false,
       default: () => [],
     },
+    dashboardsPath: {
+      type: String,
+      required: false,
+      default: null,
+    },
   },
   data() {
     return {
@@ -76,6 +83,10 @@ export default {
     this.fetchData();
   },
   methods: {
+    shouldDisplayDashboardLink(index) {
+      // When we have groups of metrics, we should only display the link for the first group
+      return index === 0 && this.dashboardsPath;
+    },
     fetchData() {
       removeFlash();
       this.isLoading = true;
@@ -110,7 +121,7 @@ export default {
     <template v-else>
       <div v-if="hasGroupedMetrics" class="gl-flex-direction-column">
         <div
-          v-for="group in groupedMetrics"
+          v-for="(group, groupIndex) in groupedMetrics"
           :key="group.key"
           class="gl-mb-7"
           data-testid="vsa-metrics-group"
@@ -123,6 +134,11 @@ export default {
               :metric="metric"
               class="gl-mt-5 gl-pr-10"
             />
+            <value-streams-dashboard-link
+              v-if="shouldDisplayDashboardLink(groupIndex)"
+              class="gl-mt-5"
+              :request-path="dashboardsPath"
+            />
           </div>
         </div>
       </div>
diff --git a/app/assets/javascripts/analytics/shared/components/value_streams_dashboard_link.vue b/app/assets/javascripts/analytics/shared/components/value_streams_dashboard_link.vue
new file mode 100644
index 00000000000..59c14f5e2ac
--- /dev/null
+++ b/app/assets/javascripts/analytics/shared/components/value_streams_dashboard_link.vue
@@ -0,0 +1,30 @@
+<script>
+import { GlIcon, GlLink } from '@gitlab/ui';
+import { __ } from '~/locale';
+
+export default {
+  name: 'ValueStreamsDashboardLink',
+  components: { GlIcon, GlLink },
+  props: {
+    requestPath: {
+      type: String,
+      required: true,
+    },
+  },
+  i18n: {
+    title: __('Related'),
+    linkText: __('Value Streams Dashboard | DORA'),
+  },
+};
+</script>
+<template>
+  <div class="gl-display-flex gl-flex-direction-column">
+    <div class="gl-display-flex gl-mb-2">
+      <span>{{ $options.i18n.title }}</span>
+    </div>
+    <div class="gl-display-flex gl-align-items-baseline">
+      <gl-link :href="requestPath">{{ $options.i18n.linkText }}</gl-link
+      >&nbsp;<gl-icon name="dashboard" />
+    </div>
+  </div>
+</template>
diff --git a/app/assets/javascripts/analytics/shared/utils.js b/app/assets/javascripts/analytics/shared/utils.js
index aafbf642766..701cdcf0a2d 100644
--- a/app/assets/javascripts/analytics/shared/utils.js
+++ b/app/assets/javascripts/analytics/shared/utils.js
@@ -1,6 +1,7 @@
 import { flatten } from 'lodash';
 import dateFormat from '~/lib/dateformat';
 import { slugify } from '~/lib/utils/text_utility';
+import { joinPaths } from '~/lib/utils/url_utility';
 import { urlQueryToFilter } from '~/vue_shared/components/filtered_search_bar/filtered_search_utils';
 import { dateFormats, METRICS_POPOVER_CONTENT } from './constants';
 
@@ -119,3 +120,21 @@ export const fetchMetricsData = (requests = [], requestPath, params) => {
     prepareTimeMetricsData(flatten(responses), METRICS_POPOVER_CONTENT),
   );
 };
+
+/**
+ * Generates a URL link to the VSD dashboard based on the group
+ * and project paths passed into the method.
+ *
+ * @param {String} groupPath - Path of the specified group
+ * @param {Array} projectPaths - Array of project paths to include in the `query` parameter
+ * @returns a URL or blank string if there is no groupPath set
+ */
+export const generateValueStreamsDashboardLink = (groupPath, projectPaths = []) => {
+  if (groupPath.length) {
+    const query = projectPaths.length ? `?query=${projectPaths.join(',')}` : '';
+    const dashboardsSlug = '/-/analytics/dashboards';
+    const segments = [gon.relative_url_root || '', '/groups', groupPath, dashboardsSlug];
+    return joinPaths(...segments).concat(query);
+  }
+  return '';
+};