[Security Solution] Fix editing in KQL Query Bar

src/platform/plugins/shared/unified_search/public/query_string_input/query_bar_top_row.tsx

@@ -187,6 +187,7 @@ export interface QueryBarTopRowProps<QT extends Query | AggregateQuery = Query>
   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)) && (
-          <EuiFlexItem grow={false}>
+          <EuiFlexItem grow={false} className="kbnQueryBar__filterButtonGroup">
             <FilterButtonGroup
               items={[props.prepend, renderAddButton()]}
               attached={renderFilterMenuOnly()}
@@ -699,6 +700,7 @@ export const QueryBarTopRow = React.memo(
             isDisabled={props.isDisabled}
             appName={appName}
             submitOnBlur={props.submitOnBlur}
+            bubbleSubmitEvent={props.bubbleSubmitEvent}
             deps={{
               unifiedSearch,
               data,

src/platform/plugins/shared/unified_search/public/search_bar/search_bar.tsx

@@ -57,6 +57,7 @@ export interface SearchBarInjectedDeps {
   onFiltersUpdated?: (filters: Filter[]) => void;
   // Autorefresh
   onRefreshChange?: (options: { isPaused: boolean; refreshInterval: number }) => void;
+  bubbleSubmitEvent?: boolean;
 }
 
 export interface SearchBarOwnProps<QT extends AggregateQuery | Query = Query> {
@@ -665,6 +666,7 @@ class SearchBarUI<QT extends (Query | AggregateQuery) | Query = Query> extends C
           renderQueryInputAppend={this.props.renderQueryInputAppend}
           disableExternalPadding={this.props.displayStyle === 'withBorders'}
           onESQLDocsFlyoutVisibilityChanged={this.props.onESQLDocsFlyoutVisibilityChanged}
+          bubbleSubmitEvent={this.props.bubbleSubmitEvent}
         />
       </div>
     );

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<PropsWithChildren<unknown>> = ({ children }) => {
+  const wrapperClassName = 'ruleEditQueryBarWrapper';
+
+  const customCss = css`
+    .${wrapperClassName} .kbnQueryBar__filterButtonGroup {
+      align-self: start;
+    }
+
+    .${wrapperClassName} .kbnQueryBar__wrap {
+      height: auto !important;
+    }
+  `;
+
+  return (
+    <>
+      <Global styles={customCss} />
+      <div className={wrapperClassName}>{children}</div>
+    </>
+  );
+};
+
 export const QueryBar = memo<QueryBarComponentProps>(
   ({
     dateRangeFrom,
@@ -61,6 +85,7 @@ export const QueryBar = memo<QueryBarComponentProps>(
     dataTestSubj,
     displayStyle,
     isDisabled,
+    bubbleSubmitEvent,
   }) => {
     const { data } = useKibana().services;
     const [dataView, setDataView] = useState<DataView>();
@@ -156,33 +181,36 @@ export const QueryBar = memo<QueryBarComponentProps>(
     const timeHistory = useMemo(() => new TimeHistory(new Storage(localStorage)), []);
     const arrDataView = useMemo(() => (dataView != null ? [dataView] : []), [dataView]);
     return (
-      <SearchBar
-        showSubmitButton={false}
-        dateRangeFrom={dateRangeFrom}
-        dateRangeTo={dateRangeTo}
-        filters={searchBarFilters}
-        indexPatterns={arrDataView}
-        isLoading={isLoading}
-        isRefreshPaused={isRefreshPaused}
-        query={query}
-        onClearSavedQuery={onClearSavedQuery}
-        onFiltersUpdated={onFiltersUpdated}
-        onQueryChange={onQueryChange}
-        onQuerySubmit={onQuerySubmit}
-        onSaved={onSavedQuery}
-        onSavedQueryUpdated={onSavedQueryUpdated}
-        refreshInterval={refreshInterval}
-        showAutoRefreshOnly={false}
-        showFilterBar={!hideSavedQuery}
-        showDatePicker={false}
-        showQueryInput={true}
-        showSaveQuery={true}
-        timeHistory={timeHistory}
-        dataTestSubj={dataTestSubj}
-        savedQuery={savedQuery}
-        displayStyle={isEsql ? 'withBorders' : displayStyle}
-        isDisabled={isDisabled}
-      />
+      <CustomStylesWrapper>
+        <SearchBar
+          showSubmitButton={false}
+          dateRangeFrom={dateRangeFrom}
+          dateRangeTo={dateRangeTo}
+          filters={searchBarFilters}
+          indexPatterns={arrDataView}
+          isLoading={isLoading}
+          isRefreshPaused={isRefreshPaused}
+          query={query}
+          onClearSavedQuery={onClearSavedQuery}
+          onFiltersUpdated={onFiltersUpdated}
+          onQueryChange={onQueryChange}
+          onQuerySubmit={onQuerySubmit}
+          onSaved={onSavedQuery}
+          onSavedQueryUpdated={onSavedQueryUpdated}
+          refreshInterval={refreshInterval}
+          showAutoRefreshOnly={false}
+          showFilterBar={!hideSavedQuery}
+          showDatePicker={false}
+          showQueryInput={true}
+          showSaveQuery={true}
+          timeHistory={timeHistory}
+          dataTestSubj={dataTestSubj}
+          savedQuery={savedQuery}
+          displayStyle={isEsql ? 'withBorders' : displayStyle}
+          isDisabled={isDisabled}
+          bubbleSubmitEvent={bubbleSubmitEvent}
+        />
+      </CustomStylesWrapper>
     );
   }
 );

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<FieldValueQueryBar>;
   const [originalHeight, setOriginalHeight] = useState(-1);
@@ -286,6 +288,7 @@ export const QueryBarField = ({
                 hideSavedQuery={false}
                 displayStyle="inPage"
                 isDisabled={isDisabled}
+                bubbleSubmitEvent={bubbleSubmitEvent}
               />
             </div>
           )}

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<StepDefineRuleProps> = ({
             onSavedQueryError: handleSavedQueryError,
             defaultSavedQuery,
             onOpenTimeline,
+            bubbleSubmitEvent: true,
           } as QueryBarFieldProps
         }
       />

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,
         }}
       />
     </>