[8.x] [ResponseOps][Alerts] Fix DSL filter issues in search bar (elas…

…tic#193623) (elastic#196033) # Backport This will backport the following commits from `main` to `8.x`: - [[ResponseOps][Alerts] Fix DSL filter issues in search bar (elastic#193623)](elastic#193623)  ### Questions ? Please refer to the [Backport tool documentation](https://github.com/sqren/backport)  Co-authored-by: Janki Salvi <[email protected]>
kibanamachine · Oct 13, 2024 · 34b8d2b · 34b8d2b
1 parent a4795c3
commit 34b8d2b
Show file tree

Hide file tree

Showing 12 changed files with 686 additions and 60 deletions.
diff --git a/packages/kbn-alerts-ui-shared/src/alerts_search_bar/index.test.tsx b/packages/kbn-alerts-ui-shared/src/alerts_search_bar/index.test.tsx
@@ -0,0 +1,171 @@
+/*
+ * 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, FilterStateStore } 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(() => {
+    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}
+        dataService={mockDataPlugin}
+      />
+    );
+    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}
+        dataService={mockDataPlugin}
+        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: Filter[] = [
+      {
+        meta: {
+          negate: false,
+          alias: null,
+          disabled: false,
+          type: 'custom',
+          key: 'query',
+        },
+        query: { bool: { filter: [{ term: { 'kibana.alert.rule.consumer': 'stackAlerts' } }] } },
+        $state: { store: FilterStateStore.APP_STATE },
+      },
+    ];
+
+    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}
+        dataService={mockDataPlugin}
+        appName={'test'}
+        featureIds={['observability', 'stackAlerts']}
+      />
+    );
+
+    fireEvent.click(await screen.findByTestId('filtersSubmitButton'));
+
+    await waitFor(() => {
+      expect(onFiltersUpdatedMock).toHaveBeenCalledWith(filters);
+      expect(mockDataPlugin.query.filterManager.setFilters).toHaveBeenCalledWith(filters);
+    });
+  });
+});
diff --git a/packages/kbn-alerts-ui-shared/src/alerts_search_bar/index.tsx b/packages/kbn-alerts-ui-shared/src/alerts_search_bar/index.tsx
@@ -41,14 +41,14 @@ export const AlertsSearchBar = ({
   http,
   toasts,
   unifiedSearchBar,
-  dataViewsService,
+  dataService,
 }: AlertsSearchBarProps) => {
   const [queryLanguage, setQueryLanguage] = useState<QueryLanguageType>('kuery');
   const { dataView } = useAlertsDataView({
     featureIds,
     http,
     toasts,
-    dataViewsService,
+    dataViewsService: dataService.dataViews,
   });
   const { aadFields, loading: fieldsLoading } = useRuleAADFields({
     ruleTypeId,
@@ -119,7 +119,10 @@ export const AlertsSearchBar = ({
     displayStyle: 'inPage',
     showFilterBar,
     onQuerySubmit: onSearchQuerySubmit,
-    onFiltersUpdated,
+    onFiltersUpdated: (newFilters) => {
+      dataService.query.filterManager.setFilters(newFilters);
+      onFiltersUpdated?.(newFilters);
+    },
     onRefresh,
     showDatePicker,
     showQueryInput: true,

diff --git a/packages/kbn-alerts-ui-shared/src/alerts_search_bar/types.ts b/packages/kbn-alerts-ui-shared/src/alerts_search_bar/types.ts
@@ -11,7 +11,7 @@ import type { Filter } from '@kbn/es-query';
 import type { ValidFeatureId } from '@kbn/rule-data-utils';
 import type { ToastsStart, HttpStart } from '@kbn/core/public';
 import type { UnifiedSearchPublicPluginStart } from '@kbn/unified-search-plugin/public';
-import type { DataViewsContract } from '@kbn/data-views-plugin/common';
+import { DataPublicPluginStart } from '@kbn/data-plugin/public';
 
 export type QueryLanguageType = 'lucene' | 'kuery';
 
@@ -41,5 +41,5 @@ export interface AlertsSearchBarProps {
   http: HttpStart;
   toasts: ToastsStart;
   unifiedSearchBar: UnifiedSearchPublicPluginStart['ui']['SearchBar'];
-  dataViewsService: DataViewsContract;
+  dataService: DataPublicPluginStart;
 }