[$250] Update the behavior of the yellow thread highlight after exiting a thread

[sonialiap]

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

---

Version Number:
Reproducible in staging?: y
Reproducible in production?: y
If this was caught during regression testing, add the test name, ID and link from TestRail: n/a
Email or phone of affected tester (no customers): everyone
Logs: https://stackoverflow.com/c/expensify/questions/4856
Expensify/Expensify Issue URL:
Issue reported by: @JmillsExpensify
Slack conversation: https://expensify.slack.com/archives/C03U7DCU4/p1714062455602839

Action Performed:

1. Click into a thread
2. Click back into the main conversation by clicking the the room title in the top left of the thread window
3. Observe that the thread is highlighted in yellow after you exit it

Expected Result:

The yellow highlight should fade after

• Clicking out of the chat into another chat
• Clicking into another thread
• Refreshing the page
• Sending a new comment in the same chat (but not receiving a comment from another user)
• Taking any action from the + menu while in the chat

Actual Result:

Highlight remains until you click out of the chat into another chat. It does not clear after any of the other cases mentioned above.

Workaround:

Usable but many have found the highlight confusing and distracting

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

Screen.Recording.2024-04-26.at.1.50.50.PM.mov

View all open jobs on GitHub

Upwork Automation - Do Not Edit

• Upwork Job URL: https://www.upwork.com/jobs/~019325e864a40fa38f
• Upwork Job ID: 1790455576916172800
• Last Price Increase: 2024-05-14
• Automatic offers:
• brunovjk | Contributor | 102439671
• ishpaul777 | Contributor | 104579107

Issue Owner

Current Issue Owner: @sobitneupane

[melvin-bot]

Triggered auto assignment to @lschurr (Bug), see https://stackoverflow.com/c/expensify/questions/14418 for more details. Please add this bug to a GH project, as outlined in the SO.

[melvin-bot]

Job added to Upwork: https://www.upwork.com/jobs/~019325e864a40fa38f

[melvin-bot]

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

[brunovjk]

Proposal

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

The yellow thread highlight in the Expensify app persists even after the user has exited the thread and performed other actions within the same chat.

What is the root cause of that problem?

The root cause lies in the highlightedBackgroundColorIfNeeded logic within ReportActionItem.tsx. Currently, the highlight is only cleared when the user navigates to a different chat. It does not consider other actions that should logically dismiss the highlight.

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

We should modify the highlightedBackgroundColorIfNeeded logic to include additional conditions for clearing the highlight. Specifically, the highlight should be cleared when:

• The user clicks out of the chat into another chat.
• The user clicks into another thread within the same chat.
• The user refreshes the page.
• The user sends a new comment in the same chat.
• The user takes any action from the "+" menu while in the chat.

To achieve this, we can introduce a state variable (e.g., isThreadHighlighted) and a useEffect hook to manage the highlight state. The hook would listen for the relevant events (e.g., navigation changes, new comments, "+" menu actions) and update the isThreadHighlighted state accordingly. The highlightedBackgroundColorIfNeeded logic would then depend on this state variable to determine whether to apply the highlight.

Details on Events and Handling:

1. Navigation Changes (Switching Chats):

• How to Listen: Utilize the useNavigation hook from React Navigation to detect changes in the active chat route.
• How to Handle: When the active chat route changes, set isThreadHighlighted to false.

2. Clicking into another thread within the same chat:

• How to Listen: Use the onPress prop of the ReportActionItem component to detect when a different thread is clicked within the same chat.
• How to Handle: In the onPress handler, check if the clicked report action is part of a different thread. If so, set isThreadHighlighted to false.

3. Sending a New Comment in the Same Chat:

• How to Listen: Since ReportActionItem does not have direct access to the comment submission event, a potential solution is to lift the state up to a common parent component (e.g., ReportActionsList). This parent component could then pass down a callback function to ReportActionItem to be triggered when a new comment is submitted successfully.
• How to Handle: The callback function passed down to ReportActionItem would set the isThreadHighlighted to false.

4. Taking Any Action from the "+" Menu While in the Chat:

• How to Listen: In the ReportActionCompose component, the onAddActionPressed function seems to be a good candidate to trigger an event when the "+" menu is pressed. We could either create a custom event or use a context to communicate this event to the ReportActionItem component.
• How to Handle: The ReportActionItem component would listen for the event (using useEffect or context) and set isThreadHighlighted to false when the event is triggered.

What alternative solutions did you explore? (Optional)

One alternative solution could be to use a timer to automatically clear the highlight after a certain delay. However, this approach might not be ideal as it could lead to inconsistent behavior depending on the user's actions. Another alternative is to clear the highlight whenever the user interacts with any element outside the highlighted thread. This might be too broad and could unintentionally clear the highlight in some cases.

[nkdengineer]

Proposal

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

Highlight remains until you click out of the chat into another chat. It does not clear after any of the other cases mentioned above.

What is the root cause of that problem?

The report action is always highlighted if it's the linked action.

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

Line 215 in edd1719

const highlightedBackgroundColorIfNeeded = useMemo(

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

I think we can do the same behavior in Slack that only highlights the link action in a few seconds so we don't need to take care what action we should clear the highlighted action

We can do this by using animated view here

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

Line 951 in edd1719

<View style={highlightedBackgroundColorIfNeeded}>

1. Create a shared value

const bgColor = useSharedValue<string>(isReportActionLinked ? theme.messageHighlightBG : 'inherit');

2. Create a useEffect to change the value to inherit

useEffect(() => {
    if (!isReportActionLinked) {
        return;
    }

    bgColor.value = withTiming('inherit', {
        duration: 3000,
        easing: Easing.inOut(Easing.ease),
    })
}, [isReportActionLinked, theme.messageHighlightBG])

3. Create a useEffect to do the animation again if the page is changed from un-focused to focused

const isFocused = useIsFocused();
const prevIsFocused = usePrevious(isFocused);
useEffect(() => {
    if (!isFocused || prevIsFocused || !isReportActionLinked) {
        return;
    }

    bgColor.value = theme.messageHighlightBG;
    bgColor.value = withTiming('inherit', {
        duration: 3000,
        easing: Easing.inOut(Easing.ease),
    })
}, [isFocused, prevIsFocused, isReportActionLinked])

4. Change the style here to use animated style

const highlightedBackgroundColorIfNeeded = useAnimatedStyle(() =>
    StyleUtils.getBackgroundColorStyle(bgColor.value)
);

https://github.com/nkdengineer/App/blob/edd1719f62d74663d52f4168db2fd7adfe0cdda3/src/pages/home/report/ReportActionItem.tsx#L215

5. Use animated view here

<Animated.View style={highlightedBackgroundColorIfNeeded}>

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

Line 951 in edd1719

<View style={highlightedBackgroundColorIfNeeded}>

What alternative solutions did you explore? (Optional)

NA

Result

Screen.Recording.2024-05-15.at.11.09.22.mov

[lschurr]

Hi @sobitneupane - Can you take a look at these proposals?

[sobitneupane]

Thanks for the proposal @brunovjk

The hook would listen for the relevant events (e.g., navigation changes, new comments, "+" menu actions) and update the isThreadHighlighted state accordingly.

Can you please add more details about each events that hook would listen to and how will you handle it?

[brunovjk]

Thanks for the review @sobitneupane

Proposal

Updated

Added more detailed implementation steps for handling events that should clear the thread highlight

[sobitneupane]

Thanks for the update @brunovjk

Proposal from @brunovjk looks good to me.

🎀 👀 🎀 C+ reviewed

[melvin-bot]

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

[nkdengineer]

Clicking out of the chat into another chat
Clicking into another thread
Refreshing the page
Sending a new comment in the same chat (but not receiving a comment from another user)
Taking any action from the + menu while in the chat

@sobitneupane I think we shouldn't removing the highlight of a message when we do these action because in addition to those, we have many other actions that should also remove the highlight like edit another comment, react, ... Instead, we should only have an animation for linked report action like Slack so we don't need to care what action we should clear the highlight. What do you think?

cc @yuwenmemon

[sobitneupane]

I think we shouldn't removing the highlight of a message when we do these action because in addition to those, we have many other actions that should also remove the highlight like edit another comment, react, ... Instead, we should only have an animation for linked report action like Slack so we don't need to care what action we should clear the highlight.

That's a good point @nkdengineer. I kind of agree with you. @yuwenmemon What's your take on highlighting just for few seconds and fading it out?

[brunovjk]

I also think it makes sense, I even pointed out this solution in the "alternative solutions" section before. We just need to test it carefully, but I think it will be good too.

[brunovjk]

@sobitneupane, @yuwenmemon and @nkdengineer What do you think about using both options together? It disappeared after a while and/or when the user performed some action.

[yuwenmemon]

Hmmm... I'd defer to @Expensify/design on this question.

The question is: Should the "yellow highlight" that highlights a linked message disappear a few seconds after showing?

[shawnborton]

I think we want to do what is outlined in the original comment:

The yellow highlight should fade after

Clicking out of the chat into another chat
Clicking into another thread
Refreshing the page
Sending a new comment in the same chat (but not receiving a comment from another user)
Taking any action from the + menu while in the chat

cc @sonialiap for confirmation though. I know this one was a long discussion, and I'm fairly certain we landed on the scenarios listed above.

[dannymcclain]

The question is: Should the "yellow highlight" that highlights a linked message disappear a few seconds after showing?

This has come up several times in Slack and there's been quite a bit of discussion about it. We've consistently received push-back about the highlight fading after a set period of time (some people are for it, some people are against it), and I think the consensus was to rely on actions to dismiss it rather than time. This seemed to be the best compromise amongst the entire team, so I think we should continue to pursue that path.

[sobitneupane]

Thanks @brunovjk . I appreciate your understanding.

Proposal from @ishpaul777 looks good to me. I believe it will make the thread highlight behavior more consistent and intuitive.

cc: @yuwenmemon

[melvin-bot]

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

[ishpaul777]

will create a PR over weekend

[ishpaul777]

PR is ready for review ^

[ishpaul777]

PR is still under review

[twisterdotcom]

Relabelling as Lauren is OOO now.

[melvin-bot]

Triggered auto assignment to @strepanier03 (Bug), see https://stackoverflow.com/c/expensify/questions/14418 for more details. Please add this bug to a GH project, as outlined in the SO.

[melvin-bot]

@yuwenmemon, @strepanier03, @sobitneupane, @lschurr, @ishpaul777 Uh oh! This issue is overdue by 2 days. Don't forget to update your issues!

[ishpaul777]

PR still WIP

[melvin-bot]

@yuwenmemon, @strepanier03, @sobitneupane, @lschurr, @ishpaul777 Huh... This is 4 days overdue. Who can take care of this?

[ishpaul777]

PR still WIP

[melvin-bot]

@yuwenmemon, @strepanier03, @sobitneupane, @lschurr, @ishpaul777 Now this issue is 8 days overdue. Are you sure this should be a Daily? Feel free to change it!

[ishpaul777]

still WIP, @strepanier03 can we move this weekly i expect to finish by EOW

[melvin-bot]

@yuwenmemon, @strepanier03, @sobitneupane, @lschurr, @ishpaul777 10 days overdue. Is anyone even seeing these? Hello?

[melvin-bot]

@yuwenmemon, @strepanier03, @sobitneupane, @lschurr, @ishpaul777 12 days overdue now... This issue's end is nigh!

[melvin-bot]

This issue has not been updated in over 14 days. @yuwenmemon, @strepanier03, @sobitneupane, @lschurr, @ishpaul777 eroding to Weekly issue.

[sobitneupane]

PR in review.