[Report Creation UI] Create entrypoint for Report creation flow. #57847

SzymczakJ · 2025-03-05T11:57:36Z

Explanation of Change

Fixed Issues

$ #57651
$ #57653
PROPOSAL:

Tests

To test you need to have tableReportView beta enabled.

(Prerequisite: account with no paid workspace with chat enabled) Open FAB and click on 'Create report', make sure it opens up a redirect to Old Dot modal.
(Prerequisite: account with at least two paid workspaces with chat enabled) Open FAB and click on 'Create report'. Make sure it redirects to workspace selection screen.
Make sure that after selecting a workspace we are redirected to SearchMoneyRequestReportPage(it's empty at the moment).
Make sure that after clicking back button, user is redirected to whatever page he started Create report flow.
(Prerequisite: account with only one workspace with chat enabled) Make sure that the workspace selection page is skipped and report is created and user is redirected to SearchMoneyRequestReportPage.

Offline tests

QA Steps

Same as tests.

PR Author Checklist

Screenshots/Videos

Android: Native

android.mov

Android: mWeb Chrome

iOS: Native

ios.mov

iOS: mWeb Safari

mwebIos.mov

MacOS: Chrome / Safari

web.mov

MacOS: Desktop

web.mov

src/libs/Permissions.ts

src/pages/NewReportWorkspaceSelectionPage.tsx

melvin-bot · 2025-03-07T11:21:01Z

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

luacmartins · 2025-03-07T11:45:37Z

@DylanDylann let's prioritize reviewing this PR when you're online since this is a critical one

shawnborton · 2025-03-07T13:22:11Z

I think the RHP is temporary, right? Either way, we can probably kill the second "Create report" here since the RHP header says it clearly:

DylanDylann · 2025-03-07T14:10:57Z

I will submit my review by end of day today. If any unexpected delays occur, I guarantee completion by Monday.

SzymczakJ · 2025-03-07T15:12:00Z

kill the second "Create report" here since the RHP header says it clearly

Sorry I just applied wrong translation path, when cleaning up the code, this will be "Choose a workspace for this report." as Tom suggested here https://swmansion.slack.com/archives/C08ERETRDBK/p1741008093144109?thread_ts=1740954704.217869&cid=C08ERETRDBK

trjExpensify · 2025-03-07T16:49:09Z

@SzymczakJ in the video from the OP, does that account not have a default workspace selected?

src/libs/API/parameters/CreateAppReportParams.ts

mountiny · 2025-03-07T21:29:33Z

src/libs/actions/Report.ts

+        optimisticDataValue.ownerAccountID = accountID;
+    }
+
+    const optimisticData: OnyxUpdate[] = [


there should be optimistic report preview too cc @trjExpensify

FYI I added optimistic report preview.

src/pages/home/sidebar/FloatingActionButtonAndPopover.tsx

DylanDylann · 2025-03-08T12:33:52Z

BUG: "owes $0.00" displays on the report header

src/pages/home/sidebar/FloatingActionButtonAndPopover.tsx

src/pages/NewReportWorkspaceSelectionPage.tsx

DylanDylann · 2025-03-08T12:34:31Z

src/libs/actions/Report.ts

+
+    const {stateNum, statusNum} = getExpenseReportStateAndStatus(policy);
+
+    const optimisticDataValue: OptimisticNewReport = {


This action follows offline pattern B, so I think we need to add pending action to the optimistic report

DylanDylann · 2025-03-08T12:43:35Z

src/libs/actions/Report.ts

+    API.write(
+        WRITE_COMMANDS.CREATE_APP_REPORT,
+        {reportName, type: CONST.REPORT.TYPE.EXPENSE, policyID, reportID: optimisticReportID, reportActionID},
+        {optimisticData, successData: [], failureData: []},


I think we need to add an error on failure data to handle the failure case

I added pending action and failure data, but it's not used anywhere yet, so let's not focus on it so much. I'm planning to make it better in next issue: #57654, in which I'll use offline and failure data.

shawnborton · 2025-03-10T08:51:48Z

Also to note, based on this screenshot here:

If a report is in the main content view, nothing in the LHN should be highlighted or given the "active" treatment.

SzymczakJ · 2025-03-10T10:53:34Z

As for @trjExpensify comment(#57847 (comment)):

@SzymczakJ in the video from the OP, does that account not have a default workspace selected?

Yes, this account has a default workspace, should we add some kind default marker in this case? Why do you ask?

SzymczakJ · 2025-03-10T11:39:02Z

As for @shawnborton comment(#57847 (comment)): I was planning to fix that in a next issue which is adding empty state to report view and merge this issue as fast as possible, since it's blocking our next tasks.
So can we address issues regarding Report view UI side in the issue that I linked?

SzymczakJ · 2025-03-10T11:45:58Z

Fixed your comments @DylanDylann!

trjExpensify · 2025-03-10T11:57:53Z

Yes, this account has a default workspace, should we add some kind default marker in this case? Why do you ask?

If the default workspace is a group workspace we should not show the selector. We just create the report on the default workspace. The only time we show the selector is in the edge case of:

User's default workspace is set to the personal workspace
User also has multiple group workspaces, so we can't "guess" which one to use.

shawnborton · 2025-03-10T14:41:08Z

So can we address issues regarding Report view UI side in the issue that I linked?

I'm cool with that, as long as we have a plan to fix it :)

SzymczakJ · 2025-03-10T18:05:32Z

Yes, this account has a default workspace, should we add some kind default marker in this case? Why do you ask?

If the default workspace is a group workspace we should not show the selector. We just create the report on the default workspace. The only time we show the selector is in the edge case of:

User's default workspace is set to the personal workspace

User also has multiple group workspaces, so we can't "guess" which one to use.

Alright, now I understand this 😄. Fixed the logic the way you wanted!

mountiny · 2025-03-10T20:08:17Z

@DylanDylann Are you able to do another review?

luacmartins

Looking good. Left a few small comments

luacmartins · 2025-03-10T21:32:59Z

src/ROUTES.ts

@@ -81,7 +81,7 @@ const ROUTES = {
    SEARCH_MONEY_REQUEST_REPORT: {
        route: 'search/report/:reportID',
        getRoute: ({reportID, backTo}: {reportID: string; backTo?: string}) => {
-            const baseRoute = `search/view/${reportID}` as const;
+            const baseRoute = `search/report/${reportID}` as const;


We're changing this to /r to be consistent with other routes. Discussed in https://expensify.slack.com/archives/C07NMDKEFMH/p1741479977432699

Suggested change

const baseRoute = `search/report/${reportID}` as const;

const baseRoute = `search/r/${reportID}` as const;

luacmartins · 2025-03-10T21:38:22Z

src/pages/home/sidebar/FloatingActionButtonAndPopover.tsx

+                                  return;
+                              }
+
+                              // If the users default workspace is personal and user has more than one group workspace which is paid and has chat enabled, we need to redirect them to workspace selection screen


Suggested change

// If the users default workspace is personal and user has more than one group workspace which is paid and has chat enabled, we need to redirect them to workspace selection screen

// If the user's default workspace is personal and the user has more than one group workspace which is paid and has chat enabled, we need to redirect them to the workspace selection screen

luacmartins · 2025-03-10T21:38:46Z

src/pages/home/sidebar/FloatingActionButtonAndPopover.tsx

+                                  return;
+                              }
+
+                              // If the users default workspace is paid group workspace with chat enabled, we create a report with it by default


Suggested change

// If the users default workspace is paid group workspace with chat enabled, we create a report with it by default

// If the user's default workspace is a paid group workspace with chat enabled, we create a report with it by default

luacmartins · 2025-03-10T21:41:26Z

src/libs/actions/Report.ts

+
+    const optimisticData: OnyxUpdate[] = [
+        {
+            onyxMethod: Onyx.METHOD.SET,


Why are we using SET here and below?

luacmartins · 2025-03-10T21:42:32Z

src/libs/actions/Report.ts

+    const optimisticReportID = generateReportID();
+    const reportActionID = rand64();
+    // eslint-disable-next-line @typescript-eslint/prefer-nullish-coalescing
+    const reportName = `${creatorPersonalDetails.firstName || 'User'}'s report`;


This should use the policy's default report name rule stored in policy.fieldList.text_title.defaultValue

create NewReportWorkspaceSelectionPage

723781a

mountiny self-requested a review March 5, 2025 22:30

mountiny changed the title ~~Create entrypoint for Report creation flow.~~ [Report Creation UI] Create entrypoint for Report creation flow. Mar 5, 2025

mountiny assigned SzymczakJ Mar 5, 2025

SzymczakJ added 6 commits March 6, 2025 15:42

add CreateAppReport api call

50eee8b

Merge branch 'main' into @szymczak/start-create-report-flow

04860d6

add Floating action button 'create report' action

a6a39be

hide "Create Report" FAB action behind feature flag

85ddd2a

Merge branch 'main' into @szymczak/start-create-report-flow

6fceaf9

add goBack on SearchMoneyrequestReportPage

c6215ea

sumo-slonik approved these changes Mar 7, 2025

View reviewed changes

src/libs/Permissions.ts Show resolved Hide resolved

src/pages/NewReportWorkspaceSelectionPage.tsx Show resolved Hide resolved

src/pages/NewReportWorkspaceSelectionPage.tsx Outdated Show resolved Hide resolved

fix PR comments

5d62792

SzymczakJ marked this pull request as ready for review March 7, 2025 11:20

SzymczakJ requested a review from a team as a code owner March 7, 2025 11:20

melvin-bot bot requested review from DylanDylann and removed request for a team March 7, 2025 11:20

luacmartins self-requested a review March 7, 2025 11:45

mountiny reviewed Mar 7, 2025

View reviewed changes

DylanDylann reviewed Mar 8, 2025

View reviewed changes

fix PR comments

81abfef

update optimistic and failure data

f8e88f2

SzymczakJ force-pushed the @szymczak/start-create-report-flow branch from 3b4b3d8 to f8e88f2 Compare March 10, 2025 11:44

SzymczakJ added 3 commits March 10, 2025 17:04

add report preview action offline data

37f08fc

fix create report default logic

2f54f79

clean up code

b56cebb

fix eslint

a1100a4

luacmartins reviewed Mar 10, 2025

View reviewed changes

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

[Report Creation UI] Create entrypoint for Report creation flow. #57847

[Report Creation UI] Create entrypoint for Report creation flow. #57847

SzymczakJ commented Mar 5, 2025 •

edited

Loading

melvin-bot bot commented Mar 7, 2025

luacmartins commented Mar 7, 2025

shawnborton commented Mar 7, 2025

DylanDylann commented Mar 7, 2025

SzymczakJ commented Mar 7, 2025 •

edited

Loading

trjExpensify commented Mar 7, 2025

mountiny Mar 7, 2025

SzymczakJ Mar 10, 2025

DylanDylann commented Mar 8, 2025 •

edited

Loading

DylanDylann Mar 8, 2025

DylanDylann Mar 8, 2025

SzymczakJ Mar 10, 2025

shawnborton commented Mar 10, 2025

SzymczakJ commented Mar 10, 2025

SzymczakJ commented Mar 10, 2025

SzymczakJ commented Mar 10, 2025

trjExpensify commented Mar 10, 2025

shawnborton commented Mar 10, 2025

SzymczakJ commented Mar 10, 2025

mountiny commented Mar 10, 2025

luacmartins left a comment

luacmartins Mar 10, 2025

luacmartins Mar 10, 2025

luacmartins Mar 10, 2025

luacmartins Mar 10, 2025

luacmartins Mar 10, 2025


		const {stateNum, statusNum} = getExpenseReportStateAndStatus(policy);

		const optimisticDataValue: OptimisticNewReport = {

	const baseRoute = `search/report/${reportID}` as const;
	const baseRoute = `search/r/${reportID}` as const;

	// If the users default workspace is personal and user has more than one group workspace which is paid and has chat enabled, we need to redirect them to workspace selection screen
	// If the user's default workspace is personal and the user has more than one group workspace which is paid and has chat enabled, we need to redirect them to the workspace selection screen

	// If the users default workspace is paid group workspace with chat enabled, we create a report with it by default
	// If the user's default workspace is a paid group workspace with chat enabled, we create a report with it by default

[Report Creation UI] Create entrypoint for Report creation flow. #57847

Are you sure you want to change the base?

[Report Creation UI] Create entrypoint for Report creation flow. #57847

Conversation

SzymczakJ commented Mar 5, 2025 • edited Loading

Explanation of Change

Fixed Issues

Tests

Offline tests

QA Steps

PR Author Checklist

Screenshots/Videos

melvin-bot bot commented Mar 7, 2025

luacmartins commented Mar 7, 2025

shawnborton commented Mar 7, 2025

DylanDylann commented Mar 7, 2025

SzymczakJ commented Mar 7, 2025 • edited Loading

trjExpensify commented Mar 7, 2025

Choose a reason for hiding this comment

Choose a reason for hiding this comment

DylanDylann commented Mar 8, 2025 • edited Loading

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

shawnborton commented Mar 10, 2025

SzymczakJ commented Mar 10, 2025

SzymczakJ commented Mar 10, 2025

SzymczakJ commented Mar 10, 2025

trjExpensify commented Mar 10, 2025

shawnborton commented Mar 10, 2025

SzymczakJ commented Mar 10, 2025

mountiny commented Mar 10, 2025

luacmartins left a comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

SzymczakJ commented Mar 5, 2025 •

edited

Loading

SzymczakJ commented Mar 7, 2025 •

edited

Loading

DylanDylann commented Mar 8, 2025 •

edited

Loading