diff --git a/src/platform/plugins/shared/unified_search/public/query_string_input/query_bar_top_row.tsx b/src/platform/plugins/shared/unified_search/public/query_string_input/query_bar_top_row.tsx index d6bab939c1efc..c5eef28a71797 100644 --- a/src/platform/plugins/shared/unified_search/public/query_string_input/query_bar_top_row.tsx +++ b/src/platform/plugins/shared/unified_search/public/query_string_input/query_bar_top_row.tsx @@ -187,6 +187,7 @@ export interface QueryBarTopRowProps renderQueryInputAppend?: () => React.ReactNode; disableExternalPadding?: boolean; onESQLDocsFlyoutVisibilityChanged?: ESQLMenuPopoverProps['onESQLDocsFlyoutVisibilityChanged']; + bubbleSubmitEvent?: boolean; } export const SharingMetaFields = React.memo(function SharingMetaFields({ @@ -661,7 +662,7 @@ export const QueryBarTopRow = React.memo( function renderFilterButtonGroup() { return ( (Boolean(props.showAddFilter) || Boolean(props.prepend)) && ( - + void; // Autorefresh onRefreshChange?: (options: { isPaused: boolean; refreshInterval: number }) => void; + bubbleSubmitEvent?: boolean; } export interface SearchBarOwnProps { @@ -662,6 +663,7 @@ class SearchBarUI extends C renderQueryInputAppend={this.props.renderQueryInputAppend} disableExternalPadding={this.props.displayStyle === 'withBorders'} onESQLDocsFlyoutVisibilityChanged={this.props.onESQLDocsFlyoutVisibilityChanged} + bubbleSubmitEvent={this.props.bubbleSubmitEvent} /> ); diff --git a/x-pack/solutions/security/plugins/security_solution/public/common/components/query_bar/index.tsx b/x-pack/solutions/security/plugins/security_solution/public/common/components/query_bar/index.tsx index 793ca853598b3..c3ac1553e4ece 100644 --- a/x-pack/solutions/security/plugins/security_solution/public/common/components/query_bar/index.tsx +++ b/x-pack/solutions/security/plugins/security_solution/public/common/components/query_bar/index.tsx @@ -6,6 +6,7 @@ */ import { cloneDeep, isEmpty } from 'lodash'; +import type { PropsWithChildren, FC } from 'react'; import React, { memo, useMemo, useCallback, useState, useEffect } from 'react'; import deepEqual from 'fast-deep-equal'; @@ -16,6 +17,7 @@ import type { DataView } from '@kbn/data-views-plugin/public'; import type { SearchBarProps } from '@kbn/unified-search-plugin/public'; import { SearchBar } from '@kbn/unified-search-plugin/public'; import { Storage } from '@kbn/kibana-utils-plugin/public'; +import { css, Global } from '@emotion/react'; import { useKibana } from '../../lib/kibana'; import { convertToQueryType } from './convert_to_query_type'; @@ -37,11 +39,33 @@ export interface QueryBarComponentProps { onSavedQuery: (savedQuery: SavedQuery | undefined) => void; displayStyle?: SearchBarProps['displayStyle']; isDisabled?: boolean; + bubbleSubmitEvent?: boolean; } export const isDataView = (obj: unknown): obj is DataView => obj != null && typeof obj === 'object' && Object.hasOwn(obj, 'getName'); +const CustomStylesWrapper: FC> = ({ children }) => { + const wrapperClassName = 'ruleEditQueryBarWrapper'; + + const customCss = css` + .${wrapperClassName} .kbnQueryBar__filterButtonGroup { + align-self: start; + } + + .${wrapperClassName} .kbnQueryBar__wrap { + height: auto !important; + } + `; + + return ( + <> + +
{children}
+ + ); +}; + export const QueryBar = memo( ({ dateRangeFrom, @@ -61,6 +85,7 @@ export const QueryBar = memo( dataTestSubj, displayStyle, isDisabled, + bubbleSubmitEvent, }) => { const { data } = useKibana().services; const [dataView, setDataView] = useState(); @@ -156,33 +181,36 @@ export const QueryBar = memo( const timeHistory = useMemo(() => new TimeHistory(new Storage(localStorage)), []); const arrDataView = useMemo(() => (dataView != null ? [dataView] : []), [dataView]); return ( - + + + ); } ); diff --git a/x-pack/solutions/security/plugins/security_solution/public/detection_engine/rule_creation_ui/components/query_bar_field/query_field.tsx b/x-pack/solutions/security/plugins/security_solution/public/detection_engine/rule_creation_ui/components/query_bar_field/query_field.tsx index 5694b7b432c85..32feeca8080b7 100644 --- a/x-pack/solutions/security/plugins/security_solution/public/detection_engine/rule_creation_ui/components/query_bar_field/query_field.tsx +++ b/x-pack/solutions/security/plugins/security_solution/public/detection_engine/rule_creation_ui/components/query_bar_field/query_field.tsx @@ -45,6 +45,7 @@ export interface QueryBarFieldProps { onSavedQueryError?: () => void; defaultSavedQuery?: SavedQuery | undefined; onOpenTimeline?: (timeline: TimelineModel) => void; + bubbleSubmitEvent?: boolean; } const actionTimelineToHide: ActionTimelineToShow[] = ['duplicate', 'createFrom']; @@ -80,6 +81,7 @@ export const QueryBarField = ({ resetToSavedQuery, onOpenTimeline, onSavedQueryError, + bubbleSubmitEvent, }: QueryBarFieldProps) => { const { value: fieldValue, setValue: setFieldValue } = field as FieldHook; const [originalHeight, setOriginalHeight] = useState(-1); @@ -286,6 +288,7 @@ export const QueryBarField = ({ hideSavedQuery={false} displayStyle="inPage" isDisabled={isDisabled} + bubbleSubmitEvent={bubbleSubmitEvent} /> )} diff --git a/x-pack/solutions/security/plugins/security_solution/public/detection_engine/rule_creation_ui/components/step_define_rule/index.tsx b/x-pack/solutions/security/plugins/security_solution/public/detection_engine/rule_creation_ui/components/step_define_rule/index.tsx index c5c3f1754b048..c5f400135faea 100644 --- a/x-pack/solutions/security/plugins/security_solution/public/detection_engine/rule_creation_ui/components/step_define_rule/index.tsx +++ b/x-pack/solutions/security/plugins/security_solution/public/detection_engine/rule_creation_ui/components/step_define_rule/index.tsx @@ -505,6 +505,7 @@ const StepDefineRuleComponent: FC = ({ onSavedQueryError: handleSavedQueryError, defaultSavedQuery, onOpenTimeline, + bubbleSubmitEvent: true, } as QueryBarFieldProps } /> diff --git a/x-pack/solutions/security/plugins/security_solution/public/detection_engine/rule_management/components/rule_details/three_way_diff/final_edit/fields/kql_query/kql_query_edit.tsx b/x-pack/solutions/security/plugins/security_solution/public/detection_engine/rule_management/components/rule_details/three_way_diff/final_edit/fields/kql_query/kql_query_edit.tsx index f377e17d8e23b..c6666203a6274 100644 --- a/x-pack/solutions/security/plugins/security_solution/public/detection_engine/rule_management/components/rule_details/three_way_diff/final_edit/fields/kql_query/kql_query_edit.tsx +++ b/x-pack/solutions/security/plugins/security_solution/public/detection_engine/rule_management/components/rule_details/three_way_diff/final_edit/fields/kql_query/kql_query_edit.tsx @@ -68,6 +68,7 @@ export function KqlQueryEdit({ isDisabled: isSavedQueryRule, defaultSavedQuery: savedQuery, resetToSavedQuery: isSavedQueryRule, + bubbleSubmitEvent: true, }} />