diff --git a/src/plugins/unified_search/public/search_bar/search_bar.test.tsx b/src/plugins/unified_search/public/search_bar/search_bar.test.tsx index e9fce0f749928..005d4926f4709 100644 --- a/src/plugins/unified_search/public/search_bar/search_bar.test.tsx +++ b/src/plugins/unified_search/public/search_bar/search_bar.test.tsx @@ -143,6 +143,7 @@ describe('SearchBar', () => { const QUERY_BAR = '.kbnQueryBar'; const QUERY_INPUT = '[data-test-subj="unifiedQueryInput"]'; const QUERY_MENU_BUTTON = '[data-test-subj="showQueryBarMenu"]'; + const QUERY_SUBMIT_BUTTON = 'button[data-test-subj="querySubmitButton"]'; const EDITOR = '[data-test-subj="unifiedTextLangEditor"]'; beforeEach(() => { @@ -308,4 +309,60 @@ describe('SearchBar', () => { expect(button).toBeDisabled(); }); }); + + it('Should call onQuerySubmit with isUpdate prop as false when dateRange is provided', () => { + const mockedOnQuerySubmit = jest.fn(); + const component = mount( + wrapSearchBarInContext({ + indexPatterns: [mockIndexPattern], + screenTitle: 'test screen', + onQuerySubmit: mockedOnQuerySubmit, + query: kqlQuery, + showQueryMenu: false, + dateRangeTo: 'now', + dateRangeFrom: 'now-15m', + }) + ); + + const submitButton = component.find(QUERY_SUBMIT_BUTTON); + submitButton.simulate('click'); + + expect(mockedOnQuerySubmit).toBeCalledTimes(1); + expect(mockedOnQuerySubmit).toHaveBeenNthCalledWith( + 1, + { + dateRange: { from: 'now-15m', to: 'now' }, + query: { language: 'kuery', query: 'response:200' }, + }, + false + ); + }); + + it('Should call onQuerySubmit with isUpdate prop as true when dateRange is not provided', () => { + const mockedOnQuerySubmit = jest.fn(); + const component = mount( + wrapSearchBarInContext({ + indexPatterns: [mockIndexPattern], + screenTitle: 'test screen', + onQuerySubmit: mockedOnQuerySubmit, + query: kqlQuery, + showQueryMenu: false, + }) + ); + + const submitButton = component.find(QUERY_SUBMIT_BUTTON); + submitButton.simulate('click'); + + expect(mockedOnQuerySubmit).toBeCalledTimes(1); + expect(mockedOnQuerySubmit).toHaveBeenNthCalledWith( + 1, + { + dateRange: { from: 'now-15m', to: 'now' }, + query: { language: 'kuery', query: 'response:200' }, + }, + // isUpdate is true because the default value in state ({ from: 'now-15m', to: 'now' }) + // is not equal with props for dateRange which is undefined + true + ); + }); }); diff --git a/src/plugins/unified_search/public/search_bar/search_bar.tsx b/src/plugins/unified_search/public/search_bar/search_bar.tsx index 9bb60972734b0..a2b8ade82b3f7 100644 --- a/src/plugins/unified_search/public/search_bar/search_bar.tsx +++ b/src/plugins/unified_search/public/search_bar/search_bar.tsx @@ -413,13 +413,16 @@ class SearchBarUI extends C }, () => { if (this.props.onQuerySubmit) { - this.props.onQuerySubmit({ - query: query as QT, - dateRange: { - from: this.state.dateRangeFrom, - to: this.state.dateRangeTo, + this.props.onQuerySubmit( + { + query: query as QT, + dateRange: { + from: this.state.dateRangeFrom, + to: this.state.dateRangeTo, + }, }, - }); + this.isDirty() + ); } } ); @@ -437,13 +440,16 @@ class SearchBarUI extends C }, () => { if (this.props.onQuerySubmit) { - this.props.onQuerySubmit({ - query: this.state.query, - dateRange: { - from: this.state.dateRangeFrom, - to: this.state.dateRangeTo, + this.props.onQuerySubmit( + { + query: this.state.query, + dateRange: { + from: this.state.dateRangeFrom, + to: this.state.dateRangeTo, + }, }, - }); + this.isDirty() + ); } this.services.usageCollection?.reportUiCounter( this.services.appName, diff --git a/x-pack/plugins/observability_solution/observability/public/components/alert_search_bar/alert_search_bar.tsx b/x-pack/plugins/observability_solution/observability/public/components/alert_search_bar/alert_search_bar.tsx index ffb8f30dc3918..863855bbbb3b8 100644 --- a/x-pack/plugins/observability_solution/observability/public/components/alert_search_bar/alert_search_bar.tsx +++ b/x-pack/plugins/observability_solution/observability/public/components/alert_search_bar/alert_search_bar.tsx @@ -90,7 +90,7 @@ export function ObservabilityAlertSearchBar({ onAlertStatusChange(status); }, [onAlertStatusChange, status]); - useEffect(() => { + const submitQuery = useCallback(() => { try { onEsQueryChange( buildEsQuery({ @@ -123,21 +123,30 @@ export function ObservabilityAlertSearchBar({ toasts, ]); - const onSearchBarParamsChange = useCallback< - (query: { + useEffect(() => { + submitQuery(); + }, [submitQuery]); + + const onQuerySubmit = ( + { + dateRange, + query, + }: { dateRange: { from: string; to: string; mode?: 'absolute' | 'relative' }; query?: string; - }) => void - >( - ({ dateRange, query }) => { + }, + isUpdate?: boolean + ) => { + if (isUpdate) { clearSavedQuery(); onKueryChange(query ?? ''); timeFilterService.setTime(dateRange); onRangeFromChange(dateRange.from); onRangeToChange(dateRange.to); - }, - [onKueryChange, timeFilterService, clearSavedQuery, onRangeFromChange, onRangeToChange] - ); + } else { + submitQuery(); + } + }; const onFilterUpdated = useCallback<(filters: Filter[]) => void>( (updatedFilters) => { @@ -162,7 +171,7 @@ export function ObservabilityAlertSearchBar({ onSavedQueryUpdated={setSavedQuery} onClearSavedQuery={clearSavedQuery} query={kuery} - onQuerySubmit={onSearchBarParamsChange} + onQuerySubmit={onQuerySubmit} /> diff --git a/x-pack/plugins/triggers_actions_ui/public/application/sections/alerts_search_bar/alerts_search_bar.tsx b/x-pack/plugins/triggers_actions_ui/public/application/sections/alerts_search_bar/alerts_search_bar.tsx index 294985bcf5224..2f4f0492ad73a 100644 --- a/x-pack/plugins/triggers_actions_ui/public/application/sections/alerts_search_bar/alerts_search_bar.tsx +++ b/x-pack/plugins/triggers_actions_ui/public/application/sections/alerts_search_bar/alerts_search_bar.tsx @@ -70,11 +70,17 @@ export function AlertsSearchBar({ ruleType.ruleTypesState.data.get(ruleTypeId)?.producer === AlertConsumers.SIEM); const onSearchQuerySubmit = useCallback( - ({ dateRange, query: nextQuery }: { dateRange: TimeRange; query?: Query }) => { - onQuerySubmit({ - dateRange, - query: typeof nextQuery?.query === 'string' ? nextQuery.query : undefined, - }); + ( + { dateRange, query: nextQuery }: { dateRange: TimeRange; query?: Query }, + isUpdate?: boolean + ) => { + onQuerySubmit( + { + dateRange, + query: typeof nextQuery?.query === 'string' ? nextQuery.query : undefined, + }, + isUpdate + ); setQueryLanguage((nextQuery?.language ?? 'kuery') as QueryLanguageType); }, [onQuerySubmit, setQueryLanguage] diff --git a/x-pack/plugins/triggers_actions_ui/public/application/sections/alerts_search_bar/types.ts b/x-pack/plugins/triggers_actions_ui/public/application/sections/alerts_search_bar/types.ts index 59b679b4fdee9..b1af2746d6cac 100644 --- a/x-pack/plugins/triggers_actions_ui/public/application/sections/alerts_search_bar/types.ts +++ b/x-pack/plugins/triggers_actions_ui/public/application/sections/alerts_search_bar/types.ts @@ -32,10 +32,13 @@ export interface AlertsSearchBarProps dateRange: { from: string; to: string; mode?: 'absolute' | 'relative' }; query?: string; }) => void; - onQuerySubmit: (query: { - dateRange: { from: string; to: string; mode?: 'absolute' | 'relative' }; - query?: string; - }) => void; + onQuerySubmit: ( + query: { + dateRange: { from: string; to: string; mode?: 'absolute' | 'relative' }; + query?: string; + }, + isUpdate?: boolean + ) => void; onFiltersUpdated?: (filters: Filter[]) => void; filtersForSuggestions?: Filter[]; }