Merge pull request #1648 from marshmalien/ux-hit-list/add-buttons

UX Hit List - Add Buttons

awx/ui/client/features/_index.less

@@ -1,3 +1,2 @@
-@import 'credentials/_index';
 @import 'output/_index';
 @import 'users/tokens/_index';

awx/ui/client/features/applications/applications.strings.js

@@ -16,6 +16,10 @@ function ApplicationsStrings (BaseString) {
         USERS: t.s('Tokens')
     };
 
+    ns.tooltips = {
+        ADD: t.s('Create a new Application')
+    };
+
     ns.add = {
         PANEL_TITLE: t.s('NEW APPLICATION')
     };

awx/ui/client/features/applications/list-applications.controller.js

@@ -38,6 +38,10 @@ function ListApplicationsController (
         vm.applicationsCount = dataset.count;
     });
 
+    vm.tooltips = {
+        add: strings.get('tooltips.ADD')
+    };
+
     vm.getModified = app => {
         const modified = _.get(app, 'modified');
 

awx/ui/client/features/applications/list-applications.view.html

@@ -23,6 +23,9 @@
                     type="button"
                     ui-sref="applications.add"
                     class="at-Button--add"
+                    id="button-add"
+                    aw-tool-tip="{{vm.tooltips.add}}"
+                    data-placement="top"
                     aria-haspopup="true"
                     aria-expanded="false">
                 </button>

awx/ui/client/features/credentials/_index.less

@@ -1,3 +0,0 @@
-.at-CredentialsPermissions {
-    margin-top: 50px;
-}

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

@@ -69,8 +69,8 @@ function LegacyCredentialsService () {
                         ngClick: '$state.go(\'.add\')',
                         label: 'Add',
                         awToolTip: N_('Add a permission'),
-                        actionClass: 'btn List-buttonSubmit',
+                        actionClass: 'at-Button--add',
-                        buttonContent: `+ ${N_('ADD')}`,
+                        actionId: 'button-add',
                         ngShow: '(credential_obj.summary_fields.user_capabilities.edit || canAdd)'
                     }
                 },

awx/ui/client/features/templates/templates.strings.js

@@ -10,7 +10,6 @@ function TemplatesStrings (BaseString) {
 
     ns.list = {
         PANEL_TITLE: t.s('TEMPLATES'),
-        ADD_BUTTON_LABEL: t.s('ADD'),
         ADD_DD_JT_LABEL: t.s('Job Template'),
         ADD_DD_WF_LABEL: t.s('Workflow Template'),
         ROW_ITEM_LABEL_ACTIVITY: t.s('Activity'),

awx/ui/client/features/templates/templatesList.view.html

@@ -14,13 +14,12 @@
         <div class="at-List-toolbarAction" ng-show="canAdd">
             <button
                 type="button"
-                class="at-List-toolbarActionButton at-Button--success"
+                class="at-Button--add"
+                id="button-add"
                 data-toggle="dropdown"
                 aria-haspopup="true"
                 aria-expanded="false">
-                    &#43; {{:: vm.strings.get('list.ADD_BUTTON_LABEL') }}
+                <span class="sr-only">Toggle Dropdown</span>
-                    <span class="at-List-toolbarDropdownCarat"></span>
-                    <span class="sr-only">Toggle Dropdown</span>
             </button>
             <ul class="dropdown-menu at-List-toolbarActionDropdownMenu">
                 <li>

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

@@ -14,6 +14,7 @@
             type="button"
             ui-sref=".add"
             class="at-Button--add"
+            id="button-add"
             aria-haspopup="true"
             aria-expanded="false">
         </button>

awx/ui/client/legacy/styles/ansible-ui.less

@@ -883,9 +883,11 @@ input[type="checkbox"].checkbox-no-label {
 
 /* Display list actions next to search widget */
 .list-actions {
-    text-align: right;
+    display: flex;
-    margin-bottom: -34px;
     height: 34px;
+    justify-content: flex-end;
+    margin-bottom: -34px;
+    text-align: right;
 
     .fa-lg {
         vertical-align: -8%;

awx/ui/client/legacy/styles/lists.less

@@ -220,6 +220,7 @@ table, tbody {
 }
 
 .List-actions {
+    align-items: center;
     display: flex;
     margin-bottom: -34px;
 }
@@ -235,10 +236,6 @@ table, tbody {
     width: 200px;
 }
 
-.List-action:not(.ng-hide) ~ .List-action:not(.ng-hide) {
-    margin-left: 20px;
-}
-
 .List-buttonSubmit {
     background-color: @submit-button-bg;
     color: @submit-button-text;
@@ -254,6 +251,8 @@ table, tbody {
     background-color: @btn-bg;
     color: @btn-txt;
     border-color: @b7grey;
+    height: 30px;
+    line-height: 14px;
 }
 
 .List-buttonDefault:hover,
@@ -465,16 +464,6 @@ table, tbody {
     background-color: @submit-button-bg-hov;
 }
 
-.List-dropdownCarat {
-    display: inline-block;
-    width: 0;
-    height: 0;
-    vertical-align: middle;
-    border-top: 4px dashed;
-    border-right: 4px solid transparent;
-    border-left: 4px solid transparent;
-}
-
 .List-infoCell {
     display: flex;
     justify-content: flex-end;

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

@@ -45,21 +45,13 @@
     min-width: 80px;
 }
 
-.at-List-toolbarDropdownCarat {
-    margin-left: @at-margin-left-toolbar-carat;
-    display: inline-block;
-    width: 0;
-    height: 0;
-    vertical-align: middle;
-    border-top: 4px dashed;
-    border-right: 4px solid transparent;
-    border-left: 4px solid transparent;
-}
-
 .at-List-toolbarActionDropdownMenu {
+    border-top-right-radius: 0;
+    border: 1px solid @at-gray-d7;
     float: right;
-    right: 0;
     left: auto;
+    margin: 0;
+    right: 0;
 }
 
 .at-List-container {

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

@@ -23,8 +23,14 @@
         content: "+";
         font-size: 20px;
     }
-    border-color: transparent;
+    border: none;
-    margin-left: @at-space-2x;
+    display: inline-flex;
+    margin-left: @at-space-4x;
+
+    &[aria-expanded="true"] {
+        border-bottom-left-radius: 0;
+        border-bottom-right-radius: 0;
+    }
 }
 
 .at-Button--info {

awx/ui/client/src/credential-types/credential-types.list.js

@@ -40,8 +40,8 @@ export default ['i18n', function(i18n){
                 mode: 'all', // One of: edit, select, all
                 ngClick: 'addCredentialType()',
                 awToolTip: i18n._('Create a new credential type'),
-                actionClass: 'btn List-buttonSubmit',
+                actionClass: 'at-Button--add',
-                buttonContent: '+ ' + i18n._('ADD'),
+                actionId: 'button-add',
                 ngShow: 'canAdd'
             }
         },

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

@@ -442,11 +442,12 @@ export default ['i18n', function(i18n) {
                     open: false,
                     actions: {
                         add: {
+                            mode: 'all',
                             ngClick: "$state.go('.add')",
                             label: 'Add',
                             awToolTip: i18n._('Add a permission'),
-                            actionClass: 'btn List-buttonSubmit',
+                            actionClass: 'at-Button--add',
-                            buttonContent: '+ ' + i18n._('ADD'),
+                            actionId: 'button-add',
                             ngShow: '(credential_obj.summary_fields.user_capabilities.edit || canAdd)'
                         }
                     },

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

@@ -50,8 +50,8 @@ export default ['i18n', function(i18n) {
                 mode: 'all', // One of: edit, select, all
                 ngClick: 'addCredential()',
                 awToolTip: i18n._('Create a new credential'),
-                actionClass: 'btn List-buttonSubmit',
+                actionClass: 'at-Button--add',
-                buttonContent: '+ ' + i18n._('ADD'),
+                actionId: 'button-add',
                 ngShow: "true"
             }
         },

awx/ui/client/src/instance-groups/instance-groups.strings.js

@@ -19,6 +19,11 @@ function InstanceGroupsStrings (BaseString) {
         JOBS: t.s('JOBS')
     };
 
+    ns.tooltips = {
+        ADD_INSTANCE_GROUP: t.s('Create a new Instance Group'),
+        ASSOCIATE_INSTANCES: t.s('Associate an existing Instance')
+    };
+
     ns.instance = {
         PANEL_TITLE: t.s('SELECT INSTANCE')
     };

awx/ui/client/src/instance-groups/instances/instances-list.partial.html

@@ -27,7 +27,10 @@
                     type="button"
                     ng-click="$state.go('instanceGroups.instances.modal.add')"
                     class="at-Button--add"
+                    id="button-add"
                     ng-show="vm.isSuperuser"
+                    aw-tool-tip="{{vm.tooltips.add}}"
+                    data-placement="top"
                     aria-expanded="false">
                 </button>
                 <div ui-view="modal"></div>

awx/ui/client/src/instance-groups/instances/instances.controller.js

@@ -48,6 +48,10 @@ function InstancesController ($scope, $state, $http, models, Instance, strings,
         }
     };
 
+    vm.tooltips = {
+        add: strings.get('tooltips.ASSOCIATE_INSTANCES')
+    };
+
     vm.rowAction = {
         toggle: {
             _disabled: !vm.isSuperuser

awx/ui/client/src/instance-groups/list/instance-groups-list.controller.js

@@ -33,6 +33,10 @@ export default ['$scope', '$filter', '$state', 'Alert', 'resolvedModels', 'Datas
             vm.activeId = parseInt($state.params.instance_group_id);
         });
 
+        vm.tooltips = {
+            add: strings.get('tooltips.ADD_INSTANCE_GROUP')
+        };
+
         vm.rowAction = {
             trash: instance_group => {
                 return vm.isSuperuser && instance_group.name !== 'tower';

awx/ui/client/src/instance-groups/list/instance-groups-list.partial.html

@@ -23,7 +23,10 @@
                     type="button"
                     ui-sref="instanceGroups.add"
                     class="at-Button--add"
+                    id="button-add"
                     ng-show="vm.isSuperuser"
+                    aw-tool-tip="{{vm.tooltips.add}}"
+                    data-placement="top"
                     aria-haspopup="true"
                     aria-expanded="false">
                 </button>

awx/ui/client/src/inventories-hosts/hosts/related/groups/hosts-related-groups.list.js

@@ -49,8 +49,8 @@ export default ['i18n', function(i18n) {
                 mode: 'all',
                 ngClick: "associateGroup()",
                 awToolTip: i18n._("Associate this host with a new group"),
-                actionClass: 'btn List-buttonSubmit',
+                actionClass: 'at-Button--add',
-                buttonContent: '+ ' + i18n._('ASSOCIATE GROUP'),
+                actionId: 'button-add',
                 ngShow: 'canAdd',
                 dataPlacement: "top",
             }

awx/ui/client/src/inventories-hosts/inventories/inventory.list.js

@@ -73,8 +73,8 @@ export default ['i18n', function(i18n) {
                 type: 'buttonDropdown',
                 basePaths: ['inventories'],
                 awToolTip: i18n._('Create a new inventory'),
-                actionClass: 'btn List-dropdownSuccess',
+                actionClass: 'at-Button--add',
-                buttonContent: '+ ' + i18n._('ADD'),
+                actionId: 'button-add',
                 options: [
                     {
                         optionContent: i18n._('Inventory'),

awx/ui/client/src/inventories-hosts/inventories/related/groups/groups.list.js

@@ -67,8 +67,8 @@
                 mode: 'all',
                 ngClick: "createGroup()",
                 awToolTip: i18n._("Create a new group"),
-                actionClass: 'btn List-buttonSubmit',
+                actionClass: 'at-Button--add',
-                buttonContent: '+ ' + i18n._('ADD GROUP'),
+                actionId: 'button-add',
                 ngShow: 'canAdd',
                 dataPlacement: "top",
             }

awx/ui/client/src/inventories-hosts/inventories/related/groups/related/nested-groups/group-nested-groups.list.js

@@ -67,8 +67,8 @@
                 mode: 'all',
                 type: 'buttonDropdown',
                 awToolTip: i18n._("Add a group"),
-                actionClass: 'btn List-buttonSubmit',
+                actionClass: 'at-Button--add',
-                buttonContent: '+ ' + i18n._('ADD'),
+                actionId: 'button-add',
                 ngShow: 'canAdd',
                 dataPlacement: "top",
                 options: [

awx/ui/client/src/inventories-hosts/inventories/related/groups/related/nested-hosts/group-nested-hosts.list.js

@@ -116,8 +116,8 @@ export default ['i18n', function(i18n) {
                 mode: 'all',
                 type: 'buttonDropdown',
                 awToolTip: i18n._("Add a host"),
-                actionClass: 'btn List-buttonSubmit',
+                actionClass: 'at-Button--add',
-                buttonContent: '+ ' + i18n._('ADD'),
+                actionId: 'button-add',
                 ngShow: 'canAdd',
                 dataPlacement: "top",
                 options: [

awx/ui/client/src/inventories-hosts/inventories/related/hosts/related-host.list.js

@@ -121,8 +121,8 @@ export default ['i18n', function(i18n) {
                 mode: 'all',
                 ngClick: "createHost()",
                 awToolTip: i18n._("Create a new host"),
-                actionClass: 'btn List-buttonSubmit',
+                actionClass: 'at-Button--add',
-                buttonContent: '+ ' + i18n._('ADD HOST'),
+                actionId: 'button-add',
                 ngShow: 'canAdd',
                 dataPlacement: "top",
             }

awx/ui/client/src/inventories-hosts/inventories/related/hosts/related/nested-groups/host-nested-groups.list.js

@@ -67,8 +67,8 @@
                 mode: 'all',
                 ngClick: 'associateGroup()',
                 awToolTip: i18n._("Associate an existing group"),
-                actionClass: 'btn List-buttonSubmit',
+                actionClass: 'at-Button--add',
-                buttonContent: '+ ' + i18n._('ASSOCIATE GROUP'),
+                actionId: 'button-add',
                 ngShow: 'canAdd',
                 dataPlacement: "top",
             }

awx/ui/client/src/inventories-hosts/inventories/related/sources/sources.list.js

@@ -66,8 +66,8 @@
                 mode: 'all',
                 ngClick: "createSource()",
                 awToolTip: i18n._("Create a new source"),
-                actionClass: 'btn List-buttonSubmit',
+                actionClass: 'at-Button--add',
-                buttonContent: '+ ' + i18n._('ADD SOURCE'),
+                actionId: 'button-add',
                 ngShow: 'canAdd',
                 dataPlacement: "top",
             }

awx/ui/client/src/inventories-hosts/inventories/smart-inventory/smart-inventory.form.js

@@ -113,8 +113,8 @@ export default ['i18n', function(i18n) {
                             label: i18n._('Add'),
                             ngClick: "$state.go('.add')",
                             awToolTip: i18n._('Add a permission'),
-                            actionClass: 'btn List-buttonSubmit',
+                            actionClass: 'at-Button--add',
-                            buttonContent: '+ ADD',
+                            actionId: 'button-add',
                             ngShow: '(inventory_obj.summary_fields.user_capabilities.edit || canAdd)'
 
                         }

awx/ui/client/src/inventories-hosts/inventories/standard-inventory/inventory.form.js

@@ -115,8 +115,8 @@ function(i18n) {
                         label: i18n._('Add'),
                         ngClick: "$state.go('.add')",
                         awToolTip: i18n._('Add a permission'),
-                        actionClass: 'btn List-buttonSubmit',
+                        actionClass: 'at-Button--add',
-                        buttonContent: '+ ADD',
+                        actionId: 'button-add',
                         ngShow: '(inventory_obj.summary_fields.user_capabilities.edit || canAdd)'
 
                     }

awx/ui/client/src/inventory-scripts/inventory-scripts.list.js

@@ -38,8 +38,8 @@ export default ['i18n', function(i18n){
                 mode: 'all', // One of: edit, select, all
                 ngClick: 'addCustomInv()',
                 awToolTip: i18n._('Create a new custom inventory'),
-                actionClass: 'btn List-buttonSubmit',
+                actionClass: 'at-Button--add',
-                buttonContent: '+ ' + i18n._('ADD'),
+                actionId: 'button-add',
                 ngShow: 'canAdd'
             }
         },

awx/ui/client/src/notifications/notificationTemplates.list.js

@@ -50,8 +50,8 @@ export default ['i18n', function(i18n){
                 mode: 'all', // One of: edit, select, all
                 ngClick: 'addNotification()',
                 awToolTip: i18n._('Create a new notification template'),
-                actionClass: 'btn List-buttonSubmit',
+                actionClass: 'at-Button--add',
-                buttonContent: '+ ' + i18n._('ADD'),
+                actionId: 'button-add',
                 ngShow: 'canAdd'
             }
         },

awx/ui/client/src/organizations/linkout/organizations-linkout.route.js

@@ -63,9 +63,9 @@ let lists = [{
             list.basePath = `${GetBasePath('organizations')}${$stateParams.organization_id}/users`;
             list.searchRowActions = {
                 add: {
-                    buttonContent: '+ ADD user',
                     awToolTip: 'Add existing user to organization',
-                    actionClass: 'btn List-buttonSubmit',
+                    actionClass: 'at-Button--add',
+                    actionId: 'button-add',
                     ngClick: 'addUsers()'
                 }
             };
@@ -273,9 +273,8 @@ let lists = [{
             list.basePath = `${GetBasePath('organizations')}${$stateParams.organization_id}/admins`;
             list.searchRowActions = {
                 add: {
-                    buttonContent: '+ ADD administrator',
                     awToolTip: 'Add existing user to organization as administrator',
-                    actionClass: 'btn List-buttonSubmit',
+                    actionClass: 'at-Button--add',
                     ngClick: 'addUsers()'
                 }
             };

awx/ui/client/src/organizations/list/organizations-list.partial.html

@@ -16,12 +16,11 @@
         <div class="List-well">
             <div class="List-actionHolder">
                 <div class="List-actions">
-                    <!-- &#43; ADD -->
+                    <button class="at-Button--add"
-                    <button class="btn List-buttonSubmit"
+                        id="button-add"
                         aw-tool-tip="{{'Create a new organization'|translate}}"
                         ng-show="canAdd"
-                        ng-click="addOrganization()" translate>
+                        ng-click="addOrganization()">
-                        + ADD
                     </button>
                 </div>
             </div>

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

@@ -92,8 +92,8 @@ export default ['NotificationsList', 'i18n',
                             ngClick: "$state.go('.add')",
                             label: i18n._('Add'),
                             awToolTip: i18n._('Add Users to this organization.'),
-                            actionClass: 'btn List-buttonSubmit',
+                            actionClass: 'at-Button--add',
-                            buttonContent: '+ ' + i18n._('ADD'),
+                            actionId: 'button-add',
                             ngShow: '(organization_obj.summary_fields.user_capabilities.edit || canAdd)'
                         }
                     },

awx/ui/client/src/organizations/organizations.list.js

@@ -33,8 +33,8 @@ export default [function() {
                 ngClick: 'addOrganization()',
                 awToolTip: 'Create a new organization',
                 awFeature: 'multiple_organizations',
-                actionClass: 'btn List-buttonSubmit',
+                actionClass: 'at-Button--add',
-                buttonContent: '+ ADD'
+                actionId: 'button-add'
             }
         },
 

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

@@ -253,8 +253,8 @@ export default ['i18n', 'NotificationsList', 'TemplateList',
                         ngClick: "$state.go('.add')",
                         label: 'Add',
                         awToolTip: i18n._('Add a permission'),
-                        actionClass: 'btn List-buttonSubmit',
+                        actionClass: 'at-Button--add',
-                        buttonContent: '+ ' + i18n._('ADD'),
+                        actionId: 'button-add',
                         ngShow: '(project_obj.summary_fields.user_capabilities.edit || canAdd)'
                     }
                 },

awx/ui/client/src/projects/projects.list.js

@@ -74,8 +74,8 @@ export default ['i18n', function(i18n) {
                 mode: 'all', // One of: edit, select, all
                 ngClick: 'addProject()',
                 awToolTip: i18n._('Create a new project'),
-                actionClass: 'btn List-buttonSubmit',
+                actionClass: 'at-Button--add',
-                buttonContent: '+ ' + i18n._('ADD'),
+                actionId: 'button-add',
                 ngShow: "canAdd"
             }
         },

awx/ui/client/src/scheduler/schedules.list.js

@@ -72,8 +72,8 @@ export default ['i18n', function(i18n) {
                 mode: 'all',
                 ngClick: 'addSchedule()',
                 awToolTip: i18n._('Add a new schedule'),
-                actionClass: 'btn List-buttonSubmit',
+                actionClass: 'at-Button--add',
-                buttonContent: '+ ' + i18n._('ADD'),
+                actionId: 'button-add',
                 ngShow: 'canAdd'
             }
         },

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

@@ -751,6 +751,7 @@ angular.module('GeneratorHelpers', [systemStatus.name])
         html += (options.dataPlacement) ? "data-placement=\"" + options.dataPlacement + "\" " : "";
         html += (options.dataContainer) ? "data-container=\"" + options.dataContainer + "\" " : "";
         html += (options.actionClass) ? "class=\"" + options.actionClass + "\" " : "";
+        html += (options.actionId) ? "id=\"" + options.actionId + "\" " : "";
         html += (options.dataTitle) ? "data-title=\"" + options.dataTitle + "\" " : "";
         html += (options.ngDisabled) ? "ng-disabled=\"" + options.ngDisabled + "\" " : "";
         html += (options.ngClick) ? "ng-click=\"$eval(" + options.ngClick + ")\" " : "";

awx/ui/client/src/shared/list-generator/list-actions.partial.html

@@ -4,9 +4,8 @@
     <div ng-if="options.type && options.type === 'template'" ng-include="options.template" ng-show="{{options.ngShow}}"></div>
     <div class="List-action--showTooltipOnDisabled" ng-if="options.showTipWhenDisabled" aw-tool-tip="{{options.awToolTip}}" data-tip-watch="{{options.dataTipWatch}}" data-placement="{{options.dataPlacement}}" data-container="{{options.dataContainer}}" data-title="{{options.dataTitle}}" data-tooltip-inner-class="{{options.tooltipInnerClass}}">
         <div class="btn-group" ng-if="options.type === 'buttonDropdown'" ng-disabled="{{options.ngDisabled}}">
-            <button type="button" class="{{options.actionClass}} List-dropdownButton" ng-bind-html="options.buttonContent" translate></button>
+            <button type="button" class="{{options.actionClass}} List-dropdownButton" id="{{options.actionId}}" ng-bind-html="options.buttonContent" translate></button>
-            <button type="button" class="{{options.actionClass}} List-dropdownButton List-dropdownCaratButton dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
+            <button type="button" class="List-dropdownButton dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
-                <span class="List-dropdownCarat"></span>
                 <span class="sr-only">Toggle Dropdown</span>
             </button>
             <ul class="dropdown-menu pull-right">
@@ -20,6 +19,7 @@
                 toolbar-button
                 mode="options.mode"
                 class="{{options.actionClass}}"
+                id="{{options.actionId}}"
                 ng-disabled="{{options.ngDisabled}}"
                 ng-show="{{options.ngShow}}"
                 ng-click="$eval(options.ngClick)"
@@ -31,12 +31,11 @@
     </div>
     <span ng-if="!options.showTipWhenDisabled">
         <div class="btn-group" ng-if="options.type === 'buttonDropdown'" ng-disabled="{{options.ngDisabled}}" aw-tool-tip="{{options.awToolTip}}" data-tip-watch="{{options.dataTipWatch}}" data-placement="{{options.dataPlacement}}" data-container="{{options.dataContainer}}" ng-show="{{options.ngShow}}">
-            <button type="button" class="{{options.actionClass}} List-dropdownButton dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
+            <button type="button" class="{{options.actionClass}} List-dropdownButton dropdown-toggle" id="{{options.actionId}}" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
                 <span  ng-bind-html="options.buttonContent" translate></span>
-                <span class="List-dropdownCarat"></span>
                 <span class="sr-only">Toggle Dropdown</span>
             </button>
-            <ul class="dropdown-menu pull-right">
+            <ul class="dropdown-menu at-List-toolbarActionDropdownMenu">
                 <li ng-repeat="option in options.options">
                     <a ui-sref="{{option.optionSref}}" ng-bind-html="option.optionContent" ng-show="{{option.ngShow}}"></a>
                 </li>
@@ -51,13 +50,14 @@
                 data-placement="{{options.dataPlacement}}"
                 data-container="{{options.dataContainer}}"
                 class="{{options.actionClass}}"
+                id="{{options.actionId}}"
                 data-title="{{options.dataTitle}}"
                 ng-disabled="{{options.ngDisabled}}"
                 ng-click="$eval(options.ngClick)"
                 ng-show="{{options.ngShow}}"
                 toolbar="true"
                 aw-feature="{{options.awFeature}}">
-                <span ng-bind-html="options.buttonContent" translate></span>
+                <span ng-if="options.buttonContent" ng-bind-html="options.buttonContent" translate></span>
             </button>
         </span>
     </span>

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

@@ -84,8 +84,8 @@ export default ['i18n', function(i18n) {
                             ngClick: "$state.go('.add')",
                             label: i18n._('Add'),
                             awToolTip: i18n._('Add User'),
-                            actionClass: 'btn List-buttonSubmit',
+                            actionClass: 'at-Button--add',
-                            buttonContent: '+ ' + i18n._('ADD'),
+                            actionId: 'button-add',
                             ngShow: '(team_obj.summary_fields.user_capabilities.edit || canAdd)'
                         }
                     },
@@ -156,8 +156,8 @@ export default ['i18n', function(i18n) {
                             ngClick: "$state.go('.add')",
                             label: 'Add',
                             awToolTip: i18n._('Grant Permission'),
-                            actionClass: 'btn List-buttonSubmit',
+                            actionClass: 'at-Button--add',
-                            buttonContent: '+ ' + i18n._('ADD PERMISSIONS'),
+                            actionId: 'button-add',
                             ngShow: '(team_obj.summary_fields.user_capabilities.edit || canAdd)'
                         }
                     }

awx/ui/client/src/teams/teams.list.js

@@ -41,8 +41,8 @@ export default ['i18n', function(i18n) {
                 mode: 'all', // One of: edit, select, all
                 ngClick: 'addTeam()',
                 awToolTip: i18n._('Create a new team'),
-                actionClass: 'btn List-buttonSubmit',
+                actionClass: 'at-Button--add',
-                buttonContent: '+ ' + i18n._('ADD'),
+                actionId: 'button-add',
                 ngShow: 'canAdd && canEdit'
             }
         },

awx/ui/client/src/templates/job_templates/job-template.form.js

@@ -403,8 +403,8 @@ function(NotificationsList, i18n) {
                             ngClick: "$state.go('.add')",
                             label: 'Add',
                             awToolTip: i18n._('Add a permission'),
-                            actionClass: 'btn List-buttonSubmit',
+                            actionClass: 'at-Button--add',
-                            buttonContent: '+ ' + i18n._('ADD'),
+                            actionId: 'button-add',
                             ngShow: '(job_template_obj.summary_fields.user_capabilities.edit || canAddJobTemplate)'
                         }
                     },

awx/ui/client/src/templates/templates.list.js

@@ -54,8 +54,8 @@ export default ['i18n', function(i18n) {
                 type: 'buttonDropdown',
                 basePaths: ['templates'],
                 awToolTip: i18n._('Create a new template'),
-                actionClass: 'btn List-dropdownSuccess',
+                actionClass: 'at-Button--add',
-                buttonContent: '+ ' + i18n._('ADD'),
+                actionId: 'button-add',
                 options: [
                     {
                         optionContent: i18n._('Job Template'),

awx/ui/client/src/templates/workflows.form.js

@@ -147,8 +147,8 @@ export default ['NotificationsList', 'i18n', function(NotificationsList, i18n) {
                             ngClick: "$state.go('.add')",
                             label: i18n._('Add'),
                             awToolTip: i18n._('Add a permission'),
-                            actionClass: 'btn List-buttonSubmit',
+                            actionClass: 'at-Button--add',
-                            buttonContent: '+ '+ i18n._('ADD'),
+                            actionId: 'button-add',
                             ngShow: '(workflow_job_template_obj.summary_fields.user_capabilities.edit || canAddWorkflowJobTemplate)'
                         }
                     },

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

@@ -215,8 +215,8 @@ export default ['i18n', function(i18n) {
                             ngClick: "$state.go('.add')",
                             label: 'Add',
                             awToolTip: i18n._('Grant Permission'),
-                            actionClass: 'btn List-buttonSubmit',
+                            actionClass: 'at-Button--add',
-                            buttonContent: '+ ' + i18n._('ADD PERMISSIONS'),
+                            actionId: 'button-add',
                             ngShow: '(!is_superuser && (user_obj.summary_fields.user_capabilities.edit || canAdd))'
                         }
                     },

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

@@ -46,8 +46,8 @@ export default ['i18n', function(i18n) {
                 ngClick: 'addUser()',
                 basePaths: ['organizations', 'users'], // base path must be in list, or action not available
                 awToolTip: i18n._('Create a new user'),
-                actionClass: 'btn List-buttonSubmit',
+                actionClass: 'at-Button--add',
-                buttonContent: '+ ' + i18n._('ADD'),
+                actionId: 'button-add',
                 ngShow: 'canAdd && canEdit'
             }
         },

awx/ui/test/e2e/objects/credentialTypes.js

@@ -28,7 +28,7 @@ const addEditPanel = {
 const listPanel = {
     selector: 'div[ui-view="list"]',
     elements: {
-        add: '.List-buttonSubmit',
+        add: '#button-add',
         badge: 'div[class="List-titleBadge]',
         titleText: 'div[class="List-titleText"]',
         noitems: 'div[class="List-noItems"]'

awx/ui/test/e2e/objects/credentials.js

@@ -251,7 +251,7 @@ module.exports = {
             elements: {
                 badge: 'span[class~="badge"]',
                 title: 'div[class="List-titleText"]',
-                add: 'button[class~="List-buttonSubmit"]'
+                add: '#button-add'
             },
             sections: {
                 search,

awx/ui/test/e2e/objects/inventories.js

@@ -121,9 +121,9 @@ module.exports = {
             return this.navigate();
         },
         selectAdd (name) {
-            this.api.waitForElementVisible('button span[class="List-dropdownCarat"]');
+            this.api.waitForElementVisible('#button-add');
-            this.expect.element('button span[class="List-dropdownCarat"]').enabled;
+            this.expect.element('#button-add').enabled;
-            this.api.click('button span[class="List-dropdownCarat"]');
+            this.api.click('#button-add');
 
             this.api.useXpath();
             this.api.waitForElementVisible(`.//a[normalize-space(text())="${name}"]`);

awx/ui/test/e2e/objects/inventoryScripts.js

@@ -59,7 +59,7 @@ module.exports = {
             elements: {
                 badge: 'span[class~="badge"]',
                 title: 'div[class="List-titleText"]',
-                add: 'button[class~="List-buttonSubmit"]'
+                add: '#button-add'
             },
             sections: {
                 search,

awx/ui/test/e2e/objects/notificationTemplates.js

@@ -64,7 +64,7 @@ module.exports = {
             elements: {
                 badge: 'span[class~="badge"]',
                 title: 'div[class="List-titleText"]',
-                add: 'button[class~="List-buttonSubmit"]'
+                add: '#button-add'
             },
             sections: {
                 search,

awx/ui/test/e2e/objects/organizations.js

@@ -61,7 +61,7 @@ module.exports = {
             elements: {
                 badge: 'span[class~="badge"]',
                 title: 'div[class="List-titleText"]',
-                add: 'button[class~="List-buttonSubmit"]'
+                add: '#button-add'
             },
             sections: {
                 search,

awx/ui/test/e2e/objects/projects.js

@@ -60,7 +60,7 @@ module.exports = {
             elements: {
                 badge: 'span[class~="badge"]',
                 title: 'div[class="List-titleText"]',
-                add: 'button[class~="List-buttonSubmit"]'
+                add: '#button-add'
             },
             sections: {
                 search,

awx/ui/test/e2e/objects/sections/permissions.js

@@ -6,7 +6,7 @@ import search from './search';
 const permissions = {
     selector: 'div[ui-view="related"]',
     elements: {
-        add: 'button[class="btn List-buttonSubmit"]',
+        add: '#button-add',
         badge: 'div[class="List-titleBadge]',
         titleText: 'div[class="List-titleText"]',
         noitems: 'div[class="List-noItems"]'

awx/ui/test/e2e/objects/teams.js

@@ -58,7 +58,7 @@ module.exports = {
             elements: {
                 badge: 'span[class~="badge"]',
                 title: 'div[class="List-titleText"]',
-                add: 'button[class~="List-buttonSubmit"]'
+                add: '#button-add'
             },
             sections: {
                 search,

awx/ui/test/e2e/objects/templates.js

@@ -94,7 +94,7 @@ module.exports = {
             elements: {
                 badge: 'span[class~="badge"]',
                 title: 'div[class="List-titleText"]',
-                add: 'button[class~="List-buttonSubmit"]'
+                add: '#button-add'
             },
             sections: {
                 search,
@@ -127,7 +127,7 @@ module.exports = {
             return this;
         },
         selectAdd (name) {
-            this.clickWhenEnabled('button span[class="at-List-toolbarDropdownCarat"]');
+            this.clickWhenEnabled('#button-add');
 
             this.api
                 .useXpath()

awx/ui/test/e2e/objects/users.js

@@ -58,7 +58,7 @@ module.exports = {
             elements: {
                 badge: 'span[class~="badge"]',
                 title: 'div[class="List-titleText"]',
-                add: 'button[class~="List-buttonSubmit"]'
+                add: '#button-add'
             },
             sections: {
                 search,

awx/ui/test/e2e/tests/smoke.js

@@ -124,7 +124,7 @@ module.exports = {
         inventories.waitForElementNotVisible('div.spinny');
     },
     'create host': client => {
-        const addHost = './/span[text()="+ ADD HOST"]';
+        const addHost = '.hostsList #button-add';
 
         client.expect.element('#hosts_tab').enabled;
         client.expect.element('#hosts_tab').css('opacity').equal('1');
@@ -136,11 +136,10 @@ module.exports = {
 
         client.expect.element('#hosts_tab').css('background-color').contain('132, 137, 146');
 
-        client.useXpath();
+        client.useCss();
         client.waitForElementVisible(addHost);
         client.expect.element(addHost).enabled;
         client.click(addHost);
-        client.useCss();
 
         client.waitForElementVisible('#host_name');
         client.sendKeys('#host_name', 'localhost');