[HOLD for payment 2023-12-20] [$500] Room - Long workspace name is not truncated in workspace selection page during room creation

[lanitochka17]

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.7-0
Reproducible in staging?: Y
Reproducible in production?: Y
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
Expensify/Expensify Issue URL:
Issue reported by: Applause - Internal Team
Slack conversation:

Action Performed:

Precondition: Have a long workspace name

1. Go to staging.new.expensify.com
2. Click + > New chat > Room
3. Click Workspace

Expected Result:

Long workspace name will be truncated

Actual Result:

Long workspace name is not truncated

Workaround:

Unknown

Platforms:

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

• Android: Native
• Android: mWeb Chrome
• iOS: Native
• iOS: mWeb Safari
• MacOS: Chrome / Safari
• MacOS: Desktop

Screenshots/Videos

Add any screenshot/video evidence

Bug6297774_1701458301612.20231202_031140.mp4

View all open jobs on GitHub

Upwork Automation - Do Not Edit

• Upwork Job URL: https://www.upwork.com/jobs/~01cf730d76f7807ef8
• Upwork Job ID: 1730706237151584256
• Last Price Increase: 2023-12-01
• Automatic offers:
• s77rt | Reviewer | 27955714
• abzokhattab | Contributor | 27955717

[melvin-bot]

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

[melvin-bot]

Triggered auto assignment to @NicMendonca (Bug), see https://stackoverflow.com/c/expensify/questions/14418 for more details.

[melvin-bot]

Bug0 Triage Checklist (Main S/O)

• This "bug" occurs on a supported platform (ensure Platforms in OP are ✅)
• This bug is not a duplicate report (check E/App issues and #expensify-bugs)
  • If it is, comment with a link to the original report, close the issue and add any novel details to the original issue instead
• This bug is reproducible using the reproduction steps in the OP. S/O
  • If the reproduction steps are clear and you're unable to reproduce the bug, check with the reporter and QA first, then close the issue.
  • If the reproduction steps aren't clear and you determine the correct steps, please update the OP.
• This issue is filled out as thoroughly and clearly as possible
  • Pay special attention to the title, results, platforms where the bug occurs, and if the bug happens on staging/production.
• I have reviewed and subscribed to the linked Slack conversation to ensure Slack/Github stay in sync

[melvin-bot]

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

[abzokhattab]

Proposal

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

Long workspace name is not truncated in workspace selection page during room creation

What is the root cause of that problem?

1. the workspace field uses the ValuePicker component to render items selections:

App/src/pages/workspace/WorkspaceNewRoomPage.js

Lines 217 to 223 in d181fd7

	label={translate('workspace.common.workspace')}
	items={workspaceOptions}
	onValueChange={setPolicyID}
	/>
	</View>
	{isPolicyAdmin && (
	<View style={styles.mhn5}>

2. The ValuePicker relies on ValueSelectorModal, which, in turn, uses a selection list to render items.

App/src/components/ValuePicker/ValueSelectorModal.js

Lines 67 to 72 in d521dd6

	<SelectionList
	sections={[{data: sectionsData}]}
	onSelectRow={onItemSelected}
	initiallyFocusedOptionKey={selectedItem.value}
	shouldStopPropagation
	/>

3. The selection list uses BaseSelectionList with a renderItem function, which employs BaseListItem to render each item.
   

   App/src/components/SelectionList/BaseSelectionList.js

   Lines 303 to 313 in 6cf91f6

   	<BaseListItem
   	item={item}
   	isFocused={isItemFocused}
   	isDisabled={isDisabled}
   	isHide={!maxToRenderPerBatch}
   	showTooltip={showTooltip}
   	canSelectMultiple={canSelectMultiple}
   	onSelectRow={() => selectRow(item, true)}
   	onDismissError={onDismissError}
   	shouldPreventDefaultFocusOnSelectRow={shouldPreventDefaultFocusOnSelectRow}
   	/>

4. the BaseListItems uses RadioListItem in our case:

   App/src/components/SelectionList/BaseListItem.js

   Line 32 in de53c93

   const ListItem = isUserItem ? UserListItem : RadioListItem;

5. The RadioListItem sets the text styles for the displayed items.
   

   App/src/components/SelectionList/RadioListItem.js

   Lines 12 to 15 in d521dd6

   	{Boolean(item.alternateText) && (
   	<Text style={[isFocused ? styles.sidebarLinkActiveText : styles.sidebarLinkText, styles.optionAlternateText, styles.textLabelSupporting]}>{item.alternateText}</Text>
   	)}

The problem arises because the Text component used in RadioListItem does not have the styling needed to truncate item labels.

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

since there is no tooltip in the /settings/workspaces list page, then we dont need to enable the tooltip here, we only need to truncate the text by changing the style to:

   <Text
                style={[styles.optionDisplayName, isFocused ? styles.sidebarLinkActiveText : styles.sidebarLinkText, item.isSelected && styles.sidebarLinkTextBold, styles.pre]}
                numberOfLines={1}
            >

POC:

Note: if we dont want to apply this truncation on every selection list then we can create a new boolean prop truncateText in the selectionList and set it to true whenever we want to truncate any list

[DylanDylann]

Proposal

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

• Room - Long workspace name is not truncated in workspace selection page during room creation

What is the root cause of that problem?

• Currently, the the workspace selection page is using RadioListItem to display its items.
• And it does not have the logic to truncate the text in case of long text.

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

• We need to handle the case of the long text: It should truncate the long text and if user hover over the elipsis, it will display the full text as we did in other sections. Can do it by updating:
  

  App/src/components/SelectionList/RadioListItem.js

  Line 11 in 1682be4

  <Text style={[styles.optionDisplayName, isFocused ? styles.sidebarLinkActiveText : styles.sidebarLinkText, item.isSelected && styles.sidebarLinkTextBold]}>{item.text}</Text>

  
  to:

            <DisplayNames
                fullTitle={item.text}
                tooltipEnabled
                numberOfLines={1}
                textStyles={[styles.optionDisplayName, isFocused ? styles.sidebarLinkActiveText : styles.sidebarLinkText, item.isSelected && styles.sidebarLinkTextBold]}
                shouldUseFullTitle
            />

• And we also need to handle the alternativeText section as we did above:
  

  App/src/components/SelectionList/RadioListItem.js

  Lines 13 to 15 in 1682be4

  	{Boolean(item.alternateText) && (
  	<Text style={[isFocused ? styles.sidebarLinkActiveText : styles.sidebarLinkText, styles.optionAlternateText, styles.textLabelSupporting]}>{item.alternateText}</Text>
  	)}

What alternative solutions did you explore? (Optional)

• NA

Result:

Screencast.from.02-12-2023.11.08.50.webm

[ishpaul777]

I reported this as bug when bugs were accepted from contributors but this was never logged to GH, @NicMendonca Can you check on slack this will be the last bug report from @ishpaul in #expensify-bugs channel and add me as reporter

[s77rt]

@abzokhattab Thanks for the proposal. Your RCA is correct. Limiting the number of lines (i.e. numberOfLines={1}) makes sense to me. However you also mentioned the need to change the style (adding styles.pre). Can you please elaborate why this is needed?