adding more tests, refactoring directive

src/ui/public/directives/__tests__/paginated_selectable_list.js

@@ -3,126 +3,162 @@ import expect from 'expect.js';
 import ngMock from 'ng_mock';
 import _ from 'lodash';
 
-var list = [
+var objectList = [
   { title: 'apple' },
   { title: 'orange' },
   { title: 'coconut' },
   { title: 'banana' },
   { title: 'grapes' }
 ];
+
+var stringList = [
+  'apple',
+  'orange',
+  'coconut',
+  'banana',
+  'grapes'
+];
+
+var lists = [objectList, stringList, []];
+
 var $scope;
 var $element;
 var $isolatedScope;
 
-function test(val) {
-  return val;
-}
-
-var init = function (arr) {
-  // Load the application
-  ngMock.module('kibana');
-
-  // Create the scope
-  ngMock.inject(function ($rootScope, $compile) {
-    $scope = $rootScope.$new();
-    $scope.perPage = 5;
-    $scope.list = list;
-    $scope.listProperty = 'title';
-    $scope.test = test;
-
-    // Create the element
-    $element = angular.element('<paginated-selectable-list perPage="perPage" list="list"' +
-     'list-property="listProperty" user-make-url="test" user-on-select="test"></paginated-selectable-list>');
-
-    // And compile it
-    $compile($element)($scope);
-
-    // Fire a digest cycle
-    $element.scope().$digest();
-
-    // Grab the isolate scope so we can test it
-    $isolatedScope = $element.isolateScope();
+lists.forEach(function (list) {
+  var isArrayOfObjects = list.every((item) => {
+    return _.isPlainObject(item);
   });
-};
 
-describe('paginatedSelectableList', function () {
-  describe('$scope.hits', function () {
-    beforeEach(function () {
-      init(list);
+  var init = function (arr) {
+    // Load the application
+    ngMock.module('kibana');
+
+    // Create the scope
+    ngMock.inject(function ($rootScope, $compile) {
+      $scope = $rootScope.$new();
+      $scope.perPage = 5;
+      $scope.list = list;
+      $scope.listProperty = isArrayOfObjects ? 'title' : undefined;
+      $scope.test = function (val) {
+        return val;
+      };
+
+      // Create the element
+      $element = angular.element('<paginated-selectable-list perPage="perPage" list="list"' +
+       'list-property="listProperty" user-make-url="test" user-on-select="test"></paginated-selectable-list>');
+
+      // And compile it
+      $compile($element)($scope);
+
+      // Fire a digest cycle
+      $element.scope().$digest();
+
+      // Grab the isolate scope so we can test it
+      $isolatedScope = $element.isolateScope();
     });
+  };
 
-    it('should initially sort an array of objects in ascending order', function () {
-      var property = $isolatedScope.listProperty;
-      var sortedList = _.sortBy(list, property);
+  describe('paginatedSelectableList', function () {
 
-      expect($isolatedScope.hits).to.be.an('array');
-
-      $isolatedScope.hits.forEach(function (hit, index) {
-        expect(hit[property]).to.equal(sortedList[index][property]);
+    describe('$scope.hits', function () {
+      beforeEach(function () {
+        init(list);
       });
-    });
-  });
 
-  describe('$scope.sortHits', function () {
-    beforeEach(function () {
-      init(list);
-    });
+      it('should initially sort an array of objects in ascending order', function () {
+        var property = $isolatedScope.listProperty;
+        var sortedList = property ? _.sortBy(list, property) : _.sortBy(list);
 
-    it('should sort an array of objects in ascending order', function () {
-      var property = $isolatedScope.listProperty;
-      var sortedList = _.sortBy(list, property);
+        expect($isolatedScope.hits).to.be.an('array');
 
-      $isolatedScope.isAscending = false;
-      $isolatedScope.sortHits(list);
-
-      expect($isolatedScope.isAscending).to.be(true);
-
-      $isolatedScope.hits.forEach(function (hit, index) {
-        expect(hit[property]).to.equal(sortedList[index][property]);
+        $isolatedScope.hits.forEach(function (hit, index) {
+          if (property) {
+            expect(hit[property]).to.equal(sortedList[index][property]);
+          } else {
+            expect(hit).to.equal(sortedList[index]);
+          }
+        });
       });
     });
 
-    it('should sort an array of objects in descending order', function () {
-      var property = $isolatedScope.listProperty;
-      var reversedList = _.sortBy(list, property).reverse();
+    describe('$scope.sortHits', function () {
+      beforeEach(function () {
+        init(list);
+      });
 
-      $isolatedScope.isAscending = true;
-      $isolatedScope.sortHits(list);
+      it('should sort an array of objects in ascending order', function () {
+        var property = $isolatedScope.listProperty;
+        var sortedList = property ? _.sortBy(list, property) : _.sortBy(list);
 
-      expect($isolatedScope.isAscending).to.be(false);
+        $isolatedScope.isAscending = false;
+        $isolatedScope.sortHits(list);
 
-      $isolatedScope.hits.forEach(function (hit, index) {
-        expect(hit[property]).to.equal(reversedList[index][property]);
+        expect($isolatedScope.isAscending).to.be(true);
+
+        $isolatedScope.hits.forEach(function (hit, index) {
+          if (property) {
+            expect(hit[property]).to.equal(sortedList[index][property]);
+          } else {
+            expect(hit).to.equal(sortedList[index]);
+          }
+        });
+      });
+
+      it('should sort an array of objects in descending order', function () {
+        var property = $isolatedScope.listProperty;
+        var reversedList = property ? _.sortBy(list, property).reverse() : _.sortBy(list).reverse();
+
+        $isolatedScope.isAscending = true;
+        $isolatedScope.sortHits(list);
+
+        expect($isolatedScope.isAscending).to.be(false);
+
+        $isolatedScope.hits.forEach(function (hit, index) {
+          if (property) {
+            expect(hit[property]).to.equal(reversedList[index][property]);
+          } else {
+            expect(hit).to.equal(reversedList[index]);
+          }
+        });
       });
     });
-  });
 
-  describe('$scope.makeUrl', function () {
-    beforeEach(function () {
-      init(list);
-    });
+    describe('$scope.makeUrl', function () {
+      beforeEach(function () {
+        init(list);
+      });
 
-    it('should return the result of the function its passed', function () {
-      var property = $isolatedScope.listProperty;
-      var sortedList = _.sortBy(list, property);
+      it('should return the result of the function its passed', function () {
+        var property = $isolatedScope.listProperty;
+        var sortedList = property ? _.sortBy(list, property) : _.sortBy(list);
 
-      $isolatedScope.hits.forEach(function (hit, index) {
-        expect($isolatedScope.makeUrl(hit)[property]).to.equal(sortedList[index][property]);
+        $isolatedScope.hits.forEach(function (hit, index) {
+          if (property) {
+            expect($isolatedScope.makeUrl(hit)[property]).to.equal(sortedList[index][property]);
+          } else {
+            expect($isolatedScope.makeUrl(hit)).to.equal(sortedList[index]);
+          }
+        });
       });
     });
-  });
 
-  describe('$scope.onSelect', function () {
-    beforeEach(function () {
-      init(list);
-    });
+    describe('$scope.onSelect', function () {
+      beforeEach(function () {
+        init(list);
+      });
 
-    it('should return the result of the function its passed', function () {
-      var property = $isolatedScope.listProperty;
-      var sortedList = _.sortBy(list, property);
+      it('should return the result of the function its passed', function () {
+        var property = $isolatedScope.listProperty;
+        var sortedList = property ? _.sortBy(list, property) : _.sortBy(list);
 
-      $isolatedScope.hits.forEach(function (hit, index) {
-        expect($isolatedScope.onSelect(hit)[property]).to.equal(sortedList[index][property]);
+        $isolatedScope.hits.forEach(function (hit, index) {
+          if (property) {
+            expect($isolatedScope.onSelect(hit)[property]).to.equal(sortedList[index][property]);
+          } else {
+            expect($isolatedScope.onSelect(hit)).to.equal(sortedList[index]);
+          }
+        });
       });
     });
   });

src/ui/public/directives/paginated_selectable_list.js

@@ -18,8 +18,8 @@ module.directive('paginatedSelectableList', function (kbnUrl) {
     template: paginatedSelectableListTemplate,
     controller: function ($scope, $element, $filter) {
       $scope.perPage = $scope.perPage || 10;
-      $scope.hits = $scope.list = _.sortBy($scope.list, accessor) || [];
-      $scope.filterCount = $scope.hitCount = $scope.hits.length;
+      $scope.hits = $scope.list = _.sortBy($scope.list, accessor);
+      $scope.hitCount = $scope.hits.length;
 
       /**
        * Boolean that keeps track of whether hits are sorted ascending (true)
@@ -52,11 +52,6 @@ module.directive('paginatedSelectableList', function (kbnUrl) {
         }
       };
 
-      $scope.$watch('query', function (val) {
-        $scope.hits = $filter('filter')($scope.list, val);
-        $scope.filterCount = $scope.hits.length;
-      });
-
       function accessor(val) {
         const prop = $scope.listProperty;
         return prop ? val[prop] : val;

src/ui/public/partials/paginated_selectable_list.html

@@ -15,36 +15,30 @@
           autocomplete="off" />
       </div>
       <div class="finder-hit-count col-md-3">
-        <span>{{filterCount}} of {{hitCount}}</span>
+        <span>{{ (hits | filter: query).length }} of {{ hitCount }}</span>
       </div>
     </div>
   </div>
 </form>
-<paginate list="hits" per-page="{{perPage}}">
+<paginate list="hits | filter: query" per-page="{{ perPage }}">
   <ul class="li-striped list-group list-group-menu">
-    <li class="list-group-item list-group-menu-item">
+    <li class="list-group-item list-group-menu-item" ng-click="sortHits(hits)">
       <span class="paginate-heading">
         Name
-        <i
-          class="fa"
-          ng-click="sortHits(hits)"
-          ng-class="isAscending ? 'fa-caret-up' : 'fa-caret-down'">
-        </i>
+        <i class="fa" 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">
+    <li class="list-group-item list-group-menu-item" ng-repeat="hit in page">
       <div>
-        <a ng-show="userMakeUrl" kbn-href="{{makeUrl(hit)}}">
-          <span>{{hit}}</span>
+        <a ng-show="userMakeUrl" kbn-href="{{ makeUrl(hit) }}">
+          <span>{{ hit }}</span>
         </a>
       </div>
       <div ng-show="userOnSelect" ng-click="onSelect(hit, $event)">
-        <span>{{hit}}</span>
+        <span>{{ hit }}</span>
       </div>
     </li>
-    <li class="list-group-item list-group-no-results" ng-if="hits.length === 0">
+    <li class="list-group-item list-group-no-results" ng-if="(hits | filter: query).length === 0">
       <p>No matches found.</p>
     </li>
   </ul>

src/ui/public/partials/saved_object_finder.html

@@ -19,19 +19,20 @@
         <span>{{finder.hitCount}} of {{finder.hitCount}}</span>
       </div>
       <div class="finder-manage-object col-md-2">
-        <a class="small" ng-click="finder.manageObjects(finder.properties.name)">Manage {{finder.properties.nouns}}</a>
+        <a class="small" ng-click="finder.manageObjects(finder.properties.name)">
+          Manage {{finder.properties.nouns}}
+        </a>
       </div>
     </div>
   </div>
 </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">
+    <li class="list-group-item list-group-menu-item" ng-click="finder.sortHits(finder.hits)">
       <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>
@@ -51,12 +52,10 @@
           <p ng-if="hit.description" ng-bind="hit.description"></p>
       </a>
     </li>
-
     <li
       class="list-group-item list-group-no-results"
       ng-if="finder.hits.length === 0">
       <p ng-bind="'No matching ' + finder.properties.nouns + ' found.'"></p>
     </li>
-
   </ul>
 </paginate>

src/ui/public/styles/base.less

@@ -353,7 +353,6 @@ paginated-selectable-list {
       border: none;
       padding: 5px 0px;
       border-radius: @border-radius-base;
-      text-transform: capitalize;
     }
 
     span {