[No QA] Rename and cleanup OptionRowTitle

[roryabraham]

Details

• Renames OptionRowTitle to a more generic DisplayNames component
• Decouples the component from any 'option' app logic (i.e: it just takes in an array of objects that look like:

{displayName: 'Rory Abraham', tooltip: '[email protected]'}

• Generalizes a style used by the component into a utility.
• I also snuck in one fix to a propTypes warning present on master.

Fixed Issues

No issue, coming from this comment.

Tests (web/desktop)

Run the app, make sure tooltips are working as expeceted on report titles and option rows.

Tests (mWeb/ios/android)

Run the app, make sure there are no regressions.

Tested On

• Web
• Mobile Web
• Desktop
• iOS
• Android

Screenshots

Web

Desktop

[parasharrajat]

Could you please fix the Prop check here as well? undefined to {}
https://github.com/Expensify/Expensify.cash/blob/d3f1d28478357e2a66b155e660def191d6ed79a8/src/pages/home/sidebar/OptionRow.js#L139-L150
I am closing my PR #2212 in favour of this.

[roryabraham]

@parasharrajat I'm not seeing how the secondAvatarStyle is related to this PR

[roryabraham]

Also @parasharrajat, it looks like from your other PR we can simplify hasEllipsis to one file, so I'll add that here too. Can you help me come up with a more generic name that describes what this function does? Maybe hasContentWiderThanScrollWidth?

[parasharrajat]

Name looks promising. 👍

@parasharrajat I'm not seeing how the secondAvatarStyle is related to this PR

There was prop type error and I thought as we are changing OptionRow so this can be fixed as well.

[marcaaron]

Sorry was a little slow to review this and there's a conflict now.

[roryabraham]

All good, merge conflict resolved

[marcaaron]

Changes look great to me. Just had a few small comments.

[marcaaron]

Not sure where to put this, but I think as a convention we should not use pascal case for things that are not namespaces or react components. If you look most other propTypes files are using camelcase.

[roryabraham]

Hmmm... confused by this comment because a case-insensitive global search of import prop in Expensify.cash shows that almost all usages use PascalCase:

The exceptions are when we have a propTypes file, we export {propTypes, defaultProps} using camelCase. Were you referring to the file name? I think that's what you meant, so I changed the filename to use camelCase. It looks like we have been pretty inconsistent about this so far, so happy to standardize.

[marcaaron]

Sorry @roryabraham I was referring to the file name.