fix regex

Author: adhityamamallan

.docker_env

@@ -1,10 +1,10 @@
 NODE_ENV=development
-NEXT_PUBLIC_CADENCE_CLUSTERS_NAMES=default
-CADENCE_GRPC_PEERS="127.0.0.1:7833"
-NEXT_PUBLIC_CADENCE_GRPC_SERVICES_NAMES=cadence-frontend
+NEXT_PUBLIC_CADENCE_CLUSTERS_NAMES=staging_dca1a,staging_phx2a
+CADENCE_GRPC_PEERS=host.docker.internal:5435,host.docker.internal:5435
+NEXT_PUBLIC_CADENCE_GRPC_SERVICES_NAMES=cadence-frontend-staging,cadence-frontend-staging
 CADENCE_WEB_PORT=8088
 CADENCE_EXTERNAL_SCRIPTS=""
-CADENCE_ADMIN_SECURITY_TOKEN=""
+CADENCE_ADMIN_SECURITY_TOKEN="CadenceTeamONLY"
 ENABLE_AUTH=false
 AUTH_TYPE=""
 AUTH_ADMIN_JWT_PRIVATE_KEY=""

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;
 };