From 00a0b23f0e200181dfc4f781a1ff8303c5a6a178 Mon Sep 17 00:00:00 2001
From: Carlos Martins <cmartins@expensify.com>
Date: Fri, 23 Aug 2024 12:17:01 -0400
Subject: [PATCH 1/3] add filters button

---
 src/components/ButtonWithDropdownMenu/index.tsx |  1 +
 src/components/Search/SearchPageHeader.tsx      |  6 ++++++
 src/pages/Search/SearchStatusMenuNarrow.tsx     | 11 ++++++++---
 3 files changed, 15 insertions(+), 3 deletions(-)

diff --git a/src/components/ButtonWithDropdownMenu/index.tsx b/src/components/ButtonWithDropdownMenu/index.tsx
index 943d6dbb5c16..4320f9118f98 100644
--- a/src/components/ButtonWithDropdownMenu/index.tsx
+++ b/src/components/ButtonWithDropdownMenu/index.tsx
@@ -154,6 +154,7 @@ function ButtonWithDropdownMenu<IValueType>({
                     style={[styles.w100, style]}
                     isLoading={isLoading}
                     text={selectedItem.text}
+                    icon={selectedItem.icon}
                     onPress={(event) => onPress(event, options[0].value)}
                     large={isButtonSizeLarge}
                     medium={!isButtonSizeLarge}
diff --git a/src/components/Search/SearchPageHeader.tsx b/src/components/Search/SearchPageHeader.tsx
index bae08155c262..f6a07a0c62d0 100644
--- a/src/components/Search/SearchPageHeader.tsx
+++ b/src/components/Search/SearchPageHeader.tsx
@@ -2,6 +2,7 @@ import React, {useMemo} from 'react';
 import type {StyleProp, TextStyle} from 'react-native';
 import {View} from 'react-native';
 import {useOnyx} from 'react-native-onyx';
+import Button from '@components/Button';
 import ButtonWithDropdownMenu from '@components/ButtonWithDropdownMenu';
 import type {DropdownOption} from '@components/ButtonWithDropdownMenu/types';
 import Header from '@components/Header';
@@ -301,6 +302,11 @@ function SearchPageHeader({queryJSON, hash, onSelectDeleteOption, setOfflineModa
                     style={styles.ml2}
                 />
             )}
+            <Button
+                text={translate('search.filtersHeader')}
+                icon={Expensicons.Filters}
+                onPress={() => Navigation.navigate(ROUTES.SEARCH_ADVANCED_FILTERS)}
+            />
         </HeaderWrapper>
     );
 }
diff --git a/src/pages/Search/SearchStatusMenuNarrow.tsx b/src/pages/Search/SearchStatusMenuNarrow.tsx
index 8850b0fb2b0f..8960582de011 100644
--- a/src/pages/Search/SearchStatusMenuNarrow.tsx
+++ b/src/pages/Search/SearchStatusMenuNarrow.tsx
@@ -1,5 +1,6 @@
 import React, {useMemo, useRef, useState} from 'react';
 import {Animated, View} from 'react-native';
+import Button from '@components/Button';
 import Icon from '@components/Icon';
 import PopoverMenu from '@components/PopoverMenu';
 import PressableWithFeedback from '@components/Pressable/PressableWithFeedback';
@@ -10,6 +11,7 @@ import useThemeStyles from '@hooks/useThemeStyles';
 import useWindowDimensions from '@hooks/useWindowDimensions';
 import Navigation from '@libs/Navigation/Navigation';
 import * as Expensicons from '@src/components/Icon/Expensicons';
+import ROUTES from '@src/ROUTES';
 import type {SearchStatusMenuItem} from './SearchStatusMenu';
 
 type SearchStatusMenuNarrowProps = {
@@ -63,17 +65,16 @@ function SearchStatusMenuNarrow({statusMenuItems, activeItemIndex, title}: Searc
     const titleViewStyles = title ? {...styles.flex1, ...styles.justifyContentCenter} : {};
 
     return (
-        <View style={[styles.pb4, styles.flexRow, styles.alignItemsCenter, styles.justifyContentBetween]}>
+        <View style={[styles.pb4, styles.flexRow, styles.alignItemsCenter, styles.justifyContentBetween, styles.ph5, styles.gap2]}>
             <PressableWithFeedback
                 accessible
                 accessibilityLabel={popoverMenuItems[activeItemIndex]?.text ?? ''}
                 ref={buttonRef}
-                style={[styles.tabSelectorButton, styles.ph5]}
                 wrapperStyle={styles.flex1}
                 onPress={openMenu}
             >
                 {({hovered}) => (
-                    <Animated.View style={[styles.tabSelectorButton, styles.tabBackground(hovered, true, theme.border), styles.w100, styles.mh3]}>
+                    <Animated.View style={[styles.tabSelectorButton, styles.tabBackground(hovered, true, theme.border), styles.w100]}>
                         <View style={[styles.flexRow, styles.gap2, styles.alignItemsCenter, titleViewStyles]}>
                             <Icon
                                 src={menuIcon}
@@ -93,6 +94,10 @@ function SearchStatusMenuNarrow({statusMenuItems, activeItemIndex, title}: Searc
                     </Animated.View>
                 )}
             </PressableWithFeedback>
+            <Button
+                icon={Expensicons.Filters}
+                onPress={() => Navigation.navigate(ROUTES.SEARCH_ADVANCED_FILTERS)}
+            />
             <PopoverMenu
                 menuItems={popoverMenuItems}
                 isVisible={isPopoverVisible}

From 34146460e19d83172c1854aeaa9502ee23435299 Mon Sep 17 00:00:00 2001
From: Carlos Martins <cmartins@expensify.com>
Date: Fri, 23 Aug 2024 14:51:29 -0400
Subject: [PATCH 2/3] conditionally render text

---
 src/components/Button/index.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/components/Button/index.tsx b/src/components/Button/index.tsx
index 126c81961cee..e6ac2a9e051f 100644
--- a/src/components/Button/index.tsx
+++ b/src/components/Button/index.tsx
@@ -266,7 +266,7 @@ function Button(
                                 />
                             </View>
                         )}
-                        {textComponent}
+                        {!!text && textComponent}
                     </View>
                     {shouldShowRightIcon && (
                         <View style={[styles.justifyContentCenter, large ? styles.ml2 : styles.ml1, iconRightStyles]}>

From d9cd8117baacd1b9e74e2d349e6cab8751b97d11 Mon Sep 17 00:00:00 2001
From: Carlos Martins <cmartins@expensify.com>
Date: Fri, 23 Aug 2024 16:22:47 -0400
Subject: [PATCH 3/3] rm uneeded changes

---
 src/components/ButtonWithDropdownMenu/index.tsx | 1 -
 1 file changed, 1 deletion(-)

diff --git a/src/components/ButtonWithDropdownMenu/index.tsx b/src/components/ButtonWithDropdownMenu/index.tsx
index 4320f9118f98..943d6dbb5c16 100644
--- a/src/components/ButtonWithDropdownMenu/index.tsx
+++ b/src/components/ButtonWithDropdownMenu/index.tsx
@@ -154,7 +154,6 @@ function ButtonWithDropdownMenu<IValueType>({
                     style={[styles.w100, style]}
                     isLoading={isLoading}
                     text={selectedItem.text}
-                    icon={selectedItem.icon}
                     onPress={(event) => onPress(event, options[0].value)}
                     large={isButtonSizeLarge}
                     medium={!isButtonSizeLarge}