From 6b6a7b65cec1fa5a0a20034c93c6593c4b09aada Mon Sep 17 00:00:00 2001 From: Walter Rafelsberger Date: Fri, 13 Mar 2020 08:26:04 +0100 Subject: [PATCH] [ML] Transforms: Replace KqlFilterBar with QueryStringInput. (#59723) (#60012) - Replaces the custom KqlFilterBar with Kibana's QueryStringInput. This means the wizard now supports both lucene and kuery input. - Using this component we no longer need to do cross-imports from the ML plugin. The use of setDependencyCache is no longer necessary. - Replaces the custom AppDependencies provider code with Kibana's KibanaContextProvider. --- .../public/__mocks__/shared_imports.ts | 4 - .../app_dependencies.tsx} | 20 +-- x-pack/plugins/transform/public/app/app.tsx | 19 ++- .../transform/public/app/app_dependencies.tsx | 54 +------- .../public/app/common/request.test.ts | 1 + .../pivot_preview/pivot_preview.test.tsx | 9 +- .../toast_notification_text.test.tsx | 16 +-- .../source_index_preview.test.tsx | 9 +- .../step_create/step_create_form.test.tsx | 10 +- .../step_define/step_define_form.test.tsx | 45 ++++++- .../step_define/step_define_form.tsx | 116 ++++++++++++------ .../step_define/step_define_summary.test.tsx | 8 +- .../step_define/step_define_summary.tsx | 85 +++++-------- .../components/step_define/switch_modal.tsx | 4 +- .../transform_list/action_delete.test.tsx | 13 +- .../transform_list/action_start.test.tsx | 12 +- .../transform_list/action_stop.test.tsx | 12 +- x-pack/plugins/transform/public/plugin.ts | 5 + .../transform/public/shared_imports.ts | 14 --- .../translations/translations/ja-JP.json | 1 - .../translations/translations/zh-CN.json | 1 - .../services/transform_ui/wizard.ts | 6 +- 22 files changed, 212 insertions(+), 252 deletions(-) rename x-pack/plugins/transform/public/app/{app_dependencies.mock.ts => __mocks__/app_dependencies.tsx} (55%) diff --git a/x-pack/plugins/transform/public/__mocks__/shared_imports.ts b/x-pack/plugins/transform/public/__mocks__/shared_imports.ts index bc8ace2932c0e..62ddc13566be8 100644 --- a/x-pack/plugins/transform/public/__mocks__/shared_imports.ts +++ b/x-pack/plugins/transform/public/__mocks__/shared_imports.ts @@ -4,11 +4,8 @@ * you may not use this file except in compliance with the Elastic License. */ -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 +13,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_dependencies.mock.ts b/x-pack/plugins/transform/public/app/__mocks__/app_dependencies.tsx similarity index 55% rename from x-pack/plugins/transform/public/app/app_dependencies.mock.ts rename to x-pack/plugins/transform/public/app/__mocks__/app_dependencies.tsx index 4e5af1eca7bd0..75fefc99b5458 100644 --- a/x-pack/plugins/transform/public/app/app_dependencies.mock.ts +++ b/x-pack/plugins/transform/public/app/__mocks__/app_dependencies.tsx @@ -4,25 +4,31 @@ * you may not use this file except in compliance with the Elastic License. */ -import { coreMock } from '../../../../../src/core/public/mocks'; -import { dataPluginMock } from '../../../../../src/plugins/data/public/mocks'; - -import { getAppProviders, AppDependencies } from './app_dependencies'; +import { coreMock } from '../../../../../../src/core/public/mocks'; +import { dataPluginMock } from '../../../../../../src/plugins/data/public/mocks'; +import { Storage } from '../../../../../../src/plugins/kibana_utils/public'; const coreSetup = coreMock.createSetup(); const coreStart = coreMock.createStart(); const dataStart = dataPluginMock.createStartContract(); -const appDependencies: AppDependencies = { +const appDependencies = { chrome: coreStart.chrome, data: dataStart, docLinks: coreStart.docLinks, i18n: coreStart.i18n, - notifications: coreStart.notifications, + notifications: coreSetup.notifications, uiSettings: coreStart.uiSettings, savedObjects: coreStart.savedObjects, + storage: ({ get: jest.fn() } as unknown) as Storage, overlays: coreStart.overlays, http: coreSetup.http, }; -export const Providers = getAppProviders(appDependencies); +export const useAppDependencies = () => { + return appDependencies; +}; + +export const useToastNotifications = () => { + return coreSetup.notifications; +}; diff --git a/x-pack/plugins/transform/public/app/app.tsx b/x-pack/plugins/transform/public/app/app.tsx index 644aedec3eac0..01ff7f5bff27f 100644 --- a/x-pack/plugins/transform/public/app/app.tsx +++ b/x-pack/plugins/transform/public/app/app.tsx @@ -10,10 +10,13 @@ import { HashRouter, Redirect, Route, Switch } from 'react-router-dom'; import { FormattedMessage } from '@kbn/i18n/react'; +import { KibanaContextProvider } from '../../../../../src/plugins/kibana_react/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'; @@ -61,12 +64,16 @@ export const App: FC = () => { }; 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 37258dc777d87..87db02988adf0 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']; @@ -22,36 +16,15 @@ export interface AppDependencies { docLinks: CoreStart['docLinks']; http: CoreSetup['http']; i18n: CoreStart['i18n']; - notifications: CoreStart['notifications']; + notifications: CoreSetup['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/common/request.test.ts b/x-pack/plugins/transform/public/app/common/request.test.ts index 0720c654d5029..4c3fba3bbf8dd 100644 --- a/x-pack/plugins/transform/public/app/common/request.test.ts +++ b/x-pack/plugins/transform/public/app/common/request.test.ts @@ -143,6 +143,7 @@ describe('Transform: Common', () => { isAdvancedPivotEditorEnabled: false, isAdvancedSourceEditorEnabled: false, sourceConfigUpdated: false, + searchLanguage: 'kuery', searchString: 'the-query', searchQuery: 'the-search-query', valid: true, diff --git a/x-pack/plugins/transform/public/app/components/pivot_preview/pivot_preview.test.tsx b/x-pack/plugins/transform/public/app/components/pivot_preview/pivot_preview.test.tsx index b37cdbb132bab..5ed50eaab46ba 100644 --- a/x-pack/plugins/transform/public/app/components/pivot_preview/pivot_preview.test.tsx +++ b/x-pack/plugins/transform/public/app/components/pivot_preview/pivot_preview.test.tsx @@ -8,7 +8,6 @@ import React from 'react'; import { render, wait } from '@testing-library/react'; import '@testing-library/jest-dom/extend-expect'; -import { Providers } from '../../app_dependencies.mock'; import { getPivotQuery, PivotAggsConfig, @@ -19,8 +18,8 @@ import { import { PivotPreview } from './pivot_preview'; -jest.mock('ui/new_platform'); jest.mock('../../../shared_imports'); +jest.mock('../../../app/app_dependencies'); describe('Transform: ', () => { // Using the async/await wait()/done() pattern to avoid act() errors. @@ -45,11 +44,7 @@ describe('Transform: ', () => { query: getPivotQuery('the-query'), }; - const { getByText } = render( - - - - ); + const { getByText } = render(); // Act // Assert diff --git a/x-pack/plugins/transform/public/app/components/toast_notification_text.test.tsx b/x-pack/plugins/transform/public/app/components/toast_notification_text.test.tsx index 5b8721cb0fe8c..e51119d67d567 100644 --- a/x-pack/plugins/transform/public/app/components/toast_notification_text.test.tsx +++ b/x-pack/plugins/transform/public/app/components/toast_notification_text.test.tsx @@ -7,23 +7,17 @@ import React from 'react'; import { render } from '@testing-library/react'; -import { Providers } from '../app_dependencies.mock'; - import { ToastNotificationText } from './toast_notification_text'; jest.mock('../../shared_imports'); -jest.mock('ui/new_platform'); +jest.mock('../../app/app_dependencies'); describe('ToastNotificationText', () => { test('should render the text as plain text', () => { const props = { text: 'a short text message', }; - const { container } = render( - - - - ); + const { container } = render(); expect(container.textContent).toBe('a short text message'); }); @@ -32,11 +26,7 @@ describe('ToastNotificationText', () => { text: 'a text message that is longer than 140 characters. a text message that is longer than 140 characters. a text message that is longer than 140 characters. ', }; - const { container } = render( - - - - ); + const { container } = render(); expect(container.textContent).toBe( 'a text message that is longer than 140 characters. a text message that is longer than 140 characters. a text message that is longer than 140 ...View details' ); diff --git a/x-pack/plugins/transform/public/app/sections/create_transform/components/source_index_preview/source_index_preview.test.tsx b/x-pack/plugins/transform/public/app/sections/create_transform/components/source_index_preview/source_index_preview.test.tsx index 7a1532705916f..32f6ff9490a0f 100644 --- a/x-pack/plugins/transform/public/app/sections/create_transform/components/source_index_preview/source_index_preview.test.tsx +++ b/x-pack/plugins/transform/public/app/sections/create_transform/components/source_index_preview/source_index_preview.test.tsx @@ -8,14 +8,13 @@ import React from 'react'; import { render, wait } from '@testing-library/react'; import '@testing-library/jest-dom/extend-expect'; -import { Providers } from '../../../../app_dependencies.mock'; import { getPivotQuery } from '../../../../common'; import { SearchItems } from '../../../../hooks/use_search_items'; import { SourceIndexPreview } from './source_index_preview'; -jest.mock('ui/new_platform'); jest.mock('../../../../../shared_imports'); +jest.mock('../../../../../app/app_dependencies'); describe('Transform: ', () => { // Using the async/await wait()/done() pattern to avoid act() errors. @@ -28,11 +27,7 @@ describe('Transform: ', () => { } as SearchItems['indexPattern'], query: getPivotQuery('the-query'), }; - const { getByText } = render( - - - - ); + const { getByText } = render(); // Act // Assert diff --git a/x-pack/plugins/transform/public/app/sections/create_transform/components/step_create/step_create_form.test.tsx b/x-pack/plugins/transform/public/app/sections/create_transform/components/step_create/step_create_form.test.tsx index 6223dfc5623b7..f2837d30402de 100644 --- a/x-pack/plugins/transform/public/app/sections/create_transform/components/step_create/step_create_form.test.tsx +++ b/x-pack/plugins/transform/public/app/sections/create_transform/components/step_create/step_create_form.test.tsx @@ -8,12 +8,10 @@ import React from 'react'; import { render } from '@testing-library/react'; import '@testing-library/jest-dom/extend-expect'; -import { Providers } from '../../../../app_dependencies.mock'; - import { StepCreateForm } from './step_create_form'; -jest.mock('ui/new_platform'); jest.mock('../../../../../shared_imports'); +jest.mock('../../../../../app/app_dependencies'); describe('Transform: ', () => { test('Minimal initialization', () => { @@ -26,11 +24,7 @@ describe('Transform: ', () => { onChange() {}, }; - const { getByText } = render( - - - - ); + const { getByText } = render(); // Act // Assert diff --git a/x-pack/plugins/transform/public/app/sections/create_transform/components/step_define/step_define_form.test.tsx b/x-pack/plugins/transform/public/app/sections/create_transform/components/step_define/step_define_form.test.tsx index d5cffad166831..a15e958c16b73 100644 --- a/x-pack/plugins/transform/public/app/sections/create_transform/components/step_define/step_define_form.test.tsx +++ b/x-pack/plugins/transform/public/app/sections/create_transform/components/step_define/step_define_form.test.tsx @@ -8,7 +8,14 @@ import React from 'react'; import { render, wait } from '@testing-library/react'; import '@testing-library/jest-dom/extend-expect'; -import { Providers } from '../../../../app_dependencies.mock'; +import { I18nProvider } from '@kbn/i18n/react'; + +import { KibanaContextProvider } from '../../../../../../../../../src/plugins/kibana_react/public'; + +import { coreMock } from '../../../../../../../../../src/core/public/mocks'; +import { dataPluginMock } from '../../../../../../../../../src/plugins/data/public/mocks'; +const startMock = coreMock.createStart(); + import { PivotAggsConfigDict, PivotGroupByConfigDict, @@ -19,8 +26,25 @@ import { SearchItems } from '../../../../hooks/use_search_items'; import { StepDefineForm, getAggNameConflictToastMessages } from './step_define_form'; -jest.mock('ui/new_platform'); jest.mock('../../../../../shared_imports'); +jest.mock('../../../../../app/app_dependencies'); + +const createMockWebStorage = () => ({ + clear: jest.fn(), + getItem: jest.fn(), + key: jest.fn(), + removeItem: jest.fn(), + setItem: jest.fn(), + length: 0, +}); + +const createMockStorage = () => ({ + storage: createMockWebStorage(), + get: jest.fn(), + set: jest.fn(), + remove: jest.fn(), + clear: jest.fn(), +}); describe('Transform: ', () => { // Using the async/await wait()/done() pattern to avoid act() errors. @@ -32,10 +56,21 @@ describe('Transform: ', () => { fields: [] as any[], } as SearchItems['indexPattern'], }; + + // mock services for QueryStringInput + const services = { + ...startMock, + data: dataPluginMock.createStartContract(), + appName: 'the-test-app', + storage: createMockStorage(), + }; + const { getByLabelText } = render( - - - + + + + + ); // Act 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 5b6283fc4777d..1f9a60fa869b7 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,13 +20,19 @@ import { EuiHorizontalRule, EuiLink, EuiPanel, - // @ts-ignore - EuiSearchBar, EuiSpacer, EuiSwitch, } from '@elastic/eui'; +import { + esKuery, + esQuery, + Query, + QueryStringInput, +} from '../../../../../../../../../src/plugins/data/public'; + import { PivotPreview } from '../../../../components/pivot_preview'; + 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,13 +43,11 @@ import { DropDown } from '../aggregation_dropdown'; import { AggListForm } from '../aggregation_list'; import { GroupByListForm } from '../group_by_list'; import { SourceIndexPreview } from '../source_index_preview'; -import { KqlFilterBar } from '../../../../../shared_imports'; import { SwitchModal } from './switch_modal'; import { getPivotQuery, getPreviewRequestBody, - isMatchAllQuery, matchAllQuery, AggName, DropDownLabel, @@ -65,14 +69,18 @@ export interface StepDefineExposedState { groupByList: PivotGroupByConfigDict; isAdvancedPivotEditorEnabled: boolean; isAdvancedSourceEditorEnabled: boolean; - searchString: string | SavedSearchQuery; + searchLanguage: QUERY_LANGUAGE; + searchString: string | undefined; searchQuery: string | SavedSearchQuery; sourceConfigUpdated: boolean; valid: boolean; } const defaultSearch = '*'; -const emptySearch = ''; + +const QUERY_LANGUAGE_KUERY = 'kuery'; +const QUERY_LANGUAGE_LUCENE = 'lucene'; +type QUERY_LANGUAGE = 'kuery' | 'lucene'; export function getDefaultStepDefineState(searchItems: SearchItems): StepDefineExposedState { return { @@ -80,7 +88,8 @@ export function getDefaultStepDefineState(searchItems: SearchItems): StepDefineE groupByList: {} as PivotGroupByConfigDict, isAdvancedPivotEditorEnabled: false, isAdvancedSourceEditorEnabled: false, - searchString: searchItems.savedSearch !== undefined ? searchItems.combinedQuery : defaultSearch, + searchLanguage: QUERY_LANGUAGE_KUERY, + searchString: undefined, searchQuery: searchItems.savedSearch !== undefined ? searchItems.combinedQuery : defaultSearch, sourceConfigUpdated: false, valid: false, @@ -126,7 +135,6 @@ export function applyTransformConfigToDefineState( const query = transformConfig.source.query; if (query !== undefined && !isEqual(query, matchAllQuery)) { state.isAdvancedSourceEditorEnabled = true; - state.searchString = ''; state.searchQuery = query; state.sourceConfigUpdated = true; } @@ -243,24 +251,45 @@ export const StepDefineForm: FC = React.memo(({ overrides = {}, onChange, const defaults = { ...getDefaultStepDefineState(searchItems), ...overrides }; - // The search filter - const [searchString, setSearchString] = useState(defaults.searchString); + // The internal state of the input query bar updated on every key stroke. + const [searchInput, setSearchInput] = useState({ + query: defaults.searchString || '', + language: defaults.searchLanguage, + }); + + // The state of the input query bar updated on every submit and to be exposed. + const [searchLanguage, setSearchLanguage] = useState( + defaults.searchLanguage + ); + 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 newSearchQuery = isMatchAllQuery(filterQuery) ? defaultSearch : filterQuery; - setSearchString(newSearch); - setSearchQuery(newSearchQuery); + + const { indexPattern } = searchItems; + + const searchChangeHandler = (query: Query) => setSearchInput(query); + const searchSubmitHandler = (query: Query) => { + setSearchLanguage(query.language as QUERY_LANGUAGE); + setSearchString(query.query !== '' ? (query.query as string) : undefined); + switch (query.language) { + case QUERY_LANGUAGE_KUERY: + setSearchQuery( + esKuery.toElasticsearchQuery( + esKuery.fromKueryExpression(query.query as string), + indexPattern + ) + ); + return; + case QUERY_LANGUAGE_LUCENE: + setSearchQuery(esQuery.luceneStringToDsl(query.query as string)); + return; + } }; // The list of selected group by fields const [groupByList, setGroupByList] = useState(defaults.groupByList); - const { indexPattern } = searchItems; - const { groupByOptions, groupByOptionsData, @@ -349,7 +378,7 @@ export const StepDefineForm: FC = React.memo(({ overrides = {}, onChange, const pivotAggsArr = dictionaryToArray(aggList); const pivotGroupByArr = dictionaryToArray(groupByList); - const pivotQuery = useKQL ? getPivotQuery(searchQuery) : getPivotQuery(searchString); + const pivotQuery = getPivotQuery(searchQuery); // Advanced editor for pivot config state const [isAdvancedEditorSwitchModalVisible, setAdvancedEditorSwitchModalVisible] = useState(false); @@ -409,8 +438,6 @@ export const StepDefineForm: FC = React.memo(({ overrides = {}, onChange, const applyAdvancedSourceEditorChanges = () => { const sourceConfig = JSON.parse(advancedEditorSourceConfig); const prettySourceConfig = JSON.stringify(sourceConfig, null, 2); - // Switched to editor so we clear out the search string as the bar won't be visible - setSearchString(emptySearch); setSearchQuery(sourceConfig); setSourceConfigUpdated(true); setAdvancedEditorSourceConfig(prettySourceConfig); @@ -471,7 +498,6 @@ export const StepDefineForm: FC = React.memo(({ overrides = {}, onChange, const toggleAdvancedSourceEditor = (reset = false) => { if (reset === true) { setSearchQuery(defaultSearch); - setSearchString(defaultSearch); setSourceConfigUpdated(false); } if (isAdvancedSourceEditorEnabled === false) { @@ -532,6 +558,7 @@ export const StepDefineForm: FC = React.memo(({ overrides = {}, onChange, groupByList, isAdvancedPivotEditorEnabled, isAdvancedSourceEditorEnabled, + searchLanguage, searchString, searchQuery, sourceConfigUpdated, @@ -544,6 +571,7 @@ export const StepDefineForm: FC = React.memo(({ overrides = {}, onChange, JSON.stringify(pivotGroupByArr), isAdvancedPivotEditorEnabled, isAdvancedSourceEditorEnabled, + searchLanguage, searchString, searchQuery, valid, @@ -560,7 +588,7 @@ export const StepDefineForm: FC = React.memo(({ overrides = {}, onChange,
- {searchItems.savedSearch === undefined && typeof searchString === 'string' && ( + {searchItems.savedSearch === undefined && ( = React.memo(({ overrides = {}, onChange, defaultMessage: 'Use a query to filter the source data (optional).', })} > - )} diff --git a/x-pack/plugins/transform/public/app/sections/create_transform/components/step_define/step_define_summary.test.tsx b/x-pack/plugins/transform/public/app/sections/create_transform/components/step_define/step_define_summary.test.tsx index 36a662e0cb7e6..f2e5d30b0601f 100644 --- a/x-pack/plugins/transform/public/app/sections/create_transform/components/step_define/step_define_summary.test.tsx +++ b/x-pack/plugins/transform/public/app/sections/create_transform/components/step_define/step_define_summary.test.tsx @@ -8,7 +8,6 @@ import React from 'react'; import { render, wait } from '@testing-library/react'; import '@testing-library/jest-dom/extend-expect'; -import { Providers } from '../../../../app_dependencies.mock'; import { PivotAggsConfig, PivotGroupByConfig, @@ -20,8 +19,8 @@ import { SearchItems } from '../../../../hooks/use_search_items'; import { StepDefineExposedState } from './step_define_form'; import { StepDefineSummary } from './step_define_summary'; -jest.mock('ui/new_platform'); jest.mock('../../../../../shared_imports'); +jest.mock('../../../../../app/app_dependencies'); describe('Transform: ', () => { // Using the async/await wait()/done() pattern to avoid act() errors. @@ -51,15 +50,14 @@ describe('Transform: ', () => { isAdvancedPivotEditorEnabled: false, isAdvancedSourceEditorEnabled: false, sourceConfigUpdated: false, + searchLanguage: 'kuery', searchString: 'the-query', searchQuery: 'the-search-query', valid: true, }; const { getByText } = render( - - - + ); // Act diff --git a/x-pack/plugins/transform/public/app/sections/create_transform/components/step_define/step_define_summary.tsx b/x-pack/plugins/transform/public/app/sections/create_transform/components/step_define/step_define_summary.tsx index 00948109c811d..54cc1e8c071fa 100644 --- a/x-pack/plugins/transform/public/app/sections/create_transform/components/step_define/step_define_summary.tsx +++ b/x-pack/plugins/transform/public/app/sections/create_transform/components/step_define/step_define_summary.tsx @@ -26,9 +26,6 @@ import { GroupByListSummary } from '../group_by_list'; import { StepDefineExposedState } from './step_define_form'; -const defaultSearch = '*'; -const emptySearch = ''; - interface Props { formState: StepDefineExposedState; searchItems: SearchItems; @@ -39,66 +36,50 @@ export const StepDefineSummary: FC = ({ searchItems, }) => { const pivotQuery = getPivotQuery(searchQuery); - let useCodeBlock = false; - let displaySearch; - // searchString set to empty once source config editor used - display query instead - if (searchString === emptySearch) { - displaySearch = JSON.stringify(searchQuery, null, 2); - useCodeBlock = true; - } else if (searchString === defaultSearch) { - displaySearch = emptySearch; - } else { - displaySearch = searchString; - } return (
- {searchItems.savedSearch !== undefined && - searchItems.savedSearch.id === undefined && - typeof searchString === 'string' && ( - + {searchItems.savedSearch === undefined && ( + + + {searchItems.indexPattern.title} + + {typeof searchString === 'string' && ( - {searchItems.indexPattern.title} + {searchString} - {useCodeBlock === false && displaySearch !== emptySearch && ( - - {displaySearch} - - )} - {useCodeBlock === true && displaySearch !== emptySearch && ( - + - - {displaySearch} - - - )} - - )} + {JSON.stringify(searchQuery, null, 2)} + + + )} + + )} {searchItems.savedSearch !== undefined && searchItems.savedSearch.id !== undefined && ( ', () => { test('Minimal initialization', () => { @@ -26,14 +24,7 @@ describe('Transform: Transform List Actions ', () => { deleteTransform(d: TransformListRow) {}, }; - const wrapper = shallow( - - - - ) - .find(DeleteAction) - .shallow(); - + const wrapper = shallow(); expect(wrapper).toMatchSnapshot(); }); }); diff --git a/x-pack/plugins/transform/public/app/sections/transform_management/components/transform_list/action_start.test.tsx b/x-pack/plugins/transform/public/app/sections/transform_management/components/transform_list/action_start.test.tsx index bbdfdbbc3c121..2de115236c4dc 100644 --- a/x-pack/plugins/transform/public/app/sections/transform_management/components/transform_list/action_start.test.tsx +++ b/x-pack/plugins/transform/public/app/sections/transform_management/components/transform_list/action_start.test.tsx @@ -7,15 +7,13 @@ import { shallow } from 'enzyme'; import React from 'react'; -import { Providers } from '../../../../app_dependencies.mock'; - import { TransformListRow } from '../../../../common'; import { StartAction } from './action_start'; import transformListRow from '../../../../common/__mocks__/transform_list_row.json'; -jest.mock('ui/new_platform'); jest.mock('../../../../../shared_imports'); +jest.mock('../../../../../app/app_dependencies'); describe('Transform: Transform List Actions ', () => { test('Minimal initialization', () => { @@ -26,13 +24,7 @@ describe('Transform: Transform List Actions ', () => { startTransform(d: TransformListRow) {}, }; - const wrapper = shallow( - - - - ) - .find(StartAction) - .shallow(); + const wrapper = shallow(); expect(wrapper).toMatchSnapshot(); }); diff --git a/x-pack/plugins/transform/public/app/sections/transform_management/components/transform_list/action_stop.test.tsx b/x-pack/plugins/transform/public/app/sections/transform_management/components/transform_list/action_stop.test.tsx index 840fbc4b9034b..a97097d909848 100644 --- a/x-pack/plugins/transform/public/app/sections/transform_management/components/transform_list/action_stop.test.tsx +++ b/x-pack/plugins/transform/public/app/sections/transform_management/components/transform_list/action_stop.test.tsx @@ -7,15 +7,13 @@ import { shallow } from 'enzyme'; import React from 'react'; -import { Providers } from '../../../../app_dependencies.mock'; - import { TransformListRow } from '../../../../common'; import { StopAction } from './action_stop'; import transformListRow from '../../../../common/__mocks__/transform_list_row.json'; -jest.mock('ui/new_platform'); jest.mock('../../../../../shared_imports'); +jest.mock('../../../../../app/app_dependencies'); describe('Transform: Transform List Actions ', () => { test('Minimal initialization', () => { @@ -26,13 +24,7 @@ describe('Transform: Transform List Actions ', () => { stopTransform(d: TransformListRow) {}, }; - const wrapper = shallow( - - - - ) - .find(StopAction) - .shallow(); + const wrapper = shallow(); expect(wrapper).toMatchSnapshot(); }); diff --git a/x-pack/plugins/transform/public/plugin.ts b/x-pack/plugins/transform/public/plugin.ts index 1a34e7a641365..9a83f5b0e05f3 100644 --- a/x-pack/plugins/transform/public/plugin.ts +++ b/x-pack/plugins/transform/public/plugin.ts @@ -9,12 +9,16 @@ import { CoreSetup } from 'src/core/public'; import { DataPublicPluginStart } from 'src/plugins/data/public'; import { ManagementSetup } from 'src/plugins/management/public'; +import { Storage } from '../../../../src/plugins/kibana_utils/public'; + import { renderApp } from './app/app'; import { AppDependencies } from './app/app_dependencies'; import { breadcrumbService } from './app/services/navigation'; import { docTitleService } from './app/services/navigation'; import { textService } from './app/services/text'; +const localStorage = new Storage(window.localStorage); + export interface PluginsDependencies { data: DataPublicPluginStart; management: ManagementSetup; @@ -56,6 +60,7 @@ export class TransformUiPlugin { notifications, overlays, savedObjects, + storage: localStorage, uiSettings, }; diff --git a/x-pack/plugins/transform/public/shared_imports.ts b/x-pack/plugins/transform/public/shared_imports.ts index 4def1bc98ef8c..938ec77344d8f 100644 --- a/x-pack/plugins/transform/public/shared_imports.ts +++ b/x-pack/plugins/transform/public/shared_imports.ts @@ -12,20 +12,6 @@ export { } from '../../../../src/plugins/es_ui_shared/console_lang/lib'; export { - SendRequestConfig, - SendRequestResponse, UseRequestConfig, - sendRequest, useRequest, } from '../../../../src/plugins/es_ui_shared/public/request/np_ready_request'; - -export { - CronEditor, - DAY, -} from '../../../../src/plugins/es_ui_shared/public/components/cron_editor'; - -// 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'; diff --git a/x-pack/plugins/translations/translations/ja-JP.json b/x-pack/plugins/translations/translations/ja-JP.json index 09fff90f720ac..4eedfcc8c4c41 100644 --- a/x-pack/plugins/translations/translations/ja-JP.json +++ b/x-pack/plugins/translations/translations/ja-JP.json @@ -12428,7 +12428,6 @@ "xpack.transform.stepDefineForm.nestedGroupByListConflictErrorMessage": "「{groupByListName}」とネスティングの矛盾があるため、構成「{aggName}」を追加できませんでした。", "xpack.transform.stepDefineForm.queryHelpText": "クエリ文字列でソースデータをフィルタリングしてください (オプション)。", "xpack.transform.stepDefineForm.queryLabel": "クエリ", - "xpack.transform.stepDefineForm.queryPlaceholder": "例: {example}.", "xpack.transform.stepDefineForm.savedSearchLabel": "保存検索", "xpack.transform.stepDefineSummary.aggregationsLabel": "アグリゲーション（集計）", "xpack.transform.stepDefineSummary.groupByLabel": "グループ分けの条件", diff --git a/x-pack/plugins/translations/translations/zh-CN.json b/x-pack/plugins/translations/translations/zh-CN.json index 7ee00bb8242d1..ad844f51153a8 100644 --- a/x-pack/plugins/translations/translations/zh-CN.json +++ b/x-pack/plugins/translations/translations/zh-CN.json @@ -12428,7 +12428,6 @@ "xpack.transform.stepDefineForm.nestedGroupByListConflictErrorMessage": "无法添加配置“{aggName}”，因为与“{groupByListName}”有嵌套冲突。", "xpack.transform.stepDefineForm.queryHelpText": "使用查询字符串筛选源数据（可选）。", "xpack.transform.stepDefineForm.queryLabel": "查询", - "xpack.transform.stepDefineForm.queryPlaceholder": "例如，{example}", "xpack.transform.stepDefineForm.savedSearchLabel": "已保存搜索", "xpack.transform.stepDefineSummary.aggregationsLabel": "聚合", "xpack.transform.stepDefineSummary.groupByLabel": "分组依据", diff --git a/x-pack/test/functional/services/transform_ui/wizard.ts b/x-pack/test/functional/services/transform_ui/wizard.ts index 2d20f3617cf06..ba9096a372d9a 100644 --- a/x-pack/test/functional/services/transform_ui/wizard.ts +++ b/x-pack/test/functional/services/transform_ui/wizard.ts @@ -160,15 +160,15 @@ export function TransformWizardProvider({ getService }: FtrProviderContext) { }, async assertQueryInputExists() { - await testSubjects.existOrFail('tarnsformQueryInput'); + await testSubjects.existOrFail('transformQueryInput'); }, async assertQueryInputMissing() { - await testSubjects.missingOrFail('tarnsformQueryInput'); + await testSubjects.missingOrFail('transformQueryInput'); }, async assertQueryValue(expectedQuery: string) { - const actualQuery = await testSubjects.getVisibleText('tarnsformQueryInput'); + const actualQuery = await testSubjects.getVisibleText('transformQueryInput'); expect(actualQuery).to.eql( expectedQuery, `Query input text should be '${expectedQuery}' (got ${actualQuery})`