Conversation
|
@dubielzyk-expensify @aimane-chnaif One of you needs to copy/paste the Reviewer Checklist from here into a new comment on this PR and complete it. If you have the K2 extension, you can simply click: [this button] |
|
Many of the changes are renaming. |
There was a problem hiding this comment.
💡 Codex Review
Here are some automated review suggestions for this pull request.
Reviewed commit: 65d7690e5f
ℹ️ About Codex in GitHub
Codex has been enabled to automatically review pull requests in this repo. Reviews are triggered when you
- Open a pull request for review
- Mark a draft as ready
- Comment "@codex review".
If Codex has suggestions, it will comment; otherwise it will react with 👍.
When you sign up for Codex through ChatGPT, Codex can also answer questions or update the PR, like "@codex address that feedback".
src/components/Search/SearchPageHeader/SearchTypeMenuNarrow.tsx
Outdated
Show resolved
Hide resolved
|
Lint is unrelated |
Codecov Report❌ Looks like you've decreased code coverage for some files. Please write tests to increase, or at least maintain, the existing level of code coverage. See our documentation here for how to interpret this table.
|
|
Yeah, I think that derisks this PR from getting even bigger and considering shipping release 1 when it's production ready after a second PR to cover:
|
Done, made it so the revamp is applied for both dev and staging. |
|
@bernhardoj we discussed this internally and we want to take a different approach with this PR to minimize the chances for regressions and problems replicating changes from old to new components down the line. Can you please update this PR to:
This way, this because a setup PR for the later PR. We reduce both the scope and the amount of changes here and the follow up PR will be responsible for bringing the UI changes to Search, without the need for a beta or the old/new component split. It's ok for these new components to be unused in the code. Just add a comment to them saying something like |
|
Commented in Slack, but I'm totally with you Tom. I think we should also
|
|
Done. I still keep the renaming and other minor things in this PR. |
🤖 Code ReviewOverall this is a well-structured setup PR that scaffolds the new search actions bar components without wiring them to the UI yet. The renames, translations, and new type definitions are clean. A few items to address: Issues1. 2. 3. 4. File/function name mismatch in hooks
The file names should match the exported function names (either all singular or all plural). 5. 6. Missing Minor / Non-blocking
Otherwise the component architecture, the |
There was a problem hiding this comment.
💡 Codex Review
Here are some automated review suggestions for this pull request.
Reviewed commit: 5700da2207
ℹ️ About Codex in GitHub
Codex has been enabled to automatically review pull requests in this repo. Reviews are triggered when you
- Open a pull request for review
- Mark a draft as ready
- Comment "@codex review".
If Codex has suggestions, it will comment; otherwise it will react with 👍.
When you sign up for Codex through ChatGPT, Codex can also answer questions or update the PR, like "@codex address that feedback".
| const queryString = (() => { | ||
| const {view, groupBy, sortBy, sortOrder, limit} = getCurrentSearchQueryJSON() ?? {}; | ||
| return buildFilterQueryWithSortDefaults(searchAdvancedFiltersForm, {view, groupBy}, {sortBy, sortOrder, limit}) ?? ''; | ||
| })(); | ||
| const queryJSON = buildSearchQueryJSON(queryString || buildCannedSearchQuery()); |
There was a problem hiding this comment.
Derive the save query from the live search state
If SearchSavePage is opened after a refresh/deep link, or any time SEARCH_ADVANCED_FILTERS_FORM is stale, this code rebuilds queryJSON from the cached form instead of the active search route. Unlike useSearchFiltersBar() (src/components/Search/SearchPageHeader/useSearchFiltersBar.tsx:123-124), this page never calls useFilterFormValues()/useSearchFilterSync(), so saveSearch() and applyFiltersAndNavigate() can silently save or reopen the wrong query (often an older search or the canned default).
Useful? React with 👍 / 👎.
| const calculatePopoverPositionAndToggleOverlay = useCallback(() => { | ||
| calculatePopoverPosition(anchorRef, ANCHOR_ORIGIN).then((pos) => { | ||
| setPopoverTriggerPosition({...pos, vertical: pos.vertical + PADDING_MODAL}); | ||
| setPopoverTriggerPosition({...pos, vertical: pos.vertical}); |
There was a problem hiding this comment.
Let's not change it in this PR. Please revert these changes.
| return ''; | ||
| } | ||
|
|
||
| const feedsForDisplay = getCardFeedsForDisplay(allFeeds, personalAndWorkspaceCards, translate, feedKeysWithCards); |
There was a problem hiding this comment.
App/src/hooks/useAutocompleteSuggestions.ts
Lines 362 to 365 in d05d2a0
Should this comment apply here too?
There was a problem hiding this comment.
| handleSearch: (value: string) => void; | ||
| }; | ||
| // NOTE: This is intentionally unused for now. It will be wired up in https://github.com/Expensify/App/issues/84876 | ||
| function SearchPageInputNarrow({queryJSON, searchRouterListVisible, hideSearchRouterList, onSearchRouterFocus, handleSearch}: SearchPageInputNarrowProps) { |
There was a problem hiding this comment.
Pretty much overlap with SearchPageInputWide. Can we extract same logic to avoid code duplication?
There was a problem hiding this comment.
Hmm, you're right, but the component return is quite different. I think we can extract this into a hook.
There was a problem hiding this comment.
Yea, let's extract this into a hook
|
Should this PR be [No QA] as new pages are not visible yet? |
@MelvinBot perf tests failing very often. Can you investigate this and implement fix in separate PR? |
🔍 Perf Test Flakiness InvestigationSummary: The Root Cause: The Evidence: The exact same failure ( Recommended Fix: Change - COUNT_DEVIATION: 0
+ COUNT_DEVIATION: 1Blocker: I was unable to push this fix as a separate PR because the GitHub PAT lacks the |
|
This should prob be no QA yes |
Reviewer Checklist
Screenshots/VideosAndroid: HybridAppAndroid: mWeb ChromeiOS: HybridAppios.moviOS: mWeb SafariMacOS: Chrome / Safariweb.mov |
|
There's typescript error. And please merge main. |
| const calculatePopoverPositionAndToggleOverlay = useCallback(() => { | ||
| calculatePopoverPosition(anchorRef, ANCHOR_ORIGIN).then((pos) => { | ||
| setPopoverTriggerPosition({...pos, vertical: pos.vertical + PADDING_MODAL}); | ||
| setPopoverTriggerPosition({...pos, vertical: pos.vertical}); |
There was a problem hiding this comment.
Let's not change it in this PR. Please revert these changes.
| handleSearch: (value: string) => void; | ||
| }; | ||
| // NOTE: This is intentionally unused for now. It will be wired up in https://github.com/Expensify/App/issues/84876 | ||
| function SearchPageInputNarrow({queryJSON, searchRouterListVisible, hideSearchRouterList, onSearchRouterFocus, handleSearch}: SearchPageInputNarrowProps) { |
There was a problem hiding this comment.
Yea, let's extract this into a hook
| import CONST from '@src/CONST'; | ||
| import ROUTES from '@src/ROUTES'; | ||
|
|
||
| function SearchSaveButton() { |
There was a problem hiding this comment.
This component seems unnecessary. It's just a wrapper around Button and called in two places. We could just pass the props from the parent components.
| <Stack.Screen | ||
| name={SCREENS.RIGHT_MODAL.SEARCH_SAVE} | ||
| component={SearchSavePage} | ||
| /> |
There was a problem hiding this comment.
Why are we still adding this screen in this PR? We shouldn't be changing the UI in this PR.
| SCREENS.MONEY_REQUEST.SPLIT_EXPENSE_SEARCH, | ||
| SCREENS.RIGHT_MODAL.SEARCH_MONEY_REQUEST_REPORT, | ||
| SCREENS.RIGHT_MODAL.SEARCH_REPORT, | ||
| SCREENS.RIGHT_MODAL.SEARCH_SAVE, |
There was a problem hiding this comment.
Same here and for other navigation related changes


Explanation of Change
Revamp the search page actions bar. (This PR only adds the necessary component without being shown yet)
Fixed Issues
$ #84876
PROPOSAL:
Tests
Same as QA Steps
Offline tests
Same as QA Steps
QA Steps
PR Author Checklist
### Fixed Issuessection aboveTestssectionOffline stepssectionQA stepssectiontoggleReportand 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
Android: mWeb Chrome
iOS: Native
iOS: mWeb Safari
MacOS: Chrome / Safari
web.mp4
web.search.mp4