From b0215d8aa7443d4a99f8c66f52ea9ea8baae8aa1 Mon Sep 17 00:00:00 2001 From: Matthias Wilhelm Date: Tue, 20 Oct 2020 10:03:46 +0200 Subject: [PATCH] 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 6e310d2f55554..0000000000000 --- 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 d4b365547b40c..dfacdf45c9d7b 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 0704509da5544..2e120995cce07 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 c46a7b1ef59d5..0000000000000 --- 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 d1eaf6c39828c..3ca421f809640 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 0000000000000..afe35b1fd7c18 --- /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 0000000000000..dde75236eb15e --- /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 3a7e0dd5aac8d..96b6eaa5f422b 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 ? ( - +