[$1000] reply text appears as strikethrough on delete parent message in offline mode

[kavimuru]

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 any chat
2. send any message
3. hover on that message and select reply in thread option
4. go to that thread report screen
5. send message in thread
6. go back to parent report screen
7. go offline
8. delete original message

   Expected Result:

   only message should be show as strikethrough text not the reply and counter text

   Actual Result:

   reply text appears as strikethrough on delete parent message

Workaround:

Can the user still use Expensify without this being fixed? Have you informed them of the workaround?

Platforms:

Which of our officially supported platforms is this issue occurring on?

• [x] Android / native
• [x] Android / Chrome
• [x] iOS / native
• [x] iOS / Safari
• [x] MacOS / Chrome / Safari
• [x] MacOS / Desktop

Version Number: 1.3.40-1 Reproducible in staging?: y Reproducible in production?: y 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

https://github.com/Expensify/App/assets/43996225/ee1164c1-66eb-435d-81c5-ef74a896f268

https://github.com/Expensify/App/assets/43996225/9f889048-0c8f-4a5b-902c-8b40c8a5604a

Expensify/Expensify Issue URL: Issue reported by: @gadhiyamanan Slack conversation: https://expensify.slack.com/archives/C049HHMV9SM/p1689249243007879

View all open jobs on GitHub

Upwork Automation - Do Not Edit

• Upwork Job URL: https://www.upwork.com/jobs/~01783ca3e14a37fff1
• Upwork Job ID: 1680963716129968128
• Last Price Increase: 2023-10-11

[fedirjh]

I think @ShogunFire's proposal makes sense to me. I believe it's the most flexible solution and can be future-proof.

@ShogunFire I would like to explore one more solution, You mentioned that :

The opacity of the parent div is applied to all his children.

Can't we change this logic and make it more flexible, for example:

1. Loop over all children's props
2. if we find stopOfflineWithFeedbackStyle within any child then we shouldn’t apply the opacity to the parent and instead pass it to children and repeat the same step 1
3. If we don't find any stopOfflineWithFeedbackStyle then we can apply the opacity to the parent children.

Is it possible to implement such a solution?

[ShogunFire]

Yes that's a better solution since it allow us to declare NoOfflineStyleForChild wherever we want and not only as a child of OfflineWityhFeedback, the challenge will be to make this method efficient because if we have a depth of 10 and the child that is the more deep has stopOfflineWithFeedbackStyle it means at each depth we will have to go through the whole children tree

[fedirjh]

it means at each depth we will have to go through the whole children

Hmm, we are doing a similar thing for the strikethrough style ?

https://github.com/Expensify/App/blob/754b6edf175a10deb6c6876bdba13c2a99e0ffec/src/components/OfflineWithFeedback.js#L73

---

For that case we can use a new component <NoOfflineStyleForChild> with the prop stopOfflineWithFeedBackStyle that must be a direct child of OfflineWithFeedback, we can set a prop stopOfflineWithFeedBackStyle to that component.

Can you please show me where the changes should be implemented? I checked the code and I am not sure if it can be a direct child of OfflineWithFeedback.

[ShogunFire]

Ah you are right, I though we had to go through the tree multiple time but I think we can find a solution without doing that.

I am not sure if it can be a direct child of OfflineWithFeedback.

Again you are right, my proposal was kind of a general idea but was tricky to put in place, we would have had to add some OfflineWithFeedback think but if we apply your suggestion it should be good.

[ShogunFire]

@fedirjh So far I have this, it's almost working but the opacity is applied multiple times so I will find a way later to apply the style only to the highest possible parent

function applyOfflineStyle(children, needsOpacity, needsStrikeThrough) {
    var shouldParentApplyOfflineStyle = true;
    return [React.Children.map(children, (child) => {
        if (!React.isValidElement(child)) {
            return child;
        }

        if(child.props.stopOfflineWithFeedBackStyle){
            shouldParentApplyOfflineStyle = false;
            return child;
        }
        var props = {style: child.props.style};
        var shouldApplyStyle = true;
        if(child.props.children){
            [props.children, shouldApplyStyle] = applyOfflineStyle(child.props.children, needsOpacity, needsStrikeThrough);
        }

        if(!shouldApplyStyle){
            shouldParentApplyOfflineStyle = false;
            return React.cloneElement(child, props);
        }

        if(needsStrikeThrough){
            props.style = StyleUtils.combineStyles(props.style, styles.offlineFeedback.deleted, styles.userSelectNone);
        }
        if(needsOpacity){
            props.style = StyleUtils.combineStyles(props.style, styles.offlineFeedback.pending);
        }
        return React.cloneElement(child, props);
    }), shouldParentApplyOfflineStyle];
}

[melvin-bot[bot]]

@kevinksullivan, @fedirjh Whoops! This issue is 2 days overdue. Let's get this updated quick!

[fedirjh]

it's almost working

@ShogunFire Can you please post a demo ? what do you mean by almost working?

the opacity is applied multiple times

It doesn’t seem to be an issue unless if it breaks something.

[ShogunFire]

@fedirjh Since the opacity is applied multiple times it shows greyer than it should, I will try to fix that today

[ShogunFire]

I spent a lot of time on this and at some point it stopped applying the style, I found out that it was working in theory but the highest parent, the one we apply the opacity to was ShowContextMenuContext.Provider which is never displayed, so I added a wrapperView to which I apply the style.

The way we find the highest parent is either the root or the parent that has both type of children .

It is working well.

The code starts to be a little big so this is my commit: https://github.com/Expensify/App/commit/293c41f1f103bde6234238103977ae6a9d143824

Note: To be able to click on replies, we just need to remove pointerEvents (or add a better condition) here: https://github.com/Expensify/App/blob/d84006f1c0af969290dd4aaa99422bd15fdf93bc/src/pages/home/report/ReportActionItem.js#L544

[melvin-bot[bot]]

@kevinksullivan, @fedirjh Whoops! This issue is 2 days overdue. Let's get this updated quick!

[melvin-bot[bot]]

@kevinksullivan, @fedirjh 6 days overdue. This is scarier than being forced to listen to Vogon poetry!

[fedirjh]

Reviewing today.

[melvin-bot[bot]]

@kevinksullivan, @fedirjh Eep! 4 days overdue now. Issues have feelings too...

[melvin-bot[bot]]

@kevinksullivan, @fedirjh Huh... This is 4 days overdue. Who can take care of this?

[kevinksullivan]

Hi @fedirjh can you provide an update here?

[ShogunFire]

Proposal

Updated

I updated my proposal with the current solution and made it more clear because it was all over the place. Can you check this @fedirjh ?

[melvin-bot[bot]]

@kevinksullivan, @fedirjh Eep! 4 days overdue now. Issues have feelings too...

[melvin-bot[bot]]

@kevinksullivan, @fedirjh 6 days overdue. This is scarier than being forced to listen to Vogon poetry!

[fedirjh]

I will review it today

[melvin-bot[bot]]

@kevinksullivan, @fedirjh Eep! 4 days overdue now. Issues have feelings too...

[kevinksullivan]

What's the latest here @fedirjh ? I will need to reassign this as it's been a while if we can't get a review in the next day.

[melvin-bot[bot]]

@kevinksullivan, @fedirjh Eep! 4 days overdue now. Issues have feelings too...

[melvin-bot[bot]]

Triggered auto assignment to @MariaHCD (Engineering), see https://stackoverflow.com/c/expensify/questions/4319 for more details.

[melvin-bot[bot]]

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

[melvin-bot[bot]]

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

[kevinksullivan]

Reassigning

[melvin-bot[bot]]

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

[melvin-bot[bot]]

@kevinksullivan, @rushatgabhane Huh... This is 4 days overdue. Who can take care of this?

[kevinksullivan]

@rushatgabhane will you be able to review this?

[melvin-bot[bot]]

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

[mvtglobally]

Issue not reproducible during KI retests. (First week)

[ShogunFire]

Still reproducible, @rushatgabhane what do you think of my proposal It will allow us to stop the offline style propagation just by passing stopOfflineWithFeedBackStyle prop to a component, and it works well

[melvin-bot[bot]]

@kevinksullivan, @rushatgabhane Whoops! This issue is 2 days overdue. Let's get this updated quick!

[melvin-bot[bot]]

@kevinksullivan, @rushatgabhane 6 days overdue. This is scarier than being forced to listen to Vogon poetry!

[mvtglobally]

Issue not reproducible during KI retests. (Second week)

[kevinksullivan]

If @mvtglobally is saying it's not reproducible I'm closing this. Please provide proof that this is reproducible if you disagree. Thanks

[ShogunFire]

@kevinksullivan Ok so for some reason the strike through is not applied anymore on "x replies" BUT the opacity is still applied and you can't click on "x replies" I think this was part of the bug as the C+ had said here: https://github.com/Expensify/App/issues/22810#issuecomment-1654688121

https://github.com/Expensify/App/assets/19537677/6ebd4efb-9bf6-4d42-b0ca-86847174fbf9

[rushatgabhane]

Not a bug @ShogunFire

[ShogunFire]

I disagree, the replies haven't changed so they should not be grey

[rushatgabhane]

it's debatable because replies is a child of the comment. please raise it on slack for feedback if you disagree

[ShogunFire]

No answer on the slack thread: https://expensify.slack.com/archives/C01GTK53T8Q/p1697569221310029