From 8693f9b5adf1846461942f1f0bc91bda64a5c58a Mon Sep 17 00:00:00 2001 From: Walter Rafelsberger Date: Tue, 10 Mar 2020 09:18:22 +0100 Subject: [PATCH] [ML] Replace KqlFilterBar with QueryStringInput. --- .../public/__mocks__/shared_imports.ts | 2 - x-pack/plugins/transform/public/app/app.tsx | 24 ++++-- .../transform/public/app/app_dependencies.tsx | 52 +----------- .../step_define/step_define_form.tsx | 82 ++++++++++++++----- .../transform/public/shared_imports.ts | 6 -- 5 files changed, 83 insertions(+), 83 deletions(-) diff --git a/x-pack/plugins/transform/public/__mocks__/shared_imports.ts b/x-pack/plugins/transform/public/__mocks__/shared_imports.ts index bc8ace2932c0e63..494b5824dc2501d 100644 --- a/x-pack/plugins/transform/public/__mocks__/shared_imports.ts +++ b/x-pack/plugins/transform/public/__mocks__/shared_imports.ts @@ -8,7 +8,6 @@ jest.mock('ui/new_platform'); export const expandLiteralStrings = jest.fn(); export const XJsonMode = jest.fn(); -export const setDependencyCache = jest.fn(); export const useRequest = jest.fn(() => ({ isLoading: false, error: null, @@ -16,4 +15,3 @@ export const useRequest = jest.fn(() => ({ })); export { mlInMemoryTableBasicFactory } from '../../../../legacy/plugins/ml/public/application/components/ml_in_memory_table'; export const SORT_DIRECTION = { ASC: 'asc' }; -export const KqlFilterBar = jest.fn(() => null); diff --git a/x-pack/plugins/transform/public/app/app.tsx b/x-pack/plugins/transform/public/app/app.tsx index 644aedec3eac083..4db056641144015 100644 --- a/x-pack/plugins/transform/public/app/app.tsx +++ b/x-pack/plugins/transform/public/app/app.tsx @@ -10,10 +10,14 @@ import { HashRouter, Redirect, Route, Switch } from 'react-router-dom'; import { FormattedMessage } from '@kbn/i18n/react'; +import { KibanaContextProvider } from '../../../../../src/plugins/kibana_react/public'; +import { Storage } from '../../../../../src/plugins/kibana_utils/public'; + +import { API_BASE_PATH } from '../../common/constants'; + import { SectionError } from './components'; import { CLIENT_BASE_PATH, SECTION_SLUG } from './constants'; -import { getAppProviders } from './app_dependencies'; -import { AuthorizationContext } from './lib/authorization'; +import { AuthorizationContext, AuthorizationProvider } from './lib/authorization'; import { AppDependencies } from './app_dependencies'; import { CloneTransformSection } from './sections/clone_transform'; @@ -60,13 +64,21 @@ export const App: FC = () => { ); }; +const localStorage = new Storage(window.localStorage); + export const renderApp = (element: HTMLElement, appDependencies: AppDependencies) => { - const Providers = getAppProviders(appDependencies); + const I18nContext = appDependencies.i18n.Context; render( - - - , + + + + + + + + + , element ); diff --git a/x-pack/plugins/transform/public/app/app_dependencies.tsx b/x-pack/plugins/transform/public/app/app_dependencies.tsx index 37258dc777d87d6..241a208d19b6e49 100644 --- a/x-pack/plugins/transform/public/app/app_dependencies.tsx +++ b/x-pack/plugins/transform/public/app/app_dependencies.tsx @@ -4,17 +4,11 @@ * you may not use this file except in compliance with the Elastic License. */ -import React, { createContext, useContext, ReactNode } from 'react'; -import { HashRouter } from 'react-router-dom'; - import { CoreSetup, CoreStart } from 'src/core/public'; import { DataPublicPluginStart } from 'src/plugins/data/public'; -import { API_BASE_PATH } from '../../common/constants'; - -import { setDependencyCache } from '../shared_imports'; - -import { AuthorizationProvider } from './lib/authorization'; +import { useKibana } from '../../../../../src/plugins/kibana_react/public'; +import { Storage } from '../../../../../src/plugins/kibana_utils/public'; export interface AppDependencies { chrome: CoreStart['chrome']; @@ -25,33 +19,12 @@ export interface AppDependencies { notifications: CoreStart['notifications']; uiSettings: CoreStart['uiSettings']; savedObjects: CoreStart['savedObjects']; + storage: Storage; overlays: CoreStart['overlays']; } -let DependenciesContext: React.Context; - -const setAppDependencies = (deps: AppDependencies) => { - const legacyBasePath = { - prepend: deps.http.basePath.prepend, - get: deps.http.basePath.get, - remove: () => {}, - }; - - setDependencyCache({ - autocomplete: deps.data.autocomplete, - docLinks: deps.docLinks, - basePath: legacyBasePath as any, - }); - DependenciesContext = createContext(deps); - return DependenciesContext.Provider; -}; - export const useAppDependencies = () => { - if (!DependenciesContext) { - throw new Error(`The app dependencies Context hasn't been set. - Use the "setAppDependencies()" method when bootstrapping the app.`); - } - return useContext(DependenciesContext); + return useKibana().services as AppDependencies; }; export const useToastNotifications = () => { @@ -60,20 +33,3 @@ export const useToastNotifications = () => { } = useAppDependencies(); return toastNotifications; }; - -export const getAppProviders = (deps: AppDependencies) => { - const I18nContext = deps.i18n.Context; - - // Create App dependencies context and get its provider - const AppDependenciesProvider = setAppDependencies(deps); - - return ({ children }: { children: ReactNode }) => ( - - - - {children} - - - - ); -}; diff --git a/x-pack/plugins/transform/public/app/sections/create_transform/components/step_define/step_define_form.tsx b/x-pack/plugins/transform/public/app/sections/create_transform/components/step_define/step_define_form.tsx index 254d867165ae69c..e082dd3c4a3ef33 100644 --- a/x-pack/plugins/transform/public/app/sections/create_transform/components/step_define/step_define_form.tsx +++ b/x-pack/plugins/transform/public/app/sections/create_transform/components/step_define/step_define_form.tsx @@ -20,12 +20,16 @@ import { EuiHorizontalRule, EuiLink, EuiPanel, - // @ts-ignore - EuiSearchBar, EuiSpacer, EuiSwitch, } from '@elastic/eui'; +import { + esKuery, + Query, + QueryStringInput, +} from '../../../../../../../../../src/plugins/data/public'; + import { useDocumentationLinks } from '../../../../hooks/use_documentation_links'; import { SavedSearchQuery, SearchItems } from '../../../../hooks/use_search_items'; import { useXJsonMode, xJsonMode } from '../../../../hooks/use_x_json_mode'; @@ -37,7 +41,6 @@ import { AggListForm } from '../aggregation_list'; import { GroupByListForm } from '../group_by_list'; import { SourceIndexPreview } from '../source_index_preview'; import { PivotPreview } from './pivot_preview'; -import { KqlFilterBar } from '../../../../../shared_imports'; import { SwitchModal } from './switch_modal'; import { @@ -74,6 +77,11 @@ export interface StepDefineExposedState { const defaultSearch = '*'; const emptySearch = ''; +enum QUERY_LANGUAGE { + KUERY = 'kuery', + LUCENE = 'lucene', +} + export function getDefaultStepDefineState(searchItems: SearchItems): StepDefineExposedState { return { aggList: {} as PivotAggsConfigDict, @@ -244,23 +252,41 @@ export const StepDefineForm: FC = React.memo(({ overrides = {}, onChange, const defaults = { ...getDefaultStepDefineState(searchItems), ...overrides }; // The search filter + const [searchInput, setSearchInput] = useState({ + query: '', + language: QUERY_LANGUAGE.KUERY as string, + }); const [searchString, setSearchString] = useState(defaults.searchString); const [searchQuery, setSearchQuery] = useState(defaults.searchQuery); const [useKQL] = useState(true); - const searchHandler = (d: Record) => { - const { filterQuery, queryString } = d; - const newSearch = queryString === emptySearch ? defaultSearch : queryString; + const { indexPattern } = searchItems; + + const searchChangeHandler = (query: Query) => setSearchInput(query); + const searchSubmitHandler = (query: Query) => { + let queryString = ''; + let filterQuery = { match_all: {} } as Dictionary; + + if (query.language === QUERY_LANGUAGE.KUERY && typeof query.query === 'string') { + filterQuery = esKuery.toElasticsearchQuery( + esKuery.fromKueryExpression(query.query as string), + indexPattern + ); + } else if (typeof query.query === 'string') { + queryString = query.query; + } else { + filterQuery = query.query; + } + + const newSearchString = queryString === emptySearch ? defaultSearch : queryString; const newSearchQuery = isMatchAllQuery(filterQuery) ? defaultSearch : filterQuery; - setSearchString(newSearch); + setSearchString(newSearchString); setSearchQuery(newSearchQuery); }; // The list of selected group by fields const [groupByList, setGroupByList] = useState(defaults.groupByList); - const { indexPattern } = searchItems; - const { groupByOptions, groupByOptionsData, @@ -592,18 +618,32 @@ export const StepDefineForm: FC = React.memo(({ overrides = {}, onChange, defaultMessage: 'Use a query to filter the source data (optional).', })} > - )} diff --git a/x-pack/plugins/transform/public/shared_imports.ts b/x-pack/plugins/transform/public/shared_imports.ts index 3582dd5d266e2f5..789d3482fb4342e 100644 --- a/x-pack/plugins/transform/public/shared_imports.ts +++ b/x-pack/plugins/transform/public/shared_imports.ts @@ -38,9 +38,3 @@ export { SortDirection, SORT_DIRECTION, } from '../../../legacy/plugins/ml/public/application/components/ml_in_memory_table'; - -// Needs to be imported because we're reusing KqlFilterBar which depends on it. -export { setDependencyCache } from '../../../legacy/plugins/ml/public/application/util/dependency_cache'; - -// @ts-ignore: could not find declaration file for module -export { KqlFilterBar } from '../../../legacy/plugins/ml/public/application/components/kql_filter_bar';