diff --git a/frontend/src/components/Header.tsx b/frontend/src/components/Header.tsx index 846ec5b1..670be11f 100644 --- a/frontend/src/components/Header.tsx +++ b/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 = (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 = (props) => {
{userLevel > 0 && ( <> - { - if (location.pathname !== '/inventory') - history.push('/inventory?q=' + value); - setSearchTerm(value, { - shouldClearFilters: false, - autocompleteResults: false - }); - }} - /> {organizations.length > 1 && ( @@ -500,10 +482,3 @@ const HeaderNoCtx: React.FC = (props) => { ); }; - -export const Header = withSearch( - ({ searchTerm, setSearchTerm }: ContextType) => ({ - searchTerm, - setSearchTerm - }) -)(HeaderNoCtx); diff --git a/frontend/src/components/Layout.tsx b/frontend/src/components/Layout.tsx index e782aba2..f568009b 100644 --- a/frontend/src/components/Layout.tsx +++ b/frontend/src/components/Layout.tsx @@ -97,13 +97,14 @@ export const Layout: React.FC = ({ children }) => { {!pathname.includes('/readysetcyber') ? ( <>
-
- {pathname === '/inventory' ? ( - children - ) : ( -
{children}
- )} -
+ +
+ {pathname === '/inventory' ? ( + children + ) : ( +
{children}
+ )} + ) : ( diff --git a/frontend/src/components/SearchBar.tsx b/frontend/src/components/SearchBar.tsx index c37e528e..136b48ee 100644 --- a/frontend/src/components/SearchBar.tsx +++ b/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( return ( -
+
{ @@ -164,7 +164,7 @@ export const SearchBar = React.forwardRef( )} -
+ ); } diff --git a/frontend/src/components/__tests__/__snapshots__/header.spec.tsx.snap b/frontend/src/components/__tests__/__snapshots__/header.spec.tsx.snap index 6d0a28f9..767c5dfc 100644 --- a/frontend/src/components/__tests__/__snapshots__/header.spec.tsx.snap +++ b/frontend/src/components/__tests__/__snapshots__/header.spec.tsx.snap @@ -56,32 +56,6 @@ exports[`Header component matches snapshot 1`] = `
-
-
- - - - -
-
diff --git a/frontend/src/components/__tests__/__snapshots__/searchBar.spec.tsx.snap b/frontend/src/components/__tests__/__snapshots__/searchBar.spec.tsx.snap index 04c9e196..001202b4 100644 --- a/frontend/src/components/__tests__/__snapshots__/searchBar.spec.tsx.snap +++ b/frontend/src/components/__tests__/__snapshots__/searchBar.spec.tsx.snap @@ -3,10 +3,10 @@ exports[`matches snapshot 1`] = `
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) => { - const { filters, addFilter, removeFilter, facets, clearFilters } = props; + const { + filters, + addFilter, + removeFilter, + facets, + clearFilters, + searchTerm, + setSearchTerm + } = props; const { apiGet, apiDelete } = useAuthContext(); const [savedSearches, setSavedSearches] = useState([]); 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) => { return ( +
+ { + if (location.pathname !== '/inventory') + history.push('/inventory?q=' + value); + setSearchTerm(value, { + shouldClearFilters: false, + autocompleteResults: false + }); + }} + /> +

Filter

@@ -368,13 +395,14 @@ export const FilterDrawer: React.FC = (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) => { ); }; + +export const FilterDrawerWithSearch = withSearch( + ({ searchTerm, setSearchTerm }: ContextType) => ({ + searchTerm, + setSearchTerm + }) +)(FilterDrawer);