[RAM] Alert search bar only KQL (#155947)

## Summary

Adding the props `showQueryInput` is fixing the layout of of the
filters. We also wanted to make sure that our alert search bar can only
work with KQL because we need to do some kind of validation on the field
used in the search bar, therefore it will be easier to just use
KueryNode for now.

### Before:
<img width="754" alt="Screenshot 2023-04-26 at 1 52 44 PM"
src="https://user-images.githubusercontent.com/189600/234698078-612f03be-3331-41ab-a2d9-80f6cd767043.png">


### After:
<img width="749" alt="image"
src="https://user-images.githubusercontent.com/189600/234697735-abafc15f-5562-42a0-aeb9-638129d70120.png">

---------

Co-authored-by: Kibana Machine <42973632+kibanamachine@users.noreply.github.com>

src/plugins/unified_search/public/__stories__/search_bar.stories.tsx

@@ -446,6 +446,11 @@ storiesOf('SearchBar', module)
       },
     } as unknown as SearchBarProps)
   )
+  .add('without switch query language', () =>
+    wrapSearchBarInContext({
+      disableQueryLanguageSwitcher: true,
+    } as SearchBarProps)
+  )
   .add('show only query bar without submit', () =>
     wrapSearchBarInContext({
       showDatePicker: false,

src/plugins/unified_search/public/query_string_input/query_bar_menu.tsx

@@ -47,6 +47,7 @@ export interface QueryBarMenuProps extends WithCloseFilterEditorConfirmModalProp
   toggleFilterBarMenuPopover: (value: boolean) => void;
   openQueryBarMenu: boolean;
   nonKqlMode?: 'lucene' | 'text';
+  disableQueryLanguageSwitcher?: boolean;
   dateRangeFrom?: string;
   dateRangeTo?: string;
   savedQueryService: SavedQueryService;
@@ -72,6 +73,7 @@ export interface QueryBarMenuProps extends WithCloseFilterEditorConfirmModalProp
 function QueryBarMenuComponent({
   language,
   nonKqlMode,
+  disableQueryLanguageSwitcher,
   dateRangeFrom,
   dateRangeTo,
   onQueryChange,
@@ -158,6 +160,7 @@ function QueryBarMenuComponent({
     manageFilterSetComponent,
     hiddenPanelOptions,
     nonKqlMode,
+    disableQueryLanguageSwitcher,
     closePopover: plainClosePopover,
     onQueryBarSubmit,
     onFiltersUpdated,

src/plugins/unified_search/public/query_string_input/query_bar_menu_panels.tsx

@@ -147,6 +147,7 @@ export interface QueryBarMenuPanelsProps {
   manageFilterSetComponent?: JSX.Element;
   hiddenPanelOptions?: FilterPanelOption[];
   nonKqlMode?: 'lucene' | 'text';
+  disableQueryLanguageSwitcher?: boolean;
   closePopover: () => void;
   onQueryBarSubmit: (payload: { dateRange: TimeRange; query?: Query }) => void;
   onFiltersUpdated?: (filters: Filter[]) => void;
@@ -170,6 +171,7 @@ export function QueryBarMenuPanels({
   manageFilterSetComponent,
   hiddenPanelOptions,
   nonKqlMode,
+  disableQueryLanguageSwitcher = false,
   closePopover,
   onQueryBarSubmit,
   onFiltersUpdated,
@@ -384,7 +386,7 @@ export function QueryBarMenuPanels({
   }
 
   // language menu appears when the showQueryInput is true
-  if (showQueryInput) {
+  if (showQueryInput && !disableQueryLanguageSwitcher) {
     items.push({
       name: `Language: ${language === 'kuery' ? kqlLabel : luceneLabel}`,
       panel: 3,

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

@@ -87,6 +87,7 @@ export interface SearchBarOwnProps<QT extends AggregateQuery | Query = Query> {
   isClearable?: boolean;
   iconType?: EuiIconProps['type'];
   nonKqlMode?: 'lucene' | 'text';
+  disableQueryLanguageSwitcher?: boolean;
   // defines padding and border; use 'inPage' to avoid any padding or border;
   // use 'detached' if the searchBar appears at the very top of the view, without any wrapper
   displayStyle?: 'inPage' | 'detached';
@@ -472,6 +473,7 @@ class SearchBarUI<QT extends (Query | AggregateQuery) | Query = Query> extends C
     const queryBarMenu = this.props.showQueryMenu ? (
       <QueryBarMenu
         nonKqlMode={this.props.nonKqlMode}
+        disableQueryLanguageSwitcher={this.props.disableQueryLanguageSwitcher}
         language={
           this.state.query && isOfQueryType(this.state?.query)
             ? this.state?.query?.language

x-pack/plugins/triggers_actions_ui/public/application/sections/action_connector_form/action_alerts_filter_query.tsx

@@ -73,6 +73,7 @@ export const ActionAlertsFilterQuery: React.FC<ActionAlertsFilterQueryProps> = (
           <EuiSpacer size="s" />
           <AlertsSearchBar
             appName="siem"
+            disableQueryLanguageSwitcher={true}
             featureIds={['siem']}
             query={query.kql}
             filters={query.filters ?? []}

x-pack/plugins/triggers_actions_ui/public/application/sections/alerts_search_bar/alerts_search_bar.tsx

@@ -17,6 +17,7 @@ import { TriggersAndActionsUiServices } from '../../..';
 // TODO Share buildEsQuery to be used between AlertsSearchBar and AlertsStateTable component https://github.com/elastic/kibana/issues/144615
 export function AlertsSearchBar({
   appName,
+  disableQueryLanguageSwitcher = false,
   featureIds,
   query,
   filters,
@@ -70,6 +71,7 @@ export function AlertsSearchBar({
   return (
     <SearchBar
       appName={appName}
+      disableQueryLanguageSwitcher={disableQueryLanguageSwitcher}
       indexPatterns={loading || error ? NO_INDEX_PATTERNS : [dataView!]}
       placeholder={placeholder}
       query={{ query: query ?? '', language: queryLanguage }}
@@ -82,6 +84,8 @@ export function AlertsSearchBar({
       onFiltersUpdated={onFiltersUpdated}
       onRefresh={onRefresh}
       showDatePicker={showDatePicker}
+      showQueryInput={true}
+      showSaveQuery={true}
       showSubmitButton={showSubmitButton}
       submitOnBlur={submitOnBlur}
       onQueryChange={onSearchQueryChange}

x-pack/plugins/triggers_actions_ui/public/application/sections/alerts_search_bar/types.ts

@@ -12,6 +12,7 @@ export type QueryLanguageType = 'lucene' | 'kuery';
 
 export interface AlertsSearchBarProps {
   appName: string;
+  disableQueryLanguageSwitcher?: boolean;
   featureIds: ValidFeatureId[];
   rangeFrom?: string;
   rangeTo?: string;