From 3a90ae1a25257a5d1bafe75fd27c62d8e6954746 Mon Sep 17 00:00:00 2001 From: Matthew Bargar Date: Fri, 17 Aug 2018 12:01:34 -0400 Subject: [PATCH 01/54] simple prototype working --- .../kibana/public/discover/index.html | 1 + src/ui/public/query_bar/index.js | 1 + src/ui/public/query_bar/react/index.js | 28 +++++++++++++++++++ src/ui/public/query_bar/react/query_bar.js | 26 +++++++++++++++++ 4 files changed, 56 insertions(+) create mode 100644 src/ui/public/query_bar/react/index.js create mode 100644 src/ui/public/query_bar/react/query_bar.js diff --git a/src/core_plugins/kibana/public/discover/index.html b/src/core_plugins/kibana/public/discover/index.html index 7a6fdbdbbff23..9d9121cc2667b 100644 --- a/src/core_plugins/kibana/public/discover/index.html +++ b/src/core_plugins/kibana/public/discover/index.html @@ -31,6 +31,7 @@

index-patterns="[indexPattern]" > + diff --git a/src/ui/public/query_bar/index.js b/src/ui/public/query_bar/index.js index 23566906b6487..c0578a68895a1 100644 --- a/src/ui/public/query_bar/index.js +++ b/src/ui/public/query_bar/index.js @@ -18,3 +18,4 @@ */ import './directive/query_bar'; +import './react'; diff --git a/src/ui/public/query_bar/react/index.js b/src/ui/public/query_bar/react/index.js new file mode 100644 index 0000000000000..a2e8a089ea6ad --- /dev/null +++ b/src/ui/public/query_bar/react/index.js @@ -0,0 +1,28 @@ +/* + * 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 'ngreact'; + +import { QueryBar } from './query_bar'; + +import { uiModules } from '../../modules'; + +const app = uiModules.get('kibana', ['react']); + +app.directive('reactQueryBar', reactDirective => reactDirective(QueryBar)); diff --git a/src/ui/public/query_bar/react/query_bar.js b/src/ui/public/query_bar/react/query_bar.js new file mode 100644 index 0000000000000..d2435b9222273 --- /dev/null +++ b/src/ui/public/query_bar/react/query_bar.js @@ -0,0 +1,26 @@ +/* + * 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'; + +export function QueryBar() { + + + return (
Hello world!
); +} From 0f936377a4f944756b06d16fba74e58d70815f24 Mon Sep 17 00:00:00 2001 From: Matthew Bargar Date: Fri, 17 Aug 2018 12:23:22 -0400 Subject: [PATCH 02/54] more progress --- .../kibana/public/discover/index.html | 5 ++++- src/ui/public/query_bar/react/query_bar.js | 22 ++++++++++++++++--- 2 files changed, 23 insertions(+), 4 deletions(-) diff --git a/src/core_plugins/kibana/public/discover/index.html b/src/core_plugins/kibana/public/discover/index.html index 9d9121cc2667b..fd731798834f4 100644 --- a/src/core_plugins/kibana/public/discover/index.html +++ b/src/core_plugins/kibana/public/discover/index.html @@ -31,7 +31,10 @@

index-patterns="[indexPattern]" > - + diff --git a/src/ui/public/query_bar/react/query_bar.js b/src/ui/public/query_bar/react/query_bar.js index d2435b9222273..289c8cbeaa42d 100644 --- a/src/ui/public/query_bar/react/query_bar.js +++ b/src/ui/public/query_bar/react/query_bar.js @@ -19,8 +19,24 @@ import React from 'react'; -export function QueryBar() { +import { + EuiFlexGroup, + EuiFlexItem, + EuiFieldSearch, +} from '@elastic/eui'; - - return (
Hello world!
); +export function QueryBar({ query, onSubmit }) { + return ( + + + {/*Need an onChange to update state, but should this be a stateful component or should it call a callback */} + + + + ); } From 82490eb6c52a9795a21a72bab670ac9d9d1abe55 Mon Sep 17 00:00:00 2001 From: Matthew Bargar Date: Mon, 20 Aug 2018 15:05:06 -0400 Subject: [PATCH 03/54] Get state flow working how I want it --- .../kibana/public/discover/index.html | 3 +- src/ui/public/query_bar/react/query_bar.js | 72 +++++++++++++++---- 2 files changed, 59 insertions(+), 16 deletions(-) diff --git a/src/core_plugins/kibana/public/discover/index.html b/src/core_plugins/kibana/public/discover/index.html index fd731798834f4..47ac03491820a 100644 --- a/src/core_plugins/kibana/public/discover/index.html +++ b/src/core_plugins/kibana/public/discover/index.html @@ -32,7 +32,8 @@

> diff --git a/src/ui/public/query_bar/react/query_bar.js b/src/ui/public/query_bar/react/query_bar.js index 289c8cbeaa42d..5c7456f5cdba1 100644 --- a/src/ui/public/query_bar/react/query_bar.js +++ b/src/ui/public/query_bar/react/query_bar.js @@ -17,7 +17,7 @@ * under the License. */ -import React from 'react'; +import React, { Component } from 'react'; import { EuiFlexGroup, @@ -25,18 +25,60 @@ import { EuiFieldSearch, } from '@elastic/eui'; -export function QueryBar({ query, onSubmit }) { - return ( - - - {/*Need an onChange to update state, but should this be a stateful component or should it call a callback */} - - - - ); +export class QueryBar extends Component { + + /* + Keep the "draft" value in local state until the user actually submits the query. There are a couple advantages: + + 1. Each app doesn't have to maintain its own "draft" value if it wants to put off updating the query in app state + until the user manually submits their changes. Most apps have watches on the query value in app state so we don't + want to trigger those on every keypress. Also, some apps (e.g. dashboard) already juggle multiple query values, + each with slightly different semantics and I'd rather not add yet another variable to the mix. + + 2. Changes to the local component state won't trigger an Angular digest cycle. Triggering digest cycles on every + keypress has been a major source of performance issues for us in previous implementations of the query bar. + See https://github.com/elastic/kibana/issues/14086 + */ + state = { + query: this.props.query, + language: this.props.language, + }; + + onChange = (event) => { + this.setState({ + query: event.target.value, + }); + }; + + componentWillReceiveProps(nextProps) { + if (nextProps.query !== this.props.query) { + this.setState({ + query: nextProps.query, + language: nextProps.language, + }); + } + else if (nextProps.language !== nextProps.language) { + this.setState({ + query: '', + language: nextProps.language, + }); + } + } + + render() { + return ( + + + {/*Need an onChange to update state, but should this be a stateful component or should it call a callback */} + + + + ); + } } From b5661482c47966d36d3a9d75d7820f009dd9c307 Mon Sep 17 00:00:00 2001 From: Matthew Bargar Date: Mon, 20 Aug 2018 16:23:19 -0400 Subject: [PATCH 04/54] add propTypes --- src/ui/public/query_bar/react/query_bar.js | 8 ++++++++ 1 file changed, 8 insertions(+) diff --git a/src/ui/public/query_bar/react/query_bar.js b/src/ui/public/query_bar/react/query_bar.js index 5c7456f5cdba1..13ffd14dc8da4 100644 --- a/src/ui/public/query_bar/react/query_bar.js +++ b/src/ui/public/query_bar/react/query_bar.js @@ -18,6 +18,7 @@ */ import React, { Component } from 'react'; +import PropTypes from 'prop-types'; import { EuiFlexGroup, @@ -82,3 +83,10 @@ export class QueryBar extends Component { ); } } + + +QueryBar.propTypes = { + query: PropTypes.string, + language: PropTypes.string, + onSubmit: PropTypes.func, +}; From 5c9db7d3460539cc6f3eda27a6910bb787d6b763 Mon Sep 17 00:00:00 2001 From: Matthew Bargar Date: Tue, 21 Aug 2018 17:30:18 -0400 Subject: [PATCH 05/54] react language switcher partially implemented --- .../public/query_bar/directive/query_bar.js | 1 - .../query_bar/directive/query_popover.js | 163 ------------------ src/ui/public/query_bar/react/index.js | 4 +- .../query_bar/react/language_switcher.js | 139 +++++++++++++++ 4 files changed, 142 insertions(+), 165 deletions(-) delete mode 100644 src/ui/public/query_bar/directive/query_popover.js create mode 100644 src/ui/public/query_bar/react/language_switcher.js diff --git a/src/ui/public/query_bar/directive/query_bar.js b/src/ui/public/query_bar/directive/query_bar.js index 7179c1294afe6..e05199b4cbab5 100644 --- a/src/ui/public/query_bar/directive/query_bar.js +++ b/src/ui/public/query_bar/directive/query_bar.js @@ -25,7 +25,6 @@ import suggestionTemplate from './suggestion.html'; import { getAutocompleteProvider } from '../../autocomplete_providers'; import './suggestion.less'; import '../../directives/match_pairs'; -import './query_popover'; import { getFromLegacyIndexPattern } from '../../index_patterns/static_utils'; const module = uiModules.get('kibana'); diff --git a/src/ui/public/query_bar/directive/query_popover.js b/src/ui/public/query_bar/directive/query_popover.js deleted file mode 100644 index 14be6f41b3c16..0000000000000 --- a/src/ui/public/query_bar/directive/query_popover.js +++ /dev/null @@ -1,163 +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 ReactDOM from 'react-dom'; -import { uiModules } from '../../modules'; -import { documentationLinks } from '../../documentation_links/documentation_links'; -import { kfetch } from 'ui/kfetch'; -import { - EuiPopover, - EuiButtonEmpty, - EuiForm, - EuiFormRow, - EuiSwitch, - EuiLink, - EuiText, - EuiSpacer, - EuiHorizontalRule, - EuiPopoverTitle, -} from '@elastic/eui'; - -const luceneQuerySyntaxDocs = documentationLinks.query.luceneQuerySyntax; -const kueryQuerySyntaxDocs = documentationLinks.query.kueryQuerySyntax; - -const module = uiModules.get('app/kibana', ['react']); -module.directive('queryPopover', function (localStorage) { - - return { - restrict: 'E', - scope: { - language: '<', - onSelectLanguage: '&', - }, - link: function ($scope, $element) { - $scope.isPopoverOpen = false; - - function togglePopover() { - $scope.$evalAsync(() => { - $scope.isPopoverOpen = !$scope.isPopoverOpen; - }); - } - - function closePopover() { - $scope.$evalAsync(() => { - $scope.isPopoverOpen = false; - }); - } - - function onSwitchChange() { - const newLanguage = $scope.language === 'lucene' ? 'kuery' : 'lucene'; - - // Send telemetry info every time the user opts in or out of kuery - // As a result it is important this function only ever gets called in the - // UI component's change handler. - kfetch({ - pathname: '/api/kibana/kql_opt_in_telemetry', - method: 'POST', - body: JSON.stringify({ opt_in: newLanguage === 'kuery' }), - }); - - $scope.$evalAsync(() => { - localStorage.set('kibana.userQueryLanguage', newLanguage); - $scope.onSelectLanguage({ $language: newLanguage }); - }); - } - - function render() { - const button = ( - - Options - - ); - - const popover = ( - - Syntax options -
- -

- Our experimental autocomplete and simple syntax features can help you create your queries. Just start - typing and you’ll see matches related to your data. - - See docs {( - - here - - )}. -

- - - - - - - - - - - - - -

- Not ready yet? Find our lucene docs {( - - here - - )}. -

- -
- - ); - - ReactDOM.render(popover, $element[0]); - } - - $scope.$watch('isPopoverOpen', render); - $scope.$watch('language', render); - } - }; - -}); - - diff --git a/src/ui/public/query_bar/react/index.js b/src/ui/public/query_bar/react/index.js index a2e8a089ea6ad..9b7b2d5e55cb0 100644 --- a/src/ui/public/query_bar/react/index.js +++ b/src/ui/public/query_bar/react/index.js @@ -20,9 +20,11 @@ import 'ngreact'; import { QueryBar } from './query_bar'; +import { QueryLanguageSwitcher } from './language_switcher'; import { uiModules } from '../../modules'; -const app = uiModules.get('kibana', ['react']); +const app = uiModules.get('app/kibana', ['react']); app.directive('reactQueryBar', reactDirective => reactDirective(QueryBar)); +app.directive('queryPopover', reactDirective => reactDirective(QueryLanguageSwitcher)); diff --git a/src/ui/public/query_bar/react/language_switcher.js b/src/ui/public/query_bar/react/language_switcher.js new file mode 100644 index 0000000000000..342e945f801dd --- /dev/null +++ b/src/ui/public/query_bar/react/language_switcher.js @@ -0,0 +1,139 @@ +/* + * 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 } from 'react'; +import PropTypes from 'prop-types'; +import { documentationLinks } from '../../documentation_links/documentation_links'; +import { + EuiPopover, + EuiButtonEmpty, + EuiForm, + EuiFormRow, + EuiSwitch, + EuiLink, + EuiText, + EuiSpacer, + EuiHorizontalRule, + EuiPopoverTitle, +} from '@elastic/eui'; + +const luceneQuerySyntaxDocs = documentationLinks.query.luceneQuerySyntax; +const kueryQuerySyntaxDocs = documentationLinks.query.kueryQuerySyntax; + +export class QueryLanguageSwitcher extends Component { + + state = { + isPopoverOpen: false, + }; + + togglePopover = () => { + this.setState({ + isPopoverOpen: !this.state.isPopoverOpen, + }); + }; + + closePopover = () => { + this.setState({ + isPopoverOpen: false, + }); + }; + + onSwitchChange = () => { + const newLanguage = this.props.language === 'lucene' ? 'kuery' : 'lucene'; + // TODO implement this + //localStorage.set('kibana.userQueryLanguage', newLanguage); + this.props.onSelectLanguage(newLanguage); + }; + + render() { + const button = ( + + Options + + ); + + return ( + + Syntax options +
+ +

+ Our experimental autocomplete and simple syntax features can help you create your queries. Just start + typing and you’ll see matches related to your data. + + See docs {( + + here + + )}. +

+ + + + + + + + + + + + + +

+ Not ready yet? Find our lucene docs {( + + here + + )}. +

+ +
+ + ); + } +} + +QueryLanguageSwitcher.propTypes = { + language: PropTypes.string, + onSelectLanguage: PropTypes.func, +}; From 743965eca340cf32cb596da8a89ddefadae99ca6 Mon Sep 17 00:00:00 2001 From: Matthew Bargar Date: Thu, 23 Aug 2018 12:55:33 -0400 Subject: [PATCH 06/54] added language switcher to react query bar, code still rough but its working --- .../public/query_bar/directive/query_bar.html | 2 +- src/ui/public/query_bar/react/query_bar.js | 45 +++++++++++++------ 2 files changed, 33 insertions(+), 14 deletions(-) diff --git a/src/ui/public/query_bar/directive/query_bar.html b/src/ui/public/query_bar/directive/query_bar.html index e8205825ff53a..6238f7c19b30b 100644 --- a/src/ui/public/query_bar/directive/query_bar.html +++ b/src/ui/public/query_bar/directive/query_bar.html @@ -64,7 +64,7 @@
diff --git a/src/ui/public/query_bar/react/query_bar.js b/src/ui/public/query_bar/react/query_bar.js index 13ffd14dc8da4..446e7f761c140 100644 --- a/src/ui/public/query_bar/react/query_bar.js +++ b/src/ui/public/query_bar/react/query_bar.js @@ -19,6 +19,7 @@ import React, { Component } from 'react'; import PropTypes from 'prop-types'; +import { QueryLanguageSwitcher } from './language_switcher'; import { EuiFlexGroup, @@ -58,7 +59,7 @@ export class QueryBar extends Component { language: nextProps.language, }); } - else if (nextProps.language !== nextProps.language) { + else if (nextProps.language !== this.props.language) { this.setState({ query: '', language: nextProps.language, @@ -68,18 +69,36 @@ export class QueryBar extends Component { render() { return ( - - - {/*Need an onChange to update state, but should this be a stateful component or should it call a callback */} - - - +
+
+ + + {/*Need an onChange to update state, but should this be a stateful component or should it call a callback */} + this.props.onSubmit({ query: this.state.query, language: this.state.language })} + fullWidth + /> +
+ { + this.props.onSubmit({ + query: this.state.query, + language: language, + }); + }} + /> +
+ + +
+
); } } From f83e2a9fead7f1cd34c545dfad9acac34a2f0cc1 Mon Sep 17 00:00:00 2001 From: Matthew Bargar Date: Thu, 23 Aug 2018 14:02:17 -0400 Subject: [PATCH 07/54] combine language and query props --- .../kibana/public/discover/index.html | 3 +- src/ui/public/query_bar/react/query_bar.js | 44 ++++++++++++------- 2 files changed, 30 insertions(+), 17 deletions(-) diff --git a/src/core_plugins/kibana/public/discover/index.html b/src/core_plugins/kibana/public/discover/index.html index 47ac03491820a..fd731798834f4 100644 --- a/src/core_plugins/kibana/public/discover/index.html +++ b/src/core_plugins/kibana/public/discover/index.html @@ -32,8 +32,7 @@

> diff --git a/src/ui/public/query_bar/react/query_bar.js b/src/ui/public/query_bar/react/query_bar.js index 446e7f761c140..abcd9c95ecd64 100644 --- a/src/ui/public/query_bar/react/query_bar.js +++ b/src/ui/public/query_bar/react/query_bar.js @@ -42,27 +42,36 @@ export class QueryBar extends Component { See https://github.com/elastic/kibana/issues/14086 */ state = { - query: this.props.query, - language: this.props.language, + query: { + query: this.props.query.query, + language: this.props.query.language, + }, }; onChange = (event) => { this.setState({ - query: event.target.value, + query: { + query: event.target.value, + language: this.state.query.language, + }, }); }; componentWillReceiveProps(nextProps) { - if (nextProps.query !== this.props.query) { + if (nextProps.query.query !== this.props.query.query) { this.setState({ - query: nextProps.query, - language: nextProps.language, + query: { + query: nextProps.query.query, + language: nextProps.query.language, + }, }); } - else if (nextProps.language !== this.props.language) { + else if (nextProps.query.language !== this.props.query.language) { this.setState({ - query: '', - language: nextProps.language, + query: { + query: '', + language: nextProps.query.language, + }, }); } } @@ -79,17 +88,20 @@ export class QueryBar extends Component { {/*Need an onChange to update state, but should this be a stateful component or should it call a callback */} this.props.onSubmit({ query: this.state.query, language: this.state.language })} + onSearch={() => this.props.onSubmit({ + query: this.state.query.query, + language: this.state.query.language, + })} fullWidth />
{ this.props.onSubmit({ - query: this.state.query, + query: this.state.query.query, language: language, }); }} @@ -105,7 +117,9 @@ export class QueryBar extends Component { QueryBar.propTypes = { - query: PropTypes.string, - language: PropTypes.string, + query: PropTypes.shape({ + query: PropTypes.string, + language: PropTypes.string, + }), onSubmit: PropTypes.func, }; From af341b9349b5a8f5bb7e3ae46faccb83c0d832fc Mon Sep 17 00:00:00 2001 From: Matthew Bargar Date: Tue, 11 Sep 2018 17:29:34 -0400 Subject: [PATCH 08/54] Reimplement functionality provided by input-focus and disable-input-focus angular directives. --- .../public/query_bar/directive/query_bar.html | 2 - src/ui/public/query_bar/react/query_bar.js | 73 +++++++++++-------- 2 files changed, 42 insertions(+), 33 deletions(-) diff --git a/src/ui/public/query_bar/directive/query_bar.html b/src/ui/public/query_bar/directive/query_bar.html index 6238f7c19b30b..65de439b9ced2 100644 --- a/src/ui/public/query_bar/directive/query_bar.html +++ b/src/ui/public/query_bar/directive/query_bar.html @@ -21,7 +21,6 @@ { + e.preventDefault(); + this.props.onSubmit({ + query: this.state.query.query, + language: this.state.query.language, + }); + } + } > -
- - - {/*Need an onChange to update state, but should this be a stateful component or should it call a callback */} - this.props.onSubmit({ - query: this.state.query.query, - language: this.state.query.language, - })} - fullWidth - /> -
- { - this.props.onSubmit({ - query: this.state.query.query, - language: language, - }); - }} +
+
+ + + {/*Need an onChange to update state, but should this be a stateful component or should it call a callback */} + -
- - +
+ { + this.props.onSubmit({ + query: this.state.query.query, + language: language, + }); + }} + /> +
+ + +
-
+ ); } } @@ -122,4 +132,5 @@ QueryBar.propTypes = { language: PropTypes.string, }), onSubmit: PropTypes.func, + disableAutoFocus: PropTypes.bool, }; From d55614da445755aed3a62933747825d347eec2fd Mon Sep 17 00:00:00 2001 From: Matthew Bargar Date: Thu, 13 Sep 2018 16:00:03 -0400 Subject: [PATCH 09/54] Re-implement parse-query in the react query bar --- .../directives/__tests__/parse_query.js | 8 +-- src/ui/public/parse_query/index.js | 3 ++ src/ui/public/parse_query/lib/from_user.js | 49 +++++++++---------- src/ui/public/parse_query/parse_query.js | 5 +- src/ui/public/query_bar/react/query_bar.js | 10 ++-- 5 files changed, 35 insertions(+), 40 deletions(-) diff --git a/src/ui/public/directives/__tests__/parse_query.js b/src/ui/public/directives/__tests__/parse_query.js index b3c24cc9deb8b..201039c35f757 100644 --- a/src/ui/public/directives/__tests__/parse_query.js +++ b/src/ui/public/directives/__tests__/parse_query.js @@ -25,26 +25,23 @@ import ngMock from 'ng_mock'; let $rootScope; let $compile; -let Private; let config; let $elemScope; let $elem; let cycleIndex = 0; const markup = ''; -let fromUser; import { toUser } from '../../parse_query/lib/to_user'; import '../../parse_query'; -import { ParseQueryLibFromUserProvider } from '../../parse_query/lib/from_user'; +import { fromUser } from '../../parse_query/lib/from_user'; const init = function () { // Load the application ngMock.module('kibana'); // Create the scope - ngMock.inject(function ($injector, _$rootScope_, _$compile_, _$timeout_, _Private_, _config_) { + ngMock.inject(function ($injector, _$rootScope_, _$compile_, _$timeout_, _config_) { $compile = _$compile_; - Private = _Private_; config = _config_; // Give us a scope @@ -77,7 +74,6 @@ describe('parse-query directive', function () { describe('user input parser', function () { beforeEach(function () { - fromUser = Private(ParseQueryLibFromUserProvider); config.set('query:queryString:options', {}); }); diff --git a/src/ui/public/parse_query/index.js b/src/ui/public/parse_query/index.js index 8e4bc6d0ad3db..75c311e9e6f05 100644 --- a/src/ui/public/parse_query/index.js +++ b/src/ui/public/parse_query/index.js @@ -18,3 +18,6 @@ */ import './parse_query'; + +export * from './lib/from_user'; +export * from './lib/to_user'; diff --git a/src/ui/public/parse_query/lib/from_user.js b/src/ui/public/parse_query/lib/from_user.js index 46d6ca96bcc80..426e4a72794fc 100644 --- a/src/ui/public/parse_query/lib/from_user.js +++ b/src/ui/public/parse_query/lib/from_user.js @@ -19,37 +19,34 @@ import _ from 'lodash'; -export function ParseQueryLibFromUserProvider() { +/** + * Take userInput from the user and make it into a query object + * @param {userInput} user's query input + * @returns {object} + */ - /** - * Take userInput from the user and make it into a query object - * @param {userInput} user's query input - * @returns {object} - */ - return function (userInput) { - const matchAll = ''; +export function fromUser(userInput) { + const matchAll = ''; - if (_.isObject(userInput)) { - // If we get an empty object, treat it as a * - if (!Object.keys(userInput).length) { - return matchAll; - } - return userInput; + if (_.isObject(userInput)) { + // If we get an empty object, treat it as a * + if (!Object.keys(userInput).length) { + return matchAll; } + return userInput; + } - // Nope, not an object. - userInput = (userInput || '').trim(); - if (userInput.length === 0) return matchAll; + // Nope, not an object. + userInput = (userInput || '').trim(); + if (userInput.length === 0) return matchAll; - if (userInput[0] === '{') { - try { - return JSON.parse(userInput); - } catch (e) { - return userInput; - } - } else { + if (userInput[0] === '{') { + try { + return JSON.parse(userInput); + } catch (e) { return userInput; } - }; + } else { + return userInput; + } } - diff --git a/src/ui/public/parse_query/parse_query.js b/src/ui/public/parse_query/parse_query.js index 2c8252f9dc9a0..4b3f9d24f72de 100644 --- a/src/ui/public/parse_query/parse_query.js +++ b/src/ui/public/parse_query/parse_query.js @@ -18,13 +18,12 @@ */ import { toUser } from './lib/to_user'; -import { ParseQueryLibFromUserProvider } from './lib/from_user'; +import { fromUser } from './lib/from_user'; import { uiModules } from '../modules'; uiModules .get('kibana') - .directive('parseQuery', function (Private) { - const fromUser = Private(ParseQueryLibFromUserProvider); + .directive('parseQuery', function () { return { restrict: 'A', diff --git a/src/ui/public/query_bar/react/query_bar.js b/src/ui/public/query_bar/react/query_bar.js index 29bd5060d313c..bb270e0b590d8 100644 --- a/src/ui/public/query_bar/react/query_bar.js +++ b/src/ui/public/query_bar/react/query_bar.js @@ -20,6 +20,7 @@ import React, { Component } from 'react'; import PropTypes from 'prop-types'; import { QueryLanguageSwitcher } from './language_switcher'; +import { toUser, fromUser } from '../../parse_query/index.js'; import { EuiFlexGroup, @@ -43,7 +44,7 @@ export class QueryBar extends Component { */ state = { query: { - query: this.props.query.query, + query: toUser(this.props.query.query), language: this.props.query.language, }, }; @@ -61,7 +62,7 @@ export class QueryBar extends Component { if (nextProps.query.query !== this.props.query.query) { this.setState({ query: { - query: nextProps.query.query, + query: toUser(nextProps.query.query), language: nextProps.query.language, }, }); @@ -84,7 +85,7 @@ export class QueryBar extends Component { onSubmit={(e) => { e.preventDefault(); this.props.onSubmit({ - query: this.state.query.query, + query: fromUser(this.state.query.query), language: this.state.query.language, }); } @@ -97,7 +98,6 @@ export class QueryBar extends Component {
- {/*Need an onChange to update state, but should this be a stateful component or should it call a callback */} { this.props.onSubmit({ - query: this.state.query.query, + query: '', language: language, }); }} From 5559ad4b6671c612484231b12132d0ee0831b0f8 Mon Sep 17 00:00:00 2001 From: Matthew Bargar Date: Thu, 13 Sep 2018 17:11:41 -0400 Subject: [PATCH 10/54] re-implement match-pairs functionality in react query bar --- .../public/query_bar/directive/query_bar.html | 1 - .../public/query_bar/directive/query_bar.js | 1 - .../lib}/match_pairs.js | 62 +++++++++---------- src/ui/public/query_bar/react/query_bar.js | 48 +++++++++++--- 4 files changed, 68 insertions(+), 44 deletions(-) rename src/ui/public/{directives => query_bar/lib}/match_pairs.js (66%) diff --git a/src/ui/public/query_bar/directive/query_bar.html b/src/ui/public/query_bar/directive/query_bar.html index 65de439b9ced2..55ed7964a2f69 100644 --- a/src/ui/public/query_bar/directive/query_bar.html +++ b/src/ui/public/query_bar/directive/query_bar.html @@ -45,7 +45,6 @@ ng-keydown="queryBar.handleKeyDown($event)" ng-change="queryBar.updateSuggestions()" ng-click="queryBar.updateSuggestions()" - match-pairs disable-input-focus="queryBar.disableAutoFocus" kbn-typeahead-input placeholder="Search... (e.g. status:200 AND extension:PHP)" diff --git a/src/ui/public/query_bar/directive/query_bar.js b/src/ui/public/query_bar/directive/query_bar.js index e05199b4cbab5..e594b39603e60 100644 --- a/src/ui/public/query_bar/directive/query_bar.js +++ b/src/ui/public/query_bar/directive/query_bar.js @@ -24,7 +24,6 @@ import template from './query_bar.html'; import suggestionTemplate from './suggestion.html'; import { getAutocompleteProvider } from '../../autocomplete_providers'; import './suggestion.less'; -import '../../directives/match_pairs'; import { getFromLegacyIndexPattern } from '../../index_patterns/static_utils'; const module = uiModules.get('kibana'); diff --git a/src/ui/public/directives/match_pairs.js b/src/ui/public/query_bar/lib/match_pairs.js similarity index 66% rename from src/ui/public/directives/match_pairs.js rename to src/ui/public/query_bar/lib/match_pairs.js index 181dab3c0f518..c08bce349a731 100644 --- a/src/ui/public/directives/match_pairs.js +++ b/src/ui/public/query_bar/lib/match_pairs.js @@ -17,11 +17,8 @@ * under the License. */ -import { uiModules } from '../modules'; -const module = uiModules.get('kibana'); - /** - * This directively automatically handles matching pairs. + * This helper automatically handles matching pairs. * Specifically, it does the following: * * 1. If the key is a closer, and the character in front of the cursor is the @@ -37,37 +34,34 @@ const pairs = ['()', '[]', '{}', `''`, '""']; const openers = pairs.map(pair => pair[0]); const closers = pairs.map(pair => pair[1]); -module.directive('matchPairs', () => ({ - restrict: 'A', - require: 'ngModel', - link: function (scope, elem, attrs, ngModel) { - elem.on('keydown', (e) => { - const { target, key, metaKey } = e; - const { value, selectionStart, selectionEnd } = target; - - if (shouldMoveCursorForward(key, value, selectionStart, selectionEnd)) { - e.preventDefault(); - target.setSelectionRange(selectionStart + 1, selectionEnd + 1); - } else if (shouldInsertMatchingCloser(key, value, selectionStart, selectionEnd)) { - e.preventDefault(); - const newValue = value.substr(0, selectionStart) + key + - value.substring(selectionStart, selectionEnd) + closers[openers.indexOf(key)] + - value.substr(selectionEnd); - target.value = newValue; - target.setSelectionRange(selectionStart + 1, selectionEnd + 1); - ngModel.$setViewValue(newValue); - ngModel.$render(); - } else if (shouldRemovePair(key, metaKey, value, selectionStart, selectionEnd)) { - e.preventDefault(); - const newValue = value.substr(0, selectionEnd - 1) + value.substr(selectionEnd + 1); - target.value = newValue; - target.setSelectionRange(selectionStart - 1, selectionEnd - 1); - ngModel.$setViewValue(newValue); - ngModel.$render(); - } - }); +export function matchPairs({ + value, + selectionStart, + selectionEnd, + key, + metaKey, + updateQuery, + preventDefault, +}) { + if (shouldMoveCursorForward(key, value, selectionStart, selectionEnd)) { + preventDefault(); + updateQuery(value, selectionStart + 1, selectionEnd + 1); + } else if (shouldInsertMatchingCloser(key, value, selectionStart, selectionEnd)) { + preventDefault(); + const newValue = + value.substr(0, selectionStart) + + key + + value.substring(selectionStart, selectionEnd) + + closers[openers.indexOf(key)] + + value.substr(selectionEnd); + updateQuery(newValue, selectionStart + 1, selectionEnd + 1); + } else if (shouldRemovePair(key, metaKey, value, selectionStart, selectionEnd)) { + preventDefault(); + const newValue = value.substr(0, selectionEnd - 1) + value.substr(selectionEnd + 1); + updateQuery(newValue, selectionStart - 1, selectionEnd - 1); } -})); +} + function shouldMoveCursorForward(key, value, selectionStart, selectionEnd) { if (!closers.includes(key)) return false; diff --git a/src/ui/public/query_bar/react/query_bar.js b/src/ui/public/query_bar/react/query_bar.js index bb270e0b590d8..1b46eb08bed1a 100644 --- a/src/ui/public/query_bar/react/query_bar.js +++ b/src/ui/public/query_bar/react/query_bar.js @@ -21,6 +21,7 @@ import React, { Component } from 'react'; import PropTypes from 'prop-types'; import { QueryLanguageSwitcher } from './language_switcher'; import { toUser, fromUser } from '../../parse_query/index.js'; +import { matchPairs } from '../lib/match_pairs'; import { EuiFlexGroup, @@ -58,6 +59,43 @@ export class QueryBar extends Component { }); }; + onKeyDown = (event) => { + const preventDefault = event.preventDefault.bind(event); + const { target, key, metaKey } = event; + const { value, selectionStart, selectionEnd } = target; + const updateQuery = (query, selectionStart, selectionEnd) => { + this.setState( + { + query: { + ...this.state.query, + query, + }, + }, + () => { + target.setSelectionRange(selectionStart, selectionEnd); + } + ); + }; + + matchPairs({ + value, + selectionStart, + selectionEnd, + key, + metaKey, + updateQuery, + preventDefault, + }); + }; + + onSubmit = (event) => { + event.preventDefault(); + this.props.onSubmit({ + query: fromUser(this.state.query.query), + language: this.state.query.language, + }); + }; + componentWillReceiveProps(nextProps) { if (nextProps.query.query !== this.props.query.query) { this.setState({ @@ -82,14 +120,8 @@ export class QueryBar extends Component {
{ - e.preventDefault(); - this.props.onSubmit({ - query: fromUser(this.state.query.query), - language: this.state.query.language, - }); - } - } + onSubmit={this.onSubmit} + onKeyDown={this.onKeyDown} >
Date: Fri, 14 Sep 2018 17:12:39 -0400 Subject: [PATCH 11/54] Rough first pass getting typeahead working in react query bar --- .../kibana/public/discover/index.html | 2 + src/ui/public/query_bar/react/query_bar.js | 324 +++++++++++++++--- .../react/typeahead/click_outside.js | 54 +++ .../query_bar/react/typeahead/suggestion.js | 141 ++++++++ .../query_bar/react/typeahead/suggestions.js | 100 ++++++ 5 files changed, 572 insertions(+), 49 deletions(-) create mode 100644 src/ui/public/query_bar/react/typeahead/click_outside.js create mode 100644 src/ui/public/query_bar/react/typeahead/suggestion.js create mode 100644 src/ui/public/query_bar/react/typeahead/suggestions.js diff --git a/src/core_plugins/kibana/public/discover/index.html b/src/core_plugins/kibana/public/discover/index.html index fd731798834f4..6f1bb1c879de5 100644 --- a/src/core_plugins/kibana/public/discover/index.html +++ b/src/core_plugins/kibana/public/discover/index.html @@ -34,6 +34,8 @@

diff --git a/src/ui/public/query_bar/react/query_bar.js b/src/ui/public/query_bar/react/query_bar.js index 1b46eb08bed1a..25548a38f1c5d 100644 --- a/src/ui/public/query_bar/react/query_bar.js +++ b/src/ui/public/query_bar/react/query_bar.js @@ -22,6 +22,13 @@ import PropTypes from 'prop-types'; import { QueryLanguageSwitcher } from './language_switcher'; import { toUser, fromUser } from '../../parse_query/index.js'; import { matchPairs } from '../lib/match_pairs'; +import { Suggestions } from './typeahead/suggestions'; +import { ClickOutside } from './typeahead/click_outside'; +import { getAutocompleteProvider } from '../../autocomplete_providers'; +import { getFromLegacyIndexPattern } from '../../index_patterns/static_utils'; +import { PersistedLog } from '../../persisted_log'; +import { chrome } from '../../chrome/chrome'; +import { debounce } from 'lodash'; import { EuiFlexGroup, @@ -29,6 +36,28 @@ import { EuiFieldText, } from '@elastic/eui'; +/* +TODO: recent search suggestions don't seem to be working +TODO: query disappears when I hit enter and language reverts to lucene +TODO: styling +TODO: refactoring + */ + + +const KEY_CODES = { + LEFT: 37, + UP: 38, + RIGHT: 39, + DOWN: 40, + ENTER: 13, + ESC: 27, + TAB: 9, + HOME: 36, + END: 35, +}; + +const config = chrome.getUiSettingsClient(); + export class QueryBar extends Component { /* @@ -48,18 +77,134 @@ export class QueryBar extends Component { query: toUser(this.props.query.query), language: this.props.query.language, }, + inputIsPristine: true, + isSuggestionsVisible: false, + index: null, + suggestions: [], + }; + + incrementIndex = (currentIndex) => { + let nextIndex = currentIndex + 1; + if (currentIndex === null || nextIndex >= this.state.suggestions.length) { + nextIndex = 0; + } + this.setState({ index: nextIndex }); + }; + + decrementIndex = (currentIndex) => { + let previousIndex = currentIndex - 1; + if (previousIndex < 0) { + previousIndex = null; + } + this.setState({ index: previousIndex }); + }; + + updateSuggestions = debounce(async () => { + const suggestions = await this.getSuggestions(); + this.setState({ suggestions }); + }, 100); + + getSuggestions = async () => { + const { query: { query, language } } = this.state; + const recentSearchSuggestions = this.getRecentSearchSuggestions(query); + + const autocompleteProvider = getAutocompleteProvider(language); + if (!autocompleteProvider) return recentSearchSuggestions; + + const indexPatterns = getFromLegacyIndexPattern(this.props.indexPatterns); + const getAutocompleteSuggestions = autocompleteProvider({ config, indexPatterns }); + + const { selectionStart, selectionEnd } = this.inputRef; + const suggestions = await getAutocompleteSuggestions({ query, selectionStart, selectionEnd }); + return [...suggestions, ...recentSearchSuggestions]; + }; + + // TODO do I need this since I took the selectSuggestion method from APM? + // + // onSuggestionSelect = ({ type, text, start, end }) => { + // const { query } = this.localQuery; + // const inputEl = this.inputRef; + // const { selectionStart, selectionEnd } = inputEl; + // const value = query.substr(0, selectionStart) + query.substr(selectionEnd); + // + // this.localQuery.query = inputEl.value = value.substr(0, start) + text + value.substr(end); + // inputEl.setSelectionRange(start + text.length, start + text.length); + // + // if (type === 'recentSearch') { + // this.submit(); + // } else { + // this.updateSuggestions(); + // } + // }; + + getRecentSearchSuggestions = (query) => { + if (!this.persistedLog) return []; + const recentSearches = this.persistedLog.get(); + const matchingRecentSearches = recentSearches.filter((recentQuery) => { + const recentQueryString = typeof recentQuery === 'object' ? toUser(recentQuery) : recentQuery; + return recentQueryString.includes(query); + }); + return matchingRecentSearches.map(recentSearch => { + const text = recentSearch; + const start = 0; + const end = query.length; + return { type: 'recentSearch', text, start, end }; + }); + }; + + selectSuggestion = (suggestion) => { + const nextInputValue = + this.state.query.query.substr(0, suggestion.start) + + suggestion.text + + this.state.query.query.substr(suggestion.end); + + this.setState({ query: { ...this.state.query, query: nextInputValue }, index: null }); + this.updateSuggestions(); + }; + + onClickOutside = () => { + this.setState({ isSuggestionsVisible: false }); }; - onChange = (event) => { + onClickInput = (event) => { + this.onInputChange(event); + }; + + onClickSuggestion = (suggestion) => { + this.selectSuggestion(suggestion); + this.inputRef.focus(); + }; + + onMouseEnterSuggestion = (index) => { + this.setState({ index }); + }; + + onInputChange = (event) => { + this.updateSuggestions(); + + const { value } = event.target; + const hasValue = Boolean(value.trim()); + this.setState({ query: { - query: event.target.value, + query: value, language: this.state.query.language, }, + inputIsPristine: false, + isSuggestionsVisible: hasValue, + index: null, }); }; + onKeyUp = (event) => { + if ([KEY_CODES.LEFT, KEY_CODES.RIGHT, KEY_CODES.HOME, KEY_CODES.END].includes(event.keyCode)) { + this.setState({ isSuggestionsVisible: true }); + this.onInputChange(event); + } + }; + onKeyDown = (event) => { + const { isSuggestionsVisible, index } = this.state; const preventDefault = event.preventDefault.bind(event); const { target, key, metaKey } = event; const { value, selectionStart, selectionEnd } = target; @@ -73,19 +218,53 @@ export class QueryBar extends Component { }, () => { target.setSelectionRange(selectionStart, selectionEnd); - } + }, ); }; - matchPairs({ - value, - selectionStart, - selectionEnd, - key, - metaKey, - updateQuery, - preventDefault, - }); + switch (event.keyCode) { + case KEY_CODES.DOWN: + event.preventDefault(); + if (isSuggestionsVisible) { + this.incrementIndex(index); + } else { + this.setState({ isSuggestionsVisible: true, index: 0 }); + } + break; + case KEY_CODES.UP: + event.preventDefault(); + if (isSuggestionsVisible) { + this.decrementIndex(index); + } + break; + case KEY_CODES.ENTER: + event.preventDefault(); + if (isSuggestionsVisible && this.state.suggestions[index]) { + this.selectSuggestion(this.state.suggestions[index]); + } else { + this.setState({ isSuggestionsVisible: false }); + this.props.onSubmit(value); + } + break; + case KEY_CODES.ESC: + event.preventDefault(); + this.setState({ isSuggestionsVisible: false }); + break; + case KEY_CODES.TAB: + this.setState({ isSuggestionsVisible: false }); + break; + default: + matchPairs({ + value, + selectionStart, + selectionEnd, + key, + metaKey, + updateQuery, + preventDefault, + }); + break; + } }; onSubmit = (event) => { @@ -94,65 +273,110 @@ export class QueryBar extends Component { query: fromUser(this.state.query.query), language: this.state.query.language, }); + this.setState({ isSuggestionsVisible: false }); }; - componentWillReceiveProps(nextProps) { - if (nextProps.query.query !== this.props.query.query) { - this.setState({ + componentDidMount() { + this.persistedLog = new PersistedLog(`typeahead:${this.props.appName}-${this.state.query.language}`, { + maxLength: config.get('history:limit'), + filterDuplicates: true, + }); + this.updateSuggestions(); + } + + static getDerivedStateFromProps(nextProps, prevState) { + if (nextProps.query.query !== prevState.query.query) { + return { query: { query: toUser(nextProps.query.query), language: nextProps.query.language, }, - }); + }; } - else if (nextProps.query.language !== this.props.query.language) { - this.setState({ + else if (nextProps.query.language !== prevState.query.language) { + return { query: { query: '', language: nextProps.query.language, }, + }; + } + + return null; + } + + componentDidUpdate(prevProps) { + if (prevProps.query.language !== this.props.query.language) { + this.persistedLog = new PersistedLog(`typeahead:${this.props.appName}-${this.state.query.language}`, { + maxLength: config.get('history:limit'), + filterDuplicates: true, }); + this.updateSuggestions(); } } + // TODO when component unmounts cancel the getSuggestions debounce + render() { return ( - -
-
- - - -
- { - this.props.onSubmit({ - query: '', - language: language, - }); +
+
+ + + { + if (node) { + this.inputRef = node; + } }} + autoComplete="off" + spellCheck={false} /> -
- - +
+ { + this.props.onSubmit({ + query: '', + language: language, + }); + }} + /> +
+ + +
-
- + + + + ); } } @@ -165,4 +389,6 @@ QueryBar.propTypes = { }), onSubmit: PropTypes.func, disableAutoFocus: PropTypes.bool, + appName: PropTypes.string, + indexPatterns: PropTypes.array, }; diff --git a/src/ui/public/query_bar/react/typeahead/click_outside.js b/src/ui/public/query_bar/react/typeahead/click_outside.js new file mode 100644 index 0000000000000..87ade537a1106 --- /dev/null +++ b/src/ui/public/query_bar/react/typeahead/click_outside.js @@ -0,0 +1,54 @@ +/* + * 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 } from 'react'; +import PropTypes from 'prop-types'; + +export class ClickOutside extends Component { + componentDidMount() { + document.addEventListener('mousedown', this.onClick); + } + + componentWillUnmount() { + document.removeEventListener('mousedown', this.onClick); + } + + setNodeRef = node => { + this.nodeRef = node; + }; + + onClick = event => { + if (this.nodeRef && !this.nodeRef.contains(event.target)) { + this.props.onClickOutside(); + } + }; + + render() { + const { ...restProps } = this.props; + return ( +
+ {this.props.children} +
+ ); + } +} + +ClickOutside.propTypes = { + onClickOutside: PropTypes.func.isRequired +}; diff --git a/src/ui/public/query_bar/react/typeahead/suggestion.js b/src/ui/public/query_bar/react/typeahead/suggestion.js new file mode 100644 index 0000000000000..466c29e3e75d1 --- /dev/null +++ b/src/ui/public/query_bar/react/typeahead/suggestion.js @@ -0,0 +1,141 @@ +/* + * 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 PropTypes from 'prop-types'; +import styled from 'styled-components'; +import { EuiIcon } from '@elastic/eui'; +import { + colors, + fontFamilyCode, + px, + units, + fontSizes, + unit +} from '../../../../../../x-pack/plugins/apm/public/style/variables'; +import { tint } from 'polished'; + +function getIconColor(type) { + switch (type) { + case 'field': + return colors.apmOrange; + case 'value': + return colors.teal; + case 'operator': + return colors.apmBlue; + case 'conjunction': + return colors.apmPurple; + case 'recentSearch': + return colors.gray3; + } +} + +const Description = styled.div` + color: ${colors.gray2}; + + p { + display: inline; + + span { + font-family: ${fontFamilyCode}; + color: ${colors.black}; + padding: 0 ${px(units.quarter)}; + display: inline-block; + } + } +`; + +const ListItem = styled.li` + font-size: ${fontSizes.small}; + height: ${px(units.double)}; + align-items: center; + display: flex; + background: ${props => (props.selected ? colors.gray5 : 'initial')}; + cursor: pointer; + border-radius: ${px(units.quarter)}; + + ${Description} { + p span { + background: ${props => (props.selected ? colors.white : colors.gray5)}; + } + } +`; + +const Icon = styled.div` + flex: 0 0 ${px(units.double)}; + background: ${props => tint(0.1, getIconColor(props.type))}; + color: ${props => getIconColor(props.type)}; + width: 100%; + height: 100%; + text-align: center; + line-height: ${px(units.double)}; +`; + +const TextValue = styled.div` + flex: 0 0 ${px(unit * 16)}; + color: ${colors.black2}; + padding: 0 ${px(units.half)}; +`; + +function getEuiIconType(type) { + switch (type) { + case 'field': + return 'kqlField'; + case 'value': + return 'kqlValue'; + case 'recentSearch': + return 'search'; + case 'conjunction': + return 'kqlSelector'; + case 'operator': + return 'kqlOperand'; + default: + throw new Error('Unknown type', type); + } +} + +export function Suggestion(props) { + return ( + props.onClick(props.suggestion)} + onMouseEnter={props.onMouseEnter} + > + + + + {props.suggestion.text} + + + ); +} + +Suggestion.propTypes = { + onClick: PropTypes.func.isRequired, + onMouseEnter: PropTypes.func.isRequired, + selected: PropTypes.bool, + suggestion: PropTypes.object.isRequired, + innerRef: PropTypes.func.isRequired +}; + diff --git a/src/ui/public/query_bar/react/typeahead/suggestions.js b/src/ui/public/query_bar/react/typeahead/suggestions.js new file mode 100644 index 0000000000000..3ed579995c751 --- /dev/null +++ b/src/ui/public/query_bar/react/typeahead/suggestions.js @@ -0,0 +1,100 @@ +/* + * 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 } from 'react'; +import PropTypes from 'prop-types'; +import styled from 'styled-components'; +import { isEmpty } from 'lodash'; +import { Suggestion } from './suggestion'; +import { units, colors, px, unit } from '../../../../../../x-pack/plugins/apm/public/style/variables'; +import { rgba } from 'polished'; + +const List = styled.ul` + width: 100%; + border: 1px solid ${colors.gray4}; + border-radius: ${px(units.quarter)}; + box-shadow: 0px ${px(units.quarter)} ${px(units.double)} + ${rgba(colors.black, 0.1)}; + position: absolute; + background: #fff; + z-index: 10; + left: 0; + max-height: ${px(unit * 20)}; + overflow: scroll; +`; + +export class Suggestions extends Component { + childNodes = []; + + scrollIntoView = () => { + const parent = this.parentNode; + const child = this.childNodes[this.props.index]; + + if (this.props.index == null || !parent || !child) { + return; + } + + const scrollTop = Math.max( + Math.min(parent.scrollTop, child.offsetTop), + child.offsetTop + child.offsetHeight - parent.offsetHeight + ); + + parent.scrollTop = scrollTop; + }; + + componentDidUpdate(prevProps) { + if (prevProps.index !== this.props.index) { + this.scrollIntoView(); + } + } + + render() { + if (!this.props.show || isEmpty(this.props.suggestions)) { + return null; + } + + const suggestions = this.props.suggestions.map((suggestion, index) => { + const key = suggestion + '_' + index; + return ( + (this.childNodes[index] = node)} + selected={index === this.props.index} + suggestion={suggestion} + onClick={this.props.onClick} + onMouseEnter={() => this.props.onMouseEnter(index)} + key={key} + /> + ); + }); + + return ( + (this.parentNode = node)}>{suggestions} + ); + } +} + +Suggestions.propTypes = { + index: PropTypes.number, + onClick: PropTypes.func.isRequired, + onMouseEnter: PropTypes.func.isRequired, + show: PropTypes.bool, + suggestions: PropTypes.array.isRequired +}; From 5b5729b86c1e8cfb9c46d091fa66e77b2772fc42 Mon Sep 17 00:00:00 2001 From: Matthew Bargar Date: Wed, 19 Sep 2018 15:20:23 -0400 Subject: [PATCH 12/54] switch to EUI implementation of detect outside click utility --- .../kibana/public/discover/index.html | 14 +-- src/ui/public/query_bar/react/query_bar.js | 113 +++++++++--------- .../react/typeahead/click_outside.js | 54 --------- .../query_bar/react/typeahead/suggestions.js | 3 + 4 files changed, 69 insertions(+), 115 deletions(-) delete mode 100644 src/ui/public/query_bar/react/typeahead/click_outside.js diff --git a/src/core_plugins/kibana/public/discover/index.html b/src/core_plugins/kibana/public/discover/index.html index 6f1bb1c879de5..36a675f6d429e 100644 --- a/src/core_plugins/kibana/public/discover/index.html +++ b/src/core_plugins/kibana/public/discover/index.html @@ -24,13 +24,13 @@

- - + + + + + + + { + onOutsideClick = () => { this.setState({ isSuggestionsVisible: false }); }; @@ -319,64 +320,68 @@ export class QueryBar extends Component { render() { return ( - -
-
-
- - - { - if (node) { - this.inputRef = node; - } - }} - autoComplete="off" - spellCheck={false} - /> -
- { - this.props.onSubmit({ - query: '', - language: language, - }); +
+
+ + + { + if (node) { + this.inputRef = node; + } }} + autoComplete="off" + spellCheck={false} /> -
- - +
+ { + this.props.onSubmit({ + query: '', + language: language, + }); + }} + /> +
+ + +
-
- - - - + + + +
+ ); } } diff --git a/src/ui/public/query_bar/react/typeahead/click_outside.js b/src/ui/public/query_bar/react/typeahead/click_outside.js deleted file mode 100644 index 87ade537a1106..0000000000000 --- a/src/ui/public/query_bar/react/typeahead/click_outside.js +++ /dev/null @@ -1,54 +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 } from 'react'; -import PropTypes from 'prop-types'; - -export class ClickOutside extends Component { - componentDidMount() { - document.addEventListener('mousedown', this.onClick); - } - - componentWillUnmount() { - document.removeEventListener('mousedown', this.onClick); - } - - setNodeRef = node => { - this.nodeRef = node; - }; - - onClick = event => { - if (this.nodeRef && !this.nodeRef.contains(event.target)) { - this.props.onClickOutside(); - } - }; - - render() { - const { ...restProps } = this.props; - return ( -
- {this.props.children} -
- ); - } -} - -ClickOutside.propTypes = { - onClickOutside: PropTypes.func.isRequired -}; diff --git a/src/ui/public/query_bar/react/typeahead/suggestions.js b/src/ui/public/query_bar/react/typeahead/suggestions.js index 3ed579995c751..c07ff389049a1 100644 --- a/src/ui/public/query_bar/react/typeahead/suggestions.js +++ b/src/ui/public/query_bar/react/typeahead/suggestions.js @@ -27,6 +27,9 @@ import { Suggestion } from './suggestion'; import { units, colors, px, unit } from '../../../../../../x-pack/plugins/apm/public/style/variables'; import { rgba } from 'polished'; + +// TODO get rid of styled usage? + const List = styled.ul` width: 100%; border: 1px solid ${colors.gray4}; From 5afa703fc4fef696c777f2361effb9e08037c6d8 Mon Sep 17 00:00:00 2001 From: Matthew Bargar Date: Wed, 19 Sep 2018 15:27:28 -0400 Subject: [PATCH 13/54] fix disappearing query on submit --- src/ui/public/query_bar/react/query_bar.js | 7 ++----- 1 file changed, 2 insertions(+), 5 deletions(-) diff --git a/src/ui/public/query_bar/react/query_bar.js b/src/ui/public/query_bar/react/query_bar.js index c30aa0177b4f8..1f7cf40782002 100644 --- a/src/ui/public/query_bar/react/query_bar.js +++ b/src/ui/public/query_bar/react/query_bar.js @@ -38,8 +38,7 @@ import { /* TODO: recent search suggestions don't seem to be working -TODO: query disappears when I hit enter and language reverts to lucene -TODO: might be related to ^^, suggestions component throws up when given an object (query dsl) +TODO: suggestions component throws up when given an object (query dsl) TODO: styling TODO: refactoring */ @@ -243,8 +242,7 @@ export class QueryBar extends Component { if (isSuggestionsVisible && this.state.suggestions[index]) { this.selectSuggestion(this.state.suggestions[index]); } else { - this.setState({ isSuggestionsVisible: false }); - this.props.onSubmit(value); + this.onSubmit(event); } break; case KEY_CODES.ESC: @@ -330,7 +328,6 @@ export class QueryBar extends Component {
From 12ddf8f7d0097143ab981c57f146f6fb322ca4a8 Mon Sep 17 00:00:00 2001 From: Matthew Bargar Date: Wed, 19 Sep 2018 15:37:10 -0400 Subject: [PATCH 14/54] fix recent search suggestions --- src/ui/public/query_bar/react/query_bar.js | 3 ++- 1 file changed, 2 insertions(+), 1 deletion(-) diff --git a/src/ui/public/query_bar/react/query_bar.js b/src/ui/public/query_bar/react/query_bar.js index 1f7cf40782002..8b6cdc95afbfe 100644 --- a/src/ui/public/query_bar/react/query_bar.js +++ b/src/ui/public/query_bar/react/query_bar.js @@ -37,7 +37,6 @@ import { } from '@elastic/eui'; /* -TODO: recent search suggestions don't seem to be working TODO: suggestions component throws up when given an object (query dsl) TODO: styling TODO: refactoring @@ -268,6 +267,8 @@ export class QueryBar extends Component { onSubmit = (event) => { event.preventDefault(); + this.persistedLog.add(this.state.query.query); + this.props.onSubmit({ query: fromUser(this.state.query.query), language: this.state.query.language, From ba312b9fb013e156690ba2fc31aac0a92691d9ee Mon Sep 17 00:00:00 2001 From: Matthew Bargar Date: Wed, 19 Sep 2018 15:37:46 -0400 Subject: [PATCH 15/54] I think I fixed this one with the last fix --- src/ui/public/query_bar/react/query_bar.js | 1 - 1 file changed, 1 deletion(-) diff --git a/src/ui/public/query_bar/react/query_bar.js b/src/ui/public/query_bar/react/query_bar.js index 8b6cdc95afbfe..32ed6244340b2 100644 --- a/src/ui/public/query_bar/react/query_bar.js +++ b/src/ui/public/query_bar/react/query_bar.js @@ -37,7 +37,6 @@ import { } from '@elastic/eui'; /* -TODO: suggestions component throws up when given an object (query dsl) TODO: styling TODO: refactoring */ From 55082d0ed89bc445a6aac44e5a0a33bac37eaec9 Mon Sep 17 00:00:00 2001 From: Matthew Bargar Date: Wed, 19 Sep 2018 15:53:38 -0400 Subject: [PATCH 16/54] Improved suggestion selection behavior --- src/ui/public/query_bar/react/query_bar.js | 53 ++++++++++------------ 1 file changed, 25 insertions(+), 28 deletions(-) diff --git a/src/ui/public/query_bar/react/query_bar.js b/src/ui/public/query_bar/react/query_bar.js index 32ed6244340b2..554c1b44a1477 100644 --- a/src/ui/public/query_bar/react/query_bar.js +++ b/src/ui/public/query_bar/react/query_bar.js @@ -117,23 +117,27 @@ export class QueryBar extends Component { return [...suggestions, ...recentSearchSuggestions]; }; - // TODO do I need this since I took the selectSuggestion method from APM? - // - // onSuggestionSelect = ({ type, text, start, end }) => { - // const { query } = this.localQuery; - // const inputEl = this.inputRef; - // const { selectionStart, selectionEnd } = inputEl; - // const value = query.substr(0, selectionStart) + query.substr(selectionEnd); - // - // this.localQuery.query = inputEl.value = value.substr(0, start) + text + value.substr(end); - // inputEl.setSelectionRange(start + text.length, start + text.length); - // - // if (type === 'recentSearch') { - // this.submit(); - // } else { - // this.updateSuggestions(); - // } - // }; + selectSuggestion = ({ type, text, start, end }) => { + const query = this.state.query.query; + const { selectionStart, selectionEnd } = this.inputRef; + const value = query.substr(0, selectionStart) + query.substr(selectionEnd); + + this.setState({ + query: { + ...this.state.query, + query: value.substr(0, start) + text + value.substr(end), + }, + index: null, + }, () => { + this.inputRef.setSelectionRange(start + text.length, start + text.length); + + if (type === 'recentSearch') { + this.onSubmit(); + } else { + this.updateSuggestions(); + } + }); + }; getRecentSearchSuggestions = (query) => { if (!this.persistedLog) return []; @@ -150,16 +154,6 @@ export class QueryBar extends Component { }); }; - selectSuggestion = (suggestion) => { - const nextInputValue = - this.state.query.query.substr(0, suggestion.start) + - suggestion.text + - this.state.query.query.substr(suggestion.end); - - this.setState({ query: { ...this.state.query, query: nextInputValue }, index: null }); - this.updateSuggestions(); - }; - onOutsideClick = () => { this.setState({ isSuggestionsVisible: false }); }; @@ -265,7 +259,10 @@ export class QueryBar extends Component { }; onSubmit = (event) => { - event.preventDefault(); + if (event) { + event.preventDefault(); + } + this.persistedLog.add(this.state.query.query); this.props.onSubmit({ From 15de8191ce74a43bdc096e797cff89c1005f6d6e Mon Sep 17 00:00:00 2001 From: Matthew Bargar Date: Wed, 19 Sep 2018 16:07:50 -0400 Subject: [PATCH 17/54] cancel debounced function when component is going to unmount --- src/ui/public/query_bar/react/query_bar.js | 9 +++++++-- 1 file changed, 7 insertions(+), 2 deletions(-) diff --git a/src/ui/public/query_bar/react/query_bar.js b/src/ui/public/query_bar/react/query_bar.js index 554c1b44a1477..893255d25a8ed 100644 --- a/src/ui/public/query_bar/react/query_bar.js +++ b/src/ui/public/query_bar/react/query_bar.js @@ -99,7 +99,9 @@ export class QueryBar extends Component { updateSuggestions = debounce(async () => { const suggestions = await this.getSuggestions(); - this.setState({ suggestions }); + if (!this.componentIsUnmounting) { + this.setState({ suggestions }); + } }, 100); getSuggestions = async () => { @@ -311,7 +313,10 @@ export class QueryBar extends Component { } } - // TODO when component unmounts cancel the getSuggestions debounce + componentWillUnmount() { + this.updateSuggestions.cancel(); + this.componentIsUnmounting = true; + } render() { return ( From 0acdb63a000144d475779cb9587f3a5cbf3f9ab5 Mon Sep 17 00:00:00 2001 From: Matthew Bargar Date: Mon, 1 Oct 2018 15:02:44 -0400 Subject: [PATCH 18/54] removed styled-components usage, typeahead is functional but still needs some style cleanup --- .../query_bar/react/typeahead/suggestion.js | 102 ++--------- .../query_bar/react/typeahead/suggestion.less | 163 ++++++++++++++++++ .../query_bar/react/typeahead/suggestions.js | 31 +--- 3 files changed, 189 insertions(+), 107 deletions(-) create mode 100644 src/ui/public/query_bar/react/typeahead/suggestion.less diff --git a/src/ui/public/query_bar/react/typeahead/suggestion.js b/src/ui/public/query_bar/react/typeahead/suggestion.js index 466c29e3e75d1..70264e430ab80 100644 --- a/src/ui/public/query_bar/react/typeahead/suggestion.js +++ b/src/ui/public/query_bar/react/typeahead/suggestion.js @@ -17,83 +17,9 @@ * under the License. */ - - import React from 'react'; import PropTypes from 'prop-types'; -import styled from 'styled-components'; import { EuiIcon } from '@elastic/eui'; -import { - colors, - fontFamilyCode, - px, - units, - fontSizes, - unit -} from '../../../../../../x-pack/plugins/apm/public/style/variables'; -import { tint } from 'polished'; - -function getIconColor(type) { - switch (type) { - case 'field': - return colors.apmOrange; - case 'value': - return colors.teal; - case 'operator': - return colors.apmBlue; - case 'conjunction': - return colors.apmPurple; - case 'recentSearch': - return colors.gray3; - } -} - -const Description = styled.div` - color: ${colors.gray2}; - - p { - display: inline; - - span { - font-family: ${fontFamilyCode}; - color: ${colors.black}; - padding: 0 ${px(units.quarter)}; - display: inline-block; - } - } -`; - -const ListItem = styled.li` - font-size: ${fontSizes.small}; - height: ${px(units.double)}; - align-items: center; - display: flex; - background: ${props => (props.selected ? colors.gray5 : 'initial')}; - cursor: pointer; - border-radius: ${px(units.quarter)}; - - ${Description} { - p span { - background: ${props => (props.selected ? colors.white : colors.gray5)}; - } - } -`; - -const Icon = styled.div` - flex: 0 0 ${px(units.double)}; - background: ${props => tint(0.1, getIconColor(props.type))}; - color: ${props => getIconColor(props.type)}; - width: 100%; - height: 100%; - text-align: center; - line-height: ${px(units.double)}; -`; - -const TextValue = styled.div` - flex: 0 0 ${px(unit * 16)}; - color: ${colors.black2}; - padding: 0 ${px(units.half)}; -`; function getEuiIconType(type) { switch (type) { @@ -114,28 +40,34 @@ function getEuiIconType(type) { export function Suggestion(props) { return ( - props.onClick(props.suggestion)} onMouseEnter={props.onMouseEnter} > - - - - {props.suggestion.text} - - +
+
+ +
+
{props.suggestion.text}
+
+
+
); } + Suggestion.propTypes = { onClick: PropTypes.func.isRequired, onMouseEnter: PropTypes.func.isRequired, selected: PropTypes.bool, suggestion: PropTypes.object.isRequired, - innerRef: PropTypes.func.isRequired }; diff --git a/src/ui/public/query_bar/react/typeahead/suggestion.less b/src/ui/public/query_bar/react/typeahead/suggestion.less new file mode 100644 index 0000000000000..55837a3d6c78b --- /dev/null +++ b/src/ui/public/query_bar/react/typeahead/suggestion.less @@ -0,0 +1,163 @@ +@import (reference) "~ui/styles/variables"; + + +// TODO An override of an override, ugh. We should be able to clean up this mess once the angular version +// of the query bar and typeahead are deleted. +.reactSuggestionTypeahead { + + .suggestionItem { + display: flex; + align-items: stretch; + flex-grow: 1; + align-items: center; + font-size: 13px; + white-space: nowrap; + } + + .suggestionItem__text, .suggestionItem__type, .suggestionItem__description { + flex-grow: 1; + flex-basis: 0%; + display: flex; + flex-direction: column; + } + + .suggestionItem__type { + flex-grow: 0; + flex-basis: auto; + width: 32px; + height: 32px; + text-align: center; + overflow: hidden; + padding: 4px; + } + + &.suggestionItem--field { + .suggestionItem__type { + background-color: tint(@globalColorOrange, 90%); + color: @globalColorOrange; + } + } + + &.suggestionItem--value { + .suggestionItem__type { + background-color: tint(@globalColorTeal, 90%); + color: @globalColorTeal; + } + + .suggestionItem__text { + width: auto; + } + } + + &.suggestionItem--operator { + .suggestionItem__type { + background-color: tint(@globalColorBlue, 90%); + color: @globalColorBlue; + } + } + + &.suggestionItem--conjunction { + .suggestionItem__type { + background-color: tint(@globalColorPurple, 90%); + color: @globalColorPurple; + } + } + + &.suggestionItem--recentSearch { + .suggestionItem__type { + background-color: @globalColorLightGray; + color: @globalColorMediumGray; + } + + .suggestionItem__text { + width: auto; + } + } + + .suggestionItem__text { + flex-grow: 0; /* 2 */ + flex-basis: auto; /* 2 */ + font-family: "SFMono-Regular", Consolas, "Liberation Mono", Menlo, Courier, monospace; + margin-right: 32px; + width: 250px; + overflow: hidden; + text-overflow: ellipsis; + padding: 4px 8px; + color: #111; + } + + .suggestionItem__description { + color: @globalColorDarkGray; + overflow: hidden; + text-overflow: ellipsis; + } + + .suggestionItem__callout { + font-family: "SFMono-Regular", Consolas, "Liberation Mono", Menlo, Courier, monospace; + background: @globalColorLightestGray; + color: #000; + padding: 0 4px; + display: inline-block; + } + + .typeahead { + .typeahead-popover { + top: -10px; + + .typeahead-items { + max-height: 60vh; + overflow-y: auto; + + .typeahead-item { + padding: 0; + border-bottom: none; + line-height: normal; + + &:hover { + cursor: pointer; + } + + &.active { + background-color: @globalColorLightestGray; + + .suggestionItem__callout { + background: #fff; + } + + .suggestionItem__text { + color: #000; + } + + .suggestionItem__type { + color: #000; + } + + .suggestionItem--field { + .suggestionItem__type { + background-color: tint(@globalColorOrange, 80%); + } + } + + .suggestionItem--value { + .suggestionItem__type { + background-color: tint(@globalColorTeal, 80%); + } + } + + .suggestionItem--operator { + .suggestionItem__type { + background-color: tint(@globalColorBlue, 80%); + } + } + + .suggestionItem--conjunction { + .suggestionItem__type { + background-color: tint(@globalColorPurple, 80%); + } + } + } + } + } + } + } +} diff --git a/src/ui/public/query_bar/react/typeahead/suggestions.js b/src/ui/public/query_bar/react/typeahead/suggestions.js index c07ff389049a1..c4b96151e811e 100644 --- a/src/ui/public/query_bar/react/typeahead/suggestions.js +++ b/src/ui/public/query_bar/react/typeahead/suggestions.js @@ -21,28 +21,9 @@ import React, { Component } from 'react'; import PropTypes from 'prop-types'; -import styled from 'styled-components'; import { isEmpty } from 'lodash'; import { Suggestion } from './suggestion'; -import { units, colors, px, unit } from '../../../../../../x-pack/plugins/apm/public/style/variables'; -import { rgba } from 'polished'; - - -// TODO get rid of styled usage? - -const List = styled.ul` - width: 100%; - border: 1px solid ${colors.gray4}; - border-radius: ${px(units.quarter)}; - box-shadow: 0px ${px(units.quarter)} ${px(units.double)} - ${rgba(colors.black, 0.1)}; - position: absolute; - background: #fff; - z-index: 10; - left: 0; - max-height: ${px(unit * 20)}; - overflow: scroll; -`; +import './suggestion.less'; export class Suggestions extends Component { childNodes = []; @@ -78,7 +59,7 @@ export class Suggestions extends Component { const key = suggestion + '_' + index; return ( (this.childNodes[index] = node)} + ref={node => (this.childNodes[index] = node)} selected={index === this.props.index} suggestion={suggestion} onClick={this.props.onClick} @@ -89,7 +70,13 @@ export class Suggestions extends Component { }); return ( - (this.parentNode = node)}>{suggestions} +
+
+
+
(this.parentNode = node)}>{suggestions}
+
+
+
); } } From 2987fc77c702819a5c3a7f52d96a7f59ea77de7a Mon Sep 17 00:00:00 2001 From: Matthew Bargar Date: Mon, 1 Oct 2018 17:50:43 -0400 Subject: [PATCH 19/54] style fixes --- src/ui/public/query_bar/react/query_bar.js | 59 +++++++++---------- .../query_bar/react/typeahead/suggestion.js | 7 ++- .../query_bar/react/typeahead/suggestion.less | 2 + 3 files changed, 34 insertions(+), 34 deletions(-) diff --git a/src/ui/public/query_bar/react/query_bar.js b/src/ui/public/query_bar/react/query_bar.js index 893255d25a8ed..e795ca6b678dd 100644 --- a/src/ui/public/query_bar/react/query_bar.js +++ b/src/ui/public/query_bar/react/query_bar.js @@ -30,8 +30,6 @@ import { chrome } from '../../chrome/chrome'; import { debounce } from 'lodash'; import { - EuiFlexGroup, - EuiFlexItem, EuiFieldText, EuiOutsideClickDetector, } from '@elastic/eui'; @@ -338,36 +336,33 @@ export class QueryBar extends Component { role="search" >
- - - { - if (node) { - this.inputRef = node; - } - }} - autoComplete="off" - spellCheck={false} - /> -
- { - this.props.onSubmit({ - query: '', - language: language, - }); - }} - /> -
- - + { + if (node) { + this.inputRef = node; + } + }} + autoComplete="off" + spellCheck={false} + icon="console" + /> +
+ { + this.props.onSubmit({ + query: '', + language: language, + }); + }} + /> +
diff --git a/src/ui/public/query_bar/react/typeahead/suggestion.js b/src/ui/public/query_bar/react/typeahead/suggestion.js index 70264e430ab80..1402f1bfde5c9 100644 --- a/src/ui/public/query_bar/react/typeahead/suggestion.js +++ b/src/ui/public/query_bar/react/typeahead/suggestion.js @@ -20,6 +20,7 @@ import React from 'react'; import PropTypes from 'prop-types'; import { EuiIcon } from '@elastic/eui'; +import classNames from 'classnames'; function getEuiIconType(type) { switch (type) { @@ -41,8 +42,10 @@ function getEuiIconType(type) { export function Suggestion(props) { return (
props.onClick(props.suggestion)} onMouseEnter={props.onMouseEnter} > diff --git a/src/ui/public/query_bar/react/typeahead/suggestion.less b/src/ui/public/query_bar/react/typeahead/suggestion.less index 55837a3d6c78b..1e142fb483933 100644 --- a/src/ui/public/query_bar/react/typeahead/suggestion.less +++ b/src/ui/public/query_bar/react/typeahead/suggestion.less @@ -29,6 +29,8 @@ text-align: center; overflow: hidden; padding: 4px; + justify-content: center; + align-items: center; } &.suggestionItem--field { From edb38d4f9d42593b001f886cd820a60cb4001a68 Mon Sep 17 00:00:00 2001 From: Matthew Bargar Date: Tue, 2 Oct 2018 11:47:58 -0400 Subject: [PATCH 20/54] Get scrollIntoView working --- src/ui/public/query_bar/react/typeahead/suggestion.js | 2 ++ src/ui/public/query_bar/react/typeahead/suggestions.js | 2 +- 2 files changed, 3 insertions(+), 1 deletion(-) diff --git a/src/ui/public/query_bar/react/typeahead/suggestion.js b/src/ui/public/query_bar/react/typeahead/suggestion.js index 1402f1bfde5c9..d4cdb505e84d3 100644 --- a/src/ui/public/query_bar/react/typeahead/suggestion.js +++ b/src/ui/public/query_bar/react/typeahead/suggestion.js @@ -48,6 +48,7 @@ export function Suggestion(props) { })} onClick={() => props.onClick(props.suggestion)} onMouseEnter={props.onMouseEnter} + ref={props.innerRef} >
@@ -72,5 +73,6 @@ Suggestion.propTypes = { onMouseEnter: PropTypes.func.isRequired, selected: PropTypes.bool, suggestion: PropTypes.object.isRequired, + innerRef: PropTypes.func.isRequired, }; diff --git a/src/ui/public/query_bar/react/typeahead/suggestions.js b/src/ui/public/query_bar/react/typeahead/suggestions.js index c4b96151e811e..56e0f98ef458e 100644 --- a/src/ui/public/query_bar/react/typeahead/suggestions.js +++ b/src/ui/public/query_bar/react/typeahead/suggestions.js @@ -59,7 +59,7 @@ export class Suggestions extends Component { const key = suggestion + '_' + index; return ( (this.childNodes[index] = node)} + innerRef={node => (this.childNodes[index] = node)} selected={index === this.props.index} suggestion={suggestion} onClick={this.props.onClick} From 2ecdfe0d61221e9c1642cac552e0c014e4eafb62 Mon Sep 17 00:00:00 2001 From: Matthew Bargar Date: Tue, 2 Oct 2018 12:32:03 -0400 Subject: [PATCH 21/54] reimplement autocomplete accessibility that worked in angular --- src/ui/public/query_bar/react/query_bar.js | 13 ++++++++++++- .../public/query_bar/react/typeahead/suggestion.js | 3 +++ .../public/query_bar/react/typeahead/suggestions.js | 12 +++++++++--- 3 files changed, 24 insertions(+), 4 deletions(-) diff --git a/src/ui/public/query_bar/react/query_bar.js b/src/ui/public/query_bar/react/query_bar.js index e795ca6b678dd..44f2900b64c3a 100644 --- a/src/ui/public/query_bar/react/query_bar.js +++ b/src/ui/public/query_bar/react/query_bar.js @@ -324,6 +324,10 @@ export class QueryBar extends Component { {/* position:relative required on container so the suggestions appear under the query bar*/}
props.onClick(props.suggestion)} onMouseEnter={props.onMouseEnter} ref={props.innerRef} + id={props.ariaId} >
@@ -74,5 +76,6 @@ Suggestion.propTypes = { selected: PropTypes.bool, suggestion: PropTypes.object.isRequired, innerRef: PropTypes.func.isRequired, + ariaId: PropTypes.string.isRequired, }; diff --git a/src/ui/public/query_bar/react/typeahead/suggestions.js b/src/ui/public/query_bar/react/typeahead/suggestions.js index 56e0f98ef458e..39038ea59c037 100644 --- a/src/ui/public/query_bar/react/typeahead/suggestions.js +++ b/src/ui/public/query_bar/react/typeahead/suggestions.js @@ -56,7 +56,6 @@ export class Suggestions extends Component { } const suggestions = this.props.suggestions.map((suggestion, index) => { - const key = suggestion + '_' + index; return ( (this.childNodes[index] = node)} @@ -64,7 +63,7 @@ export class Suggestions extends Component { suggestion={suggestion} onClick={this.props.onClick} onMouseEnter={() => this.props.onMouseEnter(index)} - key={key} + ariaId={'suggestion-' + index} /> ); }); @@ -73,7 +72,14 @@ export class Suggestions extends Component {
-
(this.parentNode = node)}>{suggestions}
+
(this.parentNode = node)} + > + {suggestions} +
From 8ba6c52fced53d4eb2d86671db04d545ef140157 Mon Sep 17 00:00:00 2001 From: Matthew Bargar Date: Tue, 2 Oct 2018 12:44:21 -0400 Subject: [PATCH 22/54] add react query bar to visualize --- src/core_plugins/kibana/public/discover/index.html | 7 ------- .../kibana/public/visualize/editor/editor.html | 9 ++++----- 2 files changed, 4 insertions(+), 12 deletions(-) diff --git a/src/core_plugins/kibana/public/discover/index.html b/src/core_plugins/kibana/public/discover/index.html index 36a675f6d429e..50e373c5083f5 100644 --- a/src/core_plugins/kibana/public/discover/index.html +++ b/src/core_plugins/kibana/public/discover/index.html @@ -24,13 +24,6 @@

- - - - - - -
- - + index-patterns="[indexPatter]" + >

From 274064189ac4290c2bd7793eb156b33361171229 Mon Sep 17 00:00:00 2001 From: Matthew Bargar Date: Tue, 2 Oct 2018 12:50:57 -0400 Subject: [PATCH 23/54] add to dashboard --- .../kibana/public/dashboard/dashboard_app.html | 7 +++---- 1 file changed, 3 insertions(+), 4 deletions(-) diff --git a/src/core_plugins/kibana/public/dashboard/dashboard_app.html b/src/core_plugins/kibana/public/dashboard/dashboard_app.html index 66a2f65e47173..fb7b8fb29b9e0 100644 --- a/src/core_plugins/kibana/public/dashboard/dashboard_app.html +++ b/src/core_plugins/kibana/public/dashboard/dashboard_app.html @@ -25,13 +25,12 @@
- - + >
From a0ad28508704efa9e9de5b7776275b1e6c45e199 Mon Sep 17 00:00:00 2001 From: Matthew Bargar Date: Tue, 2 Oct 2018 13:14:43 -0400 Subject: [PATCH 24/54] implement opt in persistence --- src/ui/public/query_bar/react/index.js | 12 +++++++++++- src/ui/public/query_bar/react/language_switcher.js | 2 -- src/ui/public/query_bar/react/query_bar.js | 2 ++ 3 files changed, 13 insertions(+), 3 deletions(-) diff --git a/src/ui/public/query_bar/react/index.js b/src/ui/public/query_bar/react/index.js index 9b7b2d5e55cb0..ea5323b3b81c5 100644 --- a/src/ui/public/query_bar/react/index.js +++ b/src/ui/public/query_bar/react/index.js @@ -26,5 +26,15 @@ import { uiModules } from '../../modules'; const app = uiModules.get('app/kibana', ['react']); -app.directive('reactQueryBar', reactDirective => reactDirective(QueryBar)); +app.directive('reactQueryBar', (reactDirective, localStorage) => { + return reactDirective( + QueryBar, + undefined, + {}, + { + store: localStorage, + } + ); +}); + app.directive('queryPopover', reactDirective => reactDirective(QueryLanguageSwitcher)); diff --git a/src/ui/public/query_bar/react/language_switcher.js b/src/ui/public/query_bar/react/language_switcher.js index 342e945f801dd..8b0c23f4bf03e 100644 --- a/src/ui/public/query_bar/react/language_switcher.js +++ b/src/ui/public/query_bar/react/language_switcher.js @@ -56,8 +56,6 @@ export class QueryLanguageSwitcher extends Component { onSwitchChange = () => { const newLanguage = this.props.language === 'lucene' ? 'kuery' : 'lucene'; - // TODO implement this - //localStorage.set('kibana.userQueryLanguage', newLanguage); this.props.onSelectLanguage(newLanguage); }; diff --git a/src/ui/public/query_bar/react/query_bar.js b/src/ui/public/query_bar/react/query_bar.js index 44f2900b64c3a..2a021124eabec 100644 --- a/src/ui/public/query_bar/react/query_bar.js +++ b/src/ui/public/query_bar/react/query_bar.js @@ -367,6 +367,7 @@ export class QueryBar extends Component { { + this.props.store.set('kibana.userQueryLanguage', language); this.props.onSubmit({ query: '', language: language, @@ -401,4 +402,5 @@ QueryBar.propTypes = { disableAutoFocus: PropTypes.bool, appName: PropTypes.string, indexPatterns: PropTypes.array, + store: PropTypes.object, }; From 94870bfecdf047d390fb212b3df13301070b4937 Mon Sep 17 00:00:00 2001 From: Matthew Bargar Date: Tue, 2 Oct 2018 13:21:50 -0400 Subject: [PATCH 25/54] add key prop --- src/ui/public/query_bar/react/typeahead/suggestions.js | 1 + 1 file changed, 1 insertion(+) diff --git a/src/ui/public/query_bar/react/typeahead/suggestions.js b/src/ui/public/query_bar/react/typeahead/suggestions.js index 39038ea59c037..ec0b4f37c2ee4 100644 --- a/src/ui/public/query_bar/react/typeahead/suggestions.js +++ b/src/ui/public/query_bar/react/typeahead/suggestions.js @@ -64,6 +64,7 @@ export class Suggestions extends Component { onClick={this.props.onClick} onMouseEnter={() => this.props.onMouseEnter(index)} ariaId={'suggestion-' + index} + key={`${suggestion.type} - ${suggestion.text}`} /> ); }); From e131787496de7fed6128dcf0a911eaceef09394f Mon Sep 17 00:00:00 2001 From: Matthew Bargar Date: Tue, 2 Oct 2018 14:39:56 -0400 Subject: [PATCH 26/54] incremental loading --- src/ui/public/query_bar/react/query_bar.js | 11 ++++++++++- .../query_bar/react/typeahead/suggestions.js | 18 +++++++++++++++++- 2 files changed, 27 insertions(+), 2 deletions(-) diff --git a/src/ui/public/query_bar/react/query_bar.js b/src/ui/public/query_bar/react/query_bar.js index 2a021124eabec..0a9cd78c0fa1e 100644 --- a/src/ui/public/query_bar/react/query_bar.js +++ b/src/ui/public/query_bar/react/query_bar.js @@ -77,6 +77,13 @@ export class QueryBar extends Component { isSuggestionsVisible: false, index: null, suggestions: [], + suggestionLimit: 50, + }; + + increaseLimit = () => { + this.setState({ + suggestionLimit: this.state.suggestionLimit + 50, + }); }; incrementIndex = (currentIndex) => { @@ -185,6 +192,7 @@ export class QueryBar extends Component { inputIsPristine: false, isSuggestionsVisible: hasValue, index: null, + suggestionLimit: 50, }); }; @@ -381,10 +389,11 @@ export class QueryBar extends Component {
diff --git a/src/ui/public/query_bar/react/typeahead/suggestions.js b/src/ui/public/query_bar/react/typeahead/suggestions.js index ec0b4f37c2ee4..6a775901b6383 100644 --- a/src/ui/public/query_bar/react/typeahead/suggestions.js +++ b/src/ui/public/query_bar/react/typeahead/suggestions.js @@ -44,6 +44,20 @@ export class Suggestions extends Component { parent.scrollTop = scrollTop; }; + handleScroll = () => { + if (!this.props.loadMore) return; + + const position = this.parentNode.scrollTop + this.parentNode.offsetHeight; + const height = this.parentNode.scrollHeight; + const remaining = height - position; + const margin = 50; + + if (!height || !position) return; + if (remaining <= margin) { + this.props.loadMore(); + } + }; + componentDidUpdate(prevProps) { if (prevProps.index !== this.props.index) { this.scrollIntoView(); @@ -78,6 +92,7 @@ export class Suggestions extends Component { className="typeahead-items" role="listbox" ref={node => (this.parentNode = node)} + onScroll={this.handleScroll} > {suggestions}
@@ -93,5 +108,6 @@ Suggestions.propTypes = { onClick: PropTypes.func.isRequired, onMouseEnter: PropTypes.func.isRequired, show: PropTypes.bool, - suggestions: PropTypes.array.isRequired + suggestions: PropTypes.array.isRequired, + loadMore: PropTypes.func, }; From c9cef53036c0c2fb6908455666a43539d1092635 Mon Sep 17 00:00:00 2001 From: Matthew Bargar Date: Tue, 2 Oct 2018 15:38:31 -0400 Subject: [PATCH 27/54] delete query bar and typeahead --- .../kibana/public/dashboard/dashboard_app.js | 1 - src/ui/public/autoload/modules.js | 1 - .../directive/__tests__/query_bar.js | 110 --------- .../public/query_bar/directive/query_bar.html | 80 ------- .../public/query_bar/directive/query_bar.js | 154 ------------- .../query_bar/directive/suggestion.html | 23 -- .../query_bar/directive/suggestion.less | 155 ------------- src/ui/public/query_bar/index.js | 1 - .../query_bar/react/typeahead/suggestion.less | 164 +++++++------ .../public/typeahead/__tests__/typeahead.js | 218 ------------------ src/ui/public/typeahead/index.js | 20 -- src/ui/public/typeahead/typeahead.html | 40 ---- src/ui/public/typeahead/typeahead.js | 148 ------------ src/ui/public/typeahead/typeahead.less | 55 ----- src/ui/public/typeahead/typeahead_input.js | 49 ---- src/ui/public/typeahead/typeahead_item.js | 35 --- 16 files changed, 99 insertions(+), 1155 deletions(-) delete mode 100644 src/ui/public/query_bar/directive/__tests__/query_bar.js delete mode 100644 src/ui/public/query_bar/directive/query_bar.html delete mode 100644 src/ui/public/query_bar/directive/query_bar.js delete mode 100644 src/ui/public/query_bar/directive/suggestion.html delete mode 100644 src/ui/public/query_bar/directive/suggestion.less delete mode 100644 src/ui/public/typeahead/__tests__/typeahead.js delete mode 100644 src/ui/public/typeahead/index.js delete mode 100644 src/ui/public/typeahead/typeahead.html delete mode 100644 src/ui/public/typeahead/typeahead.js delete mode 100644 src/ui/public/typeahead/typeahead.less delete mode 100644 src/ui/public/typeahead/typeahead_input.js delete mode 100644 src/ui/public/typeahead/typeahead_item.js diff --git a/src/core_plugins/kibana/public/dashboard/dashboard_app.js b/src/core_plugins/kibana/public/dashboard/dashboard_app.js index 58cad9edd5440..b69fab6c43635 100644 --- a/src/core_plugins/kibana/public/dashboard/dashboard_app.js +++ b/src/core_plugins/kibana/public/dashboard/dashboard_app.js @@ -63,7 +63,6 @@ const app = uiModules.get('app/dashboard', [ 'react', 'kibana/courier', 'kibana/config', - 'kibana/typeahead', ]); app.directive('dashboardViewportProvider', function (reactDirective) { diff --git a/src/ui/public/autoload/modules.js b/src/ui/public/autoload/modules.js index e4058ec22a427..b5c111b2ffb09 100644 --- a/src/ui/public/autoload/modules.js +++ b/src/ui/public/autoload/modules.js @@ -47,7 +47,6 @@ import '../style_compile'; import '../timefilter'; import '../timepicker'; import '../tooltip'; -import '../typeahead'; import '../url'; import '../validate_date_interval'; import '../watch_multi'; diff --git a/src/ui/public/query_bar/directive/__tests__/query_bar.js b/src/ui/public/query_bar/directive/__tests__/query_bar.js deleted file mode 100644 index 66f2b0c0207a0..0000000000000 --- a/src/ui/public/query_bar/directive/__tests__/query_bar.js +++ /dev/null @@ -1,110 +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 angular from 'angular'; -import sinon from 'sinon'; -import expect from 'expect.js'; -import ngMock from 'ng_mock'; -import { expectDeepEqual } from '../../../../../test_utils/expect_deep_equal.js'; - -let $parentScope; -let $elem; - -const markup = ``; -const cleanup = []; - -function init(query, name) { - ngMock.module('kibana'); - - ngMock.inject(function ($injector, $controller, $rootScope, $compile) { - $parentScope = $rootScope; - - $parentScope.submitHandler = sinon.stub(); - $parentScope.name = name; - $parentScope.query = query; - $elem = angular.element(markup); - angular.element('body').append($elem); - cleanup.push(() => $elem.remove()); - - $compile($elem)($parentScope); - $elem.scope().$digest(); - }); -} - - -describe('queryBar directive', function () { - afterEach(() => { - cleanup.forEach(fn => fn()); - cleanup.length = 0; - }); - - describe('query string input', function () { - - it('should reflect the query passed into the directive', function () { - init({ query: 'foo', language: 'lucene' }, 'discover'); - const queryInput = $elem.find('.kuiLocalSearchInput'); - expect(queryInput.val()).to.be('foo'); - }); - - it('changes to the input text should not modify the parent scope\'s query', function () { - init({ query: 'foo', language: 'lucene' }, 'discover'); - const queryInput = $elem.find('.kuiLocalSearchInput'); - queryInput.val('bar').trigger('input'); - - expect($elem.isolateScope().queryBar.localQuery.query).to.be('bar'); - expect($parentScope.query.query).to.be('foo'); - }); - - it('should not call onSubmit until the form is submitted', function () { - init({ query: 'foo', language: 'lucene' }, 'discover'); - const queryInput = $elem.find('.kuiLocalSearchInput'); - queryInput.val('bar').trigger('input'); - expect($parentScope.submitHandler.notCalled).to.be(true); - - const submitButton = $elem.find('.kuiLocalSearchButton'); - submitButton.click(); - expect($parentScope.submitHandler.called).to.be(true); - }); - - it('should call onSubmit with the current input text when the form is submitted', function () { - init({ query: 'foo', language: 'lucene' }, 'discover'); - const queryInput = $elem.find('.kuiLocalSearchInput'); - queryInput.val('bar').trigger('input'); - const submitButton = $elem.find('.kuiLocalSearchButton'); - submitButton.click(); - expectDeepEqual($parentScope.submitHandler.getCall(0).args[0], { query: 'bar', language: 'lucene' }); - }); - - }); - - describe('typeahead key', function () { - - it('should use a unique typeahead key for each appName/language combo', function () { - init({ query: 'foo', language: 'lucene' }, 'discover'); - expect($elem.isolateScope().queryBar.persistedLog.name).to.be('typeahead:discover-lucene'); - - $parentScope.query = { query: 'foo', language: 'kuery' }; - $parentScope.$digest(); - expect($elem.isolateScope().queryBar.persistedLog.name).to.be('typeahead:discover-kuery'); - }); - - }); - - -}); diff --git a/src/ui/public/query_bar/directive/query_bar.html b/src/ui/public/query_bar/directive/query_bar.html deleted file mode 100644 index 55ed7964a2f69..0000000000000 --- a/src/ui/public/query_bar/directive/query_bar.html +++ /dev/null @@ -1,80 +0,0 @@ - - - - - diff --git a/src/ui/public/query_bar/directive/query_bar.js b/src/ui/public/query_bar/directive/query_bar.js deleted file mode 100644 index e594b39603e60..0000000000000 --- a/src/ui/public/query_bar/directive/query_bar.js +++ /dev/null @@ -1,154 +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 { compact } from 'lodash'; -import { uiModules } from '../../modules'; -import { callAfterBindingsWorkaround } from '../../compat'; -import template from './query_bar.html'; -import suggestionTemplate from './suggestion.html'; -import { getAutocompleteProvider } from '../../autocomplete_providers'; -import './suggestion.less'; -import { getFromLegacyIndexPattern } from '../../index_patterns/static_utils'; - -const module = uiModules.get('kibana'); - -module.directive('queryBar', function () { - - return { - restrict: 'E', - template: template, - scope: { - query: '=', - appName: '=?', - onSubmit: '&', - disableAutoFocus: '=', - indexPatterns: '=' - }, - controllerAs: 'queryBar', - bindToController: true, - - controller: callAfterBindingsWorkaround(function ($scope, $element, $http, $timeout, config, PersistedLog, indexPatterns, debounce) { - this.appName = this.appName || 'global'; - this.focusedTypeaheadItemID = ''; - - this.getIndexPatterns = () => { - if (compact(this.indexPatterns).length) return Promise.resolve(this.indexPatterns); - return Promise.all([indexPatterns.getDefault()]); - }; - - this.submit = () => { - if (this.localQuery.query) { - this.persistedLog.add(this.localQuery.query); - } - this.onSubmit({ $query: this.localQuery }); - this.suggestions = []; - }; - - this.selectLanguage = (language) => { - this.localQuery.language = language; - this.localQuery.query = ''; - this.submit(); - }; - - this.suggestionTemplate = suggestionTemplate; - - this.handleKeyDown = (event) => { - if (['ArrowLeft', 'ArrowRight', 'Home', 'End'].includes(event.key)) { - this.updateSuggestions(); - } - }; - - this.updateSuggestions = debounce(async () => { - const suggestions = await this.getSuggestions(); - if (!this._isScopeDestroyed) { - $scope.$apply(() => this.suggestions = suggestions); - } - }, 100); - - this.getSuggestions = async () => { - const { localQuery: { query, language } } = this; - const recentSearchSuggestions = this.getRecentSearchSuggestions(query); - - const autocompleteProvider = getAutocompleteProvider(language); - if (!autocompleteProvider) return recentSearchSuggestions; - - const legacyIndexPatterns = await this.getIndexPatterns(); - const indexPatterns = getFromLegacyIndexPattern(legacyIndexPatterns); - const getAutocompleteSuggestions = autocompleteProvider({ config, indexPatterns }); - - const { selectionStart, selectionEnd } = $element.find('input')[0]; - const suggestions = await getAutocompleteSuggestions({ query, selectionStart, selectionEnd }); - return [...suggestions, ...recentSearchSuggestions]; - }; - - // TODO: Figure out a better way to set selection - this.onSuggestionSelect = ({ type, text, start, end }) => { - const { query } = this.localQuery; - const inputEl = $element.find('input')[0]; - const { selectionStart, selectionEnd } = inputEl; - const value = query.substr(0, selectionStart) + query.substr(selectionEnd); - - this.localQuery.query = inputEl.value = value.substr(0, start) + text + value.substr(end); - inputEl.setSelectionRange(start + text.length, start + text.length); - - if (type === 'recentSearch') { - this.submit(); - } else { - this.updateSuggestions(); - } - }; - - this.getRecentSearchSuggestions = (query) => { - if (!this.persistedLog) return []; - const recentSearches = this.persistedLog.get(); - const matchingRecentSearches = recentSearches.filter(search => search.includes(query)); - return matchingRecentSearches.map(recentSearch => { - const text = recentSearch; - const start = 0; - const end = query.length; - return { type: 'recentSearch', text, start, end }; - }); - }; - - $scope.$watch('queryBar.localQuery.language', (language) => { - if (!language) return; - this.persistedLog = new PersistedLog(`typeahead:${this.appName}-${language}`, { - maxLength: config.get('history:limit'), - filterDuplicates: true - }); - this.updateSuggestions(); - }); - - $scope.$watch('queryBar.query', (newQuery) => { - this.localQuery = { - ...newQuery - }; - }, true); - - $scope.$watch('queryBar.indexPatterns', () => { - this.updateSuggestions(); - }); - - $scope.$on('$destroy', () => { - this.updateSuggestions.cancel(); - this._isScopeDestroyed = true; - }); - }) - }; -}); diff --git a/src/ui/public/query_bar/directive/suggestion.html b/src/ui/public/query_bar/directive/suggestion.html deleted file mode 100644 index a68ea51767b88..0000000000000 --- a/src/ui/public/query_bar/directive/suggestion.html +++ /dev/null @@ -1,23 +0,0 @@ -
-
-
-
- -
-
- -
-
- -
-
- -
-
- -
-
-
-
{{item.text}}
-
-
diff --git a/src/ui/public/query_bar/directive/suggestion.less b/src/ui/public/query_bar/directive/suggestion.less deleted file mode 100644 index 6af1af218b358..0000000000000 --- a/src/ui/public/query_bar/directive/suggestion.less +++ /dev/null @@ -1,155 +0,0 @@ -@import (reference) "~ui/styles/variables"; - -.suggestionItem { - display: flex; - align-items: stretch; - flex-grow: 1; - align-items: center; - font-size: 13px; - white-space: nowrap; -} - -.suggestionItem__text, .suggestionItem__type, .suggestionItem__description { - flex-grow: 1; - flex-basis: 0%; - display: flex; - flex-direction: column; -} - -.suggestionItem__type { - flex-grow: 0; - flex-basis: auto; - width: 32px; - height: 32px; - text-align: center; - overflow: hidden; - padding: 4px; -} - -&.suggestionItem--field { - .suggestionItem__type { - background-color: tint(@globalColorOrange, 90%); - color: @globalColorOrange; - } -} - -&.suggestionItem--value { - .suggestionItem__type { - background-color: tint(@globalColorTeal, 90%); - color: @globalColorTeal; - } - - .suggestionItem__text { - width: auto; - } -} - -&.suggestionItem--operator { - .suggestionItem__type { - background-color: tint(@globalColorBlue, 90%); - color: @globalColorBlue; - } -} - -&.suggestionItem--conjunction { - .suggestionItem__type { - background-color: tint(@globalColorPurple, 90%); - color: @globalColorPurple; - } -} - -&.suggestionItem--recentSearch { - .suggestionItem__type { - background-color: @globalColorLightGray; - color: @globalColorMediumGray; - } - - .suggestionItem__text { - width: auto; - } -} - -.suggestionItem__text { - flex-grow: 0; /* 2 */ - flex-basis: auto; /* 2 */ - font-family: "SFMono-Regular", Consolas, "Liberation Mono", Menlo, Courier, monospace; - margin-right: 32px; - width: 250px; - overflow: hidden; - text-overflow: ellipsis; - padding: 4px 8px; - color: #111; -} - -.suggestionItem__description { - color: @globalColorDarkGray; - overflow: hidden; - text-overflow: ellipsis; -} - -.suggestionItem__callout { - font-family: "SFMono-Regular", Consolas, "Liberation Mono", Menlo, Courier, monospace; - background: @globalColorLightestGray; - color: #000; - padding: 0 4px; - display: inline-block; -} - -.suggestionTypeahead { - .typeahead { - .typeahead-items { - max-height: 60vh; - overflow-y: auto; - - .typeahead-item { - padding: 0; - border-bottom: none; - line-height: normal; - - &:hover { - cursor: pointer; - } - - &.active { - background-color: @globalColorLightestGray; - - .suggestionItem__callout { - background: #fff; - } - - .suggestionItem__text { - color: #000; - } - - .suggestionItem__type { - color: #000; - } - - .suggestionItem--field { - .suggestionItem__type { - background-color: tint(@globalColorOrange, 80%); - } - } - - .suggestionItem--value { - .suggestionItem__type { - background-color: tint(@globalColorTeal, 80%); - } - } - - .suggestionItem--operator { - .suggestionItem__type { - background-color: tint(@globalColorBlue, 80%); - } - } - - .suggestionItem--conjunction { - .suggestionItem__type { - background-color: tint(@globalColorPurple, 80%); - } - } - } - } - } - } -} diff --git a/src/ui/public/query_bar/index.js b/src/ui/public/query_bar/index.js index c0578a68895a1..19e4a8baca5e6 100644 --- a/src/ui/public/query_bar/index.js +++ b/src/ui/public/query_bar/index.js @@ -17,5 +17,4 @@ * under the License. */ -import './directive/query_bar'; import './react'; diff --git a/src/ui/public/query_bar/react/typeahead/suggestion.less b/src/ui/public/query_bar/react/typeahead/suggestion.less index 1e142fb483933..e2f6400ac0894 100644 --- a/src/ui/public/query_bar/react/typeahead/suggestion.less +++ b/src/ui/public/query_bar/react/typeahead/suggestion.less @@ -1,9 +1,105 @@ @import (reference) "~ui/styles/variables"; +@import (reference) "~ui/styles/mixins"; + + +.typeahead { + position: relative; + + .typeahead-popover { + border: 1px solid; + border-color: @typeahead-item-border; + color: @typeahead-item-color; + background-color: @typeahead-item-bg; + position: absolute; + top: -10px; + z-index: @zindex-typeahead; + box-shadow: 0px 4px 8px rgba(0,0,0,.1); + width: 100%; + border-radius: 4px; + + .typeahead-items { + max-height: 60vh; + overflow-y: auto; + } + + .typeahead-item { + height: 32px; + white-space: nowrap; + font-size: 12px; + vertical-align: middle; + padding: 0; + border-bottom: none; + line-height: normal; + } + + .typeahead-item:hover { + cursor: pointer; + } + + .typeahead-item:last-child { + border-bottom: 0px; + border-radius: 0 0 4px 4px; + } + + .typeahead-item:first-child { + border-bottom: 0px; + border-radius: 4px 4px 0 0; + } + + .typeahead-item.active { + background-color: @globalColorLightestGray; + + + .suggestionItem__callout { + background: #fff; + } + + .suggestionItem__text { + color: #000; + } + + .suggestionItem__type { + color: #000; + } + + .suggestionItem--field { + .suggestionItem__type { + background-color: tint(@globalColorOrange, 80%); + } + } + + .suggestionItem--value { + .suggestionItem__type { + background-color: tint(@globalColorTeal, 80%); + } + } + + .suggestionItem--operator { + .suggestionItem__type { + background-color: tint(@globalColorBlue, 80%); + } + } + + .suggestionItem--conjunction { + .suggestionItem__type { + background-color: tint(@globalColorPurple, 80%); + } + } + + } + } +} + +.inline-form .typeahead.visible .input-group { + > :first-child { + .border-bottom-radius(0); + } + > :last-child { + .border-bottom-radius(0); + } +} -// TODO An override of an override, ugh. We should be able to clean up this mess once the angular version -// of the query bar and typeahead are deleted. -.reactSuggestionTypeahead { .suggestionItem { display: flex; @@ -101,65 +197,3 @@ padding: 0 4px; display: inline-block; } - - .typeahead { - .typeahead-popover { - top: -10px; - - .typeahead-items { - max-height: 60vh; - overflow-y: auto; - - .typeahead-item { - padding: 0; - border-bottom: none; - line-height: normal; - - &:hover { - cursor: pointer; - } - - &.active { - background-color: @globalColorLightestGray; - - .suggestionItem__callout { - background: #fff; - } - - .suggestionItem__text { - color: #000; - } - - .suggestionItem__type { - color: #000; - } - - .suggestionItem--field { - .suggestionItem__type { - background-color: tint(@globalColorOrange, 80%); - } - } - - .suggestionItem--value { - .suggestionItem__type { - background-color: tint(@globalColorTeal, 80%); - } - } - - .suggestionItem--operator { - .suggestionItem__type { - background-color: tint(@globalColorBlue, 80%); - } - } - - .suggestionItem--conjunction { - .suggestionItem__type { - background-color: tint(@globalColorPurple, 80%); - } - } - } - } - } - } - } -} diff --git a/src/ui/public/typeahead/__tests__/typeahead.js b/src/ui/public/typeahead/__tests__/typeahead.js deleted file mode 100644 index 3b9e49aa077e7..0000000000000 --- a/src/ui/public/typeahead/__tests__/typeahead.js +++ /dev/null @@ -1,218 +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 expect from 'expect.js'; -import sinon from 'sinon'; -import ngMock from 'ng_mock'; -import '../typeahead'; -import { comboBoxKeyCodes } from '@elastic/eui'; -const { UP, DOWN, ENTER, TAB, ESCAPE } = comboBoxKeyCodes; - -describe('Typeahead directive', function () { - let $compile; - let scope; - let element; - - beforeEach(ngMock.module('kibana')); - - beforeEach(ngMock.inject(function (_$compile_, _$rootScope_) { - $compile = _$compile_; - scope = _$rootScope_.$new(); - const html = ` - - - - `; - element = $compile(html)(scope); - scope.items = ['foo', 'bar', 'baz']; - scope.onSelect = sinon.spy(); - scope.$digest(); - })); - - describe('before focus', function () { - it('should be hidden', function () { - scope.$digest(); - expect(element.find('.typeahead-popover').hasClass('ng-hide')).to.be(true); - }); - }); - - describe('after focus', function () { - beforeEach(function () { - element.find('input').triggerHandler('focus'); - scope.$digest(); - }); - - it('should still be hidden', function () { - expect(element.find('.typeahead-popover').hasClass('ng-hide')).to.be(true); - }); - - it('should show when a key is pressed unless there are no items', function () { - element.find('.typeahead').triggerHandler({ - type: 'keypress', - keyCode: 'A'.charCodeAt(0) - }); - - scope.$digest(); - - expect(element.find('.typeahead-popover').hasClass('ng-hide')).to.be(false); - - scope.items = []; - scope.$digest(); - - expect(element.find('.typeahead-popover').hasClass('ng-hide')).to.be(true); - }); - - it('should hide when escape is pressed', function () { - element.find('.typeahead').triggerHandler({ - type: 'keydown', - keyCode: ESCAPE - }); - - scope.$digest(); - - expect(element.find('.typeahead-popover').hasClass('ng-hide')).to.be(true); - }); - - it('should select the next option on arrow down', function () { - let expectedActiveIndex = -1; - for (let i = 0; i < scope.items.length + 1; i++) { - expectedActiveIndex++; - if (expectedActiveIndex > scope.items.length - 1) expectedActiveIndex = 0; - - element.find('.typeahead').triggerHandler({ - type: 'keydown', - keyCode: DOWN - }); - - scope.$digest(); - - expect(element.find('.typeahead-item.active').length).to.be(1); - expect(element.find('.typeahead-item').eq(expectedActiveIndex).hasClass('active')).to.be(true); - } - }); - - it('should select the previous option on arrow up', function () { - let expectedActiveIndex = scope.items.length; - for (let i = 0; i < scope.items.length + 1; i++) { - expectedActiveIndex--; - if (expectedActiveIndex < 0) expectedActiveIndex = scope.items.length - 1; - - element.find('.typeahead').triggerHandler({ - type: 'keydown', - keyCode: UP - }); - - scope.$digest(); - - expect(element.find('.typeahead-item.active').length).to.be(1); - expect(element.find('.typeahead-item').eq(expectedActiveIndex).hasClass('active')).to.be(true); - } - }); - - it('should fire the onSelect handler with the selected item on enter', function () { - const typeaheadEl = element.find('.typeahead'); - - typeaheadEl.triggerHandler({ - type: 'keydown', - keyCode: DOWN - }); - - typeaheadEl.triggerHandler({ - type: 'keydown', - keyCode: ENTER - }); - - scope.$digest(); - - sinon.assert.calledOnce(scope.onSelect); - sinon.assert.calledWith(scope.onSelect, scope.items[0]); - }); - - it('should fire the onSelect handler with the selected item on tab', function () { - const typeaheadEl = element.find('.typeahead'); - - typeaheadEl.triggerHandler({ - type: 'keydown', - keyCode: DOWN - }); - - typeaheadEl.triggerHandler({ - type: 'keydown', - keyCode: TAB - }); - - scope.$digest(); - - sinon.assert.calledOnce(scope.onSelect); - sinon.assert.calledWith(scope.onSelect, scope.items[0]); - }); - - it('should select the option on hover', function () { - const hoverIndex = 0; - element.find('.typeahead-item').eq(hoverIndex).triggerHandler('mouseenter'); - - scope.$digest(); - - expect(element.find('.typeahead-item.active').length).to.be(1); - expect(element.find('.typeahead-item').eq(hoverIndex).hasClass('active')).to.be(true); - }); - - it('should fire the onSelect handler with the selected item on click', function () { - const clickIndex = 1; - const clickEl = element.find('.typeahead-item').eq(clickIndex); - clickEl.triggerHandler('mouseenter'); - clickEl.triggerHandler('click'); - - scope.$digest(); - - sinon.assert.calledOnce(scope.onSelect); - sinon.assert.calledWith(scope.onSelect, scope.items[clickIndex]); - }); - - it('should update the list when the items change', function () { - scope.items = ['qux']; - scope.$digest(); - expect(expect(element.find('.typeahead-item').length).to.be(scope.items.length)); - }); - - it('should default to showing the item itself in the list', function () { - scope.items.forEach((item, i) => { - expect(element.find('kbn-typeahead-item').eq(i).html()).to.be(item); - }); - }); - - it('should use a custom template if specified to show the item in the list', function () { - scope.items = [{ - label: 'foo', - value: 1 - }]; - scope.itemTemplate = '
{{item.label}}
'; - scope.$digest(); - expect(element.find('.label').html()).to.be(scope.items[0].label); - }); - }); -}); diff --git a/src/ui/public/typeahead/index.js b/src/ui/public/typeahead/index.js deleted file mode 100644 index 2237c60b66ef1..0000000000000 --- a/src/ui/public/typeahead/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 './typeahead'; diff --git a/src/ui/public/typeahead/typeahead.html b/src/ui/public/typeahead/typeahead.html deleted file mode 100644 index 39b1fa2b802a5..0000000000000 --- a/src/ui/public/typeahead/typeahead.html +++ /dev/null @@ -1,40 +0,0 @@ -
- -
-
-
- - -
-
-
-
diff --git a/src/ui/public/typeahead/typeahead.js b/src/ui/public/typeahead/typeahead.js deleted file mode 100644 index e2f173fee35ff..0000000000000 --- a/src/ui/public/typeahead/typeahead.js +++ /dev/null @@ -1,148 +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 template from './typeahead.html'; -import { uiModules } from '../modules'; -import { comboBoxKeyCodes } from '@elastic/eui'; -import '../directives/scroll_bottom'; -import './typeahead.less'; -import './typeahead_input'; -import './typeahead_item'; - -const { UP, DOWN, ENTER, TAB, ESCAPE } = comboBoxKeyCodes; -const typeahead = uiModules.get('kibana/typeahead'); - -typeahead.directive('kbnTypeahead', function () { - return { - template, - transclude: true, - restrict: 'E', - scope: { - items: '=', - itemTemplate: '=', - onSelect: '&', - onFocusChange: '&' - }, - bindToController: true, - controllerAs: 'typeahead', - controller: function ($scope, $element) { - this.isHidden = true; - this.selectedIndex = null; - this.elementID = $element.attr('id'); - - this.submit = () => { - const item = this.items[this.selectedIndex]; - this.onSelect({ item }); - this.selectedIndex = null; - }; - - this.selectPrevious = () => { - if (this.selectedIndex !== null && this.selectedIndex > 0) { - this.selectedIndex--; - } else { - this.selectedIndex = this.items.length - 1; - } - this.scrollSelectedIntoView(); - }; - - this.selectNext = () => { - if (this.selectedIndex !== null && this.selectedIndex < this.items.length - 1) { - this.selectedIndex++; - } else { - this.selectedIndex = 0; - } - this.scrollSelectedIntoView(); - }; - - this.scrollSelectedIntoView = () => { - const parent = $element.find('.typeahead-items')[0]; - const child = $element.find('.typeahead-item').eq(this.selectedIndex)[0]; - parent.scrollTop = Math.min(parent.scrollTop, child.offsetTop); - parent.scrollTop = Math.max(parent.scrollTop, child.offsetTop + child.offsetHeight - parent.offsetHeight); - }; - - this.isVisible = () => { - // Blur fires before click. If we only checked isFocused, then click events would never fire. - const isFocusedOrMousedOver = this.isFocused || this.isMousedOver; - return !this.isHidden && this.items && this.items.length > 0 && isFocusedOrMousedOver; - }; - - this.resetLimit = () => { - this.limit = 50; - }; - - this.increaseLimit = () => { - this.limit += 50; - }; - - this.onKeyDown = (event) => { - const { keyCode } = event; - - if (keyCode === ESCAPE) this.isHidden = true; - - if ([TAB, ENTER].includes(keyCode) && !this.hidden && this.selectedIndex !== null) { - event.preventDefault(); - this.submit(); - } else if (keyCode === UP && this.items.length > 0) { - event.preventDefault(); - this.isHidden = false; - this.selectPrevious(); - } else if (keyCode === DOWN && this.items.length > 0) { - event.preventDefault(); - this.isHidden = false; - this.selectNext(); - } else { - this.selectedIndex = null; - } - }; - - this.onKeyPress = () => { - this.isHidden = false; - }; - - this.onItemClick = () => { - this.submit(); - $scope.$broadcast('focus'); - $scope.$evalAsync(() => this.isHidden = false); - }; - - this.onFocus = () => { - this.isFocused = true; - this.isHidden = true; - this.resetLimit(); - }; - - this.onBlur = () => { - this.isFocused = false; - }; - - this.onMouseEnter = () => { - this.isMousedOver = true; - }; - - this.onMouseLeave = () => { - this.isMousedOver = false; - }; - - $scope.$watch('typeahead.selectedIndex', (newIndex) => { - this.onFocusChange({ $focusedItemID: newIndex !== null ? `${this.elementID}-typeahead-item-${newIndex}` : '' }); - }); - } - }; -}); diff --git a/src/ui/public/typeahead/typeahead.less b/src/ui/public/typeahead/typeahead.less deleted file mode 100644 index 94bd5ca32b15e..0000000000000 --- a/src/ui/public/typeahead/typeahead.less +++ /dev/null @@ -1,55 +0,0 @@ -@import (reference) "~ui/styles/variables"; -@import (reference) "~ui/styles/mixins"; - -.typeahead { - position: relative; - - .typeahead-popover { - border: 1px solid; - border-color: @typeahead-item-border; - color: @typeahead-item-color; - background-color: @typeahead-item-bg; - position: absolute; - top: 32px; - z-index: @zindex-typeahead; - box-shadow: 0px 4px 8px rgba(0,0,0,.1); - width: 100%; - border-radius: 4px; - - .typeahead-items { - max-height: 500px; - overflow-y: auto; - } - - .typeahead-item { - height: 32px; - line-height: 32px; - white-space: nowrap; - font-size: 12px; - vertical-align: middle; - } - - .typeahead-item:last-child { - border-bottom: 0px; - border-radius: 0 0 4px 4px; - } - - .typeahead-item:first-child { - border-bottom: 0px; - border-radius: 4px 4px 0 0; - } - - .typeahead-item.active { - background-color: @globalColorLightestGray; - } - } -} - -.inline-form .typeahead.visible .input-group { - > :first-child { - .border-bottom-radius(0); - } - > :last-child { - .border-bottom-radius(0); - } -} diff --git a/src/ui/public/typeahead/typeahead_input.js b/src/ui/public/typeahead/typeahead_input.js deleted file mode 100644 index b273426af2c42..0000000000000 --- a/src/ui/public/typeahead/typeahead_input.js +++ /dev/null @@ -1,49 +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 '../modules'; -const typeahead = uiModules.get('kibana/typeahead'); - -typeahead.directive('kbnTypeaheadInput', function () { - return { - restrict: 'A', - require: '^kbnTypeahead', - link: function ($scope, $el, $attr, typeahead) { - // disable browser autocomplete - $el.attr('autocomplete', 'off'); - - $el.on('focus', () => { - // For some reason if we don't have the $evalAsync in here, then blur events happen outside the angular lifecycle - $scope.$evalAsync(() => typeahead.onFocus()); - }); - - $el.on('blur', () => { - $scope.$evalAsync(() => typeahead.onBlur()); - }); - - $scope.$on('focus', () => { - $el.focus(); - }); - - $scope.$on('$destroy', () => { - $el.off(); - }); - } - }; -}); diff --git a/src/ui/public/typeahead/typeahead_item.js b/src/ui/public/typeahead/typeahead_item.js deleted file mode 100644 index c613aa3b9bd38..0000000000000 --- a/src/ui/public/typeahead/typeahead_item.js +++ /dev/null @@ -1,35 +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 '../modules'; -const typeahead = uiModules.get('kibana/typeahead'); - -typeahead.directive('kbnTypeaheadItem', function ($compile) { - return { - restrict: 'E', - scope: { - item: '=', - template: '=' - }, - link: (scope, element) => { - element.html(scope.template || '{{item}}'); - $compile(element.contents())(scope); - } - }; -}); From 9b65a37d0dd7c61a5ddcd7570263c3c297715a2f Mon Sep 17 00:00:00 2001 From: Matthew Bargar Date: Tue, 2 Oct 2018 15:52:23 -0400 Subject: [PATCH 28/54] now that the old angular query bar is gone, rename react-query-bar to simply query-bar, and other related refactorings --- .../public/dashboard/dashboard_app.html | 4 ++-- .../kibana/public/discover/index.html | 4 ++-- .../public/visualize/editor/editor.html | 4 ++-- src/ui/public/autoload/modules.js | 1 + src/ui/public/query_bar/components/index.js | 24 +++++++++++++++++++ .../language_switcher.js | 0 .../{react => components}/query_bar.js | 0 .../typeahead/suggestion.js | 0 .../typeahead/suggestion.less | 0 .../typeahead/suggestions.js | 0 .../query_bar/{react => directive}/index.js | 9 +++---- src/ui/public/query_bar/index.js | 4 +++- 12 files changed, 37 insertions(+), 13 deletions(-) create mode 100644 src/ui/public/query_bar/components/index.js rename src/ui/public/query_bar/{react => components}/language_switcher.js (100%) rename src/ui/public/query_bar/{react => components}/query_bar.js (100%) rename src/ui/public/query_bar/{react => components}/typeahead/suggestion.js (100%) rename src/ui/public/query_bar/{react => components}/typeahead/suggestion.less (100%) rename src/ui/public/query_bar/{react => components}/typeahead/suggestions.js (100%) rename src/ui/public/query_bar/{react => directive}/index.js (79%) diff --git a/src/core_plugins/kibana/public/dashboard/dashboard_app.html b/src/core_plugins/kibana/public/dashboard/dashboard_app.html index fb7b8fb29b9e0..cc020f33e3dba 100644 --- a/src/core_plugins/kibana/public/dashboard/dashboard_app.html +++ b/src/core_plugins/kibana/public/dashboard/dashboard_app.html @@ -25,12 +25,12 @@
- + >
diff --git a/src/core_plugins/kibana/public/discover/index.html b/src/core_plugins/kibana/public/discover/index.html index 50e373c5083f5..4735b852a96e0 100644 --- a/src/core_plugins/kibana/public/discover/index.html +++ b/src/core_plugins/kibana/public/discover/index.html @@ -24,12 +24,12 @@

- + >

diff --git a/src/core_plugins/kibana/public/visualize/editor/editor.html b/src/core_plugins/kibana/public/visualize/editor/editor.html index d00e72647f93c..b5ffa8b9549a9 100644 --- a/src/core_plugins/kibana/public/visualize/editor/editor.html +++ b/src/core_plugins/kibana/public/visualize/editor/editor.html @@ -37,13 +37,13 @@
- + >

diff --git a/src/ui/public/autoload/modules.js b/src/ui/public/autoload/modules.js index b5c111b2ffb09..107be2145995c 100644 --- a/src/ui/public/autoload/modules.js +++ b/src/ui/public/autoload/modules.js @@ -53,3 +53,4 @@ import '../watch_multi'; import '../courier/saved_object/ui/saved_object_save_as_checkbox'; import '../react_components'; import '../i18n'; +import '../query_bar/directive'; diff --git a/src/ui/public/query_bar/components/index.js b/src/ui/public/query_bar/components/index.js new file mode 100644 index 0000000000000..7c70033471652 --- /dev/null +++ b/src/ui/public/query_bar/components/index.js @@ -0,0 +1,24 @@ +/* + * 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 { QueryBar } from './query_bar'; + + diff --git a/src/ui/public/query_bar/react/language_switcher.js b/src/ui/public/query_bar/components/language_switcher.js similarity index 100% rename from src/ui/public/query_bar/react/language_switcher.js rename to src/ui/public/query_bar/components/language_switcher.js diff --git a/src/ui/public/query_bar/react/query_bar.js b/src/ui/public/query_bar/components/query_bar.js similarity index 100% rename from src/ui/public/query_bar/react/query_bar.js rename to src/ui/public/query_bar/components/query_bar.js diff --git a/src/ui/public/query_bar/react/typeahead/suggestion.js b/src/ui/public/query_bar/components/typeahead/suggestion.js similarity index 100% rename from src/ui/public/query_bar/react/typeahead/suggestion.js rename to src/ui/public/query_bar/components/typeahead/suggestion.js diff --git a/src/ui/public/query_bar/react/typeahead/suggestion.less b/src/ui/public/query_bar/components/typeahead/suggestion.less similarity index 100% rename from src/ui/public/query_bar/react/typeahead/suggestion.less rename to src/ui/public/query_bar/components/typeahead/suggestion.less diff --git a/src/ui/public/query_bar/react/typeahead/suggestions.js b/src/ui/public/query_bar/components/typeahead/suggestions.js similarity index 100% rename from src/ui/public/query_bar/react/typeahead/suggestions.js rename to src/ui/public/query_bar/components/typeahead/suggestions.js diff --git a/src/ui/public/query_bar/react/index.js b/src/ui/public/query_bar/directive/index.js similarity index 79% rename from src/ui/public/query_bar/react/index.js rename to src/ui/public/query_bar/directive/index.js index ea5323b3b81c5..ed00cfd272a35 100644 --- a/src/ui/public/query_bar/react/index.js +++ b/src/ui/public/query_bar/directive/index.js @@ -17,16 +17,15 @@ * under the License. */ -import 'ngreact'; -import { QueryBar } from './query_bar'; -import { QueryLanguageSwitcher } from './language_switcher'; +import 'ngreact'; import { uiModules } from '../../modules'; +import { QueryBar } from '../components'; const app = uiModules.get('app/kibana', ['react']); -app.directive('reactQueryBar', (reactDirective, localStorage) => { +app.directive('queryBar', (reactDirective, localStorage) => { return reactDirective( QueryBar, undefined, @@ -36,5 +35,3 @@ app.directive('reactQueryBar', (reactDirective, localStorage) => { } ); }); - -app.directive('queryPopover', reactDirective => reactDirective(QueryLanguageSwitcher)); diff --git a/src/ui/public/query_bar/index.js b/src/ui/public/query_bar/index.js index 19e4a8baca5e6..624029da39d86 100644 --- a/src/ui/public/query_bar/index.js +++ b/src/ui/public/query_bar/index.js @@ -17,4 +17,6 @@ * under the License. */ -import './react'; +export { QueryBar } from './components'; + + From ed2e7279c23eb4d4eaca50d1c7c5b95d4bf047e4 Mon Sep 17 00:00:00 2001 From: Matthew Bargar Date: Tue, 2 Oct 2018 16:08:51 -0400 Subject: [PATCH 29/54] remove leftover todos --- src/ui/public/query_bar/components/query_bar.js | 6 ------ 1 file changed, 6 deletions(-) diff --git a/src/ui/public/query_bar/components/query_bar.js b/src/ui/public/query_bar/components/query_bar.js index 0a9cd78c0fa1e..b4e75155e1da2 100644 --- a/src/ui/public/query_bar/components/query_bar.js +++ b/src/ui/public/query_bar/components/query_bar.js @@ -34,12 +34,6 @@ import { EuiOutsideClickDetector, } from '@elastic/eui'; -/* -TODO: styling -TODO: refactoring - */ - - const KEY_CODES = { LEFT: 37, UP: 38, From a07ab2401c0851ef6969e36032553b43411301d8 Mon Sep 17 00:00:00 2001 From: Matthew Bargar Date: Thu, 4 Oct 2018 12:05:56 -0400 Subject: [PATCH 30/54] add typescript --- ...tation_links.js => documentation_links.ts} | 16 ++- src/ui/public/metadata.d.ts | 26 ++++ ...uage_switcher.js => language_switcher.tsx} | 111 +++++++++--------- 3 files changed, 88 insertions(+), 65 deletions(-) rename src/ui/public/documentation_links/{documentation_links.js => documentation_links.ts} (93%) create mode 100644 src/ui/public/metadata.d.ts rename src/ui/public/query_bar/components/{language_switcher.js => language_switcher.tsx} (71%) diff --git a/src/ui/public/documentation_links/documentation_links.js b/src/ui/public/documentation_links/documentation_links.ts similarity index 93% rename from src/ui/public/documentation_links/documentation_links.js rename to src/ui/public/documentation_links/documentation_links.ts index 484a48a5765bd..7eb91d2f3be83 100644 --- a/src/ui/public/documentation_links/documentation_links.js +++ b/src/ui/public/documentation_links/documentation_links.ts @@ -29,16 +29,15 @@ export const documentationLinks = { installation: `${ELASTIC_WEBSITE_URL}guide/en/beats/filebeat/${DOC_LINK_VERSION}/filebeat-installation.html`, configuration: `${ELASTIC_WEBSITE_URL}guide/en/beats/filebeat/${DOC_LINK_VERSION}/filebeat-configuration.html`, elasticsearchOutput: `${ELASTIC_WEBSITE_URL}guide/en/beats/filebeat/${DOC_LINK_VERSION}/elasticsearch-output.html`, - elasticsearchOutputAnchorParameters: - `${ELASTIC_WEBSITE_URL}guide/en/beats/filebeat/${DOC_LINK_VERSION}/elasticsearch-output.html#_parameters`, + elasticsearchOutputAnchorParameters: `${ELASTIC_WEBSITE_URL}guide/en/beats/filebeat/${DOC_LINK_VERSION}/elasticsearch-output.html#_parameters`, startup: `${ELASTIC_WEBSITE_URL}guide/en/beats/filebeat/${DOC_LINK_VERSION}/filebeat-starting.html`, - exportedFields: `${ELASTIC_WEBSITE_URL}guide/en/beats/filebeat/${DOC_LINK_VERSION}/exported-fields.html` + exportedFields: `${ELASTIC_WEBSITE_URL}guide/en/beats/filebeat/${DOC_LINK_VERSION}/exported-fields.html`, }, metricbeat: { - base: `${ELASTIC_WEBSITE_URL}guide/en/beats/metricbeat/${DOC_LINK_VERSION}` + base: `${ELASTIC_WEBSITE_URL}guide/en/beats/metricbeat/${DOC_LINK_VERSION}`, }, logstash: { - base: `${ELASTIC_WEBSITE_URL}guide/en/logstash/${DOC_LINK_VERSION}` + base: `${ELASTIC_WEBSITE_URL}guide/en/logstash/${DOC_LINK_VERSION}`, }, aggs: { date_histogram: `${ELASTIC_DOCS}search-aggregations-bucket-datehistogram-aggregation.html`, @@ -78,19 +77,18 @@ export const documentationLinks = { painless: `${ELASTIC_DOCS}modules-scripting-painless.html`, painlessApi: `${ELASTIC_DOCS}modules-scripting-painless.html#painless-api`, painlessSyntax: `${ELASTIC_DOCS}modules-scripting-painless-syntax.html`, - luceneExpressions: `${ELASTIC_DOCS}modules-scripting-expression.html` + luceneExpressions: `${ELASTIC_DOCS}modules-scripting-expression.html`, }, indexPatterns: { loadingData: `${ELASTIC_WEBSITE_URL}guide/en/kibana/${DOC_LINK_VERSION}/tutorial-load-dataset.html`, introduction: `${ELASTIC_WEBSITE_URL}guide/en/kibana/${DOC_LINK_VERSION}/index-patterns.html`, }, query: { - luceneQuerySyntax: - `${ELASTIC_DOCS}query-dsl-query-string-query.html#query-string-syntax`, + luceneQuerySyntax: `${ELASTIC_DOCS}query-dsl-query-string-query.html#query-string-syntax`, queryDsl: `${ELASTIC_DOCS}query-dsl.html`, kueryQuerySyntax: `${ELASTIC_WEBSITE_URL}guide/en/kibana/${DOC_LINK_VERSION}/kuery-query.html`, }, date: { - dateMath: `${ELASTIC_DOCS}common-options.html#date-math` + dateMath: `${ELASTIC_DOCS}common-options.html#date-math`, }, }; diff --git a/src/ui/public/metadata.d.ts b/src/ui/public/metadata.d.ts new file mode 100644 index 0000000000000..054007b642543 --- /dev/null +++ b/src/ui/public/metadata.d.ts @@ -0,0 +1,26 @@ +/* + * 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. + */ + +declare class Metadata { + public branch: string; +} + +declare const metadata: Metadata; + +export { metadata }; diff --git a/src/ui/public/query_bar/components/language_switcher.js b/src/ui/public/query_bar/components/language_switcher.tsx similarity index 71% rename from src/ui/public/query_bar/components/language_switcher.js rename to src/ui/public/query_bar/components/language_switcher.tsx index 8b0c23f4bf03e..ec57e3611dddd 100644 --- a/src/ui/public/query_bar/components/language_switcher.js +++ b/src/ui/public/query_bar/components/language_switcher.tsx @@ -17,54 +17,45 @@ * under the License. */ -import React, { Component } from 'react'; -import PropTypes from 'prop-types'; -import { documentationLinks } from '../../documentation_links/documentation_links'; +declare module '@elastic/eui' { + export const EuiPopoverTitle: React.SFC; +} + import { - EuiPopover, EuiButtonEmpty, EuiForm, EuiFormRow, - EuiSwitch, - EuiLink, - EuiText, - EuiSpacer, EuiHorizontalRule, + EuiLink, + EuiPopover, EuiPopoverTitle, + EuiSpacer, + EuiSwitch, + EuiText, } from '@elastic/eui'; +import React, { Component } from 'react'; +import { documentationLinks } from '../../documentation_links/documentation_links'; const luceneQuerySyntaxDocs = documentationLinks.query.luceneQuerySyntax; const kueryQuerySyntaxDocs = documentationLinks.query.kueryQuerySyntax; -export class QueryLanguageSwitcher extends Component { - - state = { - isPopoverOpen: false, - }; - - togglePopover = () => { - this.setState({ - isPopoverOpen: !this.state.isPopoverOpen, - }); - }; +interface State { + isPopoverOpen: boolean; +} - closePopover = () => { - this.setState({ - isPopoverOpen: false, - }); - }; +interface Props { + language: string; + onSelectLanguage: (newLanguage: string) => void; +} - onSwitchChange = () => { - const newLanguage = this.props.language === 'lucene' ? 'kuery' : 'lucene'; - this.props.onSelectLanguage(newLanguage); +export class QueryLanguageSwitcher extends Component { + public state = { + isPopoverOpen: false, }; - render() { + public render() { const button = ( - + Options ); @@ -83,21 +74,18 @@ export class QueryLanguageSwitcher extends Component {

- Our experimental autocomplete and simple syntax features can help you create your queries. Just start - typing and you’ll see matches related to your data. - - See docs {( - - here + Our experimental autocomplete and simple syntax features can help you create your + queries. Just start typing and you’ll see matches related to your data. See docs{' '} + { + + here - )}. + } + .

- + @@ -111,27 +99,38 @@ export class QueryLanguageSwitcher extends Component { - +

- Not ready yet? Find our lucene docs {( - - here + Not ready yet? Find our lucene docs{' '} + { + + here - )}. + } + .

); } -} -QueryLanguageSwitcher.propTypes = { - language: PropTypes.string, - onSelectLanguage: PropTypes.func, -}; + private togglePopover = () => { + this.setState({ + isPopoverOpen: !this.state.isPopoverOpen, + }); + }; + + private closePopover = () => { + this.setState({ + isPopoverOpen: false, + }); + }; + + private onSwitchChange = () => { + const newLanguage = this.props.language === 'lucene' ? 'kuery' : 'lucene'; + this.props.onSelectLanguage(newLanguage); + }; +} From 00c4639ce2879f25b934846c55ed9f194b752725 Mon Sep 17 00:00:00 2001 From: Matthew Bargar Date: Mon, 15 Oct 2018 19:23:15 -0400 Subject: [PATCH 31/54] Finish converting all new code to typescript --- src/ui/public/autoload/modules.js | 4 +- src/ui/public/chrome/chrome.js | 2 +- .../directives/__tests__/parse_query.js | 2 +- .../__tests__/unsupported_time_patterns.js | 2 +- .../index_patterns/static_utils/index.d.ts | 32 ++ .../index_patterns/static_utils/index.js | 4 +- .../public/parse_query/{index.js => index.ts} | 0 .../lib/{from_user.js => from_user.ts} | 26 +- .../lib/{to_user.js => to_user.ts} | 26 +- src/ui/public/persisted_log/directive.js | 26 + src/ui/public/persisted_log/index.d.ts | 20 + src/ui/public/persisted_log/index.js | 2 +- .../{persisted_log.js => persisted_log.ts} | 42 +- .../components/{index.js => index.ts} | 4 - .../{query_bar.js => query_bar.tsx} | 446 ++++++++++-------- ...suggestion.js => suggestion_component.tsx} | 34 +- ...ggestions.js => suggestions_component.tsx} | 111 ++--- .../public/query_bar/{index.js => index.ts} | 2 - .../lib/{match_pairs.js => match_pairs.ts} | 68 ++- .../storage/{storage.js => directive.js} | 32 +- src/ui/public/storage/{index.js => index.ts} | 2 + src/ui/public/storage/storage.ts | 58 +++ src/ui/public/storage/web_storage.ts | 20 + 23 files changed, 618 insertions(+), 347 deletions(-) create mode 100644 src/ui/public/index_patterns/static_utils/index.d.ts rename src/ui/public/parse_query/{index.js => index.ts} (100%) rename src/ui/public/parse_query/lib/{from_user.js => from_user.ts} (74%) rename src/ui/public/parse_query/lib/{to_user.js => to_user.ts} (71%) create mode 100644 src/ui/public/persisted_log/directive.js create mode 100644 src/ui/public/persisted_log/index.d.ts rename src/ui/public/persisted_log/{persisted_log.js => persisted_log.ts} (61%) rename src/ui/public/query_bar/components/{index.js => index.ts} (99%) rename src/ui/public/query_bar/components/{query_bar.js => query_bar.tsx} (51%) rename src/ui/public/query_bar/components/typeahead/{suggestion.js => suggestion_component.tsx} (77%) rename src/ui/public/query_bar/components/typeahead/{suggestions.js => suggestions_component.tsx} (77%) rename src/ui/public/query_bar/{index.js => index.ts} (99%) rename src/ui/public/query_bar/lib/{match_pairs.js => match_pairs.ts} (72%) rename src/ui/public/storage/{storage.js => directive.js} (66%) rename src/ui/public/storage/{index.js => index.ts} (97%) create mode 100644 src/ui/public/storage/storage.ts create mode 100644 src/ui/public/storage/web_storage.ts diff --git a/src/ui/public/autoload/modules.js b/src/ui/public/autoload/modules.js index 107be2145995c..fc29a38b4f5b2 100644 --- a/src/ui/public/autoload/modules.js +++ b/src/ui/public/autoload/modules.js @@ -35,14 +35,14 @@ import '../filter_manager'; import '../index_patterns'; import '../listen'; import '../notify'; -import '../parse_query'; +import '../parse_query/index'; import '../persisted_log'; import '../private'; import '../promises'; import '../modals'; import '../state_management/app_state'; import '../state_management/global_state'; -import '../storage'; +import '../storage/index'; import '../style_compile'; import '../timefilter'; import '../timepicker'; diff --git a/src/ui/public/chrome/chrome.js b/src/ui/public/chrome/chrome.js index ffd3e5da25948..d615d2de3cb9a 100644 --- a/src/ui/public/chrome/chrome.js +++ b/src/ui/public/chrome/chrome.js @@ -26,7 +26,7 @@ import '../config'; import '../notify'; import '../private'; import '../promises'; -import '../storage'; +import '../storage/index'; import '../directives/kbn_src'; import '../watch_multi'; import './services'; diff --git a/src/ui/public/directives/__tests__/parse_query.js b/src/ui/public/directives/__tests__/parse_query.js index 201039c35f757..3239bbceae248 100644 --- a/src/ui/public/directives/__tests__/parse_query.js +++ b/src/ui/public/directives/__tests__/parse_query.js @@ -32,7 +32,7 @@ let $elem; let cycleIndex = 0; const markup = ''; import { toUser } from '../../parse_query/lib/to_user'; -import '../../parse_query'; +import '../../parse_query/index'; import { fromUser } from '../../parse_query/lib/from_user'; const init = function () { diff --git a/src/ui/public/index_patterns/__tests__/unsupported_time_patterns.js b/src/ui/public/index_patterns/__tests__/unsupported_time_patterns.js index 51d825f30cb0a..05a02f50f851b 100644 --- a/src/ui/public/index_patterns/__tests__/unsupported_time_patterns.js +++ b/src/ui/public/index_patterns/__tests__/unsupported_time_patterns.js @@ -21,7 +21,7 @@ import ngMock from 'ng_mock'; import expect from 'expect.js'; import Chance from 'chance'; -import { Storage } from '../../storage'; +import { Storage } from '../../storage/index'; import StubBrowserStorage from 'test_utils/stub_browser_storage'; import StubIndexPatternProvider from 'test_utils/stub_index_pattern'; import { IsUserAwareOfUnsupportedTimePatternProvider } from '../unsupported_time_patterns'; diff --git a/src/ui/public/index_patterns/static_utils/index.d.ts b/src/ui/public/index_patterns/static_utils/index.d.ts new file mode 100644 index 0000000000000..d9af19e79c145 --- /dev/null +++ b/src/ui/public/index_patterns/static_utils/index.d.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. + */ + +interface SavedObject { + attributes: { + fields: string; + title: string; + }; +} + +interface IndexPattern { + fields: any[]; + title: string; +} + +export function getFromLegacyIndexPattern(indexPatterns: any[]): IndexPattern[]; diff --git a/src/ui/public/index_patterns/static_utils/index.js b/src/ui/public/index_patterns/static_utils/index.js index 09ff813bd6737..2cf43c319b10a 100644 --- a/src/ui/public/index_patterns/static_utils/index.js +++ b/src/ui/public/index_patterns/static_utils/index.js @@ -19,9 +19,7 @@ import { KBN_FIELD_TYPES } from '../../../../utils/kbn_field_types'; -const filterableTypes = KBN_FIELD_TYPES.filter(type => type.filterable).map( - type => type.name -); +const filterableTypes = KBN_FIELD_TYPES.filter(type => type.filterable).map(type => type.name); export function isFilterable(field) { return filterableTypes.includes(field.type); diff --git a/src/ui/public/parse_query/index.js b/src/ui/public/parse_query/index.ts similarity index 100% rename from src/ui/public/parse_query/index.js rename to src/ui/public/parse_query/index.ts diff --git a/src/ui/public/parse_query/lib/from_user.js b/src/ui/public/parse_query/lib/from_user.ts similarity index 74% rename from src/ui/public/parse_query/lib/from_user.js rename to src/ui/public/parse_query/lib/from_user.ts index 426e4a72794fc..bd2cb08667a07 100644 --- a/src/ui/public/parse_query/lib/from_user.js +++ b/src/ui/public/parse_query/lib/from_user.ts @@ -21,11 +21,11 @@ import _ from 'lodash'; /** * Take userInput from the user and make it into a query object - * @param {userInput} user's query input * @returns {object} + * @param userInput */ -export function fromUser(userInput) { +export function fromUser(userInput: object | string) { const matchAll = ''; if (_.isObject(userInput)) { @@ -36,17 +36,21 @@ export function fromUser(userInput) { return userInput; } - // Nope, not an object. - userInput = (userInput || '').trim(); - if (userInput.length === 0) return matchAll; + userInput = userInput || ''; + if (typeof userInput === 'string') { + userInput = userInput.trim(); + if (userInput.length === 0) { + return matchAll; + } - if (userInput[0] === '{') { - try { - return JSON.parse(userInput); - } catch (e) { + if (userInput[0] === '{') { + try { + return JSON.parse(userInput); + } catch (e) { + return userInput; + } + } else { return userInput; } - } else { - return userInput; } } diff --git a/src/ui/public/parse_query/lib/to_user.js b/src/ui/public/parse_query/lib/to_user.ts similarity index 71% rename from src/ui/public/parse_query/lib/to_user.js rename to src/ui/public/parse_query/lib/to_user.ts index a6bea74b9e0aa..dfae965d64344 100644 --- a/src/ui/public/parse_query/lib/to_user.js +++ b/src/ui/public/parse_query/lib/to_user.ts @@ -17,7 +17,6 @@ * under the License. */ -import _ from 'lodash'; import angular from 'angular'; /** @@ -25,12 +24,27 @@ import angular from 'angular'; * @param {text} model value * @returns {string} */ -export function toUser(text) { - if (text == null) return ''; - if (_.isObject(text)) { - if (text.match_all) return ''; - if (text.query_string) return toUser(text.query_string.query); +export function toUser(text: ToUserQuery | string): string { + if (text == null) { + return ''; + } + if (typeof text === 'object') { + if (text.match_all) { + return ''; + } + if (text.query_string) { + return toUser(text.query_string.query); + } return angular.toJson(text); } return '' + text; } + +interface ToUserQuery { + match_all: object; + query_string: ToUserQueryString; +} + +interface ToUserQueryString { + query: string; +} diff --git a/src/ui/public/persisted_log/directive.js b/src/ui/public/persisted_log/directive.js new file mode 100644 index 0000000000000..29f2f93093aeb --- /dev/null +++ b/src/ui/public/persisted_log/directive.js @@ -0,0 +1,26 @@ +/* + * 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 '../modules'; +import { PersistedLog } from './persisted_log'; + +uiModules.get('kibana/persisted_log') + .factory('PersistedLog', function () { + return PersistedLog; + }); diff --git a/src/ui/public/persisted_log/index.d.ts b/src/ui/public/persisted_log/index.d.ts new file mode 100644 index 0000000000000..8d22b28c7d3ec --- /dev/null +++ b/src/ui/public/persisted_log/index.d.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 { PersistedLog } from './persisted_log'; diff --git a/src/ui/public/persisted_log/index.js b/src/ui/public/persisted_log/index.js index bb2ffadbd11c6..3d8bec771dc74 100644 --- a/src/ui/public/persisted_log/index.js +++ b/src/ui/public/persisted_log/index.js @@ -17,7 +17,7 @@ * under the License. */ -import './persisted_log'; +import './directive'; export { PersistedLog } from './persisted_log'; export { recentlyAccessed } from './recently_accessed'; diff --git a/src/ui/public/persisted_log/persisted_log.js b/src/ui/public/persisted_log/persisted_log.ts similarity index 61% rename from src/ui/public/persisted_log/persisted_log.js rename to src/ui/public/persisted_log/persisted_log.ts index 01ad38b815b2c..f081c1b049feb 100644 --- a/src/ui/public/persisted_log/persisted_log.js +++ b/src/ui/public/persisted_log/persisted_log.ts @@ -17,35 +17,46 @@ * under the License. */ -import { uiModules } from '../modules'; import _ from 'lodash'; -import { Storage } from '../storage'; +import { Storage } from 'ui/storage'; const localStorage = new Storage(window.localStorage); -const defaultIsDuplicate = (oldItem, newItem) => { +const defaultIsDuplicate = (oldItem: string, newItem: string) => { return _.isEqual(oldItem, newItem); }; export class PersistedLog { - constructor(name, options = {}, storage = localStorage) { + public name: string; + public maxLength?: number; + public filterDuplicates?: boolean; + public isDuplicate: (oldItem: any, newItem: any) => boolean; + public storage: Storage; + public items: any[]; + + constructor(name: string, options: PersistedLogOptions, storage = localStorage) { this.name = name; - this.maxLength = parseInt(options.maxLength, 10); + this.maxLength = + typeof options.maxLength === 'string' + ? (this.maxLength = parseInt(options.maxLength, 10)) + : options.maxLength; this.filterDuplicates = options.filterDuplicates || false; this.isDuplicate = options.isDuplicate || defaultIsDuplicate; this.storage = storage; this.items = this.storage.get(this.name) || []; - if (!isNaN(this.maxLength)) this.items = _.take(this.items, this.maxLength); + if (this.maxLength && !isNaN(this.maxLength)) { + this.items = _.take(this.items, this.maxLength); + } } - add(val) { + public add(val: any) { if (val == null) { return this.items; } // remove any matching items from the stack if option is set if (this.filterDuplicates) { - _.remove(this.items, (item) => { + _.remove(this.items, item => { return this.isDuplicate(item, val); }); } @@ -53,19 +64,22 @@ export class PersistedLog { this.items.unshift(val); // if maxLength is set, truncate the stack - if (!isNaN(this.maxLength)) this.items = _.take(this.items, this.maxLength); + if (this.maxLength && !isNaN(this.maxLength)) { + this.items = _.take(this.items, this.maxLength); + } // persist the stack this.storage.set(this.name, this.items); return this.items; } - get() { + public get() { return _.cloneDeep(this.items); } } -uiModules.get('kibana/persisted_log') - .factory('PersistedLog', function () { - return PersistedLog; - }); +interface PersistedLogOptions { + maxLength?: number | string; + filterDuplicates?: boolean; + isDuplicate?: (oldItem: string, newItem: string) => boolean; +} diff --git a/src/ui/public/query_bar/components/index.js b/src/ui/public/query_bar/components/index.ts similarity index 99% rename from src/ui/public/query_bar/components/index.js rename to src/ui/public/query_bar/components/index.ts index 7c70033471652..ed4266589478e 100644 --- a/src/ui/public/query_bar/components/index.js +++ b/src/ui/public/query_bar/components/index.ts @@ -17,8 +17,4 @@ * under the License. */ - - export { QueryBar } from './query_bar'; - - diff --git a/src/ui/public/query_bar/components/query_bar.js b/src/ui/public/query_bar/components/query_bar.tsx similarity index 51% rename from src/ui/public/query_bar/components/query_bar.js rename to src/ui/public/query_bar/components/query_bar.tsx index b4e75155e1da2..59fbac97dd53e 100644 --- a/src/ui/public/query_bar/components/query_bar.js +++ b/src/ui/public/query_bar/components/query_bar.tsx @@ -17,22 +17,25 @@ * under the License. */ -import React, { Component } from 'react'; -import PropTypes from 'prop-types'; -import { QueryLanguageSwitcher } from './language_switcher'; -import { toUser, fromUser } from '../../parse_query/index.js'; -import { matchPairs } from '../lib/match_pairs'; -import { Suggestions } from './typeahead/suggestions'; -import { getAutocompleteProvider } from '../../autocomplete_providers'; -import { getFromLegacyIndexPattern } from '../../index_patterns/static_utils'; -import { PersistedLog } from '../../persisted_log'; -import { chrome } from '../../chrome/chrome'; +import { IndexPattern } from 'ui/index_patterns'; + +declare module '@elastic/eui' { + export const EuiOutsideClickDetector: SFC; +} + import { debounce } from 'lodash'; +import React, { Component, SFC } from 'react'; +import { PersistedLog } from 'ui/persisted_log'; +import { Storage } from 'ui/storage'; +import { getAutocompleteProvider, Suggestion } from '../../autocomplete_providers'; +import chrome from '../../chrome'; +import { getFromLegacyIndexPattern } from '../../index_patterns/static_utils'; +import { fromUser, toUser } from '../../parse_query'; +import { matchPairs } from '../lib/match_pairs'; +import { QueryLanguageSwitcher } from './language_switcher'; +import { SuggestionsComponent } from './typeahead/suggestions_component'; -import { - EuiFieldText, - EuiOutsideClickDetector, -} from '@elastic/eui'; +import { EuiFieldText, EuiOutsideClickDetector } from '@elastic/eui'; const KEY_CODES = { LEFT: 37, @@ -48,7 +51,49 @@ const KEY_CODES = { const config = chrome.getUiSettingsClient(); -export class QueryBar extends Component { +interface Query { + query: string; + language: string; +} + +interface Props { + query: Query; + onSubmit: (query: { query: string | object; language: string }) => void; + disableAutoFocus: boolean; + appName: string; + indexPatterns: IndexPattern[]; + store: Storage; +} + +interface State { + query: Query; + inputIsPristine: boolean; + isSuggestionsVisible: boolean; + index: number; + suggestions: Suggestion[]; + suggestionLimit: number; +} + +export class QueryBar extends Component { + public static getDerivedStateFromProps(nextProps: Props, prevState: State) { + if (nextProps.query.query !== prevState.query.query) { + return { + query: { + query: toUser(nextProps.query.query), + language: nextProps.query.language, + }, + }; + } else if (nextProps.query.language !== prevState.query.language) { + return { + query: { + query: '', + language: nextProps.query.language, + }, + }; + } + + return null; + } /* Keep the "draft" value in local state until the user actually submits the query. There are a couple advantages: @@ -62,25 +107,36 @@ export class QueryBar extends Component { keypress has been a major source of performance issues for us in previous implementations of the query bar. See https://github.com/elastic/kibana/issues/14086 */ - state = { + public state = { query: { query: toUser(this.props.query.query), language: this.props.query.language, }, inputIsPristine: true, isSuggestionsVisible: false, - index: null, + index: 0, suggestions: [], suggestionLimit: 50, }; - increaseLimit = () => { + public updateSuggestions = debounce(async () => { + const suggestions = (await this.getSuggestions()) || []; + if (!this.componentIsUnmounting) { + this.setState({ suggestions }); + } + }, 100); + + private inputRef: HTMLInputElement | null = null; + private componentIsUnmounting = false; + private persistedLog: PersistedLog | null = null; + + public increaseLimit = () => { this.setState({ suggestionLimit: this.state.suggestionLimit + 50, }); }; - incrementIndex = (currentIndex) => { + public incrementIndex = (currentIndex: number) => { let nextIndex = currentIndex + 1; if (currentIndex === null || nextIndex >= this.state.suggestions.length) { nextIndex = 0; @@ -88,62 +144,98 @@ export class QueryBar extends Component { this.setState({ index: nextIndex }); }; - decrementIndex = (currentIndex) => { - let previousIndex = currentIndex - 1; + public decrementIndex = (currentIndex: number) => { + const previousIndex = currentIndex - 1; if (previousIndex < 0) { - previousIndex = null; + this.setState({ index: 0 }); } this.setState({ index: previousIndex }); }; - updateSuggestions = debounce(async () => { - const suggestions = await this.getSuggestions(); - if (!this.componentIsUnmounting) { - this.setState({ suggestions }); + public getSuggestions = async () => { + if (!this.inputRef) { + return; } - }, 100); - getSuggestions = async () => { - const { query: { query, language } } = this.state; + const { + query: { query, language }, + } = this.state; const recentSearchSuggestions = this.getRecentSearchSuggestions(query); const autocompleteProvider = getAutocompleteProvider(language); - if (!autocompleteProvider) return recentSearchSuggestions; + if (!autocompleteProvider) { + return recentSearchSuggestions; + } const indexPatterns = getFromLegacyIndexPattern(this.props.indexPatterns); const getAutocompleteSuggestions = autocompleteProvider({ config, indexPatterns }); const { selectionStart, selectionEnd } = this.inputRef; - const suggestions = await getAutocompleteSuggestions({ query, selectionStart, selectionEnd }); + if (selectionStart === null || selectionEnd === null) { + return; + } + + const suggestions: Suggestion[] = await getAutocompleteSuggestions({ + query, + selectionStart, + selectionEnd, + }); return [...suggestions, ...recentSearchSuggestions]; }; - selectSuggestion = ({ type, text, start, end }) => { + public selectSuggestion = ({ + type, + text, + start, + end, + }: { + type: string; + text: string; + start: number; + end: number; + }) => { + if (!this.inputRef) { + return; + } + const query = this.state.query.query; const { selectionStart, selectionEnd } = this.inputRef; + if (selectionStart === null || selectionEnd === null) { + return; + } + const value = query.substr(0, selectionStart) + query.substr(selectionEnd); - this.setState({ - query: { - ...this.state.query, - query: value.substr(0, start) + text + value.substr(end), + this.setState( + { + query: { + ...this.state.query, + query: value.substr(0, start) + text + value.substr(end), + }, + index: 0, }, - index: null, - }, () => { - this.inputRef.setSelectionRange(start + text.length, start + text.length); - - if (type === 'recentSearch') { - this.onSubmit(); - } else { - this.updateSuggestions(); + () => { + if (!this.inputRef) { + return; + } + + this.inputRef.setSelectionRange(start + text.length, start + text.length); + + if (type === 'recentSearch') { + this.onSubmit(); + } else { + this.updateSuggestions(); + } } - }); + ); }; - getRecentSearchSuggestions = (query) => { - if (!this.persistedLog) return []; + public getRecentSearchSuggestions = (query: string) => { + if (!this.persistedLog) { + return []; + } const recentSearches = this.persistedLog.get(); - const matchingRecentSearches = recentSearches.filter((recentQuery) => { + const matchingRecentSearches = recentSearches.filter(recentQuery => { const recentQueryString = typeof recentQuery === 'object' ? toUser(recentQuery) : recentQuery; return recentQueryString.includes(query); }); @@ -155,27 +247,29 @@ export class QueryBar extends Component { }); }; - onOutsideClick = () => { + public onOutsideClick = () => { this.setState({ isSuggestionsVisible: false }); }; - onClickInput = (event) => { - this.onInputChange(event); + public onClickInput = (event: React.MouseEvent) => { + if (event.target instanceof HTMLInputElement) { + this.onInputChange(event.target.value); + } }; - onClickSuggestion = (suggestion) => { + public onClickSuggestion = (suggestion: Suggestion) => { + if (!this.inputRef) { + return; + } this.selectSuggestion(suggestion); this.inputRef.focus(); }; - onMouseEnterSuggestion = (index) => { + public onMouseEnterSuggestion = (index: number) => { this.setState({ index }); }; - onInputChange = (event) => { - this.updateSuggestions(); - - const { value } = event.target; + public onInputChange = (value: string) => { const hasValue = Boolean(value.trim()); this.setState({ @@ -185,87 +279,101 @@ export class QueryBar extends Component { }, inputIsPristine: false, isSuggestionsVisible: hasValue, - index: null, + index: 0, suggestionLimit: 50, }); }; - onKeyUp = (event) => { + public onChange = (event: React.ChangeEvent) => { + this.updateSuggestions(); + this.onInputChange(event.target.value); + }; + + public onKeyUp = (event: React.KeyboardEvent) => { if ([KEY_CODES.LEFT, KEY_CODES.RIGHT, KEY_CODES.HOME, KEY_CODES.END].includes(event.keyCode)) { this.setState({ isSuggestionsVisible: true }); - this.onInputChange(event); + if (event.target instanceof HTMLInputElement) { + this.onInputChange(event.target.value); + } } }; - onKeyDown = (event) => { - const { isSuggestionsVisible, index } = this.state; - const preventDefault = event.preventDefault.bind(event); - const { target, key, metaKey } = event; - const { value, selectionStart, selectionEnd } = target; - const updateQuery = (query, selectionStart, selectionEnd) => { - this.setState( - { - query: { - ...this.state.query, - query, + public onKeyDown = (event: React.KeyboardEvent) => { + if (event.target instanceof HTMLInputElement) { + const { isSuggestionsVisible, index } = this.state; + const preventDefault = event.preventDefault.bind(event); + const { target, key, metaKey } = event; + const { value, selectionStart, selectionEnd } = target; + const updateQuery = (query: string, newSelectionStart: number, newSelectionEnd: number) => { + this.setState( + { + query: { + ...this.state.query, + query, + }, }, - }, - () => { - target.setSelectionRange(selectionStart, selectionEnd); - }, - ); - }; + () => { + target.setSelectionRange(newSelectionStart, newSelectionEnd); + } + ); + }; - switch (event.keyCode) { - case KEY_CODES.DOWN: - event.preventDefault(); - if (isSuggestionsVisible) { - this.incrementIndex(index); - } else { - this.setState({ isSuggestionsVisible: true, index: 0 }); - } - break; - case KEY_CODES.UP: - event.preventDefault(); - if (isSuggestionsVisible) { - this.decrementIndex(index); - } - break; - case KEY_CODES.ENTER: - event.preventDefault(); - if (isSuggestionsVisible && this.state.suggestions[index]) { - this.selectSuggestion(this.state.suggestions[index]); - } else { - this.onSubmit(event); - } - break; - case KEY_CODES.ESC: - event.preventDefault(); - this.setState({ isSuggestionsVisible: false }); - break; - case KEY_CODES.TAB: - this.setState({ isSuggestionsVisible: false }); - break; - default: - matchPairs({ - value, - selectionStart, - selectionEnd, - key, - metaKey, - updateQuery, - preventDefault, - }); - break; + switch (event.keyCode) { + case KEY_CODES.DOWN: + event.preventDefault(); + if (isSuggestionsVisible) { + this.incrementIndex(index); + } else { + this.setState({ isSuggestionsVisible: true, index: 0 }); + } + break; + case KEY_CODES.UP: + event.preventDefault(); + if (isSuggestionsVisible) { + this.decrementIndex(index); + } + break; + case KEY_CODES.ENTER: + event.preventDefault(); + if (isSuggestionsVisible && this.state.suggestions[index]) { + this.selectSuggestion(this.state.suggestions[index]); + } else { + this.onSubmit(event.preventDefault); + } + break; + case KEY_CODES.ESC: + event.preventDefault(); + this.setState({ isSuggestionsVisible: false }); + break; + case KEY_CODES.TAB: + this.setState({ isSuggestionsVisible: false }); + break; + default: + if (selectionStart !== null && selectionEnd !== null) { + matchPairs({ + value, + selectionStart, + selectionEnd, + key, + metaKey, + updateQuery, + preventDefault, + }); + } + + break; + } } }; - onSubmit = (event) => { - if (event) { - event.preventDefault(); + public onSubmit = (preventDefault?: () => void) => { + if (preventDefault) { + preventDefault(); } - this.persistedLog.add(this.state.query.query); + if (this.persistedLog) { + this.persistedLog.add(this.state.query.query); + } this.props.onSubmit({ query: fromUser(this.state.query.query), @@ -274,55 +382,38 @@ export class QueryBar extends Component { this.setState({ isSuggestionsVisible: false }); }; - componentDidMount() { - this.persistedLog = new PersistedLog(`typeahead:${this.props.appName}-${this.state.query.language}`, { - maxLength: config.get('history:limit'), - filterDuplicates: true, - }); + public componentDidMount() { + this.persistedLog = new PersistedLog( + `typeahead:${this.props.appName}-${this.state.query.language}`, + { + maxLength: config.get('history:limit'), + filterDuplicates: true, + } + ); this.updateSuggestions(); } - static getDerivedStateFromProps(nextProps, prevState) { - if (nextProps.query.query !== prevState.query.query) { - return { - query: { - query: toUser(nextProps.query.query), - language: nextProps.query.language, - }, - }; - } - else if (nextProps.query.language !== prevState.query.language) { - return { - query: { - query: '', - language: nextProps.query.language, - }, - }; - } - - return null; - } - - componentDidUpdate(prevProps) { + public componentDidUpdate(prevProps: Props) { if (prevProps.query.language !== this.props.query.language) { - this.persistedLog = new PersistedLog(`typeahead:${this.props.appName}-${this.state.query.language}`, { - maxLength: config.get('history:limit'), - filterDuplicates: true, - }); + this.persistedLog = new PersistedLog( + `typeahead:${this.props.appName}-${this.state.query.language}`, + { + maxLength: config.get('history:limit'), + filterDuplicates: true, + } + ); this.updateSuggestions(); } } - componentWillUnmount() { + public componentWillUnmount() { this.updateSuggestions.cancel(); this.componentIsUnmounting = true; } - render() { + public render() { return ( - + {/* position:relative required on container so the suggestions appear under the query bar*/}
-
-
+ +
{ + onSelectLanguage={language => { this.props.store.set('kibana.userQueryLanguage', language); this.props.onSubmit({ query: '', - language: language, + language, }); }} /> @@ -381,7 +468,7 @@ export class QueryBar extends Component {
- void; + onMouseEnter: () => void; + selected: boolean; + suggestion: Suggestion; + innerRef: (node: HTMLDivElement) => void; + ariaId: string; +} + +export const SuggestionComponent: SFC = props => { return (
-
- +
+
{props.suggestion.text}
); -} - - -Suggestion.propTypes = { - onClick: PropTypes.func.isRequired, - onMouseEnter: PropTypes.func.isRequired, - selected: PropTypes.bool, - suggestion: PropTypes.object.isRequired, - innerRef: PropTypes.func.isRequired, - ariaId: PropTypes.string.isRequired, }; - diff --git a/src/ui/public/query_bar/components/typeahead/suggestions.js b/src/ui/public/query_bar/components/typeahead/suggestions_component.tsx similarity index 77% rename from src/ui/public/query_bar/components/typeahead/suggestions.js rename to src/ui/public/query_bar/components/typeahead/suggestions_component.tsx index 6a775901b6383..014729a8bc3b1 100644 --- a/src/ui/public/query_bar/components/typeahead/suggestions.js +++ b/src/ui/public/query_bar/components/typeahead/suggestions_component.tsx @@ -17,61 +17,33 @@ * under the License. */ - - -import React, { Component } from 'react'; -import PropTypes from 'prop-types'; import { isEmpty } from 'lodash'; -import { Suggestion } from './suggestion'; +import React, { Component } from 'react'; +import { Suggestion } from 'ui/autocomplete_providers'; import './suggestion.less'; +import { SuggestionComponent } from './suggestion_component'; + +interface Props { + index: number; + onClick: (suggestion: Suggestion) => void; + onMouseEnter: (index: number) => void; + show: boolean; + suggestions: Suggestion[]; + loadMore: () => void; +} -export class Suggestions extends Component { - childNodes = []; - - scrollIntoView = () => { - const parent = this.parentNode; - const child = this.childNodes[this.props.index]; - - if (this.props.index == null || !parent || !child) { - return; - } - - const scrollTop = Math.max( - Math.min(parent.scrollTop, child.offsetTop), - child.offsetTop + child.offsetHeight - parent.offsetHeight - ); - - parent.scrollTop = scrollTop; - }; - - handleScroll = () => { - if (!this.props.loadMore) return; - - const position = this.parentNode.scrollTop + this.parentNode.offsetHeight; - const height = this.parentNode.scrollHeight; - const remaining = height - position; - const margin = 50; - - if (!height || !position) return; - if (remaining <= margin) { - this.props.loadMore(); - } - }; - - componentDidUpdate(prevProps) { - if (prevProps.index !== this.props.index) { - this.scrollIntoView(); - } - } +export class SuggestionsComponent extends Component { + private childNodes: HTMLDivElement[] = []; + private parentNode: HTMLDivElement | null = null; - render() { + public render() { if (!this.props.show || isEmpty(this.props.suggestions)) { return null; } const suggestions = this.props.suggestions.map((suggestion, index) => { return ( - (this.childNodes[index] = node)} selected={index === this.props.index} suggestion={suggestion} @@ -101,13 +73,44 @@ export class Suggestions extends Component {
); } -} -Suggestions.propTypes = { - index: PropTypes.number, - onClick: PropTypes.func.isRequired, - onMouseEnter: PropTypes.func.isRequired, - show: PropTypes.bool, - suggestions: PropTypes.array.isRequired, - loadMore: PropTypes.func, -}; + public componentDidUpdate(prevProps: Props) { + if (prevProps.index !== this.props.index) { + this.scrollIntoView(); + } + } + + private scrollIntoView = () => { + const parent = this.parentNode; + const child = this.childNodes[this.props.index]; + + if (this.props.index == null || !parent || !child) { + return; + } + + const scrollTop = Math.max( + Math.min(parent.scrollTop, child.offsetTop), + child.offsetTop + child.offsetHeight - parent.offsetHeight + ); + + parent.scrollTop = scrollTop; + }; + + private handleScroll = () => { + if (!this.props.loadMore || !this.parentNode) { + return; + } + + const position = this.parentNode.scrollTop + this.parentNode.offsetHeight; + const height = this.parentNode.scrollHeight; + const remaining = height - position; + const margin = 50; + + if (!height || !position) { + return; + } + if (remaining <= margin) { + this.props.loadMore(); + } + }; +} diff --git a/src/ui/public/query_bar/index.js b/src/ui/public/query_bar/index.ts similarity index 99% rename from src/ui/public/query_bar/index.js rename to src/ui/public/query_bar/index.ts index 624029da39d86..6b41af67783b4 100644 --- a/src/ui/public/query_bar/index.js +++ b/src/ui/public/query_bar/index.ts @@ -18,5 +18,3 @@ */ export { QueryBar } from './components'; - - diff --git a/src/ui/public/query_bar/lib/match_pairs.js b/src/ui/public/query_bar/lib/match_pairs.ts similarity index 72% rename from src/ui/public/query_bar/lib/match_pairs.js rename to src/ui/public/query_bar/lib/match_pairs.ts index c08bce349a731..d5cfb4f99c9d5 100644 --- a/src/ui/public/query_bar/lib/match_pairs.js +++ b/src/ui/public/query_bar/lib/match_pairs.ts @@ -34,6 +34,16 @@ const pairs = ['()', '[]', '{}', `''`, '""']; const openers = pairs.map(pair => pair[0]); const closers = pairs.map(pair => pair[1]); +interface MatchPairsOptions { + value: string; + selectionStart: number; + selectionEnd: number; + key: string; + metaKey: boolean; + updateQuery: (query: string, selectionStart: number, selectionEnd: number) => void; + preventDefault: () => void; +} + export function matchPairs({ value, selectionStart, @@ -42,7 +52,7 @@ export function matchPairs({ metaKey, updateQuery, preventDefault, -}) { +}: MatchPairsOptions) { if (shouldMoveCursorForward(key, value, selectionStart, selectionEnd)) { preventDefault(); updateQuery(value, selectionStart + 1, selectionEnd + 1); @@ -62,38 +72,70 @@ export function matchPairs({ } } - -function shouldMoveCursorForward(key, value, selectionStart, selectionEnd) { - if (!closers.includes(key)) return false; +function shouldMoveCursorForward( + key: string, + value: string, + selectionStart: number, + selectionEnd: number +) { + if (!closers.includes(key)) { + return false; + } // Never move selection forward for multi-character selections - if (selectionStart !== selectionEnd) return false; + if (selectionStart !== selectionEnd) { + return false; + } // Move selection forward if the key is the same as the closer in front of the selection return value.charAt(selectionEnd) === key; } -function shouldInsertMatchingCloser(key, value, selectionStart, selectionEnd) { - if (!openers.includes(key)) return false; +function shouldInsertMatchingCloser( + key: string, + value: string, + selectionStart: number, + selectionEnd: number +) { + if (!openers.includes(key)) { + return false; + } // Always insert for multi-character selections - if (selectionStart !== selectionEnd) return true; + if (selectionStart !== selectionEnd) { + return true; + } const precedingCharacter = value.charAt(selectionStart - 1); const followingCharacter = value.charAt(selectionStart + 1); // Don't insert if the preceding character is a backslash - if (precedingCharacter === '\\') return false; + if (precedingCharacter === '\\') { + return false; + } // Don't insert if it's a quote and the either of the preceding/following characters is alphanumeric - return !(['"', `'`].includes(key) && (isAlphanumeric(precedingCharacter) || isAlphanumeric(followingCharacter))); + return !( + ['"', `'`].includes(key) && + (isAlphanumeric(precedingCharacter) || isAlphanumeric(followingCharacter)) + ); } -function shouldRemovePair(key, metaKey, value, selectionStart, selectionEnd) { - if (key !== 'Backspace' || metaKey) return false; +function shouldRemovePair( + key: string, + metaKey: boolean, + value: string, + selectionStart: number, + selectionEnd: number +) { + if (key !== 'Backspace' || metaKey) { + return false; + } // Never remove for multi-character selections - if (selectionStart !== selectionEnd) return false; + if (selectionStart !== selectionEnd) { + return false; + } // Remove if the preceding/following characters are a pair return pairs.includes(value.substr(selectionEnd - 1, 2)); diff --git a/src/ui/public/storage/storage.js b/src/ui/public/storage/directive.js similarity index 66% rename from src/ui/public/storage/storage.js rename to src/ui/public/storage/directive.js index aea032be4fd6b..a5bb2ee3b6b0b 100644 --- a/src/ui/public/storage/storage.js +++ b/src/ui/public/storage/directive.js @@ -17,37 +17,9 @@ * under the License. */ -import { uiModules } from '../modules'; -import angular from 'angular'; - -export function Storage(store) { - const self = this; - self.store = store; - - self.get = function (key) { - try { - return JSON.parse(self.store.getItem(key)); - } catch (e) { - return null; - } - }; - - self.set = function (key, value) { - try { - return self.store.setItem(key, angular.toJson(value)); - } catch (e) { - return false; - } - }; - - self.remove = function (key) { - return self.store.removeItem(key); - }; - self.clear = function () { - return self.store.clear(); - }; -} +import { uiModules } from '../modules'; +import { Storage } from './storage'; const createService = function (type) { return function ($window) { diff --git a/src/ui/public/storage/index.js b/src/ui/public/storage/index.ts similarity index 97% rename from src/ui/public/storage/index.js rename to src/ui/public/storage/index.ts index d2a214ea3d30a..17bbb61b2b8d5 100644 --- a/src/ui/public/storage/index.js +++ b/src/ui/public/storage/index.ts @@ -17,4 +17,6 @@ * under the License. */ +import './directive'; + export { Storage } from './storage'; diff --git a/src/ui/public/storage/storage.ts b/src/ui/public/storage/storage.ts new file mode 100644 index 0000000000000..5a97cdfdbbc64 --- /dev/null +++ b/src/ui/public/storage/storage.ts @@ -0,0 +1,58 @@ +/* + * 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 angular from 'angular'; + +// This is really silly, but I wasn't prepared to rename the kibana Storage class everywhere it is used +// and this is the only way I could figure out how to use the type definition for a built in object +// in a file that creates a type with the same name as that built in object. +import { WebStorage } from './web_storage'; + +export class Storage { + public store: WebStorage; + + constructor(store: WebStorage) { + this.store = store; + } + + public get = (key: string) => { + const storageItem = this.store.getItem(key); + if (storageItem === null) { + return null; + } else { + return JSON.parse(storageItem); + } + }; + + public set = (key: string, value: any) => { + try { + return this.store.setItem(key, angular.toJson(value)); + } catch (e) { + return false; + } + }; + + public remove = (key: string) => { + return this.store.removeItem(key); + }; + + public clear = () => { + return this.store.clear(); + }; +} diff --git a/src/ui/public/storage/web_storage.ts b/src/ui/public/storage/web_storage.ts new file mode 100644 index 0000000000000..d5f775431143d --- /dev/null +++ b/src/ui/public/storage/web_storage.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 type WebStorage = Storage; From cc8cf1e76622ef7e7d86afb73437e9090686be1e Mon Sep 17 00:00:00 2001 From: Matthew Bargar Date: Tue, 16 Oct 2018 11:15:17 -0400 Subject: [PATCH 32/54] clean up some unnecessary import changes that happened automatically --- src/ui/public/autoload/modules.js | 4 ++-- src/ui/public/chrome/chrome.js | 2 +- .../index_patterns/__tests__/unsupported_time_patterns.js | 2 +- 3 files changed, 4 insertions(+), 4 deletions(-) diff --git a/src/ui/public/autoload/modules.js b/src/ui/public/autoload/modules.js index fc29a38b4f5b2..107be2145995c 100644 --- a/src/ui/public/autoload/modules.js +++ b/src/ui/public/autoload/modules.js @@ -35,14 +35,14 @@ import '../filter_manager'; import '../index_patterns'; import '../listen'; import '../notify'; -import '../parse_query/index'; +import '../parse_query'; import '../persisted_log'; import '../private'; import '../promises'; import '../modals'; import '../state_management/app_state'; import '../state_management/global_state'; -import '../storage/index'; +import '../storage'; import '../style_compile'; import '../timefilter'; import '../timepicker'; diff --git a/src/ui/public/chrome/chrome.js b/src/ui/public/chrome/chrome.js index d615d2de3cb9a..ffd3e5da25948 100644 --- a/src/ui/public/chrome/chrome.js +++ b/src/ui/public/chrome/chrome.js @@ -26,7 +26,7 @@ import '../config'; import '../notify'; import '../private'; import '../promises'; -import '../storage/index'; +import '../storage'; import '../directives/kbn_src'; import '../watch_multi'; import './services'; diff --git a/src/ui/public/index_patterns/__tests__/unsupported_time_patterns.js b/src/ui/public/index_patterns/__tests__/unsupported_time_patterns.js index 05a02f50f851b..51d825f30cb0a 100644 --- a/src/ui/public/index_patterns/__tests__/unsupported_time_patterns.js +++ b/src/ui/public/index_patterns/__tests__/unsupported_time_patterns.js @@ -21,7 +21,7 @@ import ngMock from 'ng_mock'; import expect from 'expect.js'; import Chance from 'chance'; -import { Storage } from '../../storage/index'; +import { Storage } from '../../storage'; import StubBrowserStorage from 'test_utils/stub_browser_storage'; import StubIndexPatternProvider from 'test_utils/stub_index_pattern'; import { IsUserAwareOfUnsupportedTimePatternProvider } from '../unsupported_time_patterns'; From a69f81acb62051b32e24e809b2a354233c8eaf90 Mon Sep 17 00:00:00 2001 From: Matthew Bargar Date: Tue, 16 Oct 2018 12:09:14 -0400 Subject: [PATCH 33/54] fix edge case bug --- src/ui/public/query_bar/components/query_bar.tsx | 7 ++++--- .../components/typeahead/suggestion_component.tsx | 1 + 2 files changed, 5 insertions(+), 3 deletions(-) diff --git a/src/ui/public/query_bar/components/query_bar.tsx b/src/ui/public/query_bar/components/query_bar.tsx index 59fbac97dd53e..5ec9d98e32c0b 100644 --- a/src/ui/public/query_bar/components/query_bar.tsx +++ b/src/ui/public/query_bar/components/query_bar.tsx @@ -147,9 +147,10 @@ export class QueryBar extends Component { public decrementIndex = (currentIndex: number) => { const previousIndex = currentIndex - 1; if (previousIndex < 0) { - this.setState({ index: 0 }); + this.setState({ index: this.state.suggestions.length - 1 }); + } else { + this.setState({ index: previousIndex }); } - this.setState({ index: previousIndex }); }; public getSuggestions = async () => { @@ -338,7 +339,7 @@ export class QueryBar extends Component { if (isSuggestionsVisible && this.state.suggestions[index]) { this.selectSuggestion(this.state.suggestions[index]); } else { - this.onSubmit(event.preventDefault); + this.onSubmit(() => event.preventDefault()); } break; case KEY_CODES.ESC: diff --git a/src/ui/public/query_bar/components/typeahead/suggestion_component.tsx b/src/ui/public/query_bar/components/typeahead/suggestion_component.tsx index a385fd2f68f62..509b026a9d11d 100644 --- a/src/ui/public/query_bar/components/typeahead/suggestion_component.tsx +++ b/src/ui/public/query_bar/components/typeahead/suggestion_component.tsx @@ -71,6 +71,7 @@ export const SuggestionComponent: SFC = props => { // Description currently always comes from us and we escape any potential user input // at the time we're generating the description text // eslint-disable-next-line react/no-danger + // @ts-ignore dangerouslySetInnerHTML={{ __html: props.suggestion.description }} />
From a7500324858f21c49eae4cfffad898955adbd348 Mon Sep 17 00:00:00 2001 From: Matthew Bargar Date: Tue, 16 Oct 2018 15:27:46 -0400 Subject: [PATCH 34/54] update and switch persisted log tests to jest and typescript --- ...sted_log.test.js => persisted_log.test.ts} | 105 ++++++++++-------- src/ui/public/persisted_log/persisted_log.ts | 4 +- 2 files changed, 59 insertions(+), 50 deletions(-) rename src/ui/public/persisted_log/{persisted_log.test.js => persisted_log.test.ts} (52%) diff --git a/src/ui/public/persisted_log/persisted_log.test.js b/src/ui/public/persisted_log/persisted_log.test.ts similarity index 52% rename from src/ui/public/persisted_log/persisted_log.test.js rename to src/ui/public/persisted_log/persisted_log.test.ts index ee9c26d573573..e0bc8f2c3525f 100644 --- a/src/ui/public/persisted_log/persisted_log.test.js +++ b/src/ui/public/persisted_log/persisted_log.test.ts @@ -17,14 +17,28 @@ * under the License. */ +import { PersistedLog } from './persisted_log'; + +const createMockWebStorage = () => ({ + clear: jest.fn(), + getItem: jest.fn(), + key: jest.fn(), + removeItem: jest.fn(), + setItem: jest.fn(), + length: 0, +}); -import sinon from 'sinon'; -import expect from 'expect.js'; -import { PersistedLog } from './'; +const createMockStorage = () => ({ + store: createMockWebStorage(), + get: jest.fn(), + set: jest.fn(), + remove: jest.fn(), + clear: jest.fn(), +}); jest.mock('ui/chrome', () => { return { - getBasePath: () => `/some/base/path` + getBasePath: () => `/some/base/path`, }; }); @@ -33,107 +47,102 @@ const historyLimit = 10; const payload = [ { first: 'clark', last: 'kent' }, { first: 'peter', last: 'parker' }, - { first: 'bruce', last: 'wayne' } + { first: 'bruce', last: 'wayne' }, ]; -describe('PersistedLog', function () { - - let storage; - beforeEach(function () { - storage = { - get: sinon.stub(), - set: sinon.stub(), - remove: sinon.spy(), - clear: sinon.spy() - }; +describe('PersistedLog', () => { + let storage = createMockStorage(); + beforeEach(() => { + storage = createMockStorage(); }); - describe('expected API', function () { - test('has expected methods', function () { - const log = new PersistedLog(historyName); + describe('expected API', () => { + test('has expected methods', () => { + const log = new PersistedLog(historyName, {}, storage); - expect(log.add).to.be.a('function'); - expect(log.get).to.be.a('function'); + expect(typeof log.add).toBe('function'); + expect(typeof log.get).toBe('function'); }); }); - describe('internal functionality', function () { - test('reads from storage', function () { - new PersistedLog(historyName, {}, storage); + describe('internal functionality', () => { + test('reads from storage', () => { + // @ts-ignore + const log = new PersistedLog(historyName, {}, storage); - expect(storage.get.calledOnce).to.be(true); - expect(storage.get.calledWith(historyName)).to.be(true); + expect(storage.get).toHaveBeenCalledTimes(1); + expect(storage.get).toHaveBeenCalledWith(historyName); }); - test('writes to storage', function () { + test('writes to storage', () => { const log = new PersistedLog(historyName, {}, storage); const newItem = { first: 'diana', last: 'prince' }; const data = log.add(newItem); - expect(storage.set.calledOnce).to.be(true); - expect(data).to.eql([newItem]); + expect(storage.set).toHaveBeenCalledTimes(1); + expect(data).toEqual([newItem]); }); }); - describe('persisting data', function () { - test('fetches records from storage', function () { - storage.get.returns(payload); + describe('persisting data', () => { + test('fetches records from storage', () => { + storage.get.mockReturnValue(payload); const log = new PersistedLog(historyName, {}, storage); const items = log.get(); - expect(items.length).to.equal(3); - expect(items).to.eql(payload); + expect(items.length).toBe(3); + expect(items).toEqual(payload); }); - test('prepends new records', function () { - storage.get.returns(payload.slice(0)); + test('prepends new records', () => { + storage.get.mockReturnValue(payload.slice(0)); const log = new PersistedLog(historyName, {}, storage); const newItem = { first: 'selina', last: 'kyle' }; const items = log.add(newItem); - expect(items.length).to.equal(payload.length + 1); - expect(items[0]).to.eql(newItem); + expect(items.length).toBe(payload.length + 1); + expect(items[0]).toEqual(newItem); }); }); - describe('stack options', function () { - test('should observe the maxLength option', function () { + describe('stack options', () => { + test('should observe the maxLength option', () => { const bulkData = []; for (let i = 0; i < historyLimit; i++) { bulkData.push(['record ' + i]); } - storage.get.returns(bulkData); + storage.get.mockReturnValue(bulkData); const log = new PersistedLog(historyName, { maxLength: historyLimit }, storage); log.add(['new array 1']); const items = log.add(['new array 2']); - expect(items.length).to.equal(historyLimit); + expect(items.length).toBe(historyLimit); }); - test('should observe the filterDuplicates option', function () { - storage.get.returns(payload.slice(0)); + test('should observe the filterDuplicates option', () => { + storage.get.mockReturnValue(payload.slice(0)); const log = new PersistedLog(historyName, { filterDuplicates: true }, storage); const newItem = payload[1]; const items = log.add(newItem); - expect(items.length).to.equal(payload.length); + expect(items.length).toBe(payload.length); }); test('should truncate the list upon initialization if too long', () => { - storage.get.returns(payload.slice(0)); + storage.get.mockReturnValue(payload.slice(0)); const log = new PersistedLog(historyName, { maxLength: 1 }, storage); const items = log.get(); - expect(items.length).to.equal(1); + expect(items.length).toBe(1); }); test('should allow a maxLength of 0', () => { - storage.get.returns(payload.slice(0)); + storage.get.mockReturnValue(payload.slice(0)); const log = new PersistedLog(historyName, { maxLength: 0 }, storage); const items = log.get(); - expect(items.length).to.equal(0); + expect(items.length).toBe(0); }); }); }); diff --git a/src/ui/public/persisted_log/persisted_log.ts b/src/ui/public/persisted_log/persisted_log.ts index f081c1b049feb..eee1d4b9a03ec 100644 --- a/src/ui/public/persisted_log/persisted_log.ts +++ b/src/ui/public/persisted_log/persisted_log.ts @@ -34,7 +34,7 @@ export class PersistedLog { public storage: Storage; public items: any[]; - constructor(name: string, options: PersistedLogOptions, storage = localStorage) { + constructor(name: string, options: PersistedLogOptions = {}, storage = localStorage) { this.name = name; this.maxLength = typeof options.maxLength === 'string' @@ -44,7 +44,7 @@ export class PersistedLog { this.isDuplicate = options.isDuplicate || defaultIsDuplicate; this.storage = storage; this.items = this.storage.get(this.name) || []; - if (this.maxLength && !isNaN(this.maxLength)) { + if (this.maxLength !== undefined && !isNaN(this.maxLength)) { this.items = _.take(this.items, this.maxLength); } } From e30ce40afa253a797fe302c6182ff5dd0da31c0e Mon Sep 17 00:00:00 2001 From: Matthew Bargar Date: Wed, 17 Oct 2018 10:36:21 -0400 Subject: [PATCH 35/54] update and switch persisted log tests to jest and typescript --- .../language_switcher.test.tsx.snap | 189 ++++++++++++++++++ .../components/language_switcher.test.tsx | 65 ++++++ .../components/language_switcher.tsx | 1 + 3 files changed, 255 insertions(+) create mode 100644 src/ui/public/query_bar/components/__snapshots__/language_switcher.test.tsx.snap create mode 100644 src/ui/public/query_bar/components/language_switcher.test.tsx diff --git a/src/ui/public/query_bar/components/__snapshots__/language_switcher.test.tsx.snap b/src/ui/public/query_bar/components/__snapshots__/language_switcher.test.tsx.snap new file mode 100644 index 0000000000000..d0c5fd332de2c --- /dev/null +++ b/src/ui/public/query_bar/components/__snapshots__/language_switcher.test.tsx.snap @@ -0,0 +1,189 @@ +// Jest Snapshot v1, https://goo.gl/fbAQLP + +exports[`LanguageSwitcher should toggle off if language is lucene 1`] = ` + + Options + + } + closePopover={[Function]} + hasArrow={true} + id="popover" + isOpen={false} + ownFocus={true} + panelPaddingSize="m" + withTitle={true} +> + + Syntax options + +
+ +

+ Our experimental autocomplete and simple syntax features can help you create your queries. Just start typing and you’ll see matches related to your data. See docs + + + here + + . +

+ + + + + + + + + +

+ Not ready yet? Find our lucene docs + + + here + + . +

+ +
+ +`; + +exports[`LanguageSwitcher should toggle on if language is kuery 1`] = ` + + Options + + } + closePopover={[Function]} + hasArrow={true} + id="popover" + isOpen={false} + ownFocus={true} + panelPaddingSize="m" + withTitle={true} +> + + Syntax options + +
+ +

+ Our experimental autocomplete and simple syntax features can help you create your queries. Just start typing and you’ll see matches related to your data. See docs + + + here + + . +

+ + + + + + + + + +

+ Not ready yet? Find our lucene docs + + + here + + . +

+ +
+ +`; diff --git a/src/ui/public/query_bar/components/language_switcher.test.tsx b/src/ui/public/query_bar/components/language_switcher.test.tsx new file mode 100644 index 0000000000000..1bc43920f4cc6 --- /dev/null +++ b/src/ui/public/query_bar/components/language_switcher.test.tsx @@ -0,0 +1,65 @@ +/* + * 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. + */ + +jest.mock('../../metadata', () => ({ + metadata: { + branch: 'foo', + }, +})); + +import { shallow } from 'enzyme'; +import React from 'react'; +import { QueryLanguageSwitcher } from './language_switcher'; + +describe('LanguageSwitcher', () => { + it('should toggle off if language is lucene', () => { + const component = shallow( + { + return; + }} + /> + ); + + expect(component).toMatchSnapshot(); + }); + + it('should toggle on if language is kuery', () => { + const component = shallow( + { + return; + }} + /> + ); + + expect(component).toMatchSnapshot(); + }); + + it('call onSelectLanguage when the toggle is clicked', () => { + const callback = jest.fn(); + const component = shallow( + + ); + component.find('[data-test-subj="languageToggle"]').simulate('change'); + expect(callback).toHaveBeenCalledTimes(1); + }); +}); diff --git a/src/ui/public/query_bar/components/language_switcher.tsx b/src/ui/public/query_bar/components/language_switcher.tsx index ec57e3611dddd..5c5283520424a 100644 --- a/src/ui/public/query_bar/components/language_switcher.tsx +++ b/src/ui/public/query_bar/components/language_switcher.tsx @@ -95,6 +95,7 @@ export class QueryLanguageSwitcher extends Component { label="Turn on query features" checked={this.props.language === 'kuery'} onChange={this.onSwitchChange} + data-test-subj="languageToggle" /> From 5f4500b2ca4efa4abc87e72d9f5f47b26658250e Mon Sep 17 00:00:00 2001 From: Matthew Bargar Date: Wed, 17 Oct 2018 12:43:10 -0400 Subject: [PATCH 36/54] fixes errors after rebasing on Felix's autocomplete types --- .../public/autocomplete_providers/index.d.ts | 11 +++++++--- .../index_patterns/static_utils/index.d.ts | 9 +++----- .../public/query_bar/components/query_bar.tsx | 21 ++++++++++++------- 3 files changed, 24 insertions(+), 17 deletions(-) diff --git a/src/ui/public/autocomplete_providers/index.d.ts b/src/ui/public/autocomplete_providers/index.d.ts index 4f18ca62d29de..9c252bb05e52b 100644 --- a/src/ui/public/autocomplete_providers/index.d.ts +++ b/src/ui/public/autocomplete_providers/index.d.ts @@ -28,7 +28,7 @@ export type AutocompleteProvider = ( get(configKey: string): any; }; indexPatterns: StaticIndexPattern[]; - boolFilter: any; + boolFilter?: any; } ) => GetSuggestions; @@ -40,10 +40,15 @@ export type GetSuggestions = ( } ) => Promise; -export type AutocompleteSuggestionType = 'field' | 'value' | 'operator' | 'conjunction'; +export type AutocompleteSuggestionType = + | 'field' + | 'value' + | 'operator' + | 'conjunction' + | 'recentSearch'; export interface AutocompleteSuggestion { - description: string; + description?: string; end: number; start: number; text: string; diff --git a/src/ui/public/index_patterns/static_utils/index.d.ts b/src/ui/public/index_patterns/static_utils/index.d.ts index d9af19e79c145..6d387bb95882f 100644 --- a/src/ui/public/index_patterns/static_utils/index.d.ts +++ b/src/ui/public/index_patterns/static_utils/index.d.ts @@ -17,6 +17,8 @@ * under the License. */ +import { StaticIndexPattern } from 'ui/index_patterns'; + interface SavedObject { attributes: { fields: string; @@ -24,9 +26,4 @@ interface SavedObject { }; } -interface IndexPattern { - fields: any[]; - title: string; -} - -export function getFromLegacyIndexPattern(indexPatterns: any[]): IndexPattern[]; +export function getFromLegacyIndexPattern(indexPatterns: any[]): StaticIndexPattern[]; diff --git a/src/ui/public/query_bar/components/query_bar.tsx b/src/ui/public/query_bar/components/query_bar.tsx index 5ec9d98e32c0b..4e2c2a501061f 100644 --- a/src/ui/public/query_bar/components/query_bar.tsx +++ b/src/ui/public/query_bar/components/query_bar.tsx @@ -25,11 +25,15 @@ declare module '@elastic/eui' { import { debounce } from 'lodash'; import React, { Component, SFC } from 'react'; +import { getFromLegacyIndexPattern } from 'ui/index_patterns/static_utils'; import { PersistedLog } from 'ui/persisted_log'; import { Storage } from 'ui/storage'; -import { getAutocompleteProvider, Suggestion } from '../../autocomplete_providers'; +import { + AutocompleteSuggestion, + AutocompleteSuggestionType, + getAutocompleteProvider, +} from '../../autocomplete_providers'; import chrome from '../../chrome'; -import { getFromLegacyIndexPattern } from '../../index_patterns/static_utils'; import { fromUser, toUser } from '../../parse_query'; import { matchPairs } from '../lib/match_pairs'; import { QueryLanguageSwitcher } from './language_switcher'; @@ -50,6 +54,7 @@ const KEY_CODES = { }; const config = chrome.getUiSettingsClient(); +const recentSearchType: AutocompleteSuggestionType = 'recentSearch'; interface Query { query: string; @@ -70,7 +75,7 @@ interface State { inputIsPristine: boolean; isSuggestionsVisible: boolean; index: number; - suggestions: Suggestion[]; + suggestions: AutocompleteSuggestion[]; suggestionLimit: number; } @@ -176,7 +181,7 @@ export class QueryBar extends Component { return; } - const suggestions: Suggestion[] = await getAutocompleteSuggestions({ + const suggestions: AutocompleteSuggestion[] = await getAutocompleteSuggestions({ query, selectionStart, selectionEnd, @@ -190,7 +195,7 @@ export class QueryBar extends Component { start, end, }: { - type: string; + type: AutocompleteSuggestionType; text: string; start: number; end: number; @@ -222,7 +227,7 @@ export class QueryBar extends Component { this.inputRef.setSelectionRange(start + text.length, start + text.length); - if (type === 'recentSearch') { + if (type === recentSearchType) { this.onSubmit(); } else { this.updateSuggestions(); @@ -244,7 +249,7 @@ export class QueryBar extends Component { const text = recentSearch; const start = 0; const end = query.length; - return { type: 'recentSearch', text, start, end }; + return { type: recentSearchType, text, start, end }; }); }; @@ -258,7 +263,7 @@ export class QueryBar extends Component { } }; - public onClickSuggestion = (suggestion: Suggestion) => { + public onClickSuggestion = (suggestion: AutocompleteSuggestion) => { if (!this.inputRef) { return; } From a56a3bf71ec22f28997e3e18ea226b3202de9443 Mon Sep 17 00:00:00 2001 From: Matthew Bargar Date: Wed, 17 Oct 2018 13:27:31 -0400 Subject: [PATCH 37/54] Add tests for SuggestionComponent --- .../suggestion_component.test.tsx.snap | 73 ++++++++++ .../typeahead/suggestion_component.test.tsx | 128 ++++++++++++++++++ .../typeahead/suggestion_component.tsx | 6 +- .../typeahead/suggestions_component.tsx | 6 +- 4 files changed, 207 insertions(+), 6 deletions(-) create mode 100644 src/ui/public/query_bar/components/typeahead/__snapshots__/suggestion_component.test.tsx.snap create mode 100644 src/ui/public/query_bar/components/typeahead/suggestion_component.test.tsx diff --git a/src/ui/public/query_bar/components/typeahead/__snapshots__/suggestion_component.test.tsx.snap b/src/ui/public/query_bar/components/typeahead/__snapshots__/suggestion_component.test.tsx.snap new file mode 100644 index 0000000000000..0e3ce952d69e2 --- /dev/null +++ b/src/ui/public/query_bar/components/typeahead/__snapshots__/suggestion_component.test.tsx.snap @@ -0,0 +1,73 @@ +// Jest Snapshot v1, https://goo.gl/fbAQLP + +exports[`SuggestionComponent Should display the suggestion and use the provided ariaId 1`] = ` +
+
+
+ +
+
+ as promised, not helpful +
+
+
+
+`; + +exports[`SuggestionComponent Should make the element active if the selected prop is true 1`] = ` +
+
+
+ +
+
+ as promised, not helpful +
+
+
+
+`; diff --git a/src/ui/public/query_bar/components/typeahead/suggestion_component.test.tsx b/src/ui/public/query_bar/components/typeahead/suggestion_component.test.tsx new file mode 100644 index 0000000000000..ac5319614e158 --- /dev/null +++ b/src/ui/public/query_bar/components/typeahead/suggestion_component.test.tsx @@ -0,0 +1,128 @@ +/* + * 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. + */ + +// jest.mock('../../metadata', () => ({ +// metadata: { +// branch: 'foo', +// }, +// })); + +import { mount, shallow } from 'enzyme'; +import React from 'react'; +import { AutocompleteSuggestion } from 'ui/autocomplete_providers'; +import { SuggestionComponent } from 'ui/query_bar/components/typeahead/suggestion_component'; + +const noop = () => { + return; +}; + +const mockSuggestion: AutocompleteSuggestion = { + description: 'This is not a helpful suggestion', + end: 0, + start: 42, + text: 'as promised, not helpful', + type: 'value', +}; + +describe('SuggestionComponent', () => { + it('Should display the suggestion and use the provided ariaId', () => { + const component = shallow( + + ); + + expect(component).toMatchSnapshot(); + }); + + it('Should make the element active if the selected prop is true', () => { + const component = shallow( + + ); + + expect(component).toMatchSnapshot(); + }); + + it('Should call innerRef with a reference to the root div element', () => { + const innerRefCallback = (ref: HTMLDivElement) => { + expect(ref.className).toBe('typeahead-item'); + expect(ref.id).toBe('suggestion-1'); + }; + + mount( + + ); + }); + + it('Should call onClick with the provided suggestion', () => { + const mockHandler = jest.fn(); + + const component = shallow( + + ); + + component.simulate('click'); + expect(mockHandler).toHaveBeenCalledTimes(1); + expect(mockHandler).toHaveBeenCalledWith(mockSuggestion); + }); + + it('Should call onMouseEnter when user mouses over the element', () => { + const mockHandler = jest.fn(); + + const component = shallow( + + ); + + component.simulate('mouseenter'); + expect(mockHandler).toHaveBeenCalledTimes(1); + }); +}); diff --git a/src/ui/public/query_bar/components/typeahead/suggestion_component.tsx b/src/ui/public/query_bar/components/typeahead/suggestion_component.tsx index 509b026a9d11d..424afa2974773 100644 --- a/src/ui/public/query_bar/components/typeahead/suggestion_component.tsx +++ b/src/ui/public/query_bar/components/typeahead/suggestion_component.tsx @@ -20,7 +20,7 @@ import { EuiIcon } from '@elastic/eui'; import classNames from 'classnames'; import React, { SFC } from 'react'; -import { Suggestion } from 'ui/autocomplete_providers'; +import { AutocompleteSuggestion } from 'ui/autocomplete_providers'; function getEuiIconType(type: string) { switch (type) { @@ -40,10 +40,10 @@ function getEuiIconType(type: string) { } interface Props { - onClick: (suggestion: Suggestion) => void; + onClick: (suggestion: AutocompleteSuggestion) => void; onMouseEnter: () => void; selected: boolean; - suggestion: Suggestion; + suggestion: AutocompleteSuggestion; innerRef: (node: HTMLDivElement) => void; ariaId: string; } diff --git a/src/ui/public/query_bar/components/typeahead/suggestions_component.tsx b/src/ui/public/query_bar/components/typeahead/suggestions_component.tsx index 014729a8bc3b1..546eb67563ff4 100644 --- a/src/ui/public/query_bar/components/typeahead/suggestions_component.tsx +++ b/src/ui/public/query_bar/components/typeahead/suggestions_component.tsx @@ -19,16 +19,16 @@ import { isEmpty } from 'lodash'; import React, { Component } from 'react'; -import { Suggestion } from 'ui/autocomplete_providers'; +import { AutocompleteSuggestion } from 'ui/autocomplete_providers'; import './suggestion.less'; import { SuggestionComponent } from './suggestion_component'; interface Props { index: number; - onClick: (suggestion: Suggestion) => void; + onClick: (suggestion: AutocompleteSuggestion) => void; onMouseEnter: (index: number) => void; show: boolean; - suggestions: Suggestion[]; + suggestions: AutocompleteSuggestion[]; loadMore: () => void; } From 1bb75ce5c507ea186524f53df9c7e5c24caf9520 Mon Sep 17 00:00:00 2001 From: Matthew Bargar Date: Wed, 17 Oct 2018 16:30:39 -0400 Subject: [PATCH 38/54] Add tests for SuggestionsComponent --- .../suggestions_component.test.tsx.snap | 113 +++++++++++++ .../typeahead/suggestion_component.test.tsx | 6 - .../typeahead/suggestions_component.test.tsx | 150 ++++++++++++++++++ 3 files changed, 263 insertions(+), 6 deletions(-) create mode 100644 src/ui/public/query_bar/components/typeahead/__snapshots__/suggestions_component.test.tsx.snap create mode 100644 src/ui/public/query_bar/components/typeahead/suggestions_component.test.tsx diff --git a/src/ui/public/query_bar/components/typeahead/__snapshots__/suggestions_component.test.tsx.snap b/src/ui/public/query_bar/components/typeahead/__snapshots__/suggestions_component.test.tsx.snap new file mode 100644 index 0000000000000..1b8fc29858c83 --- /dev/null +++ b/src/ui/public/query_bar/components/typeahead/__snapshots__/suggestions_component.test.tsx.snap @@ -0,0 +1,113 @@ +// Jest Snapshot v1, https://goo.gl/fbAQLP + +exports[`SuggestionsComponent Passing the index should control which suggestion is selected 1`] = ` +
+
+
+
+ + +
+
+
+
+`; + +exports[`SuggestionsComponent Should display given suggestions if the show prop is true 1`] = ` +
+
+
+
+ + +
+
+
+
+`; diff --git a/src/ui/public/query_bar/components/typeahead/suggestion_component.test.tsx b/src/ui/public/query_bar/components/typeahead/suggestion_component.test.tsx index ac5319614e158..ee6eb994f32f4 100644 --- a/src/ui/public/query_bar/components/typeahead/suggestion_component.test.tsx +++ b/src/ui/public/query_bar/components/typeahead/suggestion_component.test.tsx @@ -17,12 +17,6 @@ * under the License. */ -// jest.mock('../../metadata', () => ({ -// metadata: { -// branch: 'foo', -// }, -// })); - import { mount, shallow } from 'enzyme'; import React from 'react'; import { AutocompleteSuggestion } from 'ui/autocomplete_providers'; diff --git a/src/ui/public/query_bar/components/typeahead/suggestions_component.test.tsx b/src/ui/public/query_bar/components/typeahead/suggestions_component.test.tsx new file mode 100644 index 0000000000000..910633a8c5afc --- /dev/null +++ b/src/ui/public/query_bar/components/typeahead/suggestions_component.test.tsx @@ -0,0 +1,150 @@ +/* + * 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 { mount, shallow } from 'enzyme'; +import React from 'react'; +import { AutocompleteSuggestion } from 'ui/autocomplete_providers'; +import { SuggestionComponent } from 'ui/query_bar/components/typeahead/suggestion_component'; +import { SuggestionsComponent } from 'ui/query_bar/components/typeahead/suggestions_component'; + +const noop = () => { + return; +}; + +const mockSuggestions: AutocompleteSuggestion[] = [ + { + description: 'This is not a helpful suggestion', + end: 0, + start: 42, + text: 'as promised, not helpful', + type: 'value', + }, + { + description: 'This is another unhelpful suggestion', + end: 0, + start: 42, + text: 'yep', + type: 'field', + }, +]; + +describe('SuggestionsComponent', () => { + it('Should not display anything if the show prop is false', () => { + const component = shallow( + + ); + + expect(component.isEmptyRender()).toBe(true); + }); + + it('Should not display anything if there are no suggestions', () => { + const component = shallow( + + ); + + expect(component.isEmptyRender()).toBe(true); + }); + + it('Should display given suggestions if the show prop is true', () => { + const component = shallow( + + ); + + expect(component.isEmptyRender()).toBe(false); + expect(component).toMatchSnapshot(); + }); + + it('Passing the index should control which suggestion is selected', () => { + const component = shallow( + + ); + + expect(component).toMatchSnapshot(); + }); + + it('Should call onClick with the selected suggestion when it is clicked', () => { + const mockCallback = jest.fn(); + const component = mount( + + ); + + component + .find(SuggestionComponent) + .at(1) + .simulate('click'); + expect(mockCallback).toHaveBeenCalledTimes(1); + expect(mockCallback).toHaveBeenCalledWith(mockSuggestions[1]); + }); + + it('Should call onMouseEnter with the index of the suggestion that was entered', () => { + const mockCallback = jest.fn(); + const component = mount( + + ); + + component + .find(SuggestionComponent) + .at(1) + .simulate('mouseenter'); + expect(mockCallback).toHaveBeenCalledTimes(1); + expect(mockCallback).toHaveBeenCalledWith(1); + }); +}); From 8c3f76dbdb0e0021be1263e0c386e3af661002ee Mon Sep 17 00:00:00 2001 From: Matthew Bargar Date: Wed, 17 Oct 2018 18:07:53 -0400 Subject: [PATCH 39/54] beginning work on QueryBar component tests --- .../__snapshots__/query_bar.test.tsx.snap | 145 +++++++++++++++ .../query_bar/components/query_bar.test.tsx | 169 ++++++++++++++++++ .../public/query_bar/components/query_bar.tsx | 2 +- 3 files changed, 315 insertions(+), 1 deletion(-) create mode 100644 src/ui/public/query_bar/components/__snapshots__/query_bar.test.tsx.snap create mode 100644 src/ui/public/query_bar/components/query_bar.test.tsx diff --git a/src/ui/public/query_bar/components/__snapshots__/query_bar.test.tsx.snap b/src/ui/public/query_bar/components/__snapshots__/query_bar.test.tsx.snap new file mode 100644 index 0000000000000..a0a00219cc860 --- /dev/null +++ b/src/ui/public/query_bar/components/__snapshots__/query_bar.test.tsx.snap @@ -0,0 +1,145 @@ +// Jest Snapshot v1, https://goo.gl/fbAQLP + +exports[`QueryBar Should disable autoFocus on EuiFieldText when disableAutoFocus prop is true 1`] = ` + +
+
+
+
+ +
+ +
+
+
+
+ +
+ +`; + +exports[`QueryBar Should render the given query 1`] = ` + +
+
+
+
+ +
+ +
+
+
+
+ +
+ +`; diff --git a/src/ui/public/query_bar/components/query_bar.test.tsx b/src/ui/public/query_bar/components/query_bar.test.tsx new file mode 100644 index 0000000000000..2f38baebf48d3 --- /dev/null +++ b/src/ui/public/query_bar/components/query_bar.test.tsx @@ -0,0 +1,169 @@ +/* + * 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 { QueryLanguageSwitcher } from 'ui/query_bar/components/language_switcher'; + +const mockChromeFactory = jest.fn(() => { + return { + getBasePath: () => `foo`, + getUiSettingsClient: () => { + return { + get: (key: string) => { + switch (key) { + case 'history:limit': + return 10; + default: + throw new Error(`Unexpected config key: ${key}`); + } + }, + }; + }, + }; +}); + +const mockPersistedLogFactory = jest.fn(() => { + return { + add: jest.fn(), + get: jest.fn(), + }; +}); + +jest.mock('ui/chrome', () => mockChromeFactory()); +jest.mock('../../chrome', () => mockChromeFactory()); +jest.mock('ui/persisted_log', () => ({ + PersistedLog: mockPersistedLogFactory, +})); + +jest.mock('../../metadata', () => ({ + metadata: { + branch: 'foo', + }, +})); + +import { shallow } from 'enzyme'; +import React from 'react'; +import { QueryBar } from 'ui/query_bar'; + +const noop = () => { + return; +}; + +const kqlQuery = { + query: 'response:200', + language: 'kuery', +}; + +const createMockWebStorage = () => ({ + clear: jest.fn(), + getItem: jest.fn(), + key: jest.fn(), + removeItem: jest.fn(), + setItem: jest.fn(), + length: 0, +}); + +const createMockStorage = () => ({ + store: createMockWebStorage(), + get: jest.fn(), + set: jest.fn(), + remove: jest.fn(), + clear: jest.fn(), +}); + +const mockIndexPattern = { + title: 'logstash-*', + fields: { + raw: [ + { + name: 'response', + type: 'number', + aggregatable: true, + searchable: true, + }, + ], + }, +}; + +describe('QueryBar', () => { + beforeEach(() => { + jest.clearAllMocks(); + }); + + it('Should render the given query', () => { + const component = shallow( + + ); + + expect(component).toMatchSnapshot(); + }); + + it('Should disable autoFocus on EuiFieldText when disableAutoFocus prop is true', () => { + const component = shallow( + + ); + + expect(component).toMatchSnapshot(); + }); + + it('Should create a unique PersistedLog based on the appName and query language', () => { + shallow( + + ); + + expect(mockPersistedLogFactory.mock.calls[0][0]).toBe('typeahead:discover-kuery'); + }); + + it("Should store the user's query preference in localstorage", () => { + const mockStorage = createMockStorage(); + + const component = shallow( + + ); + + component.find(QueryLanguageSwitcher).simulate('selectLanguage', 'lucene'); + expect(mockStorage.set).toHaveBeenCalledWith('kibana.userQueryLanguage', 'lucene'); + }); +}); diff --git a/src/ui/public/query_bar/components/query_bar.tsx b/src/ui/public/query_bar/components/query_bar.tsx index 4e2c2a501061f..d07232a1a8131 100644 --- a/src/ui/public/query_bar/components/query_bar.tsx +++ b/src/ui/public/query_bar/components/query_bar.tsx @@ -64,7 +64,7 @@ interface Query { interface Props { query: Query; onSubmit: (query: { query: string | object; language: string }) => void; - disableAutoFocus: boolean; + disableAutoFocus?: boolean; appName: string; indexPatterns: IndexPattern[]; store: Storage; From e5aae3232ad68f05009d8b5b9c41daf338824b56 Mon Sep 17 00:00:00 2001 From: Matthew Bargar Date: Thu, 18 Oct 2018 09:13:42 -0400 Subject: [PATCH 40/54] language switcher --- .../__snapshots__/query_bar.test.tsx.snap | 72 +++++++++++++++++++ .../query_bar/components/query_bar.test.tsx | 19 +++++ 2 files changed, 91 insertions(+) diff --git a/src/ui/public/query_bar/components/__snapshots__/query_bar.test.tsx.snap b/src/ui/public/query_bar/components/__snapshots__/query_bar.test.tsx.snap index a0a00219cc860..91e59240ee813 100644 --- a/src/ui/public/query_bar/components/__snapshots__/query_bar.test.tsx.snap +++ b/src/ui/public/query_bar/components/__snapshots__/query_bar.test.tsx.snap @@ -72,6 +72,78 @@ exports[`QueryBar Should disable autoFocus on EuiFieldText when disableAutoFocus `; +exports[`QueryBar Should pass the query language to the language switcher 1`] = ` + +
+
+
+
+ +
+ +
+
+
+
+ +
+ +`; + exports[`QueryBar Should render the given query 1`] = ` ({ clear: jest.fn(), getItem: jest.fn(), @@ -119,6 +124,20 @@ describe('QueryBar', () => { expect(component).toMatchSnapshot(); }); + it('Should pass the query language to the language switcher', () => { + const component = shallow( + + ); + + expect(component).toMatchSnapshot(); + }); + it('Should disable autoFocus on EuiFieldText when disableAutoFocus prop is true', () => { const component = shallow( Date: Thu, 18 Oct 2018 10:45:54 -0400 Subject: [PATCH 41/54] QueryBar onSubmit --- .../query_bar/components/query_bar.test.tsx | 30 ++++++++++++++++++- .../public/query_bar/components/query_bar.tsx | 3 +- 2 files changed, 31 insertions(+), 2 deletions(-) diff --git a/src/ui/public/query_bar/components/query_bar.test.tsx b/src/ui/public/query_bar/components/query_bar.test.tsx index 160676639f5f9..d6334f1a02a85 100644 --- a/src/ui/public/query_bar/components/query_bar.test.tsx +++ b/src/ui/public/query_bar/components/query_bar.test.tsx @@ -56,7 +56,8 @@ jest.mock('../../metadata', () => ({ }, })); -import { shallow } from 'enzyme'; +import { EuiFieldText } from '@elastic/eui'; +import { mount, shallow } from 'enzyme'; import React from 'react'; import { QueryBar } from 'ui/query_bar'; @@ -185,4 +186,31 @@ describe('QueryBar', () => { component.find(QueryLanguageSwitcher).simulate('selectLanguage', 'lucene'); expect(mockStorage.set).toHaveBeenCalledWith('kibana.userQueryLanguage', 'lucene'); }); + + it('Should call onSubmit with the current query when the user hits enter inside the query bar', () => { + const mockCallback = jest.fn(); + + const component = mount( + + ); + + const instance = component.instance() as QueryBar; + const input = instance.inputRef; + const inputWrapper = component.find(EuiFieldText).find('input'); + inputWrapper.simulate('change', { target: { value: 'extension:jpg' } }); + inputWrapper.simulate('keyDown', { target: input, keyCode: 13, key: 'Enter', metaKey: true }); + + expect(mockCallback).toHaveBeenCalledTimes(1); + expect(mockCallback).toHaveBeenCalledWith({ + query: 'extension:jpg', + language: 'kuery', + }); + }); }); diff --git a/src/ui/public/query_bar/components/query_bar.tsx b/src/ui/public/query_bar/components/query_bar.tsx index d07232a1a8131..8bc23501ae1f5 100644 --- a/src/ui/public/query_bar/components/query_bar.tsx +++ b/src/ui/public/query_bar/components/query_bar.tsx @@ -131,7 +131,8 @@ export class QueryBar extends Component { } }, 100); - private inputRef: HTMLInputElement | null = null; + public inputRef: HTMLInputElement | null = null; + private componentIsUnmounting = false; private persistedLog: PersistedLog | null = null; From 4922ad536faa53520c33c3f3f02eef19cec3e8f7 Mon Sep 17 00:00:00 2001 From: Matthew Bargar Date: Thu, 18 Oct 2018 11:05:31 -0400 Subject: [PATCH 42/54] test query reset on language selection --- .../query_bar/components/query_bar.test.tsx | 17 +++++++++++++++-- 1 file changed, 15 insertions(+), 2 deletions(-) diff --git a/src/ui/public/query_bar/components/query_bar.test.tsx b/src/ui/public/query_bar/components/query_bar.test.tsx index d6334f1a02a85..e7ebce861a468 100644 --- a/src/ui/public/query_bar/components/query_bar.test.tsx +++ b/src/ui/public/query_bar/components/query_bar.test.tsx @@ -169,13 +169,14 @@ describe('QueryBar', () => { expect(mockPersistedLogFactory.mock.calls[0][0]).toBe('typeahead:discover-kuery'); }); - it("Should store the user's query preference in localstorage", () => { + it("On language selection, should store the user's preference in localstorage and reset the query", () => { const mockStorage = createMockStorage(); + const mockCallback = jest.fn(); const component = shallow( { component.find(QueryLanguageSwitcher).simulate('selectLanguage', 'lucene'); expect(mockStorage.set).toHaveBeenCalledWith('kibana.userQueryLanguage', 'lucene'); + expect(mockCallback).toHaveBeenCalledWith({ + query: '', + language: 'lucene', + }); }); it('Should call onSubmit with the current query when the user hits enter inside the query bar', () => { @@ -213,4 +218,12 @@ describe('QueryBar', () => { language: 'kuery', }); }); + + // TODO gets recent search suggestions from persisted log + // TODO stores searches in PersistedLog + // TODO sends autocomplete provider suggestions to suggestions component + // TODO suggestion selection updates query (call onSubmit to validate) + // TODO other keydown keycodes (just snapshot state of suggestion component? or the whole thing to get aria attributes too?) + // TODO EuiFieldText onKeyUp + // TODO EuiFieldTExt onClick }); From 1763316287008349527b580a99ae50f3ee865223 Mon Sep 17 00:00:00 2001 From: Matthew Bargar Date: Thu, 18 Oct 2018 14:12:19 -0400 Subject: [PATCH 43/54] test persisted log usage --- .../query_bar/components/query_bar.test.tsx | 63 +++++++++++++++---- 1 file changed, 51 insertions(+), 12 deletions(-) diff --git a/src/ui/public/query_bar/components/query_bar.test.tsx b/src/ui/public/query_bar/components/query_bar.test.tsx index e7ebce861a468..c0c8b2517c58e 100644 --- a/src/ui/public/query_bar/components/query_bar.test.tsx +++ b/src/ui/public/query_bar/components/query_bar.test.tsx @@ -37,11 +37,13 @@ const mockChromeFactory = jest.fn(() => { }; }); +const mockPersistedLog = { + add: jest.fn(), + get: jest.fn(), +}; + const mockPersistedLogFactory = jest.fn(() => { - return { - add: jest.fn(), - get: jest.fn(), - }; + return mockPersistedLog; }); jest.mock('ui/chrome', () => mockChromeFactory()); @@ -49,12 +51,21 @@ jest.mock('../../chrome', () => mockChromeFactory()); jest.mock('ui/persisted_log', () => ({ PersistedLog: mockPersistedLogFactory, })); - jest.mock('../../metadata', () => ({ metadata: { branch: 'foo', }, })); +jest.mock('../../autocomplete_providers', () => ({ + getAutocompleteProvider: (language: string) => jest.fn(() => jest.fn(() => Promise.resolve([]))), +})); + +import _ from 'lodash'; +// Using doMock to avoid hoisting so that I can override only the debounce method in lodash +jest.doMock('lodash', () => ({ + ..._, + debounce: (func: () => any) => func, +})); import { EuiFieldText } from '@elastic/eui'; import { mount, shallow } from 'enzyme'; @@ -219,11 +230,39 @@ describe('QueryBar', () => { }); }); - // TODO gets recent search suggestions from persisted log - // TODO stores searches in PersistedLog - // TODO sends autocomplete provider suggestions to suggestions component - // TODO suggestion selection updates query (call onSubmit to validate) - // TODO other keydown keycodes (just snapshot state of suggestion component? or the whole thing to get aria attributes too?) - // TODO EuiFieldText onKeyUp - // TODO EuiFieldTExt onClick + it('Should use PersistedLog for recent search suggestions', async () => { + mockPersistedLog.get.mockImplementation(() => { + return ['response:200']; + }); + + const component = mount( + + ); + + const instance = component.instance() as QueryBar; + const input = instance.inputRef; + const inputWrapper = component.find(EuiFieldText).find('input'); + inputWrapper.simulate('change', { target: { value: 'extension:jpg' } }); + inputWrapper.simulate('keyDown', { target: input, keyCode: 13, key: 'Enter', metaKey: true }); + + expect(mockPersistedLog.add).toHaveBeenCalledWith('extension:jpg'); + + mockPersistedLog.get.mockClear(); + inputWrapper.simulate('change', { target: { value: 'extensi' } }); + expect(mockPersistedLog.get).toHaveBeenCalledTimes(1); + }); }); + +// TODO sends autocomplete provider suggestions to suggestions component +// TODO suggestion selection (click or enter) updates query (call onSubmit to validate) +// TODO suggestion component loadMore +// TODO other keydown keycodes (just snapshot state of suggestion component? or the whole thing to get aria attributes too?) +// TODO EuiFieldText onKeyUp +// TODO EuiFieldTExt onClick From cfad4ff6b32aeb85ec9c6669451239b0e2170d50 Mon Sep 17 00:00:00 2001 From: Matthew Bargar Date: Thu, 18 Oct 2018 14:32:22 -0400 Subject: [PATCH 44/54] test autocomplete provider usage --- .../query_bar/components/query_bar.test.tsx | 35 ++++++++++++------- 1 file changed, 22 insertions(+), 13 deletions(-) diff --git a/src/ui/public/query_bar/components/query_bar.test.tsx b/src/ui/public/query_bar/components/query_bar.test.tsx index c0c8b2517c58e..e6a3b96b9d501 100644 --- a/src/ui/public/query_bar/components/query_bar.test.tsx +++ b/src/ui/public/query_bar/components/query_bar.test.tsx @@ -39,13 +39,17 @@ const mockChromeFactory = jest.fn(() => { const mockPersistedLog = { add: jest.fn(), - get: jest.fn(), + get: jest.fn(() => ['response:200']), }; const mockPersistedLogFactory = jest.fn(() => { return mockPersistedLog; }); +const mockGetAutocompleteSuggestions = jest.fn(() => Promise.resolve([])); +const mockAutocompleteProvider = jest.fn(() => mockGetAutocompleteSuggestions); +const mockGetAutocompleteProvider = jest.fn(() => mockAutocompleteProvider); + jest.mock('ui/chrome', () => mockChromeFactory()); jest.mock('../../chrome', () => mockChromeFactory()); jest.mock('ui/persisted_log', () => ({ @@ -57,7 +61,7 @@ jest.mock('../../metadata', () => ({ }, })); jest.mock('../../autocomplete_providers', () => ({ - getAutocompleteProvider: (language: string) => jest.fn(() => jest.fn(() => Promise.resolve([]))), + getAutocompleteProvider: mockGetAutocompleteProvider, })); import _ from 'lodash'; @@ -231,10 +235,6 @@ describe('QueryBar', () => { }); it('Should use PersistedLog for recent search suggestions', async () => { - mockPersistedLog.get.mockImplementation(() => { - return ['response:200']; - }); - const component = mount( { inputWrapper.simulate('change', { target: { value: 'extensi' } }); expect(mockPersistedLog.get).toHaveBeenCalledTimes(1); }); -}); -// TODO sends autocomplete provider suggestions to suggestions component -// TODO suggestion selection (click or enter) updates query (call onSubmit to validate) -// TODO suggestion component loadMore -// TODO other keydown keycodes (just snapshot state of suggestion component? or the whole thing to get aria attributes too?) -// TODO EuiFieldText onKeyUp -// TODO EuiFieldTExt onClick + it('Should get suggestions from the autocomplete provider for the current language', () => { + mount( + + ); + + expect(mockGetAutocompleteProvider).toHaveBeenCalledWith('kuery'); + expect(mockGetAutocompleteSuggestions).toHaveBeenCalled(); + }); +}); From a522b879ddd4aaacac9e0c25e137f3bfdf952e6c Mon Sep 17 00:00:00 2001 From: Matthew Bargar Date: Fri, 19 Oct 2018 13:59:22 -0400 Subject: [PATCH 45/54] fix ts error --- src/ui/public/metadata.d.ts | 1 + 1 file changed, 1 insertion(+) diff --git a/src/ui/public/metadata.d.ts b/src/ui/public/metadata.d.ts index 054007b642543..d604838bd046b 100644 --- a/src/ui/public/metadata.d.ts +++ b/src/ui/public/metadata.d.ts @@ -19,6 +19,7 @@ declare class Metadata { public branch: string; + public version: string; } declare const metadata: Metadata; From e24b9b3658aed19c6c1cbae0cfae57f541166e51 Mon Sep 17 00:00:00 2001 From: Matthew Bargar Date: Fri, 19 Oct 2018 15:17:12 -0400 Subject: [PATCH 46/54] fix unit tests --- src/ui/public/storage/storage.ts | 10 +++++++++- 1 file changed, 9 insertions(+), 1 deletion(-) diff --git a/src/ui/public/storage/storage.ts b/src/ui/public/storage/storage.ts index 5a97cdfdbbc64..703886c1e034c 100644 --- a/src/ui/public/storage/storage.ts +++ b/src/ui/public/storage/storage.ts @@ -32,11 +32,19 @@ export class Storage { } public get = (key: string) => { + if (!this.store) { + return null; + } + const storageItem = this.store.getItem(key); if (storageItem === null) { return null; - } else { + } + + try { return JSON.parse(storageItem); + } catch (error) { + return null; } }; From 034fe616560aa058710df628281873846a69f3e4 Mon Sep 17 00:00:00 2001 From: Matthew Bargar Date: Fri, 19 Oct 2018 15:17:27 -0400 Subject: [PATCH 47/54] fix unit tests --- src/ui/public/query_bar/components/query_bar.test.tsx | 3 +-- 1 file changed, 1 insertion(+), 2 deletions(-) diff --git a/src/ui/public/query_bar/components/query_bar.test.tsx b/src/ui/public/query_bar/components/query_bar.test.tsx index e6a3b96b9d501..7309cc13a1b23 100644 --- a/src/ui/public/query_bar/components/query_bar.test.tsx +++ b/src/ui/public/query_bar/components/query_bar.test.tsx @@ -17,8 +17,6 @@ * under the License. */ -import { QueryLanguageSwitcher } from 'ui/query_bar/components/language_switcher'; - const mockChromeFactory = jest.fn(() => { return { getBasePath: () => `foo`, @@ -75,6 +73,7 @@ import { EuiFieldText } from '@elastic/eui'; import { mount, shallow } from 'enzyme'; import React from 'react'; import { QueryBar } from 'ui/query_bar'; +import { QueryLanguageSwitcher } from 'ui/query_bar/components/language_switcher'; const noop = () => { return; From 05c35bd90c24379ff13ec41b8da75617729a2995 Mon Sep 17 00:00:00 2001 From: Matthew Bargar Date: Fri, 19 Oct 2018 15:18:43 -0400 Subject: [PATCH 48/54] Fix typo --- src/core_plugins/kibana/public/visualize/editor/editor.html | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/core_plugins/kibana/public/visualize/editor/editor.html b/src/core_plugins/kibana/public/visualize/editor/editor.html index b5ffa8b9549a9..c73805e4eb678 100644 --- a/src/core_plugins/kibana/public/visualize/editor/editor.html +++ b/src/core_plugins/kibana/public/visualize/editor/editor.html @@ -42,7 +42,7 @@ app-name="'visualize'" on-submit="updateQueryAndFetch" disable-auto-focus="true" - index-patterns="[indexPatter]" + index-patterns="[indexPattern]" >
From d1c014dbe04254f09b6ccdcc17f598785f09da5e Mon Sep 17 00:00:00 2001 From: Matthew Bargar Date: Fri, 19 Oct 2018 15:45:51 -0400 Subject: [PATCH 49/54] reset the selected suggestion when selecting a suggestion --- .../__snapshots__/query_bar.test.tsx.snap | 6 +++--- .../public/query_bar/components/query_bar.tsx | 20 +++++++++---------- .../typeahead/suggestions_component.tsx | 5 ++++- 3 files changed, 17 insertions(+), 14 deletions(-) diff --git a/src/ui/public/query_bar/components/__snapshots__/query_bar.test.tsx.snap b/src/ui/public/query_bar/components/__snapshots__/query_bar.test.tsx.snap index 91e59240ee813..dd74731f5817b 100644 --- a/src/ui/public/query_bar/components/__snapshots__/query_bar.test.tsx.snap +++ b/src/ui/public/query_bar/components/__snapshots__/query_bar.test.tsx.snap @@ -61,7 +61,7 @@ exports[`QueryBar Should disable autoFocus on EuiFieldText when disableAutoFocus
{ }, inputIsPristine: true, isSuggestionsVisible: false, - index: 0, + index: null, suggestions: [], suggestionLimit: 50, }; @@ -219,7 +219,7 @@ export class QueryBar extends Component { ...this.state.query, query: value.substr(0, start) + text + value.substr(end), }, - index: 0, + index: null, }, () => { if (!this.inputRef) { @@ -255,7 +255,7 @@ export class QueryBar extends Component { }; public onOutsideClick = () => { - this.setState({ isSuggestionsVisible: false }); + this.setState({ isSuggestionsVisible: false, index: null }); }; public onClickInput = (event: React.MouseEvent) => { @@ -286,7 +286,7 @@ export class QueryBar extends Component { }, inputIsPristine: false, isSuggestionsVisible: hasValue, - index: 0, + index: null, suggestionLimit: 50, }); }; @@ -328,7 +328,7 @@ export class QueryBar extends Component { switch (event.keyCode) { case KEY_CODES.DOWN: event.preventDefault(); - if (isSuggestionsVisible) { + if (isSuggestionsVisible && index !== null) { this.incrementIndex(index); } else { this.setState({ isSuggestionsVisible: true, index: 0 }); @@ -336,13 +336,13 @@ export class QueryBar extends Component { break; case KEY_CODES.UP: event.preventDefault(); - if (isSuggestionsVisible) { + if (isSuggestionsVisible && index !== null) { this.decrementIndex(index); } break; case KEY_CODES.ENTER: event.preventDefault(); - if (isSuggestionsVisible && this.state.suggestions[index]) { + if (isSuggestionsVisible && index !== null && this.state.suggestions[index]) { this.selectSuggestion(this.state.suggestions[index]); } else { this.onSubmit(() => event.preventDefault()); @@ -350,10 +350,10 @@ export class QueryBar extends Component { break; case KEY_CODES.ESC: event.preventDefault(); - this.setState({ isSuggestionsVisible: false }); + this.setState({ isSuggestionsVisible: false, index: null }); break; case KEY_CODES.TAB: - this.setState({ isSuggestionsVisible: false }); + this.setState({ isSuggestionsVisible: false, index: null }); break; default: if (selectionStart !== null && selectionEnd !== null) { diff --git a/src/ui/public/query_bar/components/typeahead/suggestions_component.tsx b/src/ui/public/query_bar/components/typeahead/suggestions_component.tsx index 546eb67563ff4..15c244ed5d07b 100644 --- a/src/ui/public/query_bar/components/typeahead/suggestions_component.tsx +++ b/src/ui/public/query_bar/components/typeahead/suggestions_component.tsx @@ -24,7 +24,7 @@ import './suggestion.less'; import { SuggestionComponent } from './suggestion_component'; interface Props { - index: number; + index: number | null; onClick: (suggestion: AutocompleteSuggestion) => void; onMouseEnter: (index: number) => void; show: boolean; @@ -81,6 +81,9 @@ export class SuggestionsComponent extends Component { } private scrollIntoView = () => { + if (this.props.index === null) { + return; + } const parent = this.parentNode; const child = this.childNodes[this.props.index]; From ec325b4e67cbb5c3b66d500e029ba10b9c91996d Mon Sep 17 00:00:00 2001 From: Matthew Bargar Date: Fri, 19 Oct 2018 17:41:15 -0400 Subject: [PATCH 50/54] Fix query bar submission helper --- test/functional/services/query_bar.js | 5 +++-- 1 file changed, 3 insertions(+), 2 deletions(-) diff --git a/test/functional/services/query_bar.js b/test/functional/services/query_bar.js index 0056821b81c76..218486ce75a0c 100644 --- a/test/functional/services/query_bar.js +++ b/test/functional/services/query_bar.js @@ -21,7 +21,7 @@ export function QueryBarProvider({ getService, getPageObjects }) { const testSubjects = getService('testSubjects'); const retry = getService('retry'); const log = getService('log'); - const PageObjects = getPageObjects(['header']); + const PageObjects = getPageObjects(['header', 'common']); class QueryBar { @@ -44,7 +44,8 @@ export function QueryBarProvider({ getService, getPageObjects }) { async submitQuery() { log.debug('QueryBar.submitQuery'); - await testSubjects.click('querySubmitButton'); + await testSubjects.click('queryInput'); + await PageObjects.common.pressEnterKey(); await PageObjects.header.waitUntilLoadingHasFinished(); } From dab6acf33179e1235ea980b9526dae412a3c8607 Mon Sep 17 00:00:00 2001 From: Matthew Bargar Date: Mon, 22 Oct 2018 11:42:22 -0400 Subject: [PATCH 51/54] Use KQL telemetry API that just got merged https://github.com/elastic/kibana/pull/23547 --- .../public/query_bar/components/query_bar.tsx | 26 ++++++++++++++----- 1 file changed, 19 insertions(+), 7 deletions(-) diff --git a/src/ui/public/query_bar/components/query_bar.tsx b/src/ui/public/query_bar/components/query_bar.tsx index 2e42a7b4640e8..bbffb5ab755f8 100644 --- a/src/ui/public/query_bar/components/query_bar.tsx +++ b/src/ui/public/query_bar/components/query_bar.tsx @@ -26,6 +26,7 @@ declare module '@elastic/eui' { import { debounce } from 'lodash'; import React, { Component, SFC } from 'react'; import { getFromLegacyIndexPattern } from 'ui/index_patterns/static_utils'; +import { kfetch } from 'ui/kfetch'; import { PersistedLog } from 'ui/persisted_log'; import { Storage } from 'ui/storage'; import { @@ -389,6 +390,23 @@ export class QueryBar extends Component { this.setState({ isSuggestionsVisible: false }); }; + public onSelectLanguage = (language: string) => { + // Send telemetry info every time the user opts in or out of kuery + // As a result it is important this function only ever gets called in the + // UI component's change handler. + kfetch({ + pathname: '/api/kibana/kql_opt_in_telemetry', + method: 'POST', + body: JSON.stringify({ opt_in: language === 'kuery' }), + }); + + this.props.store.set('kibana.userQueryLanguage', language); + this.props.onSubmit({ + query: '', + language, + }); + }; + public componentDidMount() { this.persistedLog = new PersistedLog( `typeahead:${this.props.appName}-${this.state.query.language}`, @@ -462,13 +480,7 @@ export class QueryBar extends Component {
{ - this.props.store.set('kibana.userQueryLanguage', language); - this.props.onSubmit({ - query: '', - language, - }); - }} + onSelectLanguage={this.onSelectLanguage} />
From 0fd0572d9b722fdf125767d6e7c4826f7dedf5ff Mon Sep 17 00:00:00 2001 From: "dave.snider@gmail.com" Date: Mon, 22 Oct 2018 14:06:58 -0700 Subject: [PATCH 52/54] query bar less to sass (#4) --- src/core_plugins/kibana/public/index.scss | 2 + src/ui/public/query_bar/_index.scss | 4 + .../components/typeahead/_index.scss | 1 + .../components/typeahead/_suggestion.scss | 195 +++++++++++++++++ .../components/typeahead/suggestion.less | 199 ------------------ .../typeahead/suggestions_component.tsx | 1 - 6 files changed, 202 insertions(+), 200 deletions(-) create mode 100644 src/ui/public/query_bar/_index.scss create mode 100644 src/ui/public/query_bar/components/typeahead/_index.scss create mode 100644 src/ui/public/query_bar/components/typeahead/_suggestion.scss delete mode 100644 src/ui/public/query_bar/components/typeahead/suggestion.less diff --git a/src/core_plugins/kibana/public/index.scss b/src/core_plugins/kibana/public/index.scss index a7b2b0b3ce534..390694b0a52c2 100644 --- a/src/core_plugins/kibana/public/index.scss +++ b/src/core_plugins/kibana/public/index.scss @@ -1,5 +1,7 @@ @import 'ui/public/styles/styling_constants'; +@import 'ui/public/query_bar/index'; + // Context styles @import './context/index'; diff --git a/src/ui/public/query_bar/_index.scss b/src/ui/public/query_bar/_index.scss new file mode 100644 index 0000000000000..81a69fd89db99 --- /dev/null +++ b/src/ui/public/query_bar/_index.scss @@ -0,0 +1,4 @@ +// SASSTODO: Formalize this color in Kibana's styling constants +$typeaheadConjunctionColor: #7800A6; + +@import 'components/typeahead/index'; \ No newline at end of file diff --git a/src/ui/public/query_bar/components/typeahead/_index.scss b/src/ui/public/query_bar/components/typeahead/_index.scss new file mode 100644 index 0000000000000..8ff2965158ad9 --- /dev/null +++ b/src/ui/public/query_bar/components/typeahead/_index.scss @@ -0,0 +1 @@ +@import 'suggestion'; \ No newline at end of file diff --git a/src/ui/public/query_bar/components/typeahead/_suggestion.scss b/src/ui/public/query_bar/components/typeahead/_suggestion.scss new file mode 100644 index 0000000000000..5fbb4a791ffcd --- /dev/null +++ b/src/ui/public/query_bar/components/typeahead/_suggestion.scss @@ -0,0 +1,195 @@ +.typeahead { + position: relative; + + .typeahead-popover { + @include euiBottomShadow($adjustBorders: true); + border: 1px solid; + border-color: $euiBorderColor; + color: $euiTextColor; + background-color: $euiColorEmptyShade; + position: absolute; + top: -10px; + z-index: $euiZContentMenu; + width: 100%; + border-radius: $euiBorderRadius; + + .typeahead-items { + max-height: 60vh; + overflow-y: auto; + } + + .typeahead-item { + height: $euiSizeXL; + white-space: nowrap; + font-size: $euiFontSizeXS; + vertical-align: middle; + padding: 0; + border-bottom: none; + line-height: normal; + } + + .typeahead-item:hover { + cursor: pointer; + } + + .typeahead-item:last-child { + border-bottom: 0px; + border-radius: 0 0 $euiBorderRadius $euiBorderRadius; + } + + .typeahead-item:first-child { + border-bottom: 0px; + border-radius: $euiBorderRadius $euiBorderRadius 0 0; + } + + .typeahead-item.active { + background-color: $euiColorLightestShade; + + + .suggestionItem__callout { + background: $euiColorEmptyShade; + } + + .suggestionItem__text { + color: $euiColorFullShade; + } + + .suggestionItem__type { + color: $euiColorFullShade; + } + + .suggestionItem--field { + .suggestionItem__type { + background-color: tint($euiColorWarning, 80%); + } + } + + .suggestionItem--value { + .suggestionItem__type { + background-color: tint($euiColorSecondary, 80%); + } + } + + .suggestionItem--operator { + .suggestionItem__type { + background-color: tint($euiColorPrimary, 80%); + } + } + + .suggestionItem--conjunction { + .suggestionItem__type { + background-color: tint($typeaheadConjunctionColor, 80%); + } + } + + } + } +} + +.inline-form .typeahead.visible .input-group { + > :first-child { + border-bottom-left-radius: 0; + border-bottom-right-radius: 0; + } + > :last-child { + border-bottom-left-radius: 0; + border-bottom-right-radius: 0; + } +} + +.suggestionItem { + display: flex; + align-items: stretch; + flex-grow: 1; + align-items: center; + font-size: $euiFontSizeXS; + white-space: nowrap; + &.suggestionItem--field { + .suggestionItem__type { + background-color: tint($euiColorWarning, 90%); + color: makeHighContrastColor($euiColorWarning, tint($euiColorWarning, 90%)); + } + } + + &.suggestionItem--value { + .suggestionItem__type { + background-color: tint($euiColorSecondary, 90%); + color: makeHighContrastColor($euiColorSecondary, tint($euiColorSecondary, 90%)); + } + + .suggestionItem__text { + width: auto; + } + } + + &.suggestionItem--operator { + .suggestionItem__type { + background-color: tint($euiColorPrimary, 90%); + color: makeHighContrastColor($euiColorPrimary, tint($euiColorSecondary, 90%)); + } + } + + &.suggestionItem--conjunction { + .suggestionItem__type { + background-color: tint($typeaheadConjunctionColor, 90%); + color: makeHighContrastColor($typeaheadConjunctionColor, tint($typeaheadConjunctionColor, 90%)); + } + } + + &.suggestionItem--recentSearch { + .suggestionItem__type { + background-color: $euiColorLightShade; + color: $euiColorMediumShade; + } + + .suggestionItem__text { + width: auto; + } + } +} + +.suggestionItem__text, .suggestionItem__type, .suggestionItem__description { + flex-grow: 1; + flex-basis: 0%; + display: flex; + flex-direction: column; +} + +.suggestionItem__type { + flex-grow: 0; + flex-basis: auto; + width: $euiSizeXL; + height: $euiSizeXL; + text-align: center; + overflow: hidden; + padding: $euiSizeXS; + justify-content: center; + align-items: center; +} + + +.suggestionItem__text { + flex-grow: 0; /* 2 */ + flex-basis: auto; /* 2 */ + font-family: $euiCodeFontFamily; + margin-right: $euiSizeXL; + width: 250px; + overflow: hidden; + text-overflow: ellipsis; + padding: $euiSizeXS $euiSizeS; + color: #111; +} + +.suggestionItem__description { + color: $euiColorDarkShade; + overflow: hidden; + text-overflow: ellipsis; +} + +.suggestionItem__callout { + font-family: $euiCodeFontFamily; + background: $euiColorLightestShade; + color: $euiColorFullShade; + padding: 0 $euiSizeXS; + display: inline-block; +} diff --git a/src/ui/public/query_bar/components/typeahead/suggestion.less b/src/ui/public/query_bar/components/typeahead/suggestion.less deleted file mode 100644 index e2f6400ac0894..0000000000000 --- a/src/ui/public/query_bar/components/typeahead/suggestion.less +++ /dev/null @@ -1,199 +0,0 @@ -@import (reference) "~ui/styles/variables"; -@import (reference) "~ui/styles/mixins"; - - -.typeahead { - position: relative; - - .typeahead-popover { - border: 1px solid; - border-color: @typeahead-item-border; - color: @typeahead-item-color; - background-color: @typeahead-item-bg; - position: absolute; - top: -10px; - z-index: @zindex-typeahead; - box-shadow: 0px 4px 8px rgba(0,0,0,.1); - width: 100%; - border-radius: 4px; - - .typeahead-items { - max-height: 60vh; - overflow-y: auto; - } - - .typeahead-item { - height: 32px; - white-space: nowrap; - font-size: 12px; - vertical-align: middle; - padding: 0; - border-bottom: none; - line-height: normal; - } - - .typeahead-item:hover { - cursor: pointer; - } - - .typeahead-item:last-child { - border-bottom: 0px; - border-radius: 0 0 4px 4px; - } - - .typeahead-item:first-child { - border-bottom: 0px; - border-radius: 4px 4px 0 0; - } - - .typeahead-item.active { - background-color: @globalColorLightestGray; - - - .suggestionItem__callout { - background: #fff; - } - - .suggestionItem__text { - color: #000; - } - - .suggestionItem__type { - color: #000; - } - - .suggestionItem--field { - .suggestionItem__type { - background-color: tint(@globalColorOrange, 80%); - } - } - - .suggestionItem--value { - .suggestionItem__type { - background-color: tint(@globalColorTeal, 80%); - } - } - - .suggestionItem--operator { - .suggestionItem__type { - background-color: tint(@globalColorBlue, 80%); - } - } - - .suggestionItem--conjunction { - .suggestionItem__type { - background-color: tint(@globalColorPurple, 80%); - } - } - - } - } -} - -.inline-form .typeahead.visible .input-group { - > :first-child { - .border-bottom-radius(0); - } - > :last-child { - .border-bottom-radius(0); - } -} - - - - .suggestionItem { - display: flex; - align-items: stretch; - flex-grow: 1; - align-items: center; - font-size: 13px; - white-space: nowrap; - } - - .suggestionItem__text, .suggestionItem__type, .suggestionItem__description { - flex-grow: 1; - flex-basis: 0%; - display: flex; - flex-direction: column; - } - - .suggestionItem__type { - flex-grow: 0; - flex-basis: auto; - width: 32px; - height: 32px; - text-align: center; - overflow: hidden; - padding: 4px; - justify-content: center; - align-items: center; - } - - &.suggestionItem--field { - .suggestionItem__type { - background-color: tint(@globalColorOrange, 90%); - color: @globalColorOrange; - } - } - - &.suggestionItem--value { - .suggestionItem__type { - background-color: tint(@globalColorTeal, 90%); - color: @globalColorTeal; - } - - .suggestionItem__text { - width: auto; - } - } - - &.suggestionItem--operator { - .suggestionItem__type { - background-color: tint(@globalColorBlue, 90%); - color: @globalColorBlue; - } - } - - &.suggestionItem--conjunction { - .suggestionItem__type { - background-color: tint(@globalColorPurple, 90%); - color: @globalColorPurple; - } - } - - &.suggestionItem--recentSearch { - .suggestionItem__type { - background-color: @globalColorLightGray; - color: @globalColorMediumGray; - } - - .suggestionItem__text { - width: auto; - } - } - - .suggestionItem__text { - flex-grow: 0; /* 2 */ - flex-basis: auto; /* 2 */ - font-family: "SFMono-Regular", Consolas, "Liberation Mono", Menlo, Courier, monospace; - margin-right: 32px; - width: 250px; - overflow: hidden; - text-overflow: ellipsis; - padding: 4px 8px; - color: #111; - } - - .suggestionItem__description { - color: @globalColorDarkGray; - overflow: hidden; - text-overflow: ellipsis; - } - - .suggestionItem__callout { - font-family: "SFMono-Regular", Consolas, "Liberation Mono", Menlo, Courier, monospace; - background: @globalColorLightestGray; - color: #000; - padding: 0 4px; - display: inline-block; - } diff --git a/src/ui/public/query_bar/components/typeahead/suggestions_component.tsx b/src/ui/public/query_bar/components/typeahead/suggestions_component.tsx index 15c244ed5d07b..c4fb9a8de283c 100644 --- a/src/ui/public/query_bar/components/typeahead/suggestions_component.tsx +++ b/src/ui/public/query_bar/components/typeahead/suggestions_component.tsx @@ -20,7 +20,6 @@ import { isEmpty } from 'lodash'; import React, { Component } from 'react'; import { AutocompleteSuggestion } from 'ui/autocomplete_providers'; -import './suggestion.less'; import { SuggestionComponent } from './suggestion_component'; interface Props { From d239955ee492d5b9ae4fd9328f3ff8b5cdeb745d Mon Sep 17 00:00:00 2001 From: Matthew Bargar Date: Tue, 23 Oct 2018 07:40:25 -0400 Subject: [PATCH 53/54] skip dashboard test so I can see if there are other failures --- test/functional/apps/dashboard/_embeddable_rendering.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/test/functional/apps/dashboard/_embeddable_rendering.js b/test/functional/apps/dashboard/_embeddable_rendering.js index 1a0f47ed28e17..07ceeed9544a1 100644 --- a/test/functional/apps/dashboard/_embeddable_rendering.js +++ b/test/functional/apps/dashboard/_embeddable_rendering.js @@ -80,7 +80,7 @@ export default function ({ getService, getPageObjects }) { await dashboardExpect.vegaTextsDoNotExist(['5,000']); }; - describe('dashboard embeddable rendering', function describeIndexTests() { + describe.skip('dashboard embeddable rendering', function describeIndexTests() { before(async () => { await PageObjects.dashboard.clickNewDashboard(); From 55fc2ef6dc9c058a2235e42d51e82c07c2109951 Mon Sep 17 00:00:00 2001 From: Matthew Bargar Date: Tue, 23 Oct 2018 10:50:51 -0400 Subject: [PATCH 54/54] fix some outdated selectors --- test/functional/apps/discover/_field_data.js | 12 ++++++++---- test/functional/apps/discover/_large_string.js | 4 +++- 2 files changed, 11 insertions(+), 5 deletions(-) diff --git a/test/functional/apps/discover/_field_data.js b/test/functional/apps/discover/_field_data.js index cdc51d86d7b5e..578f578c73d28 100644 --- a/test/functional/apps/discover/_field_data.js +++ b/test/functional/apps/discover/_field_data.js @@ -23,6 +23,7 @@ export default function ({ getService, getPageObjects }) { const retry = getService('retry'); const esArchiver = getService('esArchiver'); const kibanaServer = getService('kibanaServer'); + const queryBar = getService('queryBar'); const PageObjects = getPageObjects(['common', 'header', 'discover', 'visualize']); describe('discover tab', function describeIndexTests() { @@ -45,7 +46,8 @@ export default function ({ getService, getPageObjects }) { describe('field data', function () { it('search php should show the correct hit count', async function () { const expectedHitCount = '445'; - await PageObjects.discover.query('php'); + await queryBar.setQuery('php'); + await queryBar.submitQuery(); await retry.try(async function tryingForTime() { const hitCount = await PageObjects.discover.getHitCount(); @@ -63,7 +65,8 @@ export default function ({ getService, getPageObjects }) { it('search type:apache should show the correct hit count', async function () { const expectedHitCount = '11,156'; - await PageObjects.discover.query('type:apache'); + await queryBar.setQuery('type:apache'); + await queryBar.submitQuery(); await retry.try(async function tryingForTime() { const hitCount = await PageObjects.discover.getHitCount(); expect(hitCount).to.be(expectedHitCount); @@ -164,8 +167,9 @@ export default function ({ getService, getPageObjects }) { }); it('a bad syntax query should show an error message', async function () { - const expectedError = 'Discover: Failed to parse query [xxx(yyy]'; - await PageObjects.discover.query('xxx(yyy'); + const expectedError = 'Discover: Failed to parse query [xxx(yyy))]'; + await queryBar.setQuery('xxx(yyy))'); + await queryBar.submitQuery(); const toastMessage = await PageObjects.header.getToastMessage(); expect(toastMessage).to.contain(expectedError); await PageObjects.header.clickToastOK(); diff --git a/test/functional/apps/discover/_large_string.js b/test/functional/apps/discover/_large_string.js index d55846a9cd62a..9feed7c9202e9 100644 --- a/test/functional/apps/discover/_large_string.js +++ b/test/functional/apps/discover/_large_string.js @@ -23,6 +23,7 @@ export default function ({ getService, getPageObjects }) { const esArchiver = getService('esArchiver'); const log = getService('log'); const retry = getService('retry'); + const queryBar = getService('queryBar'); const PageObjects = getPageObjects([ 'common', 'home', @@ -62,7 +63,8 @@ export default function ({ getService, getPageObjects }) { describe('test large data', function () { it('search Newsletter should show the correct hit count', async function () { const expectedHitCount = '1'; - await PageObjects.discover.query('Newsletter'); + await queryBar.setQuery('Newsletter'); + await queryBar.submitQuery(); await retry.try(async function tryingForTime() { const hitCount = await PageObjects.discover.getHitCount(); expect(hitCount).to.be(expectedHitCount);