Add latest changes from gitlab-org/gitlab@master

3 files changed, 40 insertions, 14 deletions

diff --git a/app/assets/javascripts/create_cluster/eks_cluster/components/create_eks_cluster.vue b/app/assets/javascripts/create_cluster/eks_cluster/components/create_eks_cluster.vue
index b865c9deb72..22ee368b8e0 100644
--- a/app/assets/javascripts/create_cluster/eks_cluster/components/create_eks_cluster.vue
+++ b/app/assets/javascripts/create_cluster/eks_cluster/components/create_eks_cluster.vue
@@ -12,11 +12,18 @@ export default {
       type: String,
       required: true,
     },
+    kubernetesIntegrationHelpPath: {
+      type: String,
+      required: true,
+    },
   },
 };
 </script>
 <template>
-  <eks-cluster-configuration-form
-    :gitlab-managed-cluster-help-path="gitlabManagedClusterHelpPath"
-  />
+  <div class="js-create-eks-cluster">
+    <eks-cluster-configuration-form
+      :gitlab-managed-cluster-help-path="gitlabManagedClusterHelpPath"
+      :kubernetes-integration-help-path="kubernetesIntegrationHelpPath"
+    />
+  </div>
 </template>
diff --git a/app/assets/javascripts/create_cluster/eks_cluster/components/eks_cluster_configuration_form.vue b/app/assets/javascripts/create_cluster/eks_cluster/components/eks_cluster_configuration_form.vue
index d451516dd35..1188cf08850 100644
--- a/app/assets/javascripts/create_cluster/eks_cluster/components/eks_cluster_configuration_form.vue
+++ b/app/assets/javascripts/create_cluster/eks_cluster/components/eks_cluster_configuration_form.vue
@@ -35,6 +35,10 @@ export default {
       type: String,
       required: true,
     },
+    kubernetesIntegrationHelpPath: {
+      type: String,
+      required: true,
+    },
   },
   computed: {
     ...mapState([
@@ -94,6 +98,20 @@ export default {
     securityGroupDropdownDisabled() {
       return !this.selectedVpc;
     },
+    kubernetesIntegrationHelpText() {
+      const escapedUrl = _.escape(this.kubernetesIntegrationHelpPath);
+
+      return sprintf(
+        s__(
+          'ClusterIntegration|Read our %{link_start}help page%{link_end} on Kubernetes cluster integration.',
+        ),
+        {
+          link_start: `<a href="${escapedUrl}" target="_blank" rel="noopener noreferrer">`,
+          link_end: '</a>',
+        },
+        false,
+      );
+    },
     roleDropdownHelpText() {
       return sprintf(
         s__(
@@ -212,6 +230,10 @@ export default {
 </script>
 <template>
   <form name="eks-cluster-configuration-form">
+    <h2>
+      {{ s__('ClusterIntegration|Enter the details for your Amazon EKS Kubernetes cluster') }}
+    </h2>
+    <p v-html="kubernetesIntegrationHelpText"></p>
     <div class="form-group">
       <label class="label-bold" for="eks-cluster-name">{{
         s__('ClusterIntegration|Kubernetes cluster name')
diff --git a/app/assets/javascripts/create_cluster/eks_cluster/index.js b/app/assets/javascripts/create_cluster/eks_cluster/index.js
index 77454a2bc00..1f595e9b2df 100644
--- a/app/assets/javascripts/create_cluster/eks_cluster/index.js
+++ b/app/assets/javascripts/create_cluster/eks_cluster/index.js
@@ -5,25 +5,22 @@ import createStore from './store';
 
 Vue.use(Vuex);
 
-export default () =>
-  new Vue({
-    el: '.js-create-eks-cluster-form-container',
+export default el => {
+  const { gitlabManagedClusterHelpPath, kubernetesIntegrationHelpPath } = el.dataset;
+
+  return new Vue({
+    el,
     store: createStore(),
     components: {
       CreateEksCluster,
     },
-    data() {
-      const { gitlabManagedClusterHelpPath } = document.querySelector(this.$options.el).dataset;
-
-      return {
-        gitlabManagedClusterHelpPath,
-      };
-    },
     render(createElement) {
       return createElement('create-eks-cluster', {
         props: {
-          gitlabManagedClusterHelpPath: this.gitlabManagedClusterHelpPath,
+          gitlabManagedClusterHelpPath,
+          kubernetesIntegrationHelpPath,
         },
       });
     },
   });
+};