Fix the deployment target data collection on project creation to not use translated strings

Problem

On new project creation, we offer the user to select a deployment target for their project. When we save the selection in analytics (Snowplow) we save the translated value of the selection. This makes analysis very hard, especially as in some languages not every value needs to be translated (e.g. GitLab Pages might be left as GitLab Pages, while other values are translated).

To check, one can run the following query in Snowflake:

SELECT
  event_property,
  plan_name,
  COUNT(*) AS event_count
FROM common_mart.mart_behavior_structured_event
WHERE behavior_at >= '2024-11-01'
  AND event_action = 'select_deployment_target'
GROUP BY 1, 2
ORDER BY event_count DESC

Proposal

Always use the english text or a variable that's similar to the english text.

Implementation guide

  1. Change DEPLOYMENT_TARGET_SELECTIONS to array of objects with text and value for each item:
export const K8S_OPTION = {
  value: 'kubernetes',
  text: s__('DeploymentTarget|Kubernetes (GKE, EKS, OpenShift, and so on)'),
};

export const DEPLOYMENT_TARGET_SELECTIONS = [
  K8S_OPTION,
  { value: 'managed_container_runtime', text: s__('DeploymentTarget|Managed container runtime (Fargate, Cloud Run, DigitalOcean App)') },
  { value: 'self_managed_container_runtime', text: s__('DeploymentTarget|Self-managed container runtime (Podman, Docker Swarm, Docker Compose)') },
  { value: 'heroku', text: s__('DeploymentTarget|Heroku') },
  { value: 'virtual_machine', text: s__('DeploymentTarget|Virtual machine (for example, EC2)') },
  { value: 'mobile_app_store', text: s__('DeploymentTarget|Mobile app store') },
  { value: 'registry', text: s__('DeploymentTarget|Registry (package or container)') },
  { value: 'infrastructure_provider', text: s__('DeploymentTarget|Infrastructure provider (Terraform, Cloudformation, and so on)') },
  { value: 'serverless_backend', text: s__('DeploymentTarget|Serverless backend (Lambda, Cloud functions)') },
  { value: 'edge_computing', text: s__('DeploymentTarget|Edge computing (e.g. Cloudflare Workers)') },
  { value: 'web_deployment_platform', text: s__('DeploymentTarget|Web Deployment Platform (Netlify, Vercel, Gatsby)') },
  { value: 'gitlab_pages', text: s__('DeploymentTarget|GitLab Pages') },
  { value: 'other_hosting_service', text: s__('DeploymentTarget|Other hosting service') },
  { value: 'no_deployment', text: s__('DeploymentTarget|No deployment planned') },
];
  1. The GlFormSelect component of the deployment_target_select.vue won't need any changes.
  2. Update isK8sOptionSelected to work with the object's value:
isK8sOptionSelected() {
  return this.selectedTarget === K8S_OPTION.value;
},
  1. Update the corresponding test:
diff --git a/spec/frontend/projects/new/components/deployment_target_select_spec.js b/spec/frontend/projects/new/components/deployment_target_select_spec.js
index 9f6d1c45c6a8..d5fac294ca4b 100644
--- a/spec/frontend/projects/new/components/deployment_target_select_spec.js
+++ b/spec/frontend/projects/new/components/deployment_target_select_spec.js
@@ -60,10 +60,10 @@ describe('Deployment target select', () => {
   });
 
   describe.each`
-    selectedTarget                     | formSubmitted | eventSent
-    ${null}                            | ${true}       | ${false}
-    ${DEPLOYMENT_TARGET_SELECTIONS[0]} | ${false}      | ${false}
-    ${DEPLOYMENT_TARGET_SELECTIONS[0]} | ${true}       | ${true}
+    selectedTarget                           | formSubmitted | eventSent
+    ${null}                                  | ${true}       | ${false}
+    ${DEPLOYMENT_TARGET_SELECTIONS[0].value} | ${false}      | ${false}
+    ${DEPLOYMENT_TARGET_SELECTIONS[0].value} | ${true}       | ${true}
   `('Snowplow tracking event', ({ selectedTarget, formSubmitted, eventSent }) => {
     beforeEach(() => {
       findSelect().vm.$emit('input', selectedTarget);
@@ -89,10 +89,10 @@ describe('Deployment target select', () => {
   });
 
   describe.each`
-    selectedTarget                     | isTextShown
-    ${null}                            | ${false}
-    ${DEPLOYMENT_TARGET_SELECTIONS[0]} | ${true}
-    ${DEPLOYMENT_TARGET_SELECTIONS[1]} | ${false}
+    selectedTarget                           | isTextShown
+    ${null}                                  | ${false}
+    ${DEPLOYMENT_TARGET_SELECTIONS[0].value} | ${true}
+    ${DEPLOYMENT_TARGET_SELECTIONS[1].value} | ${false}
   `('K8s education text', ({ selectedTarget, isTextShown }) => {
     beforeEach(() => {
       findSelect().vm.$emit('input', selectedTarget);
@@ -105,7 +105,7 @@ describe('Deployment target select', () => {
 
   describe('when user clicks on the docs link', () => {
     beforeEach(async () => {
-      findSelect().vm.$emit('input', K8S_OPTION);
+      findSelect().vm.$emit('input', K8S_OPTION.value);
       await nextTick();
 
       findLink().trigger('click');
Edited by Anna Vovchenko