CEC-3466 - Issues search bar (#449)

* CEC-3466 - Issues search bar

* UI fixes

* fix

src/components/App/__snapshots__/App.test.js.snap

@@ -3267,6 +3267,60 @@ exports[`App Route /issues authenticated 1`] = `
                 <div
                   class="MuiGrid-root makeStyles-textRightAlign-0 MuiGrid-item MuiGrid-grid-md-2"
                 />
+                <div
+                  class="MuiGrid-root makeStyles-textCenterAlign-0 MuiGrid-item MuiGrid-grid-md-4"
+                >
+                  <div
+                    class="MuiFormControl-root makeStyles-margin-0 makeStyles-fullWidth-0"
+                  >
+                    <label
+                      class="MuiFormLabel-root MuiInputLabel-root MuiInputLabel-formControl MuiInputLabel-animated"
+                      data-shrink="false"
+                      for="search"
+                    >
+                      Search
+                    </label>
+                    <div
+                      class="MuiInputBase-root MuiInput-root MuiInput-underline MuiInputBase-formControl MuiInput-formControl MuiInputBase-adornedEnd"
+                    >
+                      <input
+                        aria-invalid="false"
+                        class="MuiInputBase-input MuiInput-input MuiInputBase-inputAdornedEnd"
+                        id="search"
+                        type="text"
+                        value=""
+                      />
+                      <div
+                        class="MuiInputAdornment-root MuiInputAdornment-positionEnd"
+                      >
+                        <button
+                          aria-label="search"
+                          class="MuiButtonBase-root MuiIconButton-root"
+                          tabindex="0"
+                          type="button"
+                        >
+                          <span
+                            class="MuiIconButton-label"
+                          >
+                            <svg
+                              aria-hidden="true"
+                              class="MuiSvgIcon-root"
+                              focusable="false"
+                              viewBox="0 0 24 24"
+                            >
+                              <path
+                                d="M15.5 14h-.79l-.28-.27C15.41 12.59 16 11.11 16 9.5 16 5.91 13.09 3 9.5 3S3 5.91 3 9.5 5.91 16 9.5 16c1.61 0 3.09-.59 4.23-1.57l.27.28v.79l5 4.99L20.49 19l-4.99-5zm-6 0C7.01 14 5 11.99 5 9.5S7.01 5 9.5 5 14 7.01 14 9.5 11.99 14 9.5 14z"
+                              />
+                            </svg>
+                          </span>
+                          <span
+                            class="MuiTouchRipple-root"
+                          />
+                        </button>
+                      </div>
+                    </div>
+                  </div>
+                </div>
               </div>
               <div
                 class="makeStyles-paper-0 makeStyles-tableSize-0"

src/components/Controls/IssueSelectionTable/index.jsx

@@ -108,14 +108,12 @@ const IssueSelectionTable = (props) => {
     (async () => {
       try {
         if (!token) return;
-        await getIssues(
+        const options = {
-          {
+          limit: pageSize,
-            limit: pageSize,
+          offset: pageSize * pageIndex,
-            offset: pageSize * pageIndex,
+          order: `${orderBy} ${order}`,
-            order: `${orderBy} ${order}`,
+        };
-          },
+        await getIssues(Object.assign(options, search), token);
-          token
-        );
       } catch (e) {
         setMessage(e.message);
         logger.warn(e.stack);
@@ -130,14 +128,12 @@ const IssueSelectionTable = (props) => {
 
   const handleDelete = (id) => {
     deleteIssue(id, token).then(() => {
-      getIssues(
+      const options = {
-        {
+        limit: pageSize,
-          limit: pageSize,
+        offset: pageSize * pageIndex,
-          offset: pageSize * pageIndex,
+        order: `${orderBy} ${order}`,
-          order: `${orderBy} ${order}`,
+      };
-        },
+      getIssues(Object.assign(options, search), token);
-        token
-      );
     });
   };
 
@@ -185,19 +181,19 @@ const IssueSelectionTable = (props) => {
         </TableBody>
         <TableFooter>
           <TableRow>
-              <TablePagination
+            <TablePagination
-                rowsPerPageOptions={[5, 10, 25, 100]}
+              rowsPerPageOptions={[5, 10, 25, 100]}
-                colSpan={6}
+              colSpan={6}
-                count={totalIssues}
+              count={totalIssues}
-                rowsPerPage={pageSize}
+              rowsPerPage={pageSize}
-                page={pageIndex}
+              page={pageIndex}
-                SelectProps={{
+              SelectProps={{
-                  inputProps: { "aria-label": "rows per page" },
+                inputProps: { "aria-label": "rows per page" },
-                  native: true,
+                native: true,
-                }}
+              }}
-                onPageChange={handleChangePageIndex}
+              onPageChange={handleChangePageIndex}
-                onRowsPerPageChange={handleChangePageSize}
+              onRowsPerPageChange={handleChangePageSize}
-              />
+            />
           </TableRow>
         </TableFooter>
       </Table>

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