From 0d64563dd8d2d50fad26204b3985d0fafcf51282 Mon Sep 17 00:00:00 2001
From: Michael Abashian <mabashian@ansible.com>
Date: Fri, 22 Jan 2016 16:45:22 -0500
Subject: [PATCH] Styling updates to list views that get generated in the form
 generator.  Moved the button generation out into a helper for these specific
 cases.

---
 awx/ui/client/legacy-styles/lists.less        |  2 +-
 awx/ui/client/src/forms/Inventories.js        |  5 +-
 awx/ui/client/src/forms/JobTemplates.js       | 17 ++--
 awx/ui/client/src/forms/Organizations.js      | 10 +-
 awx/ui/client/src/forms/Projects.js           | 22 +++--
 awx/ui/client/src/forms/Teams.js              | 20 ++--
 awx/ui/client/src/forms/Users.js              | 10 +-
 awx/ui/client/src/helpers/related-search.js   |  9 +-
 awx/ui/client/src/shared/form-generator.js    | 99 ++++++-------------
 awx/ui/client/src/shared/generator-helpers.js | 30 +++++-
 10 files changed, 119 insertions(+), 105 deletions(-)

diff --git a/awx/ui/client/legacy-styles/lists.less b/awx/ui/client/legacy-styles/lists.less
index 11b1a6dcd7..cb5d07ba4c 100644
--- a/awx/ui/client/legacy-styles/lists.less
+++ b/awx/ui/client/legacy-styles/lists.less
@@ -214,7 +214,7 @@ table, tbody {
     height: 32px;
     width: 32px;
     border-left: 1px solid @list-srch-inpt-bord;
-    color: @list-srch-btn-icon;
+    color: @list-srch-btn-icon!important;
     float: right;
     position: relative;
     top: -33px;
diff --git a/awx/ui/client/src/forms/Inventories.js b/awx/ui/client/src/forms/Inventories.js
index a76293217f..419304cb9c 100644
--- a/awx/ui/client/src/forms/Inventories.js
+++ b/awx/ui/client/src/forms/Inventories.js
@@ -88,9 +88,10 @@ export default
                     actions: {
                         add: {
                             ngClick: "addScanJob()",
-                            icon: 'icon-plus',
                             label: 'Add',
-                            awToolTip: 'Add a scan job template'
+                            awToolTip: 'Add a scan job template',
+                            actionClass: 'btn List-buttonSubmit',
+                            buttonContent: '&#43; ADD'
                         }
                     },
 
diff --git a/awx/ui/client/src/forms/JobTemplates.js b/awx/ui/client/src/forms/JobTemplates.js
index 57e6cc53c2..097f062635 100644
--- a/awx/ui/client/src/forms/JobTemplates.js
+++ b/awx/ui/client/src/forms/JobTemplates.js
@@ -316,15 +316,20 @@ export default
                     open: false,
 
                     actions: {
-                        add: {
-                            mode: 'all',
-                            ngClick: 'addSchedule()',
-                            awToolTip: 'Add a new schedule'
-                        },
                         refresh: {
                             mode: 'all',
                             awToolTip: "Refresh the page",
-                            ngClick: "refreshSchedules()"
+                            ngClick: "refreshSchedules()",
+                            actionClass: 'btn List-buttonDefault',
+                            buttonContent: 'REFRESH',
+                            ngHide: 'scheduleLoading == false && schedule_active_search == false && schedule_total_rows < 1'
+                        },
+                        add: {
+                            mode: 'all',
+                            ngClick: 'addSchedule()',
+                            awToolTip: 'Add a new schedule',
+                            actionClass: 'btn List-buttonSubmit',
+                            buttonContent: '&#43; ADD'
                         }
                     },
                     fields: {
diff --git a/awx/ui/client/src/forms/Organizations.js b/awx/ui/client/src/forms/Organizations.js
index 23b5916e3b..0dafb8404c 100644
--- a/awx/ui/client/src/forms/Organizations.js
+++ b/awx/ui/client/src/forms/Organizations.js
@@ -58,8 +58,9 @@ export default
                         add: {
                             ngClick: "add('users')",
                             label: 'Add',
-                            icon: 'icon-plus',
-                            awToolTip: 'Add a new user'
+                            awToolTip: 'Add a new user',
+                            actionClass: 'btn List-buttonSubmit',
+                            buttonContent: '&#43; ADD'
                         }
                     },
 
@@ -104,9 +105,10 @@ export default
                     actions: { // Actions displayed top right of list
                         add: {
                             ngClick: "add('admins')",
-                            icon: 'icon-plus',
                             label: 'Add',
-                            awToolTip: 'Add new administrator'
+                            awToolTip: 'Add new administrator',
+                            actionClass: 'btn List-buttonSubmit',
+                            buttonContent: '&#43; ADD'
                         }
                     },
                     fields: {
diff --git a/awx/ui/client/src/forms/Projects.js b/awx/ui/client/src/forms/Projects.js
index c4442c59ab..a46d856efd 100644
--- a/awx/ui/client/src/forms/Projects.js
+++ b/awx/ui/client/src/forms/Projects.js
@@ -234,9 +234,10 @@ angular.module('ProjectFormDefinition', ['SchedulesListDefinition'])
                 actions: {
                     add: {
                         ngClick: "add('organizations')",
-                        icon: 'icon-plus',
                         label: 'Add',
-                        awToolTip: 'Add an organization'
+                        awToolTip: 'Add an organization',
+                        actionClass: 'btn List-buttonSubmit',
+                        buttonContent: '&#43; ADD'
                     }
                 },
 
@@ -276,15 +277,20 @@ angular.module('ProjectFormDefinition', ['SchedulesListDefinition'])
                 open: false,
 
                 actions: {
-                    add: {
-                        mode: 'all',
-                        ngClick: 'addSchedule()',
-                        awToolTip: 'Add a new schedule'
-                    },
                     refresh: {
                         mode: 'all',
                         awToolTip: "Refresh the page",
-                        ngClick: "refreshSchedules()"
+                        ngClick: "refreshSchedules()",
+                        actionClass: 'btn List-buttonDefault',
+                        buttonContent: 'REFRESH',
+                        ngHide: 'scheduleLoading == false && schedule_active_search == false && schedule_total_rows < 1'
+                    },
+                    add: {
+                        mode: 'all',
+                        ngClick: 'addSchedule()',
+                        awToolTip: 'Add a new schedule',
+                        actionClass: 'btn List-buttonSubmit',
+                        buttonContent: '&#43; ADD'
                     }
                 },
                 fields: {
diff --git a/awx/ui/client/src/forms/Teams.js b/awx/ui/client/src/forms/Teams.js
index 4bc5c940a7..67c9f48d45 100644
--- a/awx/ui/client/src/forms/Teams.js
+++ b/awx/ui/client/src/forms/Teams.js
@@ -68,9 +68,10 @@ export default
                     actions: {
                         add: {
                             ngClick: "add('credentials')",
-                            icon: 'icon-plus',
                             label: 'Add',
-                            add: 'Add a new credential'
+                            add: 'Add a new credential',
+                            actionClass: 'btn List-buttonSubmit',
+                            buttonContent: '&#43; ADD'
                         }
                     },
 
@@ -112,10 +113,11 @@ export default
                     actions: {
                         add: {
                             ngClick: "add('permissions')",
-                            icon: 'icon-plus',
                             label: 'Add',
                             awToolTip: 'Add a permission for this user',
-                            ngShow: 'PermissionAddAllowed'
+                            ngShow: 'PermissionAddAllowed',
+                            actionClass: 'btn List-buttonSubmit',
+                            buttonContent: '&#43; ADD'
                         }
                     },
 
@@ -175,8 +177,9 @@ export default
                     actions: {
                         add: {
                             ngClick: "add('projects')",
-                            icon: 'icon-plus',
-                            label: 'Add'
+                            label: 'Add',
+                            actionClass: 'btn List-buttonSubmit',
+                            buttonContent: '&#43; ADD'
                         }
                     },
 
@@ -218,9 +221,10 @@ export default
                     actions: {
                         add: {
                             ngClick: "add('users')",
-                            icon: 'icon-plus',
                             label: 'Add',
-                            awToolTip: 'Add a user'
+                            awToolTip: 'Add a user',
+                            actionClass: 'btn List-buttonSubmit',
+                            buttonContent: '&#43; ADD'
                         }
                     },
 
diff --git a/awx/ui/client/src/forms/Users.js b/awx/ui/client/src/forms/Users.js
index f8718adc65..f190c50365 100644
--- a/awx/ui/client/src/forms/Users.js
+++ b/awx/ui/client/src/forms/Users.js
@@ -123,9 +123,10 @@ export default
                     actions: {
                         add: {
                             ngClick: "add('credentials')",
-                            icon: 'icon-plus',
                             label: 'Add',
-                            awToolTip: 'Add a credential for this user'
+                            awToolTip: 'Add a credential for this user',
+                            actionClass: 'btn List-buttonSubmit',
+                            buttonContent: '&#43; ADD'
                         }
                     },
 
@@ -167,10 +168,11 @@ export default
                     actions: {
                         add: {
                             ngClick: "add('permissions')",
-                            icon: 'icon-plus',
                             label: 'Add',
                             awToolTip: 'Add a permission for this user',
-                            ngShow: 'PermissionAddAllowed'
+                            ngShow: 'PermissionAddAllowed',
+                            actionClass: 'btn List-buttonSubmit',
+                            buttonContent: '&#43; ADD'
                         }
                     },
 
diff --git a/awx/ui/client/src/helpers/related-search.js b/awx/ui/client/src/helpers/related-search.js
index 09df5cb4d3..750864d60a 100644
--- a/awx/ui/client/src/helpers/related-search.js
+++ b/awx/ui/client/src/helpers/related-search.js
@@ -3,7 +3,7 @@
  *
  * All Rights Reserved
  *************************************************/
- 
+
     /**
  * @ngdoc function
  * @name helpers.function:related-search
@@ -162,6 +162,13 @@ export default
                         scope[iterator + 'Loading'] = false;
                         scope[iterator + 'HoldInput'] = true;
 
+                        if(scope[iterator + 'SearchValue'] && scope[iterator + 'SearchValue'] != '') {
+                            scope[iterator + '_active_search'] = true;
+                        }
+                        else {
+                            scope[iterator + '_active_search'] = false;
+                        }
+
                         if (scope[iterator + 'SearchValue']) {
                             // User typed a value in input field
                             scope[iterator + 'ShowStartBtn'] = false;
diff --git a/awx/ui/client/src/shared/form-generator.js b/awx/ui/client/src/shared/form-generator.js
index 00b865b827..bc4e883719 100644
--- a/awx/ui/client/src/shared/form-generator.js
+++ b/awx/ui/client/src/shared/form-generator.js
@@ -140,9 +140,9 @@ export default
 angular.module('FormGenerator', [GeneratorHelpers.name, 'Utilities', listGenerator.name])
 
 .factory('GenerateForm', ['$rootScope', '$location', '$compile', 'generateList', 'SearchWidget', 'PaginateWidget', 'Attr',
-    'Icon', 'Column', 'NavigationLink', 'HelpCollapse', 'DropDown', 'Empty', 'SelectIcon', 'Store',
+    'Icon', 'Column', 'NavigationLink', 'HelpCollapse', 'DropDown', 'Empty', 'SelectIcon', 'Store', 'ActionButton',
     function ($rootScope, $location, $compile, GenerateList, SearchWidget, PaginateWidget, Attr, Icon, Column, NavigationLink,
-        HelpCollapse, DropDown, Empty, SelectIcon, Store) {
+        HelpCollapse, DropDown, Empty, SelectIcon, Store, ActionButton) {
         return {
 
             setForm: function (form) { this.form = form; },
@@ -588,51 +588,6 @@ angular.module('FormGenerator', [GeneratorHelpers.name, 'Utilities', listGenerat
                 }
             },
 
-            button: function(params) {
-                var tagName = "button";
-                var options = params.btn;
-                var tagParts =
-                    [   tagName,
-                        "toolbar-button"
-                    ];
-
-                var attrNames = _.keys(options);
-
-                function isSupportedKey(keyName) {
-                    if (keyName === 'icon') {
-                        //TODO: Let's add a depecrated logger to our logging helper to output the below message
-                        //
-                        // The form action key "icon" is deprecated in favor of using the name of the field as the icon name or the iconClass option.
-                        return false;
-                    }
-
-                    return true;
-                }
-
-                var attrs = attrNames
-                .filter(function(name) {
-
-                    return isSupportedKey(name) &&
-                        !_.isEmpty(options[name]);
-
-                }).map(function(name) {
-                    return Attr(options, name);
-                });
-
-                tagParts =
-                    tagParts
-                        .concat(attrs)
-                        .concat(
-                            Attr(params, 'iconName'),
-                            Attr(params, 'toolbar')
-                        );
-
-                var html = "<" + tagParts.join(" ") + "></" + tagName + ">";
-
-                return html;
-
-            },
-
             navigationLink: NavigationLink,
 
 
@@ -1638,7 +1593,7 @@ angular.module('FormGenerator', [GeneratorHelpers.name, 'Utilities', listGenerat
                                     html += GenerateList.buildHTML(collection1, { mode: 'edit' });
                                 }
                                 else {
-                                    html += this.GenerateColleciton({ form: this.form, related: itm }, options);
+                                    html += this.GenerateCollection({ form: this.form, related: itm }, options);
                                 }
                                 html += "</div>\n";
                             }
@@ -1671,7 +1626,7 @@ angular.module('FormGenerator', [GeneratorHelpers.name, 'Utilities', listGenerat
                         html += GenerateList.buildHTML(collection, { mode: 'edit' });
                     }
                     else {
-                        html += this.GenerateColleciton({ form: form, related: itm }, options);
+                        html += this.GenerateCollection({ form: form, related: itm }, options);
                     }
                     html += "</div>\n"; // accordion inner
                 }
@@ -1683,7 +1638,7 @@ angular.module('FormGenerator', [GeneratorHelpers.name, 'Utilities', listGenerat
                 return html;
             },
 
-            GenerateColleciton: function(params, options) {
+            GenerateCollection: function(params, options) {
                 var html = '',
                     form = params.form,
                     itm = params.related,
@@ -1711,25 +1666,29 @@ angular.module('FormGenerator', [GeneratorHelpers.name, 'Utilities', listGenerat
 
                 for (act in collection.actions) {
                     action = collection.actions[act];
-                    html += this.button({
-                        btn: action,
-                        iconName: act,
-                        toolbar: true
-                    });
+                    html += ActionButton(action);
                 }
 
                 html += "</div>\n";
                 html += "</div>\n";
                 html += "</div><!-- row -->\n";
 
+                // Message for when a search returns no results.  This should only get shown after a search is executed with no results.
+                html += "<div class=\"row\" ng-show=\"" + collection.iterator + "Loading == false && " + collection.iterator + "_active_search == true && " + itm + ".length == 0\">\n";
+                html += "<div class=\"col-lg-12\">No records matched your search.</div>\n";
+                html += "</div>\n";
+
+                // Show the "no items" box when loading is done and the user isn't actively searching and there are no results
+                html += "<div class=\"List-noItems\" ng-show=\"" + collection.iterator + "Loading == false && " + collection.iterator + "_active_search == false && " + collection.iterator + "_total_rows < 1\">PLEASE ADD ITEMS TO THIS LIST</div>";
+
                 // Start the list
-                html += "<div class=\"list-wrapper\">\n";
-                html += "<table id=\"" + itm + "_table" + "\" class=\"" + collection.iterator + " table table-condensed table-hover\">\n";
+                html += "<div class=\"list-wrapper\"  ng-show=\"" + collection.iterator + "Loading == true || (" + collection.iterator + "Loading == false && " + itm + ".length > 0)\">\n";
+                html += "<table id=\"" + itm + "_table" + "\" class=\"" + collection.iterator + " List-table\">\n";
                 html += "<thead>\n";
-                html += "<tr>\n";
+                html += "<tr class=\"List-tableHeaderRow\">\n";
                 html += (collection.index === undefined || collection.index !== false) ? "<th class=\"col-xs-1\">#</th>\n" : "";
                 for (fld in collection.fields) {
-                    html += "<th class=\"list-header\" id=\"" + collection.iterator + '-' + fld + "-header\" " +
+                    html += "<th class=\"List-tableHeader list-header\" id=\"" + collection.iterator + '-' + fld + "-header\" " +
                         "ng-click=\"sort('" + collection.iterator + "', '" + fld + "')\">" +
                         collection.fields[fld].label;
                     html += " <i class=\"";
@@ -1744,15 +1703,17 @@ angular.module('FormGenerator', [GeneratorHelpers.name, 'Utilities', listGenerat
                     }
                     html += "\"></i></a></th>\n";
                 }
-                html += "<th>Actions</th>\n";
+                html += "<th class=\"List-tableHeader\">Actions</th>\n";
                 html += "</tr>\n";
                 html += "</thead>";
                 html += "<tbody>\n";
 
-                html += "<tr ng-repeat=\"" + collection.iterator + " in " + itm + "\" ";
+                html += "<tr class=\"List-tableHeaderRow\" ng-repeat=\"" + collection.iterator + " in " + itm + "\" ";
+                html += "ng-class-odd=\"'List-tableRow--oddRow'\" ";
+                html += "ng-class-even=\"'List-tableRow--evenRow'\" ";
                 html += "id=\"{{ " + collection.iterator + ".id }}\">\n";
                 if (collection.index === undefined || collection.index !== false) {
-                    html += "<td>{{ $index + ((" + collection.iterator + "_page - 1) * " +
+                    html += "<td class=\"List-tableCell\">{{ $index + ((" + collection.iterator + "_page - 1) * " +
                         collection.iterator + "_page_size) + 1 }}.</td>\n";
                 }
                 cnt = 1;
@@ -1769,14 +1730,17 @@ angular.module('FormGenerator', [GeneratorHelpers.name, 'Utilities', listGenerat
                 }
 
                 // Row level actions
-                html += "<td class=\"actions\">";
+                html += "<td class=\"List-tableCell List-actionButtonCell actions\">";
                 for (act in collection.fieldActions) {
                     fAction = collection.fieldActions[act];
-                    html += "<a id=\"" + ((fAction.id) ? fAction.id : act + "-action") + "\" ";
+                    html += "<button id=\"" + ((fAction.id) ? fAction.id : act + "-action") + "\" ";
                     html += (fAction.href) ? "href=\"" + fAction.href + "\" " : "";
                     html += (fAction.ngClick) ? this.attr(fAction, 'ngClick') : "";
                     html += (fAction.ngHref) ? this.attr(fAction, 'ngHref') : "";
                     html += (fAction.ngShow) ? this.attr(fAction, 'ngShow') : "";
+                    html += " class=\"List-actionButton ";
+                    html += (act === 'delete') ? "List-actionButton--delete" : "";
+                    html += "\"";
                     html += ">";
                     if (fAction.iconClass) {
                         html += "<i class=\"" + fAction.iconClass + "\"></i>";
@@ -1787,16 +1751,11 @@ angular.module('FormGenerator', [GeneratorHelpers.name, 'Utilities', listGenerat
                     }
                     // html += SelectIcon({ action: act });
                     //html += (fAction.label) ? "<span class=\"list-action-label\"> " + fAction.label + "</span>": "";
-                    html += "</a>";
+                    html += "</button>";
                 }
                 html += "</td>";
                 html += "</tr>\n";
 
-                // Message for when a related collection is empty
-                html += "<tr class=\"loading-info\" ng-show=\"" + collection.iterator + "Loading == false && (" + itm + " == null || " + itm + ".length == 0)\">\n";
-                html += "<td colspan=\"" + cnt + "\"><div class=\"loading-info\">No records matched your search.</div></td>\n";
-                html += "</tr>\n";
-
                 // Message for loading
                 html += "<tr ng-show=\"" + collection.iterator + "Loading == true\">\n";
                 html += "<td colspan=\"" + cnt + "\"><div class=\"loading-info\">Loading...</div></td>\n";
diff --git a/awx/ui/client/src/shared/generator-helpers.js b/awx/ui/client/src/shared/generator-helpers.js
index 0606341043..ddba7e9e63 100644
--- a/awx/ui/client/src/shared/generator-helpers.js
+++ b/awx/ui/client/src/shared/generator-helpers.js
@@ -745,4 +745,32 @@ angular.module('GeneratorHelpers', [systemStatus.name])
             return html;
         };
     }
-]);
+])
+.factory('ActionButton', function () {
+    return function (options) {
+
+        var html = '';
+
+        html += '<button ';
+        html += (options.mode) ? "mode=\"" + options.mode + "\" " : "";
+        html += (options.awToolTip) ? "aw-tool-tip=\"" + options.awToolTip + "\" " : "";
+        html += (options.dataTipWatch) ? "data-tip-watch=\"" + options.dataTipWatch + "\" " : "";
+        html += (options.dataPlacement) ? "data-placement=\"" + options.dataPlacement + "\" " : "";
+        html += (options.dataContainer) ? "data-container=\"" + options.dataContainer + "\" " : "";
+        html += (options.actionClass) ? "class=\"" + options.actionClass + "\" " : "";
+        html += (options.dataTitle) ? "data-title=\"" + options.dataTitle + "\" " : "";
+        html += (options.ngDisabled) ? "ng-disabled=\"" + options.ngDisabled + "\" " : "";
+        html += (options.ngClick) ? "ng-click=\"$eval(" + options.ngClick + ")\" " : "";
+        html += (options.ngShow) ? "ng-show=\"" + options.ngShow + "\" " : "";
+        html += (options.ngHide) ? "ng-hide=\"" + options.ngHide + "\" " : "";
+        html += (options.awFeature) ? "aw-feature=\"" + options.awFeature + "\" " : "";
+        html += '>';
+        html += '<span>';
+        html += (options.buttonContent) ? options.buttonContent : "";
+        html += '</span>';
+        html += '</button>';
+
+        return html;
+
+    };
+});