Cleanup to users' state tree

In order to add additional route flexibility for the users-tokens states

Removes unnecessary ui-view from form-generator

Adjust nested ui-view target

found during PR feedback

awx/ui/client/features/users/tokens/users-tokens-add-application.route.js

@@ -13,8 +13,7 @@ export default {
         }
     },
     data: {
-        basePath: 'applications',
+        basePath: 'applications'
-        formChildState: true
     },
     ncyBreadcrumb: {
         skip: true

awx/ui/client/features/users/tokens/users-tokens-add.partial.html

@@ -9,7 +9,7 @@
             <at-input-select col="4" tab="3" state="vm.form.scope"></at-input-select>
 
             <at-action-group col="12" pos="right">
-                <at-form-action type="cancel" to="tokens"></at-form-action>
+                <at-form-action type="cancel" to="users.edit.tokens"></at-form-action>
                 <at-form-action type="save"></at-form-action>
             </at-action-group>
         </at-form>

awx/ui/client/features/users/tokens/users-tokens-add.route.js

@@ -30,7 +30,7 @@ export default {
         label: N_('CREATE TOKEN')
     },
     views: {
-        'preFormView@users.edit': {
+        'preFormView@users': {
             templateUrl: addTemplate,
             controller: AddController,
             controllerAs: 'vm'

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

@@ -167,7 +167,6 @@ angular.module('FormGenerator', [GeneratorHelpers.name, 'Utilities', listGenerat
             wrapPanel(html, ignorePanel){
                 if(ignorePanel) {
                     return `
-                    <div ui-view="preFormView"></div>
                     <div>
                     ${html}
                     <div ui-view="related"></div>
@@ -176,7 +175,6 @@ angular.module('FormGenerator', [GeneratorHelpers.name, 'Utilities', listGenerat
                 }
                 else {
                     return `
-                    <div ui-view="preFormView"></div>
                     ${MessageBar(this.form)}
                     <div class="Panel">
                     ${html}

awx/ui/client/src/users/add/users-add.controller.js

@@ -14,10 +14,10 @@ const user_type_options = [
 
 export default ['$scope', '$rootScope', 'UserForm', 'GenerateForm', 'Rest',
     'Alert', 'ProcessErrors', 'ReturnToCaller', 'GetBasePath',
-    'Wait', 'CreateSelect2', '$state', '$location', 'i18n',
+    'Wait', 'CreateSelect2', '$state', '$location', 'i18n', 'canAdd',
     function($scope, $rootScope, UserForm, GenerateForm, Rest, Alert,
     ProcessErrors, ReturnToCaller, GetBasePath, Wait, CreateSelect2,
-    $state, $location, i18n) {
+    $state, $location, i18n, canAdd) {
 
         var defaultUrl = GetBasePath('organizations'),
             form = UserForm;
@@ -28,6 +28,7 @@ export default ['$scope', '$rootScope', 'UserForm', 'GenerateForm', 'Rest',
             // apply form definition's default field values
             GenerateForm.applyDefaults(form, $scope);
 
+            $scope.canAdd = canAdd;
             $scope.isAddForm = true;
             $scope.ldap_user = false;
             $scope.not_ldap_user = !$scope.ldap_user;

awx/ui/client/src/users/edit/users-edit.controller.js

@@ -14,10 +14,10 @@ const user_type_options = [
 
 export default ['$scope', '$rootScope', '$stateParams', 'UserForm', 'Rest',
     'ProcessErrors', 'GetBasePath', 'Wait', 'CreateSelect2',
-    '$state', 'i18n', 'resolvedModels',
+    '$state', 'i18n', 'resolvedModels', 'resourceData',
     function($scope, $rootScope, $stateParams, UserForm, Rest, ProcessErrors,
-    GetBasePath, Wait, CreateSelect2, $state, i18n, models) {
+    GetBasePath, Wait, CreateSelect2, $state, i18n, models, resourceData) {
-
+        
         for (var i = 0; i < user_type_options.length; i++) {
             user_type_options[i].label = i18n._(user_type_options[i].label);
         }
@@ -26,7 +26,10 @@ export default ['$scope', '$rootScope', '$stateParams', 'UserForm', 'Rest',
         var form = UserForm,
             master = {},
             id = $stateParams.user_id,
-            defaultUrl = GetBasePath('users') + id;
+            defaultUrl = GetBasePath('users') + id,
+            user_obj = resourceData.data;
+            
+        $scope.breadcrumb.user_name = user_obj.username;
 
         init();
 
@@ -40,49 +43,39 @@ export default ['$scope', '$rootScope', '$stateParams', 'UserForm', 'Rest',
             $scope.user_type = user_type_options[0];
             $scope.$watch('user_type', user_type_sync($scope));
             $scope.$watch('is_superuser', hidePermissionsTabSmartSearchAndPaginationIfSuperUser($scope));
-            Rest.setUrl(defaultUrl);
+            $scope.user_id = id;
-            Wait('start');
+            $scope.ldap_user = (user_obj.ldap_dn !== null && user_obj.ldap_dn !== undefined && user_obj.ldap_dn !== '') ? true : false;
-            Rest.get(defaultUrl).then(({data}) => {
+            $scope.not_ldap_user = !$scope.ldap_user;
-                    $scope.user_id = id;
+            master.ldap_user = $scope.ldap_user;
-                    $scope.ldap_user = (data.ldap_dn !== null && data.ldap_dn !== undefined && data.ldap_dn !== '') ? true : false;
+            $scope.socialAuthUser = (user_obj.auth.length > 0) ? true : false;
-                    $scope.not_ldap_user = !$scope.ldap_user;
+            $scope.external_account = user_obj.external_account;
-                    master.ldap_user = $scope.ldap_user;
-                    $scope.socialAuthUser = (data.auth.length > 0) ? true : false;
-                    $scope.external_account = data.external_account;
 
-                    $scope.user_type = $scope.user_type_options[0];
+            $scope.user_type = $scope.user_type_options[0];
-                    $scope.is_system_auditor = false;
+            $scope.is_system_auditor = false;
-                    $scope.is_superuser = false;
+            $scope.is_superuser = false;
-                    if (data.is_system_auditor) {
+            if (user_obj.is_system_auditor) {
-                        $scope.user_type = $scope.user_type_options[1];
+                $scope.user_type = $scope.user_type_options[1];
-                        $scope.is_system_auditor = true;
+                $scope.is_system_auditor = true;
-                    }
+            }
-                    if (data.is_superuser) {
+            if (user_obj.is_superuser) {
-                        $scope.user_type = $scope.user_type_options[2];
+                $scope.user_type = $scope.user_type_options[2];
-                        $scope.is_superuser = true;
+                $scope.is_superuser = true;
-                    }
+            }
 
-                    $scope.user_obj = data;
+            $scope.user_obj = user_obj;
-                    $scope.name = data.username;
+            $scope.name = user_obj.username;
 
-                    CreateSelect2({
+            CreateSelect2({
-                        element: '#user_user_type',
+                element: '#user_user_type',
-                        multiple: false
+                multiple: false
-                    });
+            });
 
-                    $scope.$watch('user_obj.summary_fields.user_capabilities.edit', function(val) {
+            $scope.$watch('user_obj.summary_fields.user_capabilities.edit', function(val) {
-                        $scope.canAdd = (val === false) ? false : true;
+                $scope.canAdd = (val === false) ? false : true;
-                    });
+            });
 
-                    setScopeFields(data);
+            setScopeFields(user_obj);
-                    Wait('stop');
+               
-                })
-                .catch(({data, status}) => {
-                    ProcessErrors($scope, data, status, null, {
-                        hdr: i18n._('Error!'),
-                        msg: i18n.sprintf(i18n._('Failed to retrieve user: %s. GET status: '), $stateParams.id) + status
-                    });
-                });
         }
 
         function user_type_sync($scope) {

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

@@ -10,12 +10,11 @@ import UsersEdit from './edit/users-edit.controller';
 import UserForm from './users.form';
 import UserList from './users.list';
 
+import userListRoute from './users.route';
 import UserTokensListRoute from '../../features/users/tokens/users-tokens-list.route';
 import UserTokensAddRoute from '../../features/users/tokens/users-tokens-add.route';
 import UserTokensAddApplicationRoute from '../../features/users/tokens/users-tokens-add-application.route';
 
-import { N_ } from '../i18n';
-
 export default
 angular.module('Users', [])
     .controller('UsersList', UsersList)
@@ -29,20 +28,52 @@ angular.module('Users', [])
             let stateExtender = $stateExtenderProvider.$get();
 
             function generateStateTree() {
-                let userTree = stateDefinitions.generateTree({
+                let userAdd = stateDefinitions.generateTree({
-                    parent: 'users',
+                    name: 'users.add',
-                    modes: ['add', 'edit'],
+                    url: '/add',
-                    list: 'UserList',
+                    modes: ['add'],
                     form: 'UserForm',
                     controllers: {
-                        list: UsersList,
+                        add: 'UsersAdd'
-                        add: UsersAdd,
+                    },
-                        edit: UsersEdit
+                    resolve: {
+                        add: {
+                            canAdd: ['rbacUiControlService', '$state', function(rbacUiControlService, $state) {
+                                return rbacUiControlService.canAdd('users')
+                                    .then(function(res) {
+                                        return res.canAdd;
+                                    })
+                                    .catch(function() {
+                                        $state.go('users');
+                                    });
+                            }],
+                            resolvedModels: ['MeModel', '$q',  function(Me, $q) {
+                                const promises= {
+                                    me: new Me('get').then((me) => me.extend('get', 'admin_of_organizations'))
+                                };
+    
+                                return $q.all(promises);
+                            }]
+                        }
+                    }
+                });
+
+                let userEdit = stateDefinitions.generateTree({
+                    name: 'users.edit',
+                    url: '/:user_id',
+                    modes: ['edit'],
+                    form: 'UserForm',
+                    parent: 'users',
+                    controllers: {
+                        edit: 'UsersEdit'
                     },
                     data: {
                         activityStream: true,
                         activityStreamTarget: 'user'
                     },
+                    breadcrumbs: { 
+                        edit: "{{breadcrumb.user_name}}"
+                    },
                     resolve: {
                         edit: {
                             resolvedModels: ['MeModel', '$q',  function(Me, $q) {
@@ -50,31 +81,21 @@ angular.module('Users', [])
                                     me: new Me('get').then((me) => me.extend('get', 'admin_of_organizations'))
                                 };
 
-                                return $q.all(promises);
-                            }]
-                        },
-                        list: {
-                            resolvedModels: ['MeModel', '$q',  function(Me, $q) {
-                                const promises= {
-                                    me: new Me('get')
-                                };
-
                                 return $q.all(promises);
                             }]
                         }
                     },
-                    ncyBreadcrumb: {
-                        label: N_('USERS')
-                    }
                 });
-
+                
                 return Promise.all([
-                    userTree
+                    userAdd, 
+                    userEdit
                 ]).then((generated) => {
                     return {
                         states: _.reduce(generated, (result, definition) => {
                             return result.concat(definition.states);
                         }, [
+                            stateExtender.buildDefinition(userListRoute),
                             stateExtender.buildDefinition(UserTokensListRoute),
                             stateExtender.buildDefinition(UserTokensAddRoute),
                             stateExtender.buildDefinition(UserTokensAddApplicationRoute)

awx/ui/client/src/users/users.partial.html

@@ -0,0 +1,6 @@
+<div class="tab-pane" id="users-panel">
+    <aw-limit-panels max-panels="2" panel-container="users-panel"></aw-limit-panels>
+    <div ui-view="preFormView"></div>
+    <div ui-view="form"></div>
+    <div ui-view="list"></div>
+</div>

awx/ui/client/src/users/users.route.js

@@ -0,0 +1,55 @@
+import {templateUrl} from '../shared/template-url/template-url.factory';
+import { N_ } from '../i18n';
+
+export default {
+    name: 'users',
+    route: '/users',
+    ncyBreadcrumb: {
+        label: N_('USERS')
+    },
+    data: {
+        activityStream: true,
+        activityStreamTarget: 'user'
+    },
+    params: {
+        user_search: {
+            value: {
+                page_size: 20,
+                order_by: 'username'
+            }
+        }
+    },
+    views: {
+        '@': {
+            templateUrl: templateUrl('users/users')
+        },
+        'list@users': {
+            templateProvider: function(UserList, generateList) {
+                let html = generateList.build({
+                    list: UserList,
+                    mode: 'edit'
+                });
+                html = generateList.wrapPanel(html);
+                return html;
+            },
+            controller: 'UsersList'
+        }
+    },
+    searchPrefix: 'user',
+    resolve: {
+        Dataset: ['UserList', 'QuerySet', '$stateParams', 'GetBasePath',
+            function(list, qs, $stateParams, GetBasePath) {
+                let path = GetBasePath(list.basePath) || GetBasePath(list.name);
+                return qs.search(path, $stateParams[`${list.iterator}_search`]);
+            }
+        ],
+        resolvedModels: ['MeModel', '$q',  function(Me, $q) {
+            const promises= {
+                me: new Me('get')
+            };
+
+            return $q.all(promises);
+        }]
+        
+    }
+};