Add permissions for link

Add permissions for group usage
quota link.

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

@@ -26,6 +26,10 @@ export default {
       type: String,
       default: '',
     },
+    canViewGroupUsageQuotaBoolean: {
+      type: Boolean,
+      default: false,
+    },
   },
   data() {
     return {
@@ -85,7 +89,7 @@ export default {
       <gl-tab :title="s__('CICDAnalytics|Shared runner usage')">
         <shared-runners-usage />
       </gl-tab>
-      <template #tabs-end>
+      <template v-if="canViewGroupUsageQuotaBoolean" #tabs-end>
         <gl-link :href="pipelineGroupUsageQuotaPath" class="gl-align-self-center gl-ml-auto">{{
           __('View group pipeline usage quota')
         }}</gl-link>

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

@@ -15,9 +15,10 @@ export default () => {
 
   if (!el) return false;
 
-  const { fullPath, groupId, pipelineGroupUsageQuotaPath } = el.dataset;
+  const { fullPath, groupId, pipelineGroupUsageQuotaPath, canViewGroupUsageQuota } = el.dataset;
 
   const shouldRenderDoraCharts = parseBoolean(el.dataset.shouldRenderDoraCharts);
+  const canViewGroupUsageQuotaBoolean = parseBoolean(canViewGroupUsageQuota);
 
   return new Vue({
     el,
@@ -27,6 +28,7 @@ export default () => {
       shouldRenderDoraCharts,
       groupId,
       pipelineGroupUsageQuotaPath,
+      canViewGroupUsageQuotaBoolean,
     },
     render: (createElement) => createElement(CiCdAnalyticsApp),
   });

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

@@ -2,4 +2,5 @@
 
 #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,
-  pipeline_group_usage_quota_path: group_usage_quotas_path(@group, anchor: 'pipelines-quota-tab') } }
+  pipeline_group_usage_quota_path: group_usage_quotas_path(@group, anchor: 'pipelines-quota-tab'),
+  can_view_group_usage_quota: can?(current_user, :admin_group, @group).to_s } }

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

@@ -21,7 +21,7 @@ describe('ee/analytics/group_ci_cd_analytics/components/app.vue', () => {
 
   const quotaPath = '/groups/my-awesome-group/-/usage_quotas#pipelines-quota-tab';
 
-  const createComponent = (mountOptions = {}) => {
+  const createComponent = (mountOptions = {}, canView = true) => {
     wrapper = shallowMount(
       CiCdAnalyticsApp,
       merge(
@@ -29,6 +29,7 @@ describe('ee/analytics/group_ci_cd_analytics/components/app.vue', () => {
           provide: {
             shouldRenderDoraCharts: true,
             pipelineGroupUsageQuotaPath: quotaPath,
+            canViewGroupUsageQuotaBoolean: canView,
           },
         },
         mountOptions,
@@ -133,4 +134,19 @@ describe('ee/analytics/group_ci_cd_analytics/components/app.vue', () => {
     expect(findUsageQuotaLink().attributes('href')).toBe(quotaPath);
     expect(findUsageQuotaLink().text()).toBe('View group pipeline usage quota');
   });
+
+  it('hides link to group pipelines usage quota page based on permissions', () => {
+    createComponent(
+      {
+        stubs: {
+          GlTabs: {
+            template: '<div><slot></slot><slot name="tabs-end"></slot></div>',
+          },
+        },
+      },
+      false,
+    );
+
+    expect(findUsageQuotaLink().exists()).toBe(false);
+  });
 });