Replace popover menu with scrollable tabs on Reports screen#84036
Conversation
Rename the custom history action from SET_HISTORY_PARAM to PUSH_PARAMS to better reflect its purpose: pushing a route snapshot onto the history stack when params change, enabling back-navigation through param changes without extra routes. Simplify the history entries to store full route snapshots instead of string keys, and remove the unused getId prop from SearchFullscreenNavigator.
GCyganek
changed the title
|
🚧 @JmillsExpensify has triggered a test Expensify/App build. You can view the workflow run here. |
This comment has been minimized.
This comment has been minimized.
|
Tried to take this for a spin but having trouble with the adhocs on my phone. Going to reach out to Vit. |
|
Definitely feels a lot cleaner taking it for an early spin! Couple of initial notes:
|
|
Also, we need to talk about that large search input. It's hard for me to overlook it, and I think it's really getting in the way (for not a lot of gain, activity-wise). |
|
🚧 @mountiny has triggered a test Expensify/App build. You can view the workflow run here. |
|
🚧 @mountiny has triggered a test Expensify/App build. You can view the workflow run here. |
|
🧪🧪 Use the links below to test this adhoc build on Android, iOS, and Web. Happy testing! 🧪🧪
|
|
🧪🧪 Use the links below to test this adhoc build on Android, iOS, and Web. Happy testing! 🧪🧪
|
|
Ok, so I took the latest adhoc for a test run. I take back what I said about the search input. Like I don't necessarily love it, but I think that I can live with it. That "exposed" First, I land on Reports, see a 
Next, I go to Even the search results feel confusing (especially with no indication that I'm on a search results page). Now now top tabs are selected but I'm on `Type: Expense". Now the core functionality works great! I didn't experience any issues. And this does improve on what we have. So I think the decision ahead of us is whether we go with this now, or if we wait for some of @dubielzyk-expensify's upcoming filter changes first. After all, in those discussions we've discussed several times not showing the |
Good catch, will fix that! Edit: Fixed
Will something like this work? This is selected, hovered and inactive state (EDIT: added): 
|
|
Looks like there are conflicts. Also, can we please make sure we create the GH issue here and link it in the code. |
|
I asked navigation team to check the conflicts to make sure I don't break anything while resolving them, should be fixed soon |
|
I am on it, but conflicts are not trivial 😄 I will continue tomorrow. |
|
@GCyganek, conflicts resolved, but please test once again. @JakubKorytko, please take a look and help with tests, since the changes from the merge conflicts are related to your PR and you are familiar with this logic. Thanks! 🙇 |
|
Forward history broken 😿 We had this error on the original PR and it was fixed (as you can see on staging/prod) but it's back in this PR. Screen.Recording.2026-03-18.at.15.32.34.mov |
|
@JakubKorytko Okay, so I've been banging my head against the wall for a while, trying to understand the difference between the main branch and this one, to see what is broken, and... The problem exists in the staging. It's never been solved. It's not deterministic (at least with given repro steps), so it's hard to spot, but it's there. It's not something introduced by this PR. I would say let's merge it and take care of this problem in a different issue. Screen.Recording.2026-03-24.at.22.06.19.mov |
|
🚧 @puneetlath has triggered a test Expensify/App build. You can view the workflow run here. |
|
🧪🧪 Use the links below to test this adhoc build on Android, iOS, and Web. Happy testing! 🧪🧪
|
|
🚀 Deployed to staging by https://github.com/puneetlath in version: 9.3.44-0 🚀
Bundle Size Analysis (Sentry): |
|
@GCyganek Seems like this PR introduces a typecheck failure on main. 
cc: @puneetlath |
|
…rchPageTabSelector The buildUserReadableQueryString function's type was updated in PR #85975 to accept reportAttributes instead of conciergeReportID. SearchPageTabSelector was introduced in PR #84036 using the old property name, causing a type error on main. Co-authored-by: Aimane Chnaif <aimane-chnaif@users.noreply.github.com>
|
🚀 Deployed to staging by https://github.com/puneetlath in version: 9.3.47-0 🚀
Bundle Size Analysis (Sentry): |
|
🚀 Deployed to production by https://github.com/grgia in version: 9.3.48-2 🚀
|
There was a problem hiding this comment.
@adamgrzybowski @GCyganek Is this code being used anywhere right now?
There was a problem hiding this comment.
I guess it should've been used for addPushParamsRouterExtension and addRootHistoryRouterExtension imports in createSearchFullscreenNavigator and createRootStackNavigator instead of direct imports 😅
There was a problem hiding this comment.
Yeah I guess we can remove it
15 participants
Explanation of Change
Replacing popover menu with scrollable tabs row displayed above the search input on the Reports page
Fixed Issues
$ #82231
PROPOSAL: N/A
Tests
On narrow screen open Reports screen:
Search for somethinginputSearch for somethinginput with all search types that were in the removed popover menuOffline tests
QA Steps
Same as tests
PR Author Checklist
### Fixed Issuessection aboveTestssectionOffline stepssectionQA stepssectioncanBeMissingparam foruseOnyxtoggleReportand notonIconClick)src/languages/*files and using the translation methodSTYLE.md) were followedAvatar, I verified the components usingAvatarare working as expected)StyleUtils.getBackgroundAndBorderStyle(theme.componentBG))npm run compress-svg)Avataris modified, I verified thatAvataris working as expected in all cases)Designlabel and/or tagged@Expensify/designso the design team can review the changes.ScrollViewcomponent to make it scrollable when more elements are added to the page.mainbranch was merged into this PR after a review, I tested again and verified the outcome was still expected according to theTeststeps.Screenshots/Videos
Android: Native
Screen.Recording.2026-03-04.at.10.19.35.mov
Android: mWeb Chrome
iOS: Native
Screen.Recording.2026-03-04.at.10.34.10.mov
iOS: mWeb Safari
MacOS: Chrome / Safari
safari:
Screen.Recording.2026-03-04.at.10.35.10.mov
edge:
Screen.Recording.2026-03-04.at.10.18.57.mov
Screen.Recording.2026-03-06.at.10.36.23.mov