Fix: Long display name not being wrapped

[rdjuric]

Details

Fixes an issue where our display name wasn't respecting the size of it's container.

Fixed Issues

#3172

Tests

1. Wrote a long display name (first+last name, or email)
2. It was trimmed correctly on the chat and on the IOU details modal

QA Steps

1. Choose a long display name (first+last name, or email)
2. It should be trimmed correctly on the chat and on the IOU details modal

Tested On

• Web
• Mobile Web
• Desktop
• iOS
• Android

Screenshots

Web

Web.mov

Mobile Web

mWeb.mp4

Desktop

desktop.mov

iOS

iOS.mp4

Android

Android.mp4

[Luke9389]

Ok after thinking about this, I'm not sure if this is the best result. It works great, and your testing shows that, but I'm worried that if we ever want to use a ReportActionItemFragment with fragment.type = TEXT in a different context, we might be bummed about being restricted to one line.

@marcaaron, do you think this is pre-optimizing? Should we cross that bridge if/when we get to it, or do you think this concern is worth addressing now?

[marcaaron]

Yeah I agree @Luke9389. This solution will most likely go out of date as soon as we start adding other kinds of report actions to NewDot. Maybe better to pass this in as a prop to ReportActionItemFragment for now and then conditionally set the single line. Then apply it here where we are building the "person" text:

https://github.com/Expensify/Expensify.cash/blob/b330b3da015703a0e3ceacfb3c946bf565019752/src/pages/home/report/ReportActionItemSingle.js#L67-L75

[rdjuric]

@Luke9389 @marcaaron It's a good point! We would be restricting too much the use cases of our TEXT fragment.

This commit keeps the containerStyle in our ToolTip (we still don't want the content of our TEXT to go beyond the container), but changes the numberOfLines to be a conditional decided by the isSingleLine prop of our ReportActionItemFragment.

[Luke9389]

OK, these changes look good @rdjuric 👍

Just want to double-check, did you test the most recent commits on each platform? (I know it's a hassle but regressions have been sprouting up a lot lately).

[rdjuric]

@Luke9389
Yes! Updated the PR with videos testing the most recent commit on all platforms.

[Luke9389]

Awesome! Thanks! 👍

[OSBotify]

✋ This PR was not deployed to staging yet because QA is ongoing. It will be automatically deployed to staging after the next production release.

[parasharrajat]

Just found an regression https://expensify.slack.com/archives/C01GTK53T8Q/p1625174167354500

[rdjuric]

Thanks, @parasharrajat. Looking at it now.

[roryabraham]

Unfortunately the deploy comments are not working right now. This was deployed to staging yesterday.