Merge pull request #2137 from saithsab877/filtersearch-modal-close-icon

[FilterSearch]: Modal closes after clicking `Show Result` button, but the `cross (X)` icon remains visible
stakwork · Sep 25, 2024 · cca8ef7 · cca8ef7
2 parents 966c924 + 9b1bedc
commit cca8ef7
Show file tree

Hide file tree

Showing 3 changed files with 20 additions and 1 deletion.
diff --git a/src/components/App/SideBar/FilterSearch/__tests__/index.tsx b/src/components/App/SideBar/FilterSearch/__tests__/index.tsx
@@ -18,6 +18,7 @@ const mockSetShowAllSchemas = jest.fn()
 const mockSetAnchorEl = jest.fn()
 const mockFetchData = jest.fn()
 const mockSetAbortRequests = jest.fn()
+const mockOnClose = jest.fn()
 
 const mockSchemaAll = [{ type: 'Type1' }, { type: 'Type2' }, { type: 'Type3' }, { type: 'Type4' }, { type: 'Type5' }]
 
@@ -28,6 +29,7 @@ describe('FilterSearch Component', () => {
       setFilters: mockSetFilters,
       fetchData: mockFetchData,
       setAbortRequests: mockSetAbortRequests,
+      onClose: mockOnClose,
     })
   })
 
@@ -37,6 +39,7 @@ describe('FilterSearch Component', () => {
         <StyleThemeProvider theme={appTheme}>
           <FilterSearch
             anchorEl={document.createElement('div')}
+            onClose={mockOnClose}
             schemaAll={mockSchemaAll}
             setAnchorEl={mockSetAnchorEl}
             setShowAllSchemas={mockSetShowAllSchemas}
@@ -174,6 +177,7 @@ describe('FilterSearch Component', () => {
         <StyleThemeProvider theme={appTheme}>
           <FilterSearch
             anchorEl={null}
+            onClose={mockOnClose}
             schemaAll={mockSchemaAll}
             setAnchorEl={mockSetAnchorEl}
             setShowAllSchemas={mockSetShowAllSchemas}

diff --git a/src/components/App/SideBar/FilterSearch/index.tsx b/src/components/App/SideBar/FilterSearch/index.tsx
@@ -18,6 +18,7 @@ type Props = {
   schemaAll: SchemaExtended[]
   anchorEl: HTMLElement | null
   setAnchorEl: (value: HTMLElement | null) => void
+  onClose: () => void
 }
 
 const defaultValues = {
@@ -27,7 +28,14 @@ const defaultValues = {
   maxResults: 30,
 }
 
-export const FilterSearch = ({ showAllSchemas, setShowAllSchemas, schemaAll, anchorEl, setAnchorEl }: Props) => {
+export const FilterSearch = ({
+  showAllSchemas,
+  setShowAllSchemas,
+  schemaAll,
+  anchorEl,
+  setAnchorEl,
+  onClose,
+}: Props) => {
   const handleSchemaTypeClick = (type: string) => {
     setSelectedTypes((prevSelectedTypes) =>
       prevSelectedTypes.includes(type) ? prevSelectedTypes.filter((t) => t !== type) : [...prevSelectedTypes, type],
@@ -65,6 +73,7 @@ export const FilterSearch = ({ showAllSchemas, setShowAllSchemas, schemaAll, anc
     })
 
     setAnchorEl(null)
+    onClose()
 
     await fetchData(setBudget, setAbortRequests)
   }

diff --git a/src/components/App/SideBar/RegularView/index.tsx b/src/components/App/SideBar/RegularView/index.tsx
@@ -92,6 +92,11 @@ export const RegularView = () => {
     setShowAllSchemas(false)
   }
 
+  const handleCloseFilterSearch = () => {
+    setIsFilterOpen(false)
+    setAnchorEl(null)
+  }
+
   const navigate = useNavigate()
 
   return (
@@ -136,6 +141,7 @@ export const RegularView = () => {
 
           <FilterSearch
             anchorEl={anchorEl}
+            onClose={handleCloseFilterSearch}
             schemaAll={schemaAll}
             setAnchorEl={setAnchorEl}
             setShowAllSchemas={setShowAllSchemas}