Cleanup inconsistencies in directives and dead code

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

@@ -8,14 +8,17 @@ function AddCredentialsController (models) {
         omit: ['user', 'team', 'inputs']
     });
 
-    vm.form.credential_type.data = credentialType.categorizeByKind();
+    vm.form.credential_type._data = credentialType.getResults();
-    vm.form.credential_type.placeholder = 'Select A Type';
+    vm.form.credential_type._placeholder = 'Select A Type';
+    vm.form.credential_type._display = 'name';
+    vm.form.credential_type._key = 'id';
+    vm.form.credential_type._exp = 'type as type.name group by type.kind for type in state._data';
 
     vm.form.inputs = {
-        get: credentialType.getTypeFromName,
+        _get: credentialType.mergeInputProperties,
-        source: vm.form.credential_type,
+        _source: vm.form.credential_type,
-        reference: 'vm.form.inputs',
+        _reference: 'vm.form.inputs',
-        key: 'inputs'
+        _key: 'inputs'
     };
 
     vm.form.save = credential.post;

awx/ui/client/features/credentials/add-credentials.view.html

@@ -12,9 +12,9 @@
             <at-input-text col="4" tab="2" state="vm.form.description"></at-input-text>
             <at-input-select col="4" tab="3" state="vm.form.credential_type"></at-input-select>
 
-            <at-dynamic-input-group col="4" tab="4" state="vm.form.inputs">
+            <at-input-group col="4" tab="4" state="vm.form.inputs">
                 Type Details
-            </at-dynamic-input-group>
+            </at-input-group>
 
             <at-action-group col="12" pos="right">
                 <at-form-action type="cancel"></at-form-action>

awx/ui/client/features/credentials/index.view.html

@@ -1,8 +1,6 @@
 <div ui-view="edit"></div>
 <div ui-view="add"></div>
 
-<at-panel>
+<div class="panel at-Panel">
-  <at-panel-body>
     <div ui-view="list"></div>
-  </at-panel-body>
+</div>
-</at-panel>

awx/ui/client/lib/components/_index.less

@@ -1,8 +1,4 @@
 @import 'action/_index';
-@import 'badge/_index';
-@import 'dynamic/_index';
 @import 'input/_index';
 @import 'panel/_index';
 @import 'popover/_index';
-@import 'toggle/_index';
-

awx/ui/client/lib/components/action/action-group.partial.html

@@ -1,5 +1,5 @@
-<div class="col-sm-{{ col }} at-ActionGroup">
+<div class="col-sm-{{::col }} at-ActionGroup">
-    <div class="pull-{{ pos }}">
+    <div class="pull-{{::pos }}">
         <ng-transclude></ng-transclude>
     </div>
 </div>

awx/ui/client/lib/components/badge/_index.less

@@ -1,8 +0,0 @@
-.at-Badge {
-    font-size: @at-font-size;
-    padding: 0 @at-space-2x;
-    margin: 0;
-    background-color: @at-gray;
-    color: @at-white;
-    border-radius: @at-border-radius;
-}

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

@@ -1,12 +0,0 @@
-function atBadge () {
-    return {
-        restrict: 'E',
-        transclude: true,
-        templateUrl: 'static/partials/components/badge/badge.partial.html',
-        scope: {
-            config: '='
-        }
-    };
-}
-
-export default atBadge;

awx/ui/client/lib/components/badge/badge.partial.html

@@ -1,8 +0,0 @@
-<div class="at-Badge">
-  <div ng-if="config.text">
-    {{ config.text }}
-  </div>
-
-  <ng-if="!config" ng-transclude></ng-transclude>
-</div>
-

awx/ui/client/lib/components/dynamic/_index.less

@@ -1,27 +0,0 @@
-.at-DynamicInputGroup {
-    padding: 0;
-    margin: 0;
-    margin: @at-space-6x 0 0 0;
-}
-
-.at-DynamicInputGroup-border {
-    position: absolute;
-    width: @at-inset-width;
-    height: 100%;
-    background: @at-gray;
-    left: -@at-inset-width;
-}
-
-.at-DynamicInputGroup-title {
-    .at-mixin-Heading(@at-font-size-2x);
-    margin-top: 0;
-    margin-left: @at-space-5x;
-    margin-bottom: @at-space-4x;
-}
-
-.at-DynamicInputGroup-divider {
-    clear: both;
-    margin: 0;
-    padding: 0;
-    height: @at-space-6x;
-}

awx/ui/client/lib/components/dynamic/input-group.directive.js

@@ -1,139 +0,0 @@
-function atDynamicInputGroupLink (scope, el, attrs, controllers) {
-    let dynamicController = controllers[0];
-    let formController = controllers[1];
-    let element = el[0].getElementsByClassName('at-DynamicInputGroup-container')[0];
-
-    dynamicController.init(scope, formController, element);
-}
-
-function AtDynamicInputGroupController ($scope, $compile) {
-    let vm = this || {};
-
-    let form;
-    let scope;
-    let state;
-    let source;
-    let element;
-
-    vm.init = (_scope_, _form_, _element_) => {
-        form = _form_;
-        scope = _scope_;
-        element = _element_;
-        state = scope.state || {};
-        source = state.source;
-
-        $scope.$watch('state.source.value', vm.update);
-    };
-
-    vm.isValidSource = () => {
-        if (!source.value || source.value === state.value) {
-            return false;
-        }
-        
-        return true;
-    };
-
-    vm.update = () => {
-        if (!vm.isValidSource()) {
-            return;
-        }
-
-        if (state.components) {
-            vm.clear();
-        }
-
-        state.value = source.value;
-
-        let inputs = state.get(source.value);
-        let components = vm.createComponentConfigs(inputs);
-
-        vm.insert(components);
-        state.components = components;
-        vm.compile(components);
-    };
-
-    vm.createComponentConfigs = inputs => {
-        let components = [];
-
-        inputs.forEach((input, i) => {
-            if (input.type === 'string') {
-                if (input.secret && input.multiline) {
-                    input.component = 'at-input-textarea';
-                } else if (input.secret) {
-                    input.component = 'at-input-secret';
-                } else if (input.multiline) {
-                    input.component = 'at-input-textarea';
-                } else {
-                    input.component = 'at-input-text';
-                }
-            }
-
-            components.push(Object.assign({
-                element: vm.createElement(input, i),
-                key: 'inputs',
-                dynamic: true
-            }, input));
-        });
-
-        return components;
-    };
-
-    vm.createElement = (input, index) => {
-        let tabindex = Number(scope.tab) + index;
-
-        let element =
-            `<${input.component} col="${scope.col}" tab="${tabindex}"
-                state="${state.reference}.components[${index}]">
-            </${input.component}>`;
-
-        return angular.element(element);
-    };
-
-    vm.insert = components => {
-        let group = document.createElement('div');
-        let divider = angular.element(`<div class="at-DynamicInputGroup-divider"></div>`)[0];
-
-        for (let i = 0; i < components.length; i++) {
-            if (i !== 0 && (i % (12 / scope.col)) === 0) {
-                group.appendChild(divider);
-            }
-
-            group.appendChild(components[i].element[0]);
-        }
-
-        element.appendChild(group);
-    };
-
-    vm.compile = components => {
-        components.forEach(component => $compile(component.element[0])(scope.$parent));
-    };
-
-    vm.clear = () => {
-        form.deregisterDynamicComponents(state.components);
-        element.innerHTML = '';
-    };
-}
-
-AtDynamicInputGroupController.$inject = ['$scope', '$compile'];
-
-function atDynamicInputGroup (pathService) {
-    return {
-        restrict: 'E',
-        replace: true,
-        transclude: true,
-        require: ['atDynamicInputGroup', '^^atForm'],
-        templateUrl: pathService.getPartialPath('components/dynamic/input-group'),
-        controller: AtDynamicInputGroupController,
-        controllerAs: 'vm',
-        link: atDynamicInputGroupLink,
-        scope: {
-            state: '=',
-            col: '@',
-            tab: '@'
-        }
-    };
-}
-
-atDynamicInputGroup.$inject = ['PathService'];
-
-export default atDynamicInputGroup;

awx/ui/client/lib/components/dynamic/input-group.partial.html

@@ -1,11 +0,0 @@
-<div ng-show="state.value" class="col-sm-12 at-DynamicInputGroup">
-    <div class="at-DynamicInputGroup-border"></div>
-    <div class="at-DynamicInputGroup-inset">
-        <div class="row">
-            <div class="col-xs-12">
-                <h4 class="at-DynamicInputGroup-title"><ng-transclude></ng-transclude></h4>
-            </div>
-        </div>
-        <div class="at-DynamicInputGroup-container"></div>
-    </div>
-</div>

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

@@ -59,17 +59,19 @@ function AtFormController (eventService) {
         let data = vm.components
             .filter(component => component.category === 'input')
             .reduce((values, component) => {
-                if (!component.state.value) {
+                if (!component.state._value) {
                     return values;
                 }
 
-                if (component.state.dynamic) {
+                if (component.state._key && typeof component.state._value === 'object') {
-                    values[component.state.key] = values[component.state.key] || [];
+                    values[component.state._id] = component.state._value[component.state._key];
-                    values[component.state.key].push({
+                } else if (component.state._group) {
-                        [component.state.id]: component.state.value
+                    values[component.state._key] = values[component.state._key] || [];
+                    values[component.state._key].push({
+                        [component.state._id]: component.state._value
                     });
                 } else {
-                    values[component.state.id] = component.state.value;
+                    values[component.state._id] = component.state._value;
                 }
 
                 return values;
@@ -87,25 +89,39 @@ function AtFormController (eventService) {
     };
 
     vm.onSaveError = err => {
+        let handled;
+
         if (err.status === 400) {
-            vm.setValidationErrors(err.data);
+            handled = vm.setValidationErrors(err.data);
+        }
+
+        if (!handled) {
+            // TODO: launch modal for unexpected error type
         }
     };
 
     vm.setValidationErrors = errors => {
+        let errorMessageSet = false;
+
         for (let id in errors) {
             vm.components
                 .filter(component => component.category === 'input')
                 .forEach(component => {
-                    if (component.state.id === id) {
+                    if (component.state._id === id) {
-                        component.state.rejected = true;
+                        errorMessageSet = true;
-                        component.state.isValid = false;
+
-                        component.state.message = errors[id].join(' ');
+                        component.state._rejected = true;
+                        component.state._isValid = false;
+                        component.state._message = errors[id].join(' ');
                     }
                 });
         }
 
-        vm.check();
+        if (errorMessageSet) {
+            vm.check();
+        }
+
+        return errorMessageSet;
     };
 
     vm.validate = () => {
@@ -116,7 +132,7 @@ function AtFormController (eventService) {
                 continue;
             }
 
-            if (!vm.components[i].state.isValid) {
+            if (!vm.components[i].state._isValid) {
                 isValid = false;
                 break;
             }
@@ -133,7 +149,7 @@ function AtFormController (eventService) {
         }
     };
 
-    vm.deregisterDynamicComponents = components => {
+    vm.deregisterInputGroup = components => {
         for (let i = 0; i < components.length; i++) {
             for (let j = 0; j < vm.components.length; j++) {
                 if (components[i] === vm.components[j].state) {

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

@@ -1,10 +1,10 @@
 import actionGroup from './action/action-group.directive';
-import badge from './badge/badge.directive';
-import dynamicInputGroup from './dynamic/input-group.directive';
 import form from './form/form.directive';
 import formAction from './form/action.directive';
+import inputGroup from './input/group.directive';
 import inputLabel from './input/label.directive';
-import inputSearch from './input/search.directive';
+import inputMessage from './input/message.directive';
+import inputNumber from './input/number.directive';
 import inputSelect from './input/select.directive';
 import inputSecret from './input/secret.directive';
 import inputText from './input/text.directive';
@@ -13,20 +13,18 @@ import panel from './panel/panel.directive';
 import panelHeading from './panel/heading.directive';
 import panelBody from './panel/body.directive';
 import popover from './popover/popover.directive';
-import toggleButton from './toggle/button.directive';
-import toggleContent from './toggle/content.directive';
 
 import BaseInputController from './input/base.controller';
 
 angular
     .module('at.lib.components', [])
     .directive('atActionGroup', actionGroup)
-    .directive('atBadge', badge)
-    .directive('atDynamicInputGroup', dynamicInputGroup)
     .directive('atForm', form)
     .directive('atFormAction', formAction)
+    .directive('atInputGroup', inputGroup)
     .directive('atInputLabel', inputLabel)
-    .directive('atInputSearch', inputSearch)
+    .directive('atInputMessage', inputMessage)
+    .directive('atInputNumber', inputNumber)
     .directive('atInputSecret', inputSecret)
     .directive('atInputSelect', inputSelect)
     .directive('atInputText', inputText)
@@ -35,8 +33,6 @@ angular
     .directive('atPanelHeading', panelHeading)
     .directive('atPanelBody', panelBody)
     .directive('atPopover', popover)
-    .directive('atToggleButton', toggleButton)
-    .directive('atToggleContent', toggleContent)
     .service('BaseInputController', BaseInputController);
 
 

awx/ui/client/lib/components/input/_index.less

@@ -15,6 +15,14 @@
     }
 }
 
+.at-Input-button {
+    width: 72px;
+
+    &, &:active, &:hover, &:focus {
+        background-color: @at-white;
+    }
+}
+
 .at-Input--focus {
     border-color: @at-blue;
 }
@@ -25,6 +33,34 @@
     }
 }
 
+.at-InputGroup {
+    padding: 0;
+    margin: 0;
+    margin: @at-space-6x 0 0 0;
+}
+
+.at-InputGroup-border {
+    position: absolute;
+    width: @at-inset-width;
+    height: 100%;
+    background: @at-gray;
+    left: -@at-inset-width;
+}
+
+.at-InputGroup-title {
+    .at-mixin-Heading(@at-font-size-2x);
+    margin-top: 0;
+    margin-left: @at-space-5x;
+    margin-bottom: @at-space-4x;
+}
+
+.at-InputGroup-divider {
+    clear: both;
+    margin: 0;
+    padding: 0;
+    height: @at-space-6x;
+}
+
 .at-InputLabel-name {
     color: @at-gray-dark-4x;
     font-size: @at-font-size-2x;
@@ -32,6 +68,13 @@
     text-transform: uppercase;
 }
 
+.at-InputMessage--rejected {
+    font-size: @at-font-size; 
+    color: @at-red;
+    margin: @at-space-3x 0 0 0;
+    padding: 0;
+}
+
 .at-InputLabel-required {
     color: @at-red;
     font-weight: @at-font-weight-2x;
@@ -40,7 +83,7 @@
     margin: @at-space-3x @at-space 0 0;
 }
 
-.at-InputGroup {
+.at-InputSelect {
     position: relative;
     width: 100%;
 
@@ -55,10 +98,6 @@
     }
 }
 
-.at-InputSelect {
-    position: relative;
-}
-
 .at-InputSelect-input {
     position: relative;
     z-index: 2;
@@ -71,19 +110,13 @@
     position: absolute;
     z-index: 1;
     top: 0;
-}
 
-.at-Input-button {
+    & > optgroup {
-    width: 72px;
+        text-transform: uppercase;
 
-    &, &:active, &:hover, &:focus {
+        & > option {
-        background-color: @at-white;
+            text-transform: none;
+        }
     }
 }
 
-.at-InputMessage--rejected {
-    font-size: @at-font-size; 
-    color: @at-red;
-    margin: @at-space-3x 0 0 0;
-    padding: 0;
-}

awx/ui/client/lib/components/input/base.controller.js

@@ -7,9 +7,9 @@ function BaseInputController () {
 
         scope.state = scope.state || {};
 
-        scope.state.required = scope.state.required || false;
+        scope.state._required = scope.state.required || false;
-        scope.state.isValid = scope.state.isValid || false;
+        scope.state._isValid = scope.state.isValid || false;
-        scope.state.disabled = scope.state.disabled || false;
+        scope.state._disabled = scope.state.disabled || false;
 
         form.register(type, scope);
 
@@ -17,13 +17,13 @@ function BaseInputController () {
             let isValid = true;
             let message = '';
 
-            if (scope.state.required && !scope.state.value) {
+            if (scope.state._required && !scope.state._value) {
                 isValid = false;    
                 message = REQUIRED_INPUT_MISSING_MESSAGE;
             }
 
             if (scope.state.validate) {
-                let result = scope.state.validate(scope.state.value);
+                let result = scope.state._validate(scope.state._value);
 
                 if (!result.isValid) {
                     isValid = false;
@@ -40,10 +40,10 @@ function BaseInputController () {
         vm.check = () => {
             let result = vm.validate();
 
-            if (result.isValid !== scope.state.isValid) {
+            if (result.isValid !== scope.state._isValid) {
-                scope.state.rejected = !result.isValid;
+                scope.state._rejected = !result.isValid;
-                scope.state.isValid = result.isValid;
+                scope.state._isValid = result.isValid;
-                scope.state.message = result.message;
+                scope.state._message = result.message;
 
                 form.check();
             }

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

@@ -0,0 +1,139 @@
+function atInputGroupLink (scope, el, attrs, controllers) {
+    let groupController = controllers[0];
+    let formController = controllers[1];
+    let element = el[0].getElementsByClassName('at-InputGroup-container')[0];
+
+    groupController.init(scope, formController, element);
+}
+
+function AtInputGroupController ($scope, $compile) {
+    let vm = this || {};
+
+    let form;
+    let scope;
+    let state;
+    let source;
+    let element;
+
+    vm.init = (_scope_, _form_, _element_) => {
+        form = _form_;
+        scope = _scope_;
+        element = _element_;
+        state = scope.state || {};
+        source = state._source;
+
+        $scope.$watch('state._source._value', vm.update);
+    };
+
+    vm.isValidSource = () => {
+        if (!source._value || source._value === state._value) {
+            return false;
+        }
+        
+        return true;
+    };
+
+    vm.update = () => {
+        if (!vm.isValidSource()) {
+            return;
+        }
+
+        if (state._group) {
+            vm.clear();
+        }
+
+        state._value = source._value;
+
+        let inputs = state._get(source._value);
+        let group = vm.createComponentConfigs(inputs);
+
+        vm.insert(group);
+        state._group = group;
+        vm.compile(group);
+    };
+
+    vm.createComponentConfigs = inputs => {
+        let group = [];
+
+        inputs.forEach((input, i) => {
+            if (input.type === 'string') {
+                if (input.secret && input.multiline) {
+                    input._component = 'at-input-textarea';
+                } else if (input.secret) {
+                    input._component = 'at-input-secret';
+                } else if (input.multiline) {
+                    input._component = 'at-input-textarea';
+                } else {
+                    input._component = 'at-input-text';
+                }
+            }
+
+            group.push(Object.assign({
+                _element: vm.createElement(input, i),
+                _key: 'inputs',
+                _group: true
+            }, input));
+        });
+
+        return group;
+    };
+
+    vm.createElement = (input, index) => {
+        let tabindex = Number(scope.tab) + index;
+
+        let element =
+            `<${input._component} col="${scope.col}" tab="${tabindex}"
+                state="${state._reference}._group[${index}]">
+            </${input._component}>`;
+
+        return angular.element(element);
+    };
+
+    vm.insert = group => {
+        let container = document.createElement('div');
+        let divider = angular.element(`<div class="at-InputGroup-divider"></div>`)[0];
+
+        for (let i = 0; i < group.length; i++) {
+            if (i !== 0 && (i % (12 / scope.col)) === 0) {
+                container.appendChild(divider);
+            }
+
+            container.appendChild(group[i]._element[0]);
+        }
+
+        element.appendChild(container);
+    };
+
+    vm.compile = group => {
+        group.forEach(component => $compile(component._element[0])(scope.$parent));
+    };
+
+    vm.clear = () => {
+        form.deregisterInputGroup(state._group);
+        element.innerHTML = '';
+    };
+}
+
+AtInputGroupController.$inject = ['$scope', '$compile'];
+
+function atInputGroup (pathService) {
+    return {
+        restrict: 'E',
+        replace: true,
+        transclude: true,
+        require: ['atInputGroup', '^^atForm'],
+        templateUrl: pathService.getPartialPath('components/input/group'),
+        controller: AtInputGroupController,
+        controllerAs: 'vm',
+        link: atInputGroupLink,
+        scope: {
+            state: '=',
+            col: '@',
+            tab: '@'
+        }
+    };
+}
+
+atInputGroup.$inject = ['PathService'];
+
+export default atInputGroup;

awx/ui/client/lib/components/input/group.partial.html

@@ -0,0 +1,13 @@
+<div ng-show="state._value" class="col-sm-12 at-InputGroup">
+    <div class="at-InputGroup-border"></div>
+    <div class="at-InputGroup-inset">
+        <div class="row">
+            <div class="col-sm-12">
+                <h4 class="at-InputGroup-title">
+                    <ng-transclude></ng-transclude>
+                </h4>
+            </div>
+        </div>
+        <div class="at-InputGroup-container"></div>
+    </div>
+</div>

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

@@ -1,12 +1,8 @@
 function atInputLabel (pathService) {
     return {
         restrict: 'E',
-        transclude: true,
         replace: true,
-        templateUrl: pathService.getPartialPath('components/input/label'),
+        templateUrl: pathService.getPartialPath('components/input/label')
-        scope: {
-            state: '='
-        }
     };
 }
 

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

@@ -0,0 +1,11 @@
+function atInputMessage (pathService) {
+    return {
+        restrict: 'E',
+        replace: true,
+        templateUrl: pathService.getPartialPath('components/input/message'),
+    };
+}
+
+atInputMessage.$inject = ['PathService'];
+
+export default atInputMessage;

awx/ui/client/lib/components/input/message.partial.html

@@ -0,0 +1,4 @@
+<p ng-if="state._rejected && !state._isValid" class="at-InputMessage--rejected">
+    {{ state._message }}
+</p>
+

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

@@ -0,0 +1,54 @@
+const DEFAULT_STEP = '1';
+const DEFAULT_MIN = '0';
+const DEFAULT_MAX = '1000000000';
+const DEFAULT_PLACEHOLDER = '';
+
+function atInputNumberLink (scope, element, attrs, controllers) {
+    let formController = controllers[0];
+    let inputController = controllers[1];
+
+    if (scope.tab === '1') {
+        element.find('input')[0].focus();
+    }
+
+    inputController.init(scope, element, formController);
+}
+
+function AtInputNumberController (baseInputController) {
+    let vm = this || {};
+
+    vm.init = (scope, element, form) => {
+        baseInputController.call(vm, 'input', scope, element, form);
+
+        scope.state._step = scope.state._step || DEFAULT_STEP;
+        scope.state._min = scope.state._min || DEFAULT_MIN;
+        scope.state._max = scope.state._max || DEFAULT_MAX;
+        scope.state._placeholder = scope.state._placeholder || DEFAULT_PLACEHOLDER;
+
+        vm.check();
+    };
+}
+
+AtInputNumberController.$inject = ['BaseInputController'];
+
+function atInputNumber (pathService) {
+    return {
+        restrict: 'E',
+        transclude: true,
+        replace: true,
+        require: ['^^atForm', 'atInputNumber'],
+        templateUrl: pathService.getPartialPath('components/input/number'),
+        controller: AtInputNumberController,
+        controllerAs: 'vm',
+        link: atInputNumberLink,
+        scope: {
+            state: '=',
+            col: '@',
+            tab: '@'
+        }
+    };
+}
+
+atInputNumber.$inject = ['PathService'];
+
+export default atInputNumber;

awx/ui/client/lib/components/input/number.partial.html

@@ -0,0 +1,19 @@
+<div class="col-sm-{{::col}}">
+    <div class="form-group at-u-flat">
+        <at-input-label></at-input-label>
+
+        <input type="number" 
+               class="form-control at-Input" 
+               ng-class="{ 'at-Input--rejected': state.rejected }"
+               ng-model="state._value"
+               ng-attr-min="state._min"
+               ng-attr-max="state._max"
+               ng-attr-step="state._step"
+               ng-attr-tabindex="{{ tab || undefined }}"
+               ng-attr-placeholder="{{::state._placeholder || undefined }}"
+               ng-change="vm.check()"
+               ng-disabled="state._disabled || form.disabled" />
+
+        <at-input-message></at-input-message>
+    </div>
+</div>

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

@@ -1,22 +0,0 @@
-// TODO: i18n
-
-function atInputSearch (pathService) {
-    function link (scope) {
-        scope.config = scope.config || {};
-        scope.config.placeholder = scope.config.placeholder || 'SEARCH';
-    }
-
-    return {
-        restrict: 'E',
-        transclude: true,
-        templateUrl: pathService.getPartialPath('components/input/search'),
-        link,
-        scope: {
-            config: '='
-        }
-    };
-}
-
-atInputSearch.$inject = ['PathService'];
-
-export default atInputSearch;

awx/ui/client/lib/components/input/search.partial.html

@@ -1,10 +0,0 @@
-<div class="input-group at-InputSearch">
-  <input type="text" 
-         class="form-control at-InputSearch-field" 
-         placeholder="{{ config.placeholder }}" />
-  <div class="input-group-btn">
-    <button class="btn at-Button--default at-Button--icon" type="button">
-      <span class="fa fa-search"></span>
-    </button>
-  </div>
-</div>

awx/ui/client/lib/components/input/secret.partial.html

@@ -1,23 +1,26 @@
 <div class="col-sm-{{::col}}">
     <div class="form-group at-u-flat">
-        <at-input-label state="state"></at-input-label>
+        <at-input-label></at-input-label>
+
         <div class="input-group">
             <span class="input-group-btn">
                 <button class="btn at-ButtonHollow--white at-Input-button"
-                        ng-disabled="state.disabled || form.disabled" ng-click="vm.toggle()">
+                        ng-disabled="state._disabled || form.disabled"
+                        ng-click="vm.toggle()">
                     {{ buttonText }}
                 </button>
             </span>
-            <input type="{{ type }}" class="form-control at-Input" ng-model="state.value"
+            <input type="{{ type }}"
-                   ng-class="{ 'at-Input--rejected': state.rejected }"
+                   class="form-control at-Input"
-                   ng-attr-maxlength="{{ state.options.max_length || undefined }}"
+                   ng-model="state._value"
+                   ng-class="{ 'at-Input--rejected': state._rejected }"
+                   ng-attr-maxlength="{{ state.max_length || undefined }}"
                    ng-attr-tabindex="{{ tab || undefined }}"
-                   ng-attr-placeholder="{{::state.placeholder || undefined }}"
+                   ng-attr-placeholder="{{::state._placeholder || undefined }}"
                    ng-change="vm.check()"
-                   ng-disabled="state.disabled || form.disabled" />
+                   ng-disabled="state._disabled || form.disabled" />
         </div>
-        <p ng-if="state.rejected && !state.isValid" class="at-InputMessage--rejected">
+
-            {{ state.message }}
+        <at-input-message></at-input-message>
-        </p>
     </div>
 </div>

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

@@ -1,6 +1,7 @@
 function atInputSelectLink (scope, element, attrs, controllers) {
     let formController = controllers[0];
     let inputController = controllers[1];
+
     if (scope.tab === '1') {
         elements.select.focus();
     }

awx/ui/client/lib/components/input/select.partial.html

@@ -1,28 +1,25 @@
 <div class="col-sm-{{::col}}">
     <div class="form-group at-u-flat">
-        <at-input-label state="state"></at-input-label>
+        <at-input-label></at-input-label>
-        <div class="at-InputGroup at-InputSelect">
+
-            <input type="text" class="form-control at-Input at-InputSelect-input"
+        <div class="at-InputSelect">
-                   placeholder="{{ state.placeholder | uppercase }}"
+            <input type="text"
+                   class="form-control at-Input at-InputSelect-input"
+                   placeholder="{{state._placeholder || undefined }}"
                    ng-class="{ 'at-Input--rejected': state.rejected }"
-                   ng-model="state.value"
+                   ng-model="state._value[state._display]"
-                   ng-disabled="state.disabled || form.disabled"
+                   ng-disabled="state._disabled || form.disabled"
                    ng-change="vm.check()" />
 
-            <select class="form-control at-InputSelect-select" ng-model="state.value"
+            <select class="form-control at-InputSelect-select"
+                    ng-model="state._value"
                     ng-attr-tabindex="{{ tab || undefined }}" 
-                    ng-disabled="state.disabled || form.disabled">
+                    ng-disabled="state._disabled || form.disabled"
-                <optgroup ng-repeat="group in state.data"
+                    ng-options="{{ state._exp }}"></select>
-                          label="{{::group.category | uppercase }}">
+
-                    <option ng-repeat="item in group.data" value="{{ item.name }}">
-                        {{ item.name }}
-                    </option>
-                </optgroup>
-            </select>
             <i class="fa" ng-class="{ 'fa-chevron-down': !open, 'fa-chevron-up': open }"></i>
         </div>
-        <p ng-if="state.rejected && !state.isValid" class="at-InputMessage--rejected">
+
-            {{ state.message }}
+        <at-input-message></at-input-message>
-        </p>
     </div>
 </div>

awx/ui/client/lib/components/input/text.partial.html

@@ -1,17 +1,17 @@
 <div class="col-sm-{{::col}}">
     <div class="form-group at-u-flat">
-        <at-input-label state="state"></at-input-label>
+        <at-input-label></at-input-label>
-        <input type="text" class="form-control at-Input" 
-               ng-class="{ 'at-Input--rejected': state.rejected }"
-               ng-model="state.value"
-               ng-attr-maxlength="{{ state.options.max_length || undefined }}"
-               ng-attr-tabindex="{{ tab || undefined }}"
-               ng-attr-placeholder="{{::state.placeholder || undefined }}"
-               ng-change="vm.check()"
-               ng-disabled="state.disabled || form.disabled" />
 
-        <p ng-if="state.rejected && !state.isValid" class="at-InputMessage--rejected">
+        <input type="text"
-            {{ state.message }}
+               class="form-control at-Input" 
-        </p>
+               ng-class="{ 'at-Input--rejected': state._rejected }"
+               ng-model="state._value"
+               ng-attr-maxlength="{{ state.max_length || undefined }}"
+               ng-attr-tabindex="{{ tab || undefined }}"
+               ng-attr-placeholder="{{::state._placeholder || undefined }}"
+               ng-change="vm.check()"
+               ng-disabled="state._disabled || form.disabled" />
+
+        <at-input-message></at-input-message>
     </div>
 </div>

awx/ui/client/lib/components/input/textarea.partial.html

@@ -1,16 +1,16 @@
 <div class="col-sm-{{::col}}">
     <div class="form-group at-u-flat">
-        <at-input-label state="state"></at-input-label>
+        <at-input-label></at-input-label>
-        <textarea class="form-control at-Input" ng-model="state.value"
+
-                  ng-class="{ 'at-Input--rejected': state.rejected }"
+        <textarea class="form-control at-Input"
-                  ng-attr-maxlength="{{ state.options.max_length || undefined }}"
+                  ng-model="state._value"
+                  ng-class="{ 'at-Input--rejected': state._rejected }"
+                  ng-attr-maxlength="{{ state.max_length || undefined }}"
                   ng-attr-tabindex="{{ tab || undefined }}"
-                  ng-attr-placeholder="{{::state.placeholder || undefined }}"
+                  ng-attr-placeholder="{{::state._placeholder || undefined }}"
                   ng-change="vm.check()"
-                  ng-disabled="state.disabled || form.disabled" />
+                  ng-disabled="state._disabled || form.disabled" /></textarea>
-        </textarea>
+
-        <p ng-if="state.rejected && !state.isValid" class="at-InputMessage--rejected">
+        <at-input-message></at-input-message>
-            {{ state.message }}
-        </p>
     </div>
 </div>

awx/ui/client/lib/components/panel/body.directive.js

@@ -3,10 +3,7 @@ function atPanelBody (pathService) {
         restrict: 'E',
         replace: true,
         transclude: true,
-        templateUrl: pathService.getPartialPath('components/panel/body'),
+        templateUrl: pathService.getPartialPath('components/panel/body')
-        scope: {
-            state: '='
-        }
     };
 }
 

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

@@ -1,27 +1,44 @@
+function atPanelLink (scope, el, attrs, controllers) {
+    let panelController = controllers[0];
+
+    panelController.init(scope, el);
+}
+
 function AtPanelController ($state) {
     let vm = this;
 
+    let scope;
+    let el;
+
+    vm.init = (_scope_, _el_) => {
+        scope = _scope_;
+        el = _el_;
+    };
+
     vm.dismiss = () => {
         $state.go('^');
     };
 
-    vm.use = scope => {
+    vm.use = child => {
-        scope.dismiss = this.dismiss;
+        child.dismiss = vm.dismiss;
     };
 }
 
 AtPanelController.$inject = ['$state'];
 
-function atPanel (pathService) {
+function atPanel (pathService, _$animate_) {
     return {
         restrict: 'E',
         replace: true,
+        require: ['atPanel'],
         transclude: true,
         templateUrl: pathService.getPartialPath('components/panel/panel'),
         controller: AtPanelController,
         controllerAs: 'vm',
+        link: atPanelLink,
         scope: {
-            state: '='
+            state: '=',
+            animate: '@'
         }
     };
 }

awx/ui/client/lib/components/panel/panel.partial.html

@@ -1,3 +1,3 @@
 <div class="panel panel-default at-Panel">
-  <ng-transclude></ng-transclude>
+    <ng-transclude></ng-transclude>
 </div>

awx/ui/client/lib/components/toggle/_index.less

@@ -1,32 +0,0 @@
-.at-ToggleButton {
-    &, &:focus {
-        border-color: @at-gray-light;
-        background-color: @at-white;
-    }
-
-    &:hover {
-        background-color: @at-gray-light-2x;
-    }
-
-    & > span:hover {
-        border-color: @at-gray-light;
-        background-color: inherit;
-    }
-}
-
-.at-ToggleButton--show {
-    &, &:hover, &:focus {
-        background-color: @at-blue;
-        border-color: @at-blue;
-        color: @at-white;
-    }
-}
-
-.at-ToggleContent-well {
-    margin: @at-space-2x 0 0 0;
-    padding: @at-space-3x;
-    border-radius: @at-border-radius;
-    border: 1px solid transparent;
-    background-color: @at-gray-light-2x;
-    color: @at-gray-dark-2x;
-}

awx/ui/client/lib/components/toggle/button.directive.js

@@ -1,12 +0,0 @@
-function atToggleButton () {
-    return {
-        restrict: 'E',
-        transclude: true,
-        templateUrl: 'static/partials/components/toggle/button.partial.html',
-        scope: {
-          config: '='
-        }
-    };
-}
-
-export default atToggleButton;

awx/ui/client/lib/components/toggle/button.partial.html

@@ -1,9 +0,0 @@
-<button class="btn btn-default at-Button at-ToggleButton"
-        ng-class="{ 'at-ToggleButton--show': config.show }"
-        ng-click="config.show = !config.show">
-  <span ng-if="config.button">
-    {{ config.button.text }}
-  </span>
-
-  <ng-transclude ng-if="!config.button"></ng-transclude>
-</button>

awx/ui/client/lib/components/toggle/content.directive.js

@@ -1,12 +0,0 @@
-function atToggleContent () {
-    return {
-        restrict: 'E',
-        transclude: true,
-        templateUrl: 'static/partials/component/toggle/content.partial.html',
-        scope: {
-          config: '='
-        }
-    };
-}
-
-export default atToggleContent;

awx/ui/client/lib/components/toggle/content.partial.html

@@ -1,10 +0,0 @@
-<div ng-show="config.show" class="row">
-  <div ng-if="config.content" class="col-sm-12">
-    <div class="well at-ToggleContent-well">
-      {{ config.content.text }}  
-    </div>
-  </div>
-
-  <ng-transclude ng-if="!config.content"></ng-transclude>
-</div>
-

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

@@ -15,16 +15,6 @@ function CredentialTypeModel (BaseModel) {
         }));
     };
 
-    this.getTypeFromName = name => {
-        let type = this.model.get.data.results.filter(result => result.name === name);
-
-        if (!type.length) {
-            return null;
-        }
-
-        return this.mergeInputProperties(type[0]);
-    };
-
     this.mergeInputProperties = type => {
         return type.inputs.fields.map(field => {
             if (!type.inputs.required || type.inputs.required.indexOf(field.id) === -1) {

awx/ui/client/src/app.js

@@ -72,6 +72,7 @@ import footer from './footer/main';
 import scheduler from './scheduler/main';
 import instanceGroups from './instance-groups/main';
 
+import 'angular-animate';
 import '../lib/components';
 import '../lib/models';
 import '../lib/services';
@@ -136,6 +137,7 @@ var tower = angular.module('Tower', [
     'AWDirectives',
     'features',
 
+    'ngAnimate',
     'at.lib.components',
     'at.lib.models',
     'at.lib.services',