[$250] Room - Endless Loading of Header When Navigating to Thread of Mentioned Room

[kbecciv]

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: v1.4.65-0
Reproducible in staging?: y
Reproducible in production?: y
Issue reported by: Applause - Internal Testing

Action Performed:

1. Navigate to any room.
2. Type "#" and select the suggested room, then send the message.
3. Proceed to its thread.

Expected Result:

Upon entering the thread, the header enters an infinite loading state.

Actual Result:

The mentioned room should be displayed in the header as expected, without any endless loading.

Workaround:

n/a

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

Bug6460103_1713955694030.Screen_Recording_2024-04-24_at_3.45.34_AM.mp4

View all open jobs on GitHub

Upwork Automation - Do Not Edit

• Upwork Job URL: https://www.upwork.com/jobs/~0137b18b289d467863
• Upwork Job ID: 1783902532804722688
• Last Price Increase: 2024-05-17
• Automatic offers:
• tsa321 | Contributor | 0

[melvin-bot]

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

[kbecciv]

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

[kbecciv]

@isabelastisser 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.

[melvin-bot]

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

[melvin-bot]

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

[shahinyan11]

Proposal

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

Room - Endless Loading of Header When Navigating to Thread of Mentioned Room

What is the root cause of that problem?

Here we set isLoading to true if the title is not exists. We get title using ReportUtils.getReportName here in which we return empty string here if the report is policyRoom and do not have participants

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

Update this line like below. It is not specified exactly what should be displayed, so I suggested еру report?.reportName. We can update it to desired value

return getAdminRoomInvitedParticipants(parentReportAction, parentReportActionMessage) || report?.reportName;

What alternative solutions did you explore? (Optional)

[mollfpr]

@shahinyan11 I think the expected result should show the message in the header, but with your solution, it will show Chat Report which is the report name from the report.

We get title using ReportUtils.getReportName here in which we return empty string here if the report is policyRoom and do not have participants

Your root cause might not be correct, the issue is only reproduced if the message just contains the mention tag.

Screen.Recording.2024-04-29.at.12.24.51.mp4

[mollfpr]

If you try to edit the message with a message that only contains the report mentioned, it will display in the header. So to be consistent we should display the report mentioned in the header.

Screen.Recording.2024-04-29.at.12.35.55.mp4

We also show the mention tag in the header report.

[isabelastisser]

@mollfpr, any updates? Are we still waiting for proposals?

[mollfpr]

@isabelastisser Still waiting for @shahinyan11 and other proposals.

[melvin-bot]

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

[tsa321]

Proposal

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

Header of thread report displayed as skeleton view if the parent report action message is report mention.

What is the root cause of that problem?

In HeaderView the skeleton view will be displayed if isLoading:

App/src/pages/home/HeaderView.tsx

Line 220 in 035adb8

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

is true. It's value will be true in this issue because title variabletitle = ReportUtils.getReportName(reportHeaderData); is empty string.
This function will go to here and then in here and return empty string. This is because reportAction.message[0].text is empty string. The parent reportAction.message[0].text is empty but reportAction.message[0].html is something like <mention-report reportID=\"50451872397987297398\"/>

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

In this line:

App/src/libs/ReportUtils.ts

Line 2949 in 035adb8

return Str.removeSMSDomain(reportAction?.message?.[0]?.text ?? '');

We could use reportAction?.message?.[0]?.html and detect all occurrence of pattern <mention-report reportID=\"xxxxx\"/> by using regex and replace it by it's report name, and add the report names in reportAction?.message?.[0]?.text in that line.

The code could be:

Code:

function embedMentionedReportName(reportAction){
    const {html, text} = reportAction?.message?.[0];
    if (!html) {
        return text;
    }

    const mentionReportRegex = /(\<mention-report reportID\=\"(\d+)\"\/>)/gm;
    if (!mentionReportRegex.test(html)) {
        return text;
    } 

    const splittedText = text.split(" ");    
  
    // Remove tags except for mention-report
    const filteredHtml = html.replace(/(\<(?!mention-report).*?\>)/gm, "");

    // Embed report name into html enclosed by tag, for exampple: <#announce>
    const htmlWithReportName = filteredHtml.replace(/(\<mention-report reportID\=\"(\d+?)\"\/\>)/gm, 
        (match, p1, p2) => `<${getReportName(getReport(p2))}>`
    );
    const splittedHtmlWithReportName = htmlWithReportName.split(" ");

    const taggedReportNameRegex = /\<(.+)\>/gm;
    splittedHtmlWithReportName.forEach((str, index) => {
        const match = taggedReportNameRegex.exec(str ?? "");        
        if (match) {
            const cSpliitedText = splittedText[index] ?? "";
            splittedText[index] = match.index > 0 ? cSpliitedText + match[1] : match[1] + cSpliitedText;  
        }  
        taggedReportNameRegex.lastIndex = 0;
    })

    return splittedText.join(" ");
}

Then in here:

App/src/libs/ReportUtils.ts

Line 2949 in 035adb8

return Str.removeSMSDomain(reportAction?.message?.[0]?.text ?? '');

call it with:

    const embeddedMentionedReportName = embedMentionedReportName(reportAction);
    return Str.removeSMSDomain( embeddedMentionedReportName ?? '');

What alternative solutions did you explore?

We could use ExpensiMark htmlToText to parse the html string.

[isabelastisser]

@mollfpr can you please review the proposal above? Thanks!

[mollfpr]

@tsa321 I'm incline with your approach, could you share the result of your proposal?

[mvtglobally]

Issue not reproducible during KI retests. (First week)

[tsa321]

@mollfpr

The code could be:

Code:

function embedMentionedReportName(reportAction){
    const {html, text} = reportAction?.message?.[0];
    if (!html) {
        return text;
    }

    const mentionReportRegex = /(\<mention-report reportID\=\"(\d+)\"\/>)/gm;
    if (!mentionReportRegex.test(html)) {
        return text;
    } 

    const splittedText = text.split(" ");    
  
    // Remove tags except for mention-report
    const filteredHtml = html.replace(/(\<(?!mention-report).*?\>)/gm, "");

    // Embed report name into html enclosed by tag, for exampple: <#announce>
    const htmlWithReportName = filteredHtml.replace(/(\<mention-report reportID\=\"(\d+?)\"\/\>)/gm, 
        (match, p1, p2) => `<${getReportName(getReport(p2))}>`
    );
    const splittedHtmlWithReportName = htmlWithReportName.split(" ");

    const taggedReportNameRegex = /\<(.+)\>/gm;
    splittedHtmlWithReportName.forEach((str, index) => {
        const match = taggedReportNameRegex.exec(str ?? "");        
        if (match) {
            const cSpliitedText = splittedText[index] ?? "";
            splittedText[index] = match.index > 0 ? cSpliitedText + match[1] : match[1] + cSpliitedText;  
        }  
        taggedReportNameRegex.lastIndex = 0;
    })

    return splittedText.join(" ");
}

Then in here:

App/src/libs/ReportUtils.ts

Line 2949 in 035adb8

return Str.removeSMSDomain(reportAction?.message?.[0]?.text ?? '');

call it with:

    const embeddedMentionedReportName = embedMentionedReportName(reportAction);
    return Str.removeSMSDomain( embeddedMentionedReportName ?? '');

Result:

macos-web-d.mp4

[melvin-bot]

@mollfpr @isabelastisser 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!

[isabelastisser]

not overdue.

[mollfpr]

Almost looks good! Just one issue if we send the message a report mentions and a text, it removes the space between them.

Screen.Recording.2024-05-13.at.22.03.07.mp4

[tsa321]

@mollfpr I cannot reproduce this bug in staging, maybe already fixed from BE ?

[mollfpr]

I still able reproduce the issue in dev and staging. The key is we should wait until the API is send.

Screen.Recording.2024-05-14.at.01.48.52.mp4

[tsa321]

@mollfpr you are right

Here is revised version of the function:

code:

function embedMentionedReportName(reportAction){
    const {html, text} = reportAction?.message?.[0];

    if (!html) {
        return text;
    }

    const mentionReportRegex = /(\<mention-report reportID\=\"(\d+)\"\/>)/gm;
    if (!mentionReportRegex.test(html)) {
        return text;
    } 

    let splittedText = text.split(" ");    
  
    // Remove tags except for mention-report
    const filteredHtml = html.replace(/(\<(?!mention-report).*?\>)/gm, "");

    // Embed report name into html enclosed by tag, for exampple: <#announce>
    const htmlWithReportName = filteredHtml.replace(/(\<mention-report reportID\=\"(\d+?)\"\/\>)/gm, 
        (match, p1, p2) => `<${getReportName(getReport(p2))}>`
    );
    const splittedHtmlWithReportName = htmlWithReportName.split(" ");

    const numberOfMentionedRoomInFront = splittedHtmlWithReportName.findIndex((item) => item[0] !== '<' && item[1] !=='>'); 
    if (numberOfMentionedRoomInFront > 0) {
        splittedText = Array(numberOfMentionedRoomInFront).fill("").concat(splittedText);
    }

    const taggedReportNameRegex = /\<(.+)\>/gm;
    splittedHtmlWithReportName.forEach((str, index) => {
        const match = taggedReportNameRegex.exec(str ?? "");        
        if (match) {
            const cSpliitedText = splittedText[index] ?? "";
            splittedText[index] = match.index > 0 ? cSpliitedText + match[1] : match[1] + cSpliitedText;  
        }  
        taggedReportNameRegex.lastIndex = 0;
    })

    return splittedText.join(" ");
}

But I think Back end fix is better for this issue. I am not sure, maybe better fixed in front end.

[mollfpr]

Thanks for the update @tsa321! I'll try the update when the BE issue is resolved.

[melvin-bot]

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

[isabelastisser]

Hi @mollfpr, what are the next steps here?

[mollfpr]

Sorry for the delay 🙏

The proposal from @tsa321 looks good to me! We probably can improve the logic on the PR but overall we are all good here.

🎀 👀 🎀 C+ reviewed!

[melvin-bot]

Triggered auto assignment to @luacmartins, see https://stackoverflow.com/c/expensify/questions/7972 for more details.

[melvin-bot]

📣 @tsa321 🎉 An offer has been automatically sent to your Upwork account for the Contributor role 🎉 Thanks for contributing to the Expensify app!

Offer link
Upwork job
Please accept the offer and leave a comment on the Github issue letting us know when we can expect a PR to be ready for review 🧑‍💻
Keep in mind: Code of Conduct | Contributing 📖

[mvtglobally]

Issue not reproducible during KI retests. (Second week)

[tsa321]

Thank you, maybe I will submit a PR in one or two days.

[melvin-bot]

@luacmartins @mollfpr @isabelastisser @tsa321 this issue is now 4 weeks old, please consider:

• Finding a contributor to fix the bug
• Closing the issue if BZ has been unable to add the issue to a VIP or Wave project
• If you have any questions, don't hesitate to start a discussion in #expensify-open-source

Thanks!

[isabelastisser]

It looks like the PR was submitted here: #42504

[luacmartins]

#40928 (comment) I could still reproduce the issue just now.