Trim quotes and whitespace from search bar text (#725)

* fix regex

* Remove env files

Author: adhityamamallan

src/components/page-filters/__tests__/page-filters.test.tsx

@@ -45,6 +45,30 @@ describe('PageFilters', () => {
     expect(mockSetQueryParams).toHaveBeenCalledWith({ search: 'test-search' });
   });
 
+  it('should prune quotes and spaces from input text if no regexp is passed', async () => {
+    setup({});
+
+    const searchInput = await screen.findByRole('textbox');
+
+    act(() => {
+      fireEvent.change(searchInput, { target: { value: ` "test-search'` } });
+    });
+
+    expect(mockSetQueryParams).toHaveBeenCalledWith({ search: 'test-search' });
+  });
+
+  it('should prune symbols from input text if regexp is passed', async () => {
+    setup({ searchTrimRegExp: /[-]/g });
+
+    const searchInput = await screen.findByRole('textbox');
+
+    act(() => {
+      fireEvent.change(searchInput, { target: { value: 'test-search' } });
+    });
+
+    expect(mockSetQueryParams).toHaveBeenCalledWith({ search: 'testsearch' });
+  });
+
   it('should show filters when Filters button is clicked, and modify additional filters', async () => {
     setup({});
 
@@ -62,10 +86,12 @@ describe('PageFilters', () => {
 
 function setup({
   valuesOverrides,
+  searchTrimRegExp,
 }: {
   valuesOverrides?: Partial<
     PageQueryParamValues<typeof mockPageQueryParamConfig>
   >;
+  searchTrimRegExp?: RegExp;
 }) {
   if (valuesOverrides) {
     jest
@@ -82,6 +108,7 @@ function setup({
       searchPlaceholder="placeholder"
       pageFiltersConfig={mockFiltersConfig}
       pageQueryParamsConfig={mockPageQueryParamConfig}
+      {...(searchTrimRegExp ? { searchTrimRegExp } : {})}
     />
   );
 }

src/components/page-filters/page-filters.tsx

@@ -23,6 +23,7 @@ export default function PageFilters<
   searchPlaceholder,
   pageFiltersConfig,
   pageQueryParamsConfig,
+  searchTrimRegExp = /['"\s]/g,
 }: Props<P, K>) {
   const [areFiltersShown, setAreFiltersShown] = useState(false);
 
@@ -34,11 +35,15 @@ export default function PageFilters<
       <styled.SearchInputContainer>
         <Input
           value={queryParams[searchQueryParamKey]}
-          onChange={(event) =>
+          onChange={(event) => {
+            const searchValue = searchTrimRegExp
+              ? event.target.value.replaceAll(searchTrimRegExp, '')
+              : event.target.value;
+
             setQueryParams({
-              [searchQueryParamKey]: event.target.value || undefined,
-            } as Partial<PageQueryParamSetterValues<P>>)
-          }
+              [searchQueryParamKey]: searchValue || undefined,
+            } as Partial<PageQueryParamSetterValues<P>>);
+          }}
           placeholder={searchPlaceholder}
           startEnhancer={() => <Search />}
           clearOnEscape

src/components/page-filters/page-filters.types.ts

@@ -33,4 +33,5 @@ export type Props<
   searchPlaceholder: string;
   pageQueryParamsConfig: P;
   pageFiltersConfig: Array<PageFilterConfig<P, any>>;
+  searchTrimRegExp?: RegExp;
 };