[Tracking] Single line Text is not clipping correctly

[parasharrajat]

If you haven’t already, check out our contributing guidelines for onboarding and email contributors@expensify.com to request to join our Slack channel!

---

Due to the recent upgrade to RN-web 0.17.5, we started to face a couple of issues where Text is not clipping correctly.

If you use <Text numberOfLines={1} />, it should be clipped with an ellipsis at the end. But this is not the case anymore. There is no fix effect rather multiple side-effects.

List of issues

• fix: Long filename handling in Preview #7097 (review)
• [HOLD for payment 2022-01-27] Web - Group chat contacts are not showing ellipsis - Reported by @Tushu17  #6913
• Typing indicator under the composer is clipped from half of the screen.
• Message me is clipped from half of the screen. https://expensify.slack.com/archives/C01GTK53T8Q/p1642409283049900

Platform:

Where is this issue occurring?

• Web

Solution

I have submitted a PR to fix this issue upstream necolas/react-native-web#2193 which I am waiting to be merged.

So that we can upgrade our dependency.

Slack : https://expensify.slack.com/archives/C01GTK53T8Q/p1642087714433600

[MelvinBot]

Triggered auto assignment to @tjferriss (AutoAssignerTriage), see https://stackoverflow.com/c/expensify/questions/4749 for more details.

[mallenexpensify]

Removed @tjferriss and assigned myself. @parasharrajat is anything actionable here? Do you need me or another internal employee/engineer to anything?

[parasharrajat]

Thanks, @mallenexpensify.
Yeah based on the discussion. Could you please help me get paid for this?

[mallenexpensify]

Still a bit confused... likely because this tracking issue isn't a standard template. Can you list off GH issues, associated PRs and amount owed? Thanks @parasharrajat

[parasharrajat]

@mallenexpensify
It is in the issuing body. There are many that I didn't add to the list as the issue might look the same but for a different location. Mostly, I was hoping for one fixed amount, not for all the issues based on the following work done.

1. This issue required me to create an issue and PR on the third-party repository.
2. After there was no response, I sent the same PR to our Fork Fix ellipsis issues for Text numberOfLines={1} react-native-web#5.
3. Then another PR to merge that change in our repo.

I am not sure what is structure to calculate the amount but that was all the work done.

[mallenexpensify]

Does $500 seem fair? If not, I'll loop in a CME to review

[parasharrajat]

Yeah, it seems fair to me.

[mallenexpensify]

Invited you to this job, let me know when you've accepted
https://www.upwork.com/jobs/~016f56f9544eeb82d4

[parasharrajat]

Accepted. Thanks for looking into this.

[mallenexpensify]

Hired, let me know when you've accepted. This issue can be closed once paid, right?

[parasharrajat]

Ok. I accepted it. Fix was deployed to prod in #7254 yesterday. it can be closed now but I have no issues if you want to wait for 7 days.

[mallenexpensify]

Paid since this is a unique issue and I don't want to forget. cc @Beamanator , let's all think of how to best manage fixes in external libs. I guess we just need one issue like this that has all the details and for the proper labels to be added so that CM and likely CME (so they can help determine price/complexity?) have 👀 on the fix and so the CM can pay.

[Beamanator]

Could we make an issue template for these kinds of fixes? It would be nice to have this kind of tracking issue that links to:

1. The PR in the external repo (or even an Expensify fork of an external repo)
2. The PR for E/App which starts using the updated version of the external lib (or fork)
   • This PR may include additional E/App changes
3. The E/App issue that required the external lib change to be made

Also it could be useful to discuss payment / price for such issues. I'm thinking something like this is fair:

• $250 for the change to the external repo
  • This changes if the E/App job was doubled, so take whatever the job price is here
• If the change is in a totally external repo (not an Expensify fork of an external repo), extra $250 for getting the change integrated into our Repo
  • I don't think it's needed for our forks, let me know if y'all disagree
• Obviously if there's some change that takes extra extra effort, we go from there

Think that's a good place to start @mallenexpensify @parasharrajat ? We can bring it to #expensify-open-source for more 👀

[parasharrajat]

Yeah, I liked the template suggestion.

[mallenexpensify]

Thanks @Beamanator . I like the breakdown. My only question/concern is... how often does this happen? Now and in the future? If it's only a handful of times a year, do we want a template featured that rarely gets used?

If not we could just add to an internal StackOverflow post but, ideally, it's much better to have these details visible to contributors somewhere

[Beamanator]

Yeah good question, looks like so far I can see:

• 5 custom updates to react-native-web: https://github.com/Expensify/react-native-web/pulls?q=is%3Apr+is%3Aclosed
• 1 custom update to react-native: https://github.com/Expensify/react-native/pulls?q=is%3Apr+is%3Aclosed
• 1 to react-native-google-places-autocomplete: https://github.com/Expensify/react-native-google-places-autocomplete/pulls?q=is%3Apr+is%3Aclosed
• 6 to clipboard: https://github.com/Expensify/clipboard/pulls?q=is%3Aopen+is%3Apr

So not tooo many, but kinda a decent amount of times 🤔 I'd say it's worth it if this template is actually super super useful for CMs / CMEs / devs themselves.

If not we could just add to an internal StackOverflow post

Sorry what do you mean by this?

[mallenexpensify]

For the internal Stack Overflow post, it's be for CMs (and maybe CMEs) so they'd have something to reference in case they got assigned to, or ran across, a tracking issue.

Maybe what is better is if we don't consider them tracking issues (even though could be formatted/used as one) but single issues with set prices and deliverables. @Beamanator , @parasharrajat do you think that's an easier/better option?

[parasharrajat]

Yeah, usually they are created as normal issues. I created this tracking issue as I saw there were many issues that started to pop up due to the same cause. So I thought to track them all together.

But I found the solution along the way so I just referenced this to clearly state that the fix solves all the issues and we have a track of it.

[mallenexpensify]

Ok.. so in the future we should be able to have Applause or an employee create a normal job with a set price and deliverable and you an use it like a tracking issue without need to have [Tracking] in the title, right?

[parasharrajat]

Yeah, I can go through the normal bug reporting flow. I can specify all the info on the bug report and Applause/employee can feed that in here.

A good example of a tracking issue is #7363.

[Beamanator]

Cool so I guess we'll :donothing: for now 😅 Unless it would be nice to have another section of the standard issue template called "related issues / PRs"?

[mallenexpensify]

Since it's not too common I think we can include them under Notes/Photos/Videos, maybe?
Or.. just manually add a related issues / PRs header section to the OP if/when needed

[mallenexpensify]

A good example of a tracking issue is #7363.

YES! I'm not suggesting tracking issues aren't good or helpful, I am a BIG fan. Let's just keep payments dedicated to the non-tracking issues that the tracking issues links too.

[parasharrajat]

We are good here. If anything else is needed, feel free to reopen.