De-angularize discover kbnTableHeader (#41259)

* Add TableHeader + TableHeaderColumn react components

* Migration of kbnTableHeader to use react component

* Disable mocha tests

* Add jest tests

src/legacy/core_plugins/kibana/public/discover/doc_table/__tests__/lib/rows_headers.js

@@ -27,9 +27,6 @@ import $ from 'jquery';
 import 'plugins/kibana/discover/index';
 import FixturesStubbedLogstashIndexPatternProvider from 'fixtures/stubbed_logstash_index_pattern';
 
-const SORTABLE_FIELDS = ['bytes', '@timestamp'];
-const UNSORTABLE_FIELDS = ['request_body'];
-
 describe('Doc Table', function () {
   let $parentScope;
   let $scope;
@@ -119,155 +116,6 @@ describe('Doc Table', function () {
     });
   };
 
-  describe('kbnTableHeader', function () {
-    const $elem = angular.element(`
-      <thead
-        kbn-table-header
-        columns="columns"
-        index-pattern="indexPattern"
-        sort-order="sortOrder"
-        on-change-sort-order="onChangeSortOrder"
-        on-move-column="moveColumn"
-        on-remove-column="removeColumn"
-      ></thead>
-    `);
-
-    beforeEach(function () {
-      init($elem, {
-        columns: [],
-        sortOrder: [],
-        onChangeSortOrder: sinon.stub(),
-        moveColumn: sinon.spy(),
-        removeColumn: sinon.spy(),
-      });
-    });
-
-    afterEach(function () {
-      destroy();
-    });
-
-    describe('adding and removing columns', function () {
-      columnTests('[data-test-subj~="docTableHeaderField"]', $elem);
-    });
-
-    describe('sorting button', function () {
-      beforeEach(function () {
-        $parentScope.columns = ['bytes', '_source'];
-        $elem.scope().$digest();
-      });
-
-      it('should show for sortable columns', function () {
-        expect($elem.find(`[data-test-subj="docTableHeaderFieldSort_bytes"]`).length).to.be(1);
-      });
-
-      it('should not be shown for unsortable columns', function () {
-        expect($elem.find(`[data-test-subj="docTableHeaderFieldSort__source"]`).length).to.be(0);
-      });
-    });
-
-    describe('cycleSortOrder function', function () {
-      it('should exist', function () {
-        expect($scope.cycleSortOrder).to.be.a(Function);
-      });
-
-      it('should call onChangeSortOrder with ascending order for a sortable field without sort order', function () {
-        $scope.sortOrder = [];
-        $scope.cycleSortOrder(SORTABLE_FIELDS[0]);
-        expect($scope.onChangeSortOrder.callCount).to.be(1);
-        expect($scope.onChangeSortOrder.firstCall.args).to.eql([SORTABLE_FIELDS[0], 'asc']);
-      });
-
-      it('should call onChangeSortOrder with ascending order for a sortable field already sorted by in descending order', function () {
-        $scope.sortOrder = [SORTABLE_FIELDS[0], 'desc'];
-        $scope.cycleSortOrder(SORTABLE_FIELDS[0]);
-        expect($scope.onChangeSortOrder.callCount).to.be(1);
-        expect($scope.onChangeSortOrder.firstCall.args).to.eql([SORTABLE_FIELDS[0], 'asc']);
-      });
-
-      it('should call onChangeSortOrder with ascending order for a sortable field when already sorted by an different field', function () {
-        $scope.sortOrder = [SORTABLE_FIELDS[1], 'asc'];
-        $scope.cycleSortOrder(SORTABLE_FIELDS[0]);
-        expect($scope.onChangeSortOrder.callCount).to.be(1);
-        expect($scope.onChangeSortOrder.firstCall.args).to.eql([SORTABLE_FIELDS[0], 'asc']);
-      });
-
-      it('should call onChangeSortOrder with descending order for a sortable field already sorted by in ascending order', function () {
-        $scope.sortOrder = [SORTABLE_FIELDS[0], 'asc'];
-        $scope.cycleSortOrder(SORTABLE_FIELDS[0]);
-        expect($scope.onChangeSortOrder.callCount).to.be(1);
-        expect($scope.onChangeSortOrder.firstCall.args).to.eql([SORTABLE_FIELDS[0], 'desc']);
-      });
-
-      it('should not call onChangeSortOrder for an unsortable field', function () {
-        $scope.sortOrder = [];
-        $scope.cycleSortOrder(UNSORTABLE_FIELDS[0]);
-        expect($scope.onChangeSortOrder.callCount).to.be(0);
-      });
-
-      it('should not try to call onChangeSortOrder when it is not defined', function () {
-        $scope.onChangeSortOrder = undefined;
-        expect(() => $scope.cycleSortOrder(SORTABLE_FIELDS[0])).to.not.throwException();
-      });
-    });
-
-    describe('headerClass function', function () {
-      it('should exist', function () {
-        expect($scope.headerClass).to.be.a(Function);
-      });
-
-      it('should return list including kbnDocTableHeader__sortChange for a sortable field not currently sorted by', function () {
-        expect($scope.headerClass(SORTABLE_FIELDS[0])).to.contain('kbnDocTableHeader__sortChange');
-      });
-
-      it('should return undefined for an unsortable field', function () {
-        expect($scope.headerClass(UNSORTABLE_FIELDS[0])).to.be(undefined);
-      });
-
-      it('should return list including fa-sort-up for a sortable field not currently sorted by', function () {
-        expect($scope.headerClass(SORTABLE_FIELDS[0])).to.contain('fa-sort-up');
-      });
-
-      it('should return list including fa-sort-up for a sortable field currently sorted by in ascending order', function () {
-        $scope.sortOrder = [SORTABLE_FIELDS[0], 'asc'];
-        expect($scope.headerClass(SORTABLE_FIELDS[0])).to.contain('fa-sort-up');
-      });
-
-      it('should return list including fa-sort-down for a sortable field currently sorted by in descending order', function () {
-        $scope.sortOrder = [SORTABLE_FIELDS[0], 'desc'];
-        expect($scope.headerClass(SORTABLE_FIELDS[0])).to.contain('fa-sort-down');
-      });
-    });
-
-    describe('moving columns', function () {
-      beforeEach(function () {
-        $parentScope.columns = ['bytes', 'request_body', '@timestamp', 'point'];
-        $elem.scope().$digest();
-      });
-
-      it('should move columns to the right', function () {
-        $scope.moveColumnRight('bytes');
-        expect($scope.onMoveColumn.callCount).to.be(1);
-        expect($scope.onMoveColumn.firstCall.args).to.eql(['bytes', 1]);
-      });
-
-      it('shouldnt move the last column to the right', function () {
-        $scope.moveColumnRight('point');
-        expect($scope.onMoveColumn.callCount).to.be(0);
-      });
-
-      it('should move columns to the left', function () {
-        $scope.moveColumnLeft('@timestamp');
-        expect($scope.onMoveColumn.callCount).to.be(1);
-        expect($scope.onMoveColumn.firstCall.args).to.eql(['@timestamp', 1]);
-      });
-
-      it('shouldnt move the first column to the left', function () {
-        $scope.moveColumnLeft('bytes');
-        expect($scope.onMoveColumn.callCount).to.be(0);
-      });
-    });
-  });
-
   describe('kbnTableRow', function () {
     const $elem = angular.element(
       '<tr kbn-table-row="row" ' +

src/legacy/core_plugins/kibana/public/discover/doc_table/components/_table_header.scss

@@ -1,7 +1,9 @@
+.kbnDocTableHeader button {
+  margin-left: $euiSizeXS;
+}
 .kbnDocTableHeader__move,
 .kbnDocTableHeader__sortChange {
   opacity: 0;
-
   th:hover &,
   &:focus {
     opacity: 1;