Paginated table: allow no blank rows at bottom (#9814)

* Add boolean property to show blank rows or not.

The property defaults to true to preserve backwards compatibility.

* Don't show blank rows in list of indexed fields on index-pattern page

* Don't show blank rows in list of scripted fields on index-pattern page

* Adding unit test for showBlankRowsAtBottom property

* Shortening variable name

* Simplifying logic

* Missed a spot (source filters)

* Using template literal syntax instead of string concatenation

src/core_plugins/kibana/public/management/sections/indices/_indexed_fields.html

@@ -1,7 +1,8 @@
 <paginated-table
   columns="columns"
   rows="rows"
-  per-page="perPage">
+  per-page="perPage"
+  show-blank-rows="false">
 </paginated-table>
 
 <p class="text-center default-message" ng-if="rows.length === 0">No matching fields found.</p>

src/core_plugins/kibana/public/management/sections/indices/_scripted_fields.html

@@ -27,7 +27,8 @@
 <paginated-table
   columns="columns"
   rows="rows"
-  per-page="perPage">
+  per-page="perPage"
+  show-blank-rows="false">
 </paginated-table>
 
 <p class="text-center" ng-if="rows.length === 0">No matching scripted fields found.</p>

src/core_plugins/kibana/public/management/sections/indices/source_filters/source_filters.html

@@ -32,6 +32,7 @@
   <paginated-table
     columns="columns"
     rows="rows"
-    per-page="perPage">
+    per-page="perPage"
+    show-blank-rows="false">
   </paginated-table>
 </div>

src/ui/public/paginated_table/__tests__/index.js

@@ -47,13 +47,21 @@ describe('paginated table', function () {
     };
   };
 
-  let renderTable = function (cols, rows, perPage, sort) {
+  const renderTable = function (cols, rows, perPage, sort, showBlankRows) {
     $scope.cols = cols || [];
     $scope.rows = rows || [];
     $scope.perPage = perPage || defaultPerPage;
     $scope.sort = sort || {};
+    $scope.showBlankRows = showBlankRows;
 
-    $el = $compile('<paginated-table columns="cols" rows="rows" per-page="perPage" sort="sort">')($scope);
+    const template = `
+      <paginated-table
+        columns="cols"
+        rows="rows"
+        per-page="perPage"
+        sort="sort"
+        show-blank-rows="showBlankRows">`;
+    $el = $compile(template)($scope);
 
     $scope.$digest();
   };
@@ -107,6 +115,18 @@ describe('paginated table', function () {
       // add 2 for the first and last page links
       expect($el.find('paginate-controls a').size()).to.be(pageCount + 2);
     });
+
+    it('should not show blank rows on last page when so specified', function () {
+      const rowCount = 7;
+      const perPageCount = 10;
+      const data = makeData(3, rowCount);
+      const pageCount = Math.ceil(rowCount / perPageCount);
+
+      renderTable(data.columns, data.rows, perPageCount, null, false);
+      const tableRows = $el.find('tbody tr');
+      expect(tableRows.size()).to.be(rowCount);
+    });
+
   });
 
   describe('sorting', function () {

src/ui/public/paginated_table/paginated_table.html

@@ -26,7 +26,7 @@
           </th>
         </tr>
       </thead>
-      <tbody kbn-rows="page" kbn-rows-min="perPage"></tbody>
+      <tbody kbn-rows="page" kbn-rows-min="paginatedTable.rowsToShow(perPage, page.length)"></tbody>
       <tfoot ng-if="showTotal">
         <tr>
           <th ng-repeat="col in columns" class="numeric-value">{{col.total | number}}</th>

src/ui/public/paginated_table/paginated_table.js

@@ -15,6 +15,7 @@ uiModules
       rows: '=',
       columns: '=',
       perPage: '=?',
+      showBlankRows: '=?',
       sortHandler: '=?',
       sort: '=?',
       showSelector: '=?',
@@ -51,6 +52,14 @@ uiModules
         }
       };
 
+      self.rowsToShow = function (numRowsPerPage, actualNumRowsOnThisPage) {
+        if ($scope.showBlankRows === false) {
+          return actualNumRowsOnThisPage;
+        } else {
+          return numRowsPerPage;
+        }
+      };
+
       function valueGetter(row) {
         let value = row[self.sort.columnIndex];
         if (value && value.value != null) value = value.value;