Cleanup component communication

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

@@ -4,23 +4,13 @@ function AddCredentialsController (models) {
     let credential = models.credential;
     let credentialType = models.credentialType;
     
-    vm.heading = {
+    vm.name = credential.getPostOptions('name');
-        text: 'Create Credentials'
+    vm.description = credential.getPostOptions('description');
-    };
 
-    vm.name = {
+    vm.kind = Object.assign({
-        options: credential.getPostOptions('name')
-    };
-
-    vm.description = {
-        options: credential.getPostOptions('description')
-    };
-
-    vm.kind = {
-        options: credential.getPostOptions('credential_type'),
         data: credentialType.categorizeByKind(),
         placeholder: 'Select a Type'
-    };
+    }, credential.getPostOptions('credential_type'));
 
     vm.dynamic = {
         getInputs: credentialType.getTypeFromName,

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

@@ -1,5 +1,5 @@
-<at-panel config="vm.panel">
+<at-panel>
-    <at-panel-heading config="vm.heading"></at-panel-heading>
+    <at-panel-heading>Create Credentials</at-panel-heading>
 
     <at-tab-navigation>
         <at-tab></at-tab>
@@ -8,11 +8,11 @@
 
     <at-panel-body>
         <at-form>
-            <at-input-text col="4" config="vm.name"></at-input-text>
+            <at-input-text col="4" tab="1" state="vm.name"></at-input-text>
-            <at-input-text col="4" config="vm.description"></at-input-text>
+            <at-input-text col="4" tab="2" state="vm.description"></at-input-text>
-            <at-input-select col="4" config="vm.kind"></at-input-select>
+            <at-input-select col="4" tab="3" state="vm.kind"></at-input-select>
 
-            <at-dynamic-input-group col="4" config="vm.dynamic"></at-dynamic-input-group>
+            <at-dynamic-input-group col="4" tab="4" state="vm.dynamic"></at-dynamic-input-group>
 
             <at-action-group col="12" pos="right">
                 <at-form-action type="cancel"></at-form-action>

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

@@ -1,5 +1,6 @@
 @import 'action/_index';
 @import 'badge/_index';
+@import 'dynamic/_index';
 @import 'form/_index';
 @import 'input/_index';
 @import 'panel/_index';

awx/ui/client/lib/components/action/action-group.directive.js

@@ -1,8 +1,8 @@
 function atActionGroup (pathService) {
     return {
         restrict: 'E',
-        transclude: true,
         replace: true,
+        transclude: true,
         templateUrl: pathService.getPartialPath('components/action/action-group'),
         scope: {
             col: '@',

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

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

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

@@ -0,0 +1,12 @@
+.at-DynamicInputGroup {
+    padding: 0;
+    margin: @at-space-6x 0 0 0;
+}
+
+.at-DynamicInputGroup-inset {
+    position: absolute;
+    width: @at-inset-width;
+    height: 100%;
+    background: @at-gray;
+    left: -@at-inset-width;
+}

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

@@ -1,44 +1,49 @@
 function link (scope, el, attrs, controllers) {
-    let formController = controllers[0];
+    let dynamicController = controllers[0];
-    let dynamicController = controllers[1];
+    let element = el[0].getElementsByClassName('at-DynamicInputGroup-container')[0];
-    el = el[0];
 
-    dynamicController.init(scope, formController, el);
+    dynamicController.init(scope, element);
 }
 
-function atDynamicInputGroupController ($scope, $compile) {
+function AtDynamicInputGroupController ($scope, $compile) {
     let vm = this || {};
 
-    let state;
     let scope;
+    let state;
     let source;
-    let form;
+    let element;
-    let el;
 
-    vm.init = (_scope_, _form_, _el_) => {
+    vm.init = (_scope_, _element_) => {
-        form = _form_;
         scope = _scope_;
-        el = _el_;
+        element = _element_;
+        state = scope.state || {};
+        source = state.source;
 
-        scope.config.state = scope.config.state || {};
+        $scope.$watch('state.source.value', vm.update);
-        state = scope.config.state;
+    };
-        source = scope.config.source;
 
-        $scope.$watch('config.source.state.value', vm.update);
+    vm.isValidSource = () => {
+        if (!source.value || source.value === state.value) {
+            return false;
+        }
+        
+        return true;
     };
 
     vm.update = () => {
-        if (!source.state.value || source.state.value === state.value) {
+        if (!vm.isValidSource()) {
             return;
         }
 
-        state.value = source.state.value;
+        vm.clear();
 
-        let inputs = scope.config.getInputs(source.state.value);
+        state.value = source.value;
+
+        let inputs = state.getInputs(source.value);
         let components = vm.createComponentConfigs(inputs);
 
         vm.insert(components);
-        scope.config.components = components;
+        state.components = components;
         vm.compile(components);
     };
 
@@ -56,45 +61,61 @@ function atDynamicInputGroupController ($scope, $compile) {
                 }
             }
 
-            let html = angular.element(`
-                <${input.component}
-                    col="${scope.col}"
-                    config="${scope.config.reference}.components[${i}]">
-                </${input.component}>
-            `);
-
             components.push({
                 options: input,
-                html
+                element: vm.createElement(input, i)
             });
         });
 
         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 => {
-        components.forEach(component => el.appendChild(component.html[0]));
+        let group = document.createElement('div');
+
+        components.forEach(component => {
+            group.appendChild(component.element[0]);
+        });
+
+        element.appendChild(group);
     };
 
     vm.compile = components => {
-        components.forEach(component => $compile(component.html[0])(scope.$parent));
+        components.forEach(component => $compile(component.element[0])(scope.$parent));
+    };
+
+    vm.clear = () => {
+        element.innerHTML = '';
     };
 }
 
-atDynamicInputGroupController.$inject = ['$scope', '$compile'];
+AtDynamicInputGroupController.$inject = ['$scope', '$compile'];
 
 function atDynamicInputGroup (pathService) {
     return {
         restrict: 'E',
         replace: true,
-        require: ['^^atForm', 'atDynamicInputGroup'],
+        transclude: true,
+        require: ['atDynamicInputGroup'],
         templateUrl: pathService.getPartialPath('components/dynamic/input-group'),
-        controller: atDynamicInputGroupController,
+        controller: AtDynamicInputGroupController,
         controllerAs: 'vm',
         link,
         scope: {
-            config: '=',
+            state: '=',
-            col: '@'
+            col: '@',
+            tab: '@'
         }
     };
 }

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

@@ -1,2 +1,4 @@
-<div>
+<div class="col-sm-12 at-DynamicInputGroup">
+    <div class="at-DynamicInputGroup-inset"></div>
+    <div class="at-DynamicInputGroup-container"></div>
 </div>

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

@@ -10,19 +10,11 @@ function atFormActionController ($state) {
 
     let form;
     let scope;
-    let state;
 
     vm.init = (_form_, _scope_) => {
         form = _form_;
         scope = _scope_;
 
-        scope.config = scope.config || {};
-        scope.config.state = scope.config.state || {};
-
-        state = scope.config.state;
-
-        scope.form = form.use('action', state);
-
         switch(scope.type) {
             case 'cancel':
                 vm.setCancelDefaults();
@@ -31,8 +23,14 @@ function atFormActionController ($state) {
                 vm.setSaveDefaults();
                 break;
             default:
-                // TODO: custom type (when needed)
+                vm.setCustomDefaults();
         }
+
+        form.use('action', scope);
+    };
+
+    vm.setCustomDefaults = () => {
+        
     };
 
     vm.setCancelDefaults = () => {
@@ -62,6 +60,7 @@ function atFormAction (pathService) {
         controllerAs: 'vm',
         link,
         scope: {
+            state: '=',
             type: '@'
         }
     };

awx/ui/client/lib/components/form/action.partial.html

@@ -1,5 +1,5 @@
 <button class="btn at-Button{{ fill }}--{{ color }}"
-        ng-disabled="type !== 'cancel' && !form.state.isValid"
+        ng-disabled="type !== 'cancel' && !form.isValid"
-        ng-class="{ 'at-Button--disabled': form.disabled }" ng-click="action()">
+        ng-class="{ 'at-Button--disabled': !form.isValid }" ng-click="action()">
     {{::text}}
 </button>

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

@@ -11,34 +11,26 @@ function AtFormController () {
         return vm.trackComponent(type, component, el);
     };
 
-    vm.trackComponent = (type, component, el) => {
+    vm.trackComponent = (type, component) => {
-        let meta = {
+        component.type = type;
-            el,
+        component.form = vm.state;
-            type,
-            state: vm.state,
-            disabled: false,
-            tabindex: vm.components.length + 1
-        };
 
-        if (!vm.components.length) {
+        vm.components.push(component)
-            el.focus();
-        }
-
-        vm.components.push(meta)
-
-        return meta;
     };
 
     vm.validate = () => {
         let isValid = true;
 
-        vm.components
+        for (let i = 0; i < vm.components.length; i++) {
-            .filter(component => component.type === 'input')
+            if (vm.components[i].type !== 'input') {
-            .forEach(input => {
+                continue;
-                if (input.isValid) {
+            }
-                    isValid = false;
+
-                }
+            if (!vm.components[i].state.isValid) {
-            });
+                isValid = false;
+                break;
+            }
+        }
 
         return isValid;
     };
@@ -56,20 +48,16 @@ function AtFormController () {
     };
 }
 
-function link (scope, el, attrs, controller, fn) {
-    //console.log(fn);
-}
-
 function atForm (pathService) {
     return {
         restrict: 'E',
+        replace: true,
         transclude: true,
         templateUrl: pathService.getPartialPath('components/form/form'),
         controller: AtFormController,
         controllerAs: 'vm',
-        link, 
         scope: {
-            config: '='
+            state: '='
         }
     };
 }

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

@@ -5,7 +5,7 @@ function atInputLabel (pathService) {
         replace: true,
         templateUrl: pathService.getPartialPath('components/input/label'),
         scope: {
-            config: '='
+            state: '='
         }
     };
 }

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

@@ -1,5 +1,5 @@
 <label class="at-InputLabel at-u-flat">
     <span ng-if="config.options.required" class="pull-left at-InputLabel-required">*</span>
-    <span class="pull-left">{{::config.options.label}}</span>
+    <span class="pull-left">{{::state.options.label}}</span>
-    <at-popover class="pull-left" config="config"></at-popover>
+    <at-popover class="pull-left" state="state"></at-popover>
 </label>

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

@@ -1,10 +1,16 @@
-function link (scope, el, attrs, controllers) {
+function atInputSelectLink (scope, el, attrs, controllers) {
     let formController = controllers[0];
     let inputController = controllers[1];
-    let input = el.find('input')[0];
+    let elements = {
-    let select = el.find('select')[0];
+        input: el.find('input')[0],
+        select: el.find('select')[0]
+    };
 
-    inputController.init(formController, scope, input, select);
+    if (scope.tab === '1') {
+        elements.select.focus();
+    }
+
+    inputController.init(formController, scope, elements);
 }
 
 function AtInputSelectController (eventService) { 
@@ -12,31 +18,29 @@ function AtInputSelectController (eventService) {
 
     let scope;
     let state;
+    let form;
     let input;
     let select;
-    let form;
 
-    vm.init = (_form_, _scope_, _input_, _select_) => {
+    vm.init = (_form_, _scope_, elements) => {
         form = _form_;
+        input = elements.input;
+        select = elements.select;
         scope = _scope_;
-        input = _input_;
+        state = scope.state || {};
-        select = _select_;
-
-        scope.config.state = scope.config.state || {};
-        state = scope.config.state;
 
+        state.required = state.required || false;
         state.isValid = state.isValid || false;
-        state.message = state.message || '';
+        state.disabled = state.disabled || false;
-        state.required = scope.config.options.required || false;
 
-        scope.form = form.use('input', state, input);
+        form.use('input', scope);
 
         vm.setListeners();
         vm.check();
     };
 
     vm.setListeners = () => {
-        let listeners = eventService.addListeners(scope, [
+        let listeners = eventService.addListeners([
             [input, 'focus', () => select.focus],
             [select, 'mousedown', () => scope.$apply(() => scope.open = !scope.open)],
             [select, 'focus', () => input.classList.add('at-Input--focus')],
@@ -58,7 +62,9 @@ function AtInputSelectController (eventService) {
 
         if (state.required && !state.value) {
             isValid = false;    
-        } else if (state.validate && !state.validate(scope.config.input)) {
+        } 
+        
+        if (state.validate && !state.validate(state.value)) {
             isValid = false;  
         }
 
@@ -86,9 +92,9 @@ function atInputSelect (pathService) {
         templateUrl: pathService.getPartialPath('components/input/select'),
         controller: AtInputSelectController,
         controllerAs: 'vm',
-        link,
+        link: atInputSelectLink,
         scope: {
-            config: '=',
+            state: '=',
             col: '@',
             tab: '@'
         }

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

@@ -1,17 +1,16 @@
-<div class="col-sm-{{ col }}">
+<div class="col-sm-{{::col}}">
     <div class="form-group at-u-flat">
-        <at-input-label config="config"></at-input-label>
+        <at-input-label state="state"></at-input-label>
         <div class="at-InputGroup at-InputSelect">
             <input type="text" class="form-control at-Input at-InputSelect-input"
-                   placeholder="{{ config.placeholder | uppercase }}"
+                   placeholder="{{ state.placeholder | uppercase }}"
-                   ng-model="config.state.value" ng-disabled="form.disabled"
+                   ng-model="state.value" ng-disabled="state.disabled"
                    ng-change="vm.check()" />
 
-            <select class="form-control at-InputSelect-select" ng-model="config.state.value"
+            <select class="form-control at-InputSelect-select" ng-model="state.value"
-                    ng-attr-tabindex="{{ form.tabindex || undefined }}" 
+                    ng-attr-tabindex="{{ tab || undefined }}" 
-                    ng-attr-autofocus="{{ form.autofocus || undefined }}"
+                    ng-disabled="state.disabled">
-                    ng-disabled="form.disabled">
+                <optgroup ng-repeat="group in state.data" label="{{::group.category | uppercase }}">
-                <optgroup ng-repeat="group in config.data" label="{{::group.category | uppercase }}">
                     <option ng-repeat="item in group.data" value="{{ item.name }}">
                         {{ item.name }}
                     </option>

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

@@ -1,33 +1,31 @@
-function link (scope, el, attrs, controllers) {
+function atInputTextLink (scope, el, attrs, controllers) {
     let formController = controllers[0];
     let inputController = controllers[1];
-    let input = el.find('input')[0];
 
-    inputController.init(formController, scope, input);
+    if (scope.tab === '1') {
+        el.find('input')[0].focus();
+    }
+
+    inputController.init(formController, scope);
 }
 
 function AtInputTextController () {
     let vm = this || {};
 
-    let state;
     let scope;
-    let input;
+    let state;
     let form;
 
-    vm.init = (_form_, _scope_, _input_) => {
+    vm.init = (_form_, _scope_) => {
         form = _form_;
         scope = _scope_;
-        input = _input_;
+        state = scope.state || {};
 
-        scope.config.state = scope.config.state || {};
-        state = scope.config.state;
-        state.required = scope.config.options.required;
-
-        state.isValid = state.isValid || false;
-        state.message = state.message || '';
         state.required = state.required || false;
+        state.isValid = state.isValid || false;
+        state.disabled = state.disabled || false;
 
-        scope.form = form.use('input', state, input);
+        form.use('input', scope);
 
         vm.check();
     };
@@ -37,7 +35,9 @@ function AtInputTextController () {
 
         if (state.required && !state.value) {
             isValid = false;    
-        } else if (state.validate && !state.validate(scope.config.input)) {
+        }
+
+        if (state.validate && !state.validate(state.value)) {
             isValid = false;  
         }
 
@@ -63,9 +63,9 @@ function atInputText (pathService) {
         templateUrl: pathService.getPartialPath('components/input/text'),
         controller: AtInputTextController,
         controllerAs: 'vm',
-        link,
+        link: atInputTextLink,
         scope: {
-            config: '=',
+            state: '=',
             col: '@',
             tab: '@'
         }

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

@@ -1,11 +1,10 @@
 <div class="col-sm-{{::col}}">
     <div class="form-group at-u-flat">
-        <at-input-label config="config"></at-input-label>
+        <at-input-label state="state"></at-input-label>
-        <input type="text" class="form-control at-Input" ng-model="config.state.value"
+        <input type="text" class="form-control at-Input" ng-model="state.value"
-               ng-attr-autofocus="{{ form.autofocus || undefined }}"
+               ng-attr-maxlength="{{ state.options.max_length || undefined }}"
-               ng-attr-maxlength="{{ config.options.max_length || undefined }}"
+               ng-attr-tabindex="{{ tab || undefined }}"
-               tabindex="{{ form.tabindex || undefined }}"
+               ng-attr-placeholder="{{::state.placeholder || undefined }}"
-               placeholder="{{::config.placeholder}}"
+               ng-change="vm.check()" ng-disabled="state.disabled" />
-               ng-change="vm.check()" ng-disabled="form.disabled" />
     </div>
 </div>

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

@@ -1,9 +1,12 @@
 function atPanelBody (pathService) {
     return {
         restrict: 'E',
-        require: '^^atPanel',
+        replace: true,
         transclude: true,
         templateUrl: pathService.getPartialPath('components/panel/body'),
+        scope: {
+            state: '='
+        }
     };
 }
 

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

@@ -6,12 +6,10 @@ function atPanelHeading (pathService) {
     return {
         restrict: 'E',
         require: '^^atPanel',
+        replace: true,
         transclude: true,
         templateUrl: pathService.getPartialPath('components/panel/heading'),
-        link,
+        link
-        scope: {
-            config: '='
-        }
     };
 }
 

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

@@ -1,7 +1,7 @@
 <div class="row">
     <div class="col-xs-10">
         <h3 class="at-Panel-headingTitle">
-            {{ config.text }}
+            <ng-transclude></ng-transclude>
         </h3>
     </div>
     <div class="col-xs-2">

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

@@ -6,24 +6,25 @@ function dismiss ($state) {
     $state.go('^');
 }
 
-function controller ($state) {
+function AtPanelController ($state) {
     let vm = this;
 
     vm.dismiss = dismiss.bind(vm, $state);
     vm.use = use;
 }
 
-controller.$inject = ['$state'];
+AtPanelController.$inject = ['$state'];
 
 function atPanel (pathService) {
     return {
         restrict: 'E',
+        replace: true,
         transclude: true,
         templateUrl: pathService.getPartialPath('components/panel/panel'),
-        controller,
+        controller: AtPanelController,
         controllerAs: 'vm',
         scope: {
-            config: '='
+            state: '='
         }
     };
 }

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

@@ -60,7 +60,7 @@ function atPopover (_pathService_) {
         templateUrl: pathService.getPartialPath('components/popover/popover'),
         link,
         scope: {
-            config: '='
+            state: '='
         }
     };
 }

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

@@ -1,4 +1,4 @@
-<div ng-show="config.options.help_text" class="at-Popover">
+<div ng-show="state.options.help_text" class="at-Popover">
     <span class="at-Popover-icon">
         <i class="fa fa-question-circle"></i>
     </span>
@@ -6,6 +6,6 @@
         <div class="at-Popover-arrow">
             <i class="fa fa-caret-left fa-2x"></i>
         </div>
-        <div class="at-Popover-content">{{::config.options.help_text}}</div>
+        <div class="at-Popover-content">{{::state.options.help_text}}</div>
     </div>
 </div>

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

@@ -1,5 +1,12 @@
 let $resource;
 
+function get() {
+    return $resource(this.path).get().$promise
+        .then(response => {
+            this.model.data = response;
+        });
+}
+
 function options () {
     let actions = {
         options: {    
@@ -13,13 +20,6 @@ function options () {
         });
 }
 
-function get () {
-    return $resource(this.path).get().$promise
-        .then(response => {
-            this.model.data = response;
-        });
-}
-
 function getPostOptions (name) {
     return this.model.options.actions.POST[name];
 }
@@ -30,18 +30,20 @@ function normalizePath (resource) {
     return `${version}${resource}/`;
 }
 
-function Base (_$resource_) {
+function BaseModel (_$resource_) {
     $resource = _$resource_;
 
-    return () => ({
+    return function extend (path) {
-        model: {},
+        this.get = get;
-        get,
+        this.options = options;
-        options,
+        this.getPostOptions = getPostOptions;
-        getPostOptions,
+        this.normalizePath = normalizePath;
-        normalizePath
+
-    });
+        this.model = {};
+        this.path = this.normalizePath(path);
+    };
 }
 
-Base.$inject = ['$resource'];
+BaseModel.$inject = ['$resource'];
 
-export default Base;
+export default BaseModel;

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

@@ -1,9 +1,7 @@
-function Credential (BaseModel) {
+function CredentialModel (BaseModel) {
-    Object.assign(this, BaseModel());
+    BaseModel.call(this, 'credentials');
-
-    this.path = this.normalizePath('credentials');
 }
 
-Credential.$inject = ['BaseModel'];
+CredentialModel.$inject = ['BaseModel'];
 
-export default Credential;
+export default CredentialModel;

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

@@ -1,7 +1,5 @@
-function CredentialType (BaseModel) {
+function CredentialTypeModel (BaseModel) {
-    Object.assign(this, BaseModel());
+    BaseModel.call(this, 'credential_types');
-
-    this.path = this.normalizePath('credential_types');
 
     this.categorizeByKind = () => {
         let group = {};
@@ -40,6 +38,6 @@ function CredentialType (BaseModel) {
     };
 }
 
-CredentialType.$inject = ['BaseModel'];
+CredentialTypeModel.$inject = ['BaseModel'];
 
-export default CredentialType;
+export default CredentialTypeModel;

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

@@ -1,35 +1,28 @@
-function addListeners (scope, list) {
+function EventService () {
-    let listeners = [];
+    this.addListeners = list => {
+        let listeners = [];
 
-    list.forEach(args => {
+        list.forEach(args => listeners.push(this.addListener(...args)));
-        listeners.push(addListener.call(null, scope, ...args));
-    });
 
-    return listeners;
+        return listeners;
-}
-
-function addListener (scope, el, name, fn) {
-    let listener = {
-        fn,
-        name,
-        el
     };
 
-    listener.el.addEventListener(listener.name, listener.fn);
+    this.addListener = (el, name, fn) => {
+        let listener = {
+            fn,
+            name,
+            el
+        };
 
-    return listener;
+        listener.el.addEventListener(listener.name, listener.fn);
-}
 
-function remove (listeners) {
+        return listener;
-    listeners.forEach(listener => {
+    };
-        listener.el.removeEventListener(listener.name, listener.fn);
-    });
-}
 
-function EventService () {
+    this.remove = listeners => {
-    return {
+        listeners.forEach(listener => {
-        addListeners,
+            listener.el.removeEventListener(listener.name, listener.fn);
-        remove
+        });
     };
 }
 

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

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

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

@@ -1,16 +1,11 @@
-function getPartialPath (path) {
-    return `/static/partials/${path}.partial.html`;
-}
-
-function getViewPath (path) {
-    return `/static/views/${path}.view.html`;
-}
-
 function PathService () {
-    return {
+    this.getPartialPath = path => {
-        getPartialPath,
+        return `/static/partials/${path}.partial.html`;
-        getViewPath
     };
+
+    this.getViewPath = path => {
+        return `/static/views/${path}.view.html`;
+    }
 }
 
 export default PathService;

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

@@ -1,3 +1,8 @@
+.at-u-noSpace {
+    margin: 0;
+    padding: 0;
+}
+
 .at-u-flat {
     padding-top: 0;
     padding-bottom: 0;

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

@@ -63,3 +63,4 @@
 @at-border-radius: 5px;
 @at-input-height: 34px;
 @at-popover-width: 320px;
+@at-inset-width: 5px;