Merge branch 'led/440193-add-code_suggestions-to-conditionally-render-in-ce' into 'master'

Add Code Suggestions tab to conditionally render in CE

See merge request https://gitlab.com/gitlab-org/gitlab/-/merge_requests/145006



Merged-by: Jose Ivan Vargas <jvargas@gitlab.com>
Approved-by: Jose Ivan Vargas <jvargas@gitlab.com>
Reviewed-by: Ammar Alakkad <aalakkad@gitlab.com>
Reviewed-by: Sheldon Led <sheldonled@gitlab.com>
Co-authored-by: Sheldon Led <sheldonled@gitlab.com>

ee/app/assets/javascripts/usage_quotas/code_suggestions/index.js

 import Vue from 'vue';
 import VueApollo from 'vue-apollo';
-import CodeSuggestionsUsage from 'ee/usage_quotas/code_suggestions/components/code_suggestions_usage.vue';
-import apolloProvider from 'ee/usage_quotas/shared/provider';
+import { getCodeSuggestionsTabMetadata } from './tab_metadata';
 
 Vue.use(VueApollo);
 
-export default (containerId = 'js-code-suggestions-usage-app') => {
-  const el = document.getElementById(containerId);
+export default () => {
+  const codeSuggestionsTabMetadata = getCodeSuggestionsTabMetadata(true);
 
-  if (!el) {
-    return false;
-  }
+  if (!codeSuggestionsTabMetadata) return false;
 
-  const {
-    fullPath,
-    groupId,
-    firstName,
-    lastName,
-    companyName,
-    namespaceId,
-    buttonAttributes,
-    createHandRaiseLeadPath,
-    glmContent,
-    productInteraction,
-    trackAction,
-    trackLabel,
-    userName,
-    addDuoProHref,
-  } = el.dataset;
-
-  return new Vue({
-    el,
-    apolloProvider,
-    name: 'CodeSuggestionsUsageApp',
-    provide: {
-      fullPath,
-      groupId,
-      createHandRaiseLeadPath,
-      addDuoProHref,
-      isSaaS: true,
-      buttonAttributes: buttonAttributes && { ...JSON.parse(buttonAttributes), variant: 'confirm' },
-      user: {
-        namespaceId,
-        userName,
-        firstName,
-        lastName,
-        companyName,
-        glmContent,
-        productInteraction,
-      },
-      ctaTracking: {
-        action: trackAction,
-        label: trackLabel,
-      },
-    },
-    render(createElement) {
-      return createElement(CodeSuggestionsUsage);
-    },
-  });
+  return new Vue(codeSuggestionsTabMetadata.component);
 };

ee/app/assets/javascripts/usage_quotas/code_suggestions/tab_metadata.js

+import { s__ } from '~/locale';
+import apolloProvider from '../shared/provider';
+import { CODE_SUGGESTIONS_TAB_METADATA_EL_SELECTOR } from '../constants';
+import CodeSuggestionsUsage from './components/code_suggestions_usage.vue';
+
+export const parseProvideData = (el) => {
+  const {
+    fullPath,
+    groupId,
+    firstName,
+    lastName,
+    companyName,
+    namespaceId,
+    buttonAttributes,
+    createHandRaiseLeadPath,
+    glmContent,
+    productInteraction,
+    trackAction,
+    trackLabel,
+    userName,
+    addDuoProHref,
+  } = el.dataset;
+
+  return {
+    fullPath,
+    groupId,
+    createHandRaiseLeadPath,
+    addDuoProHref,
+    isSaaS: true,
+    buttonAttributes: buttonAttributes && { ...JSON.parse(buttonAttributes), variant: 'confirm' },
+    user: {
+      namespaceId,
+      userName,
+      firstName,
+      lastName,
+      companyName,
+      glmContent,
+      productInteraction,
+    },
+    ctaTracking: {
+      action: trackAction,
+      label: trackLabel,
+    },
+  };
+};
+
+export const getCodeSuggestionsTabMetadata = (withMountElement = false) => {
+  const el = document.querySelector(CODE_SUGGESTIONS_TAB_METADATA_EL_SELECTOR);
+
+  if (!el) return false;
+
+  const codeSuggestionsTabMetadata = {
+    title: s__('UsageQuota|GitLab Duo Pro'),
+    component: {
+      name: 'CodeSuggestionsUsageTab',
+      apolloProvider,
+      provide: parseProvideData(el),
+      render(createElement) {
+        return createElement(CodeSuggestionsUsage);
+      },
+    },
+  };
+
+  if (withMountElement) {
+    codeSuggestionsTabMetadata.component.el = el;
+  }
+
+  return codeSuggestionsTabMetadata;
+};

ee/app/assets/javascripts/usage_quotas/constants.js

@@ -5,3 +5,4 @@ export const USAGE_BY_PROJECT_HEADER = s__('UsageQuota|Usage by project');
 
 export const PIPELINES_TAB_METADATA_EL_SELECTOR = '#js-pipeline-usage-app';
 export const SEATS_TAB_METADATA_EL_SELECTOR = '#js-seat-usage-app';
+export const CODE_SUGGESTIONS_TAB_METADATA_EL_SELECTOR = '#js-code-suggestions-usage-app';

ee/app/assets/javascripts/usage_quotas/group_view_metadata.js

@@ -5,6 +5,7 @@ import PipelineUsageApp from './pipelines/components/app.vue';
 import { parseProvideData as parseStorageTabProvideData } from './storage/utils';
 import { parseProvideData as parsePipelinesTabProvideData } from './pipelines/utils';
 import { PIPELINES_TAB_METADATA_EL_SELECTOR } from './constants';
+import { getCodeSuggestionsTabMetadata } from './code_suggestions/tab_metadata';
 import { getSeatTabMetadata } from './seats/tab_metadata';
 
 export const usageQuotasViewProvideData = {
@@ -25,6 +26,7 @@ const getPipelineTabMetadata = () => {
 
 export const usageQuotasTabsMetadata = [
   getSeatTabMetadata(),
+  getCodeSuggestionsTabMetadata(),
   getPipelineTabMetadata(),
   storageTabMetadata,
 ];

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

@@ -17,9 +17,11 @@
 
   #js-usage-quotas-view{ data: { namespace_name: @group.name } }
     #js-seat-usage-app{ data: group_seats_usage_quota_app_data(@group) }
-    #js-namespace-storage-app{ data: storage_usage_app_data(@group) }
+    - if show_code_suggestions_tab?(@group)
+      #js-code-suggestions-usage-app{ data: code_suggestions_usage_app_data(@group) }
     - if can? current_user, :admin_ci_minutes, @group
       #js-pipeline-usage-app{ data: pipeline_usage_app_data(@group) }
+    #js-namespace-storage-app{ data: storage_usage_app_data(@group) }
 - else
   - if show_product_purchase_success_alert?
     = render 'product_purchase_success_alert', product_name: params[:purchased_product]