From 54dec07c0e89799bee8f16c03375ff4f95955e53 Mon Sep 17 00:00:00 2001 From: Matthias Wilhelm Date: Tue, 16 Jul 2019 22:01:27 +0200 Subject: [PATCH] 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 --- .../tool_bar_pager_buttons.test.tsx.snap | 28 +++++++++ .../tool_bar_pager_text.test.tsx.snap | 10 +++ .../pager/index.js} | 25 +++----- .../pager/tool_bar_pager_buttons.test.tsx | 63 +++++++++++++++++++ .../pager/tool_bar_pager_buttons.tsx | 49 +++++++++++++++ .../pager/tool_bar_pager_text.test.tsx} | 14 ++++- .../pager/tool_bar_pager_text.tsx} | 21 ++++++- .../public/discover/doc_table/doc_table.js | 4 +- .../doc_table/{ => lib}/pager/index.js | 0 .../doc_table/{ => lib}/pager/pager.js | 0 .../{ => lib}/pager/pager_factory.js | 0 .../tool_bar_pager_buttons.html | 18 ------ .../tool_bar_pager_buttons.js | 48 -------------- .../components/tool_bar_pager_text/index.js | 20 ------ .../tool_bar_pager_text.html | 11 ---- 15 files changed, 193 insertions(+), 118 deletions(-) create mode 100644 src/legacy/core_plugins/kibana/public/discover/doc_table/components/pager/__snapshots__/tool_bar_pager_buttons.test.tsx.snap create mode 100644 src/legacy/core_plugins/kibana/public/discover/doc_table/components/pager/__snapshots__/tool_bar_pager_text.test.tsx.snap rename src/legacy/core_plugins/kibana/public/discover/doc_table/{pager_control/components/tool_bar_pager_text/tool_bar_pager_text.js => components/pager/index.js} (67%) create mode 100644 src/legacy/core_plugins/kibana/public/discover/doc_table/components/pager/tool_bar_pager_buttons.test.tsx create mode 100644 src/legacy/core_plugins/kibana/public/discover/doc_table/components/pager/tool_bar_pager_buttons.tsx rename src/legacy/core_plugins/kibana/public/discover/doc_table/{pager_control/components/tool_bar_pager_buttons/index.js => components/pager/tool_bar_pager_text.test.tsx} (67%) rename src/legacy/core_plugins/kibana/public/discover/doc_table/{pager_control/index.js => components/pager/tool_bar_pager_text.tsx} (59%) rename src/legacy/core_plugins/kibana/public/discover/doc_table/{ => lib}/pager/index.js (100%) rename src/legacy/core_plugins/kibana/public/discover/doc_table/{ => lib}/pager/pager.js (100%) rename src/legacy/core_plugins/kibana/public/discover/doc_table/{ => lib}/pager/pager_factory.js (100%) delete mode 100644 src/legacy/core_plugins/kibana/public/discover/doc_table/pager_control/components/tool_bar_pager_buttons/tool_bar_pager_buttons.html delete mode 100644 src/legacy/core_plugins/kibana/public/discover/doc_table/pager_control/components/tool_bar_pager_buttons/tool_bar_pager_buttons.js delete mode 100644 src/legacy/core_plugins/kibana/public/discover/doc_table/pager_control/components/tool_bar_pager_text/index.js delete mode 100644 src/legacy/core_plugins/kibana/public/discover/doc_table/pager_control/components/tool_bar_pager_text/tool_bar_pager_text.html diff --git a/src/legacy/core_plugins/kibana/public/discover/doc_table/components/pager/__snapshots__/tool_bar_pager_buttons.test.tsx.snap b/src/legacy/core_plugins/kibana/public/discover/doc_table/components/pager/__snapshots__/tool_bar_pager_buttons.test.tsx.snap new file mode 100644 index 0000000000000..a6aab8f74a674 --- /dev/null +++ b/src/legacy/core_plugins/kibana/public/discover/doc_table/components/pager/__snapshots__/tool_bar_pager_buttons.test.tsx.snap @@ -0,0 +1,28 @@ +// Jest Snapshot v1, https://goo.gl/fbAQLP + +exports[`it renders ToolBarPagerButtons 1`] = ` +
+ + +
+`; diff --git a/src/legacy/core_plugins/kibana/public/discover/doc_table/components/pager/__snapshots__/tool_bar_pager_text.test.tsx.snap b/src/legacy/core_plugins/kibana/public/discover/doc_table/components/pager/__snapshots__/tool_bar_pager_text.test.tsx.snap new file mode 100644 index 0000000000000..fe168c013cb1a --- /dev/null +++ b/src/legacy/core_plugins/kibana/public/discover/doc_table/components/pager/__snapshots__/tool_bar_pager_text.test.tsx.snap @@ -0,0 +1,10 @@ +// Jest Snapshot v1, https://goo.gl/fbAQLP + +exports[`it renders ToolBarPagerText without crashing 1`] = ` +
+ 1–2 of 3 +
+`; diff --git a/src/legacy/core_plugins/kibana/public/discover/doc_table/pager_control/components/tool_bar_pager_text/tool_bar_pager_text.js b/src/legacy/core_plugins/kibana/public/discover/doc_table/components/pager/index.js similarity index 67% rename from src/legacy/core_plugins/kibana/public/discover/doc_table/pager_control/components/tool_bar_pager_text/tool_bar_pager_text.js rename to src/legacy/core_plugins/kibana/public/discover/doc_table/components/pager/index.js index 0f730e6c8b722..e6d638d88bc27 100644 --- a/src/legacy/core_plugins/kibana/public/discover/doc_table/pager_control/components/tool_bar_pager_text/tool_bar_pager_text.js +++ b/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)); }); diff --git a/src/legacy/core_plugins/kibana/public/discover/doc_table/components/pager/tool_bar_pager_buttons.test.tsx b/src/legacy/core_plugins/kibana/public/discover/doc_table/components/pager/tool_bar_pager_buttons.test.tsx new file mode 100644 index 0000000000000..524161c77cbf8 --- /dev/null +++ b/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(); + 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(); + 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(); + findTestSubject(wrapper, 'btnPrevPage').simulate('click'); + expect(props.onPagePrevious).toHaveBeenCalledTimes(0); + findTestSubject(wrapper, 'btnNextPage').simulate('click'); + expect(props.onPageNext).toHaveBeenCalledTimes(0); +}); diff --git a/src/legacy/core_plugins/kibana/public/discover/doc_table/components/pager/tool_bar_pager_buttons.tsx b/src/legacy/core_plugins/kibana/public/discover/doc_table/components/pager/tool_bar_pager_buttons.tsx new file mode 100644 index 0000000000000..6ce987028c197 --- /dev/null +++ b/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 ( +
+ + +
+ ); +} diff --git a/src/legacy/core_plugins/kibana/public/discover/doc_table/pager_control/components/tool_bar_pager_buttons/index.js b/src/legacy/core_plugins/kibana/public/discover/doc_table/components/pager/tool_bar_pager_text.test.tsx similarity index 67% rename from src/legacy/core_plugins/kibana/public/discover/doc_table/pager_control/components/tool_bar_pager_buttons/index.js rename to src/legacy/core_plugins/kibana/public/discover/doc_table/components/pager/tool_bar_pager_text.test.tsx index 3e6e82e90cfab..4085c22057c84 100644 --- a/src/legacy/core_plugins/kibana/public/discover/doc_table/pager_control/components/tool_bar_pager_buttons/index.js +++ b/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(); + expect(wrapper).toMatchSnapshot(); +}); diff --git a/src/legacy/core_plugins/kibana/public/discover/doc_table/pager_control/index.js b/src/legacy/core_plugins/kibana/public/discover/doc_table/components/pager/tool_bar_pager_text.tsx similarity index 59% rename from src/legacy/core_plugins/kibana/public/discover/doc_table/pager_control/index.js rename to src/legacy/core_plugins/kibana/public/discover/doc_table/components/pager/tool_bar_pager_text.tsx index 10a7b64538be0..608dadd36b4b9 100644 --- a/src/legacy/core_plugins/kibana/public/discover/doc_table/pager_control/index.js +++ b/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 ( +
+ +
+ ); +} diff --git a/src/legacy/core_plugins/kibana/public/discover/doc_table/doc_table.js b/src/legacy/core_plugins/kibana/public/discover/doc_table/doc_table.js index 1f5bfa6a16282..51d774fd2c150 100644 --- a/src/legacy/core_plugins/kibana/public/discover/doc_table/doc_table.js +++ b/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'; diff --git a/src/legacy/core_plugins/kibana/public/discover/doc_table/pager/index.js b/src/legacy/core_plugins/kibana/public/discover/doc_table/lib/pager/index.js similarity index 100% rename from src/legacy/core_plugins/kibana/public/discover/doc_table/pager/index.js rename to src/legacy/core_plugins/kibana/public/discover/doc_table/lib/pager/index.js diff --git a/src/legacy/core_plugins/kibana/public/discover/doc_table/pager/pager.js b/src/legacy/core_plugins/kibana/public/discover/doc_table/lib/pager/pager.js similarity index 100% rename from src/legacy/core_plugins/kibana/public/discover/doc_table/pager/pager.js rename to src/legacy/core_plugins/kibana/public/discover/doc_table/lib/pager/pager.js diff --git a/src/legacy/core_plugins/kibana/public/discover/doc_table/pager/pager_factory.js b/src/legacy/core_plugins/kibana/public/discover/doc_table/lib/pager/pager_factory.js similarity index 100% rename from src/legacy/core_plugins/kibana/public/discover/doc_table/pager/pager_factory.js rename to src/legacy/core_plugins/kibana/public/discover/doc_table/lib/pager/pager_factory.js diff --git a/src/legacy/core_plugins/kibana/public/discover/doc_table/pager_control/components/tool_bar_pager_buttons/tool_bar_pager_buttons.html b/src/legacy/core_plugins/kibana/public/discover/doc_table/pager_control/components/tool_bar_pager_buttons/tool_bar_pager_buttons.html deleted file mode 100644 index baed150fb5041..0000000000000 --- a/src/legacy/core_plugins/kibana/public/discover/doc_table/pager_control/components/tool_bar_pager_buttons/tool_bar_pager_buttons.html +++ /dev/null @@ -1,18 +0,0 @@ -
- - -
diff --git a/src/legacy/core_plugins/kibana/public/discover/doc_table/pager_control/components/tool_bar_pager_buttons/tool_bar_pager_buttons.js b/src/legacy/core_plugins/kibana/public/discover/doc_table/pager_control/components/tool_bar_pager_buttons/tool_bar_pager_buttons.js deleted file mode 100644 index bb32c69ac632f..0000000000000 --- a/src/legacy/core_plugins/kibana/public/discover/doc_table/pager_control/components/tool_bar_pager_buttons/tool_bar_pager_buttons.js +++ /dev/null @@ -1,48 +0,0 @@ -/* - * 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 { uiModules } from 'ui/modules'; -import template from './tool_bar_pager_buttons.html'; - -const app = uiModules.get('kibana'); - -app.directive('toolBarPagerButtons', function () { - return { - restrict: 'E', - replace: true, - template: template, - scope: { - hasNextPage: '=', - hasPreviousPage: '=', - onPageNext: '=', - onPagePrevious: '=', - }, - controllerAs: 'toolBarPagerButtons', - bindToController: true, - controller: class ToolBarPagerButtonsController { - nextPage = () => { - this.onPageNext(); - }; - - previousPage = () => { - this.onPagePrevious(); - }; - } - }; -}); diff --git a/src/legacy/core_plugins/kibana/public/discover/doc_table/pager_control/components/tool_bar_pager_text/index.js b/src/legacy/core_plugins/kibana/public/discover/doc_table/pager_control/components/tool_bar_pager_text/index.js deleted file mode 100644 index c9439a69352d7..0000000000000 --- a/src/legacy/core_plugins/kibana/public/discover/doc_table/pager_control/components/tool_bar_pager_text/index.js +++ /dev/null @@ -1,20 +0,0 @@ -/* - * 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 './tool_bar_pager_text'; diff --git a/src/legacy/core_plugins/kibana/public/discover/doc_table/pager_control/components/tool_bar_pager_text/tool_bar_pager_text.html b/src/legacy/core_plugins/kibana/public/discover/doc_table/pager_control/components/tool_bar_pager_text/tool_bar_pager_text.html deleted file mode 100644 index 838d65692557d..0000000000000 --- a/src/legacy/core_plugins/kibana/public/discover/doc_table/pager_control/components/tool_bar_pager_text/tool_bar_pager_text.html +++ /dev/null @@ -1,11 +0,0 @@ -
- -
\ No newline at end of file