Added awRequiredWhen directive. Make fields required only when an expression evaluates to true. Used on Permissions detail page to toggle Project required attribute based on permission type.

awx/ui/static/css/ansible-ui.css

@@ -520,6 +520,10 @@
   text-rendering: optimizeLegibility;
 }
 
-#form-modal-body, #password-body {
+.modal-body {
   padding-top: 30px;
 }
+
+#prompt-modal .modal-body {
+  padding-bottom: 30px;
+}

awx/ui/static/js/controllers/Jobs.js

@@ -41,7 +41,7 @@ function JobsListCtrl ($scope, $rootScope, $location, $log, $routeParams, Rest,
     if ($routeParams['inventory__int']) {
        scope[list.iterator + 'SearchField'] = 'inventory'; 
        scope[list.iterator + 'SearchValue'] = $routeParams['inventory__int'];
-       scope[list.iterator + 'SearchFieldLabel'] = 'Inventory';
+       scope[list.iterator + 'SearchFieldLabel'] = 'Inventory ID';
     }
     scope.search(list.iterator);
 

awx/ui/static/js/controllers/Permissions.js

@@ -78,8 +78,12 @@ function PermissionsAdd ($scope, $rootScope, $compile, $location, $log, $routePa
    generator.reset();
    LoadBreadCrumbs();
    
+   scope['inventoryrequired'] = true;
+   scope['projectrequired'] = false;
    scope.category = 'Inventory';
    master.category = 'Inventory';
+   master.inventoryrequired = true;
+   master.projectrequired = false
 
    LookUpInit({
       scope: scope,
@@ -123,6 +127,15 @@ function PermissionsAdd ($scope, $rootScope, $compile, $location, $log, $routePa
           scope[fld] = master[fld];
       }
       };
+
+   scope.selectCategory = function() {
+       if (scope.category == 'Inventory') {
+          scope.projectrequired = false;
+       }
+       else {
+          scope.projectrequired = true;
+       }
+       }
 }
 
 PermissionsAdd.$inject = [ '$scope', '$rootScope', '$compile', '$location', '$log', '$routeParams', 'PermissionsForm', 
@@ -225,6 +238,16 @@ function PermissionsEdit ($scope, $rootScope, $compile, $location, $log, $routeP
       }
       };
 
+
+   scope.selectCategory = function() {
+       if (scope.category == 'Inventory') {
+          scope.projectrequired = false;
+       }
+       else {
+          scope.projectrequired = true;
+       }
+       }
+
 }
 
 PermissionsEdit.$inject = [ '$scope', '$rootScope', '$compile', '$location', '$log', '$routeParams', 'PermissionsForm', 

awx/ui/static/js/forms/Permissions.js

@@ -51,8 +51,7 @@ angular.module('PermissionFormDefinition', [])
                 sourceField: 'name',
                 ngShow: "category == 'Deploy'",
                 ngClick: 'lookUpProject()',
-                addRequired: false,
+                awRequiredWhen: { variable: "projectrequired", init: "false" }
-                editRequired: false
                 },
             inventory: {
                 label: 'Inventory',
@@ -60,8 +59,7 @@ angular.module('PermissionFormDefinition', [])
                 sourceModel: 'inventory',
                 sourceField: 'name',
                 ngClick: 'lookUpInventory()',
-                addRequired: false,
+                awRequiredWhen: {variable: "inventoryrequired", init: "true" }
-                editRequired: false
                 },
             permission_type: {
                 label: 'Permission',

awx/ui/static/js/lists/Permissions.js

@@ -46,7 +46,7 @@ angular.module('PermissionListDefinition', [])
                 icon: 'icon-plus',
                 label: 'Add',
                 mode: 'all',             // One of: edit, select, all
-                ngClick: 'createPermission()',
+                ngClick: 'addPermission()',
                 "class": 'btn-success btn-small',
                 awToolTip: 'Add a new permission'
                 }

awx/ui/static/lib/ansible/directives.js

@@ -94,6 +94,48 @@ angular.module('AWDirectives', ['RestServices'])
         }
         })
   
+    //
+    // awRequiredWhen: { variable: "<variable to watch for true|false>", init:"true|false" }
+    //
+    // Make a field required conditionally using a scope variable. If the scope variable is true, the
+    // field will be required. Otherwise, the required attribute will be removed. 
+    //  
+    .directive('awRequiredWhen', function() {
+        return {
+        require: 'ngModel',
+        link: function(scope, elm, attrs, ctrl) {
+            
+            function checkIt () {
+               var viewValue = elm.val();
+               validity = true;
+               if ( scope[attrs.awRequiredWhen] && (elm.attr('required') == null || elm.attr('required') == undefined) ) {
+                  $(elm).attr('required','required');
+               }
+               else if (!scope[attrs.awRequiredWhen]) {
+                  elm.removeAttr('required'); 
+               }
+               if (scope[attrs.awRequiredWhen] && (viewValue == undefined || viewValue == null || viewValue == '')) {
+                  validity = false;
+               }
+               ctrl.$setValidity('required', validity);
+               }
+            
+            scope[attrs.awRequiredWhen] = attrs.awrequiredInit;
+            checkIt();
+            
+            scope.$watch(attrs.awRequiredWhen, function() {
+                // watch for the aw-required-when expression to change value
+                checkIt();
+                });
+
+            scope.$watch($(elm).attr('name'), function() {
+                // watch for the field to change value
+                checkIt();
+                });
+            }
+        }
+        })
+
     // lookup   Validate lookup value against API
     //           
     .directive('awlookup', ['Rest', function(Rest) {

awx/ui/static/lib/ansible/form-generator.js

@@ -173,6 +173,8 @@ angular.module('FormGenerator', ['GeneratorHelpers'])
                 html += (field.awPassMatch) ? "awpassmatch=\"" + field.associated + "\" " : "";
                 html += (field.capitalize) ? "capitalize " : "";
                 html += (field.ask) ? "ng-disabled=\"" + fld + "_ask\" " : "";
+                html += (field.awRequiredWhen) ? "data-awrequired-init=\"" + field.awRequiredWhen.init + "\" aw-required-when=\"" +
+                    field.awRequiredWhen.variable + "\" " : "";
                 html += (field.associated && this.form.fields[field.associated].ask) ? "ng-disabled=\"" + field.associated + "_ask\" " : "";
                 html += "/>";
                 if (field.clear) {
@@ -193,7 +195,8 @@ angular.module('FormGenerator', ['GeneratorHelpers'])
                 }
                 html += "<br />\n";
                 // Add error messages
-                if ( (options.mode == 'add' && field.addRequired) || (options.mode == 'edit' && field.editRequired) ) {
+                if ( (options.mode == 'add' && field.addRequired) || (options.mode == 'edit' && field.editRequired) ||
+                     field.awRequiredWhen ) {
                    html += "<span class=\"error\" ng-show=\"" + this.form.name + '_form.' + fld + ".$dirty && " + 
                    this.form.name + '_form.' + fld + ".$error.required\">A value is required!</span>\n";
                 }
@@ -435,11 +438,13 @@ angular.module('FormGenerator', ['GeneratorHelpers'])
           html += (field.id) ? this.attr(field,'id') : "";
           html += (field.placeholder) ? this.attr(field,'placeholder') : "";
           html += (options.mode == 'edit' && field.editRequired) ? "required " : "";
-          html += (options.mode == 'add' && field.addRequired) ? "required " : "";
+          html += (field.awRequiredWhen) ? "data-awrequired-init=\"" + field.awRequiredWhen.init + "\" aw-required-when=\"" +
+              field.awRequiredWhen.variable + "\" " : "";
           html += " awlookup />\n";
           html += "</div><br />\n";
           // Add error messages
-          if ( (options.mode == 'add' && field.addRequired) || (options.mode == 'edit' && field.editRequired) ) {
+          if ( (options.mode == 'add' && field.addRequired) || (options.mode == 'edit' && field.editRequired) ||
+               field.awRequiredWhen ) {
              html += "<span class=\"error\" ng-show=\"" + this.form.name + '_form.' + 
                  field.sourceModel + '_' + field.sourceField  + ".$dirty && " + 
                  this.form.name + '_form.' + field.sourceModel + '_' + field.sourceField + 

awx/ui/static/lib/ansible/generator-helpers.js

@@ -55,9 +55,6 @@ angular.module('GeneratorHelpers', ['GeneratorHelpers'])
             case 'dataPlacement':
                result = "data-placement=\"" + obj[key] + "\" ";
                break;
-            case 'awToolTip':
-                result = "aw-tool-tip=\"" + obj[key] + "\" ";
-                break;
             default: 
                result = key + "=\"" + obj[key] + "\" ";
         }