[ResponseOps][Alerts] Fix DSL filter issues in search bar

packages/kbn-alerts-ui-shared/src/alerts_search_bar/index.test.tsx

@@ -0,0 +1,172 @@
+/*
+ * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
+ * or more contributor license agreements. Licensed under the "Elastic License
+ * 2.0", the "GNU Affero General Public License v3.0 only", and the "Server Side
+ * Public License v 1"; you may not use this file except in compliance with, at
+ * your election, the "Elastic License 2.0", the "GNU Affero General Public
+ * License v3.0 only", or the "Server Side Public License, v 1".
+ */
+
+import React from 'react';
+import { fireEvent, render, screen, waitFor } from '@testing-library/react';
+import { dataPluginMock } from '@kbn/data-plugin/public/mocks';
+import { Filter } from '@kbn/es-query';
+import { ToastsStart } from '@kbn/core-notifications-browser';
+import { useLoadRuleTypesQuery, useRuleAADFields, useAlertsDataView } from '../common/hooks';
+import { AlertsSearchBar } from '.';
+import { HttpStart } from '@kbn/core-http-browser';
+
+const mockDataPlugin = dataPluginMock.createStartContract();
+jest.mock('@kbn/kibana-utils-plugin/public');
+jest.mock('../common/hooks');
+
+jest.mocked(useAlertsDataView).mockReturnValue({
+  isLoading: false,
+  dataView: {
+    title: '.alerts-*',
+    fields: [
+      {
+        name: 'event.action',
+        type: 'string',
+        aggregatable: true,
+        searchable: true,
+      },
+    ],
+  },
+});
+
+jest.mocked(useLoadRuleTypesQuery).mockReturnValue({
+  ruleTypesState: {
+    isInitialLoad: false,
+    data: new Map(),
+    isLoading: false,
+    error: null,
+  },
+  authorizedToReadAnyRules: false,
+  hasAnyAuthorizedRuleType: false,
+  authorizedRuleTypes: [],
+  authorizedToCreateAnyRules: false,
+  isSuccess: false,
+});
+
+jest.mocked(useRuleAADFields).mockReturnValue({
+  aadFields: [],
+  loading: false,
+});
+
+const unifiedSearchBarMock = jest.fn().mockImplementation((props) => (
+  <button
+    data-test-subj="querySubmitButton"
+    onClick={() => props.onQuerySubmit({ dateRange: { from: 'now', to: 'now' } })}
+    type="button"
+  >
+    {'Hello world'}
+  </button>
+));
+
+const toastsMock = { toasts: { addWarning: jest.fn() } } as unknown as ToastsStart;
+const httpMock = {
+  post: jest.fn(),
+} as unknown as HttpStart;
+
+describe('AlertsSearchBar', () => {
+  beforeEach(() => {});
+
+  beforeEach(() => {
+    jest.clearAllMocks();
+  });
+
+  it('renders correctly', async () => {
+    render(
+      <AlertsSearchBar
+        rangeFrom="now/d"
+        rangeTo="now/d"
+        query=""
+        onQuerySubmit={jest.fn()}
+        onFiltersUpdated={jest.fn()}
+        appName={'test'}
+        featureIds={['observability', 'stackAlerts']}
+        unifiedSearchBar={unifiedSearchBarMock}
+        toasts={toastsMock}
+        http={httpMock}
+        dataViewsService={mockDataPlugin.dataViews}
+      />
+    );
+    expect(await screen.findByTestId('querySubmitButton')).toBeInTheDocument();
+  });
+
+  it('calls onQuerySubmit correctly', async () => {
+    const onQuerySubmitMock = jest.fn();
+
+    render(
+      <AlertsSearchBar
+        rangeFrom="now/d"
+        rangeTo="now/d"
+        query=""
+        onQuerySubmit={onQuerySubmitMock}
+        onFiltersUpdated={jest.fn()}
+        unifiedSearchBar={unifiedSearchBarMock}
+        toasts={toastsMock}
+        http={httpMock}
+        dataViewsService={mockDataPlugin.dataViews}
+        appName={'test'}
+        featureIds={['observability', 'stackAlerts']}
+      />
+    );
+
+    fireEvent.click(await screen.findByTestId('querySubmitButton'));
+
+    await waitFor(() => {
+      expect(onQuerySubmitMock).toHaveBeenCalled();
+    });
+  });
+
+  it('calls onFiltersUpdated correctly', async () => {
+    const onFiltersUpdatedMock = jest.fn();
+    const filters = [
+      {
+        meta: {
+          negate: false,
+          alias: null,
+          disabled: false,
+          type: 'custom',
+          key: 'query',
+        },
+        query: { bool: { filter: [{ term: { 'kibana.alert.rule.consumer': 'stackAlerts' } }] } },
+        $state: { store: 'appState' },
+      },
+    ] as Filter[];
+
+    const newUnifiedSearchBarMock = jest.fn().mockImplementation((props) => (
+      <button
+        data-test-subj="filtersSubmitButton"
+        onClick={() => props.onFiltersUpdated(filters)}
+        type="button"
+      >
+        {'Hello world'}
+      </button>
+    ));
+
+    render(
+      <AlertsSearchBar
+        rangeFrom="now/d"
+        rangeTo="now/d"
+        query=""
+        onQuerySubmit={jest.fn()}
+        onFiltersUpdated={onFiltersUpdatedMock}
+        unifiedSearchBar={newUnifiedSearchBarMock}
+        toasts={toastsMock}
+        http={httpMock}
+        dataViewsService={mockDataPlugin.dataViews}
+        appName={'test'}
+        featureIds={['observability', 'stackAlerts']}
+      />
+    );
+
+    fireEvent.click(await screen.findByTestId('filtersSubmitButton'));
+
+    await waitFor(() => {
+      expect(onFiltersUpdatedMock).toHaveBeenCalledWith(filters);
+    });
+  });
+});

packages/kbn-alerts-ui-shared/src/alerts_search_bar/index.tsx

@@ -128,6 +128,7 @@ export const AlertsSearchBar = ({
     submitOnBlur,
     onQueryChange: onSearchQueryChange,
     suggestionsAbstraction: isSecurity ? undefined : SA_ALERTS,
+    shouldExecuteFilterManagerUpdate: true,
   });
 };
 

packages/kbn-alerts-ui-shared/src/rule_form/rule_actions/rule_actions_alerts_filter.test.tsx

@@ -9,12 +9,12 @@
 
 import React from 'react';
 import { render, screen } from '@testing-library/react';
+import userEvent from '@testing-library/user-event';
 import { httpServiceMock } from '@kbn/core/public/mocks';
-import { RuleActionsAlertsFilter } from './rule_actions_alerts_filter';
-import type { AlertsSearchBarProps } from '../../alerts_search_bar';
 import { FilterStateStore } from '@kbn/es-query';
+import { AlertsSearchBarProps, AlertsSearchBar } from '../../alerts_search_bar';
 import { getAction } from '../../common/test_utils/actions_test_utils';
-import userEvent from '@testing-library/user-event';
+import { RuleActionsAlertsFilter } from './rule_actions_alerts_filter';
 
 const http = httpServiceMock.createStartContract();
 
@@ -23,43 +23,7 @@ jest.mock('../hooks', () => ({
 }));
 
 jest.mock('../../alerts_search_bar', () => ({
-  AlertsSearchBar: ({ onFiltersUpdated, onQueryChange, onQuerySubmit }: AlertsSearchBarProps) => (
-    <div>
-      AlertsSearchBar
-      <button
-        onClick={() =>
-          onFiltersUpdated?.([
-            {
-              $state: { store: 'appState' as FilterStateStore },
-              meta: {},
-            },
-          ])
-        }
-      >
-        Update Filter
-      </button>
-      <button
-        onClick={() =>
-          onQueryChange?.({
-            dateRange: { from: 'now', to: 'now' },
-            query: 'onQueryChange',
-          })
-        }
-      >
-        Update Query
-      </button>
-      <button
-        onClick={() =>
-          onQuerySubmit?.({
-            dateRange: { from: 'now', to: 'now' },
-            query: 'onQuerySubmit',
-          })
-        }
-      >
-        Submit Query
-      </button>
-    </div>
-  ),
+  AlertsSearchBar: jest.fn(),
 }));
 
 const { useRuleFormState } = jest.requireMock('../hooks');
@@ -93,6 +57,46 @@ describe('ruleActionsAlertsFilter', () => {
     });
   });
 
+  (AlertsSearchBar as jest.Mock<any, any>).mockImplementation(
+    ({ onFiltersUpdated, onQueryChange, onQuerySubmit }: AlertsSearchBarProps) => (
+      <div>
+        AlertsSearchBar
+        <button
+          onClick={() =>
+            onFiltersUpdated?.([
+              {
+                $state: { store: 'appState' as FilterStateStore },
+                meta: {},
+              },
+            ])
+          }
+        >
+          Update Filter
+        </button>
+        <button
+          onClick={() =>
+            onQueryChange?.({
+              dateRange: { from: 'now', to: 'now' },
+              query: 'onQueryChange',
+            })
+          }
+        >
+          Update Query
+        </button>
+        <button
+          onClick={() =>
+            onQuerySubmit?.({
+              dateRange: { from: 'now', to: 'now' },
+              query: 'onQuerySubmit',
+            })
+          }
+        >
+          Submit Query
+        </button>
+      </div>
+    )
+  );
+
   afterEach(() => {
     jest.clearAllMocks();
   });
@@ -166,18 +170,86 @@ describe('ruleActionsAlertsFilter', () => {
 
     await userEvent.click(screen.getByText('Update Filter'));
     expect(mockOnChange).toHaveBeenLastCalledWith({
-      filters: [{ $state: { store: 'appState' }, meta: {} }],
+      filters: [{ $state: { store: 'appState' }, meta: {}, query: {} }],
       kql: 'test',
     });
     await userEvent.click(screen.getByText('Update Query'));
     expect(mockOnChange).toHaveBeenLastCalledWith({
-      filters: [{ $state: { store: 'appState' }, meta: {} }],
+      filters: [{ $state: { store: 'appState' }, meta: {}, query: {} }],
       kql: 'onQueryChange',
     });
     await userEvent.click(screen.getByText('Submit Query'));
     expect(mockOnChange).toHaveBeenLastCalledWith({
-      filters: [{ $state: { store: 'appState' }, meta: {} }],
+      filters: [{ $state: { store: 'appState' }, meta: {}, query: {} }],
       kql: 'onQuerySubmit',
     });
   });
+
+  test('renders filters correctly', async () => {
+    const filters = [
+      {
+        meta: {
+          negate: false,
+          alias: null,
+          disabled: false,
+          type: 'custom',
+          key: 'query',
+        },
+        query: { bool: { filter: [{ term: { 'kibana.alert.rule.consumer': 'stackAlerts' } }] } },
+        $state: { store: 'appState' as FilterStateStore },
+      },
+    ];
+
+    (AlertsSearchBar as jest.Mock<any, any>).mockImplementation(
+      ({ onFiltersUpdated, onQueryChange, onQuerySubmit }: AlertsSearchBarProps) => (
+        <div>
+          AlertsSearchBar
+          <button onClick={() => onFiltersUpdated?.(filters)}>Update Filter</button>
+          <button
+            onClick={() =>
+              onQueryChange?.({
+                dateRange: { from: 'now', to: 'now' },
+                query: 'onQueryChange',
+              })
+            }
+          >
+            Update Query
+          </button>
+          <button
+            onClick={() =>
+              onQuerySubmit?.({
+                dateRange: { from: 'now', to: 'now' },
+                query: 'onQuerySubmit',
+              })
+            }
+          >
+            Submit Query
+          </button>
+        </div>
+      )
+    );
+
+    render(
+      <RuleActionsAlertsFilter
+        action={getAction('1', {
+          alertsFilter: {
+            query: {
+              kql: '',
+              filters: [{ ...filters[0], meta: {} }],
+            },
+          },
+        })}
+        onChange={mockOnChange}
+        appName="stackAlerts"
+        featureIds={['stackAlerts']}
+      />
+    );
+
+    await userEvent.click(screen.getByTestId('alertsFilterQueryToggle'));
+
+    expect(mockOnChange).toHaveBeenLastCalledWith(undefined);
+
+    await userEvent.click(screen.getByText('Update Filter'));
+    expect(mockOnChange).toHaveBeenLastCalledWith({ filters, kql: '' });
+  });
 });

packages/kbn-alerts-ui-shared/src/rule_form/rule_actions/rule_actions_alerts_filter.tsx

@@ -84,7 +84,18 @@ export const RuleActionsAlertsFilter = ({
   );
 
   const onFiltersUpdated = useCallback(
-    (filters: Filter[]) => updateQuery({ filters }),
+    (filters: Filter[]) => {
+      const updatedFilters = filters.map((filter) => {
+        const { $state, meta, ...rest } = filter;
+        return {
+          $state,
+          meta,
+          query: filter?.query ? { ...filter.query } : { ...rest },
+        };
+      });
+
+      updateQuery({ filters: updatedFilters });
+    },
     [updateQuery]
   );