[Search][Query Rules] Rule sets filtering search (#217477)

## Summary

Search filtering over the query rulesets table:

![CleanShot 2025-04-09 at 10 25
00@2x](https://github.com/user-attachments/assets/78be7842-f892-454d-a01e-50dee27bdf18)

[Jira ticket](https://elasticco.atlassian.net/browse/SEARCH-928)


### Checklist

Check the PR satisfies following conditions. 

Reviewers should verify this PR satisfies this list as well.

- [x] Any text added follows [EUI's writing
guidelines](https://elastic.github.io/eui/#/guidelines/writing), uses
sentence case text and includes [i18n
support](https://github.com/elastic/kibana/blob/main/src/platform/packages/shared/kbn-i18n/README.md)
- [ ]
[Documentation](https://www.elastic.co/guide/en/kibana/master/development-documentation.html)
was added for features that require explanation or tutorials
- [x] [Unit or functional
tests](https://www.elastic.co/guide/en/kibana/master/development-tests.html)
were updated or added to match the most common scenarios
- [ ] If a plugin configuration key changed, check if it needs to be
allowlisted in the cloud and added to the [docker
list](https://github.com/elastic/kibana/blob/main/src/dev/build/tasks/os_packages/docker_generator/resources/base/bin/kibana-docker)
- [ ] This was checked for breaking HTTP API changes, and any breaking
changes have been approved by the breaking-change committee. The
`release_note:breaking` label should be applied in these situations.
- [ ] [Flaky Test
Runner](https://ci-stats.kibana.dev/trigger_flaky_test_runner/1) was
used on any tests changed
- [ ] The PR description includes the appropriate Release Notes section,
and the correct `release_note:*` label is applied per the
[guidelines](https://www.elastic.co/guide/en/kibana/master/contributing.html#kibana-release-notes-process)

### Identify risks

Does this PR introduce any risks? For example, consider risks like hard
to test bugs, performance regression, potential of data loss.

Describe the risk, its severity, and mitigation for each identified
risk. Invite stakeholders and evaluate how to proceed before merging.

- [ ] [See some risk
examples](https://github.com/elastic/kibana/blob/main/RISK_MATRIX.mdx)
- [ ] ...

---------

Co-authored-by: Elastic Machine <[email protected]>

Author: JoseLuisGJ

x-pack/solutions/search/plugins/search_query_rules/public/components/query_rules_sets/query_rules_sets.tsx

@@ -8,28 +8,37 @@
 import React, { useState } from 'react';
 
 import { QueryRulesListRulesetsQueryRulesetListItem } from '@elastic/elasticsearch/lib/api/types';
-import { EuiBasicTable, EuiBasicTableColumn, EuiLink } from '@elastic/eui';
+import {
+  EuiBasicTable,
+  EuiBasicTableColumn,
+  EuiFlexGroup,
+  EuiFlexItem,
+  EuiLink,
+} from '@elastic/eui';
 import { i18n } from '@kbn/i18n';
 import { DEFAULT_PAGE_VALUE, paginationToPage } from '../../../common/pagination';
 import { useFetchQueryRulesSets } from '../../hooks/use_fetch_query_rules_sets';
+import { useQueryRulesSetsTableData } from '../../hooks/use_query_rules_sets_table_data';
+import { QueryRulesSetsSearch } from './query_rules_sets_search';
 
 export const QueryRulesSets = () => {
   const [pageIndex, setPageIndex] = useState(0);
   const [pageSize, setPageSize] = useState(DEFAULT_PAGE_VALUE.size);
+  const [searchKey, setSearchKey] = useState('');
   const { from } = paginationToPage({ pageIndex, pageSize, totalItemCount: 0 });
   const { data: queryRulesData } = useFetchQueryRulesSets({ from, size: pageSize });
 
+  const { queryRulesSetsFilteredData, pagination } = useQueryRulesSetsTableData(
+    queryRulesData?.data,
+    searchKey,
+    pageIndex,
+    pageSize
+  );
+
   if (!queryRulesData) {
     return null;
   }
 
-  const pagination = {
-    initialPageSize: 25,
-    pageSizeOptions: [10, 25, 50],
-    ...queryRulesData._meta,
-    pageSize,
-    pageIndex,
-  };
   const columns: Array<EuiBasicTableColumn<QueryRulesListRulesetsQueryRulesetListItem>> = [
     {
       field: 'ruleset_id',
@@ -59,15 +68,22 @@ export const QueryRulesSets = () => {
   ];
 
   return (
-    <EuiBasicTable
-      data-test-subj="queryRulesSetTable"
-      items={queryRulesData.data}
-      columns={columns}
-      pagination={pagination}
-      onChange={({ page: changedPage }) => {
-        setPageIndex(changedPage.index);
-        setPageSize(changedPage.size);
-      }}
-    />
+    <EuiFlexGroup direction="column">
+      <EuiFlexItem>
+        <QueryRulesSetsSearch searchKey={searchKey} setSearchKey={setSearchKey} />
+      </EuiFlexItem>
+      <EuiFlexItem>
+        <EuiBasicTable
+          data-test-subj="queryRulesSetTable"
+          items={queryRulesSetsFilteredData} // Use filtered data from hook
+          columns={columns}
+          pagination={pagination}
+          onChange={({ page: changedPage }) => {
+            setPageIndex(changedPage.index);
+            setPageSize(changedPage.size);
+          }}
+        />
+      </EuiFlexItem>
+    </EuiFlexGroup>
   );
 };

x-pack/solutions/search/plugins/search_query_rules/public/components/query_rules_sets/query_rules_sets_search.test.tsx

@@ -0,0 +1,30 @@
+/*
+ * 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; you may not use this file except in compliance with the Elastic License
+ * 2.0.
+ */
+
+import { render, screen, fireEvent } from '@testing-library/react';
+import { QueryRulesSetsSearch } from './query_rules_sets_search';
+import React from 'react';
+
+describe('QueryRulesSetsSearch', () => {
+  const mockSetSearchKey = jest.fn();
+
+  it('renders correctly', () => {
+    render(<QueryRulesSetsSearch searchKey="" setSearchKey={mockSetSearchKey} />);
+    expect(screen.getByRole('searchbox')).toBeInTheDocument();
+  });
+
+  it('input value matches searchKey prop', () => {
+    render(<QueryRulesSetsSearch searchKey="test" setSearchKey={mockSetSearchKey} />);
+    expect(screen.getByRole('searchbox')).toHaveValue('test');
+  });
+
+  it('calls setSearchKey on input change', () => {
+    render(<QueryRulesSetsSearch searchKey="" setSearchKey={mockSetSearchKey} />);
+    fireEvent.change(screen.getByRole('searchbox'), { target: { value: 'new search' } });
+    expect(mockSetSearchKey).toHaveBeenCalledWith('new search');
+  });
+});

x-pack/solutions/search/plugins/search_query_rules/public/components/query_rules_sets/query_rules_sets_search.tsx

@@ -0,0 +1,38 @@
+/*
+ * 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; you may not use this file except in compliance with the Elastic License
+ * 2.0.
+ */
+
+import { EuiFieldSearch } from '@elastic/eui';
+import React, { useCallback } from 'react';
+
+interface QueryRulesSetsSearchProps {
+  searchKey: string;
+  setSearchKey: React.Dispatch<React.SetStateAction<string>>;
+}
+
+export const QueryRulesSetsSearch: React.FC<QueryRulesSetsSearchProps> = ({
+  searchKey,
+  setSearchKey,
+}) => {
+  const onSearch = useCallback(
+    (newSearch: string) => {
+      const trimSearch = newSearch.trim();
+      setSearchKey(trimSearch);
+    },
+    [setSearchKey]
+  );
+
+  return (
+    <EuiFieldSearch
+      aria-label="Search query rules sets"
+      placeholder="Search"
+      onChange={(e) => setSearchKey(e.target.value)}
+      onSearch={onSearch}
+      value={searchKey}
+      data-test-subj="searchFieldQueryRulesSets"
+    />
+  );
+};

x-pack/solutions/search/plugins/search_query_rules/public/hooks/use_query_rules_sets_table_data.test.tsx

@@ -0,0 +1,107 @@
+/*
+ * 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; you may not use this file except in compliance with the Elastic License
+ * 2.0.
+ */
+
+import { renderHook } from '@testing-library/react';
+import { useQueryRulesSetsTableData } from './use_query_rules_sets_table_data';
+
+const queryRulesSets = [
+  {
+    ruleset_id: 'ruleset-01',
+    rule_total_count: 1,
+    rule_criteria_types_counts: { exact: 1, fuzzy: 0 },
+    rule_type_counts: { pinned: 2, excluded: 1 },
+  },
+  {
+    ruleset_id: 'ruleset-02',
+    rule_total_count: 2,
+    rule_criteria_types_counts: { exact: 1, fuzzy: 1 },
+    rule_type_counts: { pinned: 2, excluded: 1 },
+  },
+  {
+    ruleset_id: 'ruleset-03',
+    rule_total_count: 3,
+    rule_criteria_types_counts: { exact: 1, fuzzy: 2 },
+    rule_type_counts: { pinned: 2, excluded: 1 },
+  },
+];
+
+describe('useQueryRulesSetsTableData', () => {
+  it('should return correct pagination', () => {
+    // Given a specific pageIndex and pageSize
+    const pageIndex = 1;
+    const pageSize = 3;
+
+    // When the hook is called
+    const { result } = renderHook(() =>
+      useQueryRulesSetsTableData(queryRulesSets, '', pageIndex, pageSize)
+    );
+
+    // Then the pagination object should reflect the input params and data length
+    expect(result.current.pagination).toEqual({
+      pageIndex,
+      pageSize,
+      totalItemCount: queryRulesSets.length,
+      pageSizeOptions: [10, 25, 50],
+    });
+  });
+
+  it('should filter data based on searchKey', () => {
+    // Given a search term that matches one ruleset
+    const searchKey = 'ruleset-02';
+
+    // When the hook is called with that search term
+    const { result } = renderHook(() =>
+      useQueryRulesSetsTableData(queryRulesSets, searchKey, 0, 10)
+    );
+
+    // Then only the matching ruleset should be returned
+    expect(result.current.queryRulesSetsFilteredData).toHaveLength(1);
+    expect(result.current.queryRulesSetsFilteredData[0].ruleset_id).toBe('ruleset-02');
+
+    // And the pagination should reflect the filtered count
+    expect(result.current.pagination.totalItemCount).toBe(1);
+  });
+
+  it('should return all data when searchKey is empty', () => {
+    // Given an empty search term
+    const searchKey = '';
+
+    // When the hook is called
+    const { result } = renderHook(() =>
+      useQueryRulesSetsTableData(queryRulesSets, searchKey, 0, 10)
+    );
+
+    // Then all rulesets should be returned
+    expect(result.current.queryRulesSetsFilteredData).toEqual(queryRulesSets);
+    expect(result.current.queryRulesSetsFilteredData).toHaveLength(queryRulesSets.length);
+
+    // And the pagination should reflect the total count
+    expect(result.current.pagination.totalItemCount).toBe(queryRulesSets.length);
+  });
+
+  it('should handle pagination correctly', () => {
+    // Given specific pagination parameters
+    const pageIndex = 2;
+    const pageSize = 5;
+
+    // When the hook is called
+    const { result } = renderHook(() =>
+      useQueryRulesSetsTableData(queryRulesSets, '', pageIndex, pageSize)
+    );
+
+    // Then the filtered data should contain all items
+    expect(result.current.queryRulesSetsFilteredData).toEqual(queryRulesSets);
+
+    // And the pagination should correctly reflect the input parameters
+    expect(result.current.pagination).toEqual({
+      pageIndex,
+      pageSize,
+      totalItemCount: queryRulesSets.length,
+      pageSizeOptions: [10, 25, 50],
+    });
+  });
+});

x-pack/solutions/search/plugins/search_query_rules/public/hooks/use_query_rules_sets_table_data.tsx

@@ -0,0 +1,39 @@
+/*
+ * 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; you may not use this file except in compliance with the Elastic License
+ * 2.0.
+ */
+
+import { useMemo } from 'react';
+import { Pagination } from '@elastic/eui';
+import { QueryRulesListRulesetsQueryRulesetListItem } from '@elastic/elasticsearch/lib/api/types';
+
+interface UseQueryRulesSetsTableDataProps {
+  queryRulesSetsFilteredData: QueryRulesListRulesetsQueryRulesetListItem[];
+  pagination: Pagination;
+}
+
+export const useQueryRulesSetsTableData = (
+  data: QueryRulesListRulesetsQueryRulesetListItem[] | undefined,
+  searchKey: string,
+  pageIndex: number,
+  pageSize: number
+): UseQueryRulesSetsTableDataProps => {
+  const queryRulesSetsFilteredData = useMemo(() => {
+    if (!data) return [];
+    return data.filter((item) => item.ruleset_id.toLowerCase().includes(searchKey.toLowerCase()));
+  }, [data, searchKey]);
+
+  const pagination: Pagination = useMemo(
+    () => ({
+      pageIndex,
+      pageSize,
+      totalItemCount: queryRulesSetsFilteredData.length,
+      pageSizeOptions: [10, 25, 50],
+    }),
+    [queryRulesSetsFilteredData.length, pageIndex, pageSize]
+  );
+
+  return { queryRulesSetsFilteredData, pagination };
+};