[HOLD for payment 2024-06-05] [$250] mWeb - Expense - Url shown in truncated form with dots in merchant field after expense paid

[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.72
Reproducible in staging?: Y
Reproducible in production?: Y
If this was caught during regression testing, add the test name, ID and link from TestRail: https://expensify.testrail.io/index.php?/tests/view/4548777
Issue reported by: Applause - Internal Team

Action Performed:

1. Go to https://staging.new.expensify.com/
2. Tap Workspace chat
3. Tap plus icon -- submit expense
4. Enter amount and tap next
5. Paste description with long url eg: https://staging.new.expensify.com/r/575
   354256634947/165034783536884819
6. Tap submit
7. Tap submit & pay elsewhere
8. Open the expense and note merchant field

Expected Result:

Full url user must able to see after expense paid

Actual Result:

After expense paid, no option to see entire url entered in merchant field. Url can be seen only in truncated form with dots in merchant field and full url cannot be seen after expense paid

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

Bug6475852_1715257088107.paid.mp4

View all open jobs on GitHub

Upwork Automation - Do Not Edit

• Upwork Job URL: https://www.upwork.com/jobs/~017cd1c2d060b6d92c
• Upwork Job ID: 1789744372946083840
• Last Price Increase: 2024-05-12
• Automatic offers:
• Ollyws | Reviewer | 0
• bernhardoj | Contributor | 0

Issue Owner

Current Issue Owner: @mallenexpensify

[melvin-bot]

Triggered auto assignment to @mallenexpensify (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.

[lanitochka17]

We think that this bug might be related to #vip-vsp

[lanitochka17]

@mallenexpensify 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

[Krishna2323]

Proposal

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

mWeb - Expense - Url shown in truncated form with dots in merchant field after expense paid

What is the root cause of that problem?

We aren't passing shouldParseTitle to MenuItemWithTopDescription for merchant field.

App/src/components/ReportActionItem/MoneyRequestView.tsx

Lines 431 to 442 in 807c945

	<MenuItemWithTopDescription
	description={translate('common.merchant')}
	title={merchantTitle}
	interactive={canEditMerchant}
	shouldShowRightIcon={canEditMerchant}
	titleStyle={styles.flex1}
	onPress={() =>
	Navigation.navigate(ROUTES.MONEY_REQUEST_STEP_MERCHANT.getRoute(CONST.IOU.ACTION.EDIT, iouType, transaction?.transactionID ?? '', report.reportID))
	}
	brickRoadIndicator={getErrorForField('merchant') ? CONST.BRICK_ROAD_INDICATOR_STATUS.ERROR : undefined}
	error={getErrorForField('merchant')}
	/>

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

Pass shouldParseTitle as true to MenuItemWithTopDescription. We might also want to enable markdown enabled in input in IOURequestStepMerchant. For that we need to pass few props, we can take inspiration from IOURequestStepDescription since it is very similar to merchant.

What alternative solutions did you explore? (Optional)

[bernhardoj]

Proposal

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

Merchant text in transaction view is only single line and truncated and if it's paid, we can't open the edit merchant page anymore, so it's impossible to see the full text.

What is the root cause of that problem?

The component used (MenuItem) by default only limited to 1 line.

App/src/components/MenuItem.tsx

Line 287 in 807c945

numberOfLinesTitle = 1,

So if the text is too long, the text is truncated.

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

Set numberOfLinesTitle of merchant to 0 to not limit or any number that the team agrees. Then, we need to set the wrapper style of the menu item of break-word. We can borrow the style from styles.taskDescriptionMenuItem that already has the break-word style.

wrapperStyle={[styles.taskDescriptionMenuItem]}

We use it for description too.

App/src/components/ReportActionItem/MoneyRequestView.tsx

Lines 420 to 421 in 807c945

	onPress={() => Navigation.navigate(ROUTES.MONEY_REQUEST_STEP_DESCRIPTION.getRoute(CONST.IOU.ACTION.EDIT, iouType, transaction?.transactionID ?? '', report.reportID))}
	wrapperStyle={[styles.pv2, styles.taskDescriptionMenuItem]}

[melvin-bot]

Triggered auto assignment to @dannymcclain (Design), see these Stack Overflow questions for more details.

[mallenexpensify]

@dannymcclain do you have a preference on how this looks? ie.

1. Use ... then hyperlink using full link
2. Show full link and hyperlink it all, it. https://staging.new.expensify.com/r/575354256634947/165034783536884819
3. Something else?

My preference is #2 because people mind want to copy/paste the link for some reason and/or , if it's sent to accounting software, the hyperlink could be broken or not visible or .. something.

[dannymcclain]

Would we accomplish #2 by letting the URL wrap onto multiple lines (or any other merchant value for that matter)?

Basically it would look like the description I've entered here:

I'd be fine with that—seems like it's already an established pattern for description so I think it would be fine to extend that to merchant as well.

cc @Expensify/design for viz.

[dubielzyk-expensify]

Yeah, this seems like a edge case anyways, but I agree that I don't see why we wouldn't have the same behavior for merchant and description. Is it because Merchant is just a single text field and description is a text area which then get our rich markdown editor?

[dragnoir]

Proposal

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

Expense - Url shown in truncated form with dots in merchant field after expense paid

What is the root cause of that problem?

Merchant MenuItemWithTopDescription is not set to show multilines or HTML

App/src/components/ReportActionItem/MoneyRequestView.tsx

Lines 431 to 442 in 807c945

	<MenuItemWithTopDescription
	description={translate('common.merchant')}
	title={merchantTitle}
	interactive={canEditMerchant}
	shouldShowRightIcon={canEditMerchant}
	titleStyle={styles.flex1}
	onPress={() =>
	Navigation.navigate(ROUTES.MONEY_REQUEST_STEP_MERCHANT.getRoute(CONST.IOU.ACTION.EDIT, iouType, transaction?.transactionID ?? '', report.reportID))
	}
	brickRoadIndicator={getErrorForField('merchant') ? CONST.BRICK_ROAD_INDICATOR_STATUS.ERROR : undefined}
	error={getErrorForField('merchant')}
	/>

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

We should add here:

• numberOfLinesTitle={0} : to display the content in full line

• wrapperStyle={[styles.taskDescriptionMenuItem]} : tobreak the line into new lines when needed

• shouldParseTitle: to use HTML and render the link

[melvin-bot]

Job added to Upwork: https://www.upwork.com/jobs/~017cd1c2d060b6d92c

[melvin-bot]

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

[mallenexpensify]

Would we accomplish #2 by letting the URL wrap onto multiple lines (or any other merchant value for that matter)?

Yes, I think wrapping is the best and (maybe/hopefully) easiest option, if we're reusing an existing behaviour/pattern. Assuming we all agree, @Ollyws , can you review @dragnoir 's proposal above? Thx.

[Ollyws]

@bernhardoj's proposal LGTM.

🎀👀🎀 C+ reviewed

[melvin-bot]

Triggered auto assignment to @srikarparsi, see https://stackoverflow.com/c/expensify/questions/7972 for more details.

[melvin-bot]

📣 @Ollyws 🎉 An offer has been automatically sent to your Upwork account for the Reviewer role 🎉 Thanks for contributing to the Expensify app!

Offer link
Upwork job

[melvin-bot]

📣 @bernhardoj 🎉 An offer has been automatically sent to your Upwork account for the Contributor role 🎉 Thanks for contributing to the Expensify app!

Offer link
Upwork job
Please accept the offer and leave a comment on the Github issue letting us know when we can expect a PR to be ready for review 🧑‍💻
Keep in mind: Code of Conduct | Contributing 📖

[bernhardoj]

PR is ready

cc: @Ollyws

[melvin-bot]

Reviewing label has been removed, please complete the "BugZero Checklist".

[melvin-bot]

The solution for this issue has been 🚀 deployed to production 🚀 in version 1.4.76-7 and is now subject to a 7-day regression period 📆. Here is the list of pull requests that resolve this issue:

• Wrap the merchant text in the transaction field view #42131

If no regressions arise, payment will be issued on 2024-06-05. 🎊

For reference, here are some details about the assignees on this issue:

• @Ollyws requires payment automatic offer (Reviewer)
• @bernhardoj requires payment automatic offer (Contributor)

[melvin-bot]

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:

• [@Ollyws] The PR that introduced the bug has been identified. Link to the PR:
• [@Ollyws] 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:
• [@Ollyws] 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:
• [@Ollyws] Determine if we should create a regression test for this bug.
• [@Ollyws] 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.
• [@mallenexpensify] Link the GH issue for creating/updating the regression test once above steps have been agreed upon:

[mallenexpensify]

Contributor: @bernhardoj paid $250 via Upwork
Contributor+: @Ollyws owed $250 via NewDot

@Ollyws , can you fill out the BZ checklist plz?

Sidenote: the above says @Ollyws requires payment [automatic offer](https://www.upwork.com/nx/wm/offer/0) (Reviewer) even though the PR hit production to update them to ND payments. I found another instance where the correct text was added to an issue so I'm hoping/assuming it's working correctly and there was just a delay for some reason.

[Ollyws]

BugZero Checklist:

• The PR that introduced the bug has been identified. Link to the PR:

Looks like the component has been limited to one line since it's inception so we can't really pin this on any PR.

• 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:

N/A

• 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, steps:

1. Submit a new expense with a very long merchant (eg: https://staging.new.expensify.com/r/575354256634947/165034783536884819)
2. Open the transaction thread of the expense
3. Verify the merchant is shown as multiline instead of truncated

[Ollyws]

Requested payment in ND.

[srikarparsi]

@mallenexpensify, are we good to close this out?

[mallenexpensify]

We are now! TestRail issue created

• https://github.com/Expensify/Expensify/issues/403644

[JmillsExpensify]

$250 approved for @Ollyws