[Due for payment 2025-05-07] [$250] Group - After removing user, it is reflected under members group chat name

[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.30-0
Reproducible in staging?: Y
Reproducible in production?: Y
If this was caught on HybridApp, is this reproducible on New Expensify Standalone?: N
If this was caught during regression testing, add the test name, ID and link from TestRail: https://expensify.testrail.io/index.php?/tests/view/5968674
Email or phone of affected tester (no customers): Slottwo1+op1@gmail.com
Issue reported by: Applause - Internal Team

Action Performed:

1. Go to https://staging.new.expensify.com/home
2. Go to group chat created with no members

header

3. Add a user
4. Note under members header, group name is changed after user invited
5. Remove the user
6. Revisit the members page

Expected Result:

After removing or inviting user, it must be reflected immediately under members group chat name

Actual Result:

After inviting an user immediately reflected under members "group chat" name but when user is removed , it is reflected only on revisiting the page

Workaround:

Unknown

Platforms:

Select the officially supported platforms where the issue was reproduced:

• Android: Standalone
• Android: HybridApp
• Android: mWeb Chrome
• iOS: Standalone
• iOS: HybridApp
• iOS: mWeb Safari
• Windows: Chrome
• MacOS: Chrome / Safari
• MacOS: Desktop

Platforms Tested:

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

• Android: Standalone
• Android: HybridApp
• Android: mWeb Chrome
• iOS: Standalone
• iOS: HybridApp
• iOS: mWeb Safari
• Windows: Chrome
• MacOS: Chrome / Safari
• MacOS: Desktop

Screenshots/Videos

Add any screenshot/video evidence

Bug6808512_1745254204099.Screenrecorder-2025-04-21-22-10-46-597.mp4

View all open jobs on GitHub

Upwork Automation - Do Not Edit

• Upwork Job URL: https://www.upwork.com/jobs/~021915486246733096549
• Upwork Job ID: 1915486246733096549
• Last Price Increase: 2025-04-24

Issue Owner

Current Issue Owner: @carlosmiceli

[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.

[nkdengineer]

🚨 Edited by proposal-police: This proposal was edited at 2025-04-21 18:24:01 UTC.

Proposal

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

After inviting an user immediately reflected under members "group chat" name but when user is removed , it is reflected only on revisiting the page

What is the root cause of that problem?

1. We called getReportName with only report param

App/src/pages/ReportParticipantsPage.tsx

Line 400 in aab7aeb

subtitle={StringUtils.lineBreaksToSpaces(getReportName(report))}

Then the reportName is updated from reportAttributes

App/src/libs/ReportUtils.ts

Lines 4593 to 4595 in aab7aeb

	if (canUseDerivedValue && reportAttributes?.[report.reportID]) {
	return reportAttributes[report.reportID].reportName;
	}

Although, the compute logic is triggered before we call the getReportName function again, reportAttributes isn't updated at this time

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

Line 14 in aab7aeb

compute: ([reports, personalDetails, preferredLocale], {currentValue, sourceValues}) => {

The reason is we need to set the derived value to Onyx here

App/src/libs/actions/OnyxDerived/index.ts

Line 57 in aab7aeb

Onyx.set(key, derivedValue ?? null);

2. In offline, if we remove the member the report name is also not updated because in offline, we only update the report metadata and it's not a dependency here

App/src/libs/actions/Report.ts

Line 3752 in aab7aeb

const optimisticData: OnyxUpdate[] = [

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

1. The resolve the problem 1, we can create a cached value in reportAttributes and then use this get the report name

const cachedReportAttributes: Record<string, ReportAttributes> = {};
cachedReportAttributes[report.reportID] = acc[report.reportID];
function getCachedReportAttributes(reportID: string) {
    return cachedReportAttributes[reportID];
}

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

Line 13 in aab7aeb

dependencies: [ONYXKEYS.COLLECTION.REPORT, ONYXKEYS.PERSONAL_DETAILS_LIST, ONYXKEYS.NVP_PREFERRED_LOCALE],

if (canUseDerivedValue && (reportAttributes?.[report.reportID] || getCachedReportAttributes(report.reportID))) {
    return getCachedReportAttributes(report.reportID)?.reportName || reportAttributes?.[report.reportID].reportName;
}

App/src/libs/ReportUtils.ts

Lines 4593 to 4595 in aab7aeb

	if (canUseDerivedValue && reportAttributes?.[report.reportID]) {
	return reportAttributes[report.reportID].reportName;
	}

2. To resolve the problem 2 in offline, we need to add report metadata as dependency here

dependencies: [ONYXKEYS.COLLECTION.REPORT, ONYXKEYS.PERSONAL_DETAILS_LIST, ONYXKEYS.NVP_PREFERRED_LOCALE, ONYXKEYS.COLLECTION.REPORT_METADATA],

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

Line 13 in aab7aeb

dependencies: [ONYXKEYS.COLLECTION.REPORT, ONYXKEYS.PERSONAL_DETAILS_LIST, ONYXKEYS.NVP_PREFERRED_LOCALE],

And we also need to create a useMemo to get report name and add report and reportMetadata as dependencies so this can be called again when reportMetadata is changed

const reportName = useMemo(() => {
    return getReportName(report);
}, [report, reportMetadata]);
subtitle={StringUtils.lineBreaksToSpaces(reportName)}

App/src/pages/ReportParticipantsPage.tsx

Line 400 in aab7aeb

subtitle={StringUtils.lineBreaksToSpaces(getReportName(report))}

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

UI bug

What alternative solutions did you explore? (Optional)

NA

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.

[bernhardoj]

Proposal

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

The group chat name doesn't update dynamically immediately.

What is the root cause of that problem?

In get report name function, if only report param is passed, then we get the report name from reportAttributes.

App/src/libs/ReportUtils.ts

Lines 4585 to 4593 in a2b6087

	): 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;
	if (canUseDerivedValue && reportAttributes?.[report.reportID]) {
	return reportAttributes[report.reportID].reportName;
	}
	return getReportNameInternal({report, policy, parentReportActionParam, personalDetails, invoiceReceiverPolicy});
	}

reportAttributes is computed and recalculated every time the onyx dependency data changes, using Onyx.connect.

App/src/libs/actions/OnyxDerived/index.ts

Lines 60 to 83 in a2b6087

	for (let i = 0; i < dependencies.length; i++) {
	// eslint-disable-next-line rulesdir/prefer-at
	const dependencyOnyxKey = dependencies[i];
	if (OnyxUtils.isCollectionKey(dependencyOnyxKey)) {
	Onyx.connect({
	key: dependencyOnyxKey,
	waitForCollectionCallback: true,
	callback: (value, collectionKey, sourceValue) => {
	Log.info(`[OnyxDerived] dependency ${collectionKey} for derived key ${key} changed, recomputing`);
	setDependencyValue(i, value as Parameters<typeof compute>[0][typeof i]);
	recomputeDerivedValue(dependencyOnyxKey, sourceValue);
	},
	});
	} else {
	Onyx.connect({
	key: dependencyOnyxKey,
	callback: (value) => {
	Log.info(`[OnyxDerived] dependency ${dependencyOnyxKey} for derived key ${key} changed, recomputing`);
	setDependencyValue(i, value as Parameters<typeof compute>[0][typeof i]);
	recomputeDerivedValue(dependencyOnyxKey);
	},
	});
	}
	}

The first problem is that we subscribe to the reportAttributes using Onyx.connect, which means it won't re-render the component when it's updated. So, when the report is updated, getReportName is called, but reportAttributes isn't updated yet and it won't be called anymore after reportAttributes is updated.

App/src/libs/ReportUtils.ts

Lines 1042 to 1051 in a2b6087

	let reportAttributes: OnyxEntry<Record<string, ReportAttributes>>;
	Onyx.connect({
	key: ONYXKEYS.DERIVED.REPORT_ATTRIBUTES,
	callback: (value) => {
	if (!value) {
	return;
	}
	reportAttributes = value;
	},
	});

The second problem is that the a pending member removal is stored on a report metadata, and when calculating the participant, we exclude the pending delete member, however, report metadata isn't added as the dependency of the report attributes.

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

Line 13 in a2b6087

dependencies: [ONYXKEYS.COLLECTION.REPORT, ONYXKEYS.PERSONAL_DETAILS_LIST, ONYXKEYS.NVP_PREFERRED_LOCALE],

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

First, add ONYXKEYS.COLLECTION.REPORT_METADATA to the report attributes deps.
Next, we can either:

1. Subscribe the report attributes name in ReportParticipantsPage, then pass it as a new param to getReportName.

const [reportNameAttributes] = useOnyx(ONYXKEYS.DERIVED.REPORT_ATTRIBUTES, {selector: (attributes) => attributes?.[report.reportID].reportName});

Then, if it's available, use it instead of the reportAttributes from the Onyx.connect.

if (canUseDerivedValue && (reportNameAttributes || reportAttributes?.[report.reportID])) {
    return reportNameAttributes ?? reportAttributes?.[report.reportID].reportName;
}

OR

2. Pass the other getReportName, such as policy, so we won't use the reportAttributes data.

This happens on other component too, such as the report header.

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

N/A

[lydiabarclay]

@lanitochka17 could you confirm whether an attempt was made to reproduce on Standalone or no?

[lanitochka17]

Issue is not reproducible in Standalone app

Screenrecorder-2025-04-24-01-05-54-950.mp4

[trjExpensify]

👋 @lydiabarclay - I think you should ship this External now, yeah?

[melvin-bot]

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