From 19946d278674e15c3b26f238836adc7ea677a28a Mon Sep 17 00:00:00 2001
From: Xavier Mouligneau <xavier.mouligneau@elastic.co>
Date: Fri, 5 May 2023 03:32:13 -0400
Subject: [PATCH] [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>
(cherry picked from commit af7e34a2ba3c4d0bd4a2e46979f6b96bada439ef)
---
 .../unified_search/public/__stories__/search_bar.stories.tsx | 5 +++++
 .../public/query_string_input/query_bar_menu.tsx             | 3 +++
 .../public/query_string_input/query_bar_menu_panels.tsx      | 4 +++-
 src/plugins/unified_search/public/search_bar/search_bar.tsx  | 2 ++
 .../action_connector_form/action_alerts_filter_query.tsx     | 1 +
 .../sections/alerts_search_bar/alerts_search_bar.tsx         | 4 ++++
 .../public/application/sections/alerts_search_bar/types.ts   | 1 +
 7 files changed, 19 insertions(+), 1 deletion(-)

diff --git a/src/plugins/unified_search/public/__stories__/search_bar.stories.tsx b/src/plugins/unified_search/public/__stories__/search_bar.stories.tsx
index 2c243814a82b7..bf2326604c308 100644
--- a/src/plugins/unified_search/public/__stories__/search_bar.stories.tsx
+++ b/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,
diff --git a/src/plugins/unified_search/public/query_string_input/query_bar_menu.tsx b/src/plugins/unified_search/public/query_string_input/query_bar_menu.tsx
index 9ba28c72c47e3..553354f7b4a34 100644
--- a/src/plugins/unified_search/public/query_string_input/query_bar_menu.tsx
+++ b/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,
diff --git a/src/plugins/unified_search/public/query_string_input/query_bar_menu_panels.tsx b/src/plugins/unified_search/public/query_string_input/query_bar_menu_panels.tsx
index d7c8bd8b64a45..4479be2c9281b 100644
--- a/src/plugins/unified_search/public/query_string_input/query_bar_menu_panels.tsx
+++ b/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,
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 3326d81e29109..f95ed07c8d938 100644
--- a/src/plugins/unified_search/public/search_bar/search_bar.tsx
+++ b/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
diff --git a/x-pack/plugins/triggers_actions_ui/public/application/sections/action_connector_form/action_alerts_filter_query.tsx b/x-pack/plugins/triggers_actions_ui/public/application/sections/action_connector_form/action_alerts_filter_query.tsx
index 4d99754eb2331..d315ce65362b8 100644
--- a/x-pack/plugins/triggers_actions_ui/public/application/sections/action_connector_form/action_alerts_filter_query.tsx
+++ b/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 ?? []}
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 64c48606ff916..9f3ebc614ac81 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
@@ -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}
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 958b0e05cbf3a..36c10260e8cbf 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
@@ -12,6 +12,7 @@ export type QueryLanguageType = 'lucene' | 'kuery';
 
 export interface AlertsSearchBarProps {
   appName: string;
+  disableQueryLanguageSwitcher?: boolean;
   featureIds: ValidFeatureId[];
   rangeFrom?: string;
   rangeTo?: string;