Added a snowplow event for the docs link

We need the event to track user clicks on the docs link.

app/assets/javascripts/projects/new/components/deployment_target_select.vue

@@ -7,6 +7,7 @@ import {
   DEPLOYMENT_TARGET_SELECTIONS,
   DEPLOYMENT_TARGET_LABEL,
   DEPLOYMENT_TARGET_EVENT,
+  VISIT_DOCS_EVENT,
   NEW_PROJECT_FORM,
   K8S_OPTION,
 } from '../constants';
@@ -22,8 +23,10 @@ export default {
     ),
   },
   deploymentTargets: DEPLOYMENT_TARGET_SELECTIONS,
+  VISIT_DOCS_EVENT,
+  DEPLOYMENT_TARGET_LABEL,
   selectId: 'deployment-target-select',
-  helpPageUrl: helpPagePath('user/clusters/agent'),
+  helpPageUrl: helpPagePath('user/clusters/agent/index'),
   components: {
     GlFormGroup,
     GlFormSelect,
@@ -76,7 +79,12 @@ export default {
     <gl-form-text v-if="isK8sOptionSelected">
       <gl-sprintf :message="$options.i18n.k8sEducationText">
         <template #link="{ content }">
-          <gl-link :href="$options.helpPageUrl">{{ content }}</gl-link>
+          <gl-link
+            :href="$options.helpPageUrl"
+            :data-track-action="$options.VISIT_DOCS_EVENT"
+            :data-track-label="$options.DEPLOYMENT_TARGET_LABEL"
+            >{{ content }}</gl-link
+          >
         </template>
       </gl-sprintf>
     </gl-form-text>

app/assets/javascripts/projects/new/constants.js

@@ -20,3 +20,4 @@ export const DEPLOYMENT_TARGET_SELECTIONS = [
 export const NEW_PROJECT_FORM = 'new_project';
 export const DEPLOYMENT_TARGET_LABEL = 'new_project_deployment_target';
 export const DEPLOYMENT_TARGET_EVENT = 'select_deployment_target';
+export const VISIT_DOCS_EVENT = 'visit_docs';

config/events/1649272430_projectsnew_visit_docs.yml

+---
+description: Docs link under the deployment target select visited from new project creation form
+category: projects:new
+action: visit_docs
+label_description: new_project_deployment_target
+product_section: ops
+product_stage: configure
+product_group: group::configure
+milestone: "14.10"
+introduced_by_url: https://gitlab.com/gitlab-org/gitlab/-/merge_requests/84224
+distributions:
+- ce
+- ee
+tiers: 
+- free
+- premium
+- ultimate
+

spec/frontend/projects/new/components/deployment_target_select_spec.js

-import { GlFormGroup, GlFormSelect, GlFormText } from '@gitlab/ui';
+import { GlFormGroup, GlFormSelect, GlFormText, GlLink, GlSprintf } from '@gitlab/ui';
 import { shallowMount } from '@vue/test-utils';
 import { mockTracking } from 'helpers/tracking_helper';
 import DeploymentTargetSelect from '~/projects/new/components/deployment_target_select.vue';
@@ -6,7 +6,9 @@ import {
   DEPLOYMENT_TARGET_SELECTIONS,
   DEPLOYMENT_TARGET_LABEL,
   DEPLOYMENT_TARGET_EVENT,
+  VISIT_DOCS_EVENT,
   NEW_PROJECT_FORM,
+  K8S_OPTION,
 } from '~/projects/new/constants';
 
 describe('Deployment target select', () => {
@@ -16,11 +18,14 @@ describe('Deployment target select', () => {
   const findFormGroup = () => wrapper.findComponent(GlFormGroup);
   const findSelect = () => wrapper.findComponent(GlFormSelect);
   const findText = () => wrapper.findComponent(GlFormText);
+  const findLink = () => wrapper.findComponent(GlLink);
 
   const createdWrapper = () => {
     wrapper = shallowMount(DeploymentTargetSelect, {
       stubs: {
         GlFormSelect,
+        GlFormText,
+        GlSprintf,
       },
     });
   };
@@ -95,4 +100,17 @@ describe('Deployment target select', () => {
       expect(findText().exists()).toBe(isTextShown);
     });
   });
+
+  describe('when user clicks on the docs link', () => {
+    beforeEach(async () => {
+      await findSelect().vm.$emit('input', K8S_OPTION);
+      findLink().trigger('click');
+    });
+
+    it('sends the snowplow tracking event', () => {
+      expect(trackingSpy).toHaveBeenCalledWith('_category_', VISIT_DOCS_EVENT, {
+        label: DEPLOYMENT_TARGET_LABEL,
+      });
+    });
+  });
 });