Simplified actions on report header by jnowakow · Pull Request #58084 · Expensify/App

jnowakow · 2025-03-10T11:27:45Z

Explanation of Change

UI part of: #57436 and #57438

Fixed Issues

$ #57439
$ #57441
$ #57440
$ #59210 (this PR also fixes this bug)
PROPOSAL: N/A

Tests

Verify that no errors appear in the JS console

Test cases:

Prerequisites: Workspace without accounting with approvals enabled, workspace with connected accounting system

Test case 1:

Create new expense report in workspace without accounting
Verify it has Submit as primary action and all secondary actions work
Sumit report
On approver account verify that primary action is Approve and all secondary actions work as expected
Approve report
Verify primary action is pay and all secondary actions work as expected
Pay the report
Verify there’s no primary action.

Test case 2:

Follow steps from Test case 1 but in workspace with connected accounting system
That after report is payed there is Export to [Accounting system] primary option.

Test case 3:

Create new expense report with single expense
Put that report on hold using secondary action
Verify that primary action is Unhold
Verify Unhold action works.

Test case 4:

Disable approvals in workspace
Create new expense report
Submit it
Verify that Pay is primary action for workspace admin

Offline tests

Perform any action.
Header should be faded to indicate that user is offline

QA Steps

Test cases:

Prerequisites: Workspace without accounting with approvals enabled, workspace with connected accounting system

Test case 1:

Create new expense report in workspace without accounting
Verify it has Submit as primary action and all secondary actions work
Sumit report
On approver account verify that primary action is Approve and all secondary actions work as expected
Approve report
Verify primary action is pay and all secondary actions work as expected
Pay the report
Verify there’s no primary action.

Test case 2:

Follow steps from Test case 1 but in workspace with connected accounting system
That after report is payed there is Export to [Accounting system] primary option.

Test case 3:

Create new expense report with single expense
Put that report on hold using secondary action
Verify that primary action is Unhold
Verify Unhold action works.

Test case 4:

Disable approvals in workspace
Create new expense report
Submit it
Verify that Pay is primary action for workspace admin

Verify that no errors appear in the JS console

PR Author Checklist

Screenshots/Videos

Android: Native

mobile.mov

Android: mWeb Chrome

android-web.mov

iOS: Native

mobile.mov

iOS: mWeb Safari

iosWe.mov

MacOS: Chrome / Safari

web.mov

MacOS: Desktop

desktop.mov

melvin-bot · 2025-03-10T11:28:15Z

@marcochavezf Please 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]

jnowakow · 2025-03-10T16:55:20Z

cc @luacmartins

…ied-report-actions-header-ui

src/components/MoneyReportHeader.tsx

…ied-report-actions-header-ui

src/libs/ReportPrimaryActionUtils.ts

github-actions · 2025-04-09T04:40:06Z

🚀 Deployed to staging by https://github.com/luacmartins in version: 9.1.25-0 🚀

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

IuliiaHerets · 2025-04-09T09:05:16Z

This PR is failing because of issue #59889

github-actions · 2025-04-10T00:55:56Z

🚀 Deployed to production by https://github.com/jasperhuangg in version: 9.1.25-4 🚀

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

tgolen · 2025-04-29T16:47:04Z

src/libs/ReportPreviewActionUtils.ts

+    return hasViolations && (isSubmitter || isApprover) && areWorkflowsEnabled;
+}
+
+function getReportPreviewAction(


@jnowakow FYI, there were already two different methods named getReportPreviewAction and you added a third one 🙈

Fact, but this one this one does something different. The other two refers to ReportAction entity and this one refers to action that user can undertake from report preview and we followed naming convention established in design doc - https://docs.google.com/document/d/1JZLr_5gX348cMZXNr6HUwi4QscOcDg3IY368FMAu3H4/edit?tab=t.0#bookmark=id.n099p6o4vamj

ikevin127 · 2025-05-08T04:28:04Z

src/libs/ReportPrimaryActionUtils.ts


-    if (isRemoveHoldAction(report, reportTransactions)) {
-        return CONST.REPORT.PRIMARY_ACTIONS.REMOVE_HOLD;
+    if (isMarkAsCashAction(report, reportTransactions, violations, policy)) {


From issue:

Q:

is this perhaps known that the Mark as cash button is missing with the new simplified action buttons?

A:

It is not. We do have a check for it here, but I think we need to bump the priority on it so it shows above submit.

leading to this issue being created:

[Due for payment 2025-05-14] Scan - After scanning completed, mark as cash button is not shown. #61019

which addressed the bump the priority on it so it shows above submit.

brunovjk · 2025-05-26T17:55:15Z

src/libs/ReportSecondaryActionUtils.ts

+    const isOneExpenseReport = reportTransactions.length === 1;
+    const transaction = reportTransactions.at(0);
+
+    if (!isOneExpenseReport || !transaction) {


Coming from this issue, we needed "to implement another way to verify that there is only one transaction."

ZhenjaHorbach · 2025-05-27T17:34:28Z

src/libs/ReportSecondaryActionUtils.ts

    const isOpenReport = isOpenReportUtils(report);
+    const isSubmitter = isCurrentUserSubmitter(report.reportID);
+
+    if (isOpenReport && isSubmitter) {


Came from this issue
We had issue that when report is unsubmitted, Hold option is only seen in expense preview and not report
Here is a fix

ishpaul777 · 2025-06-17T23:58:31Z

src/libs/ReportPreviewActionUtils.ts

+    return isExpense && isSubmitter && isOpen && isManualSubmitEnabled && !hasViolations;
+}
+
+function canApprove(report: Report, violations: OnyxCollection<TransactionViolation[]>, policy?: Policy, transactions?: Transaction[]) {


In canApprove logic, we don't have any logic to check if the request is still scanning, which caused this bug

rojiphil · 2025-07-10T12:51:42Z

src/libs/ReportPrimaryActionUtils.ts

+        return parentReport?.invoiceReceiver?.accountID === getCurrentUserAccountID();
+    }
+
+    return policy?.role === CONST.POLICY.ROLE.ADMIN;


We missed looking at the invoice receiver policy's role, which caused #64376

shubham1206agra · 2025-07-26T04:12:18Z

src/components/MoneyReportHeader.tsx


    const shouldShowBackButton = shouldDisplayBackButton || shouldUseNarrowLayout;

+    const isMoreContentShown = shouldShowNextStep || !!statusBarProps;


This condition does not account for medium sized screen, which caused #65419

ahmedGaber93 · 2025-09-23T20:25:03Z

src/components/MoneyReportHeader.tsx

+        // It's necessary to allow payment animation to finish before button is changed
+        if (isPaidAnimationRunning) {
+            return CONST.REPORT.PRIMARY_ACTIONS.PAY;
+        }


Coming from #68992, we add isApprovedAnimationRunning to the above condition to animate the "Approve" button since AnimatedSettlementButton is displayed base on the same condition

App/src/components/MoneyReportHeader.tsx

Lines 705 to 708 in c46f457

[CONST.REPORT.PRIMARY_ACTIONS.PAY]: (

<AnimatedSettlementButton

isPaidAnimationRunning={isPaidAnimationRunning}

isApprovedAnimationRunning={isApprovedAnimationRunning}

App/src/components/SettlementButton/AnimatedSettlementButton.tsx

Line 33 in 62e6c05

const isAnimationRunning = isPaidAnimationRunning || isApprovedAnimationRunning;

Simplified actions on report header

e1385cb

jnowakow requested a review from a team as a code owner March 10, 2025 11:27

jnowakow marked this pull request as draft March 10, 2025 11:27

melvin-bot bot requested review from marcochavezf and removed request for a team March 10, 2025 11:28

jnowakow added 2 commits March 10, 2025 16:43

Merge branch 'main' into jnowakow/simplified-report-actions-header-ui

79174fa

Correct display

659a350

luacmartins requested review from luacmartins and removed request for marcochavezf March 10, 2025 19:22

jnowakow added 9 commits March 11, 2025 10:05

Merge branch 'main' of github.com:Expensify/App into jnowakow/simplif…

4cacc2f

…ied-report-actions-header-ui

Remove options from details page and add actions to report header

bb6abaf

Do not alter existing translation

79a5efd

Merge branch 'main' of github.com:Expensify/App into jnowakow/simplif…

45e55fa

…ied-report-actions-header-ui

Merge branch 'main' of github.com:Expensify/App into jnowakow/simplif…

1372965

…ied-report-actions-header-ui

Fix linter

7256b28

Translation

9810fd2

Fix linter and prettier

e452ae5

Add delegate gaurd to unapprove action

96315d0

jnowakow commented Mar 12, 2025

View reviewed changes

src/components/MoneyReportHeader.tsx Show resolved Hide resolved

src/components/MoneyReportHeader.tsx Show resolved Hide resolved

src/components/MoneyReportHeader.tsx Show resolved Hide resolved

src/components/MoneyReportHeader.tsx Show resolved Hide resolved

jnowakow commented Mar 12, 2025

View reviewed changes

src/components/MoneyReportHeader.tsx Outdated Show resolved Hide resolved

jnowakow commented Mar 13, 2025

View reviewed changes

src/components/MoneyReportHeader.tsx Show resolved Hide resolved

jnowakow added 2 commits March 14, 2025 13:01

Merge branch 'main' of github.com:Expensify/App into jnowakow/simplif…

d1d32a5

…ied-report-actions-header-ui

Merge branch 'main' of github.com:Expensify/App into jnowakow/simplif…

8db6c58

…ied-report-actions-header-ui

jnowakow force-pushed the jnowakow/simplified-report-actions-header-ui branch from 67ca9f5 to 8db6c58 Compare March 17, 2025 11:06

jnowakow added 2 commits March 17, 2025 12:06

Merge branch 'main' into jnowakow/simplified-report-actions-header-ui

10658b0

Improve logic

b8e932b

jnowakow commented Mar 17, 2025

View reviewed changes

src/libs/ReportPrimaryActionUtils.ts Show resolved Hide resolved

jnowakow commented Mar 17, 2025

View reviewed changes

src/libs/ReportPrimaryActionUtils.ts Show resolved Hide resolved

IuliiaHerets mentioned this pull request Apr 9, 2025

[Due for payment 2025-04-18] Expense - Missing export button on the expense preview and expense report (primary option) #59889

Closed

8 tasks

grgia mentioned this pull request Apr 9, 2025

Expense - Change Workspace option available for submitted expense #59890

Closed

8 tasks

mountiny mentioned this pull request Apr 9, 2025

[Due for payment 2025-04-18] [Better Expense Report View] [$125] mweb - Expense - "Pay with Expensify" button extends out of screen #59883

Closed

8 tasks

jnowakow mentioned this pull request Apr 9, 2025

[Due for payment 2025-04-18] [$250] Approve button is present when expense report has no expense, empty green button is present #59880

Closed

8 tasks

inimaga mentioned this pull request Apr 9, 2025

[Due for payment 2025-04-18] Reports - System message when moving expense is not seen on expense on "Reports" section #59908

Closed

8 tasks

stitesExpensify mentioned this pull request Apr 9, 2025

[Due for payment 2025-04-18] Hold-In expense details page, in more section hold option is not shown. #59910

Closed

8 tasks

This was referenced Apr 9, 2025

[Due for payment 2025-04-18] RHN - More button is not animated, and the cursor is inactive while the context menu is opened #59917

Closed

[CP Staging] Revert "Simplified actions on report header" #59931

Merged

dangrous mentioned this pull request Apr 9, 2025

[Due for payment 2025-04-18] Expense - "Review" button is still displayed for admin and employee after expense is paid #59912

Closed

8 tasks

srikarparsi mentioned this pull request Apr 9, 2025

[Due for payment 2025-04-18] Expense - Missing cancel payment option while waiting for employee to add a bank account #59916

Closed

8 tasks

luacmartins mentioned this pull request Apr 9, 2025

[Simplified Actions] Add Primary and Secondary actions to report previews and header #59960

Closed

28 tasks

tgolen reviewed Apr 29, 2025

View reviewed changes

ikevin127 reviewed May 8, 2025

View reviewed changes

mananjadhav mentioned this pull request May 8, 2025

Remove old headers implementation #61378

Merged

51 tasks

Tony-MK mentioned this pull request May 20, 2025

[Due for payment 2025-06-05] [$250] Expense - Remove hold option appears when bulk select expenses when not all expenses are held #62403

Closed

8 tasks

brunovjk reviewed May 26, 2025

View reviewed changes

suneox mentioned this pull request May 27, 2025

[$500] [Due for payment 2025-05-22] [Simplified Actions] FOLLOWUP: Add Primary and Secondary actions to report previews and header #60852

Closed

14 tasks

ZhenjaHorbach reviewed May 27, 2025

View reviewed changes

ishpaul777 reviewed Jun 17, 2025

View reviewed changes

rojiphil reviewed Jul 10, 2025

View reviewed changes

shubham1206agra reviewed Jul 26, 2025

View reviewed changes

ahmedGaber93 reviewed Sep 23, 2025

View reviewed changes

twilight2294 mentioned this pull request Oct 27, 2025

[Due for payment 2025-11-28] [$250] Report with total $0 cannot be submitted #73581

Closed

16 tasks

MelvinBot mentioned this pull request Mar 16, 2026

[$250] Extra padding/margin to the right of "More" button when viewing expense on web/desktop #85407

Closed

7 tasks


		const shouldShowBackButton = shouldDisplayBackButton \|\| shouldUseNarrowLayout;

		const isMoreContentShown = shouldShowNextStep \|\| !!statusBarProps;

	[CONST.REPORT.PRIMARY_ACTIONS.PAY]: (
	<AnimatedSettlementButton
	isPaidAnimationRunning={isPaidAnimationRunning}
	isApprovedAnimationRunning={isApprovedAnimationRunning}

Conversation

jnowakow commented Mar 10, 2025 • edited by luacmartins 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!

melvin-bot bot commented Mar 10, 2025

Uh oh!

jnowakow commented Mar 10, 2025

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

github-actions bot commented Apr 9, 2025

Uh oh!

IuliiaHerets commented Apr 9, 2025

Uh oh!

github-actions bot commented Apr 10, 2025

Uh oh!

tgolen Apr 29, 2025

Choose a reason for hiding this comment

Uh oh!

jnowakow Apr 30, 2025

Choose a reason for hiding this comment

Uh oh!

ikevin127 May 8, 2025

Choose a reason for hiding this comment

Uh oh!

brunovjk May 26, 2025

Choose a reason for hiding this comment

Uh oh!

ZhenjaHorbach May 27, 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!

ishpaul777 Jun 17, 2025

Choose a reason for hiding this comment

Uh oh!

rojiphil Jul 10, 2025

Choose a reason for hiding this comment

Uh oh!

shubham1206agra Jul 26, 2025

Choose a reason for hiding this comment

Uh oh!

ahmedGaber93 Sep 23, 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!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

20 participants

jnowakow commented Mar 10, 2025 •

edited by luacmartins

Loading

ZhenjaHorbach May 27, 2025 •

edited

Loading

ahmedGaber93 Sep 23, 2025 •

edited

Loading