Merge branch 'eks-cluster-form-help-text' into 'master'

EKS Clusters: Select cloud provider buttons

See merge request gitlab-org/gitlab!18608

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>
+  <div class="js-create-eks-cluster">
     <eks-cluster-configuration-form
       :gitlab-managed-cluster-help-path="gitlabManagedClusterHelpPath"
+      :kubernetes-integration-help-path="kubernetesIntegrationHelpPath"
     />
+  </div>
 </template>

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')

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,
         },
       });
     },
   });
+};

app/assets/javascripts/pages/projects/clusters/new/index.js

 document.addEventListener('DOMContentLoaded', () => {
   if (gon.features.createEksClusters) {
     import(/* webpackChunkName: 'eks_cluster' */ '~/create_cluster/eks_cluster')
-      .then(({ default: initCreateEKSCluster }) => initCreateEKSCluster())
+      .then(({ default: initCreateEKSCluster }) => {
+        const el = document.querySelector('.js-create-eks-cluster-form-container');
+
+        if (el) {
+          initCreateEKSCluster(el);
+        }
+      })
       .catch(() => {});
   }
 });

app/views/clusters/clusters/cloud_providers/_cloud_provider_button.html.haml

@@ -3,6 +3,6 @@
 - label = local_assigns.fetch(:label)
 
 = link_to clusterable.new_path(provider: provider), class: 'btn gl-button btn-outline flex-fill d-inline-flex flex-column mr-3 justify-content-center align-items-center' do
-  = image_tag logo_path, alt: label, class: 'gl-w-13 gl-h-13'
+  .svg-content= image_tag logo_path, alt: label, class: 'gl-w-13 gl-h-13'
   %span
     = label

app/views/clusters/clusters/cloud_providers/_cloud_provider_selector.html.haml

@@ -6,6 +6,6 @@
     = create_cluster_label
   .d-flex
     = render partial: 'clusters/clusters/cloud_providers/cloud_provider_button',
-      locals: { provider: 'gke', label: gke_label, logo_path: '' }
+      locals: { provider: 'eks', label: eks_label, logo_path: 'illustrations/logos/amazon_eks.svg' }
     = render partial: 'clusters/clusters/cloud_providers/cloud_provider_button',
-      locals: { provider: 'eks', label: eks_label, logo_path: '' }
+      locals: { provider: 'gke', label: gke_label, logo_path: 'illustrations/logos/google_gke.svg' }

app/views/clusters/clusters/eks/_index.html.haml

-.js-create-eks-cluster-form-container{ data: { 'gitlab-managed-cluster-help-path' => help_page_path('user/project/clusters/index.md', anchor: 'gitlab-managed-clusters') } }
+.js-create-eks-cluster-form-container{ data: { 'gitlab-managed-cluster-help-path' => help_page_path('user/project/clusters/index.md', anchor: 'gitlab-managed-clusters'),
+'kubernetes-integration-help-path' => help_page_path('user/project/clusters/index') } }

app/views/clusters/clusters/gcp/_form.html.haml

@@ -3,13 +3,12 @@
 - zones_link_url = 'https://cloud.google.com/compute/docs/regions-zones/regions-zones'
 - machine_type_link_url = 'https://cloud.google.com/compute/docs/machine-types'
 - pricing_link_url = 'https://cloud.google.com/compute/pricing#machinetype'
+- kubernetes_integration_url = help_page_path('user/project/clusters/index')
 - help_link_start = '<a href="%{url}" target="_blank" rel="noopener noreferrer">'.html_safe
 - help_link_end = ' %{external_link_icon}</a>'.html_safe % { external_link_icon: external_link_icon }
 
 %p
-  - link_to_help_page = link_to(s_('ClusterIntegration|help page'),
-    help_page_path('user/project/clusters/index'), target: '_blank', rel: 'noopener noreferrer')
-  = s_('ClusterIntegration|Read our %{link_to_help_page} on Kubernetes cluster integration.').html_safe % { link_to_help_page: link_to_help_page }
+  = s_('ClusterIntegration|Read our %{link_start}help page%{link_end} on Kubernetes cluster integration.').html_safe % { link_start: help_link_start % { url: kubernetes_integration_url }, link_end: '</a>'.html_safe }
 
 %p= link_to('Select a different Google account', @authorize_url)
 

app/views/clusters/clusters/gcp/_gcp_not_configured.html.haml

+- documentation_link_start = '<a href="%{url}" target="_blank" rel="noopener noreferrer">'.html_safe % { url: help_page_path("integration/google") }
+- link_end = '<a/>'.html_safe
+= s_('Google authentication is not %{link_start}property configured%{link_end}. Ask your GitLab administrator if you want to use this service.').html_safe % { link_start: documentation_link_start, link_end: link_end }

app/views/clusters/clusters/gcp/_signin_with_google_button.html.haml

+.signin-with-google
+  - create_account_link = '<a href="%{url}" target="_blank" rel="noopener noreferrer">'.html_safe % { url: 'https://accounts.google.com/SignUpWithoutGmail?service=cloudconsole&continue=https%3A%2F%2Fconsole.cloud.google.com%2Ffreetrial%3Futm_campaign%3D2018_cpanel%26utm_source%3Dgitlab%26utm_medium%3Dreferral' }
+  = link_to(image_tag('auth_buttons/signin_with_google.png', width: '191px', alt: _('Sign in with Google')), @authorize_url)
+  = s_('or %{link_start}create a new Google account%{link_end}').html_safe % { link_start: create_account_link, link_end: '</a>'.html_safe }

app/views/clusters/clusters/new.html.haml

@@ -2,7 +2,9 @@
 - page_title _('Kubernetes Cluster')
 - create_eks_enabled = Feature.enabled?(:create_eks_clusters)
 - active_tab = local_assigns.fetch(:active_tab, 'create')
-- link_end = '<a/>'.html_safe
+- create_on_gke_tab_label = s_('ClusterIntegration|Create new Cluster on GKE')
+- create_on_eks_tab_label = s_('ClusterIntegration|Create new Cluster on EKS')
+- create_new_cluster_label = s_('ClusterIntegration|Create new Cluster')
 = javascript_include_tag 'https://apis.google.com/js/api.js'
 
 = render_gcp_signup_offer
@@ -14,7 +16,16 @@
     %ul.nav-links.nav-tabs.gitlab-tabs.nav{ role: 'tablist' }
       %li.nav-item{ role: 'presentation' }
         %a.nav-link{ href: '#create-cluster-pane', id: 'create-cluster-tab', class: active_when(active_tab == 'create'), data: { toggle: 'tab' }, role: 'tab' }
-          %span Create new Cluster on GKE
+          %span
+            - if create_eks_enabled
+              - if @gke_selected
+                = create_on_gke_tab_label
+              - elsif @eks_selected
+                = create_on_eks_tab_label
+              - else
+                = create_new_cluster_label
+            - else
+              = create_on_gke_tab_label
       %li.nav-item{ role: 'presentation' }
         %a.nav-link{ href: '#add-cluster-pane', id: 'add-cluster-tab', class: active_when(active_tab == 'add'), data: { toggle: 'tab' }, role: 'tab' }
           %span Add existing cluster
@@ -22,9 +33,14 @@
     .tab-content.gitlab-tab-content
       - if create_eks_enabled
         .tab-pane{ id: 'create-cluster-pane', class: active_when(active_tab == 'create'), role: 'tabpanel' }
-          - if @gke_selected && @valid_gcp_token
+          - if @gke_selected
             = render 'clusters/clusters/gcp/header'
+            - if @valid_gcp_token
               = render 'clusters/clusters/gcp/form'
+            - elsif @authorize_url
+              = render 'clusters/clusters/gcp/signin_with_google_button'
+            - else
+              = render 'clusters/clusters/gcp/gcp_not_configured'
           - elsif @eks_selected
             = render 'clusters/clusters/eks/index'
           - else
@@ -35,13 +51,9 @@
           - if @valid_gcp_token
             = render 'clusters/clusters/gcp/form'
           - elsif @authorize_url
-            .signin-with-google
-              - create_account_link = '<a href="%{url}" target="_blank" rel="noopener noreferrer">'.html_safe % { url: 'https://accounts.google.com/SignUpWithoutGmail?service=cloudconsole&continue=https%3A%2F%2Fconsole.cloud.google.com%2Ffreetrial%3Futm_campaign%3D2018_cpanel%26utm_source%3Dgitlab%26utm_medium%3Dreferral' }
-              = link_to(image_tag('auth_buttons/signin_with_google.png', width: '191px', alt: _('Sign in with Google')), @authorize_url)
-              = s_('or %{link_start}create a new Google account%{link_end}').html_safe % { link_start: create_account_link, link_end: link_end }
+            = render 'clusters/clusters/gcp/signin_with_google_button'
           - else
-            - documentation_link_start = '<a href="%{url}" target="_blank" rel="noopener noreferrer">'.html_safe % { url: help_page_path("integration/google") }
-            = s_('Google authentication is not %{link_start}property configured%{link_end}. Ask your GitLab administrator if you want to use this service.').html_safe % { link_start: documentation_link_start, link_end: link_end }
+            = render 'clusters/clusters/gcp/gcp_not_configured'
 
       .tab-pane{ id: 'add-cluster-pane', class: active_when(active_tab == 'add'), role: 'tabpanel' }
         = render 'clusters/clusters/user/header'

locale/gitlab.pot

@@ -3528,6 +3528,15 @@ msgstr ""
 msgid "ClusterIntegration|Create cluster on"
 msgstr ""
 
+msgid "ClusterIntegration|Create new Cluster"
+msgstr ""
+
+msgid "ClusterIntegration|Create new Cluster on EKS"
+msgstr ""
+
+msgid "ClusterIntegration|Create new Cluster on GKE"
+msgstr ""
+
 msgid "ClusterIntegration|Did you know?"
 msgstr ""
 
@@ -3540,6 +3549,9 @@ msgstr ""
 msgid "ClusterIntegration|Enable this setting if using role-based access control (RBAC)."
 msgstr ""
 
+msgid "ClusterIntegration|Enter the details for your Amazon EKS Kubernetes cluster"
+msgstr ""
+
 msgid "ClusterIntegration|Enter the details for your Kubernetes cluster"
 msgstr ""
 
@@ -3801,7 +3813,7 @@ msgstr ""
 msgid "ClusterIntegration|RBAC-enabled cluster"
 msgstr ""
 
-msgid "ClusterIntegration|Read our %{link_to_help_page} on Kubernetes cluster integration."
+msgid "ClusterIntegration|Read our %{link_start}help page%{link_end} on Kubernetes cluster integration."
 msgstr ""
 
 msgid "ClusterIntegration|Region"
@@ -4017,9 +4029,6 @@ msgstr ""
 msgid "ClusterIntegration|documentation"
 msgstr ""
 
-msgid "ClusterIntegration|help page"
-msgstr ""
-
 msgid "ClusterIntegration|installed via %{installed_via}"
 msgstr ""
 

spec/features/projects/clusters/eks_spec.rb

+# frozen_string_literal: true
+
+require 'spec_helper'
+
+describe 'AWS EKS Cluster', :js do
+  let(:project) { create(:project) }
+  let(:user) { create(:user) }
+
+  before do
+    project.add_maintainer(user)
+    gitlab_sign_in(user)
+    allow(Projects::ClustersController).to receive(:STATUS_POLLING_INTERVAL) { 100 }
+  end
+
+  context 'when user does not have a cluster and visits cluster index page' do
+    let(:project_id) { 'test-project-1234' }
+
+    before do
+      visit project_clusters_path(project)
+
+      click_link 'Add Kubernetes cluster'
+    end
+
+    context 'when user creates a cluster on AWS EKS' do
+      before do
+        click_link 'Amazon EKS'
+      end
+
+      it 'user sees a form to create an EKS cluster' do
+        expect(page).to have_selector(:css, '.js-create-eks-cluster')
+      end
+    end
+  end
+end

spec/features/projects/clusters/gcp_spec.rb

@@ -177,6 +177,7 @@ describe 'Gcp Cluster', :js do
 
   context 'when user has not dismissed GCP signup offer' do
     before do
+      stub_feature_flags(create_eks_clusters: false)
       visit project_clusters_path(project)
     end
 
@@ -200,6 +201,7 @@ describe 'Gcp Cluster', :js do
 
   context 'when user has dismissed GCP signup offer' do
     before do
+      stub_feature_flags(create_eks_clusters: false)
       visit project_clusters_path(project)
     end
 

spec/features/projects/clusters_spec.rb

@@ -74,7 +74,7 @@ describe 'Clusters', :js do
         visit project_clusters_path(project)
 
         click_link 'Add Kubernetes cluster'
-        click_link 'Create new Cluster on GKE'
+        click_link 'Create new Cluster'
       end
 
       it 'user sees a link to create a GKE cluster' do

spec/frontend/create_cluster/eks_cluster/components/eks_cluster_configuration_form_spec.js

@@ -123,6 +123,7 @@ describe('EksClusterConfigurationForm', () => {
       store,
       propsData: {
         gitlabManagedClusterHelpPath: '',
+        kubernetesIntegrationHelpPath: '',
       },
     });
   });