Display inline validation error messages

In the new cluster forms, display form error messages
below form fields instead of a summary banner on top
of the form.

Include client side validation in order to display
user friendly error messages.

Also remove unnecessary placeholders.

4 files changed, 71 insertions, 55 deletions

diff --git a/app/assets/stylesheets/framework/forms.scss b/app/assets/stylesheets/framework/forms.scss
index 3b1d1d67509..8dd1489af4f 100644
--- a/app/assets/stylesheets/framework/forms.scss
+++ b/app/assets/stylesheets/framework/forms.scss
@@ -204,8 +204,10 @@ label {
   margin-top: #{$grid-size / 2};
 }
 
-.gl-field-error {
+.gl-field-error,
+.invalid-feedback {
   color: $red-500;
+  font-size: $gl-font-size;
 }
 
 .gl-show-field-errors {
diff --git a/app/views/clusters/clusters/gcp/_form.html.haml b/app/views/clusters/clusters/gcp/_form.html.haml
index 00582e19662..3e0f8955081 100644
--- a/app/views/clusters/clusters/gcp/_form.html.haml
+++ b/app/views/clusters/clusters/gcp/_form.html.haml
@@ -7,25 +7,27 @@
 - 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}
+  - 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 }
 
 %p= link_to('Select a different Google account', @authorize_url)
 
-= form_for @gcp_cluster, html: { class: 'js-gke-cluster-creation prepend-top-20', data: { token: token_in_session } }, url: clusterable.create_gcp_clusters_path, as: :cluster do |field|
-  = form_errors(@gcp_cluster)
-  .form-group
-    = field.label :name, s_('ClusterIntegration|Kubernetes cluster name'), class: 'label-bold'
-    = field.text_field :name, class: 'form-control', placeholder: s_('ClusterIntegration|Kubernetes cluster name')
+= bootstrap_form_for @gcp_cluster, html: { class: 'gl-show-field-errors js-gke-cluster-creation prepend-top-20',
+  data: { token: token_in_session } }, url: clusterable.create_gcp_clusters_path, as: :cluster do |field|
+  = field.text_field :name, required: true, title: s_('ClusterIntegration|Cluster name is required.'),
+    label: s_('ClusterIntegration|Kubernetes cluster name'), label_class: 'label-bold'
   - if has_multiple_clusters?
-    .form-group
-      = field.label :environment_scope, s_('ClusterIntegration|Environment scope'), class: 'label-bold'
-      = field.text_field :environment_scope, class: 'form-control', placeholder: s_('ClusterIntegration|Environment scope')
+    = field.form_group :environment_scope, label: { text: s_('ClusterIntegration|Environment scope'),
+      class: 'label-bold' } do
+      = field.text_field :environment_scope, required: true, class: 'form-control',
+        title: 'Environment scope is required.', wrapper: false
       .form-text.text-muted= s_("ClusterIntegration|Choose which of your environments will use this cluster.")
 
   = field.fields_for :provider_gcp, @gcp_cluster.provider_gcp do |provider_gcp_field|
     .form-group
-      = provider_gcp_field.label :gcp_project_id, s_('ClusterIntegration|Google Cloud Platform project'), class: 'label-bold'
+      = provider_gcp_field.label :gcp_project_id, s_('ClusterIntegration|Google Cloud Platform project'),
+        class: 'label-bold'
       .js-gcp-project-id-dropdown-entry-point{ data: { docsUrl: 'https://console.cloud.google.com/home/dashboard' } }
         = provider_gcp_field.hidden_field :gcp_project_id
         .dropdown
@@ -47,9 +49,9 @@
       %p.form-text.text-muted
         = s_('ClusterIntegration|Learn more about %{help_link_start}zones%{help_link_end}.').html_safe % { help_link_start: help_link_start % { url: zones_link_url }, help_link_end: help_link_end }
 
-    .form-group
-      = provider_gcp_field.label :num_nodes, s_('ClusterIntegration|Number of nodes'), class: 'label-bold'
-      = provider_gcp_field.text_field :num_nodes, class: 'form-control', placeholder: '3'
+    = provider_gcp_field.number_field :num_nodes, required: true, placeholder: '3',
+      title: s_('ClusterIntegration|Number of nodes must be a numerical value.'),
+      label: s_('ClusterIntegration|Number of nodes'), label_class: 'label-bold'
 
     .form-group
       = provider_gcp_field.label :machine_type, s_('ClusterIntegration|Machine type'), class: 'label-bold'
@@ -64,13 +66,14 @@
         = s_('ClusterIntegration|Learn more about %{help_link_start_machine_type}machine types%{help_link_end} and %{help_link_start_pricing}pricing%{help_link_end}.').html_safe % { help_link_start_machine_type: help_link_start % { url: machine_type_link_url }, help_link_start_pricing: help_link_start % { url: pricing_link_url }, help_link_end: help_link_end }
 
     .form-group
-      .form-check
-        = provider_gcp_field.check_box :legacy_abac, { class: 'form-check-input' }, false, true
-        = provider_gcp_field.label :legacy_abac, s_('ClusterIntegration|RBAC-enabled cluster'), class: 'form-check-label label-bold'
-        .form-text.text-muted
-          = s_('ClusterIntegration|Enable this setting if using role-based access control (RBAC).')
-          = s_('ClusterIntegration|This option will allow you to install applications on RBAC clusters.')
-          = link_to _('More information'), help_page_path('user/project/clusters/index.md', anchor: 'role-based-access-control-rbac-core-only'), target: '_blank'
+      = provider_gcp_field.check_box :legacy_abac, { label: s_('ClusterIntegration|RBAC-enabled cluster'),
+        label_class: 'label-bold' }, false, true
+      .form-text.text-muted
+        = s_('ClusterIntegration|Enable this setting if using role-based access control (RBAC).')
+        = s_('ClusterIntegration|This option will allow you to install applications on RBAC clusters.')
+        = link_to _('More information'), help_page_path('user/project/clusters/index.md',
+          anchor: 'role-based-access-control-rbac-core-only'), target: '_blank'
 
     .form-group
-      = field.submit s_('ClusterIntegration|Create Kubernetes cluster'), class: 'js-gke-cluster-creation-submit btn btn-success', disabled: true
+      = field.submit s_('ClusterIntegration|Create Kubernetes cluster'),
+        class: 'js-gke-cluster-creation-submit btn btn-success', disabled: true
diff --git a/app/views/clusters/clusters/user/_form.html.haml b/app/views/clusters/clusters/user/_form.html.haml
index 136f98d0126..bcd7f00bd7c 100644
--- a/app/views/clusters/clusters/user/_form.html.haml
+++ b/app/views/clusters/clusters/user/_form.html.haml
@@ -1,40 +1,39 @@
-= form_for @user_cluster, url: clusterable.create_user_clusters_path, as: :cluster do |field|
-  = form_errors(@user_cluster)
-  .form-group
-    = field.label :name, s_('ClusterIntegration|Kubernetes cluster name'), class: 'label-bold'
-    = field.text_field :name, class: 'form-control', placeholder: s_('ClusterIntegration|Kubernetes cluster name')
+= bootstrap_form_for @user_cluster, html: { class: 'gl-show-field-errors' },
+  url: clusterable.create_user_clusters_path, as: :cluster do |field|
+  = field.text_field :name, required: true, title: s_('ClusterIntegration|Cluster name is required.'),
+    label: s_('ClusterIntegration|Kubernetes cluster name'), label_class: 'label-bold'
   - if has_multiple_clusters?
-    .form-group
-      = field.label :environment_scope, s_('ClusterIntegration|Environment scope'), class: 'label-bold'
-      = field.text_field :environment_scope, class: 'form-control', placeholder: s_('ClusterIntegration|Environment scope')
-      .form-text.text-muted= s_("ClusterIntegration|Choose which of your environments will use this cluster.")
+    = field.form_group :environment_scope, label: { text: s_('ClusterIntegration|Environment scope'),
+      class: 'label-bold' } do
+      = field.text_field :environment_scope, required: true,
+        title: 'Environment scope is required.', wrapper: false
+      .form-text.text-muted
+        = s_("ClusterIntegration|Choose which of your environments will use this cluster.")
 
   = field.fields_for :platform_kubernetes, @user_cluster.platform_kubernetes do |platform_kubernetes_field|
-    .form-group
-      = platform_kubernetes_field.label :api_url, s_('ClusterIntegration|API URL'), class: 'label-bold'
-      = platform_kubernetes_field.text_field :api_url, class: 'form-control', placeholder: s_('ClusterIntegration|API URL')
-
-    .form-group
-      = platform_kubernetes_field.label :ca_cert, s_('ClusterIntegration|CA Certificate'), class: 'label-bold'
-      = platform_kubernetes_field.text_area :ca_cert, class: 'form-control', placeholder: s_('ClusterIntegration|Certificate Authority bundle (PEM format)')
-
-    .form-group
-      = platform_kubernetes_field.label :token, s_('ClusterIntegration|Token'), class: 'label-bold'
-      = platform_kubernetes_field.text_field :token, class: 'form-control', placeholder: s_('ClusterIntegration|Service token'), autocomplete: 'off'
+    = platform_kubernetes_field.url_field :api_url, required: true,
+      title: s_('ClusterIntegration|API URL must use http or https protocol.'),
+      label: s_('ClusterIntegration|API URL'), label_class: 'label-bold'
+    = platform_kubernetes_field.text_area :ca_cert,
+      placeholder: s_('ClusterIntegration|Certificate Authority bundle (PEM format)'),
+      label: s_('ClusterIntegration|CA Certificate'), label_class: 'label-bold'
+    = platform_kubernetes_field.text_field :token, required: true,
+      title: s_('ClusterIntegration|Service token is required.'), label: s_('ClusterIntegration|Service Token'),
+      autocomplete: 'off', label_class: 'label-bold'
 
     - if @user_cluster.allow_user_defined_namespace?
-      .form-group
-        = platform_kubernetes_field.label :namespace, s_('ClusterIntegration|Project namespace (optional, unique)'), class: 'label-bold'
-        = platform_kubernetes_field.text_field :namespace, class: 'form-control', placeholder: s_('ClusterIntegration|Project namespace')
+      = platform_kubernetes_field.text_field :namespace,
+        label: s_('ClusterIntegration|Project namespace (optional, unique)'), label_class: 'label-bold'
 
-    .form-group
-      .form-check
-        = platform_kubernetes_field.check_box :authorization_type, { class: 'form-check-input qa-rbac-checkbox' }, 'rbac', 'abac'
-        = platform_kubernetes_field.label :authorization_type, s_('ClusterIntegration|RBAC-enabled cluster'), class: 'form-check-label label-bold'
-        .form-text.text-muted
-          = s_('ClusterIntegration|Enable this setting if using role-based access control (RBAC).')
-          = s_('ClusterIntegration|This option will allow you to install applications on RBAC clusters.')
-          = link_to _('More information'), help_page_path('user/project/clusters/index.md', anchor: 'role-based-access-control-rbac-core-only'), target: '_blank'
+    = platform_kubernetes_field.form_group :authorization_type do
+      = platform_kubernetes_field.check_box :authorization_type,
+        { class: 'qa-rbac-checkbox', label: s_('ClusterIntegration|RBAC-enabled cluster'),
+        label_class: 'label-bold', inline: true }, 'rbac', 'abac'
+      .form-text.text-muted
+        = s_('ClusterIntegration|Enable this setting if using role-based access control (RBAC).')
+        = s_('ClusterIntegration|This option will allow you to install applications on RBAC clusters.')
+        = link_to _('More information'), help_page_path('user/project/clusters/index.md',
+          anchor: 'role-based-access-control-rbac-core-only'), target: '_blank'
 
     .form-group
       = field.submit s_('ClusterIntegration|Add Kubernetes cluster'), class: 'btn btn-success'
diff --git a/locale/gitlab.pot b/locale/gitlab.pot
index 1e6f04c7815..aac6a6d22be 100644
--- a/locale/gitlab.pot
+++ b/locale/gitlab.pot
@@ -1710,6 +1710,9 @@ msgstr ""
 msgid "ClusterIntegration|API URL"
 msgstr ""
 
+msgid "ClusterIntegration|API URL must use http or https protocol."
+msgstr ""
+
 msgid "ClusterIntegration|Add Kubernetes cluster"
 msgstr ""
 
@@ -1770,6 +1773,9 @@ msgstr ""
 msgid "ClusterIntegration|Choose which of your environments will use this cluster."
 msgstr ""
 
+msgid "ClusterIntegration|Cluster name is required."
+msgstr ""
+
 msgid "ClusterIntegration|Clusters are utilized by selecting the nearest ancestor with a matching environment scope. For example, project clusters will override group clusters."
 msgstr ""
 
@@ -1983,6 +1989,9 @@ msgstr ""
 msgid "ClusterIntegration|Number of nodes"
 msgstr ""
 
+msgid "ClusterIntegration|Number of nodes must be a numerical value."
+msgstr ""
+
 msgid "ClusterIntegration|Please enter access information for your Kubernetes cluster. If you need help, you can read our %{link_to_help_page} on Kubernetes"
 msgstr ""
 
@@ -2064,7 +2073,10 @@ msgstr ""
 msgid "ClusterIntegration|Select zone to choose machine type"
 msgstr ""
 
-msgid "ClusterIntegration|Service token"
+msgid "ClusterIntegration|Service Token"
+msgstr ""
+
+msgid "ClusterIntegration|Service token is required."
 msgstr ""
 
 msgid "ClusterIntegration|Show"