CEC-3466 - Issues search bar (#449)

* CEC-3466 - Issues search bar

* UI fixes

* fix

src/components/Issues/List/index.jsx

@@ -7,10 +7,13 @@ import { useUserContext } from "../../Contexts/UserContext";
 import { IssueProvider } from "../../Contexts/IssueContext";
 import IssueSelectionTable from "../../Controls/IssueSelectionTable";
 
+import SearchField from "../../Controls/SearchField";
+import { useLocalStorage } from "../../useLocalStorage";
 import useStyles from "../../useStyles";
 
 const MainForm = () => {
   const classes = useStyles();
+  const [search, setSearch] = useLocalStorage("ISSUES_SEARCH", "");
   const { setTitle, setSitePath } = useStatusContext();
   const {
     token: {
@@ -18,7 +21,9 @@ const MainForm = () => {
     },
   } = useUserContext();
 
-
+  const handleSearch = (query) => {
+    setSearch(query);
+  };
 
   useEffect(() => {
     setTitle("Issues");
@@ -32,11 +37,15 @@ const MainForm = () => {
         <Grid item md={4} className={classes.textJustifyAlign}>
         </Grid>
         <Grid item md={2} className={classes.textRightAlign} />
+        <Grid item md={4} className={classes.textCenterAlign}>
+          <SearchField classes={classes} onSearch={handleSearch} savedSearchValue={search} />
+        </Grid>
       </Grid>
       <IssueSelectionTable
         classes={classes}
         token={token}
         multiSelect={false}
+        search={{ search }}
       />
     </div>
   );