Disallow colons in searchBar by copy/paste, fixes #1893

globaldothealth · Jun 30, 2021 · 14f4ea6 · 14f4ea6
1 parent 69c0e81
commit 14f4ea6
Show file tree

Hide file tree

Showing 2 changed files with 55 additions and 5 deletions.
diff --git a/verification/curator-service/ui/src/components/SearchBar.test.tsx b/verification/curator-service/ui/src/components/SearchBar.test.tsx
@@ -1,5 +1,6 @@
 import React from 'react';
-import { render, screen, wait } from '@testing-library/react';
+import { render, screen, wait } from './util/test-utils';
+
 import userEvent from '@testing-library/user-event';
 import SearchBar from './SearchBar';
 
@@ -34,7 +35,8 @@ jest.mock('react-router-dom', () => ({
 
 describe('<SearchBar />', () => {
     it('Should open filters modal', async () => {
-        render(<AppTestComponent />);
+        render(<AppTestComponent />,
+            {initialState: {app: { filterBreadcrumbs: [], searchQuery: ''}}},);
 
         userEvent.click(screen.getByRole('button', { name: /Filter/i }));
 

diff --git a/verification/curator-service/ui/src/components/SearchBar.tsx b/verification/curator-service/ui/src/components/SearchBar.tsx
@@ -18,7 +18,11 @@ import { useDebounce } from '../hooks/useDebounce';
 import FiltersModal from './FiltersModal';
 import { searchQueryToURL, URLToSearchQuery } from './util/searchQuery';
 import { useLocation, useHistory } from 'react-router-dom';
-import { KeyboardEvent } from 'react';
+import { KeyboardEvent, ChangeEvent } from 'react';
+import { useSelector } from 'react-redux';
+import {
+    selectFilterBreadcrumbs,
+} from './App/redux/selectors';
 
 const searchBarStyles = makeStyles((theme: Theme) => ({
     searchRoot: {
@@ -38,6 +42,9 @@ const searchBarStyles = makeStyles((theme: Theme) => ({
     activeButton: {
         fontWeight: 'bold',
     },
+    multilineColor: {
+        color: 'red',
+    },
 }));
 
 const StyledSearchTextField = withStyles((theme: Theme) => ({
@@ -94,6 +101,18 @@ export default function SearchBar({
     const [modalAlert, setModalAlert] = useState<boolean>(false);
     const guideButtonRef = React.useRef<HTMLButtonElement>(null);
 
+    const [searchError, setSearchError] = useState<boolean>(false);
+
+    const filtersBreadcrumb = useSelector(selectFilterBreadcrumbs);
+
+    useEffect(() => {
+        if (filtersBreadcrumb.length > 0) {
+            setSearchError(false) 
+            return;
+        }
+
+    }, [filtersBreadcrumb]);
+
     // Set search query debounce to 1000ms
     const debouncedSearch = useDebounce(searchInput, 2000);
 
@@ -135,7 +154,9 @@ export default function SearchBar({
     };
 
     const disallowFilteringInSearchBar = (
-        e: KeyboardEvent<HTMLInputElement>,
+        e:
+            | ChangeEvent<HTMLInputElement | HTMLTextAreaElement>
+            | KeyboardEvent<HTMLInputElement>,
     ) => {
         e.preventDefault();
         setIsUserTyping(false);
@@ -147,17 +168,43 @@ export default function SearchBar({
         setModalAlert(shouldTheAlertStillBeOpen);
     }
 
+    function checkIfThereIsColon(
+        event: ChangeEvent<HTMLInputElement | HTMLTextAreaElement>,
+        eventTargetValue: string,
+    ) {
+        let searchStringStrippedOutColon = eventTargetValue;
+        if (eventTargetValue.includes(':')) {
+            searchStringStrippedOutColon = eventTargetValue.replace(
+                /:/g,
+                '',
+            );
+            setSearchError(true);
+            disallowFilteringInSearchBar(event);
+        } else {
+            setSearchError(false);
+        }
+
+        return searchStringStrippedOutColon;
+    }
+
     return (
         <>
             <div className={classes.searchRoot}>
                 <StyledSearchTextField
+                    error={searchError}
+                    helperText={
+                        searchError &&
+                        'Incorrect entry. ":" characters have been removed. Please use filters instead.'
+                    }
                     id="search-field"
                     data-testid="searchbar"
                     name="searchbar"
                     onKeyPress={handleKeyPress}
                     autoComplete="off"
                     onChange={(event): void => {
-                        setSearchInput(event.target.value);
+                        setSearchInput(
+                            checkIfThereIsColon(event, event.target.value),
+                        );
                     }}
                     onKeyDown={(e: KeyboardEvent<HTMLInputElement>) => {
                         if (!isUserTyping) {
@@ -173,6 +220,7 @@ export default function SearchBar({
                     fullWidth
                     InputProps={{
                         margin: 'dense',
+                        className:clsx(searchError && classes.multilineColor),
                         startAdornment: (
                             <>
                                 <StyledInputAdornment position="start">