[HOLD for payment 2023-06-21] [$1000] Thread - Crash when opening the thread image

[lanitochka17]

If you haven’t already, check out our contributing guidelines for onboarding and email [email protected] to request to join our Slack channel!

---

Action Performed:

1. Go to https://staging.new.expensify.com/
2. Login with any account
3. Go to any chat
4. Send an image to the user
5. Click on "Reply in thread" after sending the image
6. Click to preview the image

Expected Result:

Image opens

Actual Result:

App is crashed

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

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

Recording.4826.mp4

Expensify/Expensify Issue URL:

Issue reported by: Applause - Internal team and @priya-zha
Slack conversation:

View all open jobs on GitHub

Upwork Automation - Do Not Edit

• Upwork Job URL: https://www.upwork.com/jobs/~01b43bec189a9704e2
• Upwork Job ID: 1665923449380827136
• Last Price Increase: 2023-06-06

[melvin-bot]

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

[strepanier03]

Super easy to recreate. Moving on.

[melvin-bot]

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

[melvin-bot]

Current assignee @strepanier03 is eligible for the External assigner, not assigning anyone new.

[melvin-bot]

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

[melvin-bot]

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

[tienifr]

Proposal

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

App crash when opening the thread image

What is the root cause of that problem?

In

App/src/components/AttachmentCarousel/index.js

Lines 151 to 173 in 936a3a7

	const actions = ReportActionsUtils.getSortedReportActions(_.values(this.props.reportActions));
	const attachments = [];
	const htmlParser = new HtmlParser({
	onopentag: (name, attribs) => {
	if (name !== 'img' || !attribs.src) {
	return;
	}
	const expensifySource = attribs[CONST.ATTACHMENT_SOURCE_ATTRIBUTE];
	// By iterating actions in chronological order and prepending each attachment
	// we ensure correct order of attachments even across actions with multiple attachments.
	attachments.unshift({
	source: tryResolveUrlFromApiRoot(expensifySource || attribs.src),
	isAuthTokenRequired: Boolean(expensifySource),
	file: {name: attribs[CONST.ATTACHMENT_ORIGINAL_FILENAME_ATTRIBUTE] || attribs.src.split('/').pop()},
	});
	},
	});
	_.forEach(actions, (action) => htmlParser.write(_.get(action, ['message', 0, 'html'])));
	htmlParser.end();

We get the reportActions from reportID.
Next, we iterate the actions to find the attachments and add them to attachments.

but in thread, we don't have the logic to get the parentReportAction, so when users click the parent image, we can't find this source => the page become -1 and throw the error

App/src/components/AttachmentCarousel/index.js

Lines 175 to 178 in 936a3a7

	const page = _.findIndex(attachments, (a) => a.source === this.props.source);
	if (page === -1) {
	throw new Error('Attachment not found');
	}

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

subscribe report in AttachmentCarousel or pass report from parent component to AttachmentCarousel

in createInitialState function, find the parentReportAction from report, and inject it to actions

        const parentReportAction = ReportActionsUtils.getParentReportAction(this.props.report)

Result

Screen.Recording.2023-06-06.at.11.00.54.mov

[s77rt]

@tienifr Thanks for the proposal. Your RCA is correct and the solution looks good to me. Let's pass report instead of reportID.

🎀 👀 🎀 C+ reviewed

cc @NikkiWines

[strepanier03]

Friendly bump @NikkiWines for your review so we can keep good pace on moving this forward 🙌

[NikkiWines]

Sorry for the delay,! Agreed with @s77rt - let's go with @tienifr's solution 👍

[melvin-bot]

📣 @tienifr You have been assigned to this job by @NikkiWines!
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 📖

[tienifr]

The PR is ready for review: #20338

[strepanier03]

PR has been merged so we're just waiting on deploys. All good for now!

[melvin-bot]

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

[strepanier03]

@zanyrenney - I'm leaving for sabbatical this evening and will not be available to pay this on the 21st. Thank you for handling it!

[zanyrenney]

Sure thing! Awaiting payment still, not overdue.

[zanyrenney]

Looks like the contributors weren't assigned initially, so assigning them now.

[zanyrenney]

@s77rt @tienifr @priya-zha have all now been invited to this job via upwork. please accept so that we can pay this out.

[zanyrenney]

Hey, I am heading OOO shortly, so assigning another bug0 team member to help with this issue whilst I am OOO.

All the contributors and bug reporter have been invited to the job on Upwork so only paying them out (once they accept) remains.

[melvin-bot]

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

[priya-zha]

@zanyrenney submitted the proposal. Thanks.

[s77rt]

Applied!

[tienifr]

@zanyrenney applied, thanks!

[tjferriss]

I've hired everyone in Upworks. Once the offers are accepted, I'll process the payments.

[s77rt]

Accepted!

[tjferriss]

All payments have been sent including the speed bonus.