1 files changed, 32 insertions, 1 deletions
diff --git a/app/assets/javascripts/projects/new/components/deployment_target_select.vue b/app/assets/javascripts/projects/new/components/deployment_target_select.vue
index f3b7e39f148..0003134f15c 100644
--- a/app/assets/javascripts/projects/new/components/deployment_target_select.vue
+++ b/app/assets/javascripts/projects/new/components/deployment_target_select.vue
@@ -1,12 +1,15 @@
 <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>