Add existing cluster form - FE and CSS

Add GKE, Login - HTML & CSS
Cluster details - HTML & CSS

10 files changed, 56 insertions, 36 deletions

diff --git a/app/views/layouts/nav/sidebar/_project.html.haml b/app/views/layouts/nav/sidebar/_project.html.haml
index 2ce960df13c..ff638f17ffc 100644
--- a/app/views/layouts/nav/sidebar/_project.html.haml
+++ b/app/views/layouts/nav/sidebar/_project.html.haml
@@ -154,7 +154,7 @@
               CI / CD
 
           %ul.sidebar-sub-level-items
-            = nav_link(controller: [:pipelines, :builds, :jobs, :pipeline_schedules, :environments, :artifacts], html_options: { class: "fly-out-top-item" } ) do
+            = nav_link(controller: [:pipelines, :builds, :jobs, :pipeline_schedules, :environments, :artifacts, :clusters, :kubernetes, :gcp], html_options: { class: "fly-out-top-item" } ) do
               = link_to project_pipelines_path(@project) do
                 %strong.fly-out-top-item-name
                   #{ _('CI / CD') }
@@ -183,18 +183,18 @@
                   %span
                     Environments
 
+            - if project_nav_tab? :clusters
+              = nav_link(controller: [:clusters, :kubernetes, :gcp]) do
+                = link_to project_clusters_path(@project), title: 'Cluster', class: 'shortcuts-cluster' do
+                  %span
+                    Cluster
+
             - if @project.feature_available?(:builds, current_user) && !@project.empty_repo?
               = nav_link(path: 'pipelines#charts') do
                 = link_to charts_project_pipelines_path(@project), title: 'Charts', class: 'shortcuts-pipelines-charts' do
                   %span
                     Charts
 
-            - if project_nav_tab? :clusters
-              = nav_link(controller: :clusters) do
-                = link_to project_clusters_path(@project), title: 'Cluster', class: 'shortcuts-cluster' do
-                  %span
-                    Cluster
-
       - if project_nav_tab? :wiki
         = nav_link(controller: :wikis) do
           = link_to get_project_wiki_path(@project), class: 'shortcuts-wiki' do
diff --git a/app/views/projects/clusters/_dropdown.html.haml b/app/views/projects/clusters/_dropdown.html.haml
index f34d0c05746..55bf4d44d3e 100644
--- a/app/views/projects/clusters/_dropdown.html.haml
+++ b/app/views/projects/clusters/_dropdown.html.haml
@@ -1,13 +1,14 @@
 %h4.prepend-top-0= s_('ClusterIntegration|Choose how to set up cluster integration')
 
 .dropdown
-  %button.dropdown-toggle.form-control{ type: 'button', data: { toggle: 'dropdown' }, "aria-haspopup": true, "aria-expanded": false }
-    = dropdown_text
-    %span.caret
-  %ul.dropdown-menu
+  %button.dropdown-menu-toggle.dropdown-menu-full-width{ type: 'button', data: { toggle: 'dropdown' }, "aria-haspopup": true, "aria-expanded": false }
+    %span.dropdown-toggle-text
+      = dropdown_text
+    = icon('chevron-down')
+  %ul.dropdown-menu.clusters-dropdown-menu.dropdown-menu-full-width
     %li
       %a{ href: providers_gcp_new_namespace_project_clusters_path(@project.namespace, @project) }
         = s_('ClusterIntegration| Create cluster on Google Engine')
     %li
-      %a{ href: platforms_kubernetes_new_namespace_project_clusters_path(@project.namespace, @project)}
+      %a{ href: platforms_kubernetes_new_namespace_project_clusters_path(@project.namespace, @project) }
         = s_('ClusterIntegration| Add existing cluster')
diff --git a/app/views/projects/clusters/_form.html.haml b/app/views/projects/clusters/_form.html.haml
index 0f1f18b662b..894dde9eeba 100644
--- a/app/views/projects/clusters/_form.html.haml
+++ b/app/views/projects/clusters/_form.html.haml
@@ -1,4 +1,4 @@
-.form_group.append-bottom-20
+.form-group
   %label.append-bottom-10{ for: 'cluster-name' }
     = s_('ClusterIntegration|Cluster name')
   .input-group
@@ -11,11 +11,23 @@
   = field.fields_for :platform_kubernetes, @cluster.platform_kubernetes do |platform_kubernetes_field|
     .form-group
       = platform_kubernetes_field.label :api_url, s_('ClusterIntegration|API URL')
-      = platform_kubernetes_field.text_field :api_url, class: 'form-control', disabled: @cluster.managed?
+      = platform_kubernetes_field.text_field :api_url, class: 'form-control', placeholder: s_('ClusterIntegration|API URL'), disabled: @cluster.managed?
+
+    .form-group
+      = platform_kubernetes_field.label :ca_cert, s_('ClusterIntegration|CA Certificate')
+      = platform_kubernetes_field.text_area :ca_cert, class: 'form-control', placeholder: s_('ClusterIntegration|Certificate Authority bundle (PEM format)'), disabled: @cluster.managed?
 
     .form-group
       = platform_kubernetes_field.label :namespace, s_('ClusterIntegration|Project namespace (optional, unique)')
-      = platform_kubernetes_field.text_field :namespace, class: 'form-control', placeholder: Clusters::Platforms::Kubernetes.namespace_for_project(@project), disabled: @cluster.managed?
+      = platform_kubernetes_field.text_field :namespace, class: 'form-control', placeholder: s_('ClusterIntegration|Project namespace'), disabled: @cluster.managed?
+
+    .form-group
+      = platform_kubernetes_field.label :token, s_('ClusterIntegration|Token')
+      .input-group
+        = platform_kubernetes_field.text_field :token, class: 'form-control js-cluster-token', type: 'password', placeholder: s_('ClusterIntegration|Token'), disabled: @cluster.managed?
+        %span.input-group-addon.clipboard-addon
+          %button.js-show-cluster-token.btn-blank{ type: 'button' }
+            = s_('ClusterIntegration|Show')
 
     .form-group
-      = field.submit s_('ClusterIntegration|Save cluster'), class: 'btn btn-save'
+      = field.submit s_('ClusterIntegration|Save changes'), class: 'btn btn-save'
diff --git a/app/views/projects/clusters/gcp/_form.html.haml b/app/views/projects/clusters/gcp/_form.html.haml
index 214e2d1c693..4df3f2c8306 100644
--- a/app/views/projects/clusters/gcp/_form.html.haml
+++ b/app/views/projects/clusters/gcp/_form.html.haml
@@ -1,15 +1,19 @@
 
-= form_for @cluster, url: providers_gcp_namespace_project_clusters_path(@project.namespace, @project), as: :cluster do |field|
+%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 cluster integration.').html_safe % { link_to_help_page: link_to_help_page}
+
+= form_for @cluster, html: { class: 'prepend-top-20' }, url: providers_gcp_namespace_project_clusters_path(@project.namespace, @project), as: :cluster do |field|
   = form_errors(@cluster)
   .form-group
     = field.label :name, s_('ClusterIntegration|Cluster name')
-    = field.text_field :name, class: 'form-control'
+    = field.text_field :name, class: 'form-control', placeholder: s_('ClusterIntegration|Cluster name')
 
   = field.fields_for :provider_gcp, @cluster.provider_gcp do |provider_gcp_field|
     .form-group
       = provider_gcp_field.label :gcp_project_id, s_('ClusterIntegration|Google Cloud Platform project ID')
       = link_to(s_('ClusterIntegration|See your projects'), 'https://console.cloud.google.com/home/dashboard', target: '_blank', rel: 'noopener noreferrer')
-      = provider_gcp_field.text_field :gcp_project_id, class: 'form-control'
+      = provider_gcp_field.text_field :gcp_project_id, class: 'form-control', placeholder: s_('ClusterIntegration|Project ID')
 
     .form-group
       = provider_gcp_field.label :zone, s_('ClusterIntegration|Zone')
diff --git a/app/views/projects/clusters/_header.html.haml b/app/views/projects/clusters/gcp/_header.html.haml
index 36452381343..cddb53c2688 100644
--- a/app/views/projects/clusters/_header.html.haml
+++ b/app/views/projects/clusters/gcp/_header.html.haml
@@ -1,4 +1,4 @@
-%h4
+%h4.prepend-top-20
   = s_('ClusterIntegration|Enter the details for your cluster')
 %p
   = s_('ClusterIntegration|Please make sure that your Google account meets the following requirements:')
diff --git a/app/views/projects/clusters/gcp/login.html.haml b/app/views/projects/clusters/gcp/login.html.haml
index 978adc12ca0..790ba61fd86 100644
--- a/app/views/projects/clusters/gcp/login.html.haml
+++ b/app/views/projects/clusters/gcp/login.html.haml
@@ -5,7 +5,8 @@
   .col-sm-4
     = render 'projects/clusters/sidebar'
   .col-sm-8
-    = render 'projects/clusters/header'
+    = render 'projects/clusters/dropdown', dropdown_text: s_('ClusterIntegration|Create cluster on Google Container Engine')
+    = render 'header'
 .row
   .col-sm-8.col-sm-offset-4.signin-with-google
     - if @authorize_url
diff --git a/app/views/projects/clusters/gcp/new.html.haml b/app/views/projects/clusters/gcp/new.html.haml
index 7de53b24199..9a79480c82f 100644
--- a/app/views/projects/clusters/gcp/new.html.haml
+++ b/app/views/projects/clusters/gcp/new.html.haml
@@ -6,5 +6,5 @@
     = render 'projects/clusters/sidebar'
   .col-sm-8
     = render 'projects/clusters/dropdown', dropdown_text: s_('ClusterIntegration|Create cluster on Google Container Engine')
-    = render 'projects/clusters/header'
+    = render 'header'
     = render 'form'
diff --git a/app/views/projects/clusters/kubernetes/_form.html.haml b/app/views/projects/clusters/kubernetes/_form.html.haml
index 22a6a16540e..17ad499079f 100644
--- a/app/views/projects/clusters/kubernetes/_form.html.haml
+++ b/app/views/projects/clusters/kubernetes/_form.html.haml
@@ -1,25 +1,21 @@
 = form_for @cluster, url: platforms_kubernetes_namespace_project_clusters_path(@project.namespace, @project), as: :cluster do |field|
   = form_errors(@cluster)
-  .form-group
-    = field.label :name, s_('ClusterIntegration|Cluster name')
-    = field.text_field :name, class: 'form-control'
-
   = field.fields_for :platform_kubernetes, @cluster.platform_kubernetes do |platform_kubernetes_field|
     .form-group
       = platform_kubernetes_field.label :api_url, s_('ClusterIntegration|API URL')
-      = platform_kubernetes_field.text_field :api_url, class: 'form-control'
+      = platform_kubernetes_field.text_field :api_url, class: 'form-control', placeholder: s_('ClusterIntegration|API URL')
 
     .form-group
-      = platform_kubernetes_field.label :token, s_('ClusterIntegration|Token')
-      = platform_kubernetes_field.text_field :token, class: 'form-control'
+      = platform_kubernetes_field.label :ca_cert, s_('ClusterIntegration|CA Certificate')
+      = platform_kubernetes_field.text_area :ca_cert, class: 'form-control', placeholder: s_('ClusterIntegration|Certificate Authority bundle (PEM format)')
 
     .form-group
-      = platform_kubernetes_field.label :ca_cert, s_('ClusterIntegration|Token')
-      = platform_kubernetes_field.text_field :ca_cert, class: 'form-control'
+      = platform_kubernetes_field.label :namespace, s_('ClusterIntegration|Project namespace (optional, unique)')
+      = platform_kubernetes_field.text_field :namespace, class: 'form-control', placeholder: s_('ClusterIntegration|Project namespace')
 
     .form-group
-      = platform_kubernetes_field.label :namespace, s_('ClusterIntegration|Project namespace (optional, unique)')
-      = platform_kubernetes_field.text_field :namespace, class: 'form-control', placeholder: Clusters::Platforms::Kubernetes.namespace_for_project(@project)
+      = platform_kubernetes_field.label :token, s_('ClusterIntegration|Token')
+      = platform_kubernetes_field.text_field :token, class: 'form-control', placeholder: s_('ClusterIntegration|Service token')
 
     .form-group
-      = field.submit s_('ClusterIntegration|Create cluster'), class: 'btn btn-save'
+      = field.submit s_('ClusterIntegration|Add cluster'), class: 'btn btn-save'
diff --git a/app/views/projects/clusters/kubernetes/_header.html.haml b/app/views/projects/clusters/kubernetes/_header.html.haml
new file mode 100644
index 00000000000..06ac210a06d
--- /dev/null
+++ b/app/views/projects/clusters/kubernetes/_header.html.haml
@@ -0,0 +1,5 @@
+%h4.prepend-top-20
+  = s_('ClusterIntegration|Enter the details for your cluster')
+%p
+  - link_to_help_page = link_to(s_('ClusterIntegration|documentation'), help_page_path('user/project/clusters/index'), target: '_blank', rel: 'noopener noreferrer')
+  = s_('ClusterIntegration|Please enter access information for your cluster. If you need help, you can read our %{link_to_help_page} on clusters').html_safe % { link_to_help_page: link_to_help_page }
diff --git a/app/views/projects/clusters/kubernetes/new.html.haml b/app/views/projects/clusters/kubernetes/new.html.haml
index 72f0e772b9c..ba2721ceb9a 100644
--- a/app/views/projects/clusters/kubernetes/new.html.haml
+++ b/app/views/projects/clusters/kubernetes/new.html.haml
@@ -6,5 +6,6 @@
     = render 'projects/clusters/sidebar'
   .col-sm-8
     = render 'projects/clusters/dropdown', dropdown_text: s_('ClusterIntegration|Add existing cluster')
-    = render 'projects/clusters/header'
-    = render 'form'
+    = render 'header'
+    .prepend-top-20
+      = render 'form'