Add shared runner usage tab to usage quotas on groups

This adds a mounting point to the usage quotas section
in the groups settings, this will be removed once
permissions are fixed for free plans

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

@@ -81,7 +81,7 @@ export default {
 };
 </script>
 <template>
-  <div>
+  <div class="gl-mt-4">
     <div class="gl-display-flex gl-align-items-center gl-mb-4">
       <div class="gl-display-flex">
         <h3 class="gl-mr-2 gl-my-0">{{ $options.i18n.sharedRunnersUsage }}</h3>

ee/app/assets/javascripts/pages/groups/usage_quotas/index.js

@@ -4,6 +4,7 @@ import initNamespaceStorage from 'ee/usage_quotas/storage/init_namespace_storage
 import initCiMinutesUsageApp from 'ee/usage_quotas/ci_minutes_usage';
 import LinkedTabs from '~/lib/utils/bootstrap_linked_tabs';
 import { trackAddToCartUsageTab } from '~/google_tag_manager';
+import initSharedRunnerUsageApp from './init_shared_runners_usage';
 
 const initLinkedTabs = () => {
   if (!document.querySelector('.js-storage-tabs')) {
@@ -56,4 +57,5 @@ const fixPipelinesPagination = () => {
 fixPipelinesPagination();
 initVueApps();
 initLinkedTabs();
+initSharedRunnerUsageApp();
 trackAddToCartUsageTab();

ee/app/assets/javascripts/pages/groups/usage_quotas/init_shared_runners_usage.js

+import Vue from 'vue';
+import VueApollo from 'vue-apollo';
+import createDefaultClient from '~/lib/graphql';
+import SharedRunnerUsage from 'ee/analytics/group_ci_cd_analytics/components/shared_runner_usage.vue';
+
+Vue.use(VueApollo);
+
+const apolloProvider = new VueApollo({
+  defaultClient: createDefaultClient(),
+});
+
+export default () => {
+  const el = document.querySelector('#js-shared-runner-usage-quota');
+
+  if (!el) return false;
+
+  const { namespaceId } = el.dataset;
+
+  return new Vue({
+    el,
+    apolloProvider,
+    provide: {
+      groupId: namespaceId,
+    },
+    render: (createElement) => createElement(SharedRunnerUsage),
+  });
+};

ee/app/views/groups/usage_quotas/index.html.haml

@@ -27,6 +27,9 @@
     %li.nav-item
       %a.nav-link#pipelines-quota{ data: { toggle: "tab", action: '#pipelines-quota-tab' }, href: '#pipelines-quota-tab', 'aria-controls': '#pipelines-quota-tab', 'aria-selected': false }
         = s_('UsageQuota|Pipelines')
+    %li.nav-item
+      %a.nav-link#shared-runners-usage-quota{ data: { toggle: "tab", action: '#shared-runners-usage-quota-tab' }, href: '#shared-runners-usage-quota-tab', 'aria-controls': '#shared-runners-usage-quota-tab', 'aria-selected': false }
+        = s_('CICDAnalytics|Shared runner usage')
     %li.nav-item
       %a.nav-link#storage-quota{ data: { toggle: "tab", action: '#storage-quota-tab' }, href: '#storage-quota-tab', 'aria-controls': '#storage-quota-tab', 'aria-selected': false }
         = s_('UsageQuota|Storage')
@@ -37,5 +40,7 @@
     #js-ci-minutes-usage-group{ data: { namespace_id: @group.id } }
     = render "namespaces/pipelines_quota/list",
       locals: { namespace: @group, projects: @projects }
+  .tab-pane#shared-runners-usage-quota-tab
+    #js-shared-runner-usage-quota{ data: { namespace_id: @group.id } }
   .tab-pane#storage-quota-tab
     #js-storage-counter-app{ data: { namespace_path: @group.full_path, purchase_storage_url: url_to_purchase_storage, buy_addon_target_attr: buy_addon_target_attr, is_temporary_storage_increase_visible: temporary_storage_increase_visible?(@group).to_s } }