search

Expensify / App

Welcome to New Expensify: a complete re-imagination of financial collaboration, centered around chat. Help us build the next generation of Expensify by sharing feedback and contributing to the code.
https://new.expensify.com
MIT License
2.96k stars 2.47k forks source link

[HOLD for payment 2024-05-09] [$250] LHN - HTML "<h1>" tag can be seen on the #admins room LHN preview #40348

Open izarutskaya opened 2 weeks ago

izarutskaya commented 2 weeks ago

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: 1.4.61.8 Reproducible in staging?: Y Reproducible in production?: Y Found when executing PR : https://github.com/Expensify/Expensify/issues/380529 Logs: https://stackoverflow.com/c/expensify/questions/4856 Issue reported by: Applause-Internal team

Action Performed:

  1. Log in with a new Gmail account
  2. Create a workspace
  3. Navigate to the LHN

Expected Result:

HTML tags shouldn't be visible.

Actual Result:

HTML "

" tag can be seen on the #admins room LHN preview. It's not visible in the room.

Workaround:

Unknown

Platforms:

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

Screenshots/Videos

Bug6451424_1713287386029!Capture (1)

View all open jobs on GitHub

Upwork Automation - Do Not Edit
  • Upwork Job URL: https://www.upwork.com/jobs/~01b3428578236ce20d
  • Upwork Job ID: 1780883160992833536
  • Last Price Increase: 2024-04-18
  • Automatic offers:
    • GandalfGwaihir | Contributor | 0
Issue OwnerCurrent Issue Owner: @twisterdotcom
melvin-bot[bot] commented 2 weeks ago

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

izarutskaya commented 2 weeks ago

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

izarutskaya commented 2 weeks ago

We think this issue might be related to the #collect project.

twisterdotcom commented 2 weeks ago

Pretty sure this is a dupe

GandalfGwaihir commented 2 weeks ago

Proposal

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

LHN option list content is not rendered properly and we see the html tags in report message

What is the root cause of that problem?

The API responds us HTML text when we receive OpenReport:

Screenshot 2024-04-17 at 7 03 55 PM

This is necessary because we render this HTML in main report screen, but we do not convert this to normal text when we display the message in LHN: https://github.com/Expensify/App/blob/1f694e2d053f51e056c26cd61f399d4193ce0d49/src/components/LHNOptionsList/OptionRowLHN.tsx#L217-L225

This results in us seeing the content with HTML tags

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

We need to convert this message to normal text first before being display, we can use htmlToText util from Expensify-common below: https://github.com/Expensify/App/blob/1f694e2d053f51e056c26cd61f399d4193ce0d49/src/components/LHNOptionsList/OptionRowLHN.tsx#L223

{optionItem.alternateText ? (
                                        <Text
                                            style={alternateTextStyle}
                                            numberOfLines={1}
                                            accessibilityLabel={translate('accessibilityHints.lastChatMessagePreview')}
                                        >
                                            {parser.htmlToText(optionItem.alternateText)}
                                        </Text>
                                    ) : null}

We should also remove the styles.pre from alternateTextStyle as we no longer need paragraph whitespaces to be shows for the LHN text:

https://github.com/Expensify/App/blob/1f694e2d053f51e056c26cd61f399d4193ce0d49/src/components/LHNOptionsList/OptionRowLHN.tsx#L61-L63

Result

Result Video https://github.com/Expensify/App/assets/110545952/1473d508-1ecf-4e05-aa2d-2225efcedf52
GandalfGwaihir commented 2 weeks ago

Pretty sure this is a dupe

Can you please post the dupe if you find it, I will also search for it @twisterdotcom

twisterdotcom commented 2 weeks ago

Yes, sorry, being pulled into something else but will look again in a bit. I opened this tab, said that, searched and immediately got distracted, my bad.

GandalfGwaihir commented 2 weeks ago

haha, no worries

GandalfGwaihir commented 2 weeks ago

No luck finding the dupe :), Are you sure that you saw this issue before @twisterdotcom ?

twisterdotcom commented 2 weeks ago

So, here are the issues I think I was thinking about:

https://github.com/Expensify/Web-Expensify/pull/37784 https://github.com/Expensify/App/issues/20590

Basically, I think that we show HTML in the LHN is expected, given @puneetlath closed the last issue I see for this above.

Going to get a C+ involved for their take too, because I agree this would be nice to clean up though if you can do it.

melvin-bot[bot] commented 2 weeks ago

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

melvin-bot[bot] commented 2 weeks ago

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

GandalfGwaihir commented 2 weeks ago

Basically, I think that we show HTML in the LHN is expected, given @puneetlath closed the last issue I see for this above.

I read the issue, that was related BE sending wrong messages, over here BE does send the right message but we do not parse it correctly :), would like to hear if @ntdiary agrees with me too ;)

allroundexperts commented 2 weeks ago

Taking over!

allroundexperts commented 2 weeks ago

I think given we want to support HTML in LHN, we can go forward with @GandalfGwaihir's proposal as its simple enough and makes sense.

🎀 👀 🎀 C+ reviewed

melvin-bot[bot] commented 2 weeks ago

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

GandalfGwaihir commented 1 week ago

friendly bump to @tylerkaraszewski for assignment

melvin-bot[bot] commented 1 week ago

📣 @GandalfGwaihir 🎉 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 📖

GandalfGwaihir commented 1 week ago

PR ready for review c.c. @allroundexperts

GandalfGwaihir commented 4 days ago

This issue PR will also fix https://github.com/Expensify/App/issues/41141 ;)

melvin-bot[bot] commented 18 hours ago

Reviewing label has been removed, please complete the "BugZero Checklist".

melvin-bot[bot] commented 18 hours ago

The solution for this issue has been :rocket: deployed to production :rocket: in version 1.4.69-2 and is now subject to a 7-day regression period :calendar:. Here is the list of pull requests that resolve this issue:

If no regressions arise, payment will be issued on 2024-05-09. :confetti_ball:

For reference, here are some details about the assignees on this issue:

melvin-bot[bot] commented 18 hours ago

BugZero Checklist: The PR fixing this issue has been merged! The following checklist (instructions) will need to be completed before the issue can be closed: