[$500] IOU - "Unsubscribe from thread" button is visible on the hover menu

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

Action Performed:

Create a workspace
Create a scan IOU with a PDF in the workspace chat (make sure to keep hovering over the IOU on Windows)

Expected Result:

The button shouldn't disappear.

Actual Result:

"Unsubscribe from thread" button is visible for a short time on the hover menu.

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?

Screenshots/Videos

Add any screenshot/video evidence

Bug6339779_1705039568974.bandicam_2024-01-12_06-59-14-888.mp4

View all open jobs on GitHub

Upwork Automation - Do Not Edit

Upwork Job URL: https://www.upwork.com/jobs/~0117b089c8644a20b4
Upwork Job ID: 1745750063528005632
Last Price Increase: 2024-01-12

@puneetlath

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

Job added to Upwork: https://www.upwork.com/jobs/~0117b089c8644a20b4

@s77rt

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

Proposal

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

"Unsubscribe from thread" button is visible for a short time on the hover menu.

What is the root cause of that problem?

App/src/pages/home/report/ContextMenu/ContextMenuActions.js

Line 206 in b6a18b1

const subscribed = childReportNotificationPreference !== 'hidden';

In here because we don't set childReportNotificationPreference in reportAction of request money message, childReportNotificationPreference is empty string then we check isActionCreator

App/src/pages/home/report/ContextMenu/ContextMenuActions.js

Lines 201 to 202 in b6a18b1

    
           const isActionCreator = ReportUtils.isActionCreator(reportAction); 
        
           childReportNotificationPreference = isActionCreator ? CONST.REPORT.NOTIFICATION_PREFERENCE.ALWAYS : CONST.REPORT.NOTIFICATION_PREFERENCE.HIDDEN;

so subscribed is true and we display unsubcribe button on the context menu

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

Note that: This bug only be happened at a moment because the API return childReportNotificationPreference: 'hidden' in reportAction of request money message

We should set childReportNotificationPreferenc === 'hidden' in optimistic data of request money message

App/src/libs/ReportUtils.ts

Line 2899 in b6a18b1

return {

We should add

childReportNotificationPreference: 'hidden'

as the value is returned from BE

What alternative solutions did you explore? (Optional)

NA

Proposal

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

The unsubscribe option menu shows for a brief moment on a scanning request.

What is the root cause of that problem?

One of the conditions the unsubs option will show is that the childReportNotificationPreference is not hidden. When we create a scan request, the childReportNotificationPreference is empty.

App/src/pages/home/report/ContextMenu/ContextMenuActions.js

Lines 199 to 213 in b6a18b1

    
           let childReportNotificationPreference = lodashGet(reportAction, 'childReportNotificationPreference', ''); 
        
           if (!childReportNotificationPreference) { 
        
               const isActionCreator = ReportUtils.isActionCreator(reportAction); 
        
               childReportNotificationPreference = isActionCreator ? CONST.REPORT.NOTIFICATION_PREFERENCE.ALWAYS : CONST.REPORT.NOTIFICATION_PREFERENCE.HIDDEN; 
        
           } 
        
           const isDeletedAction = ReportActionsUtils.isDeletedAction(reportAction); 
        
           const shouldDisplayThreadReplies = ReportUtils.shouldDisplayThreadReplies(reportAction, reportID); 
        
           const subscribed = childReportNotificationPreference !== 'hidden'; 
        
           if (type !== CONST.CONTEXT_MENU_TYPES.REPORT_ACTION) { 
        
               return false; 
        
           } 
        
           const isCommentAction = reportAction.actionName === CONST.REPORT.ACTIONS.TYPE.ADDCOMMENT && !ReportUtils.isThreadFirstChat(reportAction, reportID); 
        
           const isReportPreviewAction = reportAction.actionName === CONST.REPORT.ACTIONS.TYPE.REPORTPREVIEW; 
        
           const isIOUAction = reportAction.actionName === CONST.REPORT.ACTIONS.TYPE.IOU && !ReportActionsUtils.isSplitBillAction(reportAction); 
        
           return subscribed && (isCommentAction || isReportPreviewAction || isIOUAction) && (!isDeletedAction || shouldDisplayThreadReplies);

Because it's empty, based on the logic above, the value will default to ALWAYS because we are the creator. Then, later we will get a HIDDEN value from the server, so the button hides, but the subscribe option never shows because we hide it if it's a whisper.

App/src/pages/home/report/ContextMenu/ContextMenuActions.js

Lines 170 to 171 in b6a18b1

    
           const isWhisperAction = ReportActionsUtils.isWhisperAction(reportAction); 
        
           return !subscribed && !isWhisperAction && (isCommentAction || isReportPreviewAction || isIOUAction) && (!isDeletedAction || shouldDisplayThreadReplies);

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

We can hide the unsubscribe option too if it's a whisper.

we can optionally set the notification preference to hidden optimistically ONLY when the request is going to be scanned by checking the length of the whisperedToAccountIDs in buildOptimisticIOUReportAction

Contributor details
Your Expensify account email: alikhokhar01233210@gmail.com
Upwork Profile Link: https://www.upwork.com/freelancers/~015c32305f13acc7f8

Problem Statement:
The "Unsubscribe from thread" button is briefly visible on the hover menu, causing a momentary glitch.

Root Cause Analysis:
Upon reviewing the provided information, it appears that the issue lies within the handling of childReportNotificationPreference in the ContextMenuActions.js file. Specifically, when creating a scan request, childReportNotificationPreference is initially empty, and later, a value of 'hidden' is returned from the server. However, due to the logic in place, the value defaults to 'ALWAYS' before being updated to 'HIDDEN', causing the button to briefly appear.

Solution Approach:
To address this issue, I propose the following changes:

Explicitly Set childReportNotificationPreference:
In cases where the API returns childReportNotificationPreference: 'hidden' for a scan request, we should explicitly set this value in the ContextMenuActions.js file. This ensures that the correct notification preference is established upfront, preventing the momentary display of the "Unsubscribe from thread" button.

javascript
Copy code
// Add this line where appropriate based on the logic flow
childReportNotificationPreference = 'hidden';
Optional Setting for Whisper Cases:
Considering the nature of the whisper scenario, we can hide the "Unsubscribe from thread" button if it's a whisper. This adjustment ensures that the button is not visible when it shouldn't be, providing a more consistent user experience.

javascript
Copy code
// Update the existing condition to include the check for whisper
return subscribed && (isCommentAction || isReportPreviewAction || isIOUAction) && (!isDeletedAction || shouldDisplayThreadReplies) && !isWhisper;
Optimistic Setting for Scanned Requests:
Optionally, we can set the notification preference to 'hidden' optimistically when the request is going to be scanned. This can be achieved by checking the length of the whisperedToAccountIDs in the buildOptimisticIOUReportAction function.

javascript
Copy code
// Add this check in buildOptimisticIOUReportAction
if (whisperedToAccountIDs.length > 0) {
reportAction.childReportNotificationPreference = 'hidden';
}

Conclusion:
These proposed changes aim to resolve the issue of the momentary visibility of the "Unsubscribe from thread" button by ensuring proper handling of childReportNotificationPreference in relevant scenarios. I am committed to implementing these changes once officially onboarded and given access to the codebase.

I look forward to your feedback and the opportunity to contribute to enhancing the stability and usability of the Expensify system.

Best regards,
Ali Ahmed

@AliKhokhar123

📣 @AliKhokhar123! 📣
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:

Make sure you've read and understood the contributing guidelines.
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.
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.
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>

@DylanDylann

@DylanDylann Thanks for the proposal. Your RCA is about right. However when the server response is received I expected the subscribe button to appear. The fact that it didn't means we have some other inconsistency to deal with (not a blocker). Setting the childReportNotificationPreference in the optimistic data is not a wrong approach but I don't think it's necessary, we don't seem to be setting this field anywhere so let's keep it that way for simplicity.

@puneetlath

@puneetlath When you get a chance please check #34428 (comment)

Also cc @rlinoz as I think you worked on notification preferences

@srikarparsi

I think we started returning hidden so it doesn't show up in the LHN, but I am not sure if this is the same thing.

cc: @srikarparsi @marcaaron

Not overdue. ^

Hey, we actually removed the leave thread/unsubscribe from thread option everywhere so I don't think this issue will be there anymore?

@puneetlath

@puneetlath @s77rt this issue is now 4 weeks old and preventing us from maintaining WAQ, can you:

Decide whether any proposals currently meet our guidelines and can be approved as-is today
If no proposals meet that standard, please take this issue internal and treat it as one of your highest priorities
If you have any questions, don't hesitate to start a discussion in #expensify-open-source

Thanks!

@s77rt

Current assignee @s77rt is eligible for the Internal assigner, not assigning anyone new.

@srikarparsi

@srikarparsi Correct! This is no longer reproducible

Ah cool, I'll go ahead and close this out then. Thanks y'all.

Navigation Menu

Repository navigation

[$500] IOU - "Unsubscribe from thread" button is visible on the hover menu #34428

Action Performed:

Expected Result:

Actual Result:

Workaround:

Platforms:

Screenshots/Videos

Proposal

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

What is the root cause of that problem?

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

What alternative solutions did you explore? (Optional)

Proposal

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

What is the root cause of that problem?

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

26 remaining items

Metadata

Assignees

Labels

Type

Projects

Milestone

Relationships

Development

	const isActionCreator = ReportUtils.isActionCreator(reportAction);
	childReportNotificationPreference = isActionCreator ? CONST.REPORT.NOTIFICATION_PREFERENCE.ALWAYS : CONST.REPORT.NOTIFICATION_PREFERENCE.HIDDEN;

	let childReportNotificationPreference = lodashGet(reportAction, 'childReportNotificationPreference', '');
	if (!childReportNotificationPreference) {
	const isActionCreator = ReportUtils.isActionCreator(reportAction);
	childReportNotificationPreference = isActionCreator ? CONST.REPORT.NOTIFICATION_PREFERENCE.ALWAYS : CONST.REPORT.NOTIFICATION_PREFERENCE.HIDDEN;
	}
	const isDeletedAction = ReportActionsUtils.isDeletedAction(reportAction);
	const shouldDisplayThreadReplies = ReportUtils.shouldDisplayThreadReplies(reportAction, reportID);
	const subscribed = childReportNotificationPreference !== 'hidden';
	if (type !== CONST.CONTEXT_MENU_TYPES.REPORT_ACTION) {
	return false;
	}
	const isCommentAction = reportAction.actionName === CONST.REPORT.ACTIONS.TYPE.ADDCOMMENT && !ReportUtils.isThreadFirstChat(reportAction, reportID);
	const isReportPreviewAction = reportAction.actionName === CONST.REPORT.ACTIONS.TYPE.REPORTPREVIEW;
	const isIOUAction = reportAction.actionName === CONST.REPORT.ACTIONS.TYPE.IOU && !ReportActionsUtils.isSplitBillAction(reportAction);
	return subscribed && (isCommentAction \|\| isReportPreviewAction \|\| isIOUAction) && (!isDeletedAction \|\| shouldDisplayThreadReplies);

	const isWhisperAction = ReportActionsUtils.isWhisperAction(reportAction);
	return !subscribed && !isWhisperAction && (isCommentAction \|\| isReportPreviewAction \|\| isIOUAction) && (!isDeletedAction \|\| shouldDisplayThreadReplies);

[$500] IOU - "Unsubscribe from thread" button is visible on the hover menu #34428

Description

Action Performed:

Expected Result:

Actual Result:

Workaround:

Platforms:

Screenshots/Videos

Activity

melvin-bot commented on Jan 12, 2024

melvin-bot commented on Jan 12, 2024

melvin-bot commented on Jan 12, 2024

DylanDylann commented on Jan 12, 2024

Proposal

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

What is the root cause of that problem?

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

What alternative solutions did you explore? (Optional)

bernhardoj commented on Jan 12, 2024

Proposal

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

What is the root cause of that problem?

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

AliKhokhar123 commented on Jan 12, 2024

melvin-bot commented on Jan 12, 2024

s77rt commented on Jan 13, 2024

26 remaining items

s77rt commented on Feb 5, 2024

rlinoz commented on Feb 6, 2024

s77rt commented on Feb 7, 2024

srikarparsi commented on Feb 9, 2024

melvin-bot commented on Feb 9, 2024

melvin-bot commented on Feb 9, 2024

s77rt commented on Feb 9, 2024

puneetlath commented on Feb 9, 2024

Metadata

Metadata

Assignees

Labels

Type

Projects

Milestone

Relationships

Development

Issue actions