[HOLD for payment 2023-05-23] [$1000] Chat- Files mp4 with long name extend to the far edges of the screen.

[kbecciv]

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. Go to https://staging.new.expensify.com/
2. Login
3. Navigate to a conversation
4. Tap the grey plus button in compose box
5. Tap on add attachment
6. Mobile - Tap on choose from gallery
7. Select a mp4 file with long name

Expected Result:

Attachment preview doesn't extend to the far edges of the screen.

Actual Result:

Files mp4 with long name extend to the far edges of the screen.

Workaround:

Unknown

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

Reproducible in staging?: Yes

Reproducible in production?: Yes

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

Bug6007064_Screen_Recording_20230405_183417_Chrome.mp4

Expensify/Expensify Issue URL:

Issue reported by: Applause - Internal Team

Slack conversation:

View all open jobs on GitHub

Upwork Automation - Do Not Edit

• Upwork Job URL: https://www.upwork.com/jobs/~01fea9233c3c7ebaef
• Upwork Job ID: 1653854126087110656
• Last Price Increase: 2023-05-12

[MelvinBot]

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

[PrashantMangukiya]

Proposal

Posting proposal early as per new guidelines

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

Chat- Files mp4 with long name extend to the far edges of the screen.

What is the root cause of that problem?

AttachmentView is render via this at line 280, Parent View has styles.imageModalImageCenterContainer applied at 271

App/src/components/AttachmentModal.js

Lines 271 to 287 in 83b20de

	<View style={styles.imageModalImageCenterContainer}>
	{this.props.reportID ? (
	<AttachmentCarousel
	reportID={this.props.reportID}
	onNavigate={this.onNavigate}
	source={this.props.source}
	onToggleKeyboard={this.updateConfirmButtonVisibility}
	/>
	) : this.state.source && this.state.shouldLoadAttachment && (
	<AttachmentView
	source={source}
	isAuthTokenRequired={this.props.isAuthTokenRequired}
	file={this.state.file}
	onToggleKeyboard={this.updateConfirmButtonVisibility}
	/>
	)}
	</View>

imageModalImageCenterContainer uses width: '100%', so content within it will expand fully.

App/src/styles/styles.js

Lines 1916 to 1921 in 83b20de

	imageModalImageCenterContainer: {
	alignItems: 'center',
	flex: 1,
	justifyContent: 'center',
	width: '100%',
	},

Attachment view render via this code for mp4 or other attachment. So content within it will expand fully this is the root cause of the problem.

App/src/components/AttachmentView.js

Lines 90 to 93 in 83b20de

	return (
	<View
	style={styles.defaultAttachmentView}
	>

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

From AttachmentModal.js we have to pass containerStyles props to <AttachmentView> as shown below:

  <AttachmentView
      containerStyles={[styles.mh5]}     //  *** Add this
      source={source}
      isAuthTokenRequired={this.props.isAuthTokenRequired}
      file={this.state.file}
      onToggleKeyboard={this.updateConfirmButtonVisibility}
  />

We have to use containerStyles props in AttachmentView view as shown code below:

return ( 
  <View 
   style={[styles.defaultAttachmentView, ...props.containerStyles]}
  > 
     ....
  </View>
);

Important: AttachmentView is used multiple places like chat listing and attachment modal. This is the reason why we added containerStyles prop.

So while we render it within attachment modal we can set horizontal margin and during chat list it will behave normally.

This will solve the problem and shows horizontal margin when needed as shown in result video.

What alternative solutions did you explore? (Optional)

None

Results

Attachment.mov

[MelvinBot]

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

[MelvinBot]

Triggered auto assignment to Contributor Plus for review of internal employee PR - @rushatgabhane (Internal)

[rushatgabhane]

I got assigned 2 days ago. I think we missed adding Engineering label here?

[rushatgabhane]

@PrashantMangukiya horiziontal margin of 20 seems good to me.

C+ reveiwed 🎀 👀 🎀

[rushatgabhane]

We need to add engineering label and hire @PrashantMangukiya to fix this issue

[melvin-bot]

📣 @PrashantMangukiya You have been assigned to this job by @greg-schroeder!
Please apply to this job in Upwork 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 📖

[greg-schroeder]

Okay - set to External and assigned you @PrashantMangukiya

[PrashantMangukiya]

@greg-schroeder @rushatgabhane Thanks. I will prepare and submit pr within 2 hours asap.

[PrashantMangukiya]

@rushatgabhane @danieldoglas @greg-schroeder PR is ready for review.

[melvin-bot]

🎯 ⚡️ Woah @rushatgabhane / @PrashantMangukiya, great job pushing this forwards! ⚡️

The pull request got merged within 2 working days of assignment, so this job is eligible for a 50% #urgency bonus 🎉

• when @PrashantMangukiya got assigned: 2023-05-12 06:57:36 Z
• when the PR got merged: 2023-05-15 12:26:37 UTC

On to the next one 🚀

[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.3.14-14 and is now subject to a 7-day regression period 📆. Here is the list of pull requests that resolve this issue:

• Corrected - Chat mp4 files with long name extend to the far edges of the screen #18830

If no regressions arise, payment will be issued on 2023-05-23. 🎊

After the hold period is over and BZ checklist items are completed, please complete any of the applicable payments for this issue, and check them off once done.

• External issue reporter
• Contributor that fixed the issue
• Contributor+ that helped on the issue and/or PR

As a reminder, here are the bonuses/penalties that should be applied for any External issue:

• Merged PR within 3 business days of assignment - 50% bonus
• Merged PR more than 9 business days after assignment - 50% penalty

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

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

[greg-schroeder]

Offers sent to @rushatgabhane @PrashantMangukiya in preparation for payment date tomorrow, 5/23

[danieldoglas]

@rushatgabhane please fill the checklist above

[greg-schroeder]

Bump @rushatgabhane for the checklist and also to accept the offer for payment :)

[greg-schroeder]

Friendly bump on the checklist and payment offer @rushatgabhane

[greg-schroeder]

Pinged in the c+ room!

[danieldoglas]

Pinged in the c+ room again

[greg-schroeder]

Updated the offer to @rushatgabhane's new Upwork profile, just waiting on the checklist

[rushatgabhane]

This bug was present since Dec 2020 (source). I don't think there's much value in doing the checklist

1. The PR that introduced the bug has been identified. Link to the PR: Add Modal Previews when Uploading Attachments + Copy/Paste files #685

2. 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:

3. 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.

4. Determine if we should create a regression test for this bug. Not required.

5. 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 - N.A.

[greg-schroeder]

Thanks @rushatgabhane