Add dropdown button to empty report by sumo-slonik · Pull Request #64924 · Expensify/App

sumo-slonik · 2025-06-25T13:46:51Z

Explanation of Change

Fixed Issues

$ #64730
PROPOSAL:

Tests

Create a new report.
Check if a dropdown appears under the "Empty state" text.
Click it and check if there are options for "Add Expense" and "Add Unreported Expense."
Add an expense.

Verify that no errors appear in the JS console

Offline tests

Unnesesary

QA Steps

Same as test

Verify that no errors appear in the JS console

PR Author Checklist

Screenshots/Videos

Android: Native

Screen.Recording.2025-06-27.at.19.17.38.mov

Android: mWeb Chrome

android.web.1.mov

iOS: Native

ios.native.mov

iOS: mWeb Safari

web.ios.mov

MacOS: Chrome / Safari

web.mac.mov

MacOS: Desktop

desktop.mov

…t-empty-state

melvin-bot · 2025-06-27T17:18:39Z

@jjcoffee 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]

jjcoffee · 2025-06-28T15:41:01Z

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 that the composer does not automatically focus or open the keyboard on mobile unless explicitly intended. This includes checking that returning the app from the background does not unexpectedly open the keyboard.
I verified tests pass on all platforms & I tested again on:
- Android: HybridApp
- Android: mWeb Chrome
- iOS: HybridApp
- 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 there are no new alerts related to the canBeMissing param for useOnyx
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 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.ts 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.
For any bug fix or new feature in this PR, I verified that sufficient unit tests are included to prevent regressions in this flow.
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-app-2025-07-02_21.17.43.mp4

Android: mWeb Chrome

android-chrome-2025-07-02_21.22.45.mp4

iOS: HybridApp

iOS: mWeb Safari

ios-safari-2025-07-02_21.35.18.mp4

MacOS: Chrome / Safari

desktop-chrome-2025-07-02_20.37.03.mp4

MacOS: Desktop

desktop-app-2025-07-02_20.45.09.mp4

jjcoffee · 2025-06-28T15:46:17Z

Remove the primary action button Add expense from the report header and instead move it to the report empty state.

From the issue, it looks like the button in the header should also be removed, or am I missing some extra context?

mountiny · 2025-06-30T07:51:28Z

@jjcoffee @sumo-slonik can you please add screenshots to explain what exactly you mean? cc @flaviadefaria @trjExpensify @JmillsExpensify

sumo-slonik · 2025-06-30T07:59:56Z

@jjcoffee Yes, you're right, I'm removing it from the header now.

trjExpensify · 2025-06-30T08:42:54Z

👋 I think the dropdown button looks good, but I think the idea was to remove the "Add expense" primary action button in the header now in light of adding it there. I noticed it's still visible in the OP video:

Also just checking that it is in fact inside the More menu now too in the empty state?

sumo-slonik · 2025-06-30T15:22:59Z

I was busy today fixing a deploy blocker in navigation, I'll take care of this tomorrow.

…t-empty-state

sumo-slonik · 2025-07-01T10:54:34Z

@trjExpensify @jjcoffee It seems to me that everything is as it should be now:

Screen.Recording.2025-07-01.at.12.52.08.mov

trjExpensify · 2025-07-01T11:02:58Z

Yep!!

sumo-slonik · 2025-07-02T09:56:28Z

@jjcoffee Do you think you'll have time to go over it?

jjcoffee · 2025-07-02T11:41:34Z

@sumo-slonik Sure, I will get to it later today!

src/languages/es.ts

        moneyRequestReport: {
            emptyStateTitle: 'Este informe no tiene gastos.',
-            emptyStateSubtitle: 'Puedes añadir gastos a este informe usando el botón de arriba.',
+            emptyStateSubtitle: 'Puedes agregar gastos a este informe\\n usando el botón de abajo o la opción "Agregar gasto" en el menú Más de arriba.',


jjcoffee · 2025-07-02T18:35:53Z

src/libs/ReportPrimaryActionUtils.ts


    const isPayActionWithAllExpensesHeld = isPrimaryPayAction(report, policy, reportNameValuePairs, isChatReportArchived) && hasOnlyHeldExpenses(report?.reportID);

-    if (isAddExpenseAction(report, reportTransactions, isChatReportArchived)) {


We can remove the isAddExpenseAction function itself too, I think.

it is still used in function getReportPreviewAction()

jjcoffee · 2025-07-02T19:47:46Z

@sumo-slonik I get a crash whenever I open an expense report (even a non-empty one). Reproducible on main so it's not this PR, but I can't really test fully otherwise! Did you test with a HybridApp build?

ios-app-2025-07-02_21.47.07.mp4

sumo-slonik · 2025-07-03T14:26:56Z

I'm getting back to this and taking care of the comments.

sumo-slonik · 2025-07-04T12:27:47Z

@jjcoffee On main, I still can't create a report on android-native. I believe this issue is not related to my PR, especially since all the comments mentioned above have been addressed.
To test it, an ad-hoc build should probably be enough, as it seems to appear in dev builds (based on what I see in the issue).

jjcoffee · 2025-07-04T13:38:08Z

@sumo-slonik Okay, thanks for looking into it! I have to finish for today soon, so I think we can wait until Monday and hope the issue is resolved.

mountiny · 2025-07-04T17:12:04Z

@jjcoffee can you please also test on main to ensure its not specific to this PR? thanks!

@sumo-slonik can you please sync up with main? thanks!

…t-empty-state

mountiny · 2025-07-07T10:25:18Z

@jjcoffee all yours

jjcoffee · 2025-07-07T13:01:03Z

I can still repro the crash, but also on main, so maybe we should just proceed?

jjcoffee · 2025-07-07T13:45:29Z

For this, it feels a bit awkward to only scroll the empty view. I think it might make more sense to scroll the whole view, the same as what happens if you send a message on the report.

ios-safari-scroll-2025-07-07_15.44.38.mp4

jjcoffee · 2025-07-07T13:49:44Z

Reported the crash here. Looks like it's a known issue, see #65268.

sumo-slonik · 2025-07-08T07:52:06Z

For #64924 (comment), it feels a bit awkward to only scroll the empty view. I think it might make more sense to scroll the whole view, the same as what happens if you send a message on the report.

I think I can do it that way. The other solution felt more intuitive to me, since the empty screen appears in more than one scenario in the reports, so wrapping just that part in a ScrollView seemed less invasive. However, doing it at the level of the entire report will definitely be more consistent. I’ll take care of it today.

jjcoffee · 2025-07-08T07:54:47Z

Let me just get a gut check from @Expensify/design on this. Does it make sense to scroll the empty view separately from the list of (custom) report fields? I'm unsure if we do it elsewhere in the app, and my concern would be that if there are even more fields, we'd end up scrolling a tiny space where the empty view sits.

dubielzyk-expensify · 2025-07-08T08:15:09Z

My expectation would be that the whole view scroll like in the video attached in the comment. Would like a gut check from @shawnborton and @dannymcclain though.

jjcoffee · 2025-07-08T08:18:00Z

@sumo-slonik Do you think it's worth splitting this out into a separate issue? It's not anything introduced by this PR, other than that the empty view is slightly longer due to the button.

shawnborton · 2025-07-08T10:59:15Z

Totally agree with Jon there - it should behave like any other report where the space between the fixed top header and the fixed bottom composer is what scrolls.

dannymcclain · 2025-07-08T13:28:59Z

Agree with Shawn and Jon!

sumo-slonik · 2025-07-09T07:52:40Z

I was dealing with deployment blockers yesterday. I'm getting back to it now

sumo-slonik · 2025-07-09T08:27:45Z

@sumo-slonik Do you think it's worth splitting #64924 (comment) out into a separate issue? It's not anything introduced by this PR, other than that the empty view is slightly longer due to the button.

I don't think there's any reason to split it into separate PR. I'll do it today as part of this PR and let you know when it's ready.

sumo-slonik · 2025-07-09T09:38:04Z

@jjcoffee I think it's finally working as it should:

Screen.Recording.2025-07-09.at.11.13.57.mov

jjcoffee

LGTM!

mountiny · 2025-07-09T15:30:37Z

src/components/MoneyRequestReportView/MoneyRequestReportTransactionList.tsx

 type MoneyRequestReportTransactionListProps = {
    report: OnyxTypes.Report;

+    policy?: OnyxTypes.Policy;


mountiny · 2025-07-09T15:47:33Z

src/components/MoneyRequestReportView/SearchMoneyRequestReportEmptyState.tsx

+            value: CONST.REPORT.ADD_EXPENSE_OPTIONS.ADD_UNREPORTED_EXPENSE,
+            text: translate('iou.addUnreportedExpense'),
+            icon: Expensicons.ReceiptPlus,
+            onSelected: () => {


Should this be here too?

Suggested change

onSelected: () => {

onSelected: () => {

if (!reportId) {

return;

}

OSBotify · 2025-07-09T19:40:01Z

✋ 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-10T07:26:00Z

🚀 Deployed to staging by https://github.com/mountiny in version: 9.1.79-0 🚀

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

github-actions · 2025-07-11T17:38:03Z

🚀 Deployed to production by https://github.com/Julesssss in version: 9.1.79-11 🚀

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

sumo-slonik added 5 commits June 25, 2025 15:44

add dropdown button to empty report

a76a0a4

fix tsx

c95eeb1

add translations

a305fa6

Merge branch 'main' into feature/kuba-nowakowski/Update-the-new-repor…

bfaec24

…t-empty-state

fix translation

b35bd68

sumo-slonik marked this pull request as ready for review June 27, 2025 17:18

sumo-slonik requested a review from a team as a code owner June 27, 2025 17:18

melvin-bot bot requested review from jjcoffee and removed request for a team June 27, 2025 17:18

mountiny assigned sumo-slonik Jun 30, 2025

mountiny self-requested a review June 30, 2025 07:51

sumo-slonik added 2 commits July 1, 2025 11:29

Merge branch 'main' into feature/kuba-nowakowski/Update-the-new-repor…

937cbf3

…t-empty-state

fix empty report header

36301b6

jjcoffee reviewed Jul 2, 2025

View reviewed changes

This comment was marked as resolved.

Sign in to view

replace \\n => \n

1e7516b

Merge branch 'main' into feature/kuba-nowakowski/Update-the-new-repor…

5431df9

…t-empty-state

sumo-slonik added 2 commits July 9, 2025 11:15

change place of scrolling

dec8065

change place of scrolling

b902c45

jjcoffee approved these changes Jul 9, 2025

View reviewed changes

mountiny approved these changes Jul 9, 2025

View reviewed changes

mountiny merged commit 81ec9fc into Expensify:main Jul 9, 2025
19 checks passed

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

Deploy Checklist: New Expensify 2025-07-10 #65809

Closed

77 tasks

jponikarchuk mentioned this pull request Jul 10, 2025

[Due for payment 2025-10-07] [$50] Expense - Add expense button is present when Workflows are disabled or workspace is deleted #65830

Closed

8 tasks

BlameGPT mentioned this pull request Jul 10, 2025

[Due for payment 2025-08-05] [$250] Report - When workspace member adds expense to report, error is displayed #65870

Closed

16 tasks

mountiny mentioned this pull request Jul 10, 2025

[CP Staging] Revert "Add dropdown button to empty report" #65874

Merged

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

[Due for payment 2025-10-07] Update the new report empty state #64730

Closed


		const isPayActionWithAllExpensesHeld = isPrimaryPayAction(report, policy, reportNameValuePairs, isChatReportArchived) && hasOnlyHeldExpenses(report?.reportID);

		if (isAddExpenseAction(report, reportTransactions, isChatReportArchived)) {

Conversation

sumo-slonik commented Jun 25, 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!

melvin-bot bot commented Jun 27, 2025

Uh oh!

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

Uh oh!

Reviewer Checklist

Screenshots/Videos

Uh oh!

jjcoffee commented Jun 28, 2025

Uh oh!

mountiny commented Jun 30, 2025

Uh oh!

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

Uh oh!

Uh oh!

trjExpensify commented Jun 30, 2025

Uh oh!

sumo-slonik commented Jun 30, 2025

Uh oh!

sumo-slonik commented Jul 1, 2025

Uh oh!

trjExpensify commented Jul 1, 2025

Uh oh!

sumo-slonik commented Jul 2, 2025

Uh oh!

jjcoffee commented Jul 2, 2025

Uh oh!

This comment was marked as resolved.

Uh oh!

jjcoffee Jul 2, 2025

Choose a reason for hiding this comment

Uh oh!

sumo-slonik Jul 3, 2025

Choose a reason for hiding this comment

Uh oh!

This comment was marked as resolved.

jjcoffee commented Jul 2, 2025

Uh oh!

sumo-slonik commented Jul 3, 2025

Uh oh!

sumo-slonik commented Jul 4, 2025

Uh oh!

jjcoffee commented Jul 4, 2025

Uh oh!

mountiny commented Jul 4, 2025

Uh oh!

mountiny commented Jul 7, 2025

Uh oh!

jjcoffee commented Jul 7, 2025

Uh oh!

jjcoffee commented Jul 7, 2025

Uh oh!

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

Uh oh!

Uh oh!

sumo-slonik commented Jul 8, 2025

Uh oh!

jjcoffee commented Jul 8, 2025

Uh oh!

dubielzyk-expensify commented Jul 8, 2025

Uh oh!

jjcoffee commented Jul 8, 2025

Uh oh!

shawnborton commented Jul 8, 2025

Uh oh!

dannymcclain commented Jul 8, 2025

Uh oh!

sumo-slonik commented Jul 9, 2025

Uh oh!

sumo-slonik commented Jul 9, 2025

sumo-slonik commented Jun 25, 2025 •

edited

Loading

jjcoffee commented Jun 28, 2025 •

edited

Loading

sumo-slonik commented Jun 30, 2025 •

edited

Loading

jjcoffee commented Jul 7, 2025 •

edited

Loading

sumo-slonik commented Jul 9, 2025 •

edited

Loading