[HOLD for payment 2024-04-15] [$500] Task - Mark as complete button shows up on cancelled task report

[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.47-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
Expensify/Expensify Issue URL:
Issue reported by: Applause internal team
Slack conversation:

Action Performed:

1. Go to staging.new.expensify.com
2. Go to chat.
3. Create a task.
4. Click on the task.
5. Click 3-dot menu > Delete > Delete the task.
6. Go to the cancelled task report from LHN.

Expected Result:

Mark as complete button will not show up on cancelled task report.

Actual Result:

Mark as complete button shows up on cancelled task report. Clicking on the button leads to error.
On mweb, Android and iOS app, the button appears and disappears after opening the cancelled task report.

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

Bug6402230_1709602046041.bandicam_2024-03-05_06-02-11-676__3_.mp4

View all open jobs on GitHub

Upwork Automation - Do Not Edit

• Upwork Job URL: https://www.upwork.com/jobs/~0142a0550498bb0d82
• Upwork Job ID: 1765856337867956224
• Last Price Increase: 2024-03-21
• Automatic offers:
• situchan | Reviewer | 0
• dukenv0307 | Contributor | 0

[melvin-bot]

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

[m-natarajan]

We think that this bug might be related to #vip-vsb
cc @quinthar

[m-natarajan]

@ischurr 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.

[dukenv0307]

Proposal

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

Mark as complete button shows up on cancelled task report. Clicking on the button leads to error.
On mweb, Android and iOS app, the button appears and disappears after opening the cancelled task report.

What is the root cause of that problem?

When we open the task report, OpenReport API is called and BE returns isDeletedParentAction as null.

It leads to this check being true in HeaderView

App/src/pages/home/HeaderView.js

Line 362 in a79c119

{isTaskReport && !isSmallScreenWidth && ReportUtils.isOpenTaskReport(props.report) && <TaskHeaderActionButton report={props.report} />}

App/src/libs/ReportUtils.ts

Line 671 in a79c119

isTaskReport(report) && !isCanceledTaskReport(report, parentReportAction) && report?.stateNum === CONST.REPORT.STATE_NUM.OPEN && report?.statusNum === CONST.REPORT.STATUS_NUM.OPEN

because we don't pass parentReportAction into isOpenTaskReport task report as we

App/src/pages/home/ReportScreen.js

Line 535 in a79c119

{ReportUtils.isTaskReport(report) && isSmallScreenWidth && ReportUtils.isOpenTaskReport(report, parentReportAction) && (

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

1. We should pass parentReportAction from ReportScreen into HeaderView instead of getting it through getParentReportAction because HeaderView will not re-render if parentReportAction is changed.

App/src/pages/home/HeaderView.js

Line 113 in a79c119

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

2. pass props.parentReportAction into isOpenTaskReport here

{isTaskReport && !isSmallScreenWidth && ReportUtils.isOpenTaskReport(props.report, props.parentReportAction) && <TaskHeaderActionButton report={props.report} />} 

App/src/pages/home/HeaderView.js

Line 362 in a79c119

{isTaskReport && !isSmallScreenWidth && ReportUtils.isOpenTaskReport(props.report) && <TaskHeaderActionButton report={props.report} />}

3. We should get all actions of parent report through another withOnyx and then get the parent report action inside the report screen and then we will update the the memo function to only re-render when the current parent report action is changed.

App/src/pages/home/ReportScreen.tsx

Line 627 in ddf9e7a

parentReportAction: {

What alternative solutions did you explore? (Optional)

NA

[lschurr]

Asking in Slack - https://expensify.slack.com/archives/C066HJM2CAZ/p1709658682543139

[melvin-bot]

Job added to Upwork: https://www.upwork.com/jobs/~0142a0550498bb0d82

[melvin-bot]

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

[lschurr]

Added to #vip-vsb. @situchan can you review the proposal here when you get a chance?

[Pranav2612000]

Proposal

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

After creating a new task and then deleting it, the mark as complete button should also not be shown on the page.
For instance, in the below image, the "Mark as complete" button should not be visible because the task has been deleted.

An error being displayed when the button is clicked is a side-effect of this problem, and ensuring that the button is not visible should also fix this.

What is the root cause of that problem?

The ReportUtils.isOpenTaskReport function call in HeaderView.js is not being passed the parentReportAction.

App/src/pages/home/HeaderView.js

Line 362 in a79c119

{isTaskReport && !isSmallScreenWidth && ReportUtils.isOpenTaskReport(props.report) && <TaskHeaderActionButton report={props.report} />}

This is necessary because the isOpenTaskReport function calls isCanceledTaskReport which required a parentReportAction value to determine if a task is deleted or not.

App/src/libs/ReportUtils.ts

Line 671 in a79c119

isTaskReport(report) && !isCanceledTaskReport(report, parentReportAction) && report?.stateNum === CONST.REPORT.STATE_NUM.OPEN && report?.statusNum === CONST.REPORT.STATUS_NUM.OPEN

App/src/libs/ReportUtils.ts

Line 652 in a79c119

function isCanceledTaskReport(report: OnyxEntry<Report> | EmptyObject = {}, parentReportAction: OnyxEntry<ReportAction> | EmptyObject = {}): boolean {

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

1. Pass the parentReportAction to the ReportUtils.isOpenTaskReport function call in HeaderView.js. The parentReportAction has already been defined in the component and is being used in multiple places.
   

   App/src/pages/home/HeaderView.js

   Line 362 in a79c119

   {isTaskReport && !isSmallScreenWidth && ReportUtils.isOpenTaskReport(props.report) && <TaskHeaderActionButton report={props.report} />}

2. The above step should fix this issue, but we are using the ReportActionsUtils.getParentReportAction function to define the parentReportAction but this method has been deprecated.
   

   App/src/pages/home/HeaderView.js

   Line 113 in a79c119

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

   
   If the reviewer feels this should also be addressed in the scope of this PR. We can pass the parentReportAction as a prop to the HeaderView component. Alternatively, we can also create a new method which uses Onyx.connect() or withOnyx().

3. If the reviewer feels its required, adding tests which test for this bug to ensure that it never creeps back in.

What alternative solutions did you explore? (Optional)

NA

[melvin-bot]

📣 @Pranav2612000! 📣
Hey, it seems we don’t have your contributor details yet! You'll only have to do this once, and this is how we'll hire you on Upwork.
Please follow these steps:

1. Make sure you've read and understood the contributing guidelines.
2. Get the email address used to login to your Expensify account. If you don't already have an Expensify account, create one here. If you have multiple accounts (e.g. one for testing), please use your main account email.
3. Get the link to your Upwork profile. It's necessary because we only pay via Upwork. You can access it by logging in, and then clicking on your name. It'll look like this. If you don't already have an account, sign up for one here.
4. Copy the format below and paste it in a comment on this issue. Replace the placeholder text with your actual details.
   
   Format:

Contributor details
Your Expensify account email: <REPLACE EMAIL HERE>
Upwork Profile Link: <REPLACE LINK HERE>

[Pranav2612000]

Contributor details
Your Expensify account email: pranav26joglekar+expensify@gmail.com
Upwork Profile Link: https://www.upwork.com/freelancers/~0153fc53185acededc

[melvin-bot]

✅ Contributor details stored successfully. Thank you for contributing to Expensify!

[lschurr]

@situchan could you review?

[lschurr]

Bump @situchan

[situchan]

There's viable proposal. I will test shortly and approve.

[dukenv0307]

@situchan The problem is we are getting parentReportAction in the same withOnyx with report data. so parentReportAction will be undefined briefly until report data is loaded.

App/src/pages/home/ReportScreen.tsx

Line 627 in ddf9e7a

parentReportAction: {

Updated proposal to include the fix for this case

[melvin-bot]

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

[situchan]

@dukenv0307's proposal looks good to me.
🎀 👀 🎀 C+ reviewed

[melvin-bot]

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

[melvin-bot]

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

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

[dukenv0307]

@situchan The PR is ready for review.

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

• Fix mark as complete button shows up on cancelled task report #38991

If no regressions arise, payment will be issued on 2024-04-15. 🎊

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

• @situchan requires payment automatic offer (Reviewer)
• @dukenv0307 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:

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

[lschurr]

@dukenv0307 - Do we need a regression test for this one?

[lschurr]

Payment summary:

• Contributor: @dukenv0307 $500 (paid in Upwork)
• Contributor+: @situchan $500 (paid in Upwork)