De-angularize discover doc_table pager (#40999)

* Convert pager buttons to react 

* Convert pager text to react

* Move pager factory to lib folder

* Adapt directives to use react component

* Add jest tests

src/legacy/core_plugins/kibana/public/discover/doc_table/pager_control/components/tool_bar_pager_text/tool_bar_pager_text.js → src/legacy/core_plugins/kibana/public/discover/doc_table/components/pager/index.js

@@ -18,23 +18,16 @@
  */
 
 import { uiModules } from 'ui/modules';
-import template from './tool_bar_pager_text.html';
+import { ToolBarPagerText } from './tool_bar_pager_text';
+import { ToolBarPagerButtons } from './tool_bar_pager_buttons';
+import { wrapInI18nContext } from 'ui/i18n';
 
 const app = uiModules.get('kibana');
 
-app.directive('toolBarPagerText', function () {
-  return {
-    restrict: 'E',
-    replace: true,
-    template: template,
-    scope: {
-      startItem: '=',
-      endItem: '=',
-      totalItems: '=',
-    },
-    controllerAs: 'toolBarPagerText',
-    bindToController: true,
-    controller: class ToolBarPagerTextController {
-    }
-  };
+app.directive('toolBarPagerText', function (reactDirective) {
+  return reactDirective(wrapInI18nContext(ToolBarPagerText));
+});
+
+app.directive('toolBarPagerButtons', function (reactDirective) {
+  return reactDirective(wrapInI18nContext(ToolBarPagerButtons));
 });

src/legacy/core_plugins/kibana/public/discover/doc_table/components/pager/tool_bar_pager_buttons.test.tsx

@@ -0,0 +1,63 @@
+/*
+ * Licensed to Elasticsearch B.V. under one or more contributor
+ * license agreements. See the NOTICE file distributed with
+ * this work for additional information regarding copyright
+ * ownership. Elasticsearch B.V. licenses this file to you under
+ * the Apache License, Version 2.0 (the "License"); you may
+ * not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *    http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing,
+ * software distributed under the License is distributed on an
+ * "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
+ * KIND, either express or implied.  See the License for the
+ * specific language governing permissions and limitations
+ * under the License.
+ */
+
+import React from 'react';
+import { mountWithIntl, shallowWithIntl } from 'test_utils/enzyme_helpers';
+import { ToolBarPagerButtons } from './tool_bar_pager_buttons';
+// @ts-ignore
+import { findTestSubject } from '@elastic/eui/lib/test';
+
+test('it renders ToolBarPagerButtons', () => {
+  const props = {
+    hasPreviousPage: true,
+    hasNextPage: true,
+    onPageNext: jest.fn(),
+    onPagePrevious: jest.fn(),
+  };
+  const wrapper = shallowWithIntl(<ToolBarPagerButtons {...props} />);
+  expect(wrapper).toMatchSnapshot();
+});
+
+test('it renders ToolBarPagerButtons with clickable next and previous button', () => {
+  const props = {
+    hasPreviousPage: true,
+    hasNextPage: true,
+    onPageNext: jest.fn(),
+    onPagePrevious: jest.fn(),
+  };
+  const wrapper = mountWithIntl(<ToolBarPagerButtons {...props} />);
+  findTestSubject(wrapper, 'btnPrevPage').simulate('click');
+  expect(props.onPagePrevious).toHaveBeenCalledTimes(1);
+  findTestSubject(wrapper, 'btnNextPage').simulate('click');
+  expect(props.onPageNext).toHaveBeenCalledTimes(1);
+});
+
+test('it renders ToolBarPagerButtons with disabled next and previous button', () => {
+  const props = {
+    hasPreviousPage: false,
+    hasNextPage: false,
+    onPageNext: jest.fn(),
+    onPagePrevious: jest.fn(),
+  };
+  const wrapper = mountWithIntl(<ToolBarPagerButtons {...props} />);
+  findTestSubject(wrapper, 'btnPrevPage').simulate('click');
+  expect(props.onPagePrevious).toHaveBeenCalledTimes(0);
+  findTestSubject(wrapper, 'btnNextPage').simulate('click');
+  expect(props.onPageNext).toHaveBeenCalledTimes(0);
+});

src/legacy/core_plugins/kibana/public/discover/doc_table/components/pager/tool_bar_pager_buttons.tsx

@@ -0,0 +1,49 @@
+/*
+ * Licensed to Elasticsearch B.V. under one or more contributor
+ * license agreements. See the NOTICE file distributed with
+ * this work for additional information regarding copyright
+ * ownership. Elasticsearch B.V. licenses this file to you under
+ * the Apache License, Version 2.0 (the "License"); you may
+ * not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *    http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing,
+ * software distributed under the License is distributed on an
+ * "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
+ * KIND, either express or implied.  See the License for the
+ * specific language governing permissions and limitations
+ * under the License.
+ */
+import React from 'react';
+
+interface Props {
+  hasPreviousPage: boolean;
+  hasNextPage: boolean;
+  onPageNext: () => void;
+  onPagePrevious: () => void;
+}
+
+export function ToolBarPagerButtons(props: Props) {
+  return (
+    <div className="kuiButtonGroup">
+      <button
+        className="kuiButton kuiButton--basic kuiButton--icon"
+        onClick={() => props.onPagePrevious()}
+        disabled={!props.hasPreviousPage}
+        data-test-subj="btnPrevPage"
+      >
+        <span className="kuiButton__icon kuiIcon fa-chevron-left"></span>
+      </button>
+      <button
+        className="kuiButton kuiButton--basic kuiButton--icon"
+        onClick={() => props.onPageNext()}
+        disabled={!props.hasNextPage}
+        data-test-subj="btnNextPage"
+      >
+        <span className="kuiButton__icon kuiIcon fa-chevron-right"></span>
+      </button>
+    </div>
+  );
+}

src/legacy/core_plugins/kibana/public/discover/doc_table/pager_control/components/tool_bar_pager_buttons/index.js → src/legacy/core_plugins/kibana/public/discover/doc_table/components/pager/tool_bar_pager_text.test.tsx

@@ -17,4 +17,16 @@
  * under the License.
  */
 
-import './tool_bar_pager_buttons';
+import React from 'react';
+import { renderWithIntl } from 'test_utils/enzyme_helpers';
+import { ToolBarPagerText } from './tool_bar_pager_text';
+
+test('it renders ToolBarPagerText without crashing', () => {
+  const props = {
+    startItem: 1,
+    endItem: 2,
+    totalItems: 3,
+  };
+  const wrapper = renderWithIntl(<ToolBarPagerText {...props} />);
+  expect(wrapper).toMatchSnapshot();
+});

src/legacy/core_plugins/kibana/public/discover/doc_table/pager_control/index.js → src/legacy/core_plugins/kibana/public/discover/doc_table/components/pager/tool_bar_pager_text.tsx

@@ -16,6 +16,23 @@
  * specific language governing permissions and limitations
  * under the License.
  */
+import React from 'react';
+import { FormattedMessage } from '@kbn/i18n/react';
 
-import './components/tool_bar_pager_text/tool_bar_pager_text';
-import './components/tool_bar_pager_buttons/tool_bar_pager_buttons';
+interface Props {
+  startItem: number;
+  endItem: number;
+  totalItems: number;
+}
+
+export function ToolBarPagerText({ startItem, endItem, totalItems }: Props) {
+  return (
+    <div className="kuiToolBarText" data-test-subj="toolBarPagerText">
+      <FormattedMessage
+        id="kbn.docTable.pagerControl.pagesCountLabel"
+        defaultMessage="{startItem}&ndash;{endItem} of {totalItems}"
+        values={{ startItem, endItem, totalItems }}
+      />
+    </div>
+  );
+}

src/legacy/core_plugins/kibana/public/discover/doc_table/doc_table.js

@@ -26,8 +26,8 @@ import './components/table_header';
 import './components/table_row';
 import { dispatchRenderComplete } from 'ui/render_complete';
 import { uiModules } from 'ui/modules';
-import './pager_control';
-import './pager';
+import './components/pager';
+import './lib/pager';
 import { getRequestInspectorStats, getResponseInspectorStats } from 'ui/courier/utils/courier_inspector_utils';
 import { toastNotifications } from 'ui/notify';