feat: global search filters ux enhancements (#1977)

juspay · Dec 27, 2024 · cde0b70 · cde0b70
1 parent 356e3a8
commit cde0b70
Show file tree

Hide file tree

Showing 3 changed files with 271 additions and 150 deletions.
diff --git a/src/screens/Analytics/GlobalSearch/GlobalSearchBar.res b/src/screens/Analytics/GlobalSearch/GlobalSearchBar.res
@@ -31,6 +31,7 @@ let make = () => {
   let {userHasAccess} = GroupACLHooks.useUserGroupACLHook()
   let isShowRemoteResults = globalSearch && userHasAccess(~groupAccess=OperationsView) === Access
   let mixpanelEvent = MixpanelHook.useSendEvent()
+  let inputRef = React.useRef(Nullable.null)
   let filtersEnabled = globalSearchFilters
 
   let redirectOnSelect = element => {
@@ -111,7 +112,11 @@ let make = () => {
   React.useEffect(_ => {
     let results = []
 
-    if searchText->isNonEmptyString && searchText->getSearchValidation {
+    if (
+      searchText->isNonEmptyString &&
+      searchText->getSearchValidation &&
+      !(searchText->validateQuery)
+    ) {
       setState(_ => Loading)
       let localResults: resultType = searchText->getLocalMatchedResults(hswitchTabs)
 
@@ -165,7 +170,7 @@ let make = () => {
   }
 
   React.useEffect(() => {
-    if userHasAccess(~groupAccess=AnalyticsView) === Access && filtersEnabled {
+    if userHasAccess(~groupAccess=AnalyticsView) === Access {
       getCategoryOptions()->ignore
     }
 
@@ -178,8 +183,7 @@ let make = () => {
   }
 
   let setGlobalSearchText = ReactDebounce.useDebounced(value => {
-    let text = filtersEnabled ? value : value->String.trim
-    setSearchText(_ => text)
+    setSearchText(_ => value)
   }, ~wait=500)
 
   let onFilterClicked = category => {
@@ -194,6 +198,8 @@ let make = () => {
       setLocalSearchText(_ => `${searchText} ${newFilter}:`)
       setFilterText(newFilter)
     }
+
+    revertFocus(~inputRef)
   }
 
   let onSuggestionClicked = option => {
@@ -207,6 +213,8 @@ let make = () => {
     let saparater = searchText->getEndChar == filterSeparator ? "" : filterSeparator
     setLocalSearchText(_ => `${key}${saparater}${option}`)
     setFilterText("")
+
+    revertFocus(~inputRef)
   }
 
   React.useEffect(() => {
@@ -227,14 +235,16 @@ let make = () => {
     </div>
   }
 
-  let viewType = getViewType(~state, ~searchResults, ~searchText, ~filtersEnabled)
+  let viewType = getViewType(~state, ~searchResults)
+  let categorySuggestions = {getCategorySuggestions(categorieSuggestionResponse)}
 
   <div className="w-max">
     <SearchBox openModalOnClickHandler />
     <RenderIf condition={showModal}>
       <ModalWrapper showModal setShowModal>
         <div className="w-full">
           <ModalSearchBox
+            inputRef
             leftIcon
             setShowModal
             setFilterText
@@ -253,26 +263,37 @@ let make = () => {
             onSuggestionClicked
           />
           {switch viewType {
-          | Load =>
-            <div className="mb-24">
-              <Loader />
-            </div>
-          | Results =>
+          | Results | Load | EmptyResult =>
             <SearchResultsComponent
-              searchResults searchText setShowModal selectedOption redirectOnSelect
-            />
-          | FiltersSugsestions =>
-            <FilterResultsComponent
-              categorySuggestions={getCategorySuggestions(categorieSuggestionResponse)}
-              activeFilter
+              searchResults
               searchText
+              setShowModal
+              selectedOption
+              redirectOnSelect
+              categorySuggestions
+              activeFilter
               setAllFilters
               selectedFilter
+              setSelectedFilter
               onFilterClicked
               onSuggestionClicked
-              setSelectedFilter
+              viewType
+              prefix
+              filtersEnabled
             />
-          | EmptyResult => <EmptyResult prefix searchText />
+          | FiltersSugsestions =>
+            <RenderIf condition={filtersEnabled}>
+              <FilterResultsComponent
+                categorySuggestions
+                activeFilter
+                searchText
+                setAllFilters
+                selectedFilter
+                onFilterClicked
+                onSuggestionClicked
+                setSelectedFilter
+              />
+            </RenderIf>
           }}
         </div>
       </ModalWrapper>