Euify and Reactify Query Bar Component (#23704)

Implements query bar portion of https://elastic.github.io/eui/#/layout/header. Filter bar will come in another PR.

Fixes #14086

Re-implements our query bar component in React using some EUI components. Existing typeahead and suggestion styles were copied over 1:1 for now after talking with Dave about it. In this PR I focused on reaching feature parity with the existing query bar. Some additional work would be needed before we could move this into EUI as a generic component that could be consumed by other plugins.

Still needs some new tests and I suspect some old tests will need to be updated, but other than that this PR is functionally complete and ready for reviews.

Author: Bargs

src/core_plugins/kibana/public/dashboard/dashboard_app.html

@@ -28,10 +28,9 @@
         <query-bar
           query="model.query"
           app-name="'dashboard'"
-          on-submit="updateQueryAndFetch($query)"
+          on-submit="updateQueryAndFetch"
           index-patterns="indexPatterns"
-        >
-        </query-bar>
+        ></query-bar>
       </div>
     </div>
   </kbn-top-nav>

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) {

src/core_plugins/kibana/public/discover/index.html

@@ -26,11 +26,10 @@ <h1 tabindex="0" id="kui_local_breadcrumb" class="kuiLocalBreadcrumb">
       <div data-transclude-slot="bottomRow" class="fullWidth">
         <query-bar
           query="state.query"
+          on-submit="updateQueryAndFetch"
           app-name="'discover'"
-          on-submit="updateQueryAndFetch($query)"
           index-patterns="[indexPattern]"
-        >
-        </query-bar>
+        ></query-bar>
       </div>
     </div>
   </kbn-top-nav>

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';
 

src/core_plugins/kibana/public/visualize/editor/editor.html

@@ -40,11 +40,10 @@
           <query-bar
             query="state.query"
             app-name="'visualize'"
-            on-submit="updateQueryAndFetch($query)"
+            on-submit="updateQueryAndFetch"
             disable-auto-focus="true"
             index-patterns="[indexPattern]"
-          >
-          </query-bar>
+          ></query-bar>
         </div>
       </div>
     </div>

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<AutocompleteSuggestion[]>;
 
-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;

src/ui/public/autoload/modules.js

@@ -47,10 +47,10 @@ import '../style_compile';
 import '../timefilter';
 import '../timepicker';
 import '../tooltip';
-import '../typeahead';
 import '../url';
 import '../validate_date_interval';
 import '../watch_multi';
 import '../courier/saved_object/ui/saved_object_save_as_checkbox';
 import '../react_components';
 import '../i18n';
+import '../query_bar/directive';

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 = '<input ng-model="mockModel" parse-query input-focus type="text">';
-let fromUser;
 import { toUser } from '../../parse_query/lib/to_user';
-import '../../parse_query';
-import { ParseQueryLibFromUserProvider } from '../../parse_query/lib/from_user';
+import '../../parse_query/index';
+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', {});
     });
 

src/ui/public/documentation_links/documentation_links.js renamed to 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`,
   },
 };

src/ui/public/index_patterns/static_utils/index.d.ts

@@ -0,0 +1,29 @@
+/*
+ * 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 { StaticIndexPattern } from 'ui/index_patterns';
+
+interface SavedObject {
+  attributes: {
+    fields: string;
+    title: string;
+  };
+}
+
+export function getFromLegacyIndexPattern(indexPatterns: any[]): StaticIndexPattern[];