[HOLD for payment 2024-10-22] [$250] Workflow - Tapping add approval workflow or tapping back shows diff. behavior in mweb&android

@s77rt

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: 9.0.43-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: N/A
Issue reported by: Applause - Internal Team

Action Performed:

Launch both mweb and Android
Tap profile icon -- workspaces -- new workspace
Tap more features -- enable workflow
Tap workflow -- enable add approvals
Tap add approval workflow
Tap app back button

Expected Result:

While tapping add approval workflow or on tapping app back button "No members to display " page must not be shown

Actual Result:

In Android, tapping add approval workflow " No members to display " shown briefly but in mweb while tapping back button No members to display " page is shown

Workaround:

Unknown

Platforms:

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

Screenshots/Videos

Add any screenshot/video evidence

Bug6622365_1727889041861.Screenrecorder-2024-10-02-22-26-36-193_compress_1.mp4

View all open jobs on GitHub

Upwork Automation - Do Not Edit

Upwork Job URL: https://www.upwork.com/jobs/~021841560364430821283
Upwork Job ID: 1841560364430821283
Last Price Increase: 2024-10-02
Automatic offers:

Nodebrute | Contributor | 104312293

Issue Owner

Current Issue Owner: @s77rt

@garrettmknight

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

@garrettmknight

@garrettmknight 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

Proposal

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

What is the root cause of that problem?

App/src/pages/workspace/workflows/approvals/WorkspaceWorkflowsApprovalsExpensesFromPage.tsx

Lines 149 to 155 in 66d1025

    
           const goBack = useCallback(() => { 
        
               if (isInitialCreationFlow) { 
        
                   Workflow.clearApprovalWorkflow(); 
        
               } 
        
               Navigation.goBack(); 
        
           }, [isInitialCreationFlow]);

We clear the approval workflow data before closing the modal.

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

We should first call Navigation.goBack(); and only clear the data once the transition is complete.

        Navigation.goBack();  // We also can use dismissModal and Modal.close 
        if (isInitialCreationFlow) {
                InteractionManager.runAfterInteractions(() => {
                    Workflow.clearApprovalWorkflow();
                });
        }

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

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

In Android, tapping add approval workflow " No members to display " shown briefly but in mweb while tapping back button No members to display " page is shown

What is the root cause of that problem?

For mweb, the approval flow is cleared before we complete navigating back to the previous screen then the empty screen appears briefly

App/src/pages/workspace/workflows/approvals/WorkspaceWorkflowsApprovalsExpensesFromPage.tsx

Lines 149 to 156 in f325244

    
           const goBack = useCallback(() => { 
        
               if (isInitialCreationFlow) { 
        
                   Workflow.clearApprovalWorkflow(); 
        
               } 
        
               Navigation.goBack(); 
        
           }, [isInitialCreationFlow]); 
        
           const button = useMemo(() => {

For Android, we merge the approval workflow data to Onyx here and then navigate to the approval screen but the data is merged after we navigate to the approval screen. So the empty screen appears briefly based on this condition here

App/src/pages/workspace/workflows/WorkspaceWorkflowsPage.tsx

Lines 103 to 109 in 19a137d

    
               Workflow.setApprovalWorkflow({ 
        
                   ...INITIAL_APPROVAL_WORKFLOW, 
        
                   availableMembers, 
        
                   usedApproverEmails, 
        
               }); 
        
               Navigation.navigate(ROUTES.WORKSPACE_WORKFLOWS_APPROVALS_EXPENSES_FROM.getRoute(route.params.policyID)); 
        
           }, [policy, route.params.policyID, availableMembers, usedApproverEmails]);

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

For mweb bug, we should navigate back first and wrap the logic to clear approval workflow in InteractionManager.runAfterInteractions or use Modal.close

const goBack = useCallback(() => {
    Navigation.goBack();
    InteractionManager.runAfterInteractions(() => {
        if (!isInitialCreationFlow) {
            return;
        }
        Workflow.clearApprovalWorkflow();
    });
}, [isInitialCreationFlow]);

App/src/pages/workspace/workflows/approvals/WorkspaceWorkflowsApprovalsExpensesFromPage.tsx

Lines 149 to 156 in f325244

    
           const goBack = useCallback(() => { 
        
               if (isInitialCreationFlow) { 
        
                   Workflow.clearApprovalWorkflow(); 
        
               } 
        
               Navigation.goBack(); 
        
           }, [isInitialCreationFlow]); 
        
           const button = useMemo(() => {

For Android bug, we should navigate to the approval screen after the data is merged to Onyx completely.

App/src/pages/workspace/workflows/WorkspaceWorkflowsPage.tsx

Lines 103 to 109 in 19a137d

    
               Workflow.setApprovalWorkflow({ 
        
                   ...INITIAL_APPROVAL_WORKFLOW, 
        
                   availableMembers, 
        
                   usedApproverEmails, 
        
               }); 
        
               Navigation.navigate(ROUTES.WORKSPACE_WORKFLOWS_APPROVALS_EXPENSES_FROM.getRoute(route.params.policyID)); 
        
           }, [policy, route.params.policyID, availableMembers, usedApproverEmails]);

To do that we can use set method here which is faster because I see that we always pass full approval workflow data to this function.

App/src/libs/actions/Workflow.ts

Line 337 in 19a137d

Onyx.merge(ONYXKEYS.APPROVAL_WORKFLOW, approvalWorkflow);

Or we can return the Onyx.merge promise in this function then move the navigate logic to .then of the promise returned by setApprovalWorkflow function.

App/src/pages/workspace/workflows/WorkspaceWorkflowsPage.tsx

Lines 103 to 109 in 19a137d

    
               Workflow.setApprovalWorkflow({ 
        
                   ...INITIAL_APPROVAL_WORKFLOW, 
        
                   availableMembers, 
        
                   usedApproverEmails, 
        
               }); 
        
               Navigation.navigate(ROUTES.WORKSPACE_WORKFLOWS_APPROVALS_EXPENSES_FROM.getRoute(route.params.policyID)); 
        
           }, [policy, route.params.policyID, availableMembers, usedApproverEmails]);

What alternative solutions did you explore? (Optional)

Edited by proposal-police: This proposal was edited at 2024-10-02 20:22:02 UTC.

Proposal

Please restate the problem we are trying to solve in this issue.

Workflow - When tapping "Add Approval Workflow" or navigating back, the message "No members to display" is briefly shown.

What is the root cause of the problem?

When tapping the back button, the approval workflow object is set to null:

App/src/pages/workspace/workflows/approvals/WorkspaceWorkflowsApprovalsExpensesFromPage.tsx

Lines 149 to 156 in f325244

    
           const goBack = useCallback(() => { 
        
               if (isInitialCreationFlow) { 
        
                   Workflow.clearApprovalWorkflow(); 
        
               } 
        
               Navigation.goBack(); 
        
           }, [isInitialCreationFlow]); 
        
           const button = useMemo(() => {

App/src/libs/actions/Workflow.ts

Lines 340 to 342 in 9d252e8

    
           function clearApprovalWorkflow() { 
        
               Onyx.set(ONYXKEYS.APPROVAL_WORKFLOW, null); 
        
           }

This causes the shouldShowListEmptyContent variable to resolve to undefined, not false:

App/src/pages/workspace/workflows/approvals/WorkspaceWorkflowsApprovalsExpensesFromPage.tsx

Line 63 in 9d252e8

    
           const shouldShowListEmptyContent = approvalWorkflow && approvalWorkflow.availableMembers.length === 0;

Since we display the listEmptyContent if shouldShowListEmptyContent is true, the issue arises when shouldShowListEmptyContent is undefined. In such cases, the BaseSelectionList component uses a default value of true for shouldShowListEmptyContent:

App/src/components/SelectionList/BaseSelectionList.tsx

Line 103 in 0993f36

shouldShowListEmptyContent = true,

When an undefined value is passed, the component interprets it as not provided, and defaults to true.

What changes should we make to solve the problem?

We should ensure that the value passed is always a boolean, not undefined.To do this, we can update the code here:

App/src/pages/workspace/workflows/approvals/WorkspaceWorkflowsApprovalsExpensesFromPage.tsx

Line 63 in 9d252e8

    
           const shouldShowListEmptyContent = approvalWorkflow && approvalWorkflow.availableMembers.length === 0;

as follows:

const shouldShowListEmptyContent = !!(approvalWorkflow && approvalWorkflow.availableMembers.length === 0);

This ensures the empty page is only displayed when appropriate. we can do the same change in other arias that uses the shouldShowListEmptyContent prop in the selectionlist

now, we will have an issue where the members list becomes empty before navigating back. To address this, and the problem where the sections list becomes empty after clearing the members list, we can introduce a ref or state, isNavigatingBack. This state will be set to true if the user is navigating back after clearing the workflow.We will also use a usePrevious ref for approvalWorkflow?.availableMembers, which will be utilized in the section memo when the app is navigating back.
By implementing this solution, we maintain the synchronous behavior of first clearing the data and then performing the back action.

Changes:

Introduce the following:

    const [isNavigatingBack, setIsNavigatingBack] = useState(false);
const previousAvailableMembers = usePrevious(approvalWorkflow?.availableMembers);

add setIsNavigatingBack(true) in the goBack function before clearing the flow
Modify this condition as follows:

if (!approvalWorkflow?.members || isNavigatingBack) {

Use previousAvailableMembers when navigating back instead of this :

        if (approvalWorkflow?.availableMembers ?? isNavigatingBack) {
            const workflowAvailableMembers = (isNavigatingBack ? previousAvailableMembers : approvalWorkflow?.availableMembers) ?? [];
            const availableMembers = workflowAvailableMembers

Add || isNavigatingBack in this line .

What alternative solutions did you explore? (Optional)

@s77rt

Paid out in Upwork. @s77rt request when you're ready.

@s77rt

Reopening for @s77rt and @garrettmknight to complete the regression checklist.

@tgolen

@tgolen Completed here #50094 (comment)

@s77rt

$250 approved for @s77rt

@s77rt

Thanks @s77rt, and apologies that I missed it. @garrettmknight can you please be sure to copy those answers into the actual checklist and then complete it out?

@s77rt Can you give a little more context behind the regression? Would you say it was caused by one of these?

Initial design was incorrect or incomplete
Bug introduced during implementation
Bug caused by some unrelated change
Other (please specify)

I would say it's a bug that is introduced during implementation but it could also be that the design was incorrect if it was specific about the area where the bug occurred (I don't have access to the doc to confirm).

@garrettmknight

This issue has not been updated in over 15 days. @garrettmknight, @s77rt, @stitesExpensify, @Nodebrute eroding to Monthly issue.

P.S. Is everyone reading this sure this is really a near-term priority? Be brave: if you disagree, go ahead and close it out. If someone disagrees, they'll reopen it, and if they don't: one less thing to do!

Navigation Menu

Repository navigation

[HOLD for payment 2024-10-22] [$250] Workflow - Tapping add approval workflow or tapping back shows diff. behavior in mweb&android #50094

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?

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 restate the problem we are trying to solve in this issue.

What is the root cause of the problem?

What changes should we make to solve the problem?

Changes:

What alternative solutions did you explore? (Optional)

44 remaining items

Metadata

Assignees

Labels

Type

Projects

Milestone

Relationships

Development

	const goBack = useCallback(() => {
	if (isInitialCreationFlow) {
	Workflow.clearApprovalWorkflow();
	}
	Navigation.goBack();
	}, [isInitialCreationFlow]);

	Workflow.setApprovalWorkflow({
	...INITIAL_APPROVAL_WORKFLOW,
	availableMembers,
	usedApproverEmails,
	});
	Navigation.navigate(ROUTES.WORKSPACE_WORKFLOWS_APPROVALS_EXPENSES_FROM.getRoute(route.params.policyID));
	}, [policy, route.params.policyID, availableMembers, usedApproverEmails]);

	function clearApprovalWorkflow() {
	Onyx.set(ONYXKEYS.APPROVAL_WORKFLOW, null);
	}

[HOLD for payment 2024-10-22] [$250] Workflow - Tapping add approval workflow or tapping back shows diff. behavior in mweb&android #50094

Description

Action Performed:

Expected Result:

Actual Result:

Workaround:

Platforms:

Screenshots/Videos

Activity

melvin-bot commented on Oct 2, 2024

lanitochka17 commented on Oct 2, 2024

cretadn22 commented on Oct 2, 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?

melvin-bot commented on Oct 2, 2024

melvin-bot commented on Oct 2, 2024

nkdengineer commented on Oct 2, 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)

abzokhattab commented on Oct 2, 2024

Proposal

Please restate the problem we are trying to solve in this issue.

What is the root cause of the problem?

What changes should we make to solve the problem?

Changes:

What alternative solutions did you explore? (Optional)

44 remaining items

garrettmknight commented on Oct 23, 2024

tgolen commented on Oct 23, 2024

s77rt commented on Oct 23, 2024

JmillsExpensify commented on Oct 24, 2024

tgolen commented on Oct 24, 2024

s77rt commented on Oct 24, 2024

melvin-bot commented on Nov 18, 2024

Metadata

Metadata

Assignees

Labels

Type

Projects

Milestone

Relationships

Development

Issue actions