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

# Backport

This will backport the following commits from `main` to `8.8`:
- [[RAM] Alert search bar only KQL
(#155947)](https://github.com/elastic/kibana/pull/155947)

<!--- Backport version: 8.9.7 -->

### Questions ?
Please refer to the [Backport tool
documentation](https://github.com/sqren/backport)

<!--BACKPORT [{"author":{"name":"Xavier
Mouligneau","email":"xavier.mouligneau@elastic.co"},"sourceCommit":{"committedDate":"2023-05-05T07:32:13Z","message":"[RAM]
Alert search bar only KQL (#155947)\n\n## Summary\r\n\r\nAdding the
props `showQueryInput` is fixing the layout of of the\r\nfilters. We
also wanted to make sure that our alert search bar can only\r\nwork with
KQL because we need to do some kind of validation on the field\r\nused
in the search bar, therefore it will be easier to just use\r\nKueryNode
for now.\r\n\r\n### Before:\r\n<img width=\"754\" alt=\"Screenshot
2023-04-26 at 1 52 44
PM\"\r\nsrc=\"https://user-images.githubusercontent.com/189600/234698078-612f03be-3331-41ab-a2d9-80f6cd767043.png\">\r\n\r\n\r\n###
After:\r\n<img width=\"749\"
alt=\"image\"\r\nsrc=\"https://user-images.githubusercontent.com/189600/234697735-abafc15f-5562-42a0-aeb9-638129d70120.png\">\r\n\r\n---------\r\n\r\nCo-authored-by:
Kibana Machine
<42973632+kibanamachine@users.noreply.github.com>","sha":"af7e34a2ba3c4d0bd4a2e46979f6b96bada439ef","branchLabelMapping":{"^v8.9.0$":"main","^v(\\d+).(\\d+).\\d+$":"$1.$2"}},"sourcePullRequest":{"labels":["release_note:skip","Team:ResponseOps","v8.8.0","v8.9.0"],"number":155947,"url":"https://github.com/elastic/kibana/pull/155947","mergeCommit":{"message":"[RAM]
Alert search bar only KQL (#155947)\n\n## Summary\r\n\r\nAdding the
props `showQueryInput` is fixing the layout of of the\r\nfilters. We
also wanted to make sure that our alert search bar can only\r\nwork with
KQL because we need to do some kind of validation on the field\r\nused
in the search bar, therefore it will be easier to just use\r\nKueryNode
for now.\r\n\r\n### Before:\r\n<img width=\"754\" alt=\"Screenshot
2023-04-26 at 1 52 44
PM\"\r\nsrc=\"https://user-images.githubusercontent.com/189600/234698078-612f03be-3331-41ab-a2d9-80f6cd767043.png\">\r\n\r\n\r\n###
After:\r\n<img width=\"749\"
alt=\"image\"\r\nsrc=\"https://user-images.githubusercontent.com/189600/234697735-abafc15f-5562-42a0-aeb9-638129d70120.png\">\r\n\r\n---------\r\n\r\nCo-authored-by:
Kibana Machine
<42973632+kibanamachine@users.noreply.github.com>","sha":"af7e34a2ba3c4d0bd4a2e46979f6b96bada439ef"}},"sourceBranch":"main","suggestedTargetBranches":["8.8"],"targetPullRequestStates":[{"branch":"8.8","label":"v8.8.0","labelRegex":"^v(\\d+).(\\d+).\\d+$","isSourceBranch":false,"state":"NOT_CREATED"},{"branch":"main","label":"v8.9.0","labelRegex":"^v8.9.0$","isSourceBranch":true,"state":"MERGED","url":"https://github.com/elastic/kibana/pull/155947","number":155947,"mergeCommit":{"message":"[RAM]
Alert search bar only KQL (#155947)\n\n## Summary\r\n\r\nAdding the
props `showQueryInput` is fixing the layout of of the\r\nfilters. We
also wanted to make sure that our alert search bar can only\r\nwork with
KQL because we need to do some kind of validation on the field\r\nused
in the search bar, therefore it will be easier to just use\r\nKueryNode
for now.\r\n\r\n### Before:\r\n<img width=\"754\" alt=\"Screenshot
2023-04-26 at 1 52 44
PM\"\r\nsrc=\"https://user-images.githubusercontent.com/189600/234698078-612f03be-3331-41ab-a2d9-80f6cd767043.png\">\r\n\r\n\r\n###
After:\r\n<img width=\"749\"
alt=\"image\"\r\nsrc=\"https://user-images.githubusercontent.com/189600/234697735-abafc15f-5562-42a0-aeb9-638129d70120.png\">\r\n\r\n---------\r\n\r\nCo-authored-by:
Kibana Machine
<42973632+kibanamachine@users.noreply.github.com>","sha":"af7e34a2ba3c4d0bd4a2e46979f6b96bada439ef"}}]}]
BACKPORT-->

Co-authored-by: Xavier Mouligneau <xavier.mouligneau@elastic.co>

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;