diff --git a/frontend/app/components/shared/Filters/FilterModal/FilterModal.module.css b/frontend/app/components/shared/Filters/FilterModal/FilterModal.module.css index 077a57370..c95cef973 100644 --- a/frontend/app/components/shared/Filters/FilterModal/FilterModal.module.css +++ b/frontend/app/components/shared/Filters/FilterModal/FilterModal.module.css @@ -2,8 +2,6 @@ border-radius: .5rem; border: solid thin $gray-light; padding: 20px; - overflow: hidden; - overflow-y: auto; box-shadow: 0 2px 2px 0 $gray-light; } .optionItem { diff --git a/frontend/app/components/shared/Filters/FilterModal/FilterModal.tsx b/frontend/app/components/shared/Filters/FilterModal/FilterModal.tsx index 490126b36..28b5eeba8 100644 --- a/frontend/app/components/shared/Filters/FilterModal/FilterModal.tsx +++ b/frontend/app/components/shared/Filters/FilterModal/FilterModal.tsx @@ -7,11 +7,14 @@ import { CircleAlert, Clock2, Code, - ContactRound, CornerDownRight, + ContactRound, + CornerDownRight, Cpu, Earth, - FileStack, Layers, - MapPin, Megaphone, + FileStack, + Layers, + MapPin, + Megaphone, MemoryStick, MonitorSmartphone, Navigation, @@ -25,11 +28,13 @@ import { Timer, VenetianMask, Workflow, - Flag + Flag, + ChevronRight, } from 'lucide-react'; import React from 'react'; import { Icon, Loader } from 'UI'; import AnimatedSVG, { ICONS } from 'Shared/AnimatedSVG/AnimatedSVG'; +import { Input } from 'antd'; import { FilterKey } from 'Types/filter/filterType'; import stl from './FilterModal.module.css'; @@ -69,7 +74,7 @@ const IconMap = { [FilterKey.UTM_SOURCE]: , [FilterKey.UTM_MEDIUM]: , [FilterKey.UTM_CAMPAIGN]: , - [FilterKey.FEATURE_FLAG]: + [FilterKey.FEATURE_FLAG]: , }; function filterJson( @@ -103,7 +108,7 @@ export const getMatchingEntries = ( if (lowerCaseQuery.length === 0) return { matchingCategories: Object.keys(filters), - matchingFilters: filters + matchingFilters: filters, }; Object.keys(filters).forEach((name) => { @@ -141,19 +146,28 @@ function FilterModal(props: Props) { isLive, onFilterClick = () => null, isMainSearch = false, - searchQuery = '', excludeFilterKeys = [], allowedFilterKeys = [], isConditional, } = props; + const [searchQuery, setSearchQuery] = React.useState(''); + const [category, setCategory] = React.useState('ALL'); const { searchStore, searchStoreLive, projectsStore } = useStore(); const isMobile = projectsStore.active?.platform === 'ios'; // TODO - should be using mobile once the app is changed - const filters = isLive ? searchStoreLive.filterListLive : (isMobile ? searchStore.filterListMobile : searchStoreLive.filterList); + const filters = isLive + ? searchStoreLive.filterListLive + : isMobile + ? searchStore.filterListMobile + : searchStoreLive.filterList; const conditionalFilters = searchStore.filterListConditional; const mobileConditionalFilters = searchStore.filterListMobileConditional; const showSearchList = isMainSearch && searchQuery.length > 0; - const filterSearchList = isLive ? searchStoreLive.filterSearchList : searchStore.filterSearchList; - const fetchingFilterSearchList = isLive ? searchStoreLive.loadingFilterSearch : searchStore.loadingFilterSearch; + const filterSearchList = isLive + ? searchStoreLive.filterSearchList + : searchStore.filterSearchList; + const fetchingFilterSearchList = isLive + ? searchStoreLive.loadingFilterSearch + : searchStore.loadingFilterSearch; const onFilterSearchClick = (filter: any) => { const _filter = { ...filtersMap[filter.type] }; @@ -162,7 +176,9 @@ function FilterModal(props: Props) { }; const filterJsonObj = isConditional - ? isMobile ? mobileConditionalFilters : conditionalFilters + ? isMobile + ? mobileConditionalFilters + : conditionalFilters : filters; const { matchingCategories, matchingFilters } = getMatchingEntries( searchQuery, @@ -184,44 +200,95 @@ function FilterModal(props: Props) { return IconMap[filter.key]; } else return ; }; + + const displayedFilters = + category === 'ALL' + ? Object.entries(matchingFilters).flatMap(([category, filters]) => + filters.map((f: any) => ({ ...f, category })) + ) + : matchingFilters[category]; + return (
-
1 ? 'auto 200px' : 1 }} - > - {matchingCategories.map((key) => { - return ( + setSearchQuery(e.target.value)} + /> +
+
+ {matchingCategories.map((key) => (
-
- {key} -
-
- {matchingFilters[key] && - matchingFilters[key].map((filter: Record) => ( -
onFilterClick({ ...filter, value: [''] })} - > - {getNewIcon(filter)} - {filter.label} -
- ))} -
+ {key.toLowerCase()}
- ); - })} + ))} +
+
+ {displayedFilters.length + ? displayedFilters.map((filter: Record) => ( +
onFilterClick({ ...filter, value: [''] })} + > + {filter.category ?
+ {filter.category} + +
: null} +
+ {getNewIcon(filter)} + {filter.label} +
+
+ )) + : null} +
+ {/* 1 ? "auto 200px" : 1 }}*/} + {/*>*/} + {/* {matchingCategories.map((key) => {*/} + {/* return (*/} + {/* */} + {/*
*/} + {/* {key}*/} + {/*
*/} + {/*
*/} + {/* {matchingFilters[key] &&*/} + {/* matchingFilters[key].map((filter: Record) => (*/} + {/* onFilterClick({ ...filter, value: [''] })}*/} + {/* >*/} + {/* {getNewIcon(filter)}*/} + {/* {filter.label}*/} + {/*
*/} + {/* ))}*/} + {/*
*/} + {/*
*/} + {/* );*/} + {/* })}*/} + {/**/} {showSearchList && (
diff --git a/frontend/app/components/shared/Filters/FilterSelection/FilterSelection.tsx b/frontend/app/components/shared/Filters/FilterSelection/FilterSelection.tsx index d3eb42b2d..c7c2758fc 100644 --- a/frontend/app/components/shared/Filters/FilterSelection/FilterSelection.tsx +++ b/frontend/app/components/shared/Filters/FilterSelection/FilterSelection.tsx @@ -37,7 +37,7 @@ function FilterSelection(props: Props) { - setTimeout(function() { + setTimeout(function () { setShowModal(false); }, 200) } @@ -49,12 +49,19 @@ function FilterSelection(props: Props) { e.preventDefault(); setShowModal(true); }, - disabled: disabled + disabled: disabled, }) ) : (
setShowModal(true)} >
)} + {showModal && ( +
+ +
+ )} - {showModal && ( -
- -
- )}
); } diff --git a/frontend/app/components/shared/LiveSessionSearch/LiveSessionSearch.tsx b/frontend/app/components/shared/LiveSessionSearch/LiveSessionSearch.tsx index 9c291dbf0..f21b307c5 100644 --- a/frontend/app/components/shared/LiveSessionSearch/LiveSessionSearch.tsx +++ b/frontend/app/components/shared/LiveSessionSearch/LiveSessionSearch.tsx @@ -1,16 +1,12 @@ import React, { useEffect } from 'react'; import FilterList from 'Shared/Filters/FilterList'; -import FilterSelection from 'Shared/Filters/FilterSelection'; -import { Button } from 'UI'; import { observer } from 'mobx-react-lite'; import { useStore } from 'App/mstore'; function LiveSessionSearch() { - const { projectsStore, searchStoreLive, sessionStore } = useStore(); + const { projectsStore, searchStoreLive } = useStore(); const saveRequestPayloads = projectsStore.active?.saveRequestPayloads; const appliedFilter = searchStoreLive.instance; - const hasEvents = appliedFilter.filters.filter((i) => i.isEvent).length > 0; - const hasFilters = appliedFilter.filters.filter((i) => !i.isEvent).length > 0; useEffect(() => { void searchStoreLive.fetchSessions(); diff --git a/frontend/app/components/shared/SessionSearchField/AiSessionSearchField.tsx b/frontend/app/components/shared/SessionSearchField/AiSessionSearchField.tsx index 451657b3c..334035914 100644 --- a/frontend/app/components/shared/SessionSearchField/AiSessionSearchField.tsx +++ b/frontend/app/components/shared/SessionSearchField/AiSessionSearchField.tsx @@ -73,7 +73,6 @@ function SessionSearchField(props: Props) { {showModal && (