From 5c6147c9b9865240812042c9cf7afc5ecef59668 Mon Sep 17 00:00:00 2001
From: Anthony Lapenna <lapenna.anthony@gmail.com>
Date: Mon, 17 Aug 2020 12:27:06 +1200
Subject: [PATCH] feat(k8s/configure): review ingress UI/UX

---
 app/kubernetes/views/configure/configure.html | 34 ++++++++++++-------
 1 file changed, 22 insertions(+), 12 deletions(-)

diff --git a/app/kubernetes/views/configure/configure.html b/app/kubernetes/views/configure/configure.html
index 030f3d9be..bbd342b13 100644
--- a/app/kubernetes/views/configure/configure.html
+++ b/app/kubernetes/views/configure/configure.html
@@ -9,7 +9,7 @@
     <div class="col-sm-12">
       <rd-widget>
         <rd-widget-body>
-          <form class="form-horizontal">
+          <form class="form-horizontal" name="kubernetesClusterSetupForm">
             <div class="col-sm-12 form-section-title">
               Networking
             </div>
@@ -22,8 +22,7 @@
                   Ensure that your cloud provider allows you to create load balancers if you want to use this feature. Might incur costs.
                 </p>
               </span>
-            </div>
-            <div class="form-group">
+
               <div class="col-sm-12">
                 <label class="control-label text-left">
                   Allow users to use external load balancer
@@ -41,8 +40,7 @@
                   cluster.
                 </p>
               </span>
-            </div>
-            <div class="form-group">
+
               <div class="col-sm-12">
                 <label class="control-label text-left">
                   Allow users to use ingress
@@ -50,17 +48,29 @@
                 <label class="switch" style="margin-left: 20px;"> <input type="checkbox" ng-model="ctrl.formValues.UseIngress" /><i></i> </label>
               </div>
             </div>
+
             <div class="form-group" ng-if="ctrl.formValues.UseIngress">
               <label for="ingress_classes" class="col-sm-3 col-lg-2 control-label text-left">
-                Ingress controllers
+                Ingress classes
+                <portainer-tooltip position="bottom" message="Provide a comma separated list of all the ingress classes available in your cluster."></portainer-tooltip>
               </label>
               <div class="col-sm-9 col-lg-10">
-                <input type="text" class="form-control" id="ingress_classes" ng-model="ctrl.formValues.IngressClasses" placeholder="nginx,gce,traefik" />
+                <input
+                  type="text"
+                  class="form-control"
+                  name="ingress_classes"
+                  id="ingress_classes"
+                  ng-model="ctrl.formValues.IngressClasses"
+                  placeholder="nginx,gce,traefik"
+                  required
+                />
+              </div>
+
+              <div class="col-sm-12 small text-warning" ng-show="kubernetesClusterSetupForm.ingress_classes.$invalid">
+                <div ng-messages="kubernetesClusterSetupForm.ingress_classes.$error">
+                  <p ng-message="required"><i class="fa fa-exclamation-triangle" aria-hidden="true"></i> This field is required.</p>
+                </div>
               </div>
-              <span class="col-sm-12 text-muted small" style="margin-top: 12px;">
-                <i class="fa fa-info-circle blue-icon" aria-hidden="true" style="margin-right: 2px;"></i>
-                Once configured, ingresses can be created at the resource pool level.
-              </span>
             </div>
 
             <div class="col-sm-12 form-section-title">
@@ -167,7 +177,7 @@
                   type="submit"
                   class="btn btn-primary btn-sm"
                   ng-click="ctrl.configure()"
-                  ng-disabled="ctrl.state.actionInProgress || !ctrl.hasValidStorageConfiguration()"
+                  ng-disabled="ctrl.state.actionInProgress || !kubernetesClusterSetupForm.$valid || !ctrl.hasValidStorageConfiguration()"
                   button-spinner="ctrl.state.actionInProgress"
                 >
                   <span ng-hide="ctrl.state.actionInProgress">Save configuration</span>