Added educational text about K8s deployments

When the user selects the K8s deployment target to create a project,
we show the educational text with the link to our docs.

Changelog: changed

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 {
@@ -7,6 +8,7 @@ import {
   DEPLOYMENT_TARGET_LABEL,
   DEPLOYMENT_TARGET_EVENT,
   NEW_PROJECT_FORM,
+  K8S_OPTION,
 } from '../constants';
 
 const trackingMixin = Tracking.mixin({ label: DEPLOYMENT_TARGET_LABEL });
@@ -15,12 +17,19 @@ export default {
   i18n: {
     deploymentTargetLabel: s__('Deployment Target|Project deployment target (optional)'),
     defaultOption: s__('Deployment Target|Select the deployment target'),
+    k8sEducationText: s__(
+      'Deployment Target|Learn more about the %{linkStart}GitLab - Kubernetes integrations%{linkEnd}.',
+    ),
   },
   deploymentTargets: DEPLOYMENT_TARGET_SELECTIONS,
   selectId: 'deployment-target-select',
+  helpPageUrl: helpPagePath('user/clusters/agent'),
   components: {
     GlFormGroup,
     GlFormSelect,
+    GlFormText,
+    GlSprintf,
+    GlLink,
   },
   mixins: [trackingMixin],
   data() {
@@ -29,6 +38,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 +66,19 @@ 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">{{ 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'),

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

locale/gitlab.pot

@@ -12460,6 +12460,9 @@ msgstr ""
 msgid "Deployment Frequency"
 msgstr ""
 
+msgid "Deployment Target|Learn more about the %{linkStart}GitLab - Kubernetes integrations%{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 } 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';
@@ -15,6 +15,7 @@ describe('Deployment target select', () => {
 
   const findFormGroup = () => wrapper.findComponent(GlFormGroup);
   const findSelect = () => wrapper.findComponent(GlFormSelect);
+  const findText = () => wrapper.findComponent(GlFormText);
 
   const createdWrapper = () => {
     wrapper = shallowMount(DeploymentTargetSelect, {
@@ -79,4 +80,19 @@ 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);
+    });
+  });
 });