Merge pull request #452 from cisagov/439-ui-move-search-from-header-t…

…o-inventory-filter-crasm-408

439 UI moved search from header to inventory filter CRASM-408

frontend/src/components/Header.tsx

@@ -1,6 +1,6 @@
 import React, { useCallback, useEffect, useMemo, useState } from 'react';
 import { styled } from '@mui/material/styles';
-import { NavLink, Link, useHistory, useLocation } from 'react-router-dom';
+import { NavLink, Link, useHistory } from 'react-router-dom';
 import {
   AppBar,
   Toolbar,
@@ -16,9 +16,6 @@ import { useRouteMatch } from 'react-router-dom';
 import { useAuthContext } from 'context';
 import logo from '../assets/cyhydashboard.svg';
 import cisaLogo from '../assets/cisaSeal.svg';
-import { withSearch } from '@elastic/react-search-ui';
-import { ContextType } from 'context/SearchProvider';
-import { SearchBar } from 'components';
 import { Autocomplete } from '@mui/material';
 import { Organization, OrganizationTag } from 'types';
 import { UserMenu } from './UserMenu';
@@ -164,11 +161,8 @@ interface MenuItemType {
   exact: boolean;
 }
 
-const HeaderNoCtx: React.FC<ContextType> = (props) => {
-  const { searchTerm, setSearchTerm } = props;
-
+export const Header: React.FC = () => {
   const history = useHistory();
-  const location = useLocation();
   const {
     currentOrganization,
     setOrganization,
@@ -343,18 +337,6 @@ const HeaderNoCtx: React.FC<ContextType> = (props) => {
             <div className={classes.spacing} />
             {userLevel > 0 && (
               <>
-                <SearchBar
-                  initialValue={searchTerm}
-                  value={searchTerm}
-                  onChange={(value) => {
-                    if (location.pathname !== '/inventory')
-                      history.push('/inventory?q=' + value);
-                    setSearchTerm(value, {
-                      shouldClearFilters: false,
-                      autocompleteResults: false
-                    });
-                  }}
-                />
                 {organizations.length > 1 && (
                   <Autocomplete
                     isOptionEqualToValue={(option, value) =>
@@ -500,10 +482,3 @@ const HeaderNoCtx: React.FC<ContextType> = (props) => {
     </Root>
   );
 };
-
-export const Header = withSearch(
-  ({ searchTerm, setSearchTerm }: ContextType) => ({
-    searchTerm,
-    setSearchTerm
-  })
-)(HeaderNoCtx);

frontend/src/components/Layout.tsx

@@ -97,13 +97,14 @@ export const Layout: React.FC<LayoutProps> = ({ children }) => {
         {!pathname.includes('/readysetcyber') ? (
           <>
             <Header />
-            <div className="main-content" id="main-content" tabIndex={-1}>
-              {pathname === '/inventory' ? (
-                children
-              ) : (
-                <div className={classes.content}>{children}</div>
-              )}
-            </div>
+
+            <div className="main-content" id="main-content" tabIndex={-1} />
+            {pathname === '/inventory' ? (
+              children
+            ) : (
+              <div className={classes.content}>{children}</div>
+            )}
+
             <CrossfeedFooter />
           </>
         ) : (

frontend/src/components/SearchBar.tsx

@@ -1,5 +1,6 @@
 import React, { useState, useEffect } from 'react';
 import { styled } from '@mui/material/styles';
+import Box from '@mui/material/Box';
 import clsx from 'classnames';
 import { List, ListItem, Paper } from '@mui/material';
 import { SearchOutlined } from '@mui/icons-material';
@@ -40,16 +41,15 @@ const Root = styled('div')(({ theme }) => ({
     padding: '0.5rem 0.5rem 0.5rem 2rem',
     display: 'block',
     width: '100%',
-    border: 'none',
+    border: '1px solid',
+    borderRadius: '5px',
+    borderColor: '#07648D',
     height: '45px',
     fontSize: '1rem',
     fontWeight: 300,
     background: 'none',
     '&::placeholder': {
       color: '#4E4E4E'
-    },
-    '&:focus': {
-      outline: 'none !important'
     }
   },
 
@@ -122,7 +122,7 @@ export const SearchBar = React.forwardRef<HTMLInputElement, Props>(
 
     return (
       <Root className={classes.wrapper}>
-        <div className={classes.inner}>
+        <Box className={classes.inner}>
           <SearchOutlined className={classes.icon} />
           <form
             onSubmit={(e) => {
@@ -164,7 +164,7 @@ export const SearchBar = React.forwardRef<HTMLInputElement, Props>(
                 </List>
               </Paper>
             )}
-        </div>
+        </Box>
       </Root>
     );
   }

frontend/src/components/__tests__/__snapshots__/header.spec.tsx.snap

@@ -56,32 +56,6 @@ exports[`Header component matches snapshot 1`] = `
           <div
             class="Header-spacing"
           />
-          <div
-            class="SearchBar-wrapper css-wta0jn"
-          >
-            <div
-              class="SearchBar-inner"
-            >
-              <svg
-                aria-hidden="true"
-                class="MuiSvgIcon-root MuiSvgIcon-fontSizeMedium SearchBar-icon css-i4bv87-MuiSvgIcon-root"
-                data-testid="SearchOutlinedIcon"
-                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>
-              <form>
-                <input
-                  class="SearchBar-inp"
-                  placeholder="Search a domain, vuln, port, service, IP"
-                  value=""
-                />
-              </form>
-            </div>
-          </div>
           <div
             class="MuiBox-root css-d0uhtl"
           >

frontend/src/components/__tests__/__snapshots__/searchBar.spec.tsx.snap

@@ -3,10 +3,10 @@
 exports[`matches snapshot 1`] = `
 <DocumentFragment>
   <div
-    class="SearchBar-wrapper css-wta0jn"
+    class="SearchBar-wrapper css-1ysk2k2"
   >
     <div
-      class="SearchBar-inner"
+      class="SearchBar-inner MuiBox-root css-0"
     >
       <svg
         aria-hidden="true"

frontend/src/pages/Search/Dashboard.tsx

@@ -17,7 +17,7 @@ import {
 } from '@mui/material';
 import { Pagination } from '@mui/material';
 import { withSearch } from '@elastic/react-search-ui';
-import { FilterDrawer } from './FilterDrawer';
+import { FilterDrawerWithSearch } from './FilterDrawer';
 import { ContextType } from '../../context/SearchProvider';
 import { SortBar } from './SortBar';
 import {
@@ -169,13 +169,15 @@ export const DashboardUI: React.FC<ContextType & { location: any }> = (
 
   return (
     <Root className={classes.root}>
-      <FilterDrawer
+      <FilterDrawerWithSearch
         addFilter={addFilter}
         removeFilter={removeFilter}
         filters={filters}
         facets={facets}
         clearFilters={filters.length > 0 ? () => clearFilters([]) : undefined}
         updateSearchTerm={updateSearchTerm}
+        searchTerm={searchTerm}
+        setSearchTerm={setSearchTerm}
       />
       <div className={classes.contentWrapper}>
         <Subnav

frontend/src/pages/Search/FilterDrawer.tsx

@@ -14,11 +14,13 @@ import {
   FiberManualRecordRounded
 } from '@mui/icons-material';
 import { FaFilter } from 'react-icons/fa';
+import { SearchBar } from 'components';
 import { TaggedArrayInput, FacetFilter } from 'components';
 import { ContextType } from '../../context/SearchProvider';
 import { SavedSearch } from '../../types/saved-search';
 import { useAuthContext } from '../../context';
-import { useHistory } from 'react-router-dom';
+import { useHistory, useLocation } from 'react-router-dom';
+import { withSearch } from '@elastic/react-search-ui';
 
 interface Props {
   addFilter: ContextType['addFilter'];
@@ -27,6 +29,8 @@ interface Props {
   facets: ContextType['facets'];
   clearFilters: ContextType['clearFilters'];
   updateSearchTerm: (term: string) => void;
+  searchTerm: ContextType['searchTerm'];
+  setSearchTerm: ContextType['setSearchTerm'];
 }
 
 const FiltersApplied: React.FC = () => {
@@ -41,11 +45,20 @@ const Accordion = MuiAccordion;
 const AccordionSummary = MuiAccordionSummary;
 
 export const FilterDrawer: React.FC<Props> = (props) => {
-  const { filters, addFilter, removeFilter, facets, clearFilters } = props;
+  const {
+    filters,
+    addFilter,
+    removeFilter,
+    facets,
+    clearFilters,
+    searchTerm,
+    setSearchTerm
+  } = props;
   const { apiGet, apiDelete } = useAuthContext();
   const [savedSearches, setSavedSearches] = useState<SavedSearch[]>([]);
   const [savedSearchCount, setSavedSearchCount] = useState(0);
   const history = useHistory();
+  const location = useLocation();
 
   useEffect(() => {
     const fetchSearches = async () => {
@@ -107,6 +120,20 @@ export const FilterDrawer: React.FC<Props> = (props) => {
 
   return (
     <StyledWrapper style={{ overflowY: 'auto' }}>
+      <div className={classes.header}>
+        <SearchBar
+          initialValue={searchTerm}
+          value={searchTerm}
+          onChange={(value) => {
+            if (location.pathname !== '/inventory')
+              history.push('/inventory?q=' + value);
+            setSearchTerm(value, {
+              shouldClearFilters: false,
+              autocompleteResults: false
+            });
+          }}
+        />
+      </div>
       <div className={classes.header}>
         <div className={classes.filter}>
           <FaFilter /> <h3>Filter</h3>
@@ -368,13 +395,14 @@ export const FilterDrawer: React.FC<Props> = (props) => {
                             'savedSearch',
                             JSON.stringify(cellValues.row)
                           );
-                          history.push(
-                            '/inventory' +
-                              cellValues.row.searchPath +
-                              '&searchId=' +
-                              cellValues.row.id
-                          );
-                          props.updateSearchTerm(cellValues.row.searchTerm); // Prop to lift the search term to the parent component
+                          setSearchTerm(cellValues.row.searchTerm, {
+                            shouldClearFilters: false,
+                            autocompleteResults: false
+                          });
+                          if (location.pathname !== '/inventory')
+                            history.push(
+                              '/inventory?q=' + cellValues.row.searchTerm
+                            );
 
                           // Apply the filters
                           cellValues.row.filters.forEach((filter) => {
@@ -460,3 +488,10 @@ export const FilterDrawer: React.FC<Props> = (props) => {
     </StyledWrapper>
   );
 };
+
+export const FilterDrawerWithSearch = withSearch(
+  ({ searchTerm, setSearchTerm }: ContextType) => ({
+    searchTerm,
+    setSearchTerm
+  })
+)(FilterDrawer);