diff options
Diffstat (limited to 'app/assets/javascripts/create_cluster/eks_cluster')
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, }, }); }, }); +}; |