Search: Add `Feed` filter by s77rt · Pull Request #65159 · Expensify/App

s77rt · 2025-06-30T01:28:06Z

Explanation of Change

Fixed Issues

$ #64487
PROPOSAL:

Tests

Preconditions:

Be offline
Have a workspace with company cards
Have a workspace with Expensify cards

Go to Reports > Expenses
In top filters bar, click on Group by and select Card then click Apply
In top filters bar, verify that there is a Feed filter
Click on the Feed filter
Verify all your card feeds are listed
Verify that Expensify Card is listed (if you have any Expensify cards)
In search input type Feed:
Verify you get suggestions for all your card feeds except Expensify Card

Verify that no errors appear in the JS console

Offline tests

Same as Tests (NOT for QA)

QA Steps

Test 1:

Go to Reports > Expenses
In the top filters bar, click on Type filter and verify you can change the type.
In the top filters bar, click on the blue Filters button to open advanced filters RHP
Click on Type and verify you can change the type

Test 2:

Go to Reports > Expenses
In search input, type type:
Verify you get suggestions (e.g. type:chat, type:expense, etc)

Test 3:

Go to Reports > Expenses
In the top filters bar, click on the blue Filters button to open advanced filters RHP
Set Type filter to Expense
Set Status filter to Drafts
Set Billable filter to Yes
Verify a Save search button is displayed
Click on `Save search
Verify a new item is added in LHN under Saved section

Test 4:

Go to Reports > Reports
Verify that the search input includes group-by:reports
In the top filters bar, click on Type filter and change the type to Chat
Verify that the search input not longer includes group-by:reports

Verify that no errors appear in the JS console

PR Author Checklist

Screenshots/Videos

Android: Native

Android: mWeb Chrome

iOS: Native

Screen.Recording.2025-07-02.at.11.27.44.PM.mov

iOS: mWeb Safari

MacOS: Chrome / Safari

Screen.Recording.2025-07-02.at.10.34.38.PM.mov

MacOS: Desktop

s77rt · 2025-06-30T20:18:09Z

src/components/Search/types.ts

    | ValueOf<typeof CONST.SEARCH.SYNTAX_FILTER_KEYS>
    | typeof CONST.SEARCH.SYNTAX_ROOT_KEYS.TYPE
    | typeof CONST.SEARCH.SYNTAX_ROOT_KEYS.STATUS
-    | typeof CONST.SEARCH.SYNTAX_FILTER_KEYS.POLICY_ID


This is already included in ValueOf<typeof CONST.SEARCH.SYNTAX_FILTER_KEYS>

s77rt · 2025-07-01T18:31:41Z

src/components/Search/SearchAutocompleteList.tsx

+        // We don't want to show the "Expensify Card" feed in the autocomplete suggestion list
+        // Thus passing an empty object to the `allCards` parameter.
+        return Object.values(getCardFeedsForDisplay(allFeeds, {}));


We can also just filter the results but passing an empty object creates less work

luacmartins · 2025-07-02T20:10:15Z

src/libs/CardFeedUtils.ts

+        // s77rt check if the value that we should send to the backend is "Expensify Card" (same as displayed text)
+        // And if so update buildSubstitutionsMap to handle highlighting


Do we need to address this comment? Seems like something we wanna fix before merging this PR

This depends on the BE and I wanted to avoid raising concerns that are not worked on yet. I will circle back on each of the "s77rt" when removing the dev lock.

Currently we only add the highlights if the value is different than the displayed text. For Expensify Card I don't know what value we will be sending so the comment.

@s77rt Here's a scenario where I have 3 virtual Expensify Cards added (2 on workspace owner and 1 on a member) and 1 Direct feed Company Card (AMEX) and here's how Feed dropdown looks:

I'd expect to see 3 Expensify Card entries correct ? If so, is this related to the same issue you mentioned above ?

Currently we only add the highlights if the value is different than the displayed text. For Expensify Card I don't know what value we will be sending so the comment.

src/libs/SearchQueryUtils.ts

src/libs/SearchUIUtils.ts

luacmartins · 2025-07-02T20:11:27Z

src/libs/SearchUIUtils.ts

 }

+function getFeedOptions(allCardFeeds: OnyxCollection<OnyxTypes.CardFeeds>, allCards: OnyxTypes.CardList) {
+    // s77rt confirm if the feed value is just the feed key or if it should be prefixed with [fundID]_


Same as the highlights concern. This is BE related. Currently for Visa feed I'm sending value vcf but I see some logic (in Advanced Filters -> Card -> All Visa) the value is [fundID]_vcf

ikevin127 · 2025-07-02T22:56:48Z

src/components/Search/SearchPageHeader/SearchFiltersBar.tsx

+        // s77rt remove DEV lock
+        const shouldDisplayGroupByFilter = isDevelopment;
+        // s77rt remove DEV lock
+        const shouldDisplayFeedFilter = isDevelopment && feedOptions.length > 1;


feedOptions.length > 1 here is preventing the display of the Feed filter dropdown even though I do have 1 valid feed in the feedOptions array (AMEX).

If you have only one feed, the filter would be pointless as you will already get results from that feed

But you also get all other expenses which don't have anything to do with that specific feed (since we're not force-filtering by that 1 Feed by default), which if you have a lot of them, might pose an issue if the user only wants to see expenses related to that specific feed (card), right ?

Edit: I mean if that's what the design doc says, all good - I was just wondering since to me it looks like an issue.

Good point. I'm not really sure. Let's follow this on https://expensify.slack.com/archives/C0920G9GJ0N/p1751495500557969

But let's not block on that. Changing this condition can be done in a follow (if a change is required)

Cool, dropped a comment in that thread - starting work on the checklist.

Another thing related to the same topic here, while doing manual testing on the PR I noticed that if I select American Express feed and filter by it, currently the exact same expenses are showing (like the filter doesn't do anything), same if I try with a 2nd feed: Expensify Card.

I'm assuming this is due to BE missing the feed filtering logic, therefore not applying any filter and simply returning the exact same expenses for the type:expense status:all feed:"Expensify Card" filter, omitting the feed part.

I guess it's BE related. This will be tested again after removing dev lock

ikevin127 · 2025-07-03T04:39:19Z

Reviewer Checklist

I have verified the author checklist is complete (all boxes are checked off).
I verified the correct issue is linked in the ### Fixed Issues section above
I verified testing steps are clear and they cover the changes made in this PR
- I verified the steps for local testing are in the Tests section
- I verified the steps for Staging and/or Production testing are in the QA steps section
- I verified the steps cover any possible failure scenarios (i.e. verify an input displays the correct error message if the entered data is not correct)
- I turned off my network connection and tested it while offline to ensure it matches the expected behavior (i.e. verify the default avatar icon is displayed if app is offline)
I checked that screenshots or videos are included for tests on all platforms
I included screenshots or videos for tests on all platforms
I verified tests pass on all platforms & I tested again on:
- Android: Native
- Android: mWeb Chrome
- iOS: Native
- iOS: mWeb Safari
- MacOS: Chrome / Safari
- MacOS: Desktop
If there are any errors in the console that are unrelated to this PR, I either fixed them (preferred) or linked to where I reported them in Slack
I verified proper code patterns were followed (see Reviewing the code)
- I verified that any callback methods that were added or modified are named for what the method does and never what callback they handle (i.e. toggleReport and not onIconClick).
- I verified that the left part of a conditional rendering a React component is a boolean and NOT a string, e.g. myBool && <MyComponent />.
- I verified that comments were added to code that is not self explanatory
- I verified that any new or modified comments were clear, correct English, and explained "why" the code was doing something instead of only explaining "what" the code was doing.
- I verified any copy / text shown in the product is localized by adding it to src/languages/* files and using the translation method
- I verified all numbers, amounts, dates and phone numbers shown in the product are using the localization methods
- I verified any copy / text that was added to the app is grammatically correct in English. It adheres to proper capitalization guidelines (note: only the first word of header/labels should be capitalized), and is either coming verbatim from figma or has been approved by marketing (in order to get marketing approval, ask the Bug Zero team member to add the Waiting for copy label to the issue)
- I verified proper file naming conventions were followed for any new files or renamed files. All non-platform specific files are named after what they export and are not named "index.js". All platform-specific files are named for the platform the code supports as outlined in the README.
- I verified the JSDocs style guidelines (in STYLE.md) were followed
If a new code pattern is added I verified it was agreed to be used by multiple Expensify engineers
I verified that this PR follows the guidelines as stated in the Review Guidelines
I verified other components that can be impacted by these changes have been tested, and I retested again (i.e. if the PR modifies a shared library or component like Avatar, I verified the components using Avatar have been tested & I retested again)
I verified all code is DRY (the PR doesn't include any logic written more than once, with the exception of tests)
I verified any variables that can be defined as constants (ie. in CONST.js or at the top of the file that uses the constant) are defined as such
If a new component is created I verified that:
- A similar component doesn't exist in the codebase
- All props are defined accurately and each prop has a /** comment above it */
- The file is named correctly
- The component has a clear name that is non-ambiguous and the purpose of the component can be inferred from the name alone
- The only data being stored in the state is data necessary for rendering and nothing else
- For Class Components, any internal methods passed to components event handlers are bound to this properly so there are no scoping issues (i.e. for onClick={this.submit} the method this.submit should be bound to this in the constructor)
- Any internal methods bound to this are necessary to be bound (i.e. avoid this.submit = this.submit.bind(this); if this.submit is never passed to a component event handler like onClick)
- All JSX used for rendering exists in the render method
- The component has the minimum amount of code necessary for its purpose, and it is broken down into smaller components in order to separate concerns and functions
If any new file was added I verified that:
- The file has a description of what it does and/or why is needed at the top of the file if the code is not self explanatory
If a new CSS style is added I verified that:
- A similar style doesn't already exist
- The style can't be created with an existing StyleUtils function (i.e. StyleUtils.getBackgroundAndBorderStyle(theme.componentBG)
If the PR modifies code that runs when editing or sending messages, I tested and verified there is no unexpected behavior for all supported markdown - URLs, single line code, code blocks, quotes, headings, bold, strikethrough, and italic.
If the PR modifies a generic component, I tested and verified that those changes do not break usages of that component in the rest of the App (i.e. if a shared library or component like Avatar is modified, I verified that Avatar is working as expected in all cases)
If the PR modifies a component related to any of the existing Storybook stories, I tested and verified all stories for that component are still working as expected.
If the PR modifies a component or page that can be accessed by a direct deeplink, I verified that the code functions as expected when the deeplink is used - from a logged in and logged out account.
If the PR modifies the UI (e.g. new buttons, new UI components, changing the padding/spacing/sizing, moving components, etc) or modifies the form input styles:
- I verified that all the inputs inside a form are aligned with each other.
- I added Design label and/or tagged @Expensify/design so the design team can review the changes.
If a new page is added, I verified it's using the ScrollView component to make it scrollable when more elements are added to the page.
If the main branch was merged into this PR after a review, I tested again and verified the outcome was still expected according to the Test steps.
I have checked off every checkbox in the PR reviewer checklist, including those that don't apply to this PR.

Screenshots/Videos

Android: HybridApp

android-hybrid.mp4

Android: mWeb Chrome

android-mweb.mp4

iOS: HybridApp

ios-hybrid.mp4

iOS: mWeb Safari

ios-mweb.mp4

MacOS: Chrome / Safari

web.mov

MacOS: Desktop

desktop.mov

JS00001 · 2025-07-03T11:47:48Z

We change some logic with buildQueryString, and some other core logic, can we add some more generic QA steps too? I think regression testing will catch most issues, but maybe some key areas that were changed?

s77rt · 2025-07-03T14:28:01Z

Done! I have added some more tests

ikevin127 · 2025-07-03T22:24:54Z

Having some issues with running the HybridApps on both platforms, trying rebuild so I can finish-up testing on all devices.

ikevin127

Added Android: HybridApp proof, everything looks good. Still working on the iOS: HybridApp build, but I won't block the merge on that.

Good job on this PR 🚀

Edit: Added iOS: HybridApp proof as well, Reviewer Checklist Completed ✅

OSBotify · 2025-07-07T11:33:30Z

✋ This PR was not deployed to staging yet because QA is ongoing. It will be automatically deployed to staging after the next production release.

github-actions · 2025-07-08T21:34:51Z

🚀 Deployed to staging by https://github.com/JS00001 in version: 9.1.78-0 🚀

platform	result
🖥 desktop 🖥	success ✅
🕸 web 🕸	success ✅
🤖 android 🤖	success ✅
🍎 iOS 🍎	success ✅

github-actions · 2025-07-10T06:53:32Z

🚀 Deployed to production by https://github.com/mountiny in version: 9.1.78-4 🚀

platform	result
🖥 desktop 🖥	success ✅
🕸 web 🕸	success ✅
🤖 android 🤖	success ✅
🍎 iOS 🍎	failure ❌

ahmedGaber93 · 2025-10-13T10:37:58Z

src/types/form/SearchAdvancedFiltersForm.ts

        FILTER_KEYS.EXPORTED_AFTER,
        FILTER_KEYS.EXPORTED_BEFORE,
        FILTER_KEYS.EXPORTED_ON,
+        FILTER_KEYS.GROUP_BY,


Coming from #70894, based on this comment we remove GROUP_BY filter from trip to be matched with BE.

s77rt added 5 commits June 30, 2025 02:26

wip

ae7c288

Merge branch 'main' into feed-filter

4c8097d

update feed component

6d0c31f

remove duplicated condition

0bb2cf1

unify filter support logic

bda3e7b

s77rt commented Jun 30, 2025

View reviewed changes

s77rt added 10 commits June 30, 2025 21:25

move back SEARCH_TYPE_FILTERS_KEYS to AdvancedSearchFilters

17b3cad

remove feed filter from advanced filters page

db06836

show feed filter only if group by cards

e179fb6

merge main

fb20c84

lint

e7acd5f

added getCardFeedsForDisplay

9b64630

dont add cards suffix to card feeds for display

7b66e35

update feed display name in search input

7b3f123

lint

f464b06

add s77rt comment

98ad78c

JS00001 self-requested a review July 1, 2025 11:06

luacmartins self-requested a review July 1, 2025 13:12

s77rt added 8 commits July 1, 2025 14:40

update feed auto complete list

5c0eccc

lint

b6b60bc

update test

708d499

lint

5f65031

translate

a344f05

remove test comment

69fd2a2

lint

b5a7c85

hide "Expensify Card" feed suggestion

07a087d

s77rt commented Jul 1, 2025

View reviewed changes

s77rt added 3 commits July 1, 2025 19:50

show feed filter only if we have several feeds

1a6cc54

add s77rt comment

40d7136

remove test comment

030a4bd

s77rt added 2 commits July 2, 2025 21:05

Merge branch 'main' into feed-filter

e22a3a0

remove redundant type

0f6306a

luacmartins reviewed Jul 2, 2025

View reviewed changes

s77rt added 6 commits July 2, 2025 21:28

add unit tests for getCardFeedsForDisplay

06349b7

lint

6364237

disable naming-convention lint in tests

b2c1bf2

use text instead of translation in SingleSelectPopup

c9b4d7f

fix ts

f079eb9

lint

2808846

ikevin127 suggested changes Jul 2, 2025

View reviewed changes

merge main

bd0450e

merge main

bfc1756

ikevin127 approved these changes Jul 3, 2025

View reviewed changes

melvin-bot bot requested a review from JS00001 July 3, 2025 23:47

luacmartins approved these changes Jul 4, 2025

View reviewed changes

JS00001 approved these changes Jul 7, 2025

View reviewed changes

JS00001 merged commit 7e330a0 into Expensify:main Jul 7, 2025
21 checks passed

narefyev91 mentioned this pull request Jul 8, 2025

[Internal QA]: More Plaid import follow ups #64741

Merged

51 tasks

github-actions bot mentioned this pull request Jul 8, 2025

Deploy Checklist: New Expensify 2025-07-08 #65687

Closed

59 tasks

This was referenced Jul 9, 2025

[Due for payment 2025-07-22] Reports - Expensify card feed shows unknown ID in the search query #65714

Closed

[Due for payment 2025-08-01] [$250] Reports - App crashes when group-by:reports is manually added to type:chat search query #65716

Closed

melvin-bot bot mentioned this pull request Jul 10, 2025

[Due for payment 2025-07-17] [Suggested Search v2.2] [App] Create a new ‘Feed’ Exposed Filter #64487

Closed

ahmedGaber93 reviewed Oct 13, 2025

View reviewed changes

		// s77rt check if the value that we should send to the backend is "Expensify Card" (same as displayed text)
		// And if so update buildSubstitutionsMap to handle highlighting

Conversation

s77rt commented Jun 30, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Explanation of Change

Fixed Issues

Tests

Offline tests

QA Steps

PR Author Checklist

Screenshots/Videos

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

ikevin127 Jul 2, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

ikevin127 commented Jul 3, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Reviewer Checklist

Screenshots/Videos

Uh oh!

JS00001 commented Jul 3, 2025

Uh oh!

s77rt commented Jul 3, 2025

Uh oh!

ikevin127 commented Jul 3, 2025

Uh oh!

ikevin127 left a comment • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Uh oh!

OSBotify commented Jul 7, 2025

Uh oh!

github-actions bot commented Jul 8, 2025

Uh oh!

github-actions bot commented Jul 10, 2025

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

6 participants

s77rt commented Jun 30, 2025 •

edited

Loading

ikevin127 Jul 2, 2025 •

edited

Loading

ikevin127 commented Jul 3, 2025 •

edited

Loading

ikevin127 left a comment •

edited

Loading