From f26dbf4e45a601246d702be437c99ecb30fe208d Mon Sep 17 00:00:00 2001 From: Matthias Wilhelm Date: Tue, 6 Oct 2020 15:50:05 +0200 Subject: [PATCH 1/7] Extend DiscoverNoResults component to show different message on error --- .../angular/directives/no_results.js | 214 ---------------- .../angular/directives/no_results.tsx | 235 ++++++++++++++++++ .../public/application/angular/discover.js | 6 +- .../components/discover_legacy.tsx | 6 + 4 files changed, 245 insertions(+), 216 deletions(-) delete mode 100644 src/plugins/discover/public/application/angular/directives/no_results.js create mode 100644 src/plugins/discover/public/application/angular/directives/no_results.tsx diff --git a/src/plugins/discover/public/application/angular/directives/no_results.js b/src/plugins/discover/public/application/angular/directives/no_results.js deleted file mode 100644 index d8a39d9178e937..00000000000000 --- a/src/plugins/discover/public/application/angular/directives/no_results.js +++ /dev/null @@ -1,214 +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 React, { Component, Fragment } from 'react'; -import { FormattedMessage, I18nProvider } from '@kbn/i18n/react'; -import PropTypes from 'prop-types'; - -import { - EuiCallOut, - EuiCode, - EuiDescriptionList, - EuiFlexGroup, - EuiFlexItem, - EuiLink, - EuiSpacer, - EuiText, -} from '@elastic/eui'; -import { getServices } from '../../../kibana_services'; - -// eslint-disable-next-line react/prefer-stateless-function -export class DiscoverNoResults extends Component { - static propTypes = { - timeFieldName: PropTypes.string, - queryLanguage: PropTypes.string, - }; - - render() { - const { timeFieldName, queryLanguage } = this.props; - - let timeFieldMessage; - - if (timeFieldName) { - timeFieldMessage = ( - - - - -

- -

- -

- -

- - - ); - } - - let luceneQueryMessage; - - if (queryLanguage === 'lucene') { - const searchExamples = [ - { - description: 200, - title: ( - - - - - - ), - }, - { - description: status:200, - title: ( - - - - - - ), - }, - { - description: status:[400 TO 499], - title: ( - - - - - - ), - }, - { - description: status:[400 TO 499] AND extension:PHP, - title: ( - - - - - - ), - }, - { - description: status:[400 TO 499] AND (extension:php OR extension:html), - title: ( - - - - - - ), - }, - ]; - - luceneQueryMessage = ( - - - - -

- -

- -

- - - - ), - }} - /> -

- - - - - - - - - ); - } - - return ( - - - - - - - - } - color="warning" - iconType="help" - data-test-subj="discoverNoResults" - /> - {timeFieldMessage} - {luceneQueryMessage} - - - - - ); - } -} diff --git a/src/plugins/discover/public/application/angular/directives/no_results.tsx b/src/plugins/discover/public/application/angular/directives/no_results.tsx new file mode 100644 index 00000000000000..8bee38754ad613 --- /dev/null +++ b/src/plugins/discover/public/application/angular/directives/no_results.tsx @@ -0,0 +1,235 @@ +/* + * 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, { Fragment } from 'react'; +import { FormattedMessage } from '@kbn/i18n/react'; + +import { + EuiButton, + EuiCallOut, + EuiCode, + EuiDescriptionList, + EuiFlexGroup, + EuiFlexItem, + EuiLink, + EuiSpacer, + EuiText, +} from '@elastic/eui'; +import { getServices } from '../../../kibana_services'; +import { DataPublicPluginStart } from '../../../../../data/public'; + +export function DiscoverNoResults({ + timeFieldName, + queryLanguage, + error, + data, +}: { + timeFieldName: string; + queryLanguage: string; + error: Error; + data: DataPublicPluginStart; +}) { + let timeFieldMessage; + + if (timeFieldName && !error) { + timeFieldMessage = ( + + + + +

+ +

+ +

+ +

+ + + ); + } + + let luceneQueryMessage; + + if (queryLanguage === 'lucene' && !error) { + const searchExamples = [ + { + description: 200, + title: ( + + + + + + ), + }, + { + description: status:200, + title: ( + + + + + + ), + }, + { + description: status:[400 TO 499], + title: ( + + + + + + ), + }, + { + description: status:[400 TO 499] AND extension:PHP, + title: ( + + + + + + ), + }, + { + description: status:[400 TO 499] AND (extension:php OR extension:html), + title: ( + + + + + + ), + }, + ]; + + luceneQueryMessage = ( + + + + +

+ +

+ +

+ + + + ), + }} + /> +

+ + + + + + + + + ); + } + + const callOut = !error ? ( + + + } + color="warning" + iconType="help" + data-test-subj="discoverNoResults" + /> + {timeFieldMessage} + {luceneQueryMessage} + + ) : ( + + + } + color="warning" + iconType="alert" + data-test-subj="discoverNoResultsError" + > + data.search.showError(error)}> + + + + + ); + + return ( + + + {callOut} + + ); +} diff --git a/src/plugins/discover/public/application/angular/discover.js b/src/plugins/discover/public/application/angular/discover.js index 92b96d11723e09..55e512dfdf7964 100644 --- a/src/plugins/discover/public/application/angular/discover.js +++ b/src/plugins/discover/public/application/angular/discover.js @@ -86,6 +86,7 @@ const fetchStatuses = { UNINITIALIZED: 'uninitialized', LOADING: 'loading', COMPLETE: 'complete', + ERROR: 'error', }; const app = getAngularModule(); @@ -603,6 +604,7 @@ function discoverController($element, $route, $scope, $timeout, $window, Promise config: config, fixedScroll: createFixedScroll($scope, $timeout), setHeaderActionMenu: getHeaderActionMenuMounter(), + data, }; const shouldSearchOnPageLoad = () => { @@ -662,7 +664,7 @@ function discoverController($element, $route, $scope, $timeout, $window, Promise function pick(rows, oldRows, fetchStatus) { // initial state, pretend we're already loading if we're about to execute a search so // that the uninitilized message doesn't flash on screen - if (rows == null && oldRows == null && shouldSearchOnPageLoad()) { + if (!$scope.fetchError && rows == null && oldRows == null && shouldSearchOnPageLoad()) { return status.LOADING; } @@ -788,7 +790,7 @@ function discoverController($element, $route, $scope, $timeout, $window, Promise if (error instanceof Error && error.name === 'AbortError') return; $scope.fetchStatus = fetchStatuses.NO_RESULTS; - $scope.rows = []; + $scope.fetchError = error; data.search.showError(error); }); diff --git a/src/plugins/discover/public/application/components/discover_legacy.tsx b/src/plugins/discover/public/application/components/discover_legacy.tsx index de1faaf9fc19d4..3a0fed652a49a2 100644 --- a/src/plugins/discover/public/application/components/discover_legacy.tsx +++ b/src/plugins/discover/public/application/components/discover_legacy.tsx @@ -40,6 +40,7 @@ import { TimeRange, Query, IndexPatternAttributes, + DataPublicPluginStart, } from '../../../../data/public'; import { Chart } from '../angular/helpers/point_series'; import { AppState } from '../angular/discover_state'; @@ -53,6 +54,7 @@ export interface DiscoverLegacyProps { addColumn: (column: string) => void; fetch: () => void; fetchCounter: number; + fetchError: Error; fieldCounts: Record; histogramData: Chart; hits: number; @@ -73,6 +75,7 @@ export interface DiscoverLegacyProps { sampleSize: number; fixedScroll: (el: HTMLElement) => void; setHeaderActionMenu: (menuMount: MountPoint | undefined) => void; + data: DataPublicPluginStart; }; resetQuery: () => void; resultState: string; @@ -94,6 +97,7 @@ export function DiscoverLegacy({ fetch, fetchCounter, fieldCounts, + fetchError, histogramData, hits, indexPattern, @@ -208,6 +212,8 @@ export function DiscoverLegacy({ )} {resultState === 'uninitialized' && } From 23db6e0e83b19534c94b0bf61cb61e765c4aca08 Mon Sep 17 00:00:00 2001 From: Matthias Wilhelm Date: Fri, 16 Oct 2020 13:59:40 +0200 Subject: [PATCH 2/7] Address review comments --- .../angular/directives/{index.js => index.ts} | 15 +++------------ .../application/angular/directives/no_results.tsx | 4 ++-- .../application/components/discover_legacy.tsx | 5 +---- 3 files changed, 6 insertions(+), 18 deletions(-) rename src/plugins/discover/public/application/angular/directives/{index.js => index.ts} (59%) diff --git a/src/plugins/discover/public/application/angular/directives/index.js b/src/plugins/discover/public/application/angular/directives/index.ts similarity index 59% rename from src/plugins/discover/public/application/angular/directives/index.js rename to src/plugins/discover/public/application/angular/directives/index.ts index 5d8969a78f0182..0704509da5544d 100644 --- a/src/plugins/discover/public/application/angular/directives/index.js +++ b/src/plugins/discover/public/application/angular/directives/index.ts @@ -17,15 +17,6 @@ * under the License. */ -import { DiscoverNoResults } from './no_results'; -import { DiscoverUninitialized } from './uninitialized'; -import { DiscoverHistogram } from './histogram'; -import { getAngularModule } from '../../../kibana_services'; - -const app = getAngularModule(); - -app.directive('discoverNoResults', (reactDirective) => reactDirective(DiscoverNoResults)); - -app.directive('discoverUninitialized', (reactDirective) => reactDirective(DiscoverUninitialized)); - -app.directive('discoverHistogram', (reactDirective) => reactDirective(DiscoverHistogram)); +export { DiscoverNoResults } from './no_results'; +export { DiscoverUninitialized } from './uninitialized'; +export { DiscoverHistogram } from './histogram'; diff --git a/src/plugins/discover/public/application/angular/directives/no_results.tsx b/src/plugins/discover/public/application/angular/directives/no_results.tsx index 8bee38754ad613..eea4ca38b4b40f 100644 --- a/src/plugins/discover/public/application/angular/directives/no_results.tsx +++ b/src/plugins/discover/public/application/angular/directives/no_results.tsx @@ -209,7 +209,7 @@ export function DiscoverNoResults({ title={ } color="warning" @@ -219,7 +219,7 @@ export function DiscoverNoResults({ data.search.showError(error)}> diff --git a/src/plugins/discover/public/application/components/discover_legacy.tsx b/src/plugins/discover/public/application/components/discover_legacy.tsx index 615cfeb8c97a06..d1eaf6c39828cc 100644 --- a/src/plugins/discover/public/application/components/discover_legacy.tsx +++ b/src/plugins/discover/public/application/components/discover_legacy.tsx @@ -26,10 +26,7 @@ import { HitsCounter } from './hits_counter'; import { TimechartHeader } from './timechart_header'; import { DiscoverSidebar } from './sidebar'; import { getServices, IndexPattern } from '../../kibana_services'; -// @ts-ignore -import { DiscoverNoResults } from '../angular/directives/no_results'; -import { DiscoverUninitialized } from '../angular/directives/uninitialized'; -import { DiscoverHistogram } from '../angular/directives/histogram'; +import { DiscoverNoResults, DiscoverUninitialized, DiscoverHistogram } from '../angular/directives'; import { LoadingSpinner } from './loading_spinner/loading_spinner'; import { DocTableLegacy } from '../angular/doc_table/create_doc_table_react'; import { SkipBottomButton } from './skip_bottom_button'; From 786cc34cfa1ee2a4ac5b206cae0d7aba56f1c534 Mon Sep 17 00:00:00 2001 From: Matthias Wilhelm Date: Mon, 19 Oct 2020 21:12:07 +0200 Subject: [PATCH 3/7] Improve code, refactor to helper file --- ....test.js.snap => no_results.test.tsx.snap} | 53 ++++++ ...no_results.test.js => no_results.test.tsx} | 11 +- .../angular/directives/no_results.tsx | 172 ++---------------- .../angular/directives/no_results_helper.tsx | 149 +++++++++++++++ 4 files changed, 223 insertions(+), 162 deletions(-) rename src/plugins/discover/public/application/angular/directives/__snapshots__/{no_results.test.js.snap => no_results.test.tsx.snap} (80%) rename src/plugins/discover/public/application/angular/directives/{no_results.test.js => no_results.test.tsx} (82%) create mode 100644 src/plugins/discover/public/application/angular/directives/no_results_helper.tsx diff --git a/src/plugins/discover/public/application/angular/directives/__snapshots__/no_results.test.js.snap b/src/plugins/discover/public/application/angular/directives/__snapshots__/no_results.test.tsx.snap similarity index 80% rename from src/plugins/discover/public/application/angular/directives/__snapshots__/no_results.test.js.snap rename to src/plugins/discover/public/application/angular/directives/__snapshots__/no_results.test.tsx.snap index e69e10e29e8019..238d083ff0acd8 100644 --- a/src/plugins/discover/public/application/angular/directives/__snapshots__/no_results.test.js.snap +++ b/src/plugins/discover/public/application/angular/directives/__snapshots__/no_results.test.tsx.snap @@ -1,5 +1,58 @@ // Jest Snapshot v1, https://goo.gl/fbAQLP +exports[`DiscoverNoResults props error message supports lucene and renders doc link 1`] = ` +Array [ +
, +
+
+
+
+ +
+ +
+
+
+
, +] +`; + exports[`DiscoverNoResults props queryLanguage supports lucene and renders doc link 1`] = ` Array [
{ describe('queryLanguage', () => { test('supports lucene and renders doc link', () => { + const component = renderWithIntl(); + + expect(component).toMatchSnapshot(); + }); + }); + + describe('error message', () => { + test('supports lucene and renders doc link', () => { + const error = new Error('Not so awesome error'); const component = renderWithIntl( - 'documentation-link'} /> + ); expect(component).toMatchSnapshot(); diff --git a/src/plugins/discover/public/application/angular/directives/no_results.tsx b/src/plugins/discover/public/application/angular/directives/no_results.tsx index eea4ca38b4b40f..3a7e0dd5aac8de 100644 --- a/src/plugins/discover/public/application/angular/directives/no_results.tsx +++ b/src/plugins/discover/public/application/angular/directives/no_results.tsx @@ -19,20 +19,10 @@ import React, { Fragment } from 'react'; import { FormattedMessage } from '@kbn/i18n/react'; - -import { - EuiButton, - EuiCallOut, - EuiCode, - EuiDescriptionList, - EuiFlexGroup, - EuiFlexItem, - EuiLink, - EuiSpacer, - EuiText, -} from '@elastic/eui'; +import { EuiButton, EuiCallOut, EuiFlexGroup, EuiFlexItem, EuiSpacer } from '@elastic/eui'; import { getServices } from '../../../kibana_services'; import { DataPublicPluginStart } from '../../../../../data/public'; +import { getLuceneQueryMessage, getTimeFieldMessage } from './no_results_helper'; export function DiscoverNoResults({ timeFieldName, @@ -40,153 +30,11 @@ export function DiscoverNoResults({ error, data, }: { - timeFieldName: string; - queryLanguage: string; - error: Error; - data: DataPublicPluginStart; + timeFieldName?: string; + queryLanguage?: string; + error?: Error; + data?: DataPublicPluginStart; }) { - let timeFieldMessage; - - if (timeFieldName && !error) { - timeFieldMessage = ( - - - - -

- -

- -

- -

- - - ); - } - - let luceneQueryMessage; - - if (queryLanguage === 'lucene' && !error) { - const searchExamples = [ - { - description: 200, - title: ( - - - - - - ), - }, - { - description: status:200, - title: ( - - - - - - ), - }, - { - description: status:[400 TO 499], - title: ( - - - - - - ), - }, - { - description: status:[400 TO 499] AND extension:PHP, - title: ( - - - - - - ), - }, - { - description: status:[400 TO 499] AND (extension:php OR extension:html), - title: ( - - - - - - ), - }, - ]; - - luceneQueryMessage = ( - - - - -

- -

- -

- - - - ), - }} - /> -

- - - - - - - - - ); - } - const callOut = !error ? ( - {timeFieldMessage} - {luceneQueryMessage} + {timeFieldName ? getTimeFieldMessage() : null} + {queryLanguage === 'lucene' + ? getLuceneQueryMessage(getServices().docLinks.links.query.luceneQuerySyntax) + : null} ) : ( @@ -216,7 +66,7 @@ export function DiscoverNoResults({ iconType="alert" data-test-subj="discoverNoResultsError" > - data.search.showError(error)}> + (data ? data.search.showError(error) : void 0)}> + + +

+ +

+

+ +

+ + + ); +} + +export function getLuceneQueryMessage(link: string) { + const searchExamples = [ + { + description: 200, + title: ( + + + + + + ), + }, + { + description: status:200, + title: ( + + + + + + ), + }, + { + description: status:[400 TO 499], + title: ( + + + + + + ), + }, + { + description: status:[400 TO 499] AND extension:PHP, + title: ( + + + + + + ), + }, + { + description: status:[400 TO 499] AND (extension:php OR extension:html), + title: ( + + + + + + ), + }, + ]; + return ( + + + +

+ +

+

+ + + + ), + }} + /> +

+ + + + + + ); +} From b0215d8aa7443d4a99f8c66f52ea9ea8baae8aa1 Mon Sep 17 00:00:00 2001 From: Matthias Wilhelm Date: Tue, 20 Oct 2020 10:03:46 +0200 Subject: [PATCH 4/7] Refactor improving everything --- .../__snapshots__/no_results.test.tsx.snap | 271 ------------------ .../angular/directives/_index.scss | 1 - .../application/angular/directives/index.ts | 1 - .../angular/directives/no_results.test.tsx | 72 ----- .../components/discover_legacy.tsx | 3 +- .../no_results}/_no_results.scss | 0 .../components/no_results/index.ts | 20 ++ .../components/no_results/no_results.test.tsx | 118 ++++++++ .../no_results}/no_results.tsx | 15 +- .../no_results}/no_results_helper.tsx | 2 +- 10 files changed, 150 insertions(+), 353 deletions(-) delete mode 100644 src/plugins/discover/public/application/angular/directives/__snapshots__/no_results.test.tsx.snap delete mode 100644 src/plugins/discover/public/application/angular/directives/no_results.test.tsx rename src/plugins/discover/public/application/{angular/directives => components/no_results}/_no_results.scss (100%) create mode 100644 src/plugins/discover/public/application/components/no_results/index.ts create mode 100644 src/plugins/discover/public/application/components/no_results/no_results.test.tsx rename src/plugins/discover/public/application/{angular/directives => components/no_results}/no_results.tsx (96%) rename src/plugins/discover/public/application/{angular/directives => components/no_results}/no_results_helper.tsx (98%) diff --git a/src/plugins/discover/public/application/angular/directives/__snapshots__/no_results.test.tsx.snap b/src/plugins/discover/public/application/angular/directives/__snapshots__/no_results.test.tsx.snap deleted file mode 100644 index 6e310d2f555545..00000000000000 --- a/src/plugins/discover/public/application/angular/directives/__snapshots__/no_results.test.tsx.snap +++ /dev/null @@ -1,271 +0,0 @@ -// Jest Snapshot v1, https://goo.gl/fbAQLP - -exports[`DiscoverNoResults props error message supports lucene and renders doc link 1`] = ` -Array [ -
, -
-
-
-
- -
- -
-
-
-
, -] -`; - -exports[`DiscoverNoResults props queryLanguage supports lucene and renders doc link 1`] = ` -Array [ -
, -
-
-
-
-
-
-
-
-

- Refine your query -

-

- The search bar at the top uses Elasticsearch’s support for Lucene - - Query String syntax - - . Here are some examples of how you can search for web server logs that have been parsed into a few fields. -

-
-
-
-
-
- - Find requests that contain the number 200, in any field - -
-
-
- - - 200 - - -
-
-
- - Find 200 in the status field - -
-
-
- - - status:200 - - -
-
-
- - Find all status codes between 400-499 - -
-
-
- - - status:[400 TO 499] - - -
-
-
- - Find status codes 400-499 with the extension php - -
-
-
- - - status:[400 TO 499] AND extension:PHP - - -
-
-
- - Find status codes 400-499 with the extension php or html - -
-
-
- - - status:[400 TO 499] AND (extension:php OR extension:html) - - -
-
-
-
-
, -] -`; - -exports[`DiscoverNoResults props timeFieldName renders time range feedback 1`] = ` -Array [ -
, -
-
-
-
-
-
-
-
-

- Expand your time range -

-

- One or more of the indices you’re looking at contains a date field. Your query may not match anything in the current time range, or there may not be any data at all in the currently selected time range. You can try changing the time range to one which contains data. -

-
-
-
, -] -`; diff --git a/src/plugins/discover/public/application/angular/directives/_index.scss b/src/plugins/discover/public/application/angular/directives/_index.scss index d4b365547b40c5..dfacdf45c9d7bf 100644 --- a/src/plugins/discover/public/application/angular/directives/_index.scss +++ b/src/plugins/discover/public/application/angular/directives/_index.scss @@ -1,2 +1 @@ -@import 'no_results'; @import 'histogram'; diff --git a/src/plugins/discover/public/application/angular/directives/index.ts b/src/plugins/discover/public/application/angular/directives/index.ts index 0704509da5544d..2e120995cce073 100644 --- a/src/plugins/discover/public/application/angular/directives/index.ts +++ b/src/plugins/discover/public/application/angular/directives/index.ts @@ -17,6 +17,5 @@ * under the License. */ -export { DiscoverNoResults } from './no_results'; export { DiscoverUninitialized } from './uninitialized'; export { DiscoverHistogram } from './histogram'; diff --git a/src/plugins/discover/public/application/angular/directives/no_results.test.tsx b/src/plugins/discover/public/application/angular/directives/no_results.test.tsx deleted file mode 100644 index c46a7b1ef59d5f..00000000000000 --- a/src/plugins/discover/public/application/angular/directives/no_results.test.tsx +++ /dev/null @@ -1,72 +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 React from 'react'; -import { renderWithIntl } from 'test_utils/enzyme_helpers'; - -import { DiscoverNoResults } from './no_results'; - -jest.mock('../../../kibana_services', () => { - return { - getServices: () => ({ - docLinks: { - links: { - query: { - luceneQuerySyntax: 'documentation-link', - }, - }, - }, - }), - }; -}); - -beforeEach(() => { - jest.clearAllMocks(); -}); - -describe('DiscoverNoResults', () => { - describe('props', () => { - describe('timeFieldName', () => { - test('renders time range feedback', () => { - const component = renderWithIntl(); - - expect(component).toMatchSnapshot(); - }); - }); - - describe('queryLanguage', () => { - test('supports lucene and renders doc link', () => { - const component = renderWithIntl(); - - expect(component).toMatchSnapshot(); - }); - }); - - describe('error message', () => { - test('supports lucene and renders doc link', () => { - const error = new Error('Not so awesome error'); - const component = renderWithIntl( - - ); - - expect(component).toMatchSnapshot(); - }); - }); - }); -}); diff --git a/src/plugins/discover/public/application/components/discover_legacy.tsx b/src/plugins/discover/public/application/components/discover_legacy.tsx index d1eaf6c39828cc..3ca421f809640b 100644 --- a/src/plugins/discover/public/application/components/discover_legacy.tsx +++ b/src/plugins/discover/public/application/components/discover_legacy.tsx @@ -26,7 +26,8 @@ import { HitsCounter } from './hits_counter'; import { TimechartHeader } from './timechart_header'; import { DiscoverSidebar } from './sidebar'; import { getServices, IndexPattern } from '../../kibana_services'; -import { DiscoverNoResults, DiscoverUninitialized, DiscoverHistogram } from '../angular/directives'; +import { DiscoverUninitialized, DiscoverHistogram } from '../angular/directives'; +import { DiscoverNoResults } from './no_results'; import { LoadingSpinner } from './loading_spinner/loading_spinner'; import { DocTableLegacy } from '../angular/doc_table/create_doc_table_react'; import { SkipBottomButton } from './skip_bottom_button'; diff --git a/src/plugins/discover/public/application/angular/directives/_no_results.scss b/src/plugins/discover/public/application/components/no_results/_no_results.scss similarity index 100% rename from src/plugins/discover/public/application/angular/directives/_no_results.scss rename to src/plugins/discover/public/application/components/no_results/_no_results.scss diff --git a/src/plugins/discover/public/application/components/no_results/index.ts b/src/plugins/discover/public/application/components/no_results/index.ts new file mode 100644 index 00000000000000..afe35b1fd7c18f --- /dev/null +++ b/src/plugins/discover/public/application/components/no_results/index.ts @@ -0,0 +1,20 @@ +/* + * 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. + */ + +export { DiscoverNoResults } from './no_results'; diff --git a/src/plugins/discover/public/application/components/no_results/no_results.test.tsx b/src/plugins/discover/public/application/components/no_results/no_results.test.tsx new file mode 100644 index 00000000000000..dde75236eb15ec --- /dev/null +++ b/src/plugins/discover/public/application/components/no_results/no_results.test.tsx @@ -0,0 +1,118 @@ +/* + * 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 } from 'test_utils/enzyme_helpers'; +import { findTestSubject } from '@elastic/eui/lib/test'; + +import { DiscoverNoResults, DiscoverNoResultsProps } from './no_results'; + +jest.mock('../../../kibana_services', () => { + return { + getServices: () => ({ + docLinks: { + links: { + query: { + luceneQuerySyntax: 'documentation-link', + }, + }, + }, + }), + }; +}); + +beforeEach(() => { + jest.clearAllMocks(); +}); + +function mountAndFindSubjects(props: DiscoverNoResultsProps) { + const component = mountWithIntl(); + return { + mainMsg: findTestSubject(component, 'discoverNoResults').length > 0, + timeFieldMsg: findTestSubject(component, 'discoverNoResultsTimefilter').length > 0, + luceneMsg: findTestSubject(component, 'discoverNoResultsLucene').length > 0, + errorMsg: findTestSubject(component, 'discoverNoResultsError').length > 0, + }; +} + +describe('DiscoverNoResults', () => { + describe('props', () => { + describe('no props', () => { + test('renders default feedback', () => { + const result = mountAndFindSubjects({}); + expect(result).toMatchInlineSnapshot(` + Object { + "errorMsg": false, + "luceneMsg": false, + "mainMsg": true, + "timeFieldMsg": false, + } + `); + }); + }); + describe('timeFieldName', () => { + test('renders time range feedback', () => { + const result = mountAndFindSubjects({ + timeFieldName: 'awesome_time_field', + }); + expect(result).toMatchInlineSnapshot(` + Object { + "errorMsg": false, + "luceneMsg": false, + "mainMsg": true, + "timeFieldMsg": true, + } + `); + }); + }); + + describe('queryLanguage', () => { + test('supports lucene and renders doc link', () => { + const result = mountAndFindSubjects({ queryLanguage: 'lucene' }); + expect(result).toMatchInlineSnapshot(` + Object { + "errorMsg": false, + "luceneMsg": true, + "mainMsg": true, + "timeFieldMsg": false, + } + `); + }); + }); + + describe('error message', () => { + test('renders error message', () => { + const error = new Error('Fatal error'); + const result = mountAndFindSubjects({ + timeFieldName: 'awesome_time_field', + error, + queryLanguage: 'lucene', + }); + expect(result).toMatchInlineSnapshot(` + Object { + "errorMsg": true, + "luceneMsg": false, + "mainMsg": false, + "timeFieldMsg": false, + } + `); + }); + }); + }); +}); diff --git a/src/plugins/discover/public/application/angular/directives/no_results.tsx b/src/plugins/discover/public/application/components/no_results/no_results.tsx similarity index 96% rename from src/plugins/discover/public/application/angular/directives/no_results.tsx rename to src/plugins/discover/public/application/components/no_results/no_results.tsx index 3a7e0dd5aac8de..96b6eaa5f422be 100644 --- a/src/plugins/discover/public/application/angular/directives/no_results.tsx +++ b/src/plugins/discover/public/application/components/no_results/no_results.tsx @@ -23,18 +23,21 @@ import { EuiButton, EuiCallOut, EuiFlexGroup, EuiFlexItem, EuiSpacer } from '@el import { getServices } from '../../../kibana_services'; import { DataPublicPluginStart } from '../../../../../data/public'; import { getLuceneQueryMessage, getTimeFieldMessage } from './no_results_helper'; +import './_no_results.scss'; + +export interface DiscoverNoResultsProps { + timeFieldName?: string; + queryLanguage?: string; + error?: Error; + data?: DataPublicPluginStart; +} export function DiscoverNoResults({ timeFieldName, queryLanguage, error, data, -}: { - timeFieldName?: string; - queryLanguage?: string; - error?: Error; - data?: DataPublicPluginStart; -}) { +}: DiscoverNoResultsProps) { const callOut = !error ? ( - +

Date: Wed, 21 Oct 2020 07:09:48 +0200 Subject: [PATCH 5/7] Update src/plugins/discover/public/application/components/no_results/no_results.tsx Co-authored-by: Andrea Del Rio --- .../public/application/components/no_results/no_results.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/plugins/discover/public/application/components/no_results/no_results.tsx b/src/plugins/discover/public/application/components/no_results/no_results.tsx index 96b6eaa5f422be..104abcdbc81831 100644 --- a/src/plugins/discover/public/application/components/no_results/no_results.tsx +++ b/src/plugins/discover/public/application/components/no_results/no_results.tsx @@ -69,7 +69,7 @@ export function DiscoverNoResults({ iconType="alert" data-test-subj="discoverNoResultsError" > - (data ? data.search.showError(error) : void 0)}> + (data ? data.search.showError(error) : void 0)}> Date: Wed, 21 Oct 2020 07:10:06 +0200 Subject: [PATCH 6/7] Update src/plugins/discover/public/application/components/no_results/no_results.tsx Co-authored-by: Andrea Del Rio --- .../public/application/components/no_results/no_results.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/plugins/discover/public/application/components/no_results/no_results.tsx b/src/plugins/discover/public/application/components/no_results/no_results.tsx index 104abcdbc81831..dd325398a9b3fd 100644 --- a/src/plugins/discover/public/application/components/no_results/no_results.tsx +++ b/src/plugins/discover/public/application/components/no_results/no_results.tsx @@ -65,7 +65,7 @@ export function DiscoverNoResults({ defaultMessage="We encountered an error retrieving search results" /> } - color="warning" + color="danger" iconType="alert" data-test-subj="discoverNoResultsError" > From b07f58d92ed9a8c1f6855d9e517f519cf316a8a1 Mon Sep 17 00:00:00 2001 From: Matthias Wilhelm Date: Wed, 21 Oct 2020 09:10:28 +0200 Subject: [PATCH 7/7] Satisfy linting --- .../public/application/components/no_results/no_results.tsx | 6 +++++- 1 file changed, 5 insertions(+), 1 deletion(-) diff --git a/src/plugins/discover/public/application/components/no_results/no_results.tsx b/src/plugins/discover/public/application/components/no_results/no_results.tsx index dd325398a9b3fd..fcc2912d16dd5d 100644 --- a/src/plugins/discover/public/application/components/no_results/no_results.tsx +++ b/src/plugins/discover/public/application/components/no_results/no_results.tsx @@ -69,7 +69,11 @@ export function DiscoverNoResults({ iconType="alert" data-test-subj="discoverNoResultsError" > - (data ? data.search.showError(error) : void 0)}> + (data ? data.search.showError(error) : void 0)} + >