AC-697 Dynamic help on Permissions page based on Permission Type. Uses a help collapse. Added ngBind support to help collapse, allowing the controller to set a scope variable to an html string. Added a Permissions.js helper to share setting help text and other defaults whenever permission type changes.

2024-11-02 09:51:09 +03:00 · 2013-12-02 21:34:53 +00:00 · 2013-12-02 21:34:53 +00:00 · 2dd2fb95ac
commit 2dd2fb95ac
parent a21a740bad
7 changed files with 87 additions and 48 deletions
--- a/awx/ui/static/js/app.js
+++ b/awx/ui/static/js/app.js
@ -53,6 +53,7 @@ angular.module('ansible', [
    'ProjectsHelper',
    'PermissionFormDefinition',
    'PermissionListDefinition',
+    'PermissionsHelper',
    'JobsListDefinition',
    'JobFormDefinition',
    'JobEventsListDefinition',
--- a/awx/ui/static/js/controllers/Permissions.js
+++ b/awx/ui/static/js/controllers/Permissions.js
@ -77,7 +77,7 @@ PermissionsList.$inject = [ '$scope', '$rootScope', '$location', '$log', '$route
 function PermissionsAdd ($scope, $rootScope, $compile, $location, $log, $routeParams, PermissionsForm, 
                         GenerateForm, Rest, Alert, ProcessErrors, LoadBreadCrumbs, ClearScope, 
                         GetBasePath, ReturnToCaller, InventoryList, ProjectList, LookUpInit, CheckAccess,
-                         Wait) 
+                         Wait, PermissionCategoryChange) 
 {
   ClearScope('htmlTemplate');  //Garbage collection. Don't leave behind any listeners/watchers from the prior
                                //scope.
@ -100,7 +100,7 @@ function PermissionsAdd ($scope, $rootScope, $compile, $location, $log, $routePa
   scope.category = 'Inventory';
   master.category = 'Inventory';
   master.inventoryrequired = true;
-   master.projectrequired = false
+   master.projectrequired = false;
   
   LookUpInit({
      scope: scope,
@ -152,29 +152,27 @@ function PermissionsAdd ($scope, $rootScope, $compile, $location, $log, $routePa
      for (var fld in master) {
          scope[fld] = master[fld];
      }
+      scope.selectCategory();
      };
   
-   scope.selectCategory = function() {
-       if (scope.category == 'Inventory') {
-          scope.projectrequired = false;
-       }
-       else {
-          scope.projectrequired = true;
-       }
-       scope.permission_type = null;
-       }
+   scope.selectCategory = function() {  PermissionCategoryChange({ scope: scope, reset: true }); };
+       
+
+  scope.selectCategory();
+
 }

 PermissionsAdd.$inject = [ '$scope', '$rootScope', '$compile', '$location', '$log', '$routeParams', 'PermissionsForm', 
                           'GenerateForm', 'Rest', 'Alert', 'ProcessErrors', 'LoadBreadCrumbs', 'ClearScope', 'GetBasePath',
-                           'ReturnToCaller', 'InventoryList', 'ProjectList', 'LookUpInit', 'CheckAccess', 'Wait'
+                           'ReturnToCaller', 'InventoryList', 'ProjectList', 'LookUpInit', 'CheckAccess', 'Wait', 
+                           'PermissionCategoryChange'
                           ];


 function PermissionsEdit ($scope, $rootScope, $compile, $location, $log, $routeParams, PermissionsForm, 
                          GenerateForm, Rest, Alert, ProcessErrors, LoadBreadCrumbs, ReturnToCaller, 
                          ClearScope, Prompt, GetBasePath, InventoryList, ProjectList, LookUpInit, CheckAccess,
-                          Wait) 
+                          Wait, PermissionCategoryChange) 
 {
   ClearScope('htmlTemplate');  //Garbage collection. Don't leave behind any listeners/watchers from the prior
                                //scope.
@ -191,7 +189,11 @@ function PermissionsEdit ($scope, $rootScope, $compile, $location, $log, $routeP
   var master = {};
   var relatedSets = {}; 
   
-   CheckAccess({ scope: scope })
+   CheckAccess({ scope: scope });
+
+   scope.selectCategory = function(resetIn) { 
+       var reset = (resetIn == false) ? false : true;
+       PermissionCategoryChange({ scope: scope, reset: reset }); }

   // Retrieve detail record and prepopulate the form
   Rest.setUrl(defaultUrl); 
@ -216,12 +218,9 @@ function PermissionsEdit ($scope, $rootScope, $compile, $location, $log, $routeP
           scope.category = 'Deploy';
           if (data['permission_type'] != 'run' && data['permission_type'] != 'check' ) {
              scope.category = 'Inventory';
-              scope.projectrequired = false;
-           }
-           else {
-              scope.projectrequired = true;
           }
           master['category'] = scope.category;
+           scope.selectCategory(false);  //call without resetting scope.category value

           LookUpInit({
              scope: scope,
@ -287,24 +286,14 @@ function PermissionsEdit ($scope, $rootScope, $compile, $location, $log, $routeP
      for (var fld in master) {
          scope[fld] = master[fld];
      }
+      scope.selectCategory(false);
      };

-
-   scope.selectCategory = function() {
-       if (scope.category == 'Inventory') {
-          scope.projectrequired = false;
-       }
-       else {
-          scope.projectrequired = true;
-       }
-       scope.permission_type = null;
-       }
-
 }

 PermissionsEdit.$inject = [ '$scope', '$rootScope', '$compile', '$location', '$log', '$routeParams', 'PermissionsForm', 
                            'GenerateForm', 'Rest', 'Alert', 'ProcessErrors', 'LoadBreadCrumbs', 'ReturnToCaller', 
                            'ClearScope', 'Prompt', 'GetBasePath', 'InventoryList', 'ProjectList', 'LookUpInit', 'CheckAccess',
-                            'Wait'
+                            'Wait', 'PermissionCategoryChange'
                            ]; 
  
--- a/awx/ui/static/js/forms/Permissions.js
+++ b/awx/ui/static/js/forms/Permissions.js
@ -14,7 +14,8 @@ angular.module('PermissionFormDefinition', [])
        addTitle: 'Add Permission',                             //Title in add mode
        editTitle: '{{ name }}',                                //Title in edit mode
        name: 'permission',                                     //entity or model name in singular form
-        well: true,                                             //Wrap the form with TB well/           
+        well: true,                                             //Wrap the form with TB well
+        forceListeners: true,  

        stream: {
                'class': "btn-primary btn-xs activity-btn",
@ -83,18 +84,9 @@ angular.module('PermissionFormDefinition', [])
                    {label: 'Check', value: 'check', ngShow: "category == 'Deploy'" }
                    ],
                addRequired: true,
-                editRequired: true
+                editRequired: true,
+                helpCollapse: [{ hdr: 'Permission', ngBind: 'permissionTypeHelp' }]
                }
-                /* ,
-            deployment_permission_type: {
-                label: 'Permission',
-                type: 'radio',
-                ngShow: "category == 'Deploy'",
-                options: [
-                    {label: 'Deploy', value: 'PERM_INVENTORY_DEPLOY'},
-                    {label: 'Check', value: 'PERM_INVENTORY_CHECK'}
-                    ]
-                }*/
            },

        buttons: { //for now always generates <button> tags 
--- a/awx/ui/static/js/helpers/Permissions.js
+++ b/awx/ui/static/js/helpers/Permissions.js
@ -0,0 +1,48 @@
+/*********************************************
+ *  Copyright (c) 2013 AnsibleWorks, Inc.
+ *
+ *  Permissions.js
+ *
+ *  Functions shared amongst Permission related controllers
+ *
+ */
+angular.module('PermissionsHelper', [])  
+    
+    // Handle category change event
+    .factory('PermissionCategoryChange', [ function() {
+    return function(params) {
+        var scope = params.scope;
+        var reset = params.reset; 
+
+        if (scope.category == 'Inventory') {
+            scope.projectrequired = false;
+            scope.permissionTypeHelp = 
+                "<dl>\n" + 
+                "<dt>Admin</dt>\n" +
+                "<dd>Allow the user or team full access to the inventory. This includes reading, writing, deletion of the inventory and inventory sync operations.</dd>\n" +
+                "<dt>Read</dt>\n" +
+                "<dd>Only allow the user or team to view the inventory.</dd>\n" +
+                "<dt>Write</dt>\n" + 
+                "<dd>Allow the user or team to modify hosts and groups contained in the inventory, add new hosts and groups, and perform inventory sync operations.\n" +
+                "</dl>\n";
+        }
+        else {
+            scope.projectrequired = true;
+            scope.permissionTypeHelp = 
+                "<dl>\n" + 
+                "<dt>Run</dt>\n" +
+                "<dd>Allow the user or team to perform a live deployment of the project against the inventory. In Run mode modules will " +
+                "be executed, and changes to the inventory will occur.</dd>\n" +
+                "<dt>Check</dt>\n" +
+                "<dd>Only allow the user or team to deploy the project against the inventory as a dry-run operation. In Check mode, module operations " +
+                "will only be simulated. No changes will occur.</dd>\n" +
+                "</dl>\n";
+        }
+
+        if (reset) {
+            scope.permission_type = null;
+        }
+         
+        }
+        }]);
+      
--- a/awx/ui/static/lib/ansible/form-generator.js
+++ b/awx/ui/static/lib/ansible/form-generator.js
@ -347,6 +347,7 @@ angular.module('FormGenerator', ['GeneratorHelpers', 'ngCookies', 'Utilities'])
            params.content = collapse_array[i].content; 
            params.idx = this.accordion_count++;
            params.show = (collapse_array[i].show) ? collapse_array[i].show : null;
+            params.bind = (collapse_array[i].ngBind) ? collapse_array[i].ngBind : null;
            html += HelpCollapse(params);      
        }
        return html;
@ -839,6 +840,10 @@ angular.module('FormGenerator', ['GeneratorHelpers', 'ngCookies', 'Utilities'])
              this.form.name + '_form.' + fld + ".$error.required\">A value is required!</div>\n";
            }
            html += "<div class=\"error api-error\" ng-bind=\"" + fld + "_api_error\"></div>\n";
+
+            // Add help panel(s)
+            html += (field.helpCollapse) ? this.buildHelpCollapse(field.helpCollapse) : '';
+
            html += "</div>\n";
         }

--- a/awx/ui/static/lib/ansible/generator-helpers.js
+++ b/awx/ui/static/lib/ansible/generator-helpers.js
@ -453,6 +453,7 @@ angular.module('GeneratorHelpers', ['GeneratorHelpers'])
        var content = params.content;
        var show = params.show;
        var idx = params.idx;
+        var bind = params.bind;  //Pass in scope variable containing html
        var html = '';
        html += "<div class=\"panel-group collapsible-help\" ";
        html += (show) ? "ng-show=\"" + show + "\"" : "";
@ -465,8 +466,10 @@ angular.module('GeneratorHelpers', ['GeneratorHelpers'])
        html += "</h4>\n";
        html += "</div>\n";
        html += "<div id=\"accordion" + idx + "\" class=\"panel-collapse collapse in\">\n";
-        html += "<div class=\"panel-body\">\n";
-        html += content; 
+        html += "<div class=\"panel-body\" "; 
+        html += (bind) ? "ng-bind-html-unsafe=\"" + bind + "\" " : "";
+        html += ">\n";
+        html += (!bind) ? content : ""; 
        html += "</div>\n";
        html += "</div>\n";
        html += "</div>\n";
--- a/awx/ui/templates/ui/index.html
+++ b/awx/ui/templates/ui/index.html
@ -121,6 +121,7 @@
  <script src="{{ STATIC_URL }}js/helpers/Users.js"></script>
  <script src="{{ STATIC_URL }}js/helpers/Jobs.js"></script>
  <script src="{{ STATIC_URL }}js/helpers/Credentials.js"></script>
+  <script src="{{ STATIC_URL }}js/helpers/Permissions.js"></script>
  <script src="{{ STATIC_URL }}js/widgets/JobStatus.js"></script>
  <script src="{{ STATIC_URL }}js/widgets/InventorySyncStatus.js"></script>
  <script src="{{ STATIC_URL }}js/widgets/SCMSyncStatus.js"></script>