Expense - Expense preview displays "fragment.text" when the expense is invalid

[IuliiaHerets]

If you haven’t already, check out our contributing guidelines for onboarding and email [email protected] to request to join our Slack channel!

---

Version Number: 9.0.47-1
Reproducible in staging?: Y
Reproducible in production?: N
Email or phone of affected tester (no customers): [email protected]
Issue reported by: Applause Internal Team

Action Performed:

1. Go to staging.new.expensify.com
2. Log in with Expensifail account.
3. Submit an expense to any user.
4. Send a message to the same user.
5. Open another report and send a message.
6. Go to Account settings > Troubleshoot > Clear cache and restart.
7. Select Reset and refresh.
8. Submit another expense to the user in Step 3 via FAB (do not open the chat with that user).

Expected Result:

Expense preview will still display the sender & receiver name when the expense is invalid.

Actual Result:

Expense preview displays "fragment.text" when the expense is invalid.

Workaround:

Unknown

Platforms:

• Android: Native
• Android: mWeb Chrome
• iOS: Native
• iOS: mWeb Safari
• MacOS: Chrome / Safari
• MacOS: Desktop

Screenshots/Videos

Bug6630207_1728522633711.20241010_090508.mp4

View all open jobs on GitHub

[melvin-bot]

Triggered auto assignment to @lakchote (DeployBlockerCash), see https://stackoverflowteams.com/c/expensify/questions/9980/ for more details.

[melvin-bot]

Triggered auto assignment to @Christinadobrzyn (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.

[melvin-bot]

💬 A slack conversation has been started in #expensify-open-source

[github-actions]

👋 Friendly reminder that deploy blockers are time-sensitive ⏱ issues! Check out the open `StagingDeployCash` deploy checklist to see the list of PRs included in this release, then work quickly to do one of the following:

1. Identify the pull request that introduced this issue and revert it.
2. Find someone who can quickly fix the issue.
3. Fix the issue yourself.

[lakchote]

It's directly related to #50341

cc @grgia @puneetlath @eh2077

Screen.Recording.2024-10-10.at.13.03.24.mov

[bernhardoj]

Proposal

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

Report preview display name text shows fragment.text when the report is invalid.

What is the root cause of that problem?

I don't know why the report becomes invalid when requesting a new expense after Clear cache and restart, but I want to focus on the specific issue we have, that is the fragment.text shows.

In ReportActionItemFragment, if the type is empty, then we show fragment.text.

App/src/pages/home/report/ReportActionItemFragment.tsx

Lines 191 to 192 in ab5175c

	default:
	return <Text>fragment.text</Text>;

When the report becomes invalid, the report preview action has an undefined person.

This causes the array here to contain undefined as the item. [undefined]

App/src/pages/home/report/ReportActionItemSingle.tsx

Lines 166 to 174 in ab5175c

	const personArray = useMemo(() => {
	const baseArray = displayName
	? [
	{
	type: 'TEXT',
	text: displayName,
	},
	]
	: [action?.person?.at(0)] ?? [];

Then, we map the array here and pass the fragment type with empty string as the fallback. Because the array item is undefined, the type is also undefined, so empty string is passed.

App/src/pages/home/report/ReportActionItemSingle.tsx

Lines 287 to 293 in ab5175c

	{personArray.map((fragment, index) => (
	<ReportActionItemFragment
	style={[styles.flex1]}
	// eslint-disable-next-line react/no-array-index-key
	key={`person-${action?.reportActionID}-${index}`}
	accountID={actorAccountID ?? -1}
	fragment={{...fragment, type: fragment?.type ?? '', text: fragment?.text ?? ''}}

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

I believe what we want to do here is that, if the person is undefined, then return an empty array. To do that, we need to update the code to

const person = action?.person?.at(0);
const baseArray = displayName
    ? [
            {
                type: 'TEXT',
                text: displayName,
            },
        ]
    : person ? [person] : [];

OR

const baseArray = displayName
    ? [
            {
                type: 'TEXT',
                text: displayName,
            },
        ]
    : [action?.person?.at(0)].filter(Boolean);

OR

Instead of fallback to empty string, fallback it to TEXT.

App/src/pages/home/report/ReportActionItemSingle.tsx

Line 293 in ab5175c

fragment={{...fragment, type: fragment?.type ?? '', text: fragment?.text ?? ''}}

or just do both.

This will show an empty text.

[lakchote]

Thanks @bernhardoj for your proposal.

However, I'll be asking for a revert since I don't have the whole context here and it's tied to another blocker (#50547), and @grgia is OOO.

[mountiny]

Revert PR was merged #50557 assigning Georgia so you dont loose track of this

[grgia]

👀

[grgia]

Closing out since we reverted the PR and I've addressed in a follow up (and this bug technically doesn't exist anymore)