adding back sort functionality to saved object and paginated selectable list directives and updating the styling, making makeUrl and onSelect functions mutually exclusive

src/ui/public/directives/paginated_selectable_list.js

@@ -22,29 +22,29 @@ module.directive('paginatedSelectableList', function (kbnUrl) {
 
       $scope.hitCount = $scope.hits.length;
 
+      /**
+       * Boolean that keeps track of whether hits are sorted ascending (true)
+       * or descending (false) by title
+       * @type {Boolean}
+       */
+      $scope.isAscending = true;
+
+      /**
+       * Sorts saved object finder hits either ascending or descending
+       * @param  {Array} hits Array of saved finder object hits
+       * @return {Array} Array sorted either ascending or descending
+       */
+      $scope.sortHits = function (hits) {
+        $scope.isAscending = !$scope.isAscending;
+        $scope.list = $scope.isAscending ? hits.sort() : hits.reverse();
+      };
+
       $scope.makeUrl = function (hit) {
-        if ($scope.userMakeUrl) {
-          return $scope.userMakeUrl(hit);
-        }
-        return '#';
+        return $scope.userMakeUrl(hit);
       };
 
       $scope.onSelect = function (hit, $event) {
-        if ($scope.userOnSelect) {
-          return $scope.userOnSelect(hit, $event);
-        }
-
-        var url = $scope.makeUrl(hit);
-        if (!url || url === '#' || url.charAt(0) !== '#') return;
-
-        $event.preventDefault();
-
-        // we want the '/path', not '#/path'
-        kbnUrl.change(url.substr(1));
-      };
-
-      $scope.preventClick = function ($event) {
-        $event.preventDefault();
+        return $scope.userOnSelect(hit, $event);
       };
 
       $scope.$watch('query', function (val) {

src/ui/public/directives/saved_object_finder.js

@@ -48,6 +48,23 @@ module.directive('savedObjectFinder', function ($location, $injector, kbnUrl, Pr
 
       filterResults();
 
+      /**
+       * Boolean that keeps track of whether hits are sorted ascending (true)
+       * or descending (false) by title
+       * @type {Boolean}
+       */
+      self.isAscending = true;
+
+      /**
+       * Sorts saved object finder hits either ascending or descending
+       * @param  {Array} hits Array of saved finder object hits
+       * @return {Array} Array sorted either ascending or descending
+       */
+      self.sortHits = function (hits) {
+        self.isAscending = !self.isAscending;
+        self.hits = self.isAscending ? _.sortBy(hits, 'title') : _.sortBy(hits, 'title').reverse();
+      };
+
       /**
        * Passed the hit objects and will determine if the
        * hit should have a url in the UI, returns it if so

src/ui/public/partials/paginated_selectable_list.html

@@ -22,13 +22,25 @@
 </form>
 <paginate list="hits" per-page="{{perPage}}">
   <ul class="li-striped list-group list-group-menu">
+    <li class="list-group-item list-group-menu-item">
+      <span class="paginate-heading">
+        Name
+        <i
+          class="fa"
+          ng-click="sortHits(hits)"
+          ng-class="isAscending ? 'fa-caret-up' : 'fa-caret-down'">
+        </i>
+      </span>
+    </li>
     <li
       class="list-group-item list-group-menu-item"
-      ng-repeat="hit in page | filter: query | orderBy: hit.toString()"
-      ng-click="onSelect(hit, $event)">
-      <a ng-href="{{makeUrl(hit)}}" ng-click="preventClick($event)">
+      ng-repeat="hit in page | filter: query | orderBy: hit.toString()">
+      <a ng-if="userMakeUrl" kbn-href="{{makeUrl(hit)}}">
         <span>{{hit}}</span>
       </a>
+      <div ng-if="userOnSelect" ng-click="onSelect(hit, $event)">
+        <span>{{hit}}</span>
+      </div>
     </li>
     <li class="list-group-item list-group-no-results" ng-if="hits.length === 0">
       <p ng-bind="'No matches found.'"></p>

src/ui/public/partials/saved_object_finder.html

@@ -26,6 +26,16 @@
 </form>
 <paginate list="finder.hits" per-page="20">
   <ul class="li-striped list-group list-group-menu" ng-class="{'select-mode': finder.selector.enabled}">
+    <li class="list-group-item list-group-menu-item">
+      <span class="paginate-heading">
+        Name
+        <i
+          class="fa"
+          ng-click="finder.sortHits(finder.hits)"
+          ng-class="finder.isAscending ? 'fa-caret-up' : 'fa-caret-down'">
+        </i>
+      </span>
+    </li>
     <li
       class="list-group-item list-group-menu-item"
       ng-class="{'active': finder.selector.index === $index && finder.selector.enabled}"

src/ui/public/styles/base.less

@@ -348,11 +348,11 @@ paginated-selectable-list {
     }
 
     li:nth-child(odd) {
-      background-color: @white;
+      background-color: @kibanaGray6;
     }
 
     li:nth-child(even) {
-      background-color: @kibanaGray6;
+      background-color: @white;
     }
 
     .paginate-heading {