QueryHistory: Fix filter strings being regular escaped (#64879)

* fix wrong regex escape in query history

* fix import

* disable regexescape on `RichHistoryStarredTab`

public/app/features/explore/RichHistory/RichHistoryQueriesTab.test.tsx

@@ -0,0 +1,64 @@
+import { fireEvent, render, screen } from '@testing-library/react';
+import React from 'react';
+
+import { DataSourceSrv, setDataSourceSrv } from '@grafana/runtime';
+import { SortOrder } from 'app/core/utils/richHistoryTypes';
+import { ExploreId } from 'app/types';
+
+import { RichHistoryQueriesTab, RichHistoryQueriesTabProps } from './RichHistoryQueriesTab';
+
+const setup = (propOverrides?: Partial<RichHistoryQueriesTabProps>) => {
+  const props: RichHistoryQueriesTabProps = {
+    queries: [],
+    totalQueries: 0,
+    loading: false,
+    activeDatasourceInstance: 'test-ds',
+    updateFilters: jest.fn(),
+    clearRichHistoryResults: jest.fn(),
+    loadMoreRichHistory: jest.fn(),
+    richHistorySearchFilters: {
+      search: '',
+      sortOrder: SortOrder.Descending,
+      datasourceFilters: ['test-ds'],
+      from: 0,
+      to: 30,
+      starred: false,
+    },
+    richHistorySettings: {
+      retentionPeriod: 30,
+      activeDatasourceOnly: false,
+      lastUsedDatasourceFilters: [],
+      starredTabAsFirstTab: false,
+    },
+    exploreId: ExploreId.left,
+    height: 100,
+  };
+
+  Object.assign(props, propOverrides);
+
+  return render(<RichHistoryQueriesTab {...props} />);
+};
+
+describe('RichHistoryQueriesTab', () => {
+  beforeAll(() => {
+    setDataSourceSrv({
+      getList() {
+        return [];
+      },
+    } as unknown as DataSourceSrv);
+  });
+
+  it('should render', () => {
+    setup();
+    expect(screen.queryByText('Filter history')).toBeInTheDocument();
+  });
+
+  it('should not regex escape filter input', () => {
+    const updateFiltersSpy = jest.fn();
+    setup({ updateFilters: updateFiltersSpy });
+    const input = screen.getByPlaceholderText(/search queries/i);
+    fireEvent.change(input, { target: { value: '|=' } });
+
+    expect(updateFiltersSpy).toHaveBeenCalledWith(expect.objectContaining({ search: '|=' }));
+  });
+});

public/app/features/explore/RichHistory/RichHistoryQueriesTab.tsx

@@ -17,7 +17,7 @@ import { ExploreId, RichHistoryQuery } from 'app/types/explore';
 import { getSortOrderOptions } from './RichHistory';
 import RichHistoryCard from './RichHistoryCard';
 
-export interface Props {
+export interface RichHistoryQueriesTabProps {
   queries: RichHistoryQuery[];
   totalQueries: number;
   loading: boolean;
@@ -118,7 +118,7 @@ const getStyles = (theme: GrafanaTheme2, height: number) => {
   };
 };
 
-export function RichHistoryQueriesTab(props: Props) {
+export function RichHistoryQueriesTab(props: RichHistoryQueriesTabProps) {
   const {
     queries,
     totalQueries,
@@ -211,6 +211,7 @@ export function RichHistoryQueriesTab(props: Props) {
           )}
           <div className={styles.filterInput}>
             <FilterInput
+              escapeRegex={false}
               placeholder="Search queries"
               value={richHistorySearchFilters.search}
               onChange={(search: string) => updateFilters({ search })}

public/app/features/explore/RichHistory/RichHistoryStarredTab.test.tsx

@@ -1,11 +1,11 @@
-import { render } from '@testing-library/react';
+import { fireEvent, render, screen } from '@testing-library/react';
 import React from 'react';
 
 import { SortOrder } from 'app/core/utils/richHistory';
 
 import { ExploreId } from '../../../types/explore';
 
-import { RichHistoryStarredTab, Props } from './RichHistoryStarredTab';
+import { RichHistoryStarredTab, RichHistoryStarredTabProps } from './RichHistoryStarredTab';
 
 jest.mock('../state/selectors', () => ({ getExploreDatasources: jest.fn() }));
 
@@ -18,8 +18,8 @@ jest.mock('@grafana/runtime', () => ({
   },
 }));
 
-const setup = (activeDatasourceOnly = false) => {
-  const props: Props = {
+const setup = (propOverrides?: Partial<RichHistoryStarredTabProps>) => {
+  const props: RichHistoryStarredTabProps = {
     queries: [],
     loading: false,
     totalQueries: 0,
@@ -31,7 +31,7 @@ const setup = (activeDatasourceOnly = false) => {
     richHistorySettings: {
       retentionPeriod: 7,
       starredTabAsFirstTab: false,
-      activeDatasourceOnly,
+      activeDatasourceOnly: false,
       lastUsedDatasourceFilters: [],
     },
     richHistorySearchFilters: {
@@ -44,6 +44,8 @@ const setup = (activeDatasourceOnly = false) => {
     },
   };
 
+  Object.assign(props, propOverrides);
+
   const container = render(<RichHistoryStarredTab {...props} />);
   return container;
 };
@@ -63,8 +65,24 @@ describe('RichHistoryStarredTab', () => {
     });
 
     it('should not render select datasource if activeDatasourceOnly is true', () => {
-      const container = setup(true);
+      const container = setup({
+        richHistorySettings: {
+          retentionPeriod: 7,
+          starredTabAsFirstTab: false,
+          activeDatasourceOnly: true,
+          lastUsedDatasourceFilters: [],
+        },
+      });
       expect(container.queryByLabelText('Filter queries for data sources(s)')).not.toBeInTheDocument();
     });
   });
+
+  it('should not regex escape filter input', () => {
+    const updateFiltersSpy = jest.fn();
+    setup({ updateFilters: updateFiltersSpy });
+    const input = screen.getByPlaceholderText(/search queries/i);
+    fireEvent.change(input, { target: { value: '|=' } });
+
+    expect(updateFiltersSpy).toHaveBeenCalledWith(expect.objectContaining({ search: '|=' }));
+  });
 });

public/app/features/explore/RichHistory/RichHistoryStarredTab.tsx

@@ -15,7 +15,7 @@ import { RichHistoryQuery, ExploreId } from 'app/types/explore';
 import { getSortOrderOptions } from './RichHistory';
 import RichHistoryCard from './RichHistoryCard';
 
-export interface Props {
+export interface RichHistoryStarredTabProps {
   queries: RichHistoryQuery[];
   totalQueries: number;
   loading: boolean;
@@ -72,7 +72,7 @@ const getStyles = (theme: GrafanaTheme2) => {
   };
 };
 
-export function RichHistoryStarredTab(props: Props) {
+export function RichHistoryStarredTab(props: RichHistoryStarredTabProps) {
   const {
     updateFilters,
     clearRichHistoryResults,
@@ -136,6 +136,7 @@ export function RichHistoryStarredTab(props: Props) {
           )}
           <div className={styles.filterInput}>
             <FilterInput
+              escapeRegex={false}
               placeholder="Search queries"
               value={richHistorySearchFilters.search}
               onChange={(search: string) => updateFilters({ search })}