[$250] Approve button not displayed in the bulk action menu

[m-natarajan]

If you haven’t already, check out our contributing guidelines for onboarding and email contributors@expensify.com to request to join our Slack channel!

---

Version Number: 9.1.87-2
Reproducible in staging?: Y
Reproducible in production?: Y
If this was caught during regression testing, add the test name, ID and link from TestRail:
Email or phone of affected tester (no customers):
Logs: https://stackoverflow.com/c/expensify/questions/4856
Expensify/Expensify Issue URL:
Issue reported by: @trjExpensify
Slack conversation (hyperlinked to channel name): #Migrate

Action Performed:

1. Create two expenses with violations
2. Go to Reports > Reports
3. Bulk select the report > click X selected bulk action button
4. Observe no Approve button in the bulk select menu

Expected Result:

Approve should be shown in the bulk action menu.

Actual Result:

Approve not displayed in the bulk action menu.

Workaround:

Unknown

Platforms:

Select the officially supported platforms where the issue was reproduced:

• Android: App
• Android: mWeb Chrome
• iOS: App
• iOS: mWeb Safari
• iOS: mWeb Chrome
• Windows: Chrome
• MacOS: Chrome / Safari
• MacOS: Desktop

Platforms Tested:

On which of our officially supported platforms was this issue tested:

• Android: App
• Android: mWeb Chrome
• iOS: App
• iOS: mWeb Safari
• iOS: mWeb Chrome
• Windows: Chrome
• MacOS: Chrome / Safari
• MacOS: Desktop

Screenshots/Videos

Add any screenshot/video evidence

2025-07-30_13-56-40.mp4

Recording.1467.mp4

View all open jobs on GitHub

Upwork Automation - Do Not Edit

• Upwork Job URL: https://www.upwork.com/jobs/~021952767190990111694
• Upwork Job ID: 1952767190990111694
• Last Price Increase: 2025-08-05

Issue Owner

Current Issue Owner: @greg-schroeder

[melvin-bot]

Triggered auto assignment to @greg-schroeder (Bug), see https://stackoverflow.com/c/expensify/questions/14418 for more details. Please add this bug to a GH project, as outlined in the SO.

[abzokhattab]

Proposal

Please re-state the problem that we are trying to solve in this issue.

Approve button not displayed in the bulk action menu

What is the root cause of that problem?

In the violation‑handling block of getAction, we check for violations and return (VIEW or REVIEW) without ever checking if the user can approve. As a result, approval logic is never reached for reports with violations.

App/src/libs/SearchUIUtils.ts

Lines 951 to 957 in 0c84a19

	if ((isSubmitter || isApprover || isAdmin) && hasAnyViolations(report.reportID, allViolations, allReportTransactions)) {
	if (isSubmitter && !isApprover && !isAdmin && !canReview(report, allViolations, isIOUReportArchived || isChatReportArchived, policy, allReportTransactions)) {
	return CONST.SEARCH.ACTION_TYPES.VIEW;
	}
	return CONST.SEARCH.ACTION_TYPES.REVIEW;
	}
	// Submit/Approve/Pay can only be taken on transactions if the transaction is the only one on the report, otherwise `View` is the only option.

What changes do you think we should make in order to solve the problem?

we should add a condition for the approve, final conditions should be:

    if ((isSubmitter || isApprover || isAdmin) && hasAnyViolations(report.reportID, allViolations, allReportTransactions)) {
        if (canApproveIOU(report, policy, allReportTransactions) && isAllowedToApproveExpenseReportUtils(report, undefined, policy)) // optionally we can also check for "&& !hasOnlyPendingCardOrScanningTransactions && !hasOnlyHeldExpenses(report.reportID, allReportTransactions)"
{


            return CONST.SEARCH.ACTION_TYPES.APPROVE;
        }
        if (isSubmitter && !isApprover && !isAdmin && !canReview(report, allViolations, isIOUReportArchived || isChatReportArchived, policy, allReportTransactions)) {
            return CONST.SEARCH.ACTION_TYPES.VIEW;
        }
        return CONST.SEARCH.ACTION_TYPES.REVIEW;
    }

result:

What specific scenarios should we cover in automated tests to prevent reintroducing this issue in the future?

we should add a test case that covers the case where there are violations and the user is not able to approve in the SearchUIUtilsTest file

What alternative solutions did you explore? (Optional)

NA

[lorretheboy]

🚨 Edited by proposal-police: This proposal was edited at 2025-08-06 11:17:24 UTC.

Proposal

Please re-state the problem that we are trying to solve in this issue.

Approve button not displayed in the bulk action menu

What is the root cause of that problem?

Reports with violations were not showing the "Approve" action in bulk select menus because the canApproveIOU function used in SearchUIUtils.ts doesn't handle violations properly which returning VIEW/REVIEW for reports with violations

App/src/libs/SearchUIUtils.ts

Line 1004 in 0c84a19

return CONST.SEARCH.ACTION_TYPES.VIEW;

What changes do you think we should make in order to solve the problem?

Add reportAction property to TransactionListItemType that represents the action that can be taken at the report level

            reportAction: report ? getAction(data, allViolations, `${ONYXKEYS.COLLECTION.REPORT}${report.reportID}`, currentSearch) : CONST.SEARCH.ACTION_TYPES.VIEW,

App/src/libs/SearchUIUtils.ts

Lines 761 to 763 in f582419

	const transactionSection: TransactionListItemType = {
	action: getAction(data, allViolations, key, currentSearch),
	report,

Add an additional check in the getAction function in SearchUIUtils.ts that allows approval for expense reports that are processing if the user has appropriate approval permissions. By using this ways, it catches all processing reports that should be approvable, not just those with violations

We need to support one more param in getAction function to distinguish bulk selection or not isForBulkSelection = false

Add here

        // For individual transactions with violations, always show Review
        if (isTransaction) {
            return CONST.SEARCH.ACTION_TYPES.REVIEW;
        }

        // For reports with violations, check if user can approve the report
        const isAllowedToApproveExpenseReport = isAllowedToApproveExpenseReportUtils(report, undefined, policy);
        const hasOnlyPendingCardOrScanningTransactions = allReportTransactions.length > 0 && allReportTransactions.every(isPendingCardOrScanningTransaction);

        if (
            canApproveIOU(report, policy, allReportTransactions) &&
            isAllowedToApproveExpenseReport &&
            !hasOnlyPendingCardOrScanningTransactions &&
            !hasOnlyHeldExpenses(report.reportID, allReportTransactions)
        ) {
            return CONST.SEARCH.ACTION_TYPES.APPROVE;
        }

Updated SearchContext.tsx to use reportAction instead of action when creating selectedReports from individual transactions

.map(({reportID, reportAction = CONST.SEARCH.ACTION_TYPES.VIEW, amount: total = CONST.DEFAULT_NUMBER_ID, policyID}) => ({reportID, action: reportAction, total, policyID}));

App/src/components/Search/SearchContext.tsx

Line 86 in 6e39f50

.map(({reportID, action = CONST.SEARCH.ACTION_TYPES.VIEW, amount: total = CONST.DEFAULT_NUMBER_ID, policyID}) => ({reportID, action, total, policyID}));

App/src/components/Search/SearchContext.tsx

Line 93 in 6e39f50

.map(({reportID, action = CONST.SEARCH.ACTION_TYPES.VIEW, amount: total = CONST.DEFAULT_NUMBER_ID, policyID}) => ({reportID, action, total, policyID}));

App/src/components/Search/SearchContext.tsx

Line 99 in 6e39f50

.map(({reportID, action = CONST.SEARCH.ACTION_TYPES.VIEW, amount: total = CONST.DEFAULT_NUMBER_ID, policyID}) => ({reportID, action, total, policyID}));

What specific scenarios should we cover in automated tests to prevent reintroducing this issue in the future?

Update and add new test cases in SearchUIUtilsTest.ts

What alternative solutions did you explore? (Optional)

NA

Reminder: Please use plain English, be brief and avoid jargon. Feel free to use images, charts or pseudo-code if necessary. Do not post large multi-line diffs or write walls of text. Do not create PRs unless you have been hired for this job.

[bernhardoj]

Proposal

Please re-state the problem that we are trying to solve in this issue.

Approve doesn't show in bulk action.

What is the root cause of that problem?

The approve (or pay) option shows if all the selected report action is approve.

App/src/pages/Search/SearchPage.tsx

Lines 163 to 168 in 101e0c1

	const shouldShowApproveOption =
	!isOffline &&
	!isAnyTransactionOnHold &&
	(selectedReports.length
	? selectedReports.every((report) => report.action === CONST.SEARCH.ACTION_TYPES.APPROVE)
	: selectedTransactionsKeys.every((id) => selectedTransactions[id].action === CONST.SEARCH.ACTION_TYPES.APPROVE));

But in our case, the action is Review because it has violations.

App/src/libs/SearchUIUtils.ts

Lines 951 to 956 in 101e0c1

	if ((isSubmitter || isApprover || isAdmin) && hasAnyViolations(report.reportID, allViolations, allReportTransactions)) {
	if (isSubmitter && !isApprover && !isAdmin && !canReview(report, allViolations, isIOUReportArchived || isChatReportArchived, policy, allReportTransactions)) {
	return CONST.SEARCH.ACTION_TYPES.VIEW;
	}
	return CONST.SEARCH.ACTION_TYPES.REVIEW;
	}

What changes do you think we should make in order to solve the problem?

We can update getAction to return an array of actions. For cases, that only allows 1 action, we will still return early, for example

App/src/libs/SearchUIUtils.ts

Lines 900 to 906 in 101e0c1

	if (currentSearch === CONST.SEARCH.SEARCH_KEYS.EXPORT) {
	return CONST.SEARCH.ACTION_TYPES.EXPORT_TO_ACCOUNTING;
	}
	if (!isTransaction && !isReportEntry(key)) {
	return CONST.SEARCH.ACTION_TYPES.VIEW;
	}

if (currentSearch === CONST.SEARCH.SEARCH_KEYS.EXPORT) {
    return [CONST.SEARCH.ACTION_TYPES.EXPORT_TO_ACCOUNTING];
}

if (!isTransaction && !isReportEntry(key)) {
    return [CONST.SEARCH.ACTION_TYPES.VIEW];
}

Then, we will have a local allActions variable.

const allActions: SearchTransactionAction[] = [];

If there is violation, we add the action to the array.

if ((isSubmitter || isApprover || isAdmin) && hasAnyViolations(report.reportID, allViolations, allReportTransactions)) {
    if (isSubmitter && !isApprover && !isAdmin && !canReview(report, allViolations, isIOUReportArchived || isChatReportArchived, policy, allReportTransactions)) {
        allActions.push(CONST.SEARCH.ACTION_TYPES.VIEW);
    } else {
        allActions.push(CONST.SEARCH.ACTION_TYPES.REVIEW);
    }
}

If approve (or pay/submit) is available, we push it too.

if (
    canApproveIOU(report, policy, allReportTransactions) &&
    isAllowedToApproveExpenseReport &&
    !hasOnlyPendingCardOrScanningTransactions &&
    !hasOnlyHeldExpenses(report.reportID, allReportTransactions)
) {
    allActions.push(CONST.SEARCH.ACTION_TYPES.APPROVE);
}

Then return the array.

return allActions.length > 0 ? allActions : [CONST.SEARCH.ACTION_TYPES.VIEW];

Next, add the new array to the report map. We get the first item and set it as the "main" action.

App/src/libs/SearchUIUtils.ts

Lines 1159 to 1161 in 101e0c1

	reportIDToTransactions[reportKey] = {
	...reportItem,
	action: getAction(data, allViolations, key, currentSearch, actions),

const allActions = getAction(data, allViolations, key, currentSearch, actions);
reportIDToTransactions[reportKey] = {
    ...reportItem,
    action: allActions.at(0),
    allActions,

Next, in SearchContext, we need to map the allActions too.

App/src/components/Search/SearchContext.tsx

Lines 76 to 80 in 101e0c1

	if (data.length && data.every(isTransactionReportGroupListItemType)) {
	selectedReports = data
	.filter((item) => isMoneyRequestReport(item) && item.transactions.every(({keyForList}) => selectedTransactions[keyForList]?.isSelected))
	.map(({reportID, action = CONST.SEARCH.ACTION_TYPES.VIEW, total = CONST.DEFAULT_NUMBER_ID, policyID}) => ({reportID, action, total, policyID}));
	}

.map(({reportID, action = CONST.SEARCH.ACTION_TYPES.VIEW, total = CONST.DEFAULT_NUMBER_ID, policyID, allActions = [action]}) => ({reportID, action, total, policyID, allActions}));

Last, instead of checking the main action, we can check if allActions includes the approve action (or pay or submit)

App/src/pages/Search/SearchPage.tsx

Lines 163 to 168 in a86b485

	const shouldShowApproveOption =
	!isOffline &&
	!isAnyTransactionOnHold &&
	(selectedReports.length
	? selectedReports.every((report) => report.action === CONST.SEARCH.ACTION_TYPES.APPROVE)
	: selectedTransactionsKeys.every((id) => selectedTransactions[id].action === CONST.SEARCH.ACTION_TYPES.APPROVE));

? selectedReports.every((report) => report.allActions.includes(CONST.SEARCH.ACTION_TYPES.APPROVE))

we can use Set instead of Array

(We need the fix from #66993 too)

What specific scenarios should we cover in automated tests to prevent reintroducing this issue in the future?

First, we need to update the getAction test because it now returns an array. Next, we can add a new case where the item can have Review and Approve actions.

[melvin-bot]

Job added to Upwork: https://www.upwork.com/jobs/~021952767190990111694