Add bank account filter to Search by allgandalf · Pull Request #90791 · Expensify/App

allgandalf · 2026-05-15T16:12:34Z

Explanation of Change

Adds a new bankAccount filter on the expense Search advanced filters page so users with multiple settlement bank accounts can scope results to a single bank. Picker source is the user's bankAccountList, multi-select, displayed as ${bankName} xx${last4} to match the existing "Bank account" column on withdrawalID grouping. Filter row is gated to expense type and only renders when the user has at least one bank account. Backend half lands in Expensify/Auth#21649.

Fixed Issues

$ #88385
PROPOSAL: #88385 (comment)

Tests

Preconditions (one-time setup):

A workspace with ACH reimbursement enabled
Two validated withdrawal bank accounts on the workspace, created via ./script/clitools.sh generator:bankaccount (choose Withdrawal, validated, upgraded). Run twice
An employee on the policy with a validated deposit bank account so reimbursements can actually settle to them

Seed data:

In workspace settings, set the policy's preferred reimbursement to bank A
Generate reports paid via bank A: ./script/clitools.sh generator:report (answer Y to submit and approve)
Switch the policy's preferred reimbursement to bank B in workspace settings
Generate reports paid via bank B: ./script/clitools.sh generator:report
For each generated report, open the report in NewDot and click Pay via bank account in the report header so the reimbursement actually settles. without this step the filter has no row to match

Filter checks:

Sign in as the admin
Go to Search and confirm the type is Expenses
Tap the Filters button and confirm a new "Bank account" row appears in the advanced filters list
Open the row, confirm each bank account is shown as ${bankName} xx${last4} with the bank icon
Select bank A, save, confirm only the bank-A-paid expenses are returned and the filter chip renders on the search header with the same label
Open the filter again, multi-select bank A and bank B, save, confirm both sets are returned and the chip shows both labels comma-separated
Confirm the URL query has bankAccount:<id> (or <id1>,<id2>) and reloading the page rehydrates the selection
Type bank-account: in the autocomplete bar and confirm the user-friendly suggestions for each bank account appear, alphabetically sorted
Switch the Search type to Chat or Trip and confirm the "Bank account" row no longer shows in advanced filters
Sign in with an account that has no bank accounts and confirm the row does not show even on expense type

Verify that no errors appear in the JS console

Offline tests

The filter UI reads from Onyx bankAccountList so the picker, chip rendering, and autocomplete substitution all work offline once the data has been cached. Saving the filter queues a Search request that will be sent on reconnect. Steps:

Go offline before opening the picker, confirm the bank account list still renders
Save a filter selection while offline, confirm the chip renders and the query is queued
Reconnect, confirm the Search request fires with the queued bankAccount filter

QA Steps

Preconditions:

A workspace with ACH reimbursement enabled
Two validated withdrawal bank accounts on the workspace (admin)
An employee on the policy with a validated deposit bank account so reimbursements can settle to them, otherwise the filter has nothing to match
At least one expense report submitted, approved, and paid via bank A and another paid via bank B. Use the Pay via bank account button on the report header to actually settle each reimbursement

Steps:

Sign in as the admin
Go to Search and pick the Expenses type
Tap Filters and confirm a "Bank account" row is shown in the advanced filters list
Open the row, confirm each bank account is shown as ${bankName} xx${last4} with the bank icon
Select bank A, save, confirm only the bank-A-paid expenses are returned
Open the filter, multi-select bank A and bank B, save, confirm both sets are returned and the chip shows both labels comma-separated
Type bank-account: in the autocomplete bar and confirm the user-friendly suggestions appear, alphabetically sorted
Switch the Search type to Chat or Trip and confirm the "Bank account" row no longer shows
As an account with no bank accounts visible, confirm the row does not show even on expense type

Verify that no errors appear in the JS console

PR Author Checklist

Screen.Recording.2026-05-23.at.3.31.33.PM.mov

dubielzyk-expensify · 2026-05-25T00:22:03Z

Looks good from a design perspective 👍

JS00001 · 2026-05-25T11:26:42Z

@allgandalf lets do a C+ here. @Eskalifer1 would you mind reviewing?

Eskalifer1 · 2026-05-25T12:04:43Z

Sure, i will do it

JS00001 · 2026-05-25T14:27:37Z

@allgandalf we just merged #90029, so there'll be some conflicts here

JS00001

The bank filter renders the bank account id

allgandalf · 2026-05-25T15:18:01Z

@JS00001 good catch on the chip rendering the raw id. the advanced filters list row was using getFilterDisplayTitle which just stringifies the form value. switched to a new getFilterBankAccountDisplayTitle that maps each id through bankAccountList and getBankAccountSearchLabel. fixed in 8038d1a.

also merged main to clear the conflicts from #90029, see e423cd5. main renamed FILTER_LABEL_MAP to FILTER_VIEW_MAP with {labelKey, icon} shape, added the bank account entry to it with the Bank icon.

JS00001

Screen.Recording.2026-05-25.at.11.33.18.AM.mov

No longer works on mobile

JS00001 · 2026-05-25T15:34:46Z

  / policyName
  / withdrawalId
-  / bankAccount
+  / bankAccountColumn


should this be bankAccountColumn? Should it not be bankAccount?

Don't we want the bank account filter to support bank-account and bankAccount?

Eskalifer1 · 2026-05-26T11:02:30Z

Hi @allgandalf Is there any way to reproduce these changes using the Alberta dataset? It seems like I've met all the prerequisites, but when I try to search, nothing comes up.

Am I missing something?

2026-05-26.14.00.08.mov

Eskalifer1

In “Recent Searches,” the bank's ID is displayed instead of its name

2026-05-26.14.40.34.mov

Eskalifer1 · 2026-05-26T11:03:56Z

+type BankAccountSelectorProps = {
+    value: string[] | undefined;
+    onChange: (bankAccounts: string[]) => void;
+};
+
+type BankAccountItem = {
+    text: string;
+    value: string;
+    leftElement: React.JSX.Element;
+};


Let's add comments using /** comment above it */ pattern

Eskalifer1 · 2026-05-26T11:05:38Z

+    const selectedBankAccounts = bankAccountItems.filter((item) => value.includes(item.value));
+
+    return (
+        <MultiSelect


We need to get the footer from the props and pass it here as footer={footer}.

Without this, we'll run into a problem where the Confirm button won't appear on the page when viewed on mobile devices.

Eskalifer1 · 2026-05-26T11:06:39Z

+    const selectedBankAccounts = bankAccountItems.filter((item) => value.includes(item.value));
+
+    return (
+        <MultiSelect


We need to get the autoFocus from the props and pass it here as autoFocus={autoFocus}.

Without this, we'll run into a problem where the input field gains focus on a desktop computer, which shouldn't happen.

Eskalifer1 · 2026-05-26T11:07:26Z

+    const selectedBankAccounts = bankAccountItems.filter((item) => value.includes(item.value));
+
+    return (
+        <MultiSelect


We need to get the selectionListTextInputStyle from the props and pass it here as selectionListTextInputStyle={selectionListTextInputStyle}.

Without this, the styles won't display correctly on desktop

Eskalifer1 · 2026-05-26T11:07:44Z

+    const selectedBankAccounts = bankAccountItems.filter((item) => value.includes(item.value));
+
+    return (
+        <MultiSelect


Same for selectionListStyle

Eskalifer1 · 2026-05-26T11:08:10Z

+    const selectedBankAccounts = bankAccountItems.filter((item) => value.includes(item.value));
+
+    return (
+        <MultiSelect


Let's also add searchPlaceholder here

Eskalifer1 · 2026-05-26T11:11:04Z

            TAX_RATE: 'tax-rate',
            CARD_ID: 'card',
            FEED: 'feed',
+            BANK_ACCOUNT: 'bankAccount',


Why do we use camelCase here?

Eskalifer1 · 2026-05-26T11:24:25Z

+import ONYXKEYS from '@src/ONYXKEYS';
+import MultiSelect from './MultiSelect';
+
+type BankAccountSelectorProps = {


Let's add SearchFilterSelectionListProps & here

Eskalifer1 · 2026-05-26T12:07:12Z

-  var peg$e122 = peg$classExpectation([" ", "\t", "\n", "\r", "\xA0", ["a", "z"], ["A", "Z"]], false, false);
-  var peg$e123 = peg$classExpectation([","], false, false);
-  var peg$e124 = peg$classExpectation([" ", "\t", "\n", "\r", "\xA0", ","], false, false);
+  var peg$e29 = peg$literalExpectation("bankAccount", true);


I suspect we want to support both forms, just like with all the other search filters, so we need to support both bankAccount and bank-account.

I'm leaving a comment here, but this needs to be fixed everywhere, since all the other filters work the same way.

Eskalifer1 · 2026-05-26T12:43:17Z

+                {!isLoadingOnyxValue(searchAdvancedFiltersFormResult) && (
+                    <SearchMultipleSelectionPicker
+                        items={bankAccountItems}
+                        initiallySelectedItems={initiallySelectedItems}
+                        onSaveSelection={onSaveSelection}
+                        shouldShowTextInput={bankAccountItems.length >= CONST.STANDARD_LIST_ITEM_LIMIT}
+                    />
+                )}


I think we need to add a loading indicator here. After all, it might confuse the user if they go to the page and don't see anything at first—just a blank screen.

We can use a similar pattern to the one used in SearchFiltersCardPage

Eskalifer1

This may be outside the scope of this PR, However, when the user enters an ID, the dropdown menu displays the same bank that the user just entered by ID (bug 1). After the user presses Enter, the value in the search results is updated correctly, but the dropdown menu still shows only one bank—the one that was selected second (bug 2).

2026-05-26.16.00.53.mov

Eskalifer1

What should we do about the Bank Account column? As far as I understand, we're adding a completely new filter, but the Bank Account column already exists.

Eskalifer1 · 2026-05-26T13:25:10Z

@codex review

Eskalifer1 · 2026-05-26T13:25:23Z

Let's merge main

cc: @allgandalf

Eskalifer1 · 2026-05-26T13:31:28Z

@MelvinBot We're adding a new filter in this PR. Please review the implementation and let us know if there are any issues, edge cases, or improvements we should address.

Also, please look through the history of recently added filters and identify any regressions, missed updates, or recurring issues that happened during previous filter implementations. Then verify whether this PR could introduce any of the same problems, or if there are any related areas we may have overlooked this time.

chatgpt-codex-connector

💡 Codex Review

Here are some automated review suggestions for this pull request.

Reviewed commit: 94e8c346be

ℹ️ 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".

chatgpt-codex-connector · 2026-05-26T13:31:53Z

+bankAccount
+  = "bankAccount"i { return "bankAccount"; }


Accept kebab-case bank-account filter key

Extend the bankAccount key rule to also accept bank-account (like other multi-word filters) so typed queries and deep links using the standard kebab-case style work. As written, bank-account:42 is parsed as a generic keyword expression instead of a bank-account filter, so users who type the hyphenated form won’t actually apply this new filter.

Useful? React with 👍 / 👎.

allgandalf added 30 commits May 15, 2026 20:55

Add bankAccount SYNTAX_FILTER_KEYS entries

5e04a97

Add bank account RHP screen constant

3becfee

Add bankAccount filter key to form types

f5de9fd

Map bank account RHP screen to filter route

f185a84

Register bank account RHP in SEARCH_TO_RHP relations

c643533

Register bank account RHP screen in ModalStackNavigator

2e3e735

Add SearchFiltersBankAccountPage component

12f0383

Show bank account row in advanced filters list

3e63d3d

Gate bank account filter row to expense type with bank accounts

21b128c

Serialize bankAccount filter to query string

0795430

Parse bankAccount filter from jsonQuery into form values

4bed07b

Render bankAccount filter chip display value

d43728b

Add bankAccount to peggy baseRules

16fc975

Add bankAccount to search and autocomplete parser grammars

aaade06

Regenerate parser artifacts for bankAccount

4becdd8

Add bankAccount to autocomplete substitution map

1d25a34

Handle bankAccount in isValidAutocompleteRange

cef8778

Suggest bank accounts in autocomplete dropdown

36c6544

Add BankAccountSelector chip popover component

f3f6b5b

Map BankAccount filter to BankAccountSelector

3e970cb

Render bank account chip on search filter bar

5c261cf

Add bankAccount to FILTER_LABEL_MAP

2af656d

Add SearchQueryUtilsTest case for bankAccount filter

69a7541

Add SearchParserTest case for bankAccount filter

3e879ab

Add SearchAutocompleteParserTest case for bankAccount

e6bad71

Add SearchAutocompleteUtilsTest cases for bankAccount

09b634f

Add useAdvancedSearchFilters bank account gating tests

0f9ddc2

Fix bankName indexing types in SearchQueryUtils

5e1035a

Fix types in SearchFiltersBankAccountPage

f9ae792

Fix types in BankAccountSelector

6235fff

allgandalf added 9 commits May 23, 2026 15:42

Add getBankAccountSearchLabel util in BankAccountUtils

19f5107

Use getBankAccountSearchLabel in BankAccountSelector

65501dd

Use getBankAccountSearchLabel in useFilterBankAccountValue

3582237

Use getBankAccountSearchLabel in SearchFiltersBankAccountPage

872d111

Use getBankAccountSearchLabel in useAutocompleteSuggestions

704a2d9

Use getBankAccountSearchLabel in SearchQueryUtils getFilterDisplayValue

42403d1

Justify max-params disable on buildSubstitutionsMap

a78a13e

Justify max-params disable on buildFilterFormValuesFromQuery

2f8abec

Restore CONST import in BankAccountSelector after refactor

5a2f7b2

JS00001 requested changes May 25, 2026

View reviewed changes

Comment thread src/libs/SearchParser/baseRules.peggy Outdated

allgandalf added 3 commits May 25, 2026 20:26

Render bank account labels in advanced filter list row

8038d1a

Drop FilterKey suffix from peggy bankAccount rule

4eff095

Merge main into add-bank-account-search-filter

e423cd5

allgandalf requested a review from JS00001 May 25, 2026 15:23

Sync Mobile-Expensify submodule pointer with main

94e8c34

JS00001 requested changes May 25, 2026

View reviewed changes

Eskalifer1 reviewed May 26, 2026

View reviewed changes

chatgpt-codex-connector Bot reviewed May 26, 2026

View reviewed changes

Conversation

allgandalf commented May 15, 2026 • 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

Uh oh!

dubielzyk-expensify commented May 25, 2026

Uh oh!

JS00001 commented May 25, 2026

Uh oh!

Eskalifer1 commented May 25, 2026

Uh oh!

JS00001 commented May 25, 2026

Uh oh!

JS00001 left a comment

Choose a reason for hiding this comment

Uh oh!

Uh oh!

allgandalf commented May 25, 2026

Uh oh!

JS00001 left a comment

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!

Eskalifer1 commented May 26, 2026

Uh oh!

Eskalifer1 left a comment

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!

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!

Eskalifer1 left a comment

Choose a reason for hiding this comment

Uh oh!

Eskalifer1 left a comment

Choose a reason for hiding this comment

Uh oh!

Eskalifer1 commented May 26, 2026

Uh oh!

Eskalifer1 commented May 26, 2026

Uh oh!

Eskalifer1 commented May 26, 2026

Uh oh!

chatgpt-codex-connector Bot left a comment

Choose a reason for hiding this comment

💡 Codex Review

Uh oh!

chatgpt-codex-connector Bot May 26, 2026

Choose a reason for hiding this comment

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

allgandalf commented May 15, 2026 •

edited

Loading