From 043a27e63d3e29b9e696ed3ca414aceffdeae975 Mon Sep 17 00:00:00 2001
From: Sheldon Led <sheldonled@gitlab.com>
Date: Tue, 20 Feb 2024 20:08:29 +0000
Subject: [PATCH] Add Code Suggestions tab to conditionally render in CE
---
.../usage_quotas/code_suggestions/index.js | 58 ++--------------
.../code_suggestions/tab_metadata.js | 69 +++++++++++++++++++
.../javascripts/usage_quotas/constants.js | 1 +
.../usage_quotas/group_view_metadata.js | 2 +
.../views/groups/usage_quotas/index.html.haml | 4 +-
5 files changed, 80 insertions(+), 54 deletions(-)
create mode 100644 ee/app/assets/javascripts/usage_quotas/code_suggestions/tab_metadata.js
diff --git a/ee/app/assets/javascripts/usage_quotas/code_suggestions/index.js b/ee/app/assets/javascripts/usage_quotas/code_suggestions/index.js
index 6fb77fcdc1dc..f1771c6a7d5c 100644
--- a/ee/app/assets/javascripts/usage_quotas/code_suggestions/index.js
+++ b/ee/app/assets/javascripts/usage_quotas/code_suggestions/index.js
@@ -1,61 +1,13 @@
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);
};
diff --git a/ee/app/assets/javascripts/usage_quotas/code_suggestions/tab_metadata.js b/ee/app/assets/javascripts/usage_quotas/code_suggestions/tab_metadata.js
new file mode 100644
index 000000000000..556ec9af9b4e
--- /dev/null
+++ b/ee/app/assets/javascripts/usage_quotas/code_suggestions/tab_metadata.js
@@ -0,0 +1,69 @@
+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;
+};
diff --git a/ee/app/assets/javascripts/usage_quotas/constants.js b/ee/app/assets/javascripts/usage_quotas/constants.js
index 783461e1f57c..039721ff505d 100644
--- a/ee/app/assets/javascripts/usage_quotas/constants.js
+++ b/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';
diff --git a/ee/app/assets/javascripts/usage_quotas/group_view_metadata.js b/ee/app/assets/javascripts/usage_quotas/group_view_metadata.js
index 0d89c3d06838..32d7c6f4340a 100644
--- a/ee/app/assets/javascripts/usage_quotas/group_view_metadata.js
+++ b/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,
];
diff --git a/ee/app/views/groups/usage_quotas/index.html.haml b/ee/app/views/groups/usage_quotas/index.html.haml
index 921ea1fc0eec..9a8df050dd14 100644
--- a/ee/app/views/groups/usage_quotas/index.html.haml
+++ b/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]
--
GitLab