Reorganize awx/ui/client/src/access module structure

addPermissions module => add-rbac-resource module
addPermissionsList module => rbac-multiselect-list module
roleSelect module => rbac-multiselect-role module
roleList module => rbac-role-column module

Use isolate scope in rbac-multiselect-role module
Move shared styles to module root

awx/ui/client/src/access/add-rbac-resource/main.js

@@ -0,0 +1,12 @@
+/*************************************************
+ * Copyright (c) 2015 Ansible, Inc.
+ *
+ * All Rights Reserved
+ *************************************************/
+
+import addRbacResourceDirective from './rbac-resource.directive';
+import rbacMultiselect from '../rbac-multiselect/main';
+
+export default
+    angular.module('AddRbacResourceModule', [rbacMultiselect.name])
+        .directive('addRbacResource', addRbacResourceDirective);

awx/ui/client/src/access/add-rbac-resource/rbac-resource.controller.js

@@ -18,16 +18,7 @@ export default ['$rootScope', '$scope', 'GetBasePath', 'Rest', '$q', 'Wait', 'Pr
     // the object permissions are being added to
     scope.object = scope.resourceData.data;
     // array for all possible roles for the object
-    scope.roles = Object
+    scope.roles = scope.object.summary_fields.object_roles;
-        .keys(scope.object.summary_fields.object_roles)
-        .map(function(key) {
-            return {
-                value: scope.object.summary_fields
-                    .object_roles[key].id,
-                label: scope.object.summary_fields
-                    .object_roles[key].name
-            };
-        });
 
     // TODO: get working with api
     // array w roles and descriptions for key
@@ -44,6 +35,11 @@ export default ['$rootScope', '$scope', 'GetBasePath', 'Rest', '$q', 'Wait', 'Pr
 
     scope.showKeyPane = false;
 
+    scope.removeObject = function(obj){
+        _.remove(scope.allSelected, {id: obj.id});
+        obj.isSelected = false;
+    };
+
     scope.toggleKeyPane = function() {
         scope.showKeyPane = !scope.showKeyPane;
     };

awx/ui/client/src/access/add-rbac-resource/rbac-resource.directive.js

@@ -3,7 +3,7 @@
  *
  * All Rights Reserved
  *************************************************/
-import addPermissionsController from './addPermissions.controller';
+import controller from './rbac-resource.controller';
 
 /* jshint unused: vars */
 export default ['templateUrl', '$state',
@@ -16,8 +16,8 @@ export default ['templateUrl', '$state',
                 teamsDataset: '=',
                 resourceData: '=',
             },
-            controller: addPermissionsController,
+            controller: controller,
-            templateUrl: templateUrl('access/addPermissions/addPermissions'),
+            templateUrl: templateUrl('access/add-rbac-resource/rbac-resource'),
             link: function(scope, element, attrs) {
                 scope.toggleFormTabs('users');
                 $('#add-permissions-modal').modal('show');

awx/ui/client/src/access/add-rbac-resource/rbac-resource.partial.html

@@ -46,10 +46,10 @@
                 </div>
 
                 <div id="AddPermissions-users" class="AddPermissions-list" ng-show="usersSelected">
-                    <add-permissions-list view="Users" all-selected="allSelected" dataset="usersDataset"></add-permissions-list>
+                    <rbac-multiselect-list view="Users" all-selected="allSelected" dataset="usersDataset"></rbac-multiselect-list>
                 </div>
                 <div id="AddPermissions-teams" class="AddPermissions-list" ng-show="teamsSelected">
-                    <add-permissions-list view="Teams" all-selected="allSelected" dataset="teamsDataset"></add-permissions-list>
+                    <rbac-multiselect-list view="Teams" all-selected="allSelected" dataset="teamsDataset"></rbac-multiselect-list>
                 </div>
 
                 <div class="AddPermissions-separator"
@@ -61,7 +61,7 @@
                         2
                     </span>
                     Please assign roles to the selected users/teams
-                    <div class="AddPermissions-keyToggle"
+                    <div class="AddPermissions-keyToggle btn"
                         ng-class="{'is-active': showKeyPane}"
                         ng-click="toggleKeyPane()">
                         Key
@@ -91,8 +91,8 @@
                                 {{ obj.type }}
                             </span>
                         </div>
-                        <role-select class="AddPermissions-roleSelect">
+                        <rbac-multiselect-role class="AddPermissions-roleSelect" roles="roles" model="obj.roles">
-                        </role-select>
+                        </rbac-multiselect-role>
                         <button class="AddPermissions-roleRemove"
                             ng-click="removeObject(obj)">
                             <i class="fa fa-times"></i>

awx/ui/client/src/access/add-rbac.block.less

@@ -1,4 +1,4 @@
-@import "../../shared/branding/colors.default.less";
+@import "../shared/branding/colors.default.less";
 
 /** @define AddPermissions */
 
@@ -168,13 +168,14 @@
 .AddPermissions-keyToggle {
     margin-left: auto;
     text-transform: uppercase;
-    padding: 3px 9px;
-    font-size: 12px;
     background-color: @default-bg;
     border-radius: 5px;
     color: @default-interface-txt;
     border: 1px solid @d7grey;
     cursor: pointer;
+    width: 70px;
+    height: 34px;
+    line-height: 20px;
 }
 
 .AddPermissions-keyToggle:hover {
@@ -185,6 +186,9 @@
     background-color: @default-link;
     border-color: @default-link;
     color: @default-bg;
+    &:hover{
+     background-color: @default-link-hov;
+    }
 }
 
 .AddPermissions-keyPane {

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

@@ -1,47 +0,0 @@
-/*************************************************
- * Copyright (c) 2015 Ansible, Inc.
- *
- * All Rights Reserved
- *************************************************/
-
-/* jshint unused: vars */
-export default ['addPermissionsTeamsList', 'addPermissionsUsersList', '$compile', 'generateList', 'GetBasePath', 'SelectionInit', function(addPermissionsTeamsList,
-    addPermissionsUsersList, $compile, generateList,
-    GetBasePath, SelectionInit) {
-    return {
-        restrict: 'E',
-        scope: {
-            allSelected: '=',
-            view: '@',
-            dataset: '='
-        },
-        template: "<div class='addPermissionsList-inner'></div>",
-        link: function(scope, element, attrs, ctrl) {
-            let listMap, list, list_html;
-
-            listMap = {Teams: addPermissionsTeamsList, Users: addPermissionsUsersList};
-            list = listMap[scope.view];
-            list_html = generateList.build({
-                mode: 'edit',
-                list: list
-            });
-
-            scope.list = listMap[scope.view];
-            scope[`${list.iterator}_dataset`] = scope.dataset.data;
-            scope[`${list.name}`] = scope[`${list.iterator}_dataset`].results;
-
-            scope.$watch(list.name, function(){
-                _.forEach(scope[`${list.name}`], isSelected);
-            });
-
-            function isSelected(item){
-                if(_.find(scope.allSelected, {id: item.id})){
-                    item.isSelected = true;
-                }
-                return item;
-            }
-            element.append(list_html);
-            $compile(element.contents())(scope);
-        }
-    };
-}];

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

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

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

@@ -4,9 +4,13 @@
  * All Rights Reserved
  *************************************************/
 
-import roleList from './roleList.directive';
+import roleList from './rbac-role-column/roleList.directive';
-import addPermissions from './addPermissions/main';
+import addRbacResource from './add-rbac-resource/main';
+import addRbacUserTeam from './add-rbac-user-team/main';
 
 export default
-    angular.module('access', [addPermissions.name])
+    angular.module('RbacModule', [
+    	addRbacResource.name,
+    	addRbacUserTeam.name
+    	])
         .directive('roleList', roleList);

awx/ui/client/src/access/rbac-multiselect/main.js

@@ -4,12 +4,14 @@
  * All Rights Reserved
  *************************************************/
 
-import addPermissionsListDirective from './addPermissionsList.directive';
+import rbacMultiselectList from './rbac-multiselect-list.directive';
+import rbacMultiselectRole from './rbac-multiselect-role.directive';
 import teamsList from './permissionsTeams.list';
 import usersList from './permissionsUsers.list';
 
 export default
-    angular.module('addPermissionsListModule', [])
+    angular.module('rbacMultiselectModule', [])
-        .directive('addPermissionsList', addPermissionsListDirective)
+        .directive('rbacMultiselectList', rbacMultiselectList)
+        .directive('rbacMultiselectRole', rbacMultiselectRole)
         .factory('addPermissionsTeamsList', teamsList)
         .factory('addPermissionsUsersList', usersList);

awx/ui/client/src/access/rbac-multiselect/rbac-multiselect-list.directive.js

@@ -0,0 +1,80 @@
+/*************************************************
+ * Copyright (c) 2015 Ansible, Inc.
+ *
+ * All Rights Reserved
+ *************************************************/
+
+/* jshint unused: vars */
+export default ['addPermissionsTeamsList', 'addPermissionsUsersList', 'TemplateList', 'ProjectList', 
+    'InventoryList', 'CredentialList', '$compile', 'generateList', 'GetBasePath', 'SelectionInit', 
+    function(addPermissionsTeamsList, addPermissionsUsersList, TemplateList, ProjectList,
+    InventoryList, CredentialList, $compile, generateList, GetBasePath, SelectionInit) {
+    return {
+        restrict: 'E',
+        scope: {
+            allSelected: '=',
+            view: '@',
+            dataset: '='
+        },
+        template: "<div class='addPermissionsList-inner'></div>",
+        link: function(scope, element, attrs, ctrl) {
+            let listMap, list, list_html;
+
+            listMap = {
+                Teams: addPermissionsTeamsList, 
+                Users: addPermissionsUsersList,
+                Projects: ProjectList,
+                Templates: TemplateList,
+                Inventories: InventoryList,
+                Credentials: CredentialList
+            };
+            list = _.cloneDeep(listMap[scope.view]);
+            list.multiSelect = true;
+            list.multiSelectExtended = true;
+            list.listTitleBadge = false;
+            delete list.actions;
+            delete list.fieldActions;
+            
+            if (scope.view !== 'Users' && scope.view !== 'Teams' && scope.view !=='Projects' && scope.view !== 'Inventories'){
+                list.fields = {
+                    name: list.fields.name,
+                    description: list.fields.description
+                };
+            } else if (scope.view === 'Projects'){
+                list.fields = {
+                    name: list.fields.name,
+                    scm_type: list.fields.scm_type
+                };
+            } else if (scope.view === 'Inventories'){
+                list.fieds = {
+                    name: list.fields.name,
+                    organization: list.fields.organization
+                };
+            }
+
+            list_html = generateList.build({
+                mode: 'edit',
+                list: list,
+                related: false,
+                title: false
+            });
+
+            scope.list = list;
+            scope[`${list.iterator}_dataset`] = scope.dataset.data;
+            scope[`${list.name}`] = scope[`${list.iterator}_dataset`].results;
+
+            scope.$watch(list.name, function(){
+                _.forEach(scope[`${list.name}`], isSelected);
+            });
+
+            function isSelected(item){
+                if(_.find(scope.allSelected, {id: item.id})){
+                    item.isSelected = true;
+                }
+                return item;
+            }
+            element.append(list_html);
+            $compile(element.contents())(scope);
+        }
+    };
+}];

awx/ui/client/src/access/rbac-multiselect/rbac-multiselect-role.directive.js

@@ -11,8 +11,12 @@ export default
         function(CreateSelect2) {
             return {
                 restrict: 'E',
-                scope: false,
+                scope: {
-                template: '<select ng-cloak class="AddPermissions-selectHide roleSelect2 form-control" ng-model="obj.roles" ng-options="role.label for role in roles | filter:{label: \'!Read\'} track by role.value" multiple required></select>',
+                    roles: '=',
+                    model: '='
+                },
+                // @issue why is the read-only role ommited from this selection?
+                template: '<select ng-cloak class="AddPermissions-selectHide roleSelect2 form-control" ng-model="model" ng-options="role.name for role in roles track by role.id" multiple required></select>',
                 link: function(scope, element, attrs, ctrl) {
                     CreateSelect2({
                         element: '.roleSelect2',

awx/ui/client/src/access/rbac-role-column/roleList.block.less

@@ -1,5 +1,5 @@
 /** @define RoleList */
-@import "../shared/branding/colors.default.less";
+@import "../../shared/branding/colors.default.less";
 
 .RoleList {
     display: flex;

awx/ui/client/src/access/rbac-role-column/roleList.directive.js

@@ -5,7 +5,7 @@ export default
             return {
                 restrict: 'E',
                 scope: true,
-                templateUrl: templateUrl('access/roleList'),
+                templateUrl: templateUrl('access/rbac-role-list/roleList'),
                 link: function(scope, element, attrs) {
                     // given a list of roles (things like "project
                     // auditor") which are pulled from two different