From dce52d05525759889d0bcda68b01d37a38f988e4 Mon Sep 17 00:00:00 2001
From: Marliana Lara <mlara@redhat.com>
Date: Tue, 1 May 2018 14:14:28 -0400
Subject: [PATCH] Update the Add button content and styles

* Change the text from "Add" to "+"
* Update the e2e test to check for an id #button-add
---
 awx/ui/client/features/_index.less              |  1 -
 .../applications/list-applications.view.html    |  1 +
 awx/ui/client/features/credentials/_index.less  |  3 ---
 .../features/credentials/legacy.credentials.js  |  4 ++--
 .../features/templates/templates.strings.js     |  1 -
 .../features/templates/templatesList.view.html  |  6 ++----
 .../users/tokens/users-tokens-list.partial.html |  1 +
 awx/ui/client/legacy/styles/ansible-ui.less     |  6 ++++--
 awx/ui/client/legacy/styles/lists.less          | 17 +++--------------
 awx/ui/client/lib/components/list/_index.less   | 11 -----------
 awx/ui/client/lib/theme/_global.less            |  5 +++--
 .../credential-types/credential-types.list.js   |  4 ++--
 .../client/src/credentials/credentials.form.js  |  5 +++--
 .../client/src/credentials/credentials.list.js  |  4 ++--
 .../instances/instances-list.partial.html       |  1 +
 .../list/instance-groups-list.partial.html      |  1 +
 .../related/groups/hosts-related-groups.list.js |  4 ++--
 .../inventories/inventory.list.js               |  4 ++--
 .../inventories/related/groups/groups.list.js   |  4 ++--
 .../nested-groups/group-nested-groups.list.js   |  4 ++--
 .../nested-hosts/group-nested-hosts.list.js     |  4 ++--
 .../related/hosts/related-host.list.js          |  4 ++--
 .../nested-groups/host-nested-groups.list.js    |  4 ++--
 .../inventories/related/sources/sources.list.js |  4 ++--
 .../smart-inventory/smart-inventory.form.js     |  4 ++--
 .../standard-inventory/inventory.form.js        |  4 ++--
 .../inventory-scripts/inventory-scripts.list.js |  4 ++--
 .../notifications/notificationTemplates.list.js |  4 ++--
 .../linkout/organizations-linkout.route.js      |  7 +++----
 .../list/organizations-list.partial.html        |  7 +++----
 .../src/organizations/organizations.form.js     |  4 ++--
 .../src/organizations/organizations.list.js     |  4 ++--
 awx/ui/client/src/projects/projects.form.js     |  4 ++--
 awx/ui/client/src/projects/projects.list.js     |  4 ++--
 awx/ui/client/src/scheduler/schedules.list.js   |  4 ++--
 awx/ui/client/src/shared/generator-helpers.js   |  1 +
 .../list-generator/list-actions.partial.html    | 12 ++++++------
 awx/ui/client/src/teams/teams.form.js           |  8 ++++----
 awx/ui/client/src/teams/teams.list.js           |  4 ++--
 .../job_templates/job-template.form.js          |  4 ++--
 awx/ui/client/src/templates/templates.list.js   |  4 ++--
 awx/ui/client/src/templates/workflows.form.js   |  4 ++--
 awx/ui/client/src/users/users.form.js           |  4 ++--
 awx/ui/client/src/users/users.list.js           |  4 ++--
 awx/ui/test/e2e/objects/credentialTypes.js      |  2 +-
 awx/ui/test/e2e/objects/credentials.js          |  2 +-
 awx/ui/test/e2e/objects/inventories.js          |  6 +++---
 awx/ui/test/e2e/objects/inventoryScripts.js     |  2 +-
 .../test/e2e/objects/notificationTemplates.js   |  2 +-
 awx/ui/test/e2e/objects/organizations.js        |  2 +-
 awx/ui/test/e2e/objects/projects.js             |  2 +-
 awx/ui/test/e2e/objects/sections/permissions.js |  2 +-
 awx/ui/test/e2e/objects/teams.js                |  2 +-
 awx/ui/test/e2e/objects/templates.js            |  4 ++--
 awx/ui/test/e2e/objects/users.js                |  2 +-
 awx/ui/test/e2e/tests/smoke.js                  |  5 ++---
 56 files changed, 104 insertions(+), 127 deletions(-)
 delete mode 100644 awx/ui/client/features/credentials/_index.less

diff --git a/awx/ui/client/features/_index.less b/awx/ui/client/features/_index.less
index 59e8e4630b..04be5b31bb 100644
--- a/awx/ui/client/features/_index.less
+++ b/awx/ui/client/features/_index.less
@@ -1,3 +1,2 @@
-@import 'credentials/_index';
 @import 'output/_index';
 @import 'users/tokens/_index';
diff --git a/awx/ui/client/features/applications/list-applications.view.html b/awx/ui/client/features/applications/list-applications.view.html
index 1803e5ab66..1dd96b2dc1 100644
--- a/awx/ui/client/features/applications/list-applications.view.html
+++ b/awx/ui/client/features/applications/list-applications.view.html
@@ -23,6 +23,7 @@
                     type="button"
                     ui-sref="applications.add"
                     class="at-Button--add"
+                    id="button-add"
                     aria-haspopup="true"
                     aria-expanded="false">
                 </button>
diff --git a/awx/ui/client/features/credentials/_index.less b/awx/ui/client/features/credentials/_index.less
deleted file mode 100644
index 87f746b2c3..0000000000
--- a/awx/ui/client/features/credentials/_index.less
+++ /dev/null
@@ -1,3 +0,0 @@
-.at-CredentialsPermissions {
-    margin-top: 50px;
-}
diff --git a/awx/ui/client/features/credentials/legacy.credentials.js b/awx/ui/client/features/credentials/legacy.credentials.js
index 07cee1329d..27428feb7b 100644
--- a/awx/ui/client/features/credentials/legacy.credentials.js
+++ b/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',
-                        buttonContent: `&#43; ${N_('ADD')}`,
+                        actionClass: 'at-Button--add',
+                        actionId: 'button-add',
                         ngShow: '(credential_obj.summary_fields.user_capabilities.edit || canAdd)'
                     }
                 },
diff --git a/awx/ui/client/features/templates/templates.strings.js b/awx/ui/client/features/templates/templates.strings.js
index 896cfd87bd..3bb2d38b66 100644
--- a/awx/ui/client/features/templates/templates.strings.js
+++ b/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'),
diff --git a/awx/ui/client/features/templates/templatesList.view.html b/awx/ui/client/features/templates/templatesList.view.html
index e68ddef8fb..2608a04177 100644
--- a/awx/ui/client/features/templates/templatesList.view.html
+++ b/awx/ui/client/features/templates/templatesList.view.html
@@ -14,13 +14,11 @@
         <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="at-List-toolbarDropdownCarat"></span>
-                    <span class="sr-only">Toggle Dropdown</span>
             </button>
             <ul class="dropdown-menu at-List-toolbarActionDropdownMenu">
                 <li>
diff --git a/awx/ui/client/features/users/tokens/users-tokens-list.partial.html b/awx/ui/client/features/users/tokens/users-tokens-list.partial.html
index 390361faba..e460e5ecf4 100644
--- a/awx/ui/client/features/users/tokens/users-tokens-list.partial.html
+++ b/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>
diff --git a/awx/ui/client/legacy/styles/ansible-ui.less b/awx/ui/client/legacy/styles/ansible-ui.less
index 1963ac4361..6349dfbd61 100644
--- a/awx/ui/client/legacy/styles/ansible-ui.less
+++ b/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;
-    margin-bottom: -34px;
+    display: flex;
     height: 34px;
+    justify-content: flex-end;
+    margin-bottom: -34px;
+    text-align: right;
 
     .fa-lg {
         vertical-align: -8%;
diff --git a/awx/ui/client/legacy/styles/lists.less b/awx/ui/client/legacy/styles/lists.less
index 36cc6f0b47..f7746f8664 100644
--- a/awx/ui/client/legacy/styles/lists.less
+++ b/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;
diff --git a/awx/ui/client/lib/components/list/_index.less b/awx/ui/client/lib/components/list/_index.less
index dfcb74adad..5e05d07c69 100644
--- a/awx/ui/client/lib/components/list/_index.less
+++ b/awx/ui/client/lib/components/list/_index.less
@@ -45,17 +45,6 @@
     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 {
     float: right;
     right: 0;
diff --git a/awx/ui/client/lib/theme/_global.less b/awx/ui/client/lib/theme/_global.less
index 109e316be5..b172089c23 100644
--- a/awx/ui/client/lib/theme/_global.less
+++ b/awx/ui/client/lib/theme/_global.less
@@ -23,8 +23,9 @@
         content: "+";
         font-size: 20px;
     }
-    border-color: transparent;
-    margin-left: @at-space-2x;
+    border: none;
+    display: flex;
+    margin-left: @at-space-4x;
 }
 
 .at-Button--info {
diff --git a/awx/ui/client/src/credential-types/credential-types.list.js b/awx/ui/client/src/credential-types/credential-types.list.js
index 8bd6981aa9..5b6d73fcd3 100644
--- a/awx/ui/client/src/credential-types/credential-types.list.js
+++ b/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',
-                buttonContent: '&#43; ' + i18n._('ADD'),
+                actionClass: 'at-Button--add',
+                actionId: 'button-add',
                 ngShow: 'canAdd'
             }
         },
diff --git a/awx/ui/client/src/credentials/credentials.form.js b/awx/ui/client/src/credentials/credentials.form.js
index 088dbd7737..293a4df58c 100644
--- a/awx/ui/client/src/credentials/credentials.form.js
+++ b/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',
-                            buttonContent: '&#43; ' + i18n._('ADD'),
+                            actionClass: 'at-Button--add',
+                            actionId: 'button-add',
                             ngShow: '(credential_obj.summary_fields.user_capabilities.edit || canAdd)'
                         }
                     },
diff --git a/awx/ui/client/src/credentials/credentials.list.js b/awx/ui/client/src/credentials/credentials.list.js
index fbc4c826d5..465283f134 100644
--- a/awx/ui/client/src/credentials/credentials.list.js
+++ b/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',
-                buttonContent: '&#43; ' + i18n._('ADD'),
+                actionClass: 'at-Button--add',
+                actionId: 'button-add',
                 ngShow: "true"
             }
         },
diff --git a/awx/ui/client/src/instance-groups/instances/instances-list.partial.html b/awx/ui/client/src/instance-groups/instances/instances-list.partial.html
index 5a7a26021d..512b74f867 100644
--- a/awx/ui/client/src/instance-groups/instances/instances-list.partial.html
+++ b/awx/ui/client/src/instance-groups/instances/instances-list.partial.html
@@ -27,6 +27,7 @@
                     type="button"
                     ng-click="$state.go('instanceGroups.instances.modal.add')"
                     class="at-Button--add"
+                    id="button-add"
                     ng-show="vm.isSuperuser"
                     aria-expanded="false">
                 </button>
diff --git a/awx/ui/client/src/instance-groups/list/instance-groups-list.partial.html b/awx/ui/client/src/instance-groups/list/instance-groups-list.partial.html
index 8d75d6bc72..2fa0440c1e 100644
--- a/awx/ui/client/src/instance-groups/list/instance-groups-list.partial.html
+++ b/awx/ui/client/src/instance-groups/list/instance-groups-list.partial.html
@@ -23,6 +23,7 @@
                     type="button"
                     ui-sref="instanceGroups.add"
                     class="at-Button--add"
+                    id="button-add"
                     ng-show="vm.isSuperuser"
                     aria-haspopup="true"
                     aria-expanded="false">
diff --git a/awx/ui/client/src/inventories-hosts/hosts/related/groups/hosts-related-groups.list.js b/awx/ui/client/src/inventories-hosts/hosts/related/groups/hosts-related-groups.list.js
index 47840e3179..b51f233f4a 100644
--- a/awx/ui/client/src/inventories-hosts/hosts/related/groups/hosts-related-groups.list.js
+++ b/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',
-                buttonContent: '&#43; ' + i18n._('ASSOCIATE GROUP'),
+                actionClass: 'at-Button--add',
+                actionId: 'button-add',
                 ngShow: 'canAdd',
                 dataPlacement: "top",
             }
diff --git a/awx/ui/client/src/inventories-hosts/inventories/inventory.list.js b/awx/ui/client/src/inventories-hosts/inventories/inventory.list.js
index 07991c8397..141de6d5a9 100644
--- a/awx/ui/client/src/inventories-hosts/inventories/inventory.list.js
+++ b/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',
-                buttonContent: '&#43; ' + i18n._('ADD'),
+                actionClass: 'at-Button--add',
+                actionId: 'button-add',
                 options: [
                     {
                         optionContent: i18n._('Inventory'),
diff --git a/awx/ui/client/src/inventories-hosts/inventories/related/groups/groups.list.js b/awx/ui/client/src/inventories-hosts/inventories/related/groups/groups.list.js
index fb85c360ed..971ff36c97 100644
--- a/awx/ui/client/src/inventories-hosts/inventories/related/groups/groups.list.js
+++ b/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',
-                buttonContent: '&#43; ' + i18n._('ADD GROUP'),
+                actionClass: 'at-Button--add',
+                actionId: 'button-add',
                 ngShow: 'canAdd',
                 dataPlacement: "top",
             }
diff --git a/awx/ui/client/src/inventories-hosts/inventories/related/groups/related/nested-groups/group-nested-groups.list.js b/awx/ui/client/src/inventories-hosts/inventories/related/groups/related/nested-groups/group-nested-groups.list.js
index 95df7e4348..38730de270 100644
--- a/awx/ui/client/src/inventories-hosts/inventories/related/groups/related/nested-groups/group-nested-groups.list.js
+++ b/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',
-                buttonContent: '&#43; ' + i18n._('ADD'),
+                actionClass: 'at-Button--add',
+                actionId: 'button-add',
                 ngShow: 'canAdd',
                 dataPlacement: "top",
                 options: [
diff --git a/awx/ui/client/src/inventories-hosts/inventories/related/groups/related/nested-hosts/group-nested-hosts.list.js b/awx/ui/client/src/inventories-hosts/inventories/related/groups/related/nested-hosts/group-nested-hosts.list.js
index c3a7aef417..a6af0d8c71 100644
--- a/awx/ui/client/src/inventories-hosts/inventories/related/groups/related/nested-hosts/group-nested-hosts.list.js
+++ b/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',
-                buttonContent: '&#43; ' + i18n._('ADD'),
+                actionClass: 'at-Button--add',
+                actionId: 'button-add',
                 ngShow: 'canAdd',
                 dataPlacement: "top",
                 options: [
diff --git a/awx/ui/client/src/inventories-hosts/inventories/related/hosts/related-host.list.js b/awx/ui/client/src/inventories-hosts/inventories/related/hosts/related-host.list.js
index 24262c1017..f56f6c4f07 100644
--- a/awx/ui/client/src/inventories-hosts/inventories/related/hosts/related-host.list.js
+++ b/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',
-                buttonContent: '&#43; ' + i18n._('ADD HOST'),
+                actionClass: 'at-Button--add',
+                actionId: 'button-add',
                 ngShow: 'canAdd',
                 dataPlacement: "top",
             }
diff --git a/awx/ui/client/src/inventories-hosts/inventories/related/hosts/related/nested-groups/host-nested-groups.list.js b/awx/ui/client/src/inventories-hosts/inventories/related/hosts/related/nested-groups/host-nested-groups.list.js
index a41e3399f5..e544040e5b 100644
--- a/awx/ui/client/src/inventories-hosts/inventories/related/hosts/related/nested-groups/host-nested-groups.list.js
+++ b/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',
-                buttonContent: '&#43; ' + i18n._('ASSOCIATE GROUP'),
+                actionClass: 'at-Button--add',
+                actionId: 'button-add',
                 ngShow: 'canAdd',
                 dataPlacement: "top",
             }
diff --git a/awx/ui/client/src/inventories-hosts/inventories/related/sources/sources.list.js b/awx/ui/client/src/inventories-hosts/inventories/related/sources/sources.list.js
index d2daa6b571..f06d1f3738 100644
--- a/awx/ui/client/src/inventories-hosts/inventories/related/sources/sources.list.js
+++ b/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',
-                buttonContent: '&#43; ' + i18n._('ADD SOURCE'),
+                actionClass: 'at-Button--add',
+                actionId: 'button-add',
                 ngShow: 'canAdd',
                 dataPlacement: "top",
             }
diff --git a/awx/ui/client/src/inventories-hosts/inventories/smart-inventory/smart-inventory.form.js b/awx/ui/client/src/inventories-hosts/inventories/smart-inventory/smart-inventory.form.js
index 46df8595b0..01a49b008b 100644
--- a/awx/ui/client/src/inventories-hosts/inventories/smart-inventory/smart-inventory.form.js
+++ b/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',
-                            buttonContent: '&#43; ADD',
+                            actionClass: 'at-Button--add',
+                            actionId: 'button-add',
                             ngShow: '(inventory_obj.summary_fields.user_capabilities.edit || canAdd)'
 
                         }
diff --git a/awx/ui/client/src/inventories-hosts/inventories/standard-inventory/inventory.form.js b/awx/ui/client/src/inventories-hosts/inventories/standard-inventory/inventory.form.js
index ab8d562088..1c9f1dd13d 100644
--- a/awx/ui/client/src/inventories-hosts/inventories/standard-inventory/inventory.form.js
+++ b/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',
-                        buttonContent: '&#43; ADD',
+                        actionClass: 'at-Button--add',
+                        actionId: 'button-add',
                         ngShow: '(inventory_obj.summary_fields.user_capabilities.edit || canAdd)'
 
                     }
diff --git a/awx/ui/client/src/inventory-scripts/inventory-scripts.list.js b/awx/ui/client/src/inventory-scripts/inventory-scripts.list.js
index 9c0ffd2a1d..071c3a796f 100644
--- a/awx/ui/client/src/inventory-scripts/inventory-scripts.list.js
+++ b/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',
-                buttonContent: '&#43; ' + i18n._('ADD'),
+                actionClass: 'at-Button--add',
+                actionId: 'button-add',
                 ngShow: 'canAdd'
             }
         },
diff --git a/awx/ui/client/src/notifications/notificationTemplates.list.js b/awx/ui/client/src/notifications/notificationTemplates.list.js
index 0e7182be9a..523c54947e 100644
--- a/awx/ui/client/src/notifications/notificationTemplates.list.js
+++ b/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',
-                buttonContent: '&#43; ' + i18n._('ADD'),
+                actionClass: 'at-Button--add',
+                actionId: 'button-add',
                 ngShow: 'canAdd'
             }
         },
diff --git a/awx/ui/client/src/organizations/linkout/organizations-linkout.route.js b/awx/ui/client/src/organizations/linkout/organizations-linkout.route.js
index 20f8b6a6c3..f605f6c08e 100644
--- a/awx/ui/client/src/organizations/linkout/organizations-linkout.route.js
+++ b/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: '&#43; 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: '&#43; ADD administrator',
                     awToolTip: 'Add existing user to organization as administrator',
-                    actionClass: 'btn List-buttonSubmit',
+                    actionClass: 'at-Button--add',
                     ngClick: 'addUsers()'
                 }
             };
diff --git a/awx/ui/client/src/organizations/list/organizations-list.partial.html b/awx/ui/client/src/organizations/list/organizations-list.partial.html
index 7d7384184d..8a7a2feee6 100644
--- a/awx/ui/client/src/organizations/list/organizations-list.partial.html
+++ b/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="btn List-buttonSubmit"
+                    <button class="at-Button--add"
+                        id="button-add"
                         aw-tool-tip="{{'Create a new organization'|translate}}"
                         ng-show="canAdd"
-                        ng-click="addOrganization()" translate>
-                        + ADD
+                        ng-click="addOrganization()">
                     </button>
                 </div>
             </div>
diff --git a/awx/ui/client/src/organizations/organizations.form.js b/awx/ui/client/src/organizations/organizations.form.js
index f33dd00526..c6744f3dc6 100644
--- a/awx/ui/client/src/organizations/organizations.form.js
+++ b/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',
-                            buttonContent: '&#43; ' + i18n._('ADD'),
+                            actionClass: 'at-Button--add',
+                            actionId: 'button-add',
                             ngShow: '(organization_obj.summary_fields.user_capabilities.edit || canAdd)'
                         }
                     },
diff --git a/awx/ui/client/src/organizations/organizations.list.js b/awx/ui/client/src/organizations/organizations.list.js
index 7f849310da..3337dc2a87 100644
--- a/awx/ui/client/src/organizations/organizations.list.js
+++ b/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',
-                buttonContent: '&#43; ADD'
+                actionClass: 'at-Button--add',
+                actionId: 'button-add'
             }
         },
 
diff --git a/awx/ui/client/src/projects/projects.form.js b/awx/ui/client/src/projects/projects.form.js
index baa204bcee..1862f28722 100644
--- a/awx/ui/client/src/projects/projects.form.js
+++ b/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',
-                        buttonContent: '&#43; ' + i18n._('ADD'),
+                        actionClass: 'at-Button--add',
+                        actionId: 'button-add',
                         ngShow: '(project_obj.summary_fields.user_capabilities.edit || canAdd)'
                     }
                 },
diff --git a/awx/ui/client/src/projects/projects.list.js b/awx/ui/client/src/projects/projects.list.js
index f4d504304c..478809ad79 100644
--- a/awx/ui/client/src/projects/projects.list.js
+++ b/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',
-                buttonContent: '&#43; ' + i18n._('ADD'),
+                actionClass: 'at-Button--add',
+                actionId: 'button-add',
                 ngShow: "canAdd"
             }
         },
diff --git a/awx/ui/client/src/scheduler/schedules.list.js b/awx/ui/client/src/scheduler/schedules.list.js
index 70f785ecdf..c1e3e54185 100644
--- a/awx/ui/client/src/scheduler/schedules.list.js
+++ b/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',
-                buttonContent: '&#43; ' + i18n._('ADD'),
+                actionClass: 'at-Button--add',
+                actionId: 'button-add',
                 ngShow: 'canAdd'
             }
         },
diff --git a/awx/ui/client/src/shared/generator-helpers.js b/awx/ui/client/src/shared/generator-helpers.js
index f365aeb042..de973cff2f 100644
--- a/awx/ui/client/src/shared/generator-helpers.js
+++ b/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 + ")\" " : "";
diff --git a/awx/ui/client/src/shared/list-generator/list-actions.partial.html b/awx/ui/client/src/shared/list-generator/list-actions.partial.html
index bf3265f32f..2c937334b0 100644
--- a/awx/ui/client/src/shared/list-generator/list-actions.partial.html
+++ b/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 List-dropdownCaratButton dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
-                <span class="List-dropdownCarat"></span>
+            <button type="button" class="{{options.actionClass}} List-dropdownButton" id="{{options.actionId}}" ng-bind-html="options.buttonContent" translate></button>
+            <button type="button" class="List-dropdownButton dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
                 <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,9 +31,8 @@
     </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">
@@ -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>
diff --git a/awx/ui/client/src/teams/teams.form.js b/awx/ui/client/src/teams/teams.form.js
index 855d8519d1..1b3fa842ad 100644
--- a/awx/ui/client/src/teams/teams.form.js
+++ b/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',
-                            buttonContent: '&#43; ' + i18n._('ADD'),
+                            actionClass: 'at-Button--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',
-                            buttonContent: '&#43; ' + i18n._('ADD PERMISSIONS'),
+                            actionClass: 'at-Button--add',
+                            actionId: 'button-add',
                             ngShow: '(team_obj.summary_fields.user_capabilities.edit || canAdd)'
                         }
                     }
diff --git a/awx/ui/client/src/teams/teams.list.js b/awx/ui/client/src/teams/teams.list.js
index 1af52a8084..d776f01cd7 100644
--- a/awx/ui/client/src/teams/teams.list.js
+++ b/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',
-                buttonContent: '&#43; ' + i18n._('ADD'),
+                actionClass: 'at-Button--add',
+                actionId: 'button-add',
                 ngShow: 'canAdd && canEdit'
             }
         },
diff --git a/awx/ui/client/src/templates/job_templates/job-template.form.js b/awx/ui/client/src/templates/job_templates/job-template.form.js
index cd2824b8a3..4bb46c5b22 100644
--- a/awx/ui/client/src/templates/job_templates/job-template.form.js
+++ b/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',
-                            buttonContent: '&#43; ' + i18n._('ADD'),
+                            actionClass: 'at-Button--add',
+                            actionId: 'button-add',
                             ngShow: '(job_template_obj.summary_fields.user_capabilities.edit || canAddJobTemplate)'
                         }
                     },
diff --git a/awx/ui/client/src/templates/templates.list.js b/awx/ui/client/src/templates/templates.list.js
index 17534209f2..464fe5550e 100644
--- a/awx/ui/client/src/templates/templates.list.js
+++ b/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',
-                buttonContent: '&#43; ' + i18n._('ADD'),
+                actionClass: 'at-Button--add',
+                actionId: 'button-add',
                 options: [
                     {
                         optionContent: i18n._('Job Template'),
diff --git a/awx/ui/client/src/templates/workflows.form.js b/awx/ui/client/src/templates/workflows.form.js
index 7be0a70472..33c9568eef 100644
--- a/awx/ui/client/src/templates/workflows.form.js
+++ b/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',
-                            buttonContent: '&#43; '+ i18n._('ADD'),
+                            actionClass: 'at-Button--add',
+                            actionId: 'button-add',
                             ngShow: '(workflow_job_template_obj.summary_fields.user_capabilities.edit || canAddWorkflowJobTemplate)'
                         }
                     },
diff --git a/awx/ui/client/src/users/users.form.js b/awx/ui/client/src/users/users.form.js
index 93a1264edd..2a40b524d5 100644
--- a/awx/ui/client/src/users/users.form.js
+++ b/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',
-                            buttonContent: '&#43; ' + i18n._('ADD PERMISSIONS'),
+                            actionClass: 'at-Button--add',
+                            actionId: 'button-add',
                             ngShow: '(!is_superuser && (user_obj.summary_fields.user_capabilities.edit || canAdd))'
                         }
                     },
diff --git a/awx/ui/client/src/users/users.list.js b/awx/ui/client/src/users/users.list.js
index 95ff26f5e6..4bedeb44b8 100644
--- a/awx/ui/client/src/users/users.list.js
+++ b/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',
-                buttonContent: '&#43; ' + i18n._('ADD'),
+                actionClass: 'at-Button--add',
+                actionId: 'button-add',
                 ngShow: 'canAdd && canEdit'
             }
         },
diff --git a/awx/ui/test/e2e/objects/credentialTypes.js b/awx/ui/test/e2e/objects/credentialTypes.js
index 302bbd61ae..7ea9ec298d 100644
--- a/awx/ui/test/e2e/objects/credentialTypes.js
+++ b/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"]'
diff --git a/awx/ui/test/e2e/objects/credentials.js b/awx/ui/test/e2e/objects/credentials.js
index a4225f2873..cc2c45ff9d 100644
--- a/awx/ui/test/e2e/objects/credentials.js
+++ b/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,
diff --git a/awx/ui/test/e2e/objects/inventories.js b/awx/ui/test/e2e/objects/inventories.js
index 794a72f760..0fc95f4360 100644
--- a/awx/ui/test/e2e/objects/inventories.js
+++ b/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.expect.element('button span[class="List-dropdownCarat"]').enabled;
-            this.api.click('button span[class="List-dropdownCarat"]');
+            this.api.waitForElementVisible('button[id="button-add"]');
+            this.expect.element('button[id="button-add"]').enabled;
+            this.api.click('button[id="button-add"]');
 
             this.api.useXpath();
             this.api.waitForElementVisible(`.//a[normalize-space(text())="${name}"]`);
diff --git a/awx/ui/test/e2e/objects/inventoryScripts.js b/awx/ui/test/e2e/objects/inventoryScripts.js
index 4555ac11ff..e2f49fe1cc 100644
--- a/awx/ui/test/e2e/objects/inventoryScripts.js
+++ b/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,
diff --git a/awx/ui/test/e2e/objects/notificationTemplates.js b/awx/ui/test/e2e/objects/notificationTemplates.js
index dabe450cbb..9dd80df53f 100644
--- a/awx/ui/test/e2e/objects/notificationTemplates.js
+++ b/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,
diff --git a/awx/ui/test/e2e/objects/organizations.js b/awx/ui/test/e2e/objects/organizations.js
index f5eda6580b..40fef9a256 100644
--- a/awx/ui/test/e2e/objects/organizations.js
+++ b/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,
diff --git a/awx/ui/test/e2e/objects/projects.js b/awx/ui/test/e2e/objects/projects.js
index d40bcffb65..85965c4019 100644
--- a/awx/ui/test/e2e/objects/projects.js
+++ b/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,
diff --git a/awx/ui/test/e2e/objects/sections/permissions.js b/awx/ui/test/e2e/objects/sections/permissions.js
index 66a9d467fe..958568157b 100644
--- a/awx/ui/test/e2e/objects/sections/permissions.js
+++ b/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"]'
diff --git a/awx/ui/test/e2e/objects/teams.js b/awx/ui/test/e2e/objects/teams.js
index 64d33b2b1a..485206b00c 100644
--- a/awx/ui/test/e2e/objects/teams.js
+++ b/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,
diff --git a/awx/ui/test/e2e/objects/templates.js b/awx/ui/test/e2e/objects/templates.js
index cb59cdaaf2..5ab6025dd6 100644
--- a/awx/ui/test/e2e/objects/templates.js
+++ b/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()
diff --git a/awx/ui/test/e2e/objects/users.js b/awx/ui/test/e2e/objects/users.js
index d808dd5103..9b78588a21 100644
--- a/awx/ui/test/e2e/objects/users.js
+++ b/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,
diff --git a/awx/ui/test/e2e/tests/smoke.js b/awx/ui/test/e2e/tests/smoke.js
index b77b23d69d..cce3e052ea 100644
--- a/awx/ui/test/e2e/tests/smoke.js
+++ b/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');