Merge pull request #571 from cisagov/622-add-search-tool-to-overview-…

…page Add Search Tool to Overview Page
cisagov · Sep 5, 2024 · 0f5cb90 · 0f5cb90
2 parents 7177cf2 + e4d4229
commit 0f5cb90
Show file tree

Hide file tree

Showing 7 changed files with 131 additions and 517 deletions.
diff --git a/frontend/src/components/DrawerInterior.tsx b/frontend/src/components/DrawerInterior.tsx
@@ -27,7 +27,7 @@ import {
   FilterAlt,
   Save
 } from '@mui/icons-material';
-import { FacetFilter, SearchBar, TaggedArrayInput } from 'components';
+import { FacetFilter, TaggedArrayInput } from 'components';
 import { ContextType } from '../context/SearchProvider';
 import { useAuthContext } from '../context';
 import { useSavedSearchContext } from 'context/SavedSearchContext';
@@ -62,7 +62,6 @@ export const DrawerInterior: React.FC<Props> = (props) => {
     removeFilter,
     facets,
     clearFilters,
-    searchTerm,
     setSearchTerm,
     initialFilters
   } = props;
@@ -177,18 +176,7 @@ export const DrawerInterior: React.FC<Props> = (props) => {
         </Stack>
       </Toolbar>
       <Divider />
-      <div className={classes.header}>
-        <SearchBar
-          initialValue={searchTerm}
-          value={searchTerm}
-          onChange={(value) => {
-            setSearchTerm(value, {
-              shouldClearFilters: false,
-              autocompleteResults: false
-            });
-          }}
-        />
-      </div>
+
       {clearFilters && (
         <Box display="flex" width="100%" justifyContent="center">
           <Button onClick={clearFilters}>Clear All Filters</Button>

diff --git a/frontend/src/components/FilterDrawerV2.tsx b/frontend/src/components/FilterDrawerV2.tsx
@@ -50,6 +50,8 @@ export const FilterDrawer: FC<
         addFilter={addFilter}
         removeFilter={removeFilter}
         filters={filters}
+        setSearchTerm={setSearchTerm}
+        searchTerm={searchTerm}
       />
       {matchPath(
         ['/inventory', '/inventory/domains', '/inventory/vulnerabilities'],

diff --git a/frontend/src/components/RegionAndOrganizationFilters.tsx b/frontend/src/components/RegionAndOrganizationFilters.tsx
@@ -5,6 +5,7 @@ import {
   AccordionDetails,
   AccordionSummary,
   Autocomplete,
+  Box,
   Button,
   Checkbox,
   Divider,
@@ -18,6 +19,8 @@ import {
 import { ExpandMore } from '@mui/icons-material';
 import { useStaticsContext } from 'context/StaticsContext';
 import { REGIONAL_USER_CAN_SEARCH_OTHER_REGIONS } from 'hooks/useUserTypeFilters';
+import { SearchBar } from './SearchBar';
+import { useHistory, useLocation } from 'react-router-dom';
 
 const GLOBAL_ADMIN = 3;
 const REGIONAL_ADMIN = 2;
@@ -48,11 +51,19 @@ interface RegionAndOrganizationFiltersProps {
     filterType: 'all' | 'any' | 'none'
   ) => void;
   filters: any[];
+  setSearchTerm: (s: string, opts?: any) => void;
+  searchTerm: string;
 }
 
 export const RegionAndOrganizationFilters: React.FC<
   RegionAndOrganizationFiltersProps
-> = ({ addFilter, removeFilter, filters }) => {
+> = ({
+  addFilter,
+  removeFilter,
+  filters,
+  searchTerm: domainSearchTerm,
+  setSearchTerm: setDomainSearchTerm
+}) => {
   const { setShowMaps, user, apiPost } = useAuthContext();
 
   const { regions } = useStaticsContext();
@@ -156,6 +167,8 @@ export const RegionAndOrganizationFilters: React.FC<
     },
     [regionFilterValues]
   );
+  const history = useHistory();
+  const location = useLocation();
 
   const handleAddOrganization = (org: OrganizationShallow) => {
     if (org) {
@@ -179,6 +192,24 @@ export const RegionAndOrganizationFilters: React.FC<
   return (
     <>
       <Divider />
+      <Box padding={2}>
+        <SearchBar
+          initialValue={domainSearchTerm}
+          value={domainSearchTerm}
+          onChange={(value) => {
+            if (location.pathname !== '/inventory') {
+              history.push(`/inventory?q=${value}`);
+              setDomainSearchTerm(value, {
+                shouldClearFilters: false,
+                refresh: true
+              });
+            }
+            setDomainSearchTerm(value, {
+              shouldClearFilters: false
+            });
+          }}
+        />
+      </Box>
       <Accordion
         expanded={userLevel === STANDARD_USER ? true : undefined}
         defaultExpanded

diff --git a/frontend/src/components/__tests__/__snapshots__/layout.spec.tsx.snap b/frontend/src/components/__tests__/__snapshots__/layout.spec.tsx.snap
@@ -72,6 +72,36 @@ exports[`Layout component matches snapshot 1`] = `
               <hr
                 class="MuiDivider-root MuiDivider-fullWidth css-9mgopn-MuiDivider-root"
               />
+              <div
+                class="MuiBox-root css-19midj6"
+              >
+                <div
+                  class="SearchBar-wrapper css-1ysk2k2"
+                >
+                  <div
+                    class="SearchBar-inner MuiBox-root css-0"
+                  >
+                    <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>
               <div
                 class="MuiPaper-root MuiPaper-elevation MuiPaper-rounded MuiPaper-elevation1 MuiAccordion-root MuiAccordion-rounded Mui-expanded MuiAccordion-gutters css-1elwnq4-MuiPaper-root-MuiAccordion-root"
               >