working commit rbac add permissions

awx/ui/client/legacy-styles/ansible-ui.less

@@ -634,6 +634,13 @@ dd {
               box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075), 0 0 5px rgba(255, 88, 80, 0.6);
   }
 
+  .form-control.ng-dirty.ng-invalid + .select2 .select2-selection,
+  .form-control.ng-dirty.ng-invalid + .select2 .select2-selection:focus {
+      border-color: rgba(255, 88, 80, 0.8) !important;
+      outline: 0 !important;
+      box-shadow: none !important;
+  }
+
   .form-control.ng-dirty.ng-pristine {
       border-color: @default-second-border;
       box-shadow: none;
@@ -2008,15 +2015,33 @@ tr td button i {
     box-shadow: none;
 }
 
+.form-control + .select2 .select2-selection {
+    border-color: @default-second-border !important;
+    background-color: #f6f6f6 !important;
+    color: @default-data-txt !important;
+    transition: border-color 0.3s !important;
+    box-shadow: none !important;
+}
+
 .form-control:active, .form-control:focus {
     box-shadow: none;
     border-color: #167ec4;
 }
 
+.form-control:active + .select2 .select2-selection, .form-control:focus + .select2 .select2-selection {
+    box-shadow: none !important;
+    border-color: #167ec4 !important;
+}
+
 .form-control.ng-dirty.ng-invalid, .form-control.ng-dirty.ng-invalid:focus {
     box-shadow: none;
 }
 
+.form-control.ng-dirty.ng-invalid + .select2 .select2-selection, .form-control.ng-dirty.ng-invalid:focus + .select2 .select2-selection {
+    box-shadow: none !important;
+}
+
+
 .error {
     opacity: 1;
     transition: opacity 0.2s;

awx/ui/client/legacy-styles/lists.less

@@ -320,6 +320,11 @@ table, tbody {
     height: 34px;
 }
 
+.List-searchWidget--compact {
+    max-width: ~"calc(100% - 91px)";
+    margin-top: 10px;
+}
+
 .List-searchRow {
     margin-bottom: 20px;
 }

awx/ui/client/src/access/addPermissions/addPermissions.block.less

@@ -0,0 +1,144 @@
+@import "../../shared/branding/colors.default.less";
+
+/** @define AddPermissions */
+.AddPermissions {
+    position: absolute;
+    top: 0;
+    width: 100%;
+    height: 100%;
+}
+
+.AddPermissions-content {
+    max-width: 750px !important;
+}
+
+.AddPermissions-header {
+    padding: 20px;
+    padding-bottom: 10px;
+    padding-top: 15px;
+}
+
+.AddPermissions-body {
+    padding-top: 0px !important;
+    max-height: 70vh;
+    overflow: scroll;
+}
+
+.AddPermissions-footer {
+    padding-top: 20px !important;
+}
+
+.AddPermissions-list .List-searchRow {
+    height: 0px;
+}
+
+.AddPermissions-list .List-searchWidget {
+    height: 66px;
+}
+
+.AddPermissions-list .List-tableHeader:last-child {
+    border-top-right-radius: 5px;
+}
+
+.AddPermissions-list select-all {
+    display: none;
+}
+
+.AddPermissions-title {
+    margin-top: 5px;
+    margin-bottom: 20px;
+}
+
+.AddPermissions-buttons {
+    margin-left: auto;
+    margin-bottom: 20px;
+}
+
+.AddPermissions-directions {
+    margin-top: 10px;
+    margin-bottom: 20px;
+    color: #848992;
+}
+
+.AddPermissions-directionNumber {
+    font-size: 14px;
+    font-weight: bold;
+    border-radius: 50%;
+    background-color: #ebebeb;
+    padding-left: 6px;
+    padding-right: 1px;
+    padding-bottom: 3px;
+    margin-right: 10px;
+}
+
+.AddPermissions-separator {
+    margin-top: 20px;
+    margin-bottom: 20px;
+    width: 100%;
+    border-bottom: 1px solid #e1e1e1;
+}
+
+.AddPermissions-roleRow {
+    display: flex;
+    margin-bottom: 10px;
+    align-items: center;
+}
+
+.AddPermissions-roleName {
+    width: 30%;
+    padding-right: 10px;
+    display: flex;
+    align-items: center;
+}
+
+.AddPermissions-roleNameVal {
+    font-size: 14px;
+    max-width: ~"calc(100% - 46px)";
+    white-space: nowrap;
+    text-overflow: ellipsis;
+    overflow: hidden;
+}
+
+.AddPermissions-roleType {
+    border-radius: 5px;
+    padding: 0px 6px;
+    border: 1px solid #e1e1e1;
+    font-size: 10px;
+    color: #848992;
+    text-transform: uppercase;
+    background-color: #fff;
+    margin-left: 6px;
+}
+
+.AddPermissions-roleSelect {
+    width: ~"calc(70% - 40px)";
+    margin-right: 20px;
+}
+
+.AddPermissions-roleSelect .Form-dropDown {
+    height: inherit !important;
+}
+
+.AddPermissions-roleRemove {
+    border-radius: 50%;
+    padding: 3px;
+    line-height: 11px;
+    padding-left: 5px;
+    padding-right: 5px;
+    color: #b7b7b7;
+    background-color: #fafafa;
+    border: 0;
+}
+
+.AddPermissions-roleRemove:hover {
+    background-color: #ff5850;
+    color: #fff;
+}
+
+.AddPermissions-selectHide {
+    display: none;
+}
+
+.AddPermissions .select2-search__field {
+  text-transform: uppercase;
+}

awx/ui/client/src/access/addPermissions/addPermissions.controller.js

@@ -0,0 +1,217 @@
+/*************************************************
+ * Copyright (c) 2015 Ansible, Inc.
+ *
+ * All Rights Reserved
+ *************************************************/
+
+/**
+ * @ngdoc function
+ * @name controllers.function:Authentication
+ * @description
+ * Controller for handling /#/login and /#/logout routes.
+ *
+ * Tower (app.js) verifies the user is authenticated and that the user session is not expired. If either condition is not true,
+ * the user is redirected to /#/login and the Authentication controller.
+ *
+ * Methods for checking the session state are found in [js/shared/AuthService.js](/static/docs/api/shared.function:AuthService), which is referenced here as Authorization.
+ *
+ * #Login Modal Dialog
+ *
+ * The modal dialog prompting for username and password is found in templates/ui/index.html.
+ *```
+ *     <!-- login modal -->
+ *     <div id="login-modal" class="modal fade">
+ *         <div class="modal-dialog">
+ *             <div class="modal-content" id="login-modal-content">
+ *             </div><!-- modal-content -->
+ *         </div><!-- modal-dialog -->
+ *     </div><!-- modal -->
+ *```
+ * HTML for the login form is generated, compiled and injected into <div id="login-modal-content"></div> by the controller. This is done to associate the form with the controller's scope. Because
+ * <div id="login-modal"></div> is outside of the ng-view container, it gets associated with $rootScope by default. In the controller we create a new scope using $rootScope.$new() and associate
+ * that with the login form. Doing this each time the controller is instantiated insures the form is clean and not pre-populated with a prior user's username and password.
+ *
+ * Just before the release of 2.0 a bug was discovered where clicking logout and then immediately clicking login without providing a username and password would successfully log
+ * the user back into Tower. Implementing the above approach fixed this, forcing a new username/password to be entered each time the login dialog appears.
+ *
+ * #Login Workflow
+ *
+ * When the the login button is clicked, the following occurs:
+ *
+ * - Call Authorization.retrieveToken(username, password) - sends a POST request to /api/v1/authtoken to get a new token value.
+ * - Call Authorization.setToken(token, expires) to store the token and exipration time in a session cookie.
+ * - Start the expiration timer by calling the init() method of [js/shared/Timer.js](/static/docs/api/shared.function:Timer)
+ * - Get user informaton by calling Authorization.getUser() - sends a GET request to /api/v1/me
+ * - Store user information in the session cookie by calling Authorization.setUser().
+ * - Get the Tower license by calling Authorization.getLicense() - sends a GET request to /api/vi/config
+ * - Stores the license object in local storage by calling Authorization.setLicense(). This adds the Tower version and a tested flag to the license object. The tested flag is initially set to false.
+ *
+ * Note that there is a session timer kept on the server side as well as the client side. Each time an API request is made, Tower (in app.js) calls
+ * Timer.isExpired(). This verifies the UI does not think the session is expired, and if not, moves the expiration time into the future. The number of
+ * seconds between API calls before a session is considered expired is set in config.js as session_timeout.
+ *
+ * @Usage
+ * This is usage information.
+ */
+
+export default ['$rootScope', '$scope', 'GetBasePath', 'Rest', '$q', function (rootScope, scope, GetBasePath, Rest, $q) {
+    scope.allSelected = [];
+
+    // the object permissions are being added to
+    scope.object = scope[scope.$parent.list
+        .iterator + "_obj"];
+
+    // array for all possible roles for the object
+    scope.roles = Object
+        .keys(scope.object.summary_fields.roles)
+        .map(function(key) {
+            return {
+                value: scope.object.summary_fields
+                    .roles[key].id,
+                label: scope.object.summary_fields
+                    .roles[key].name };
+        });
+
+    // handle form tabs
+    scope.toggleFormTabs = function(list) {
+        scope.usersSelected = (list === 'users');
+        scope.teamsSelected = !scope.usersSelected;
+    };
+
+    // TODO: manually handle selection/deselection
+    // of user/team checkboxes
+    scope.$on("selectedOrDeselected", function(e, val) {
+        val = val.value;
+        if (val.isSelected) {
+            scope.allSelected = scope.allSelected.filter(function(i) {
+                return (!(val.id === i.id && val.type === i.type));
+            });
+        } else {
+            var name;
+
+            if (val.type === "user") {
+                name = (val.first_name &&
+                    val.last_name) ?
+                    val.first_name + " " +
+                    val.last_name :
+                    val.username;
+            } else {
+                name = val.name;
+            }
+
+            scope.allSelected.push({
+                name: name,
+                type: val.type,
+                roles: [],
+                id: val.id
+            });
+        }
+    });
+
+    scope.$on("itemsSelected", function(e, inList) {
+        scope.updateLists = scope.allSelected.filter(function(inMemory) {
+            var notInList = true;
+            inList.forEach(function(val) {
+                if (inMemory.id === val.id &&
+                    inMemory.type === val.type) {
+                    notInList = false;
+                }
+            });
+            return notInList;
+        });
+    });
+
+    scope.$watch("updateLists", function(toUpdate) {
+        (toUpdate || []).forEach(function(obj) {
+            var elemScope = angular
+                .element("#" +
+                    obj.type + "s_table #" + obj.id +
+                    ".List-tableRow input")
+                .scope()
+            if (elemScope) {
+                elemScope.isSelected = true;
+            }
+        });
+
+        delete scope.updateLists;
+    });
+
+    // create array of users/teams
+    // scope.$watchGroup(['selectedUsers', 'selectedTeams'],
+    //     function(val) {
+    //         scope.allSelected = (val[0] || [])
+    //             .map(function(i) {
+    //                 var roles = i.roles || [];
+    //                 var name = (i.first_name &&
+    //                     i.last_name) ?
+    //                     i.first_name + " " +
+    //                     i.last_name :
+    //                     i.username;
+    //
+    //                 return {
+    //                     name: name,
+    //                     type: "user",
+    //                     roles: roles,
+    //                     id: i.id
+    //                 };
+    //         }).concat((val[1] || [])
+    //             .map(function(i) {
+    //                 var roles = i.roles || [];
+    //
+    //                 return {
+    //                     name: i.name,
+    //                     type: "team",
+    //                     roles: roles,
+    //                     id: i.id
+    //                 };
+    //         }));
+    // });
+
+    // remove selected user/team
+    scope.removeObject = function(obj) {
+        var elemScope = angular
+            .element("#" +
+                obj.type + "s_table #" + obj.id + ".List-tableRow input")
+            .scope()
+        if (elemScope) {
+            elemScope.isSelected = false;
+        }
+
+        scope.allSelected = scope.allSelected.filter(function(i) {
+            return (!(obj.id === i.id && obj.type === i.type));
+        });
+    };
+
+    // update post url list
+    scope.$watch("allSelected", function(val) {
+        scope.posts = _
+            .flatten((val || [])
+            .map(function (owner) {
+                var url = GetBasePath(owner.type + "s") + "/" + owner.id +
+                    "/roles/";
+
+                return (owner.roles || [])
+                    .map(function (role) {
+                        return {url: url,
+                            id: role.value};
+                });
+        }));
+    }, true);
+
+    // post roles to api
+    scope.updatePermissions = function() {
+        var requests = scope.posts
+            .map(function(post) {
+                Rest.setUrl(post.url);
+                return Rest.post({"id": post.id});
+            });
+
+        $q.all(requests)
+            .then(function (responses) {
+                rootScope.$broadcast("refreshList", "permission");
+                scope.closeModal();
+            }, function (error) {
+                // TODO: request(s) errored out.  Call process errors
+            });
+    };
+}];

awx/ui/client/src/access/addPermissions/addPermissions.directive.js

@@ -0,0 +1,51 @@
+/*************************************************
+ * Copyright (c) 2015 Ansible, Inc.
+ *
+ * All Rights Reserved
+ *************************************************/
+import addPermissionsController from './addPermissions.controller';
+
+/* jshint unused: vars */
+export default
+    [     'templateUrl',
+        'Wait',
+        function(templateUrl, Wait) {
+            return {
+                restrict: 'E',
+                scope: true,
+                controller: addPermissionsController,
+                templateUrl: templateUrl('access/addPermissions/addPermissions'),
+                link: function(scope, element, attrs, ctrl) {
+                    scope.toggleFormTabs('users');
+                    
+                    $("body").append(element);
+
+                    Wait('start');
+
+                    scope.$broadcast("linkLists");
+
+                    setTimeout(function() {
+                        $('#add-permissions-modal').modal("show");
+                    }, 200);
+
+                    $('.modal[aria-hidden=false]').each(function () {
+                        if ($(this).attr('id') !== 'add-permissions-modal') {
+                            $(this).modal('hide');
+                        }
+                    });
+
+                    scope.closeModal = function() {
+                        $('#add-permissions-modal').on('hidden.bs.modal',
+                            function () {
+                                $('.AddPermissions').remove();
+                            });
+                        $('#add-permissions-modal').modal('hide');
+                    };
+
+                    Wait('stop');
+
+                    window.scrollTo(0,0);
+                }
+            };
+        }
+    ];

awx/ui/client/src/access/addPermissions/addPermissions.partial.html

@@ -0,0 +1,105 @@
+<div id="add-permissions-modal" class="LoginModal modal fade">
+    <div class="LoginModal-backDrop is-loggedOut"></div>
+    <div class="LoginModal-dialog">
+        <div class="LoginModal-content is-loggedOut AddPermissions-content">
+            <div class="AddPermissions-header">
+                <div class="List-header">
+                    <div class="List-title">
+                        <div class="List-titleText ng-binding">
+                            {{ object.name }}
+                            <div class="List-titleLockup"></div>
+                            Add Permissions
+                        </div>
+                    </div>
+                    <div class="Form-exitHolder">
+                        <button class="Form-exit" ng-click="closeModal()">
+                            <i class="fa fa-times-circle"></i>
+                        </button>
+                    </div>
+                </div>
+            </div>
+            <div class="LoginModal-body AddPermissions-body">
+
+                <div class="AddPermissions-directions">
+                    <span class="AddPermissions-directionNumber">
+                        1.
+                    </span>
+                    Please select Users / Teams from the lists below.
+                </div>
+
+                <div class="Form-tabHolder">
+                    <div id="users_tab" class="Form-tab"
+                        ng-click="toggleFormTabs('users')"
+                        ng-class="{'is-selected': usersSelected }">
+                        Users
+                    </div>
+                    <div id="teams_tab" class="Form-tab"
+                        ng-click="toggleFormTabs('teams')"
+                        ng-class="{'is-selected': teamsSelected }"
+                    >
+                        Teams
+                    </div>
+                </div>
+
+                <div class="AddPermissions-list" ng-show="usersSelected">
+                    <add-permissions-users
+                        selected="selectedUsers">
+                    </add-permissions-users>
+                </div>
+                <div class="AddPermissions-list" ng-show="teamsSelected">
+                    <add-permissions-teams
+                        selected="selectedTeams">
+                    </add-permissions-teams>
+                </div>
+
+                <div class="AddPermissions-separator"
+                    ng-show="allSelected && allSelected.length > 0"></div>
+
+                <div class="AddPermissions-directions"
+                    ng-show="allSelected && allSelected.length > 0">
+                    <span class="AddPermissions-directionNumber">
+                        2.
+                    </span>
+                    Please assign roles to the selected users/teams
+                </div>
+                <form name="userForm" novalidate>
+                    <ng-form name="userRoleForm">
+                    <div class="AddPermissions-roleRow"
+                        ng-repeat="obj in allSelected">
+                        <div class="AddPermissions-roleName">
+                            <span class="AddPermissions-roleNameVal">
+                                {{ obj.name }}
+                            </span>
+                            <span class="AddPermissions-roleType">
+                                {{ obj.type }}
+                            </span>
+                        </div>
+                        <role-select class="AddPermissions-roleSelect">
+                        </role-select>
+                        <button class="AddPermissions-roleRemove"
+                            ng-click="removeObject(obj)">
+                            <i class="fa fa-times"></i>
+                        </button>
+                    </div>
+                    </ng-form>
+                </form>
+            </div>
+            <div class="LoginModal-footer AddPermissions-footer">
+                {{ post }}
+                <div class="buttons Form-buttons AddPermissions-buttons">
+                    <button type="button"
+                        class="btn btn-sm Form-saveButton"
+                        ng-click="updatePermissions()"
+                        ng-disabled="userRoleForm.$invalid || !allSelected || !allSelected.length">
+                        Save
+                    </button>
+                    <button type="button"
+                        class="btn btn-sm Form-cancelButton"
+                        ng-click="closeModal()">
+                        Cancel
+                    </button>
+                </div>
+            </div>
+        </div>
+   </div>
+</div>

awx/ui/client/src/access/addPermissions/main.js

@@ -0,0 +1,15 @@
+/*************************************************
+ * Copyright (c) 2015 Ansible, Inc.
+ *
+ * All Rights Reserved
+ *************************************************/
+
+import addPermissionsDirective from './addPermissions.directive';
+import roleSelect from './roleSelect.directive';
+import teamsPermissions from './teams/main';
+import usersPermissions from './users/main';
+
+export default
+    angular.module('AddPermissions', [teamsPermissions.name, usersPermissions.name])
+        .directive('addPermissions', addPermissionsDirective)
+        .directive('roleSelect', roleSelect);

awx/ui/client/src/access/addPermissions/roleSelect.directive.js

@@ -0,0 +1,25 @@
+/*************************************************
+ * Copyright (c) 2015 Ansible, Inc.
+ *
+ * All Rights Reserved
+ *************************************************/
+
+/* jshint unused: vars */
+export default
+    [
+        'CreateSelect2',
+        function(CreateSelect2) {
+            return {
+                restrict: 'E',
+                scope: false,
+                template: '<select ng-cloak class="AddPermissions-selectHide roleSelect2 form-control" ng-model="obj.roles" ng-options="role.label for role in roles track by role.value" multiple required></select>',
+                link: function(scope, element, attrs, ctrl) {
+                    CreateSelect2({
+                        element: '.roleSelect2',
+                        multiple: true,
+                        placeholder: 'Select roles'
+                    });
+                }
+            };
+        }
+    ];

awx/ui/client/src/access/addPermissions/teams/main.js

@@ -0,0 +1,13 @@
+/*************************************************
+ * Copyright (c) 2015 Ansible, Inc.
+ *
+ * All Rights Reserved
+ *************************************************/
+
+import teamsDirective from './permissionsTeams.directive';
+import teamsList from './permissionsTeams.list';
+
+export default
+    angular.module('PermissionsTeams', [])
+        .directive('addPermissionsTeams', teamsDirective)
+        .factory('addPermissionsTeamsList', teamsList);

awx/ui/client/src/access/addPermissions/teams/permissionsTeams.directive.js

@@ -0,0 +1,44 @@
+/*************************************************
+ * Copyright (c) 2015 Ansible, Inc.
+ *
+ * All Rights Reserved
+ *************************************************/
+
+/* jshint unused: vars */
+export default
+    ['addPermissionsTeamsList', 'generateList', 'GetBasePath', 'SelectionInit', 'SearchInit',
+        'PaginateInit', function(addPermissionsTeamsList, generateList,
+            GetBasePath, SelectionInit, SearchInit, PaginateInit) {
+            return {
+                restrict: 'E',
+                scope: {
+                },
+                template: "<div id='addPermissionsTeamsList'></div>",
+                link: function(scope, element, attrs, ctrl) {
+                    scope.$on("linkLists", function() {
+                        var generator = generateList,
+                            list = addPermissionsTeamsList,
+                            url = GetBasePath("teams"),
+                            set = "teams",
+                            id = "addPermissionsTeamsList",
+                            mode = "edit";
+
+                        scope.$watch("selectedItems", function() {
+                            scope.$emit("itemsSelected", scope.selectedItems);
+                        });
+
+                        generator.inject(list, { id: id,
+                            title: false, mode: mode, scope: scope });
+
+                        SearchInit({ scope: scope, set: set,
+                            list: list, url: url });
+
+                        PaginateInit({ scope: scope,
+                            list: list, url: url, pageSize: 5 });
+
+                        scope.search(list.iterator);
+                    });
+                }
+            };
+        }
+    ];

awx/ui/client/src/access/addPermissions/teams/permissionsTeams.list.js

@@ -0,0 +1,27 @@
+/*************************************************
+ * Copyright (c) 2015 Ansible, Inc.
+ *
+ * All Rights Reserved
+ *************************************************/
+
+
+ export default function() {
+    return {
+
+        name: 'teams',
+        iterator: 'team',
+        listTitleBadge: false,
+        multiSelect: true,
+        multiSelectExtended: true,
+        index: false,
+        hover: true,
+
+        fields: {
+            name: {
+                key: true,
+                label: 'name'
+            },
+        },
+
+    };
+}

awx/ui/client/src/access/addPermissions/users/main.js

@@ -0,0 +1,13 @@
+/*************************************************
+ * Copyright (c) 2015 Ansible, Inc.
+ *
+ * All Rights Reserved
+ *************************************************/
+
+import usersDirective from './permissionsUsers.directive';
+import usersList from './permissionsUsers.list';
+
+export default
+    angular.module('PermissionsUsers', [])
+        .directive('addPermissionsUsers', usersDirective)
+        .factory('addPermissionsUsersList', usersList);

awx/ui/client/src/access/addPermissions/users/permissionsUsers.directive.js

@@ -0,0 +1,44 @@
+/*************************************************
+ * Copyright (c) 2015 Ansible, Inc.
+ *
+ * All Rights Reserved
+ *************************************************/
+
+/* jshint unused: vars */
+export default
+    ['addPermissionsUsersList', 'generateList', 'GetBasePath', 'SelectionInit', 'SearchInit',
+        'PaginateInit', function(addPermissionsUsersList, generateList,
+            GetBasePath, SelectionInit, SearchInit, PaginateInit) {
+            return {
+                restrict: 'E',
+                scope: {
+                },
+                template: "<div id='addPermissionsUsersList'></div>",
+                link: function(scope, element, attrs, ctrl) {
+                    scope.$on("linkLists", function() {
+                        var generator = generateList,
+                            list = addPermissionsUsersList,
+                            url = GetBasePath("users") + "?is_superuser=false",
+                            set = "users",
+                            id = "addPermissionsUsersList",
+                            mode = "edit";
+
+                        scope.$watch("selectedItems", function() {
+                            scope.$emit("itemsSelected", scope.selectedItems);
+                        });
+
+                        generator.inject(list, { id: id,
+                            title: false, mode: mode, scope: scope });
+
+                        SearchInit({ scope: scope, set: set,
+                            list: list, url: url });
+
+                        PaginateInit({ scope: scope,
+                            list: list, url: url, pageSize: 5 });
+
+                        scope.search(list.iterator);
+                    });
+                }
+            };
+        }
+    ];

awx/ui/client/src/access/addPermissions/users/permissionsUsers.list.js

@@ -0,0 +1,37 @@
+/*************************************************
+ * Copyright (c) 2015 Ansible, Inc.
+ *
+ * All Rights Reserved
+ *************************************************/
+
+
+ export default function() {
+    return {
+
+        name: 'users',
+        iterator: 'user',
+        title: false,
+        listTitleBadge: false,
+        multiSelect: true,
+        multiSelectExtended: true,
+        index: false,
+        hover: true,
+
+        fields: {
+            first_name: {
+                label: 'First Name',
+                columnClass: 'col-md-3 col-sm-3 hidden-xs'
+            },
+            last_name: {
+                label: 'Last Name',
+                columnClass: 'col-md-3 col-sm-3 hidden-xs'
+            },
+            username: {
+                key: true,
+                label: 'Username',
+                columnClass: 'col-md-3 col-sm-3 col-xs-9'
+            },
+        },
+
+    };
+}

awx/ui/client/src/access/main.js

@@ -8,5 +8,5 @@ import roleList from './roleList.directive';
 import addPermissions from './addPermissions/main';
 
 export default
-    angular.module('access', [])
+    angular.module('access', [addPermissions.name])
         .directive('roleList', roleList);

awx/ui/client/src/app.js

@@ -892,6 +892,10 @@ var tower = angular.module('Tower', [
         LoadConfig, Store, ShowSocketHelp, AboutAnsibleHelp, pendoService, Prompt, Rest, Wait, ProcessErrors, $state, GetBasePath) {
             var sock;
 
+            $rootScope.addPermission = function (scope) {
+                $compile("<add-permissions class='AddPermissions'></add-permissions>")(scope);
+            }
+
             $rootScope.deletePermission = function (user, role, userName,
                 roleName, resourceName) {
                     var action = function () {

awx/ui/client/src/controllers/Teams.js

@@ -210,36 +210,40 @@ export function TeamsEdit($scope, $rootScope, $compile, $location, $log,
     $scope.$emit("RefreshTeamsList");
 
     // return a promise from the options request with the permission type choices (including adhoc) as a param
-    var permissionsChoice = fieldChoices({
+    // var permissionsChoice = fieldChoices({
-        scope: $scope,
+    //     scope: $scope,
-        url: 'api/v1/' + base + '/' + id + '/permissions/',
+    //     url: 'api/v1/' + base + '/' + id + '/permissions/',
-        field: 'permission_type'
+    //     field: 'permission_type'
-    });
+    // });
 
-    // manipulate the choices from the options request to be set on
+    // // manipulate the choices from the options request to be set on
-    // scope and be usable by the list form
+    // // scope and be usable by the list form
-    permissionsChoice.then(function (choices) {
+    // permissionsChoice.then(function (choices) {
-        choices =
+    //     choices =
-            fieldLabels({
+    //         fieldLabels({
-                choices: choices
+    //             choices: choices
-            });
+    //         });
-        _.map(choices, function(n, key) {
+    //     _.map(choices, function(n, key) {
-            $scope.permission_label[key] = n;
+    //         $scope.permission_label[key] = n;
-        });
+    //     });
-    });
+    // });
 
     // manipulate the choices from the options request to be usable
     // by the search option for permission_type, you can't inject the
     // list until this is done!
-    permissionsChoice.then(function (choices) {
+    // permissionsChoice.then(function (choices) {
-        form.related.permissions.fields.permission_type.searchOptions =
+    //     form.related.permissions.fields.permission_type.searchOptions =
-            permissionsSearchSelect({
+    //         permissionsSearchSelect({
-                choices: choices
+    //             choices: choices
-            });
+    //         });
         generator.inject(form, { mode: 'edit', related: true, scope: $scope });
         generator.reset();
         $scope.$emit('loadTeam');
-    });
+    // });
+
+    generator.inject(form, { mode: 'edit', related: true, scope: $scope });
+    generator.reset();
+    $scope.$emit('loadTeam');
 
     $scope.team_id = id;
 

awx/ui/client/src/controllers/Users.js

@@ -240,37 +240,38 @@ export function UsersEdit($scope, $rootScope, $compile, $location, $log,
 
     $scope.$emit("RefreshUsersList");
 
-    // return a promise from the options request with the permission type choices (including adhoc) as a param
+    // // return a promise from the options request with the permission type choices (including adhoc) as a param
-    var permissionsChoice = fieldChoices({
+    // var permissionsChoice = fieldChoices({
-        scope: $scope,
+    //     scope: $scope,
-        url: 'api/v1/' + base + '/' + id + '/permissions/',
+    //     url: 'api/v1/' + base + '/' + id + '/permissions/',
-        field: 'permission_type'
+    //     field: 'permission_type'
-    });
+    // });
-
+    //
-    // manipulate the choices from the options request to be set on
+    // // manipulate the choices from the options request to be set on
-    // scope and be usable by the list form
+    // // scope and be usable by the list form
-    permissionsChoice.then(function (choices) {
+    // permissionsChoice.then(function (choices) {
-        choices =
+    //     choices =
-            fieldLabels({
+    //         fieldLabels({
-                choices: choices
+    //             choices: choices
-            });
+    //         });
-        _.map(choices, function(n, key) {
+    //     _.map(choices, function(n, key) {
-            $scope.permission_label[key] = n;
+    //         $scope.permission_label[key] = n;
-        });
+    //     });
-    });
+    // });
 
     // manipulate the choices from the options request to be usable
     // by the search option for permission_type, you can't inject the
     // list until this is done!
-    permissionsChoice.then(function (choices) {
+    // permissionsChoice.then(function (choices) {
-        form.related.permissions.fields.permission_type.searchOptions =
+    //     form.related.permissions.fields.permission_type.searchOptions =
-            permissionsSearchSelect({
+    //         permissionsSearchSelect({
-                choices: choices
+    //             choices: choices
-            });
+    //         });
-        generator.inject(form, { mode: 'edit', related: true, scope: $scope });
+    // });
-        generator.reset();
+
-        $scope.$emit("loadForm");
+    generator.inject(form, { mode: 'edit', related: true, scope: $scope });
-    });
+    generator.reset();
+    $scope.$emit("loadForm");
 
     if ($scope.removeFormReady) {
         $scope.removeFormReady();

awx/ui/client/src/forms/Users.js

@@ -158,69 +158,69 @@ export default
                     }
                 },
 
-                permissions: {
+                // permissions: {
-                    type: 'collection',
+                //     type: 'collection',
-                    title: 'Permissions',
+                //     title: 'Permissions',
-                    iterator: 'permission',
+                //     iterator: 'permission',
-                    open: false,
+                //     open: false,
-                    index: false,
+                //     index: false,
-
+                //
-                    actions: {
+                //     actions: {
-                        add: {
+                //         add: {
-                            ngClick: "add('permissions')",
+                //             ngClick: "add('permissions')",
-                            label: 'Add',
+                //             label: 'Add',
-                            awToolTip: 'Add a permission for this user',
+                //             awToolTip: 'Add a permission for this user',
-                            ngShow: 'PermissionAddAllowed',
+                //             ngShow: 'PermissionAddAllowed',
-                            actionClass: 'btn List-buttonSubmit',
+                //             actionClass: 'btn List-buttonSubmit',
-                            buttonContent: '+ ADD'
+                //             buttonContent: '+ ADD'
-                        }
+                //         }
-                    },
+                //     },
-
+                //
-                    fields: {
+                //     fields: {
-                        name: {
+                //         name: {
-                            key: true,
+                //             key: true,
-                            label: 'Name',
+                //             label: 'Name',
-                            ngClick: "edit('permissions', permission.id, permission.name)"
+                //             ngClick: "edit('permissions', permission.id, permission.name)"
-                        },
+                //         },
-                        inventory: {
+                //         inventory: {
-                            label: 'Inventory',
+                //             label: 'Inventory',
-                            sourceModel: 'inventory',
+                //             sourceModel: 'inventory',
-                            sourceField: 'name',
+                //             sourceField: 'name',
-                            ngBind: 'permission.summary_fields.inventory.name'
+                //             ngBind: 'permission.summary_fields.inventory.name'
-                        },
+                //         },
-                        project: {
+                //         project: {
-                            label: 'Project',
+                //             label: 'Project',
-                            sourceModel: 'project',
+                //             sourceModel: 'project',
-                            sourceField: 'name',
+                //             sourceField: 'name',
-                            ngBind: 'permission.summary_fields.project.name'
+                //             ngBind: 'permission.summary_fields.project.name'
-                        },
+                //         },
-                        permission_type: {
+                //         permission_type: {
-                            label: 'Permission',
+                //             label: 'Permission',
-                            ngBind: 'getPermissionText()',
+                //             ngBind: 'getPermissionText()',
-                            searchType: 'select'
+                //             searchType: 'select'
-                        }
+                //         }
-                    },
+                //     },
-
+                //
-                    fieldActions: {
+                //     fieldActions: {
-                        edit: {
+                //         edit: {
-                            label: 'Edit',
+                //             label: 'Edit',
-                            ngClick: "edit('permissions', permission.id, permission.name)",
+                //             ngClick: "edit('permissions', permission.id, permission.name)",
-                            icon: 'icon-edit',
+                //             icon: 'icon-edit',
-                            awToolTip: 'Edit the permission',
+                //             awToolTip: 'Edit the permission',
-                            'class': 'btn btn-default'
+                //             'class': 'btn btn-default'
-                        },
+                //         },
-
+                //
-                        "delete": {
+                //         "delete": {
-                            label: 'Delete',
+                //             label: 'Delete',
-                            ngClick: "delete('permissions', permission.id, permission.name, 'permission')",
+                //             ngClick: "delete('permissions', permission.id, permission.name, 'permission')",
-                            icon: 'icon-trash',
+                //             icon: 'icon-trash',
-                            "class": 'btn-danger',
+                //             "class": 'btn-danger',
-                            awToolTip: 'Delete the permission',
+                //             awToolTip: 'Delete the permission',
-                            ngShow: 'PermissionAddAllowed'
+                //             ngShow: 'PermissionAddAllowed'
-                        }
+                //         }
-                    }
+                //     }
-
+                //
-                },
+                // },
 
                 admin_of_organizations: { // Assumes a plural name (e.g. things)
                     type: 'collection',

awx/ui/client/src/helpers/PaginationHelpers.js

@@ -32,7 +32,7 @@ export default
                 // Which page are we on?
                 if (Empty(next) && previous) {
                     // no next page, but there is a previous page
-                    scope[iterator + '_page'] = scope[iterator + '_num_pages'];
+                    scope[iterator + '_page'] = /page=\d+/.test(previous) ? parseInt(previous.match(/page=(\d+)/)[1]) + 1 : 2;
                 } else if (next && Empty(previous)) {
                     // next page available, but no previous page
                     scope[iterator + '_page'] = 1;

awx/ui/client/src/shared/Utilities.js

@@ -614,7 +614,8 @@ angular.module('Utilities', ['RestServices', 'Utilities', 'sanitizeFilter'])
 
             var element = params.element,
             options = params.opts,
-            multiple = (params.multiple!==undefined) ? params.multiple : true;
+            multiple = (params.multiple!==undefined) ? params.multiple : true,
+            placeholder = params.placeholder;
 
             $.fn.select2.amd.require([
                 'select2/utils',
@@ -632,6 +633,7 @@ angular.module('Utilities', ['RestServices', 'Utilities', 'sanitizeFilter'])
                            }, Dropdown);
 
                 $(element).select2({
+                    placeholder: placeholder,
                     multiple: multiple,
                     containerCssClass: 'Form-dropDown',
                     width: '100%',

awx/ui/client/src/shared/form-generator.js

@@ -1548,7 +1548,9 @@ angular.module('FormGenerator', [GeneratorHelpers.name, 'Utilities', listGenerat
 
                         html += "<div class=\"buttons Form-buttons\" ";
                         html += "id=\"" + this.form.name + "_controls\" ";
-
+                        if (options.mode === 'edit' && this.form.tabs) {
+                            html += "ng-show=\"" + this.form.name + "Selected\"; "
+                        }
                         html += ">\n";
 
                         if (this.form.horizontal) {

awx/ui/client/src/shared/generator-helpers.js

@@ -635,6 +635,7 @@ angular.module('GeneratorHelpers', [systemStatus.name])
         var iterator = params.iterator,
             form = params.template,
             size = params.size,
+            mini = params.mini,
             includeSize = (params.includeSize === undefined) ? true : params.includeSize,
             ngShow = (params.ngShow) ? params.ngShow : false,
             i, html = '',
@@ -668,6 +669,7 @@ angular.module('GeneratorHelpers', [systemStatus.name])
 
             if (includeSize) {
                 html += "<div class=\"List-searchWidget ";
+                html += (mini) ? "List-searchWidget--compact " : "";
                 html += (size) ? size : "col-lg-4 col-md-8 col-sm-12 col-xs-12";
                 html += "\" id=\"search-widget-container" + modifier + "\">\n";
             }

awx/ui/client/src/shared/list-generator/list-generator.factory.js

@@ -416,6 +416,7 @@ export default ['$location', '$compile', '$rootScope', 'SearchWidget', 'Paginate
                     function buildTable() {
                         var extraClasses = list['class'];
                         var multiSelect = list.multiSelect ? 'multi-select-list' : null;
+                        var multiSelectExtended = list.multiSelectExtended ? 'true' : 'false';
 
                         if (options.mode === 'summary') {
                             extraClasses += ' table-summary';
@@ -425,7 +426,8 @@ export default ['$location', '$compile', '$rootScope', 'SearchWidget', 'Paginate
                                     .attr('id', list.name + '_table')
                                     .addClass('List-table')
                                     .addClass(extraClasses)
-                                    .attr('multi-select-list', multiSelect);
+                                    .attr('multi-select-list', multiSelect)
+                                    .attr('is-extended', multiSelectExtended);
 
                     }
 
@@ -460,7 +462,7 @@ export default ['$location', '$compile', '$rootScope', 'SearchWidget', 'Paginate
                     }
 
                     if (list.multiSelect) {
-                        innerTable += '<td class="col-xs-1 select-column List-tableCell"><select-list-item item=\"' + list.iterator + '\"></select-list-item></td>';
+                        innerTable += '<td class="col-xs-1 select-column List- List-staticColumn--smallStatus"><select-list-item item=\"' + list.iterator + '\"></select-list-item></td>';
                     }
 
                     // Change layout if a lookup list, place radio buttons before labels
@@ -609,7 +611,7 @@ export default ['$location', '$compile', '$rootScope', 'SearchWidget', 'Paginate
 
                     function buildSelectAll() {
                         return $('<th>')
-                                .addClass('col-xs-1 select-column List-tableHeader')
+                                .addClass('col-xs-1 select-column List-tableHeader List-staticColumn--smallStatus')
                                 .append(
                                     $('<select-all>')
                                         .attr('selections-empty', 'selectedItems.length === 0')

awx/ui/client/src/shared/multi-select-list/select-list-item.directive.js

@@ -30,7 +30,7 @@ export default
                 item: '=item'
             },
             require: '^multiSelectList',
-            template: '<input type="checkbox" data-multi-select-list-item ng-model="isSelected">',
+            template: '<input type="checkbox" data-multi-select-list-item ng-model="isSelected" ng-change="userInteractionSelect()">',
             link: function(scope, element, attrs, multiSelectList) {
 
                 scope.isSelected = false;
@@ -52,6 +52,10 @@ export default
                     multiSelectList.deregisterItem(scope.decoratedItem);
                 });
 
+                scope.userInteractionSelect = function() {
+                    scope.$emit("selectedOrDeselected", scope.decoratedItem);
+                }
+
             }
         };
     }];