From 2dd2fb95ac642252201f7ace02814aac606b1da6 Mon Sep 17 00:00:00 2001
From: Chris Houseknecht <chouse@ansibleworks.com>
Date: Mon, 2 Dec 2013 21:34:53 +0000
Subject: [PATCH] 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.

---
 awx/ui/static/js/app.js                       |  1 +
 awx/ui/static/js/controllers/Permissions.js   | 53 ++++++++-----------
 awx/ui/static/js/forms/Permissions.js         | 16 ++----
 awx/ui/static/js/helpers/Permissions.js       | 48 +++++++++++++++++
 awx/ui/static/lib/ansible/form-generator.js   |  9 +++-
 .../static/lib/ansible/generator-helpers.js   |  7 ++-
 awx/ui/templates/ui/index.html                |  1 +
 7 files changed, 87 insertions(+), 48 deletions(-)
 create mode 100644 awx/ui/static/js/helpers/Permissions.js

diff --git a/awx/ui/static/js/app.js b/awx/ui/static/js/app.js
index 0df2aa7337..e905f7b6c2 100644
--- 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',
diff --git a/awx/ui/static/js/controllers/Permissions.js b/awx/ui/static/js/controllers/Permissions.js
index 2e4ed0e3b1..d326f2f449 100644
--- 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,8 +100,8 @@ 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,
       form: form,
@@ -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() {  PermissionCategoryChange({ scope: scope, reset: true }); };
+       
+
+  scope.selectCategory();
 
-   scope.selectCategory = function() {
-       if (scope.category == 'Inventory') {
-          scope.projectrequired = false;
-       }
-       else {
-          scope.projectrequired = true;
-       }
-       scope.permission_type = null;
-       }
 }
 
 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,13 +218,10 @@ 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,
               form: form,
@@ -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'
                             ]; 
   
diff --git a/awx/ui/static/js/forms/Permissions.js b/awx/ui/static/js/forms/Permissions.js
index 0e98a6543d..e044d73724 100644
--- 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 
diff --git a/awx/ui/static/js/helpers/Permissions.js b/awx/ui/static/js/helpers/Permissions.js
new file mode 100644
index 0000000000..dcbef8b397
--- /dev/null
+++ 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;
+        }
+         
+        }
+        }]);
+      
\ No newline at end of file
diff --git a/awx/ui/static/lib/ansible/form-generator.js b/awx/ui/static/lib/ansible/form-generator.js
index 817126a644..06d4a62b03 100644
--- a/awx/ui/static/lib/ansible/form-generator.js
+++ b/awx/ui/static/lib/ansible/form-generator.js
@@ -346,8 +346,9 @@ angular.module('FormGenerator', ['GeneratorHelpers', 'ngCookies', 'Utilities'])
             params.hdr = collapse_array[i].hdr; 
             params.content = collapse_array[i].content; 
             params.idx = this.accordion_count++;
-            params.show = (collapse_array[i].show) ? collapse_array[i].show : null;   
-            html += HelpCollapse(params);       
+            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";
          }
 
diff --git a/awx/ui/static/lib/ansible/generator-helpers.js b/awx/ui/static/lib/ansible/generator-helpers.js
index 69c59694e2..468712c3d4 100644
--- 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";
diff --git a/awx/ui/templates/ui/index.html b/awx/ui/templates/ui/index.html
index f9fbf2014c..feb1fb29a8 100644
--- 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>