[Due for payment 2025-05-28] [$250] Thread - On first visit in offline mode, deleted parent message shown under profile icon

[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.1.41-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
Issue reported by: Applause - Internal Team

Action Performed:

1. Go to https://staging.new.expensify.com/home
2. Login with expensifail account
3. Open Workspace chat
4. Turn off internet
5. Tap plus icon - create report
6. Send a message
7. Long tap the sent message and create a reply thread
8. In thread page also send a reply
9. Delete the parent comment
10. Note header turned to deleted message
11. Tap header and note text under profile icon
12. Note parent comment is displayed instead deleted message
13. Tap back and revisit the page
14. Note now deleted message is displayed

Expected Result:

In offline mode, after deleting the parent message in a thread, tapping the thread header should still show "Deleted message" consistently — both in the header and under the profile icon — without reverting to the original message at any point

Actual Result:

While offline, after deleting the parent message:

1. The thread header correctly changes to "Deleted message"
2. But when you tap the thread header, the thread view shows the original (non-deleted) message under the profile icon
3. After on revisiting, the view correctly updates to "Deleted message"

Workaround:

Unknown

Platforms:

Select the officially supported platforms where the issue was reproduced:

• Android: App
• Android: mWeb Chrome
• iOS: App
• iOS: mWeb Safari
• iOS: mWeb Chrome
• Windows: Chrome
• MacOS: Chrome / Safari
• MacOS: Desktop

Platforms Tested:

On which of our officially supported platforms was this issue tested:

• Android: App
• Android: mWeb Chrome
• iOS: App
• iOS: mWeb Safari
• iOS: mWeb Chrome
• Windows: Chrome
• MacOS: Chrome / Safari
• MacOS: Desktop

Screenshots/Videos

Add any screenshot/video evidence

Bug6824611_1746640909285.Screenrecorder-2025-05-07-23-17-53-102.mp4

View all open jobs on GitHub

Upwork Automation - Do Not Edit

• Upwork Job URL: https://www.upwork.com/jobs/~021920264080367073683
• Upwork Job ID: 1920264080367073683
• Last Price Increase: 2025-05-07
• Automatic offers:
• nkdengineer | Contributor | 107271713

Issue Owner

Current Issue Owner: @lydiabarclay

[melvin-bot]

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

[jaydamani]

Proposal

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

Deleted parent message shown under profile icon on first visit in offline

What is the root cause of that problem?

The report name for report details page comes from report attributes in onyx as no extra param is passed when calling getReportName. Incase of thread title, extra params like parent report action are passed so it is recalculated instead of using the derived values.

App/src/pages/ReportDetailsPage.tsx

Line 385 in 0601503

const reportName = Parser.htmlToText(getReportName(report));

App/src/libs/ReportUtils.ts

Lines 4619 to 4635 in 0601503

	function getReportName(
	report: OnyxEntry<Report>,
	policy?: OnyxEntry<Policy>,
	parentReportActionParam?: OnyxInputOrEntry<ReportAction>,
	personalDetails?: Partial<PersonalDetailsList>,
	invoiceReceiverPolicy?: OnyxEntry<Policy>,
	reportAttributesParam?: ReportAttributesDerivedValue['reports'],
	): string {
	// Check if we can use report name in derived values - only when we have report but no other params
	const canUseDerivedValue = report && policy === undefined && parentReportActionParam === undefined && personalDetails === undefined && invoiceReceiverPolicy === undefined;
	const attributes = reportAttributesParam ?? reportAttributes;
	const derivedNameExists = report && !!attributes?.[report.reportID]?.reportName;
	if (canUseDerivedValue && derivedNameExists) {
	return attributes[report.reportID].reportName;
	}
	return getReportNameInternal({report, policy, parentReportActionParam, personalDetails, invoiceReceiverPolicy});
	}

The attributes are computed here:

App/src/libs/actions/OnyxDerived/configs/reportAttributes.ts

Lines 41 to 75 in 0601503

	const reportUpdates = sourceValues?.[ONYXKEYS.COLLECTION.REPORT];
	const reportMetadataUpdates = sourceValues?.[ONYXKEYS.COLLECTION.REPORT_METADATA];
	// if we already computed the report attributes and there is no new reports data, return the current value
	if ((isFullyComputed && reportUpdates === undefined && reportMetadataUpdates === undefined) || !reports) {
	return currentValue ?? {reports: {}, locale: null};
	}
	let dataToIterate: Record<string, Report | ReportMetadata | undefined> = reports;
	if (isFullyComputed) {
	if (reportUpdates) {
	dataToIterate = reportUpdates;
	} else if (reportMetadataUpdates) {
	dataToIterate = reportMetadataUpdates;
	}
	}
	const reportAttributes = Object.keys(dataToIterate).reduce<ReportAttributesDerivedValue['reports']>((acc, key) => {
	// source value sends partial data, so we need an entire report object to do computations
	const report = reports[`${ONYXKEYS.COLLECTION.REPORT}${key.replace(ONYXKEYS.COLLECTION.REPORT, '').replace(ONYXKEYS.COLLECTION.REPORT_METADATA, '')}`];
	if (!report || !isValidReport(report)) {
	return acc;
	}
	acc[report.reportID] = {
	reportName: generateReportName(report),
	};
	return acc;
	}, currentValue?.reports ?? {});
	// mark the report attributes as fully computed after first iteration to avoid unnecessary recomputations on all objects
	if (reportUpdates === undefined && Object.keys(reports ?? {}).length > 0 && !isFullyComputed) {
	isFullyComputed = true;
	}

In the above code, report name is only recalculated when report updates or report metadata updates is not undefined. When the message is deleted, only report action is updated so, report metadata updates and report updates are undefined. When user leaves clicks on back to the report details page, the report meta data is updated due to which the derived report name is recalculated and the name is correct when the details page is opened next time.

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

Update report attributes computation to also check report action updates like we check report and report metadata

App/src/libs/actions/OnyxDerived/configs/reportAttributes.ts

Lines 41 to 56 in 0601503

	const reportUpdates = sourceValues?.[ONYXKEYS.COLLECTION.REPORT];
	const reportMetadataUpdates = sourceValues?.[ONYXKEYS.COLLECTION.REPORT_METADATA];
	// if we already computed the report attributes and there is no new reports data, return the current value
	if ((isFullyComputed && reportUpdates === undefined && reportMetadataUpdates === undefined) || !reports) {
	return currentValue ?? {reports: {}, locale: null};
	}
	let dataToIterate: Record<string, Report | ReportMetadata | undefined> = reports;
	if (isFullyComputed) {
	if (reportUpdates) {
	dataToIterate = reportUpdates;
	} else if (reportMetadataUpdates) {
	dataToIterate = reportMetadataUpdates;
	}
	}

Updated:

        const reportUpdates = sourceValues?.[ONYXKEYS.COLLECTION.REPORT];
        const reportMetadataUpdates = sourceValues?.[ONYXKEYS.COLLECTION.REPORT_METADATA];
        const reportActionUpdates = sourceValues?.[ONYXKEYS.COLLECTION.REPORT_METADATA];

        // if we already computed the report attributes and there is no new reports data, return the current value
        if ((isFullyComputed && reportUpdates === undefined && reportActionUpdates === undefined && reportMetadataUpdates === undefined) || !reports) {
            return currentValue ?? {reports: {}, locale: null};
        }

        let dataToIterate: Record<string, Report | ReportMetadata | undefined> = reports;
        if (isFullyComputed) {
            if (reportUpdates) {
                dataToIterate = reportUpdates;
            } else if (reportMetadataUpdates) {
                dataToIterate = reportMetadataUpdates;
            } else if (reportActionUpdates) {
                dataToIterate = reportActionUpdates
            }
        }

What specific scenarios should we cover in automated tests to prevent reintroducing this issue in the future?

validate getReportName returns updated name after report action is deleted and no extra params are passed

What alternative solutions did you explore? (Optional)

Pass parent report action and other relevant params to getReportName call in report details screen

Reminder: Please use plain English, be brief and avoid jargon. Feel free to use images, charts or pseudo-code if necessary. Do not post large multi-line diffs or write walls of text. Do not create PRs unless you have been hired for this job.

[nabi-ebrahimi]

Proposal

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

While offline, after deleting the parent message:

1. The thread header correctly changes to "Deleted message"
2. But when you tap the thread header, the thread view shows the original (non-deleted) message under the profile icon
3. After on revisiting, the view correctly updates to "Deleted message"

What is the root cause of that problem?

We're getting the report name like this here

const reportName = Parser.htmlToText(getReportName(report));

But getReportName tries to access the report's name from reportAttributes, which haven't been calculated yet. here

function getReportName(
    report: OnyxEntry<Report>,
    policy?: OnyxEntry<Policy>,
    parentReportActionParam?: OnyxInputOrEntry<ReportAction>,
    personalDetails?: Partial<PersonalDetailsList>,
    invoiceReceiverPolicy?: OnyxEntry<Policy>,
    reportAttributesParam?: ReportAttributesDerivedValue['reports'],
): string {
    // Check if we can use report name in derived values - only when we have report but no other params
    const canUseDerivedValue = report && policy === undefined && parentReportActionParam === undefined && personalDetails === undefined && invoiceReceiverPolicy === undefined;
    const attributes = reportAttributesParam ?? reportAttributes;
    const derivedNameExists = report && !!attributes?.[report.reportID]?.reportName;
    if (canUseDerivedValue && derivedNameExists) {
        return attributes[report.reportID].reportName;
    }
    return getReportNameInternal({report, policy, parentReportActionParam, personalDetails, invoiceReceiverPolicy});
}

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

We can call getReportName the same way it's used in HeaderView.tsx, so we don’t depend on the reportAttributes. here

const title = getReportName(reportHeaderData, policy, parentReportAction, personalDetails, invoiceReceiverPolicy);

Update ReportDetailsPage.tsx here to use the same logic as in HeaderView.tsx here

    const invoiceReceiverPolicyID = report?.invoiceReceiver && 'policyID' in report.invoiceReceiver ? report.invoiceReceiver.policyID : undefined;
    const [invoiceReceiverPolicy] = useOnyx(`${ONYXKEYS.COLLECTION.POLICY}${invoiceReceiverPolicyID}`, {canBeMissing: true});

const reportName = Parser.htmlToText(getReportName(report, policy, parentReportAction, personalDetails, invoiceReceiverPolicy));

What specific scenarios should we cover in automated tests to prevent reintroducing this issue in the future?

N / A

What alternative solutions did you explore? (Optional)

N / A

[melvin-bot]

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

[melvin-bot]

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

[nkdengineer]

Proposal

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

While offline, after deleting the parent message:

What is the root cause of that problem?

In the detail page, we call getReportName without other params then we will use reportAttributes to return the report name

App/src/pages/ReportDetailsPage.tsx

Line 385 in 0601503

const reportName = Parser.htmlToText(getReportName(report));

When we delete the parent report action, only the report and reportActions data of the parent report are updated.

App/src/libs/actions/Report.ts

Line 1761 in bd59655

function deleteReportComment(reportID: string | undefined, reportAction: ReportAction) {

Then the updates doesn't contain the child report. So the reportAttributes of the child report isn't updated

App/src/libs/actions/OnyxDerived/configs/reportAttributes.ts

Lines 62 to 74 in bd59655

	if ((isFullyComputed && !sourceValues) || !reports) {
	return currentValue ?? {reports: {}, locale: null};
	}
	let dataToIterate = Object.keys(reports);
	// check if there are any report-related updates
	const updates = [...Object.keys(reportUpdates), ...Object.keys(reportMetadataUpdates), ...Object.keys(reportActionsUpdates), ...Object.keys(reportNameValuePairsUpdates)];
	if (isFullyComputed) {
	// if there are report-related updates, iterate over the updates
	if (updates.length > 0) {
	dataToIterate = prepareReportKeys(updates);
	recentlyUpdated = updates;

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

We should check the reportActionsUpdates if this report action has any child report, we should also add this to the updates

const reportUpdatesRelatedToReportActions: string[] = [];

Object.keys(reportActionsUpdates).forEach((reportKey) => {
    Object.keys(reportActionsUpdates[reportKey] ?? {}).forEach((reportActionKey) => {
        const reportAction = reportActions?.[reportKey]?.[reportActionKey];
        if (reportAction?.childReportID) {
            reportUpdatesRelatedToReportActions.push(`${ONYXKEYS.COLLECTION.REPORT}${reportAction.childReportID}`);
        }
    });
});

const updates = [...Object.keys(reportUpdates), ...Object.keys(reportMetadataUpdates), ...Object.keys(reportActionsUpdates), ...Object.keys(reportNameValuePairsUpdates), ...reportUpdatesRelatedToReportActions];

App/src/libs/actions/OnyxDerived/configs/reportAttributes.ts

Lines 62 to 74 in bd59655

	if ((isFullyComputed && !sourceValues) || !reports) {
	return currentValue ?? {reports: {}, locale: null};
	}
	let dataToIterate = Object.keys(reports);
	// check if there are any report-related updates
	const updates = [...Object.keys(reportUpdates), ...Object.keys(reportMetadataUpdates), ...Object.keys(reportActionsUpdates), ...Object.keys(reportNameValuePairsUpdates)];
	if (isFullyComputed) {
	// if there are report-related updates, iterate over the updates
	if (updates.length > 0) {
	dataToIterate = prepareReportKeys(updates);
	recentlyUpdated = updates;

What specific scenarios should we cover in automated tests to prevent reintroducing this issue in the future?

Update reportAttributes test to verify the report name of child report is updated if the parent report action is changed.

What alternative solutions did you explore? (Optional)

We can add other params to getReportName function here to not get the report name from reportAttributes cache

App/src/pages/ReportDetailsPage.tsx

Line 385 in 0601503

const reportName = Parser.htmlToText(getReportName(report));

Reminder: Please use plain English, be brief and avoid jargon. Feel free to use images, charts or pseudo-code if necessary. Do not post large multi-line diffs or write walls of text. Do not create PRs unless you have been hired for this job.

[bradyrose]

Withdrawing this proposal to comply with Expensify’s one-proposal-at-a-time policy.
Hope to circle back if it’s still open later. Thanks!