[$500] Cha - Chat in offline with invalid no. & go online makes header disappear& keeps loading

[lanitochka17]

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: 1.4.32.2
Reproducible in staging?: Yes
Reproducible in production?: Yes
If this was caught during regression testing, add the test name, ID and link from TestRail: https://expensify.testrail.io/index.php?/tests/view/4206011
Email or phone of affected tester (no customers):
Logs: https://stackoverflow.com/c/expensify/questions/4856
Expensify/Expensify Issue URL:
Issue reported by: Applause - Internal Team
Slack conversation:

Action Performed:

1. Go to https://staging.new.expensify.com/
2. Tap fab--- Start chat
3. Turn off mobile data
4. Search a voip number (+18183305299) & select it
5. Send some messages
6. Turn on mobile data

Expected Result:

Starting chat with invalid number in offline, sending messages and turns online, header text must be displayed without loading

Actual Result:

Starting chat with invalid number in offline, sending messages and turns online, header text disappears and keeps loading

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

Bug6347839_1705682973162.moo.mp4

View all open jobs on GitHub

Upwork Automation - Do Not Edit

• Upwork Job URL: https://www.upwork.com/jobs/~017e13f18c6953c14a
• Upwork Job ID: 1751623849106137088
• Last Price Increase: 2024-01-28

[melvin-bot]

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

[melvin-bot]

Triggered auto assignment to @MitchExpensify (Bug), see https://stackoverflow.com/c/expensify/questions/14418 for more details.

[melvin-bot]

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

[Tony-MK]

Proposal

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

Chat in offline with invalid no. & go online makes header disappear& keeps loading

What is the root cause of that problem?

The isLoading boolean will always be true because the title of the report is an empty string.

App/src/pages/home/HeaderView.js

Line 108 in c5ca9a8

const title = ReportUtils.isGroupChat(props.report) ? getGroupChatName(props.report) : ReportUtils.getReportName(reportHeaderData);

Therefore, the getDisplayNameForParticipant function returns an empty string as the formattedLogin

App/src/libs/ReportUtils.ts

Lines 1609 to 1614 in c5ca9a8

	const formattedLogin = LocalePhoneNumber.formatPhoneNumber(personalDetails.login || '');
	// This is to check if account is an invite/optimistically created one
	// and prevent from falling back to 'Hidden', so a correct value is shown
	// when searching for a new user
	if (personalDetails.isOptimisticPersonalDetail === true) {
	return formattedLogin;

This is because the RCA is we are deleting the optimisticPersonalDetails with settledPersonalDetails

App/src/libs/actions/Report.ts

Lines 668 to 671 in c5ca9a8

	failureData.push({
	onyxMethod: Onyx.METHOD.MERGE,
	key: ONYXKEYS.PERSONAL_DETAILS_LIST,
	value: settledPersonalDetails,

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

In the HeaderView, create a fallback condition when the report is available and the if the title is an empty string, we give title a value once lodashGet(props.report, 'errorFields.createChat', null) && lodashGet(props.report, 'pendingFields.createChat', null) is true.

App/src/pages/home/HeaderView.js

Line 220 in c5ca9a8

const isLoading = !props.report || !title;

Therefore, we should add this line below before isLoading the computed so it can be true and the title can have a value.

if (props.report && !title && lodashGet(props.report, 'errorFields.createChat', null) && lodashGet(props.report, 'pendingFields.createChat', null)){
    title = translate('common.hidden');
}

What alternative solutions did you explore? (Optional)

We can remove the failureData from setting the user's optimisticPersonalDetails to null.

However, this might create a chance of duplicate optimisticPersonalDetails records.

[tienifr]

Proposal

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

Starting chat with invalid number in offline, sending messages and turns online, header text disappears and keeps loading

What is the root cause of that problem?

In failureData of openReport, we'll remove the optimistic personal details here.

This leads to the title here becoming empty and the loading indicator will show in the header.

This was done to fix this issue where the invalid contact method will show up in search even after the user clears the error in the report.

This doesn't look like the right pattern because normally what we do in the app is:

If there's an error on when creating an entity:

• Do not clear the data on that entity
• Show the user what went wrong
• If the user clears the error on the creation, clear the data.

This is exactly what we've been doing with reports, reportActions, ... but we're not doing it with personal details. So the UX looks quite broken, because the header of the chat will become empty/show loading indicator, and in LHN there'll be no title of the option. The user won't know what they did that lead to this because the personal details of the user they try to chat with, disappear.

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

1. Do not clear the optimistic personal details in failureData here
2. When the user press x to clear the created chat error here, clear the optimistic personal details associated with that fail-to-be-created report as well, by checking the participantAccountIDs of that report and the personalDetails list. The optimistic personal details will have isOptimisticPersonalDetail as true
3. When searching, we can consider not showing the optimistic personalDetails that are associated with a fail-to-be-created report, if we don't want it to show in the search list even when the user didn't clear the report error yet.

This way, we'll maintain a good UX that are consistent with the pattern of error on creation in the app, and we'll not reintroduce the issue of invalid report earlier

What alternative solutions did you explore? (Optional)

If we want just want to remove the loading, we should fallback the title here to Hidden if it's empty and the report has creation error.

const hasCreationError = lodashGet(props.report, 'errorFields.createChat', null) && lodashGet(props.report, 'pendingFields.createChat', null);
    const shouldFallbackToHidden = !title && hasCreationError;

    if (shouldFallbackToHidden) {
        title = translate('common.hidden');
    }

We should also set the shouldUseFullTitle here to true if the shouldFallbackToHidden is true, otherwise the title will still not be shown because if shouldUseFullTitle is false, it will use the display names instead of the title.

shouldUseFullTitle={(isChatRoom || isPolicyExpenseChat || isChatThread || isTaskReport) || shouldFallbackToHidden}

We should do the same for the logic to show title in the LHN as well, to make sure it fallbacks to Hidden and not empty as currently.

Aside from the above main and alternative solution, I also notice another existing bug where sometimes the chat-creation error does not show when going online (must reload page for it to show), this is because in here we're using memoization but do not have errorFields as one of the criteria to rerender, this leads to the ReportActionItemCreated not being rerendered when the error comes, to fix it we just need to use errorFields (or a subfield of it, or its length) in the memoization as well to make sure the component will be rerendered when it changes.

[alitoshmatov]

Will take a look at it tomorrow

[MitchExpensify]

I don't quite understand the issue - What header are we referring to here for example?

[tienifr]

I don't quite understand the issue - What header are we referring to here for example?

@MitchExpensify This one at the top of the report, it's loading infinitely

[MitchExpensify]

Ah got it! I think this is too edgy and not obviously a part of a wave or VIP project - Closing