diff --git a/src/plugins/discover/public/application/angular/context/query/actions.js b/src/plugins/discover/public/application/angular/context/query/actions.js index 32fc2873d7f2a2..d5c72d34006e2e 100644 --- a/src/plugins/discover/public/application/angular/context/query/actions.js +++ b/src/plugins/discover/public/application/angular/context/query/actions.js @@ -25,7 +25,7 @@ import { getServices } from '../../../../kibana_services'; import { fetchAnchorProvider } from '../api/anchor'; import { fetchContextProvider } from '../api/context'; import { getQueryParameterActions } from '../query_parameters'; -import { FAILURE_REASONS, LOADING_STATUS } from './constants'; +import { FAILURE_REASONS, LOADING_STATUS } from './index'; import { MarkdownSimple } from '../../../../../../kibana_react/public'; export function QueryActionsProvider(Promise) { diff --git a/src/plugins/discover/public/application/angular/context/query/index.js b/src/plugins/discover/public/application/angular/context/query/index.js index f9b1a35e32feac..59d1f165d19d4d 100644 --- a/src/plugins/discover/public/application/angular/context/query/index.js +++ b/src/plugins/discover/public/application/angular/context/query/index.js @@ -18,5 +18,5 @@ */ export { QueryActionsProvider } from './actions'; -export { FAILURE_REASONS, LOADING_STATUS } from './constants'; +export { FAILURE_REASONS, LOADING_STATUS } from '../../../components/context_app/constants'; export { createInitialLoadingStatusState } from './state'; diff --git a/src/plugins/discover/public/application/angular/context/query/state.js b/src/plugins/discover/public/application/angular/context/query/state.js index 06fd0680d347f7..142b5746249bf1 100644 --- a/src/plugins/discover/public/application/angular/context/query/state.js +++ b/src/plugins/discover/public/application/angular/context/query/state.js @@ -17,7 +17,7 @@ * under the License. */ -import { LOADING_STATUS } from './constants'; +import { LOADING_STATUS } from './index'; export function createInitialLoadingStatusState() { return { diff --git a/src/plugins/discover/public/application/angular/context_app.html b/src/plugins/discover/public/application/angular/context_app.html index 6adcaeeae94f55..d609a497c4ba1e 100644 --- a/src/plugins/discover/public/application/angular/context_app.html +++ b/src/plugins/discover/public/application/angular/context_app.html @@ -12,8 +12,8 @@ - @@ -35,39 +35,17 @@ type="'predecessors'" > - - -
-
-
- -
-
- -
-
+ { rejected = true; render(
error
, domNode); @@ -91,10 +92,10 @@ export interface DocTableLegacyProps { rows: Array>; indexPattern: IIndexPattern; minimumVisibleRows: number; - onAddColumn: (column: string) => void; - onSort: (sort: string[][]) => void; - onMoveColumn: (columns: string, newIdx: number) => void; - onRemoveColumn: (column: string) => void; + onAddColumn?: (column: string) => void; + onSort?: (sort: string[][]) => void; + onMoveColumn?: (columns: string, newIdx: number) => void; + onRemoveColumn?: (column: string) => void; sort?: string[][]; } diff --git a/src/plugins/discover/public/application/components/context_app/__snapshots__/context_app_legacy.test.tsx.snap b/src/plugins/discover/public/application/components/context_app/__snapshots__/context_app_legacy.test.tsx.snap new file mode 100644 index 00000000000000..58305ee23cb210 --- /dev/null +++ b/src/plugins/discover/public/application/components/context_app/__snapshots__/context_app_legacy.test.tsx.snap @@ -0,0 +1,741 @@ +// Jest Snapshot v1, https://goo.gl/fbAQLP + +exports[`ContextAppLegacy test renders correctly 1`] = ` + + + + + +
+
+ +
+ +
+
+ + + + + +`; + +exports[`ContextAppLegacy test renders loading indicator 1`] = ` + + + + + +
+ +
+ +
+ + Loading... + +
+ +
+ +
+ + + + + +`; diff --git a/src/plugins/discover/public/application/angular/context/query/constants.js b/src/plugins/discover/public/application/components/context_app/constants.ts similarity index 100% rename from src/plugins/discover/public/application/angular/context/query/constants.js rename to src/plugins/discover/public/application/components/context_app/constants.ts diff --git a/src/plugins/discover/public/application/components/context_app/context_app_legacy.test.tsx b/src/plugins/discover/public/application/components/context_app/context_app_legacy.test.tsx new file mode 100644 index 00000000000000..16d8cd78004f92 --- /dev/null +++ b/src/plugins/discover/public/application/components/context_app/context_app_legacy.test.tsx @@ -0,0 +1,75 @@ +/* + * 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 { ContextAppLegacy } from './context_app_legacy'; +import { IIndexPattern } from '../../../../../data/common/index_patterns'; +import { mountWithIntl } from 'test_utils/enzyme_helpers'; +import { DocTableLegacy } from '../../angular/doc_table/create_doc_table_react'; +import { findTestSubject } from '@elastic/eui/lib/test'; + +describe('ContextAppLegacy test', () => { + const hit = { + _id: '123', + _index: 'test_index', + _score: null, + _version: 1, + _source: { + category: ["Men's Clothing"], + currency: 'EUR', + customer_first_name: 'Walker', + customer_full_name: 'Walker Texas Ranger', + customer_gender: 'MALE', + customer_last_name: 'Ranger', + }, + fields: [{ order_date: ['2020-10-19T13:35:02.000Z'] }], + sort: [1603114502000, 2092], + }; + const indexPattern = { + id: 'test_index_pattern', + } as IIndexPattern; + const defaultProps = { + columns: ['_source'], + filter: () => {}, + hits: [hit], + infiniteScroll: true, + sorting: ['order_date', 'desc'], + minimumVisibleRows: 5, + indexPattern, + status: 'loaded', + }; + + it('renders correctly', () => { + const component = mountWithIntl(); + expect(component).toMatchSnapshot(); + expect(component.find(DocTableLegacy).length).toBe(1); + const loadingIndicator = findTestSubject(component, 'contextApp_loadingIndicator'); + expect(loadingIndicator.length).toBe(0); + }); + + it('renders loading indicator', () => { + const props = { ...defaultProps }; + props.status = 'loading'; + const component = mountWithIntl(); + expect(component).toMatchSnapshot(); + expect(component.find('DocTableLegacy').length).toBe(0); + const loadingIndicator = findTestSubject(component, 'contextApp_loadingIndicator'); + expect(loadingIndicator.length).toBe(1); + }); +}); diff --git a/src/plugins/discover/public/application/components/context_app/context_app_legacy.tsx b/src/plugins/discover/public/application/components/context_app/context_app_legacy.tsx new file mode 100644 index 00000000000000..ee8b2f590f71c0 --- /dev/null +++ b/src/plugins/discover/public/application/components/context_app/context_app_legacy.tsx @@ -0,0 +1,76 @@ +/* + * 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 { FormattedMessage } from '@kbn/i18n/react'; +import { EuiPanel, EuiText } from '@elastic/eui'; +import { I18nProvider } from '@kbn/i18n/react'; +import { + DocTableLegacy, + DocTableLegacyProps, +} from '../../angular/doc_table/create_doc_table_react'; +import { IIndexPattern, IndexPatternField } from '../../../../../data/common/index_patterns'; +import { LOADING_STATUS } from './constants'; + +export interface ContextAppProps { + columns: string[]; + hits: Array>; + indexPattern: IIndexPattern; + filter: (field: IndexPatternField | string, value: string, type: '+' | '-') => void; + minimumVisibleRows: number; + sorting: string[]; + status: string; +} + +export function ContextAppLegacy(renderProps: ContextAppProps) { + const { hits, filter, sorting, status } = renderProps; + const props = ({ ...renderProps } as unknown) as DocTableLegacyProps; + props.rows = hits; + props.onFilter = filter; + props.sort = sorting.map((el) => [el]); + const isLoaded = status === LOADING_STATUS.LOADED; + const loadingFeedback = () => { + if (status === LOADING_STATUS.UNINITIALIZED || status === LOADING_STATUS.LOADING) { + return ( + + + + + + ); + } + return null; + }; + return ( + + + {loadingFeedback()} + {isLoaded ? ( + +
+ +
+ + ) : null} + + + ); +} diff --git a/src/plugins/discover/public/application/components/context_app/context_app_legacy_directive.ts b/src/plugins/discover/public/application/components/context_app/context_app_legacy_directive.ts new file mode 100644 index 00000000000000..af94c5537da288 --- /dev/null +++ b/src/plugins/discover/public/application/components/context_app/context_app_legacy_directive.ts @@ -0,0 +1,32 @@ +/* + * 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 { ContextAppLegacy } from './context_app_legacy'; + +export function createContextAppLegacy(reactDirective: any) { + return reactDirective(ContextAppLegacy, [ + ['filter', { watchDepth: 'reference' }], + ['hits', { watchDepth: 'reference' }], + ['indexPattern', { watchDepth: 'reference' }], + ['sorting', { watchDepth: 'reference' }], + ['columns', { watchDepth: 'collection' }], + ['infiniteScroll', { watchDepth: 'reference' }], + ['minimumVisibleRows', { watchDepth: 'reference' }], + ['status', { watchDepth: 'reference' }], + ]); +} diff --git a/src/plugins/discover/public/get_inner_angular.ts b/src/plugins/discover/public/get_inner_angular.ts index 1ca0bb20e8723b..55a75240909bf5 100644 --- a/src/plugins/discover/public/get_inner_angular.ts +++ b/src/plugins/discover/public/get_inner_angular.ts @@ -36,6 +36,7 @@ import { createToolBarPagerButtonsDirective, createToolBarPagerTextDirective, } from './application/angular/doc_table/components/pager'; +import { createContextAppLegacy } from './application/components/context_app/context_app_legacy_directive'; import { createTableRowDirective } from './application/angular/doc_table/components/table_row'; import { createPagerFactory } from './application/angular/doc_table/lib/pager/pager_factory'; import { createInfiniteScrollDirective } from './application/angular/doc_table/infinite_scroll'; @@ -55,7 +56,6 @@ import { createContextErrorMessageDirective } from './application/components/con import { DiscoverStartPlugins } from './plugin'; import { getScopedHistory } from './kibana_services'; import { createDiscoverLegacyDirective } from './application/components/create_discover_legacy_directive'; - /** * returns the main inner angular module, it contains all the parts of Angular Discover * needs to render, so in the end the current 'kibana' angular module is no longer necessary @@ -190,5 +190,6 @@ function createDocTableModule() { .directive('kbnTableRow', createTableRowDirective) .directive('toolBarPagerButtons', createToolBarPagerButtonsDirective) .directive('kbnInfiniteScroll', createInfiniteScrollDirective) - .directive('docViewer', createDocViewerDirective); + .directive('docViewer', createDocViewerDirective) + .directive('contextAppLegacy', createContextAppLegacy); }