Merge branch...

Merge branch '357005-educate-the-user-about-the-gitlab-agent-for-kubernetes-when-the-planned-deployment-target-is' into 'master'

Educate the user about the GitLab agent for Kubernetes when the planned deployment target is Kubernetes

See merge request gitlab-org/gitlab!84224

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

 <script>
-import { GlFormGroup, GlFormSelect } from '@gitlab/ui';
+import { GlFormGroup, GlFormSelect, GlFormText, GlSprintf, GlLink } from '@gitlab/ui';
+import { helpPagePath } from '~/helpers/help_page_helper';
 import { s__ } from '~/locale';
 import Tracking from '~/tracking';
 import {
   DEPLOYMENT_TARGET_SELECTIONS,
   DEPLOYMENT_TARGET_LABEL,
   DEPLOYMENT_TARGET_EVENT,
+  VISIT_DOCS_EVENT,
   NEW_PROJECT_FORM,
+  K8S_OPTION,
 } from '../constants';
 
 const trackingMixin = Tracking.mixin({ label: DEPLOYMENT_TARGET_LABEL });
@@ -15,12 +18,21 @@ export default {
   i18n: {
     deploymentTargetLabel: s__('Deployment Target|Project deployment target (optional)'),
     defaultOption: s__('Deployment Target|Select the deployment target'),
+    k8sEducationText: s__(
+      'Deployment Target|%{linkStart}How to provision or deploy to Kubernetes clusters from GitLab?%{linkEnd}',
+    ),
   },
   deploymentTargets: DEPLOYMENT_TARGET_SELECTIONS,
+  VISIT_DOCS_EVENT,
+  DEPLOYMENT_TARGET_LABEL,
   selectId: 'deployment-target-select',
+  helpPageUrl: helpPagePath('user/clusters/agent/index'),
   components: {
     GlFormGroup,
     GlFormSelect,
+    GlFormText,
+    GlSprintf,
+    GlLink,
   },
   mixins: [trackingMixin],
   data() {
@@ -29,6 +41,11 @@ export default {
       formSubmitted: false,
     };
   },
+  computed: {
+    isK8sOptionSelected() {
+      return this.selectedTarget === K8S_OPTION;
+    },
+  },
   mounted() {
     const form = document.getElementById(NEW_PROJECT_FORM);
     form.addEventListener('submit', () => {
@@ -52,10 +69,24 @@ export default {
       :id="$options.selectId"
       v-model="selectedTarget"
       :options="$options.deploymentTargets"
+      class="input-lg"
     >
       <template #first>
         <option :value="null" disabled>{{ $options.i18n.defaultOption }}</option>
       </template>
     </gl-form-select>
+
+    <gl-form-text v-if="isK8sOptionSelected">
+      <gl-sprintf :message="$options.i18n.k8sEducationText">
+        <template #link="{ content }">
+          <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>
   </gl-form-group>
 </template>

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

 import { s__ } from '~/locale';
 
+export const K8S_OPTION = s__('DeploymentTarget|Kubernetes (GKE, EKS, OpenShift, and so on)');
+
 export const DEPLOYMENT_TARGET_SELECTIONS = [
-  s__('DeploymentTarget|Kubernetes (GKE, EKS, OpenShift, and so on)'),
+  K8S_OPTION,
   s__('DeploymentTarget|Managed container runtime (Fargate, Cloud Run, DigitalOcean App)'),
   s__('DeploymentTarget|Self-managed container runtime (Podman, Docker Swarm, Docker Compose)'),
   s__('DeploymentTarget|Heroku'),
@@ -18,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';

app/views/projects/_new_project_fields.html.haml

@@ -49,7 +49,7 @@
     = s_('ProjectsNew|Project description %{tag_start}(optional)%{tag_end}').html_safe % { tag_start: '<span>'.html_safe, tag_end: '</span>'.html_safe }
   = f.text_area :description, placeholder: s_('ProjectsNew|Description format'), class: "form-control gl-form-input", rows: 3, maxlength: 250, data: { qa_selector: 'project_description', track_label: "#{track_label}", track_action: "activate_form_input", track_property: "project_description", track_value: "" }
 
-- unless Gitlab::CurrentSettings.current_application_settings.hide_third_party_offers?
+- unless Gitlab::CurrentSettings.current_application_settings.hide_third_party_offers? || !Gitlab.com?
   .js-deployment-target-select
 
 = f.label :visibility_level, class: 'label-bold' do

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
+

locale/gitlab.pot

@@ -12460,6 +12460,9 @@ msgstr ""
 msgid "Deployment Frequency"
 msgstr ""
 
+msgid "Deployment Target|%{linkStart}How to provision or deploy to Kubernetes clusters from GitLab?%{linkEnd}"
+msgstr ""
+
 msgid "Deployment Target|Project deployment target (optional)"
 msgstr ""
 

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

-import { GlFormGroup, GlFormSelect } from '@gitlab/ui';
+import { GlFormGroup, GlFormSelect, GlFormText, GlLink, GlSprintf } from '@gitlab/ui';
+import { nextTick } from 'vue';
 import { shallowMount } from '@vue/test-utils';
 import { mockTracking } from 'helpers/tracking_helper';
 import DeploymentTargetSelect from '~/projects/new/components/deployment_target_select.vue';
@@ -6,7 +7,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', () => {
@@ -15,11 +18,15 @@ 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,
       },
     });
   };
@@ -79,4 +86,34 @@ describe('Deployment target select', () => {
       });
     }
   });
+
+  describe.each`
+    selectedTarget                     | isTextShown
+    ${null}                            | ${false}
+    ${DEPLOYMENT_TARGET_SELECTIONS[0]} | ${true}
+    ${DEPLOYMENT_TARGET_SELECTIONS[1]} | ${false}
+  `('K8s education text', ({ selectedTarget, isTextShown }) => {
+    beforeEach(() => {
+      findSelect().vm.$emit('input', selectedTarget);
+    });
+
+    it(`is ${!isTextShown ? 'not ' : ''}shown when selected option is ${selectedTarget}`, () => {
+      expect(findText().exists()).toBe(isTextShown);
+    });
+  });
+
+  describe('when user clicks on the docs link', () => {
+    beforeEach(async () => {
+      findSelect().vm.$emit('input', K8S_OPTION);
+      await nextTick();
+
+      findLink().trigger('click');
+    });
+
+    it('sends the snowplow tracking event', () => {
+      expect(trackingSpy).toHaveBeenCalledWith('_category_', VISIT_DOCS_EVENT, {
+        label: DEPLOYMENT_TARGET_LABEL,
+      });
+    });
+  });
 });