[HOLD for Payment OCT 08] [$250] [Search v2.3] - Default name is not displayed correctly for multiline system message thread

@paultsimura

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: 9.0.36-0
Reproducible in staging?: Y
Reproducible in production?: Y
Email or phone of affected tester (no customers): applausetester+kh010901@applause.expensifail.com
Issue reported by: Applause Internal Team

Action Performed:

Go to staging.new.expensify.com
Go to DM.
Submit an expense with a multiline description.
Go to transaction thread.
Click Description.
Edit the description while maintaining the multiline format and save it.
Right click on the system message > Reply in thread.
Send a reply in thread.
Go to Search > Chats.
Click Filters > Select "In".
Select the thread in Step 8 > Save.
Click Save search.

Expected Result:

The title of the saved search should only have one line.

Actual Result:

The title of the saved search has multiple lines and it is not displayed correctly.

Workaround:

Unknown

Platforms:

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

Screenshots/Videos

Bug6606270_1726554285396.20240917_141656.mp4

Bug6606270_1726554285396!Screenshot_2024-09-17_at_14 22 04

View all open jobs on GitHub

Upwork Automation - Do Not Edit

Upwork Job URL: https://www.upwork.com/jobs/~021836683698134866207
Upwork Job ID: 1836683698134866207
Last Price Increase: 2024-09-19
Automatic offers:

paultsimura | Reviewer | 104047003
Krishna2323 | Contributor | 104047004

Issue Owner

Current Issue Owner: @paultsimura

@abekkala

Triggered auto assignment to @abekkala (Bug), see https://stackoverflow.com/c/expensify/questions/14418 for more details. Please add this bug to a GH project, as outlined in the SO.

We think that this bug might be related to #wave-control

@abekkala

@abekkala FYI I haven't added the External label as I wasn't 100% sure about this issue. Please take a look and add the label if you agree it's a bug and can be handled by external contributors

Proposal

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

Saved search - Default name is not displayed correctly for multiline system message thread

What is the root cause of that problem?

The title text is not wrapped correctly.

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

Add titleStyle: styles.textNoWrap, here

App/src/pages/Search/SearchTypeMenu.tsx

Line 110 in 14b99ca

title,

Proposal

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

Saved search - Default name is not displayed correctly for multiline system message thread

What is the root cause of that problem?

The title text is not wrapped correctly.

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

add numberOfLinesTitle: 2, in

App/src/pages/Search/SearchTypeMenu.tsx

Lines 108 to 117 in 14b99ca

    
           const baseMenuItem: SavedSearchMenuItem = { 
        
               key, 
        
               title, 
        
               hash: key, 
        
               query: item.query, 
        
               shouldShowRightComponent: true, 
        
               focused: Number(key) === hash, 
        
               onPress: () => { 
        
                   SearchActions.clearAllFilters(); 
        
                   Navigation.navigate(ROUTES.SEARCH_CENTRAL_PANE.getRoute({query: item?.query ?? ''}));

What alternative solutions did you explore? (Optional)

add noWrap style
titleStyle: styles.textNoWrap,

Proposal 

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

Saved search - Default name is not displayed correctly for multiline system message thread

What is the root cause of that problem?

The default value for numberOfLinesTitle is 1 but the text overflows because we are applying styles.pre instead of styles.noWrap.

App/src/components/MenuItem.tsx

Line 350 in 2190f62

numberOfLinesTitle = 1,

App/src/components/MenuItem.tsx

Lines 444 to 457 in 2190f62

    
           const combinedTitleTextStyle = StyleUtils.combineStyles( 
        
               [ 
        
                   styles.flexShrink1, 
        
                   styles.popoverMenuText, 
        
                   // eslint-disable-next-line no-nested-ternary 
        
                   shouldPutLeftPaddingWhenNoIcon || (icon && !Array.isArray(icon)) ? (avatarSize === CONST.AVATAR_SIZE.SMALL ? styles.ml2 : styles.ml3) : {}, 
        
                   shouldShowBasicTitle ? {} : styles.textStrong, 
        
                   numberOfLinesTitle !== 1 ? styles.preWrap : styles.pre, 
        
                   interactive && disabled ? {...styles.userSelectNone} : {}, 
        
                   styles.ltr, 
        
                   isDeleted ? styles.offlineFeedback.deleted : {}, 
        
               ], 
        
               titleStyle ?? {}, 
        
           );

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

We should update the condition below to numberOfLinesTitle !== 1 ? styles.preWrap : styles.noWrap,.

App/src/components/MenuItem.tsx

Line 451 in 2190f62

numberOfLinesTitle !== 1 ? styles.preWrap : styles.pre,

What alternative solutions did you explore? (Optional)

Add numberOfLinesTitle: 2 in createSavedSearchMenuItem..
Same should be applied in SearchTypeMenuNarrow.

Result

Proposal

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

The title of the saved search has multiple lines and it is not displayed correctly.

What is the root cause of that problem?

We return the raw report name in this:

App/src/libs/SearchUtils.ts

Line 715 in 7bd9e53

return ReportUtils.getReportName(reports?.[`${ONYXKEYS.COLLECTION.REPORT}${filter}`]);

so the saved search name can contain multiple lines.

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

We can fix the issue by fixing the Text style, but with that approach, we need to apply the fix on all platforms. So I suggest that we can format this:

App/src/libs/SearchUtils.ts

Line 715 in 7bd9e53

    
           return ReportUtils.getReportName(reports?.[`${ONYXKEYS.COLLECTION.REPORT}${filter}`]);

so it can be:

        return ReportUtils.formatReportLastMessageText(ReportUtils.getReportName(reports?.[`${ONYXKEYS.COLLECTION.REPORT}${filter}`]));

like we did in this:

App/src/components/DisplayNames/DisplayNamesWithTooltip.tsx

Line 59 in 7bd9e53

? ReportUtils.formatReportLastMessageText(fullTitle)

What alternative solutions did you explore? (Optional)

Ah nice, that's much better

@Krishna2323

@Krishna2323 please consider this in your PR.

Yeah, sure.

@paultsimura

@paultsimura, PR ready for review ^

PR merged

Deployed to production on Oct 1. Payment is due on 2024-10-08

@Krishna2323

PAYMENT SUMMARY FOR OCT 08

Fix: @Krishna2323 [$250, if no regressions] OFFER
PR Review: @paultsimura [$250, if no regressions] OFFER
Please complete checklist below

@paultsimura

BugZero Checklist: The PR fixing this issue has been merged! The following checklist (instructions) will need to be completed before the issue can be closed:

[@paultsimura] The PR that introduced the bug has been identified. Link to the PR:
[@paultsimura] The offending PR has been commented on, pointing out the bug it caused and why, so the author and reviewers can learn from the mistake. Link to comment:
[@paultsimura] A discussion in #expensify-bugs has been started about whether any other steps should be taken (e.g. updating the PR review checklist) in order to catch this type of bug sooner.
[@paultsimura] Determine if we should create a regression test for this bug.
[@paultsimura] If we decide to create a regression test for the bug, please propose the regression test steps to ensure the same bug will not reach production again.
[@abekkala] Link the GH issue for creating/updating the regression test once above steps have been agreed upon:

The PR that introduced the bug has been identified. Link to the PR: note: It's not an offending PR as such, just a PR that tried to solve an existing problem, but didn't do it fully: Fix/37448: Incorrect title thread #38267
The offending PR has been commented on, pointing out the bug it caused and why, so the author and reviewers can learn from the mistake. Link to comment: https://github.com/Expensify/App/pull/38267/files#r1791506146
A discussion in #expensify-bugs has been started about whether any other steps should be taken (e.g. updating the PR review checklist) in order to catch this type of bug sooner. Link to discussion: N/A
Determine if we should create a regression test for this bug: Yes
If we decide to create a regression test for the bug, please propose the regression test steps to ensure the same bug will not reach production again.

Regression Test Proposal

Go to DM.
Submit an expense with a multiline description.
Go to the transaction thread.
Click Description.
Edit the description while maintaining the multiline format and save it.
Right-click on the system message > Reply in thread.
Send a reply in the thread.
Go to Search > Chats.
Click Filters > Select "In".
Select the thread in Step 7 > Save.
Click "Save search".
Verify the title of the saved search is only shown in one line.

Do we agree 👍 or 👎

@Krishna2323

@Krishna2323 @paultsimura payments sent and contracts ended - thank you! 🎉

Navigation Menu

Repository navigation

[HOLD for Payment OCT 08] [$250] [Search v2.3] - Default name is not displayed correctly for multiline system message thread #49330

Action Performed:

Expected Result:

Actual Result:

Workaround:

Platforms:

Screenshots/Videos

Proposal

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

What is the root cause of that problem?

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

Proposal

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

What is the root cause of that problem?

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

What alternative solutions did you explore? (Optional)

Proposal

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

What is the root cause of that problem?

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

What alternative solutions did you explore? (Optional)

Result

Proposal

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

What is the root cause of that problem?

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

What alternative solutions did you explore? (Optional)

27 remaining items

PAYMENT SUMMARY FOR OCT 08

Regression Test Proposal

Metadata

Assignees

Labels

Type

Projects

Milestone

Relationships

Development

	const baseMenuItem: SavedSearchMenuItem = {
	key,
	title,
	hash: key,
	query: item.query,
	shouldShowRightComponent: true,
	focused: Number(key) === hash,
	onPress: () => {
	SearchActions.clearAllFilters();
	Navigation.navigate(ROUTES.SEARCH_CENTRAL_PANE.getRoute({query: item?.query ?? ''}));

	const combinedTitleTextStyle = StyleUtils.combineStyles(
	[
	styles.flexShrink1,
	styles.popoverMenuText,
	// eslint-disable-next-line no-nested-ternary
	shouldPutLeftPaddingWhenNoIcon \|\| (icon && !Array.isArray(icon)) ? (avatarSize === CONST.AVATAR_SIZE.SMALL ? styles.ml2 : styles.ml3) : {},
	shouldShowBasicTitle ? {} : styles.textStrong,
	numberOfLinesTitle !== 1 ? styles.preWrap : styles.pre,
	interactive && disabled ? {...styles.userSelectNone} : {},
	styles.ltr,
	isDeleted ? styles.offlineFeedback.deleted : {},
	],
	titleStyle ?? {},
	);

[HOLD for Payment OCT 08] [$250] [Search v2.3] - Default name is not displayed correctly for multiline system message thread #49330

Description

Action Performed:

Expected Result:

Actual Result:

Workaround:

Platforms:

Screenshots/Videos

Activity

melvin-bot commented on Sep 17, 2024

IuliiaHerets commented on Sep 17, 2024

IuliiaHerets commented on Sep 17, 2024

andriivitiv commented on Sep 17, 2024

Proposal

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

What is the root cause of that problem?

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

drminh2807 commented on Sep 17, 2024

Proposal

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

What is the root cause of that problem?

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

What alternative solutions did you explore? (Optional)

Krishna2323 commented on Sep 17, 2024

Proposal

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

What is the root cause of that problem?

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

What alternative solutions did you explore? (Optional)

Result

truph01 commented on Sep 18, 2024

Proposal

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

What is the root cause of that problem?

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

What alternative solutions did you explore? (Optional)

27 remaining items

shawnborton commented on Sep 20, 2024

Krishna2323 commented on Sep 20, 2024

Krishna2323 commented on Sep 20, 2024

luacmartins commented on Sep 26, 2024

paultsimura commented on Oct 1, 2024

abekkala commented on Oct 2, 2024

PAYMENT SUMMARY FOR OCT 08

abekkala commented on Oct 2, 2024

paultsimura commented on Oct 8, 2024

Regression Test Proposal

abekkala commented on Oct 8, 2024

Metadata

Metadata

Assignees

Labels

Type

Projects

Milestone

Relationships

Development

Issue actions

Proposal 

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