Refactor action/form structure

awx/ui/client/components/_index.less

@@ -1,3 +1,4 @@
+@import 'action/_index';
 @import 'badge/_index';
 @import 'form/_index';
 @import 'input/_index';

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

@@ -0,0 +1,7 @@
+.at-ActionGroup {
+    margin-top: @at-space-6x;
+
+    button:last-child {
+        margin-left: @at-space-5x;
+    }
+}

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

@@ -0,0 +1,16 @@
+function atActionGroup (pathService) {
+    return {
+        restrict: 'E',
+        transclude: true,
+        replace: true,
+        templateUrl: pathService.getPartialPath('components/action/action-group'),
+        scope: {
+            col: '@',
+            pos: '@'
+        }
+    };
+}
+
+atActionGroup.$inject = ['PathService'];
+
+export default atActionGroup;

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

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

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

@@ -1,3 +1,20 @@
+let $state;
+
+function applyCancelProperties (scope) {
+    scope.text = scope.config.text || 'CANCEL';
+    scope.fill = 'Hollow';
+    scope.color = 'white';
+    scope.disabled = false;
+    scope.action = () => $state.go('^');
+}
+
+function applySaveProperties (scope) {
+    scope.text = 'SAVE';
+    scope.fill = '';
+    scope.color = 'green';
+    scope.disabled = true;
+}
+
 function link (scope, el, attrs, form) {
     form.use('action', scope, el);
 
@@ -11,27 +28,15 @@ function link (scope, el, attrs, form) {
     }
 }
 
-function applyCancelProperties (scope) {
+function atFormAction (_$state_, pathService) {
-    scope.text = 'CANCEL';
+    $state = _$state_;
-    scope.fill = 'Hollow';
-    scope.color = 'white';
-    scope.disabled = false;
-}
 
-function applySaveProperties (scope) {
-    scope.text = 'SAVE';
-    scope.fill = '';
-    scope.color = 'green';
-    scope.disabled = true;
-}
-
-function atFormAction (pathService) {
     return {
         restrict: 'E',
         transclude: true,
         replace: true,
         require: '^^at-form',
-        templateUrl: pathService.getPartialPath('components/form/form-action'),
+        templateUrl: pathService.getPartialPath('components/action/action'),
         link,
         scope: {
             config: '='
@@ -39,6 +44,6 @@ function atFormAction (pathService) {
     };
 }
 
-atFormAction.$inject = ['PathService'];
+atFormAction.$inject = ['$state', 'PathService'];
 
 export default atFormAction;

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

@@ -1,4 +1,4 @@
 <button class="btn at-Button{{ fill }}--{{ color }}" ng-disabled="disabled"
-        ng-class="{ 'at-Button--disabled': disabled }" >
+        ng-class="{ 'at-Button--disabled': disabled }" ng-click="action()">
     {{ text }}
 </button>

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

@@ -1,7 +1 @@
-.at-FormActionGroup {
-    margin-top: @at-space-6x;
 
-    button:last-child {
-        margin-left: @at-space-5x;
-    }
-}

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

@@ -1,16 +0,0 @@
-function atFormActionGroup (pathService) {
-    return {
-        restrict: 'E',
-        transclude: true,
-        replace: true,
-        require: '^^at-form',
-        templateUrl: pathService.getPartialPath('components/form/form-action-group'),
-        scope: {
-            config: '='
-        }
-    };
-}
-
-atFormActionGroup.$inject = ['PathService'];
-
-export default atFormActionGroup;

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

@@ -1,5 +0,0 @@
-<div class="col-xs-12 at-FormActionGroup">
-    <div class="pull-right">
-        <ng-transclude></ng-transclude>
-    </div>
-</div>

awx/ui/client/components/index.js

@@ -1,7 +1,7 @@
+import action from './action/action.directive';
+import actionGroup from './action/action-group.directive';
 import badge from './badge/badge.directive';
 import form from './form/form.directive';
-import formAction from './form/form-action.directive';
-import formActionGroup from './form/form-action-group.directive';
 import inputLabel from './input/label.directive';
 import inputSearch from './input/search.directive';
 import inputSelect from './input/select.directive';
@@ -15,10 +15,10 @@ import toggleContent from './toggle/content.directive';
 
 angular
     .module('at.components', [])
+    .directive('atAction', action)
+    .directive('atActionGroup', actionGroup)
     .directive('atBadge', badge)
     .directive('atForm', form)
-    .directive('atFormAction', formAction)
-    .directive('atFormActionGroup', formActionGroup)
     .directive('atInputLabel', inputLabel)
     .directive('atInputSearch', inputSearch)
     .directive('atInputSelect', inputSelect)

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

@@ -3,7 +3,7 @@
 
     background: @at-white;
     border-radius: @at-border-radius;
-    color: @at-gray-dark-3x;
+    color: @at-gray-dark-5x;
 
     &, &:active {
         border-color: @at-gray-dark-2x;

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

@@ -12,10 +12,10 @@
             <at-input-text col="4" config="vm.description"></at-input-text>
             <at-input-select col="4" config="vm.kind"></at-input-select>
 
-            <at-form-action-group>
+            <at-action-group col="12" pos="right">
-                <at-form-action config="vm.cancel"></at-form-action>
+                <at-action config="vm.cancel"></at-action>
-                <at-form-action config="vm.save"></at-form-action>
+                <at-action config="vm.save"></at-action>
-            </at-form-action-group>
+            </at-action-group>
         </at-form>
     </at-panel-body>
 </at-panel>