Plugins Catalog: Allow to filter plugins using special characters (#54474) (#54589)

(cherry picked from commit f6827a0518)

Co-authored-by: Murtaza Ahmedi <29052897+murtazaqa@users.noreply.github.com>

public/app/features/plugins/admin/pages/Browse.test.tsx

@@ -4,7 +4,7 @@ import React from 'react';
 import { Provider } from 'react-redux';
 import { Router } from 'react-router-dom';
 
-import { PluginType } from '@grafana/data';
+import { PluginType, escapeStringForRegex } from '@grafana/data';
 import { locationService } from '@grafana/runtime';
 import { getRouteComponentProps } from 'app/core/navigation/__mocks__/routeProps';
 import { configureStore } from 'app/store/configureStore';
@@ -197,6 +197,18 @@ describe('Browse list of plugins', () => {
       expect(queryByText('Plugin 2')).not.toBeInTheDocument();
       expect(queryByText('Plugin 3')).not.toBeInTheDocument();
     });
+
+    it('should handle escaped regex characters in the search query (e.g. "(" )', async () => {
+      const { queryByText } = renderBrowse('/plugins?filterBy=all&q=' + escapeStringForRegex('graph (old)'), [
+        getCatalogPluginMock({ id: 'graph', name: 'Graph (old)' }),
+        getCatalogPluginMock({ id: 'plugin-2', name: 'Plugin 2' }),
+        getCatalogPluginMock({ id: 'plugin-3', name: 'Plugin 3' }),
+      ]);
+      await waitFor(() => expect(queryByText('Graph (old)')).toBeInTheDocument());
+      // Other plugin types shouldn't be shown
+      expect(queryByText('Plugin 2')).not.toBeInTheDocument();
+      expect(queryByText('Plugin 3')).not.toBeInTheDocument();
+    });
   });
 
   describe('when sorting', () => {

public/app/features/plugins/admin/state/hooks.ts

@@ -20,7 +20,7 @@ import {
 } from './selectors';
 
 type Filters = {
-  query?: string;
+  query?: string; // Note: this will be an escaped regex string as it comes from `FilterInput`
   filterBy?: string;
   filterByType?: string;
   sortBy?: Sorters;

public/app/features/plugins/admin/state/selectors.ts

@@ -1,6 +1,6 @@
 import { createSelector } from '@reduxjs/toolkit';
 
-import { PluginError, PluginErrorCode } from '@grafana/data';
+import { PluginError, PluginErrorCode, unEscapeStringFromRegex } from '@grafana/data';
 
 import { RequestStatus, PluginCatalogStoreState } from '../types';
 
@@ -40,7 +40,7 @@ const findByKeyword = (searchBy: string) =>
         fields.push(plugin.orgName.toLowerCase());
       }
 
-      return fields.some((f) => f.includes(searchBy.toLowerCase()));
+      return fields.some((f) => f.includes(unEscapeStringFromRegex(searchBy).toLowerCase()));
     });
   });