[$500] Add Empty State Background To Tasks

[grgia]

We're missing the empty state background in Task reports. Follow up from #27478

Upwork Automation - Do Not Edit

• Upwork Job URL: https://www.upwork.com/jobs/~01f8fb00801e6f1236
• Upwork Job ID: 1702572656769077248
• Last Price Increase: 2023-10-11
• Automatic offers:
• aimane-chnaif | Reviewer | 27346707
• Pujan92 | Contributor | 27346708

[melvin-bot]

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

[melvin-bot]

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

[grgia]

not overdue

[melvin-bot]

Current assignee @aimane-chnaif is eligible for the External assigner, not assigning anyone new.

[grgia]

@aimane-chnaif making external

[Pujan92]

Proposal

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

Add empty state background for tasks report

What is the root cause of that problem?

We do not have that logic currently in the TaskView component.

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

Replicate the same logic for TaskReport in the ReportActionItem which we have for MoneyRequestView component for showing the background image.

App/src/pages/home/report/ReportActionItem.js

Lines 538 to 561 in eb5e1e8

	if (ReportUtils.isTaskReport(props.report)) {
	if (ReportUtils.isCanceledTaskReport(props.report, parentReportAction)) {
	content = (
	<>
	<ReportActionItemSingle
	action={parentReportAction}
	showHeader={!props.draftMessage}
	wrapperStyles={[styles.chatItem]}
	report={props.report}
	>
	<RenderHTML html={`<comment>${props.translate('parentReportAction.deletedTask')}</comment>`} />
	</ReportActionItemSingle>
	<View style={styles.reportHorizontalRule} />
	</>
	);
	} else {
	content = (
	<TaskView
	report={props.report}
	shouldShowHorizontalRule={!props.shouldHideThreadDividerLine}
	/>
	);
	}
	}

For that, we can create one more variable and assign that code. With that use that variable in content with both(if/else) conditions.

let emptyStateBackground = (
    <View style={[StyleUtils.getReportWelcomeContainerStyle(isSmallScreenWidth), StyleUtils.getMinimumHeight(CONST.EMPTY_STATE_BACKGROUND.MONEY_REPORT.MIN_HEIGHT)]}> 
         <AnimatedEmptyStateBackground /> 
    </View>
)

What alternative solutions did you explore?

App/src/components/ReportActionItem/MoneyRequestView.js

Lines 139 to 141 in 24aa7c1

	<View style={[StyleUtils.getReportWelcomeContainerStyle(isSmallScreenWidth), StyleUtils.getMinimumHeight(CONST.EMPTY_STATE_BACKGROUND.MONEY_REPORT.MIN_HEIGHT)]}>
	<AnimatedEmptyStateBackground />
	</View>

App/src/components/ReportActionItem/TaskView.js

Line 56 in 24aa7c1

<View>

As for canceled task we are not rendering TaskView, we need to add the same snippet here before the ReportActionItemSingle.

App/src/pages/home/report/ReportActionItem.js

Lines 539 to 557 in eb5e1e8

	if (ReportUtils.isCanceledTaskReport(props.report, parentReportAction)) {
	content = (
	<>
	<ReportActionItemSingle
	action={parentReportAction}
	showHeader={!props.draftMessage}
	wrapperStyles={[styles.chatItem]}
	report={props.report}
	>
	<RenderHTML html={`<comment>${props.translate('parentReportAction.deletedTask')}</comment>`} />
	</ReportActionItemSingle>
	<View style={styles.reportHorizontalRule} />
	</>
	);
	} else {
	content = (
	<TaskView
	report={props.report}
	shouldShowHorizontalRule={!props.shouldHideThreadDividerLine}

[aimane-chnaif]

@Pujan92 thanks for the proposal. Let's make sure to test on various cases including subtask, thread task, cancelled/deleted task, very long description, scrolling on mobile, offline.

[Pujan92]

Thanks, I will check and update based on that.

[Pujan92]

@aimane-chnaif I have updated the proposal a bit and here are the screencasts.

a1.mov

Simulator.Screen.Recording.-.iPhone.14.Pro.Max.-.2023-10-05.at.19.22.05.mp4

[melvin-bot]

@grgia, @aimane-chnaif Huh... This is 4 days overdue. Who can take care of this?

[aimane-chnaif]

@Pujan92 did you pass test on #27495 (comment)?

[Pujan92]

Yes @aimane-chnaif

[melvin-bot]

📣 It's been a week! Do we have any satisfactory proposals yet? Do we need to adjust the bounty for this issue? 💸

[grgia]

Assigned @Pujan92 !

[melvin-bot]

📣 @aimane-chnaif 🎉 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]

📣 @Pujan92 🎉 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 📖

[aimane-chnaif]

@Pujan92 what is ETA?

[Pujan92]

@Pujan92 what is ETA?

Working on it and will raise a PR within an hour.

[melvin-bot]

This issue has not been updated in over 15 days. @Pujan92, @grgia, @aimane-chnaif eroding to Monthly issue.

P.S. Is everyone reading this sure this is really a near-term priority? Be brave: if you disagree, go ahead and close it out. If someone disagrees, they'll reopen it, and if they don't: one less thing to do!

[aimane-chnaif]

@grgia can you please add Bug label and move to Daily? Thanks

[grgia]

@aimane-chnaif I think this was fixed and we can close

[aimane-chnaif]

@grgia yes, only payment is left

[melvin-bot]

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

[stephanieelliott]

Summarizing payment on this issue:

• Issue reporter: N/A
• Contributor: @Pujan92 $500, PAID via Upwork
• Contributor+: @aimane-chnaif, PAID via Upwork

Upwork job is here, [X] bonus is included on final payout

@aimane-chnaif can you please complete the BZ checklist above? Once completed I will issue payment. Thanks!

[aimane-chnaif]

I think we can skip checklist like #27477. This is not bug but kind of a small feature request

[stephanieelliott]

Sounds good to me - all paid !