[$500] Task - [Deleted task] is not grayed out in task report when the task is deleted offline

[lanitochka17]

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 staging.new.expensify.com
2. click the green FAB button > Assign a Task
3. Add a Title and a Description
4. Assign a known user to the Task
5. Navigate to a task report
6. Go offline
7. Click three-dot menu > Cancel (you should see [Deleted Task])
8. Return to the 1:1 DM where the task is shared

Expected Result:

In Step 4, after deleting the task, [Deleted task] message is grayed out

Actual Result:

In Step 4, after deleting the task, [Deleted task] message is not grayed out in the task report, while [Deleted task] is grayed out in 1:1 DM in Step 5

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

Bug6214084_20230926_023232.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/~0140a361ebd43cf297
• Upwork Job ID: 1706757467311755264
• Last Price Increase: 2023-10-03

[melvin-bot]

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

[hungvu193]

Proposal

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

Task - [Deleted task] is not grayed out in task report when the task is deleted offline

What is the root cause of that problem?

When user canceled a task, we only added the pendingAction for taskAction and the parentAction here:

App/src/libs/actions/Task.js

Lines 768 to 769 in e14e9ee

	[parentReportAction.reportActionID]: {
	pendingAction: CONST.RED_BRICK_ROAD_PENDING_ACTION.UPDATE,

App/src/libs/actions/Task.js

Lines 807 to 810 in e14e9ee

	onyxMethod: Onyx.METHOD.MERGE,
	key: `${ONYXKEYS.COLLECTION.REPORT_ACTIONS}${taskReportID}`,
	value: {
	[optimisticReportActionID]: optimisticCancelReportAction,

Also we didn't wrap our canceled task view with OfflineWithFeedback, so we it won't grey out when task is deleted offline:

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

Lines 522 to 534 in e14e9ee

	if (ReportUtils.isCanceledTaskReport(props.report, parentReportAction)) {
	return (
	<>
	<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} />
	</>

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

Add pendingAction: CONST.RED_BRICK_ROAD_PENDING_ACTION.UPDATE to our optimisticData here

Also clean up it here:

        {
            onyxMethod: Onyx.METHOD.MERGE,
            key: `${ONYXKEYS.COLLECTION.REPORT}${taskReportID}`,
            value: {
                pendingAction: null
            }
        }

Finally wrap our canceled task view with OfflineWithFeedback.

if (ReportUtils.isCanceledTaskReport(props.report, parentReportAction)) {
    return (
        <OfflineWithFeedback pendingAction={props.report.pendingAction}>
        </OfflineWithFeedback>
    );
}

What alternative solutions did you explore? (Optional)

N/A

[DylanDylann]

Proposal

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

[Deleted task] is not grey when cancelling task offline

What is the root cause of that problem?

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

Lines 521 to 536 in b9a2f62

	if (ReportUtils.isTaskReport(props.report)) {
	if (ReportUtils.isCanceledTaskReport(props.report, parentReportAction)) {
	return (
	<>
	<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} />
	</>
	);
	}

We don’t wrap [Deleted task] message by OfflineWithFeedback Component

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

we should add OfflineWithFeedback Component as wrapper like this

<OfflineWithFeedback pendingAction={parentReportAction.pendingAction}>

[DylanDylann]

My proposal post first in Slack

[Christinadobrzyn]

I can reproduce this but I'm not actually sure if this is a bug or a feature request.

When you come back online, the [Deleted Task] is bold in both the chat and the Task Assignment. I don't know if this needs to be fixed now. What is expected when you're online? It should be bold right?

[Christinadobrzyn]

Asking the team - https://expensify.slack.com/archives/C01SKUP7QR0/p1695748789919179

[Christinadobrzyn]

Follow up from Slack chat: https://expensify.slack.com/archives/C01SKUP7QR0/p1695748789919179

This is a polish job so something we should move forward with fixing.

Expensify Tasks Design doc (not available for everyone) says we follow offline first. So that would indicate that the [Deleted Message] needs to be greyed out not bold.

I'm not sure if this should be Internal or External so adding External.

[melvin-bot]

Job added to Upwork: https://www.upwork.com/jobs/~0140a361ebd43cf297

[melvin-bot]

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

[melvin-bot]

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

[ghost]

Proposal

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

The [Delete task] message is not grayed out in the task report when the task was deleted offline. The message should be grayed out when the task is deleted offline.

What is the root cause of that problem?

The task report component is not re-rendering when a task is deleted offline. This could happen if the component is using another variable that is not updated when a task is deleted offline.

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

We can use the state or props to render the tasks, and update them accordingly when a task is deleted offline. This way, the component will re-render and show the correct status of the tasks.

What alternative solutions did you explore? (Optional)

[melvin-bot]

📣 @MichaelAwinda! 📣
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>

[ghost]

Contributor details
Your Expensify account email: michaelawinda1@gmail.com
Upwork Profile Link: https://www.upwork.com/freelancers/~01d2d01066fd216588

[melvin-bot]

⚠️ Missing/invalid email or upwork profile link. Please make sure you add both your Expensify email and Upwork profile link in the format specified.

[ghost]

Contributor details
Your Expensify account email: michaelawinda1@gmail.com
Upwork Profile Link: https://www.upwork.com/freelancers/~01d2d01066fd216588

[melvin-bot]

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

[jjcoffee]

Unsure of how to handle a proposal being posted on Slack earlier than the first proposal on the issue, but I think since this issue wasn't created from the bug on Slack where the proposal was posted, that we unfortunately wouldn't take it into account in this case.

That being said, I prefer @hungvu193's proposal anyway as it feels a bit tidier to add the extra pendingAction rather than getting it from the parentReportAction.

🎀👀🎀 C+ reviewed

[melvin-bot]

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

[DylanDylann]

I prefer @hungvu193's #28190 (comment) anyway as it feels a bit tidier to add the extra pendingAction rather than getting it from the parentReportAction.

@jjcoffee Could you help to explain this point? Because

1. In here
   

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

   Line 526 in b9a2f62

   action={parentReportAction}

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

Line 522 in b9a2f62

if (ReportUtils.isCanceledTaskReport(props.report, parentReportAction)) {

We also are using parentReportAction

2. using parentReportAction will make code changes less

[melvin-bot]

@francoisl, @jjcoffee, @Christinadobrzyn Whoops! This issue is 2 days overdue. Let's get this updated quick!

[jjcoffee]

@DylanDylann I don't feel too strongly about it, it just makes sense to me to also update the pendingAction on the actual report you're deleting/cancelling.

[DylanDylann]

@jjcoffee
When canceling the task, we only change the parent action of task report and add a new comment "Delete task", the rest remains the same. If we add pendingAction for the task report, not only the first message on task report is grey out (this is mentioned in OP) but the task report in LHN is also greyed out. Is it expected?

[jjcoffee]

@hungvu193 Do you want to weigh in on this?

[hungvu193]

I believe the task in LHN grey out is expected, because we're deleting the task not a specific action.

[DylanDylann]

One more thing, We want to grey out the first message of task report (It is a report action). IMO, It is more suitable if we use pending action of report action to grey out report action (this is way we use in other palces). we shouldn't use pending action of report to grey out the report action (don't use in other places).

[hungvu193]

We still use the pendingAction of the report for action for few cases, for examples:

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

Line 58 in 0aafbf5

pendingAction={lodashGet(props.report, 'pendingFields.addWorkspaceRoom') || lodashGet(props.report, 'pendingFields.createChat')}

In this case, I just want to update pendingAction on the actual task report.

[jjcoffee]

@DylanDylann The task report is already greyed out in LHN for me on latest main.

Remember that the point of pendingAction isn't only to grey things out 😄 We could also technically just pass isDeletedParentAction as the pendingAction in OfflineWithFeedback, since we already set that optimistically here but I think we're just splitting hairs here as any method works, unless @francoisl has a strong opinion otherwise!

[DylanDylann]

We want to grey out the first message of task report (It is a report action). IMO, It is more suitable if we use pending action of report action to grey out report action (this is way we use in other palces). we shouldn't use pending action of report to grey out the report action (don't use in other places).

Just a final note, some action to task report on offline will make the first message of task report is greyed out if we use pendingAction of report for it.

[melvin-bot]

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

[Christinadobrzyn]

hi @jjcoffee let me know if these proposals are looking good or if you'd like to see more!

[francoisl]

Looks like we just did some refactoring for tasks with #24601 / #27827 and I'm not sure this is still an issue... in particular, after canceling a task while offline, we now still display the regular task view, with the task name / checkbox, description and assignee - and no [Deleted task] message as reported above.

Screen.Recording.2023-10-03.at.9.06.04.PM.mov

Am I missing something, or is this no longer an issue?

[hungvu193]

Looks like we just did some refactoring for tasks with #24601 / #27827 and I'm not sure this is still an issue... in particular, after canceling a task while offline, we now still display the regular task view, with the task name / checkbox, description and assignee - and no [Deleted task] message as reported above.

Screen.Recording.2023-10-03.at.9.06.04.PM.mov
Am I missing something, or is this no longer an issue?

Hmm yeah, It seems we are no longer added [Deleted task] message. So this is not reproducible anymore.

[jjcoffee]

Sorry I missed that! We're good to close this then @francoisl

[Christinadobrzyn]

I'll ask QA to test just to make sure this is not happening anymore - https://expensify.slack.com/archives/C9YU7BX5M/p1696434612063849

[kbecciv]

@Christinadobrzyn Issue is not reproduced on v1.3.77-5. We are seeing old UI task page instead of the new one. Is this expected?

20231005_001741.mp4

New UI task page

[francoisl]

I believe your "New UI task page" is from the video in the original post on an older version? Anyway, looks like this is no longer an issue, going to close.

Thanks for the proposals anyway everyone, and on to the next one 🚀