[HOLD for Payment 2024-08-22][$250] Edit Modal Not Opening by up arrow After Holding Expense and Returning to Thread

[lanitochka17]

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.0.11-0
Reproducible in staging?: Y
Reproducible in production?: Y
If this was caught during regression testing, add the test name, ID and link from TestRail: N/A
Email or phone of affected tester (no customers): betlihemasfaw14@gmail.com
Issue reported by: Applause - Internal Team

Action Performed:

1. Go to Account Settings > Workspace > Create Workspace
2. From LHN, navigate to Workspace Chat
3. Click the plus sign > Submit Expense > Add Amount > Add Merchant
4. Confirm the expense, go to the thread, and go to details. Click "Hold
5. Add a reason and hold the expense. Exit the thread
6. Return to the thread and click the up arrow. Notice that the edit modal does not open

Expected Result:

The up arrow should always open the edit modal when the message is edited

Actual Result:

After holding the expense and exiting the thread, upon returning, the message appears in the composer, but the edit modal does not open when the up arrow is clicked

Workaround:

Unknown

Platforms:

Which of our officially supported platforms is this issue occurring on?

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

Screenshots/Videos

Add any screenshot/video evidence

Bug6551098_1721779883250.Screen_Recording_2024-07-23_at_4.39.10_PM.mp4

View all open jobs on GitHub

Upwork Automation - Do Not Edit

• Upwork Job URL: https://www.upwork.com/jobs/~016ca23291c558a731
• Upwork Job ID: 1817972655286208144
• Last Price Increase: 2024-08-05

Issue Owner

Current Issue Owner: @fedirjh

[melvin-bot]

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

[lanitochka17]

@puneetlath FYI I haven't added the External label as I wasn't 100% sure about this issue. Please take a look and add the label if you agree it's a bug and can be handled by external contributors

[lanitochka17]

We think that this bug might be related to #vip-vsp

[bernhardoj]

Proposal

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

Pressing arrow up key doesn't open the edit composer in one-transaction report if the last message is the hold reason message.

What is the root cause of that problem?

The up arrow key to edit will only work if lastReportAction (editable) exists.

App/src/pages/home/report/ReportActionCompose/ComposerWithSuggestions/ComposerWithSuggestions.tsx

Lines 520 to 523 in 98d8a5a

	if (lastReportAction) {
	const message = Array.isArray(lastReportAction?.message) ? lastReportAction?.message?.at(-1) ?? null : lastReportAction?.message ?? null;
	Report.saveReportActionDraft(reportID, lastReportAction, Parser.htmlToMarkdown(message?.html ?? ''));
	}

However, in our case, it's undefined.

lastReportAction is built from the report reportActions + parentReportAction then iterated to find the first editable message. But the hold message is the transaction thread message, so it isn't included in reportActions of the one-transaction (IOU) report.

App/src/pages/home/ReportScreen.tsx

Lines 325 to 331 in 98d8a5a

	const lastReportAction: OnyxEntry<OnyxTypes.ReportAction> = useMemo(
	() =>
	reportActions.length
	? [...reportActions, parentReportAction].find((action) => ReportUtils.canEditReportAction(action) && !ReportActionsUtils.isMoneyRequestAction(action))
	: undefined,
	[reportActions, parentReportAction],
	);

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

Combine the reportActions with the transaction thread report actions like we did in ReportActionsView.

const transactionThreadReportID = ...;
const [transactionThreadReportActions = []] = useOnyx(`${ONYXKEYS.COLLECTION.REPORT_ACTIONS}${transactionThreadReportID}`, {
    canEvict: false,
    selector: (reportActions) => ReportActionsUtils.getSortedReportActionsForDisplay(reportActions, true), 
});
const lastReportAction: OnyxEntry<OnyxTypes.ReportAction> = useMemo(
    () =>
        reportActions.length
            ? [...ReportActionsUtils.getCombinedReportActions(reportActions, transactionThreadReportID ?? null, transactionThreadReportActions), parentReportAction].find((action) => ReportUtils.canEditReportAction(action) && !ReportActionsUtils.isMoneyRequestAction(action))
            : undefined,
    [reportActions, parentReportAction],
);

What alternative solutions did you explore? (Optional)

Create a new context and wrap it in ReportScreen. This context will hold a ref to the combined report actions. We will update the ref every time the combinedReportActions here is changed.

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

Lines 224 to 227 in 98d8a5a

	const combinedReportActions = useMemo(
	() => ReportActionsUtils.getCombinedReportActions(reportActionsToDisplay, transactionThreadReportID ?? null, transactionThreadReportActions),
	[reportActionsToDisplay, transactionThreadReportActions, transactionThreadReportID],
	);

useEffect(() => {
    // set ref
    return () => // clears the ref
}, [combinedReportActions])

Then, when the user presses the arrow up key, we will get the report actions ref and do the filter here.

App/src/pages/home/report/ReportActionCompose/ComposerWithSuggestions/ComposerWithSuggestions.tsx

Lines 520 to 523 in 98d8a5a

	if (lastReportAction) {
	const message = Array.isArray(lastReportAction?.message) ? lastReportAction?.message?.at(-1) ?? null : lastReportAction?.message ?? null;
	Report.saveReportActionDraft(reportID, lastReportAction, Parser.htmlToMarkdown(message?.html ?? ''));
	}

if (key === 'UP && ...) {
    const lastAction = reportActionsContext.reportActions.find((action) => ReportUtils.canEditReportAction(action) && !ReportActionsUtils.isMoneyRequestAction(action));
    ...
}

This will prevent any unnecessary and heavy re-render.

[melvin-bot]

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

[melvin-bot]

Triggered auto assignment to Contributor-plus team member for initial proposal review - @fedirjh (External)

[fedirjh]

I was not able to reproduce in staging v9.0.14-5

CleanShot.2024-07-31.at.18.48.47.mp4

[bernhardoj]

It's still reproducible. You need to do it in a one-transaction report.

web.mp4