Add link to top for paginated tables (#9997)

* Add link to top for paginated tables

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

@@ -2,6 +2,7 @@
   columns="columns"
   rows="rows"
   per-page="perPage"
+  link-to-top="true"
   show-blank-rows="false">
 </paginated-table>
 

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

@@ -15,6 +15,7 @@
   columns="columns"
   rows="rows"
   per-page="perPage"
+  link-to-top="true"
   show-blank-rows="false">
 </paginated-table>
 

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

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

src/ui/public/directives/paginate.js

@@ -41,7 +41,7 @@ uiModules.get('kibana')
       }
     },
     controllerAs: 'paginate',
-    controller: function ($scope) {
+    controller: function ($scope, $document) {
       const self = this;
       const ALL = 0;
 
@@ -98,6 +98,10 @@ uiModules.get('kibana')
         }
       };
 
+      self.goToTop = function goToTop() {
+        $document.scrollTop(0);
+      };
+
       self.renderList = function () {
         $scope.pages = [];
         if (!$scope.list) return;

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

@@ -47,12 +47,13 @@ describe('paginated table', function () {
     };
   };
 
-  const renderTable = function (cols, rows, perPage, sort, showBlankRows) {
+  const renderTable = function (cols, rows, perPage, sort, showBlankRows, linkToTop) {
     $scope.cols = cols || [];
     $scope.rows = rows || [];
     $scope.perPage = perPage || defaultPerPage;
     $scope.sort = sort || {};
     $scope.showBlankRows = showBlankRows;
+    $scope.linkToTop = linkToTop;
 
     const template = `
       <paginated-table
@@ -60,6 +61,7 @@ describe('paginated table', function () {
         rows="rows"
         per-page="perPage"
         sort="sort"
+        link-to-top="linkToTop"
         show-blank-rows="showBlankRows">`;
     $el = $compile(template)($scope);
 
@@ -127,6 +129,22 @@ describe('paginated table', function () {
       expect(tableRows.size()).to.be(rowCount);
     });
 
+    it('should not show link to top when not set', function () {
+      const data = makeData(5, 5);
+      renderTable(data.columns, data.rows, 10, null, false);
+
+      const linkToTop = $el.find('[data-test-subj="paginateControlsLinkToTop"]');
+      expect(linkToTop.size()).to.be(0);
+    });
+
+    it('should show link to top when set', function () {
+      const data = makeData(5, 5);
+      renderTable(data.columns, data.rows, 10, null, false, true);
+
+      const linkToTop = $el.find('[data-test-subj="paginateControlsLinkToTop"]');
+      expect(linkToTop.size()).to.be(1);
+    });
+
   });
 
   describe('sorting', function () {

src/ui/public/paginated_table/paginated_table.js

@@ -14,6 +14,7 @@ uiModules
     scope: {
       rows: '=',
       columns: '=',
+      linkToTop: '=',
       perPage: '=?',
       showBlankRows: '=?',
       sortHandler: '=?',

src/ui/public/partials/paginate_controls.html

@@ -1,3 +1,12 @@
+<a
+  class="kuiLink"
+  ng-if="linkToTop"
+  ng-click="paginate.goToTop()"
+  data-test-subj="paginateControlsLinkToTop"
+>
+  Scroll to top
+</a>
+
 <div class="pagination-other-pages">
   <ul class="pagination-other-pages-list pagination-sm" ng-if="page.count > 1">
     <li ng-style="{'visibility':'hidden'}" ng-if="page.first">