Update project structure

awx/ui/client/components/input/select.directive.js

@@ -1,45 +0,0 @@
-let eventService;
-let pathService;
-
-function link (scope, el, attrs, form) {
-    form.use('input', scope, el);
-
-    let apply = eventService.listenWith(scope);
-
-    let input = el.find('input')[0];
-    let select = el.find('select')[0];
-
-    input.addEventListener('focus', apply(select.focus));
-    select.addEventListener('mousedown', apply(() => scope.open = !scope.open));
-    select.addEventListener('change', apply(() => scope.open = false));
-    select.addEventListener('focus', apply(() => input.classList.add('at-Input--focus')));
-    select.addEventListener('blur', apply(() => {
-        input.classList.remove('at-Input--focus');
-        scope.open = scope.open && false;
-    }));
-}
-
-function atInputSelect (_eventService_, _pathService_) {
-    eventService = _eventService_;
-    pathService = _pathService_;
-
-    return {
-        restrict: 'E',
-        transclude: true,
-        replace: true,
-        require: '^^at-form',
-        templateUrl: pathService.getPartialPath('components/input/select'),
-        link,
-        scope: {
-            config: '=',
-            col: '@'
-        }
-    };
-}
-
-atInputSelect.$inject = [
-    'EventService',
-    'PathService'
-];
-
-export default atInputSelect;

awx/ui/client/features/_index.less

@@ -0,0 +1 @@
+@import 'credentials/_index';

awx/ui/client/features/credentials/index.js

@@ -1,7 +1,7 @@
 import CredentialList from './credentials.list.js';
 import ListController from './list/credentials-list.controller';
 import AddController from './add-credentials.controller.js';
-import { N_ } from '../i18n';
+import { N_ } from '../../src/i18n';
 
 function config ($stateExtenderProvider, pathServiceProvider) {
     let pathService = pathServiceProvider.$get();

awx/ui/client/features/index.js

@@ -0,0 +1,5 @@
+import './credentials';
+
+angular.module('at.features', [
+    'at.features.credentials'
+]);

awx/ui/client/lib/components/form/form.directive.js

@@ -30,7 +30,7 @@ function trackInput (componentElement) {
        componentElement.find('input').focus();
     }
 
-    vm.inputs.push(input);
+    vm.inputs.push(input)
 
     return input;
 }
@@ -47,6 +47,18 @@ function trackAction (componentElement) {
     return action;
 }
 
+function update () {
+    let vm = this;
+    
+    vm.inputs.forEach(input => console.log(input));
+}
+
+function remove (id) {
+    let vm = this;
+
+    delete inputs[id];
+}
+
 function AtFormController () {
     let vm = this;
 
@@ -56,6 +68,8 @@ function AtFormController () {
     vm.use = use;
     vm.trackInput = trackInput;
     vm.trackAction = trackAction;
+    vm.update = update;
+    vm.remove = remove;
 }
 
 function atForm (pathService) {

awx/ui/client/lib/components/index.js

@@ -14,7 +14,7 @@ import toggleButton from './toggle/button.directive';
 import toggleContent from './toggle/content.directive';
 
 angular
-    .module('at.components', [])
+    .module('at.lib.components', [])
     .directive('atAction', action)
     .directive('atActionGroup', actionGroup)
     .directive('atBadge', badge)

awx/ui/client/lib/components/input/select.directive.js

@@ -0,0 +1,55 @@
+let eventService;
+let pathService;
+
+function link (scope, el, attrs, form) {
+    form.use('input', scope, el);  // avoid passing scope? assign to scope.meta instead or reference form properties in view
+
+    let input = el.find('input')[0];
+    let select = el.find('select')[0];
+
+    let listeners = eventService.addListeners(scope, [
+        [input, 'focus', () => select.focus()],
+        [select, 'mousedown', () => scope.open = !scope.open],
+        [select, 'focus', () => input.classList.add('at-Input--focus')],
+        [select, 'change', () => scope.open = false],
+        [select, 'blur', () => {
+            input.classList.remove('at-Input--focus');
+            scope.open = scope.open && false;
+        }]
+    ]);
+
+    scope.$on('$destroy', () => eventService.remove(listeners));
+
+    /*
+     * Should notify form on:
+     *  - valid (required, passes validation) state change  
+     *
+     * Should get from form:
+     *  - display as disabled
+     */
+}
+
+function atInputSelect (_eventService_, _pathService_) {
+    eventService = _eventService_;
+    pathService = _pathService_;
+
+    return {
+        restrict: 'E',
+        transclude: true,
+        replace: true,
+        require: '^^at-form',
+        templateUrl: pathService.getPartialPath('components/input/select'),
+        link,
+        scope: {
+            config: '=',
+            col: '@'
+        }
+    };
+}
+
+atInputSelect.$inject = [
+    'EventService',
+    'PathService'
+];
+
+export default atInputSelect;

awx/ui/client/lib/event.service.js

@@ -1,16 +0,0 @@
-function listenWith (scope) {
-    return fn => apply(scope, fn);
-}
-
-function apply (scope, fn) {
-    return () => scope.$apply(fn);
-}
-
-function EventService () {
-    return {
-        listenWith,
-        apply
-    };
-}
-
-export default EventService;

awx/ui/client/lib/models/index.js

@@ -8,7 +8,7 @@ function config ($resourceProvider) {
 config.$inject = ['$resourceProvider'];
 
 angular
-    .module('at.models', [])
+    .module('at.lib.models', [])
     .config(config)
     .factory('Base', Base)
     .factory('CredentialType', CredentialType);

awx/ui/client/lib/services/event.service.js

@@ -0,0 +1,38 @@
+function addListeners (scope, list) {
+    let listeners = [];
+
+    list.forEach(args => {
+        listeners.push(addListener.call(null, scope, ...args));
+    });
+
+    return listeners;
+}
+
+function addListener (scope, el, name, fn, type) {
+    type = type || '$apply';
+
+    let listener = {
+        fn: () => scope[type](fn),
+        name,
+        el
+    };
+
+    listener.el.addEventListener(listener.name, listener.fn);
+
+    return listener;
+}
+
+function remove (listeners) {
+    listeners.forEach(listener => {
+        listener.el.removeEventListener(listener.name, listener.fn);
+    });
+}
+
+function EventService () {
+    return {
+        addListeners,
+        remove
+    };
+}
+
+export default EventService;

awx/ui/client/lib/services/index.js

@@ -2,6 +2,6 @@ import EventService from './event.service';
 import PathService from './path.service';
 
 angular
-    .module('at.lib', [])
+    .module('at.lib.services', [])
     .factory('EventService', EventService)
     .factory('PathService', PathService); 

awx/ui/client/lib/theme/index.less

@@ -4,8 +4,9 @@
 @import '_utility';
 @import '_common';
 
-// Component and feature specific aggregated styles
+// Aggregated component and feature specific styles
 @import '../components/_index';
+@import '../../features/_index';
 
 /*
  * Temporary overrides used only during the transition away from old style

awx/ui/client/src/app.js

@@ -72,10 +72,10 @@ import footer from './footer/main';
 import scheduler from './scheduler/main';
 import instanceGroups from './instance-groups/main';
 
-import '../components';
-import '../models';
-import '../lib';
-import './credentials';
+import '../lib/components';
+import '../lib/models';
+import '../lib/services';
+import '../features';
 
 var tower = angular.module('Tower', [
     // how to add CommonJS / AMD  third-party dependencies:
@@ -137,10 +137,10 @@ var tower = angular.module('Tower', [
     'features',
 
     'ngResource',
-    'at.components',
-    'at.models',
-    'at.lib',
-    'at.features.credentials'
+    'at.lib.components',
+    'at.lib.models',
+    'at.lib.services',
+    'at.features',
 ])
 
     .constant('AngularScheduler.partials', urlPrefix + 'lib/angular-scheduler/lib/')

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

@@ -1,178 +0,0 @@
-/*************************************************
- * Copyright (c) 2016 Ansible, Inc.
- *
- * All Rights Reserved
- *************************************************/
-
-export default ['$scope', '$rootScope',
-    '$log', '$stateParams', 'CredentialForm', 'GenerateForm', 'Rest',
-    'ProcessErrors', 'ClearScope', 'GetBasePath', 'GetChoices', 'Empty', 'KindChange', 'BecomeMethodChange',
-    'OwnerChange', 'CredentialFormSave', '$state', 'CreateSelect2', 'i18n',
-    function($scope, $rootScope, $log,
-    $stateParams, CredentialForm, GenerateForm, Rest, ProcessErrors,
-    ClearScope, GetBasePath, GetChoices, Empty, KindChange, BecomeMethodChange,
-    OwnerChange, CredentialFormSave, $state, CreateSelect2, i18n) {
-
-        ClearScope();
-
-        // Inject dynamic view
-        var form = CredentialForm,
-            defaultUrl = GetBasePath('credentials'),
-            url;
-
-        init();
-
-        function init() {
-            $scope.canEditOrg = true;
-            // Load the list of options for Kind
-            GetChoices({
-                scope: $scope,
-                url: defaultUrl,
-                field: 'kind',
-                variable: 'credential_kind_options'
-            });
-
-            GetChoices({
-                scope: $scope,
-                url: defaultUrl,
-                field: 'become_method',
-                variable: 'become_options'
-            });
-
-            CreateSelect2({
-                element: '#credential_become_method',
-                multiple: false
-            });
-
-            CreateSelect2({
-                element: '#credential_kind',
-                multiple: false
-            });
-
-            // apply form definition's default field values
-            GenerateForm.applyDefaults(form, $scope);
-
-            $scope.keyEntered = false;
-            $scope.permissionsTooltip = i18n._('Please save before assigning permissions');
-
-            // determine if the currently logged-in user may share this credential
-            // previous commentary said: "$rootScope.current_user isn't available because a call to the config endpoint hasn't finished resolving yet"
-            // I'm 99% sure this state's will never resolve block will be rejected if setup surrounding config endpoint hasn't completed
-            if ($rootScope.current_user && $rootScope.current_user.is_superuser) {
-                $scope.canShareCredential = true;
-            } else {
-                Rest.setUrl(GetBasePath('users') + `${$rootScope.current_user.id}/admin_of_organizations`);
-                Rest.get()
-                    .success(function(data) {
-                        $scope.canShareCredential = (data.count) ? true : false;
-                    }).error(function(data, status) {
-                        ProcessErrors($scope, data, status, null, { hdr: 'Error!', msg: 'Failed to find if users is admin of org' + status });
-                    });
-            }
-        }
-
-        if (!Empty($stateParams.user_id)) {
-            // Get the username based on incoming route
-            $scope.owner = 'user';
-            $scope.user = $stateParams.user_id;
-            OwnerChange({ scope: $scope });
-            url = GetBasePath('users') + $stateParams.user_id + '/';
-            Rest.setUrl(url);
-            Rest.get()
-                .success(function(data) {
-                    $scope.user_username = data.username;
-                })
-                .error(function(data, status) {
-                    ProcessErrors($scope, data, status, null, { hdr: 'Error!', msg: 'Failed to retrieve user. GET status: ' + status });
-                });
-        } else if (!Empty($stateParams.team_id)) {
-            // Get the username based on incoming route
-            $scope.owner = 'team';
-            $scope.team = $stateParams.team_id;
-            OwnerChange({ scope: $scope });
-            url = GetBasePath('teams') + $stateParams.team_id + '/';
-            Rest.setUrl(url);
-            Rest.get()
-                .success(function(data) {
-                    $scope.team_name = data.name;
-                })
-                .error(function(data, status) {
-                    ProcessErrors($scope, data, status, null, { hdr: 'Error!', msg: 'Failed to retrieve team. GET status: ' + status });
-                });
-        } else {
-            // default type of owner to a user
-            $scope.owner = 'user';
-            OwnerChange({ scope: $scope });
-        }
-
-        $scope.$watch("ssh_key_data", function(val) {
-            if (val === "" || val === null || val === undefined) {
-                $scope.keyEntered = false;
-                $scope.ssh_key_unlock_ask = false;
-                $scope.ssh_key_unlock = "";
-            } else {
-                $scope.keyEntered = true;
-            }
-        });
-
-        // Handle Kind change
-        $scope.kindChange = function() {
-            KindChange({ scope: $scope, form: form, reset: true });
-        };
-
-        $scope.becomeMethodChange = function() {
-            BecomeMethodChange({ scope: $scope });
-        };
-
-        // Save
-        $scope.formSave = function() {
-            if ($scope[form.name + '_form'].$valid) {
-                CredentialFormSave({ scope: $scope, mode: 'add' });
-            }
-        };
-
-        $scope.formCancel = function() {
-            $state.go('credentials');
-        };
-
-        // Password change
-        $scope.clearPWConfirm = function(fld) {
-            // If password value changes, make sure password_confirm must be re-entered
-            $scope[fld] = '';
-            $scope[form.name + '_form'][fld].$setValidity('awpassmatch', false);
-        };
-
-        // Respond to 'Ask at runtime?' checkbox
-        $scope.ask = function(fld, associated) {
-            if ($scope[fld + '_ask']) {
-                $scope[fld] = 'ASK';
-                $("#" + form.name + "_" + fld + "_input").attr("type", "text");
-                $("#" + form.name + "_" + fld + "_show_input_button").html("Hide");
-                if (associated !== "undefined") {
-                    $("#" + form.name + "_" + fld + "_input").attr("type", "password");
-                    $("#" + form.name + "_" + fld + "_show_input_button").html("Show");
-                    $scope[associated] = '';
-                    $scope[form.name + '_form'][associated].$setValidity('awpassmatch', true);
-                }
-            } else {
-                $scope[fld] = '';
-                $("#" + form.name + "_" + fld + "_input").attr("type", "password");
-                $("#" + form.name + "_" + fld + "_show_input_button").html("Show");
-                if (associated !== "undefined") {
-                    $("#" + form.name + "_" + fld + "_input").attr("type", "text");
-                    $("#" + form.name + "_" + fld + "_show_input_button").html("Hide");
-                    $scope[associated] = '';
-                    $scope[form.name + '_form'][associated].$setValidity('awpassmatch', true);
-                }
-            }
-        };
-
-        // Click clear button
-        $scope.clear = function(fld, associated) {
-            $scope[fld] = '';
-            $scope[associated] = '';
-            $scope[form.name + '_form'][associated].$setValidity('awpassmatch', true);
-            $scope[form.name + '_form'].$setDirty();
-        };
-    }
-];

awx/ui/client/src/credentials/credentials.form.js

@@ -1,475 +0,0 @@
-/*************************************************
- * Copyright (c) 2015 Ansible, Inc.
- *
- * All Rights Reserved
- *************************************************/
-
- /**
- * @ngdoc function
- * @name forms.function:Credentials
- * @description This form is for adding/editing a Credential
-*/
-
-export default ['i18n', function(i18n) {
-        return {
-
-            addTitle: i18n._('CREATE CREDENTIAL'), //Legend in add mode
-            editTitle: '{{ name }}', //Legend in edit mode
-            name: 'credential',
-            // the top-most node of generated state tree
-            stateTree: 'credentials',
-            forceListeners: true,
-            subFormTitles: {
-                credentialSubForm: i18n._('Type Details'),
-            },
-
-            actions: {
-
-            },
-
-            fields: {
-                name: {
-                    label: i18n._('Name'),
-                    type: 'text',
-                    required: true,
-                    autocomplete: false,
-                    ngDisabled: '!(credential_obj.summary_fields.user_capabilities.edit || canAdd)'
-                },
-                description: {
-                    label: i18n._('Description'),
-                    type: 'text',
-                    ngDisabled: '!(credential_obj.summary_fields.user_capabilities.edit || canAdd)'
-                },
-                organization: {
-                    basePath: 'organizations',
-                    ngShow: 'canShareCredential',
-                    label: i18n._('Organization'),
-                    type: 'lookup',
-                    autopopulateLookup: false,
-                    list: 'OrganizationList',
-                    sourceModel: 'organization',
-                    sourceField: 'name',
-                    awPopOver: "<p>" + i18n._("If no organization is given, the credential can only be used by the user that creates the credential.  Organization admins and system administrators can assign an organization so that roles for the credential can be assigned to users and teams in that organization.") + "</p>",
-                    dataTitle: i18n._('Organization') + ' ',
-                    dataPlacement: 'bottom',
-                    dataContainer: "body",
-                    ngDisabled: '!(credential_obj.summary_fields.user_capabilities.edit || canAdd) || !canEditOrg',
-                    awLookupWhen: '(credential_obj.summary_fields.user_capabilities.edit || canAdd) && canEditOrg'
-                },
-                kind: {
-                    label: i18n._('Type'),
-                    excludeModal: true,
-                    type: 'select',
-                    ngOptions: 'kind.label for kind in credential_kind_options track by kind.value', //  select as label for value in array 'kind.label for kind in credential_kind_options',
-                    ngChange: 'kindChange()',
-                    required: true,
-                    awPopOver: '<dl>\n' +
-                            '<dt>' + i18n._('Machine') + '</dt>\n' +
-                            '<dd>' + i18n._('Authentication for remote machine access. This can include SSH keys, usernames, passwords, ' +
-                            'and sudo information. Machine credentials are used when submitting jobs to run playbooks against ' +
-                            'remote hosts.') + '</dd>' +
-                            '<dt>' + i18n._('Network') + '</dt>\n' +
-                            '<dd>' + i18n._('Authentication for network device access. This can include SSH keys, usernames, passwords, ' +
-                            'and authorize information. Network credentials are used when submitting jobs to run playbooks against ' +
-                            'network devices.') + '</dd>' +
-                            '<dt>' + i18n._('Source Control') + '</dt>\n' +
-                            '<dd>' + i18n._('Used to check out and synchronize playbook repositories with a remote source control ' +
-                            'management system such as Git, Subversion (svn), or Mercurial (hg). These credentials are ' +
-                            'used by Projects.') + '</dd>\n' +
-                            '<dt>' + i18n._('Others (Cloud Providers)') + '</dt>\n' +
-                            '<dd>' + i18n._('Usernames, passwords, and access keys for authenticating to the specified cloud or infrastructure ' +
-                            'provider. These are used for smart inventory sources and for cloud provisioning and deployment ' +
-                            'in playbook runs.') + '</dd>\n' +
-                            '</dl>\n',
-                    dataTitle: i18n._('Type'),
-                    dataPlacement: 'right',
-                    dataContainer: "body",
-                    hasSubForm: true,
-                    ngDisabled: '!(credential_obj.summary_fields.user_capabilities.edit || canAdd)'
-                },
-                access_key: {
-                    label: i18n._('Access Key'),
-                    type: 'text',
-                    ngShow: "kind.value == 'aws'",
-                    awRequiredWhen: {
-                        reqExpression: "aws_required",
-                        init: false
-                    },
-                    autocomplete: false,
-                    apiField: 'username',
-                    subForm: 'credentialSubForm',
-                    ngDisabled: '!(credential_obj.summary_fields.user_capabilities.edit || canAdd)'
-                },
-                secret_key: {
-                    label: i18n._('Secret Key'),
-                    type: 'sensitive',
-                    ngShow: "kind.value == 'aws'",
-                    ngDisabled: "secret_key_ask || !(credential_obj.summary_fields.user_capabilities.edit || canAdd)",
-                    awRequiredWhen: {
-                        reqExpression: "aws_required",
-                        init: false
-                    },
-                    autocomplete: false,
-                    clear: false,
-                    hasShowInputButton: true,
-                    apiField: 'password',
-                    subForm: 'credentialSubForm'
-                },
-                security_token: {
-                    label: i18n._('STS Token'),
-                    type: 'sensitive',
-                    ngShow: "kind.value == 'aws'",
-                    autocomplete: false,
-                    apiField: 'security_token',
-                    awPopOver: "<div>" + i18n._("Security Token Service (STS) is a web service that enables you to request temporary, limited-privilege credentials for AWS Identity and Access Management (IAM) users.") + "</div><div style='padding-top: 10px'>" +
-                               i18n.sprintf(i18n._("To learn more about the IAM STS Token, refer to the %sAmazon documentation%s."), "<a href='http://docs.aws.amazon.com/IAM/latest/UserGuide/id_credentials_temp.html' target='_blank'>", "</a>") + "</div>",
-                    hasShowInputButton: true,
-                    dataTitle: i18n._('STS Token'),
-                    dataPlacement: 'right',
-                    dataContainer: "body",
-                    subForm: 'credentialSubForm',
-                    ngDisabled: '!(credential_obj.summary_fields.user_capabilities.edit || canAdd)'
-                },
-                "host": {
-                    labelBind: 'hostLabel',
-                    type: 'text',
-                    ngShow: "kind.value == 'vmware' || kind.value == 'openstack' || kind.value === 'satellite6' || kind.value === 'cloudforms'",
-                    awPopOverWatch: "hostPopOver",
-                    awPopOver: i18n._("set in helpers/credentials"),
-                    dataTitle: i18n._('Host'),
-                    dataPlacement: 'right',
-                    dataContainer: "body",
-                    autocomplete: false,
-                    awRequiredWhen: {
-                        reqExpression: 'host_required',
-                        init: false
-                    },
-                    subForm: 'credentialSubForm',
-                    ngDisabled: '!(credential_obj.summary_fields.user_capabilities.edit || canAdd)'
-                },
-                "subscription": {
-                    label: i18n._("Subscription ID"),
-                    type: 'text',
-                    ngShow: "kind.value == 'azure' || kind.value == 'azure_rm'",
-                    awRequiredWhen: {
-                        reqExpression: 'subscription_required',
-                        init: false
-                    },
-
-
-                    autocomplete: false,
-                    awPopOver: '<p>' + i18n._('Subscription ID is an Azure construct, which is mapped to a username.') + '</p>',
-                    dataTitle: i18n._('Subscription ID'),
-                    dataPlacement: 'right',
-                    dataContainer: "body",
-                    subForm: 'credentialSubForm',
-                    ngDisabled: '!(credential_obj.summary_fields.user_capabilities.edit || canAdd)'
-                },
-                "username": {
-                    labelBind: 'usernameLabel',
-                    type: 'text',
-                    ngShow: "kind.value && kind.value !== 'aws' && " +
-                            "kind.value !== 'gce' && kind.value!=='azure'",
-                    awRequiredWhen: {
-                        reqExpression: 'username_required',
-                        init: false
-                    },
-                    autocomplete: false,
-                    subForm: "credentialSubForm",
-                    ngDisabled: '!(credential_obj.summary_fields.user_capabilities.edit || canAdd)'
-                },
-                "email_address": {
-                    labelBind: 'usernameLabel',
-                    type: 'email',
-                    ngShow: "kind.value === 'gce'",
-                    awRequiredWhen: {
-                        reqExpression: 'email_required',
-                        init: false
-                    },
-                    autocomplete: false,
-                    awPopOver: '<p>' + i18n.sprintf(i18n._('The email address assigned to the Google Compute Engine %sservice account.'), '<b><i>') + '</b></i></p>',
-                    dataTitle: i18n._('Email'),
-                    dataPlacement: 'right',
-                    dataContainer: "body",
-                    subForm: 'credentialSubForm',
-                    ngDisabled: '!(credential_obj.summary_fields.user_capabilities.edit || canAdd)'
-                },
-                "api_key": {
-                    label: i18n._('API Key'),
-                    type: 'sensitive',
-                    ngShow: "kind.value == 'rax'",
-                    awRequiredWhen: {
-                        reqExpression: "rackspace_required",
-                        init: false
-                    },
-                    autocomplete: false,
-                    hasShowInputButton: true,
-                    clear: false,
-                    subForm: 'credentialSubForm',
-                    ngDisabled: '!(credential_obj.summary_fields.user_capabilities.edit || canAdd)'
-                },
-                "password": {
-                    labelBind: 'passwordLabel',
-                    type: 'sensitive',
-                    ngShow: "kind.value == 'scm' || kind.value == 'vmware' || kind.value == 'openstack'|| kind.value == 'satellite6'|| kind.value == 'cloudforms'|| kind.value == 'net' || kind.value == 'azure_rm'",
-                    clear: false,
-                    autocomplete: false,
-                    hasShowInputButton: true,
-                    awRequiredWhen: {
-                        reqExpression: "password_required",
-                        init: false
-                    },
-                    subForm: "credentialSubForm",
-                    ngDisabled: '!(credential_obj.summary_fields.user_capabilities.edit || canAdd)'
-                },
-                "ssh_password": {
-                    label: i18n._('Password'),
-                    type: 'sensitive',
-                    ngShow: "kind.value == 'ssh'",
-                    ngDisabled: "ssh_password_ask || !(credential_obj.summary_fields.user_capabilities.edit || canAdd)",
-                    subCheckbox: {
-                        variable: 'ssh_password_ask',
-                        text: i18n._('Ask at runtime?'),
-                        ngChange: 'ask(\'ssh_password\', \'undefined\')',
-                        ngDisabled: false,
-                    },
-                    hasShowInputButton: true,
-                    autocomplete: false,
-                    subForm: 'credentialSubForm'
-                },
-                "ssh_key_data": {
-                    labelBind: 'sshKeyDataLabel',
-                    type: 'textarea',
-                    ngShow: "kind.value == 'ssh' || kind.value == 'scm' || " +
-                            "kind.value == 'gce' || kind.value == 'azure' || kind.value == 'net'",
-                    awRequiredWhen: {
-                        reqExpression: 'key_required',
-                        init: true
-                    },
-                    class: 'Form-textAreaLabel Form-formGroup--fullWidth',
-                    elementClass: 'Form-monospace',
-
-
-                    awDropFile: true,
-                    rows: 10,
-                    awPopOver: i18n._("SSH key description"),
-                    awPopOverWatch:   "key_description",
-                    dataTitle: i18n._('Private Key'),
-                    dataPlacement: 'right',
-                    dataContainer: "body",
-                    subForm: "credentialSubForm",
-                    ngDisabled: '!(credential_obj.summary_fields.user_capabilities.edit || canAdd)'
-                },
-                "ssh_key_unlock": {
-                    label: i18n._('Private Key Passphrase'),
-                    type: 'sensitive',
-                    ngShow: "kind.value === 'ssh' || kind.value === 'scm' || kind.value === 'net'",
-                    ngDisabled: "keyEntered === false || ssh_key_unlock_ask || !(credential_obj.summary_fields.user_capabilities.edit || canAdd)",
-                    subCheckbox: {
-                        variable: 'ssh_key_unlock_ask',
-                        ngShow: "kind.value == 'ssh'",
-                        text: i18n._('Ask at runtime?'),
-                        ngChange: 'ask(\'ssh_key_unlock\', \'undefined\')',
-                        ngDisabled: "keyEntered === false"
-                    },
-                    hasShowInputButton: true,
-                    subForm: 'credentialSubForm'
-                },
-                "become_method": {
-                    label: i18n._("Privilege Escalation"),
-                    // hintText: "If your playbooks use privilege escalation (\"sudo: true\", \"su: true\", etc), you can specify the username to become, and the password to use here.",
-                    type: 'select',
-                    ngShow: "kind.value == 'ssh'",
-                    dataTitle: i18n._('Privilege Escalation'),
-                    ngOptions: 'become.label for become in become_options track by become.value',
-                    awPopOver: "<p>" + i18n.sprintf(i18n._("Specify a method for %s operations. " +
-                    "This is equivalent to specifying the %s parameter, where %s could be "+
-                    "%s"), "'become'", "<code>--become-method=BECOME_METHOD</code>", "<code>BECOME_METHOD</code>", "<code>sudo | su | pbrun | pfexec | runas</code>") + " <br>" + i18n.sprintf(i18n._("(defaults to %s)"), "<code>sudo</code>") + "</p>",
-                    dataPlacement: 'right',
-                    dataContainer: "body",
-                    subForm: 'credentialSubForm',
-                    ngDisabled: '!(credential_obj.summary_fields.user_capabilities.edit || canAdd)',
-                    ngChange: 'becomeMethodChange()',
-                },
-                "become_username": {
-                    labelBind: 'becomeUsernameLabel',
-                    type: 'text',
-                    ngShow: "(kind.value == 'ssh' && (become_method && become_method.value)) ",
-
-
-                    autocomplete: false,
-                    subForm: 'credentialSubForm',
-                    ngDisabled: '!(credential_obj.summary_fields.user_capabilities.edit || canAdd)'
-                },
-                "become_password": {
-                    labelBind: 'becomePasswordLabel',
-                    type: 'sensitive',
-                    ngShow: "(kind.value == 'ssh' && (become_method && become_method.value)) ",
-                    ngDisabled: "become_password_ask || !(credential_obj.summary_fields.user_capabilities.edit || canAdd)",
-                    subCheckbox: {
-                        variable: 'become_password_ask',
-                        text: i18n._('Ask at runtime?'),
-                        ngChange: 'ask(\'become_password\', \'undefined\')',
-                        ngDisabled: false,
-                    },
-                    hasShowInputButton: true,
-                    autocomplete: false,
-                    subForm: 'credentialSubForm'
-                },
-                client:{
-                    type: 'text',
-                    label: i18n._('Client ID'),
-                    subForm: 'credentialSubForm',
-                    ngShow: "kind.value === 'azure_rm'",
-                    ngDisabled: '!(credential_obj.summary_fields.user_capabilities.edit || canAdd)'
-                },
-                secret:{
-                    type: 'sensitive',
-                    hasShowInputButton: true,
-                    autocomplete: false,
-                    label: i18n._('Client Secret'),
-                    subForm: 'credentialSubForm',
-                    ngShow: "kind.value === 'azure_rm'",
-                    ngDisabled: '!(credential_obj.summary_fields.user_capabilities.edit || canAdd)'
-                },
-                tenant: {
-                    type: 'text',
-                    label: i18n._('Tenant ID'),
-                    subForm: 'credentialSubForm',
-                    ngShow: "kind.value === 'azure_rm'",
-                    ngDisabled: '!(credential_obj.summary_fields.user_capabilities.edit || canAdd)'
-                },
-                authorize: {
-                    label: i18n._('Authorize'),
-                    type: 'checkbox',
-                    ngChange: "toggleCallback('host_config_key')",
-                    subForm: 'credentialSubForm',
-                    ngShow: "kind.value === 'net'",
-                    ngDisabled: '!(credential_obj.summary_fields.user_capabilities.edit || canAdd)'
-                },
-                authorize_password: {
-                    label: i18n._('Authorize Password'),
-                    type: 'sensitive',
-                    hasShowInputButton: true,
-                    autocomplete: false,
-                    subForm: 'credentialSubForm',
-                    ngShow: "authorize && authorize !== 'false'",
-                    ngDisabled: '!(credential_obj.summary_fields.user_capabilities.edit || canAdd)'
-                },
-                "project": {
-                    labelBind: 'projectLabel',
-                    type: 'text',
-                    ngShow: "kind.value == 'gce' || kind.value == 'openstack'",
-                    awPopOverWatch: "projectPopOver",
-                    awPopOver: i18n._("set in helpers/credentials"),
-                    dataTitle: i18n._('Project Name'),
-                    dataPlacement: 'right',
-                    dataContainer: "body",
-                    awRequiredWhen: {
-                        reqExpression: 'project_required',
-                        init: false
-                    },
-                    subForm: 'credentialSubForm',
-                    ngDisabled: '!(credential_obj.summary_fields.user_capabilities.edit || canAdd)'
-                },
-                "domain": {
-                    labelBind: 'domainLabel',
-                    type: 'text',
-                    ngShow: "kind.value == 'openstack'",
-                    awPopOver: "<p>" + i18n._("OpenStack domains define administrative " +
-                    "boundaries. It is only needed for Keystone v3 authentication URLs. " +
-                    "Common scenarios include:") + "<ul><li><b>" + i18n.sprintf(i18n._("v2 URLs%s - leave blank"), "</b>") + "</li>" +
-                    "<li><b>" + i18n.sprintf(i18n._("v3 default%s - set to 'default'"), "</b>") + "</br></li>" +
-                    "<li><b>" + i18n.sprintf(i18n._("v3 multi-domain%s - your domain name"), "</b>") + "</p></li></ul></p>",
-                    dataTitle: i18n._('Domain Name'),
-                    dataPlacement: 'right',
-                    dataContainer: "body",
-                    ngDisabled: '!(credential_obj.summary_fields.user_capabilities.edit || canAdd)',
-                    subForm: 'credentialSubForm'
-                },
-                "vault_password": {
-                    label: i18n._("Vault Password"),
-                    type: 'sensitive',
-                    ngShow: "kind.value == 'ssh'",
-                    ngDisabled: "vault_password_ask || !(credential_obj.summary_fields.user_capabilities.edit || canAdd)",
-                    subCheckbox: {
-                        variable: 'vault_password_ask',
-                        text: i18n._('Ask at runtime?'),
-                        ngChange: 'ask(\'vault_password\', \'undefined\')',
-                        ngDisabled: false,
-                    },
-                    hasShowInputButton: true,
-                    autocomplete: false,
-                    subForm: 'credentialSubForm'
-                }
-            },
-
-            buttons: {
-                cancel: {
-                    ngClick: 'formCancel()',
-                    ngShow: '(credential_obj.summary_fields.user_capabilities.edit || canAdd)'
-                },
-                close: {
-                    ngClick: 'formCancel()',
-                    ngShow: '!(credential_obj.summary_fields.user_capabilities.edit || canAdd)'
-                },
-                save: {
-                    label: 'Save',
-                    ngClick: 'formSave()', //$scope.function to call on click, optional
-                    ngDisabled: true,
-                    ngShow: '(credential_obj.summary_fields.user_capabilities.edit || canAdd)' //Disable when $pristine or $invalid, optional
-                }
-            },
-
-            related: {
-                permissions: {
-                    name: 'permissions',
-                    disabled: '(organization === undefined ? true : false)',
-                    // Do not transition the state if organization is undefined
-                    ngClick: `(organization === undefined ? true : false)||$state.go('credentials.edit.permissions')`,
-                    awToolTip: '{{permissionsTooltip}}',
-                    dataTipWatch: 'permissionsTooltip',
-                    awToolTipTabEnabledInEditMode: true,
-                    dataPlacement: 'right',
-                    basePath: 'api/v2/credentials/{{$stateParams.credential_id}}/access_list/',
-                    search: {
-                        order_by: 'username'
-                    },
-                    type: 'collection',
-                    title: i18n._('Permissions'),
-                    iterator: 'permission',
-                    index: false,
-                    open: false,
-                    actions: {
-                        add: {
-                            ngClick: "$state.go('.add')",
-                            label: 'Add',
-                            awToolTip: i18n._('Add a permission'),
-                            actionClass: 'btn List-buttonSubmit',
-                            buttonContent: '&#43; ' + i18n._('ADD'),
-                            ngShow: '(credential_obj.summary_fields.user_capabilities.edit || canAdd)'
-                        }
-                    },
-                    fields: {
-                        username: {
-                            key: true,
-                            label: i18n._('User'),
-                            linkBase: 'users',
-                            class: 'col-lg-3 col-md-3 col-sm-3 col-xs-4'
-                        },
-                        role: {
-                            label: i18n._('Role'),
-                            type: 'role',
-                            nosort: true,
-                            class: 'col-lg-4 col-md-4 col-sm-4 col-xs-4'
-                        },
-                        team_roles: {
-                            label: i18n._('Team Roles'),
-                            type: 'team_roles',
-                            nosort: true,
-                            class: 'col-lg-5 col-md-5 col-sm-5 col-xs-4'
-                        }
-                    }
-                }
-            }
-        };}];

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

@@ -1,344 +0,0 @@
-/*************************************************
- * Copyright (c) 2016 Ansible, Inc.
- *
- * All Rights Reserved
- *************************************************/
-
-export default ['$scope', '$rootScope', '$location',
-    '$stateParams', 'CredentialForm', 'Rest',
-    'ProcessErrors', 'ClearScope', 'Prompt', 'GetBasePath', 'GetChoices',
-    'KindChange', 'BecomeMethodChange', 'Empty', 'OwnerChange',
-    'CredentialFormSave', 'Wait', '$state', 'CreateSelect2', 'Authorization', 'i18n',
-    function($scope, $rootScope, $location,
-    $stateParams, CredentialForm, Rest, ProcessErrors, ClearScope, Prompt,
-    GetBasePath, GetChoices, KindChange, BecomeMethodChange, Empty, OwnerChange, CredentialFormSave, Wait,
-    $state, CreateSelect2, Authorization, i18n) {
-
-        ClearScope();
-
-        var defaultUrl = GetBasePath('credentials'),
-            form = CredentialForm,
-            base = $location.path().replace(/^\//, '').split('/')[0],
-            master = {},
-            id = $stateParams.credential_id;
-
-        init();
-
-        function init() {
-            $scope.id = id;
-            $scope.$watch('credential_obj.summary_fields.user_capabilities.edit', function(val) {
-                if (val === false) {
-                    $scope.canAdd = false;
-                }
-            });
-
-            $scope.canShareCredential = false;
-            Wait('start');
-            if (!$rootScope.current_user) {
-                Authorization.restoreUserInfo();
-            }
-            GetChoices({
-                scope: $scope,
-                url: defaultUrl,
-                field: 'kind',
-                variable: 'credential_kind_options',
-                callback: 'choicesReadyCredential'
-            });
-
-            GetChoices({
-                scope: $scope,
-                url: defaultUrl,
-                field: 'become_method',
-                variable: 'become_options'
-            });
-
-            if ($rootScope.current_user && $rootScope.current_user.is_superuser) {
-                $scope.canShareCredential = true;
-            } else {
-                Rest.setUrl(GetBasePath('users') + `${$rootScope.current_user.id}/admin_of_organizations`);
-                Rest.get()
-                    .success(function(data) {
-                        $scope.canShareCredential = (data.count) ? true : false;
-                        Wait('stop');
-                    }).error(function(data, status) {
-                        ProcessErrors($scope, data, status, null, { hdr: 'Error!', msg: 'Failed to find if users is admin of org' + status });
-                    });
-            }
-
-            $scope.$watch('organization', function(val) {
-                if (val === undefined) {
-                    $scope.permissionsTooltip = i18n._('Credentials are only shared within an organization. Assign credentials to an organization to delegate credential permissions. The organization cannot be edited after credentials are assigned.');
-                } else {
-                    $scope.permissionsTooltip = '';
-                }
-            });
-
-            setAskCheckboxes();
-            OwnerChange({ scope: $scope });
-            $scope.$watch("ssh_key_data", function(val) {
-                if (val === "" || val === null || val === undefined) {
-                    $scope.keyEntered = false;
-                    $scope.ssh_key_unlock_ask = false;
-                    $scope.ssh_key_unlock = "";
-                } else {
-                    $scope.keyEntered = true;
-                }
-            });
-        }
-
-        function setAskCheckboxes() {
-            var fld, i;
-            for (fld in form.fields) {
-                if (form.fields[fld].type === 'sensitive' && $scope[fld] === 'ASK') {
-                    // turn on 'ask' checkbox for password fields with value of 'ASK'
-                    $("#" + form.name + "_" + fld + "_input").attr("type", "text");
-                    $("#" + form.name + "_" + fld + "_show_input_button").html("Hide");
-                    $("#" + fld + "-clear-btn").attr("disabled", "disabled");
-                    $scope[fld + '_ask'] = true;
-                } else {
-                    $scope[fld + '_ask'] = false;
-                    $("#" + fld + "-clear-btn").removeAttr("disabled");
-                }
-                master[fld + '_ask'] = $scope[fld + '_ask'];
-            }
-
-            // Set kind field to the correct option
-            for (i = 0; i < $scope.credential_kind_options.length; i++) {
-                if ($scope.kind === $scope.credential_kind_options[i].value) {
-                    $scope.kind = $scope.credential_kind_options[i];
-                    break;
-                }
-            }
-        }
-        if ($scope.removeChoicesReady) {
-            $scope.removeChoicesReady();
-        }
-        $scope.removeChoicesReady = $scope.$on('choicesReadyCredential', function() {
-            // Retrieve detail record and prepopulate the form
-            Rest.setUrl(defaultUrl + ':id/');
-            Rest.get({ params: { id: id } })
-                .success(function(data) {
-                    if (data && data.summary_fields &&
-                        data.summary_fields.organization &&
-                        data.summary_fields.organization.id) {
-                        $scope.needsRoleList = true;
-                    } else {
-                        $scope.needsRoleList = false;
-                    }
-
-                    $scope.credential_name = data.name;
-
-                    var i, fld;
-
-
-                    for (fld in form.fields) {
-                        if (data[fld] !== null && data[fld] !== undefined) {
-                            $scope[fld] = data[fld];
-                            master[fld] = $scope[fld];
-                        }
-                        if (form.fields[fld].type === 'lookup' && data.summary_fields[form.fields[fld].sourceModel]) {
-                            $scope[form.fields[fld].sourceModel + '_' + form.fields[fld].sourceField] =
-                                data.summary_fields[form.fields[fld].sourceModel][form.fields[fld].sourceField];
-                            master[form.fields[fld].sourceModel + '_' + form.fields[fld].sourceField] =
-                                $scope[form.fields[fld].sourceModel + '_' + form.fields[fld].sourceField];
-                        }
-                    }
-
-                    if (!Empty($scope.user)) {
-                        $scope.owner = 'user';
-                    } else {
-                        $scope.owner = 'team';
-                    }
-                    master.owner = $scope.owner;
-
-                    for (i = 0; i < $scope.become_options.length; i++) {
-                        if ($scope.become_options[i].value === data.become_method) {
-                            $scope.become_method = $scope.become_options[i];
-                            break;
-                        }
-                    }
-
-                    if ($scope.become_method && $scope.become_method.value === "") {
-                        $scope.become_method = null;
-                    }
-                    master.become_method = $scope.become_method;
-
-                    $scope.$watch('become_method', function(val) {
-                        if (val !== null) {
-                            if (val.value === "") {
-                                $scope.become_username = "";
-                                $scope.become_password = "";
-                            }
-                        }
-                    });
-
-                    for (i = 0; i < $scope.credential_kind_options.length; i++) {
-                        if ($scope.credential_kind_options[i].value === data.kind) {
-                            $scope.kind = $scope.credential_kind_options[i];
-                            break;
-                        }
-                    }
-
-                    KindChange({
-                        scope: $scope,
-                        form: form,
-                        reset: false
-                    });
-
-                    master.kind = $scope.kind;
-
-                    CreateSelect2({
-                        element: '#credential_become_method',
-                        multiple: false
-                    });
-
-                    CreateSelect2({
-                        element: '#credential_kind',
-                        multiple: false
-                    });
-
-                    switch (data.kind) {
-                        case 'aws':
-                            $scope.access_key = data.username;
-                            $scope.secret_key = data.password;
-                            master.access_key = $scope.access_key;
-                            master.secret_key = $scope.secret_key;
-                            break;
-                        case 'ssh':
-                            $scope.ssh_password = data.password;
-                            master.ssh_password = $scope.ssh_password;
-                            break;
-                        case 'rax':
-                            $scope.api_key = data.password;
-                            master.api_key = $scope.api_key;
-                            break;
-                        case 'gce':
-                            $scope.email_address = data.username;
-                            $scope.project = data.project;
-                            break;
-                        case 'azure':
-                            $scope.subscription = data.username;
-                            break;
-                    }
-                    $scope.credential_obj = data;
-
-                    $scope.$emit('credentialLoaded');
-                    Wait('stop');
-                })
-                .error(function(data, status) {
-                    ProcessErrors($scope, data, status, form, {
-                        hdr: 'Error!',
-                        msg: 'Failed to retrieve Credential: ' + $stateParams.id + '. GET status: ' + status
-                    });
-                });
-        });
-
-        // Save changes to the parent
-        $scope.formSave = function() {
-            if ($scope[form.name + '_form'].$valid) {
-                CredentialFormSave({ scope: $scope, mode: 'edit' });
-            }
-        };
-
-        // Handle Owner change
-        $scope.ownerChange = function() {
-            OwnerChange({ scope: $scope });
-        };
-
-        // Handle Kind change
-        $scope.kindChange = function() {
-            KindChange({ scope: $scope, form: form, reset: true });
-        };
-
-        $scope.becomeMethodChange = function() {
-            BecomeMethodChange({ scope: $scope });
-        };
-
-        $scope.formCancel = function() {
-            $state.transitionTo('credentials');
-        };
-
-        // Related set: Add button
-        $scope.add = function(set) {
-            $rootScope.flashMessage = null;
-            $location.path('/' + base + '/' + $stateParams.id + '/' + set + '/add');
-        };
-
-        // Related set: Edit button
-        $scope.edit = function(set, id) {
-            $rootScope.flashMessage = null;
-            $location.path('/' + base + '/' + $stateParams.id + '/' + set + '/' + id);
-        };
-
-        // Related set: Delete button
-        $scope['delete'] = function(set, itm_id, name, title) {
-            $rootScope.flashMessage = null;
-
-            var action = function() {
-                var url = defaultUrl + id + '/' + set + '/';
-                Rest.setUrl(url);
-                Rest.post({
-                        id: itm_id,
-                        disassociate: 1
-                    })
-                    .success(function() {
-                        $('#prompt-modal').modal('hide');
-                    })
-                    .error(function(data, status) {
-                        $('#prompt-modal').modal('hide');
-                        ProcessErrors($scope, data, status, null, {
-                            hdr: 'Error!',
-                            msg: 'Call to ' + url + ' failed. POST returned status: ' + status
-                        });
-                    });
-            };
-
-            Prompt({
-                hdr: i18n._('Delete'),
-                body: '<div class="Prompt-bodyQuery">' + i18n.sprintf(i18n._('Are you sure you want to remove the %s below from %s?'), title, $scope.name) + '</div><div class="Prompt-bodyTarget">' + name + '</div>',
-                action: action,
-                actionText: i18n._('DELETE')
-            });
-
-        };
-
-        // Password change
-        $scope.clearPWConfirm = function(fld) {
-            // If password value changes, make sure password_confirm must be re-entered
-            $scope[fld] = '';
-            $scope[form.name + '_form'][fld].$setValidity('awpassmatch', false);
-        };
-
-        // Respond to 'Ask at runtime?' checkbox
-        $scope.ask = function(fld, associated) {
-            if ($scope[fld + '_ask']) {
-                $scope[fld] = 'ASK';
-                $("#" + form.name + "_" + fld + "_input").attr("type", "text");
-                $("#" + form.name + "_" + fld + "_show_input_button").html("Hide");
-                if (associated !== "undefined") {
-                    $("#" + form.name + "_" + fld + "_input").attr("type", "password");
-                    $("#" + form.name + "_" + fld + "_show_input_button").html("Show");
-                    $scope[associated] = '';
-                    $scope[form.name + '_form'][associated].$setValidity('awpassmatch', true);
-                }
-            } else {
-                $scope[fld] = '';
-                $("#" + form.name + "_" + fld + "_input").attr("type", "password");
-                $("#" + form.name + "_" + fld + "_show_input_button").html("Show");
-                if (associated !== "undefined") {
-                    $("#" + form.name + "_" + fld + "_input").attr("type", "text");
-                    $("#" + form.name + "_" + fld + "_show_input_button").html("Hide");
-                    $scope[associated] = '';
-                    $scope[form.name + '_form'][associated].$setValidity('awpassmatch', true);
-                }
-            }
-        };
-
-        $scope.clear = function(fld, associated) {
-            $scope[fld] = '';
-            $scope[associated] = '';
-            $scope[form.name + '_form'][associated].$setValidity('awpassmatch', true);
-            $scope[form.name + '_form'].$setDirty();
-        };
-    }
-];

awx/ui/grunt-tasks/copy.js

@@ -32,7 +32,7 @@ module.exports = {
     },
     views: {
         files: [{
-            cwd: 'client/src',
+            cwd: 'client/features',
             expand: true,
             src: ['**/*.view.html'],
             dest: 'static/views/'
@@ -50,7 +50,7 @@ module.exports = {
             src: ['*.html'],
             dest: 'static/partials/'
         }, {
-            cwd: 'client/components',
+            cwd: 'client/lib/components',
             expand: true,
             src: ['**/*.partial.html'],
             dest: 'static/partials/components/'

awx/ui/grunt-tasks/less.js

@@ -10,7 +10,7 @@ module.exports = {
             src: [
                 'client/legacy-styles/*.less',
                 'client/src/**/*.less',
-                'client/theme/index.less'
+                'client/lib/theme/index.less'
             ]
         }],
         options: {
@@ -22,7 +22,7 @@ module.exports = {
             'static/tower.min.css': [
                 'client/legacy-styles/*.less',
                 'client/src/**/*.less',
-                'client/theme/index.less'
+                'client/lib/theme/index.less'
             ]
         },
         options: {

awx/ui/grunt-tasks/watch.js

@@ -5,13 +5,13 @@ module.exports = {
     },
     partials: {
         files: [
-            'client/components/**/*.partial.html',
+            'client/lib/components/**/*.partial.html',
             'client/src/**/*.partial.html'
         ],
         tasks: ['newer:copy:partials']
     },
     views: {
-        files: 'client/src/**/*.view.html',
+        files: 'client/features/**/*.view.html',
         tasks: ['newer:copy:views']
     },
     assets: {