[$250] Group chat - Group header 'Chat report' displayed briefly after creating a group

[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.10-2 Reproducible in staging?: Y Reproducible in production?: N 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): shussain+chrome1@applausemail.com Issue reported by: Applause - Internal Team

Issue found when executing PR https://github.com/Expensify/App/pull/44702

Action Performed:

1. Open the app.
2. Click on the (+) plus icon and choose "Start Chat"
3. Select multiple people to add to the group.
4. Click on "Next"
5. Click on the avatar and upload an image.
6. After uploading, click on "View photo"
7. Remove the image and upload it again.
8. Create the group and check the header.

Expected Result:

The group header should correctly display the group name immediately after the group is created, without any temporary display of 'Chat report'

Actual Result:

Group header 'Chat report' displayed briefly after creating a group

Workaround:

Unknown

Platforms:

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

• [x] Android: Native
• [x] Android: mWeb Chrome
• [ ] iOS: Native
• [ ] iOS: mWeb Safari
• [x] MacOS: Chrome / Safari
• [x] MacOS: Desktop

Screenshots/Videos

Add any screenshot/video evidence

https://github.com/user-attachments/assets/17d82af3-5ecb-478d-93b5-9ef27396bd73

View all open jobs on GitHub

Upwork Automation - Do Not Edit

• Upwork Job URL: https://www.upwork.com/jobs/~012281ce39f663be9d
• Upwork Job ID: 1815437242807531371
• Last Price Increase: 2024-08-05

Issue Owner

Current Issue Owner: @ishpaul777

[melvin-bot[bot]]

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

[github-actions[bot]]

:wave: 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.

[lanitochka17]

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

[mountiny]

@b4s36t4 @mollfpr this was found when testing this PR https://github.com/Expensify/App/pull/44702 any chance its regression from it?

Removing the blocker labels as this is super minor issue

[mountiny]

This is fixed in the revert

https://github.com/user-attachments/assets/a8e11612-352e-48d9-a930-a6316f23abd2

[mollfpr]

https://github.com/user-attachments/assets/5fbc9aad-8750-482f-bbb7-fb82608303fb

@mountiny I tried the revert but it's not fix this issue.

[b4s36t4]

Yea, @mollfpr I think our PR is not the offending PR for these issues.

[melvin-bot[bot]]

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

[luacmartins]

Gonna make this one external

[melvin-bot[bot]]

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

[mountiny]

@b4s36t4 @mollfpr you are right, I have done one step differently and it caused this issue to not be reproducible 🤦

[kabeer95]

Proposal

Problem Statement

When creating a new group chat, the "Chat Report" header is briefly displayed in the group header before being replaced with the correct group name.

Root Cause

The root cause of this problem is that the code is incorrectly setting the group header to "Chat Report" before updating it to the correct group name.

Proposed Solution

To solve this problem, I propose updating the code to ensure that the correct group name is displayed in the group header immediately after creating the group, without displaying the "Chat Report" header.

Changes To implement this solution, we need to make the following changes:

Update the code that sets the group header to use the correct group name instead of "Chat Report". Ensure that the group name is displayed immediately after creating the group, without any delay or flickering. Solution Code

javascript

// Update the group header to use the correct group name
const groupName = getGroupName(); // Get the correct group name
setGroupHeader(groupName); // Set the group header to the correct group name

// Ensure the group name is displayed immediately after creating the group
useEffect(() => {
  setGroupHeader(groupName); // Set the group header to the correct group name
}, [groupName]);
Expected Result The group header should correctly display the group name immediately after the group is created, without any temporary display of 'Chat report'.

Actual Result Group header 'Chat report' displayed briefly after creating a group.

Alternative Solutions

I explored the following alternative solutions:

Delaying the display of the group header until the correct group name is available, but this may cause a brief delay in displaying the group header. Displaying a loading indicator or placeholder text in the group header until the correct group name is available, but this may not provide a seamless user experience.

[melvin-bot[bot]]

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

[dhruv-m-patel]

Proposal

Problem Statement

When creating a new group chat, the "Chat Report" header is briefly displayed in the group header before being replaced with the correct group name.

Root Cause

The Report action component seems to be opening chat report while report creation is in progress and is using defaults for faster creation while also using it for display which ends up briefly displaying wrong group name in header.

Proposed Solution

Provide group name and use default header i.e. Chat Report as a fallback value when opening Chat Report for the newly created group while report is also being created.

Changes To implement this solution, we need to make the following changes:

Update Report component's openReport to implement the above suggested fix.

Alternative Solutions

After analyzing the reported issue, above suggested fix seems to work. The other alternative rather than using fallback would be to configure optimisticReport correctly beforehand without overrides done for new report if opening a group chat.

[melvin-bot[bot]]

📣 @dhruv-m-patel! 📣 Hey, it seems we don’t have your contributor details yet! You'll only have to do this once, and this is how we'll hire you on Upwork. Please follow these steps:

1. Make sure you've read and understood the contributing guidelines.
2. Get the email address used to login to your Expensify account. If you don't already have an Expensify account, create one here. If you have multiple accounts (e.g. one for testing), please use your main account email.
3. Get the link to your Upwork profile. It's necessary because we only pay via Upwork. You can access it by logging in, and then clicking on your name. It'll look like this. If you don't already have an account, sign up for one here.
4. Copy the format below and paste it in a comment on this issue. Replace the placeholder text with your actual details. Format:

   Contributor details
   Your Expensify account email: <REPLACE EMAIL HERE>
   Upwork Profile Link: <REPLACE LINK HERE>

[dhruv-m-patel]

Contributor details Your Expensify account email: dhruvpatel.work@gmail.com Upwork Profile Link: https://www.upwork.com/freelancers/~0135a9ff376a6b5913

[melvin-bot[bot]]

✅ Contributor details stored successfully. Thank you for contributing to Expensify!

[ishpaul777]

I am not able to reproduce this issue only step that is missing is "After uploading, click on "View photo" which is removed in https://github.com/Expensify/App/pull/45863, Can this be retested if its still reproducable?

@lanitochka17

[ishpaul777]

@sonialiap Can you please request a retest 🙇

[melvin-bot[bot]]

📣 It's been a week! Do we have any satisfactory proposals yet? Do we need to adjust the bounty for this issue? 💸

[melvin-bot[bot]]

@sonialiap, @luacmartins, @ishpaul777 Uh oh! This issue is overdue by 2 days. Don't forget to update your issues!

[ishpaul777]

not overdue, waiting a retest to check if this is still reproducable..

[melvin-bot[bot]]

@sonialiap, @luacmartins, @ishpaul777 Uh oh! This issue is overdue by 2 days. Don't forget to update your issues!

[ishpaul777]

i have requested retest https://expensify.slack.com/archives/C02NK2DQWUX/p1722623392144379?thread_ts=1722623249.020149&cid=C02NK2DQWUX

[melvin-bot[bot]]

@sonialiap @luacmartins @ishpaul777 this issue was created 2 weeks ago. Are we close to approving a proposal? If not, what's blocking us from getting this issue assigned? Don't hesitate to create a thread in #expensify-open-source to align faster in real time. Thanks!

[roryabraham]

Applause reports this is not reproducible

[luacmartins]

I think we can close this issue then.

[melvin-bot[bot]]

📣 It's been a week! Do we have any satisfactory proposals yet? Do we need to adjust the bounty for this issue? 💸

[ishpaul777]

Yes i think this is good to close 👍

[luacmartins]

Closing. Thanks everyone!