Add link to group pipeline usage quota

On a groups anlaytics page add a link
to redirect user to group pipeline usage
quota.

Changelog: changed

ee/app/assets/javascripts/analytics/group_ci_cd_analytics/components/app.vue

 <script>
-import { GlTabs, GlTab } from '@gitlab/ui';
+import { GlTabs, GlTab, GlLink } from '@gitlab/ui';
 import DeploymentFrequencyCharts from 'ee/dora/components/deployment_frequency_charts.vue';
 import LeadTimeCharts from 'ee/dora/components/lead_time_charts.vue';
 import { mergeUrlParams, updateHistory, getParameterValues } from '~/lib/utils/url_utility';
@@ -12,6 +12,7 @@ export default {
     ReleaseStatsCard,
     GlTabs,
     GlTab,
+    GlLink,
     DeploymentFrequencyCharts,
     LeadTimeCharts,
     SharedRunnersUsage,
@@ -21,6 +22,10 @@ export default {
       type: Boolean,
       default: false,
     },
+    pipelineGroupUsageQuotaPath: {
+      type: String,
+      default: '',
+    },
   },
   data() {
     return {
@@ -80,6 +85,11 @@ export default {
       <gl-tab :title="s__('CICDAnalytics|Shared runner usage')">
         <shared-runners-usage />
       </gl-tab>
+      <template #tabs-end>
+        <gl-link :href="pipelineGroupUsageQuotaPath" class="gl-align-self-center gl-ml-auto">{{
+          __('View group pipeline usage quota')
+        }}</gl-link>
+      </template>
     </gl-tabs>
     <release-stats-card v-else :class="releaseStatsCardClasses" />
   </div>

ee/app/assets/javascripts/analytics/group_ci_cd_analytics/index.js

@@ -15,7 +15,7 @@ export default () => {
 
   if (!el) return false;
 
-  const { fullPath, groupId } = el.dataset;
+  const { fullPath, groupId, pipelineGroupUsageQuotaPath } = el.dataset;
 
   const shouldRenderDoraCharts = parseBoolean(el.dataset.shouldRenderDoraCharts);
 
@@ -26,6 +26,7 @@ export default () => {
       groupPath: fullPath,
       shouldRenderDoraCharts,
       groupId,
+      pipelineGroupUsageQuotaPath,
     },
     render: (createElement) => createElement(CiCdAnalyticsApp),
   });

ee/app/views/groups/analytics/ci_cd_analytics/show.html.haml

 - page_title _("CI/CD Analytics")
 
 #js-group-ci-cd-analytics-app{ data: { full_path: @group.full_path,
-  should_render_dora_charts: should_render_dora_charts.to_s, group_id: @group.id } }
+  should_render_dora_charts: should_render_dora_charts.to_s, group_id: @group.id,
+  pipeline_group_usage_quota_path: group_usage_quotas_path(@group, anchor: 'pipelines-quota-tab') } }

ee/spec/frontend/analytics/group_ci_cd_analytics/components/app_spec.js

-import { GlTabs, GlTab } from '@gitlab/ui';
+import { GlTabs, GlTab, GlLink } from '@gitlab/ui';
 import { shallowMount } from '@vue/test-utils';
 import { merge } from 'lodash';
 import CiCdAnalyticsApp from 'ee/analytics/group_ci_cd_analytics/components/app.vue';
@@ -19,6 +19,8 @@ describe('ee/analytics/group_ci_cd_analytics/components/app.vue', () => {
     getParameterValues.mockReturnValue([]);
   });
 
+  const quotaPath = '/groups/my-awesome-group/-/usage_quotas#pipelines-quota-tab';
+
   const createComponent = (mountOptions = {}) => {
     wrapper = shallowMount(
       CiCdAnalyticsApp,
@@ -26,6 +28,7 @@ describe('ee/analytics/group_ci_cd_analytics/components/app.vue', () => {
         {
           provide: {
             shouldRenderDoraCharts: true,
+            pipelineGroupUsageQuotaPath: quotaPath,
           },
         },
         mountOptions,
@@ -34,6 +37,7 @@ describe('ee/analytics/group_ci_cd_analytics/components/app.vue', () => {
   };
 
   const findGlTabs = () => wrapper.findComponent(GlTabs);
+  const findUsageQuotaLink = () => wrapper.findComponent(GlLink);
   const findAllGlTabs = () => wrapper.findAllComponents(GlTab);
   const findGlTabAtIndex = (index) => findAllGlTabs().at(index);
 
@@ -116,4 +120,17 @@ describe('ee/analytics/group_ci_cd_analytics/components/app.vue', () => {
       expect(findGlTabs().attributes('value')).toBe(index);
     });
   });
+
+  it('displays link to group pipeline usage quota page', () => {
+    createComponent({
+      stubs: {
+        GlTabs: {
+          template: '<div><slot></slot><slot name="tabs-end"></slot></div>',
+        },
+      },
+    });
+
+    expect(findUsageQuotaLink().attributes('href')).toBe(quotaPath);
+    expect(findUsageQuotaLink().text()).toBe('View group pipeline usage quota');
+  });
 });

locale/gitlab.pot

@@ -39806,6 +39806,9 @@ msgstr ""
 msgid "View group labels"
 msgstr ""
 
+msgid "View group pipeline usage quota"
+msgstr ""
+
 msgid "View incident details at"
 msgstr ""