[HOLD for payment 2023-08-03] [$1000] NEW FEATURE: Don't truncate long room names in room details page

[kavimuru]

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

---

Action performed:

1. Click Global create > new room, and enter a long room name (more than 50 characters).
2. Notice that the full room name is listed in the welcome message, and truncated in the room header.
3. Click into room details and notice that the room name in room details is also truncated.

Expected result:

We'd show the full room name in room details, as this should be the source of truth for what the room actually is. If the room name is long, we should just break it into multiple lines in the room details.

Actual result:

We truncate the room name in room details. Meaning you cannot see the full room name there.

Workaround:

Can the user still use Expensify without this being fixed? Have you informed them of the workaround?

Platforms:

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

• Android / native
• Android / Chrome
• iOS / native
• iOS / Safari
• MacOS / Chrome / Safari
• MacOS / Desktop

Version Number:
Reproducible in staging?:
Reproducible in production?:
If this was caught during regression testing, add the test name, ID and link from TestRail:
Email or phone of affected tester (no customers):
Logs: https://stackoverflow.com/c/expensify/questions/4856
Notes/Photos/Videos: Any additional supporting documentation

Expensify/Expensify Issue URL:
Issue reported by: @joekaufmanexpensify
Slack conversation: https://expensify.slack.com/archives/C049HHMV9SM/p1689026712373409

View all open jobs on GitHub

Upwork Automation - Do Not Edit

• Upwork Job URL: https://www.upwork.com/jobs/~01f72d5afba7910b13
• Upwork Job ID: 1678728351340113920
• Last Price Increase: 2023-07-11

[melvin-bot]

Triggered auto assignment to @jliexpensify (NewFeature), see https://stackoverflowteams.com/c/expensify/questions/14418#:~:text=BugZero%20process%20steps%20for%20feature%20requests for more details.

[melvin-bot]

Triggered auto assignment to Design team member for new feature review - @shawnborton (NewFeature)

[jliexpensify]

@shawnborton let me know if you'd like this as External!

[dhairyasenjaliya]

Proposal

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

• Don't truncate long room names in room details page

What is the root cause of that problem?

• New Feature request 


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

• We need to define max number of line to display on room detail page for consistency as we have set max room length of 79 We can ensure to add max number of line to 4 which we can decide but I prefer 4 as it display full room name

• Also if we need only for room then we need to add conditional check and set numberOfLines set to custom only if chat type is room

• We need to add custom numberOfLine to ReportDetailsPage.js inside that we have used <DisplayNames>

Note: Currently on this GH it mentioned only for native iOS and Android so that is the reason I have not added changes for the web if needed we need to adjust pre style only

Result

cc @shawnborton

[Pujan92]

Proposal

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

Don't truncate the room name in the details page which help user to see full room name

What is the root cause of that problem?

Currently, we are passing numberOfLines to 1 for showing the title which truncates the text and only shows a single line.

App/src/pages/ReportDetailsPage.js

Line 153 in 38890e2

numberOfLines={1}

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

1. We only need to set the numberOfLines to 1 when it is not a chat room. Setting to 0 will result in unsetting this value, which means that no lines restriction will be applied.
   numberOfLines={isChatRoom ? 0 : 1}
   

   App/src/pages/ReportDetailsPage.js

   Line 153 in 38890e2

   numberOfLines={1}

2. To allow it to break in multiple lines we also need to take out the style styles.pre from here.
   

   App/src/pages/ReportDetailsPage.js

   Line 154 in 38890e2

   textStyles={[styles.textHeadline, styles.textAlignCenter, styles.pre]}

   
   isChatRoom ? undefined : styles.pre

Note: It is applied to all platforms, if requires only for small devices then we need to add withWindowDimensions and with isChatRoom condition in above 2 points we also need to add && props.isSmallScreenWidth.

Result

[shawnborton]

Yup we can do this external, thanks!

[melvin-bot]

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