[HOLD FOR PAYMENT JUNE 21][$250] "Uploading attachment" text too close to message

[m-natarajan]

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.74-1
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: @shawnborton
Slack conversation: https://expensify.slack.com/archives/C049HHMV9SM/p1715818269205899

Action Performed:

1. Open any report
2. Send a image with text

Expected Result:

There should be a small gap between the text you entered and the "Uploading attachment..." text

Actual Result:

There is no gap between them

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

View all open jobs on GitHub

Upwork Automation - Do Not Edit

• Upwork Job URL: https://www.upwork.com/jobs/~01f281695ab48cd898
• Upwork Job ID: 1791158555071238144
• Last Price Increase: 2024-05-16

Issue Owner

Current Issue Owner: @thesahindia

[melvin-bot]

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

[dragnoir]

Proposal

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

Expense - Color gradient of the background image in expense report is broken

What is the root cause of that problem?

Missing margin for the component rendering the "Uploading attachment.."

When we upload an image with a text, there's an optimistic comment that will be saved locally and displayed on the report as TEXT+"Uploading attachment.." with a line break in between

App/src/libs/ReportUtils.ts

Line 3453 in a03fecc

htmlForNewComment = `${commentText}\n${CONST.ATTACHMENT_UPLOADING_MESSAGE_HTML}`;

This htmlForNewComment doe snot dupport margin between the TEXT and the CONST.ATTACHMENT_UPLOADING_MESSAGE_HTML

What alternative solutions did you explore?

Add margin to the CONST.ATTACHMENT_UPLOADING_MESSAGE_HTML

App/src/libs/ReportUtils.ts

Line 3453 in a03fecc

htmlForNewComment = `${commentText}\n${CONST.ATTACHMENT_UPLOADING_MESSAGE_HTML}`;

We can engloba the CONST.ATTACHMENT_UPLOADING_MESSAGE_HTML with a HTML element that support margin

1- Add a new customHTMLElementModels here

'uploading-attachment': HTMLElementModel.fromCustomModel({
    tagName: 'uploading-attachment',
    mixedUAStyles: {...styles.mt3},
    contentModel: HTMLContentModel.block,
}),

update here to:

htmlForNewComment = `${commentText}\n<uploading-attachment>${CONST.ATTACHMENT_UPLOADING_MESSAGE_HTML}</uploading-attachment>`;

POC:

20240516_154002.mp4

[melvin-bot]

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

[melvin-bot]

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

[nkdengineer]

Proposal

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

There is no gap between them

What is the root cause of that problem?

• When sending a message with text, we use this optimistic message text.

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

• We can add an additional \n character to the above to make a gap.

What alternative solutions did you explore? (Optional)

• NA

[thesahindia]

@dragnoir's proposal looks good to me!

🎀 👀 🎀 C+ reviewed

[melvin-bot]

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

[manishram]

Proposal

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

In the issue, it is mentioned that the "Uploading attachment" text which shows when we actually add any attachment while sending a message shows very close to the actual message. This makes "Uploading attachment" text indistinguishable from the actual message. And hence making a bad UI.

What is the root cause of that problem?

App/src/libs/ReportUtils.ts

Line 3453 in e8ae3c5

htmlForNewComment = `${commentText}\n${CONST.ATTACHMENT_UPLOADING_MESSAGE_HTML}`;

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

• Instead of just making space, I think we should also change the color of the text a little different from the font color of the actual message. This can be a little bit greyish. At the same time, this text should also animate fade-in - fade-out slowly to give the user a clear idea that "Uploading attachment" is a system information that will stay there until the attachment uploads successfully.

issue-42297.mp4

What alternative solutions did you explore? (Optional)

NA

[melvin-bot]

📣 @dragnoir You have been assigned to this job!
Please apply to the Upwork job and leave a comment on the Github issue letting us know when we can expect a PR to be ready for review 🧑‍💻
Once you apply to this job, your Upwork ID will be stored and you will be automatically hired for future jobs!
Keep in mind: Code of Conduct | Contributing 📖

[slafortune]

There is a PR for review - I'll be on vacation until June 4th, so adding a BZ in the meantime. I'll take this back on the 4th if needed.

[melvin-bot]

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

[mallenexpensify]

PR merged today
#42516

[melvin-bot]

@slafortune @dragnoir @mallenexpensify @grgia @thesahindia this issue is now 4 weeks old, please consider:

• Finding a contributor to fix the bug
• Closing the issue if BZ has been unable to add the issue to a VIP or Wave project
• If you have any questions, don't hesitate to start a discussion in #expensify-open-source

Thanks!

[slafortune]

Payment due June 19th with no regressions.

[mallenexpensify]

@slafortune , looks like it should be paid on the 21st, based on PR hitting production on the 14th. updated the title to reflect.

[slafortune]

OHHH! Thanks @mallenexpensify, my mistake 👍

[slafortune]

@dragnoir offer sent here - https://www.upwork.com/nx/wm/offer/102829200 - Paid ✅
@thesahindia as C+ is due $250 via NewDot

[kidroca]

I'm a bit unsure about the need for a custom <uploading-attachment> element to fix this issue. Does it serve any purpose beyond addressing styling problems? In other cases, we use <br /> to handle new line gaps. Could we have used <br /> elements for the optimistic content as well?

I'm working on replacing the "Uploading attachment..." text with the actual attachment. Should I keep the <uploading-attachment> custom element, or is it okay to remove it once the text is replaced with a preview of the attachment?

[shawnborton]

@kidroca I think you make some good points. I am cool with whatever solution you think is best, as long as we achieve the desired design/style where there is a clear space between the message and the image below it. So if you want to undo the custom element, that is fine by me.

[JmillsExpensify]

$250 approved for @thesahindia