From efc8991aa83daab82d3cc356efe32428dc06cf16 Mon Sep 17 00:00:00 2001
From: kialam <digitalanime@gmail.com>
Date: Mon, 6 Aug 2018 11:46:29 -0400
Subject: [PATCH] Move error message to underneath form field for consistent
 UI.

---
 awx/ui/client/src/shared/form-generator.js    | 34 ++++++-------------
 .../job_templates/job-template.form.js        |  4 +--
 2 files changed, 11 insertions(+), 27 deletions(-)

diff --git a/awx/ui/client/src/shared/form-generator.js b/awx/ui/client/src/shared/form-generator.js
index 7398d430a2..a916815bd6 100644
--- a/awx/ui/client/src/shared/form-generator.js
+++ b/awx/ui/client/src/shared/form-generator.js
@@ -684,10 +684,6 @@ angular.module('FormGenerator', [GeneratorHelpers.name, 'Utilities', listGenerat
                             html += createCheckbox(options.checkbox);
                         }
 
-                        if (options && options.helpertext) {
-                            html += createHelpertext(options.helpertext);
-                        }
-
                         if (field.labelAction) {
                             let action = field.labelAction;
                             let href = action.href || "";
@@ -1045,14 +1041,12 @@ angular.module('FormGenerator', [GeneratorHelpers.name, 'Utilities', listGenerat
                             };
                         }
 
-                        if (field.helperText) {
-                            labelOptions.helpertext = {
-                                id: `${this.form.name}_${fld}_sub_text`,
-                                ngShow: field.helperText.ngShow,
-                                ngModel: field.helperText.variable,
-                                ngClass: field.helperText.ngClass,
-                                classCondition: field.helperText.classCondition,
-                                text: field.helperText.text
+                        if (field.onError) {
+                            labelOptions.onError = {
+                                id: `${this.form.name}_${fld}_error_text`,
+                                ngShow: field.onError.ngShow,
+                                ngModel: field.onError.variable,
+                                text: field.onError.text
                             };
                         }
 
@@ -1106,7 +1100,10 @@ angular.module('FormGenerator', [GeneratorHelpers.name, 'Utilities', listGenerat
                                 }
                                 html += "</div>\n";
                         }
-                        html += "<div class=\"error api-error\" id=\"" + this.form.name + "-" + fld + "-api-error\" ng-bind=\"" + fld + "_api_error\"></div>\n";
+                        if (field.label === "Labels") {
+                            html += `<div class="error" id="${field.onError.id}" ng-show="${field.onError.ngShow}">${field.onError.text}</div>`;
+                        }
+                        
 
                         // Add help panel(s)
                         html += (field.helpCollapse) ? this.buildHelpCollapse(field.helpCollapse) : '';
@@ -2037,16 +2034,5 @@ angular.module('FormGenerator', [GeneratorHelpers.name, 'Utilities', listGenerat
                 </label> `;
         }
 
-        function createHelpertext (options) {
-            let ngModel = options.ngModel ? `ng-model="${options.ngModel}"` : '';
-            let ngShow = options.ngShow ? `ng-show="${options.ngShow}"` : '';
-            let ngClass = options.ngClass ? options.ngClass : '';
-            let classCondition = options.classCondition ? options.classCondition : '';
-
-            return `
-                <label class="at-InputLabel--helpertext" ng-class="!${classCondition} ? '${ngClass}' : ''"  ${ngShow} id="${options.id}" ${ngModel}>
-                    ${options.text}
-                </label> `;
-        }
     }
 ]);
diff --git a/awx/ui/client/src/templates/job_templates/job-template.form.js b/awx/ui/client/src/templates/job_templates/job-template.form.js
index 590140c1e8..93facc4470 100644
--- a/awx/ui/client/src/templates/job_templates/job-template.form.js
+++ b/awx/ui/client/src/templates/job_templates/job-template.form.js
@@ -229,9 +229,7 @@ function(NotificationsList, i18n) {
                     dataPlacement: 'right',
                     awPopOver: "<p>" + i18n._("Optional labels that describe this job template, such as 'dev' or 'test'. Labels can be used to group and filter job templates and completed jobs.") + "</p>",
                     dataContainer: 'body',
-                    helperText: {
-                        classCondition: 'job_template_labels_isValid === true',
-                        ngClass: 'at-InputLabel--error',
+                    onError: {
                         ngShow: 'job_template_labels_isValid !== true',
                         text: i18n._('Max 512 Characters'),
                     },