From 74742b980f3477c53c457bdcc01967fd9f73ce36 Mon Sep 17 00:00:00 2001 From: Louis Wersiy Date: Tue, 16 Jul 2024 11:40:10 -0400 Subject: [PATCH 01/14] searchbar relocated from hearder to filterDrawer --- frontend/src/pages/Search/FilterDrawer.tsx | 20 +++++++++++++++++++- 1 file changed, 19 insertions(+), 1 deletion(-) diff --git a/frontend/src/pages/Search/FilterDrawer.tsx b/frontend/src/pages/Search/FilterDrawer.tsx index 0f74e53c..9effcad6 100644 --- a/frontend/src/pages/Search/FilterDrawer.tsx +++ b/frontend/src/pages/Search/FilterDrawer.tsx @@ -14,11 +14,12 @@ 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'; interface Props { addFilter: ContextType['addFilter']; @@ -27,6 +28,8 @@ interface Props { facets: ContextType['facets']; clearFilters: ContextType['clearFilters']; updateSearchTerm: (term: string) => void; + setSearchTerm: ContextType['setSearchTerm']; + searchTerm: ContextType['searchTerm']; } const FiltersApplied: React.FC = () => { @@ -46,6 +49,7 @@ export const FilterDrawer: React.FC = (props) => { const [savedSearches, setSavedSearches] = useState([]); const [savedSearchCount, setSavedSearchCount] = useState(0); const history = useHistory(); + const location = useLocation(); useEffect(() => { const fetchSearches = async () => { @@ -107,6 +111,20 @@ export const FilterDrawer: React.FC = (props) => { return ( +
+ { + if (location.pathname !== '/inventory') + history.push('/inventory?q=' + value); + setSearchTerm(value, { + shouldClearFilters: false, + autocompleteResults: false + }); + }} + /> +

Filter

From f777f15f36d2d253ea61762e12ff9b0c3d8b8b9f Mon Sep 17 00:00:00 2001 From: Thomas Date: Tue, 16 Jul 2024 16:14:24 -0400 Subject: [PATCH 02/14] Refactored FilterDrawer to use SearchBar component - Moved SearchBar component from Header to FilterDrawer. - Updated FilterDrawer props to include searchTerm and setSearchTerm. - Created a HOC component named FilterDrawerWithSearchBar to pass searchTerm and setSearchTerm to FilterDrawer. - Updated FilterDrawer in Dashboard props to include searchTerm and setSearchTerm. --- frontend/src/pages/Search/Dashboard.tsx | 2 ++ frontend/src/pages/Search/FilterDrawer.tsx | 20 ++++++++++++++++++-- 2 files changed, 20 insertions(+), 2 deletions(-) diff --git a/frontend/src/pages/Search/Dashboard.tsx b/frontend/src/pages/Search/Dashboard.tsx index 767c3f4b..42d4e9f7 100644 --- a/frontend/src/pages/Search/Dashboard.tsx +++ b/frontend/src/pages/Search/Dashboard.tsx @@ -175,6 +175,8 @@ export const DashboardUI: React.FC = ( facets={facets} clearFilters={filters.length > 0 ? () => clearFilters([]) : undefined} updateSearchTerm={updateSearchTerm} + searchTerm={searchTerm} + setSearchTerm={setSearchTerm} />
void; - setSearchTerm: ContextType['setSearchTerm']; searchTerm: ContextType['searchTerm']; + setSearchTerm: ContextType['setSearchTerm']; } const FiltersApplied: React.FC = () => { @@ -44,7 +45,15 @@ 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); @@ -478,3 +487,10 @@ export const FilterDrawer: React.FC = (props) => { ); }; + +export const FilterDrawerWithSearch = withSearch( + ({ searchTerm, setSearchTerm }: ContextType) => ({ + searchTerm, + setSearchTerm + }) +)(FilterDrawer); From 95c9daa8c853f2079329a41fb2d04d51830b62d2 Mon Sep 17 00:00:00 2001 From: Louis Wersiy Date: Wed, 17 Jul 2024 09:50:40 -0400 Subject: [PATCH 03/14] box imported from mui and border added --- frontend/src/components/SearchBar.tsx | 13 +++++++++++-- 1 file changed, 11 insertions(+), 2 deletions(-) diff --git a/frontend/src/components/SearchBar.tsx b/frontend/src/components/SearchBar.tsx index c37e528e..04b60e38 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'; @@ -122,7 +123,15 @@ export const SearchBar = React.forwardRef( return ( -
+
{ @@ -164,7 +173,7 @@ export const SearchBar = React.forwardRef( )} -
+ ); } From 301792269b619e4f13cdad7528a6753a434275e0 Mon Sep 17 00:00:00 2001 From: Thomas Date: Wed, 17 Jul 2024 10:21:46 -0400 Subject: [PATCH 04/14] Reinstated outline for SearchBar --- frontend/src/components/SearchBar.tsx | 3 --- 1 file changed, 3 deletions(-) diff --git a/frontend/src/components/SearchBar.tsx b/frontend/src/components/SearchBar.tsx index 04b60e38..e9a1f18d 100644 --- a/frontend/src/components/SearchBar.tsx +++ b/frontend/src/components/SearchBar.tsx @@ -48,9 +48,6 @@ const Root = styled('div')(({ theme }) => ({ background: 'none', '&::placeholder': { color: '#4E4E4E' - }, - '&:focus': { - outline: 'none !important' } }, From 755e793964944d2b7558c869465f047e05086437 Mon Sep 17 00:00:00 2001 From: Thomas Date: Wed, 17 Jul 2024 11:25:49 -0400 Subject: [PATCH 05/14] Refactored SearchBar and Header components - Edited existing SearchBar css to add border, border radius, and primary theme color. - Refactored Header component by removing HOC Header export, withSearch, and ContextType. - Renamed HeaderNoCtx to Header. - Header is now a simple component with no context. --- frontend/src/components/Header.tsx | 24 ++++++++++++------------ frontend/src/components/SearchBar.tsx | 14 ++++---------- 2 files changed, 16 insertions(+), 22 deletions(-) diff --git a/frontend/src/components/Header.tsx b/frontend/src/components/Header.tsx index 846ec5b1..2ce56659 100644 --- a/frontend/src/components/Header.tsx +++ b/frontend/src/components/Header.tsx @@ -18,7 +18,7 @@ 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 { SearchBar } from 'components'; import { Autocomplete } from '@mui/material'; import { Organization, OrganizationTag } from 'types'; import { UserMenu } from './UserMenu'; @@ -164,11 +164,11 @@ interface MenuItemType { exact: boolean; } -const HeaderNoCtx: React.FC = (props) => { - const { searchTerm, setSearchTerm } = props; +export const Header: React.FC = () => { + // const { searchTerm, setSearchTerm } = props; const history = useHistory(); - const location = useLocation(); + // const location = useLocation(); const { currentOrganization, setOrganization, @@ -343,7 +343,7 @@ const HeaderNoCtx: React.FC = (props) => {
{userLevel > 0 && ( <> - { @@ -354,7 +354,7 @@ const HeaderNoCtx: React.FC = (props) => { autocompleteResults: false }); }} - /> + /> */} {organizations.length > 1 && ( @@ -501,9 +501,9 @@ const HeaderNoCtx: React.FC = (props) => { ); }; -export const Header = withSearch( - ({ searchTerm, setSearchTerm }: ContextType) => ({ - searchTerm, - setSearchTerm - }) -)(HeaderNoCtx); +// export const Header = withSearch( +// ({ searchTerm, setSearchTerm }: ContextType) => ({ +// searchTerm, +// setSearchTerm +// }) +// )(HeaderNoCtx); diff --git a/frontend/src/components/SearchBar.tsx b/frontend/src/components/SearchBar.tsx index e9a1f18d..136b48ee 100644 --- a/frontend/src/components/SearchBar.tsx +++ b/frontend/src/components/SearchBar.tsx @@ -41,7 +41,9 @@ 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, @@ -120,15 +122,7 @@ export const SearchBar = React.forwardRef( return ( - + { From 88ee2e35a87da9a9a1ff3605da5e5643f5d2e84c Mon Sep 17 00:00:00 2001 From: Louis Wersiy Date: Wed, 17 Jul 2024 11:50:51 -0400 Subject: [PATCH 06/14] cleaned up unused/commented lines of code --- frontend/src/components/Header.tsx | 27 +-------------------------- 1 file changed, 1 insertion(+), 26 deletions(-) diff --git a/frontend/src/components/Header.tsx b/frontend/src/components/Header.tsx index 2ce56659..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'; @@ -165,10 +162,7 @@ interface MenuItemType { } export const Header: React.FC = () => { - // const { searchTerm, setSearchTerm } = props; - const history = useHistory(); - // const location = useLocation(); const { currentOrganization, setOrganization, @@ -343,18 +337,6 @@ export const Header: React.FC = () => {
{userLevel > 0 && ( <> - {/* { - if (location.pathname !== '/inventory') - history.push('/inventory?q=' + value); - setSearchTerm(value, { - shouldClearFilters: false, - autocompleteResults: false - }); - }} - /> */} {organizations.length > 1 && ( @@ -500,10 +482,3 @@ export const Header: React.FC = () => { ); }; - -// export const Header = withSearch( -// ({ searchTerm, setSearchTerm }: ContextType) => ({ -// searchTerm, -// setSearchTerm -// }) -// )(HeaderNoCtx); From 0ecfbb40d1f3913c571de0195378a30964d19f61 Mon Sep 17 00:00:00 2001 From: Thomas Date: Wed, 17 Jul 2024 12:44:20 -0400 Subject: [PATCH 07/14] Updated Header snapshot --- .../__snapshots__/header.spec.tsx.snap | 26 ------------------- .../__snapshots__/searchBar.spec.tsx.snap | 4 +-- 2 files changed, 2 insertions(+), 28 deletions(-) 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`] = `
Date: Wed, 17 Jul 2024 16:04:20 -0400 Subject: [PATCH 10/14] Added console.log to FilterDrawe for testing --- frontend/src/pages/Search/FilterDrawer.tsx | 1 + 1 file changed, 1 insertion(+) diff --git a/frontend/src/pages/Search/FilterDrawer.tsx b/frontend/src/pages/Search/FilterDrawer.tsx index 2d8d8fa5..03b30c59 100644 --- a/frontend/src/pages/Search/FilterDrawer.tsx +++ b/frontend/src/pages/Search/FilterDrawer.tsx @@ -404,6 +404,7 @@ export const FilterDrawer: React.FC = (props) => { history.push( '/inventory?q=' + cellValues.row.searchTerm ); + console.log(cellValues.row.searchTerm); // history.push( // '/inventory' + // cellValues.row.searchPath + From 92d55ce7f483a3deffe07708f6db3035a04bbbe3 Mon Sep 17 00:00:00 2001 From: Thomas Date: Wed, 17 Jul 2024 16:10:44 -0400 Subject: [PATCH 11/14] Removed console.log and reinstated filters --- frontend/src/pages/Search/FilterDrawer.tsx | 12 ++++++------ 1 file changed, 6 insertions(+), 6 deletions(-) diff --git a/frontend/src/pages/Search/FilterDrawer.tsx b/frontend/src/pages/Search/FilterDrawer.tsx index 03b30c59..0fe4784c 100644 --- a/frontend/src/pages/Search/FilterDrawer.tsx +++ b/frontend/src/pages/Search/FilterDrawer.tsx @@ -404,7 +404,7 @@ export const FilterDrawer: React.FC = (props) => { history.push( '/inventory?q=' + cellValues.row.searchTerm ); - console.log(cellValues.row.searchTerm); + // history.push( // '/inventory' + // cellValues.row.searchPath + @@ -414,11 +414,11 @@ export const FilterDrawer: React.FC = (props) => { // props.updateSearchTerm(cellValues.row.searchTerm); // Prop to lift the search term to the parent component // Apply the filters - // cellValues.row.filters.forEach((filter) => { - // filter.values.forEach((value) => { - // addFilter(filter.field, value, 'any'); - // }); - // }); + cellValues.row.filters.forEach((filter) => { + filter.values.forEach((value) => { + addFilter(filter.field, value, 'any'); + }); + }); }; return (
Date: Thu, 18 Jul 2024 16:55:56 -0400 Subject: [PATCH 12/14] Removed unused imports --- frontend/src/pages/Search/FilterDrawer.tsx | 1 - 1 file changed, 1 deletion(-) diff --git a/frontend/src/pages/Search/FilterDrawer.tsx b/frontend/src/pages/Search/FilterDrawer.tsx index 0fe4784c..283459c3 100644 --- a/frontend/src/pages/Search/FilterDrawer.tsx +++ b/frontend/src/pages/Search/FilterDrawer.tsx @@ -21,7 +21,6 @@ import { SavedSearch } from '../../types/saved-search'; import { useAuthContext } from '../../context'; import { useHistory, useLocation } from 'react-router-dom'; import { withSearch } from '@elastic/react-search-ui'; -import { set } from 'date-fns'; interface Props { addFilter: ContextType['addFilter']; From b2cdc0156d5866d8dfb05da41658f12d23ea3ec2 Mon Sep 17 00:00:00 2001 From: Thomas Date: Thu, 18 Jul 2024 16:59:41 -0400 Subject: [PATCH 13/14] Removed commented out code from FilterDrawer.tsx --- frontend/src/pages/Search/FilterDrawer.tsx | 8 -------- 1 file changed, 8 deletions(-) diff --git a/frontend/src/pages/Search/FilterDrawer.tsx b/frontend/src/pages/Search/FilterDrawer.tsx index 283459c3..942f8372 100644 --- a/frontend/src/pages/Search/FilterDrawer.tsx +++ b/frontend/src/pages/Search/FilterDrawer.tsx @@ -404,14 +404,6 @@ export const FilterDrawer: React.FC = (props) => { '/inventory?q=' + cellValues.row.searchTerm ); - // 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 - // Apply the filters cellValues.row.filters.forEach((filter) => { filter.values.forEach((value) => { From c61bac9ae8f7d0ebf79d7e7f374c169f42a64cdf Mon Sep 17 00:00:00 2001 From: Thomas Date: Thu, 18 Jul 2024 17:24:59 -0400 Subject: [PATCH 14/14] Edited Layout.tsx - Refactored "main-content" div from wrapping to inline so it would not overide the styling of the "content" div down river. - This resolves weird footer issues in Inventory and My Settings. --- frontend/src/components/Layout.tsx | 15 ++++++++------- 1 file changed, 8 insertions(+), 7 deletions(-) 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}
+ )} + ) : (