[HOLD for payment 2024-12-03] [$250] Workspace members - User is not highlighted briefly in the table after being invited #52479

lanitochka17 · 2024-11-13T13:52:27Z

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.61-0
Reproducible in staging?: Y
Reproducible in production?: Y
If this was caught on HybridApp, is this reproducible on New Expensify Standalone?: 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): applausetester+kh021101@applause.expensifail.com
Issue reported by: Applause - Internal Team

Action Performed:

Go to staging.new.expensify.com
Go to workspace settings
Go to Members
Click Invite
Select any member > Next
Click Invite

Expected Result:

The user will be highlighted briefly in the table after being invited. (previous behavior can be seen in this issue video #51788
).

Actual Result:

The user is not highlighted briefly in the table after being invited

Workaround:

Unknown

Platforms:

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

Screenshots/Videos

Add any screenshot/video evidence

Bug6663576_1731492388923.20241113_180239.mp4

View all open jobs on GitHub

Upwork Automation - Do Not Edit

Upwork Job URL: https://www.upwork.com/jobs/~021856768422191044805
Upwork Job ID: 1856768422191044805
Last Price Increase: 2024-11-13
Automatic offers:

suneox | Reviewer | 104962187

melvin-bot · 2024-11-13T13:52:39Z

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

gijoe0295 · 2024-11-13T14:34:42Z

Proposal

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

The user is not highlighted briefly in the table after being invited

What is the root cause of that problem?

We clear workspace invite member draft Onyx data on beforeRemove event of WorkspaceInvitePage:

App/src/pages/workspace/WorkspaceInvitePage.tsx

Lines 71 to 74 in 7960b7d

    
           const unsubscribe = navigation.addListener('beforeRemove', () => { 
        
               Member.setWorkspaceInviteMembersDraft(route.params.policyID, {}); 
        
           });

Later in WorkspaceMembersPage, we check for invitedEmailsToAccountIDsDraft before highlighting the newly invited members:

App/src/pages/workspace/WorkspaceMembersPage.tsx

Lines 414 to 418 in 4eaf05f

    
           if (isEmptyObject(invitedEmailsToAccountIDsDraft) || accountIDs === prevAccountIDs) { 
        
               return; 
        
           } 
        
           const invitedEmails = Object.values(invitedEmailsToAccountIDsDraft).map(String); 
        
           selectionListRef.current?.scrollAndHighlightItem?.(invitedEmails, 1500);

So the invited members data is cleared before it's checked in the above effects so scrollAndHighlightItem is not triggered.

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

We should delay the beforeRemove callback until the RHP is fully dismissed using InteractionManager.runAfterInteractions

mkzie2 · 2024-11-13T14:53:23Z

Proposal

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

The user is not highlighted briefly in the table after being invited

What is the root cause of that problem?

After we invite members, the draft invite members is cleared before WorkspaceMembersPage is focused

App/src/pages/workspace/WorkspaceInvitePage.tsx

Lines 70 to 75 in b1c1a4b

    
           useEffect(() => { 
        
               const unsubscribe = navigation.addListener('beforeRemove', () => { 
        
                   Member.setWorkspaceInviteMembersDraft(route.params.policyID, {}); 
        
               }); 
        
               return unsubscribe;

It leads invitedEmailsToAccountIDsDraft to be empty when the page is focused. So the new members aren't highlighted.

App/src/pages/workspace/WorkspaceMembersPage.tsx

Lines 410 to 418 in b1c1a4b

    
           useEffect(() => { 
        
               if (!isFocused) { 
        
                   return; 
        
               } 
        
               if (isEmptyObject(invitedEmailsToAccountIDsDraft) || accountIDs === prevAccountIDs) { 
        
                   return; 
        
               } 
        
               const invitedEmails = Object.values(invitedEmailsToAccountIDsDraft).map(String); 
        
               selectionListRef.current?.scrollAndHighlightItem?.(invitedEmails, 1500);

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

If the invite API is called here, we should not clear the draft invite members because we've cleared it after highlighting the new members here

App/src/pages/workspace/WorkspaceInvitePage.tsx

Lines 70 to 75 in b1c1a4b

    
           useEffect(() => { 
        
               const unsubscribe = navigation.addListener('beforeRemove', () => { 
        
                   Member.setWorkspaceInviteMembersDraft(route.params.policyID, {}); 
        
               }); 
        
               return unsubscribe;

We can create a new ref invitedUserRef

invitedUserRef = useRef(false);

Update this to true when we call the invite API here

invitedUserRef.current = true;

Don't clear the draft members if invitedUserRef.current is true;

const unsubscribe = navigation.addListener('beforeRemove', () => {
    if (invitedUserRef.current) {
        return;
    }
    Member.setWorkspaceInviteMembersDraft(route.params.policyID, {});
});

App/src/pages/workspace/WorkspaceInvitePage.tsx

Lines 70 to 75 in b1c1a4b

    
           useEffect(() => { 
        
               const unsubscribe = navigation.addListener('beforeRemove', () => { 
        
                   Member.setWorkspaceInviteMembersDraft(route.params.policyID, {}); 
        
               }); 
        
               return unsubscribe;

What alternative solutions did you explore? (Optional)

bernhardoj · 2024-11-13T15:31:35Z

Proposal

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

User is not highlighted for a moment after adding it to workspace.

What is the root cause of that problem?

We highlight the new member if the page is focused, the accountID list changes, and there is an invite member draft.

App/src/pages/workspace/WorkspaceMembersPage.tsx

Lines 411 to 420 in b1c1a4b

    
               if (!isFocused) { 
        
                   return; 
        
               } 
        
               if (isEmptyObject(invitedEmailsToAccountIDsDraft) || accountIDs === prevAccountIDs) { 
        
                   return; 
        
               } 
        
               const invitedEmails = Object.values(invitedEmailsToAccountIDsDraft).map(String); 
        
               selectionListRef.current?.scrollAndHighlightItem?.(invitedEmails, 1500); 
        
               Member.setWorkspaceInviteMembersDraft(route.params.policyID, {}); 
        
           }, [invitedEmailsToAccountIDsDraft, route.params.policyID, isFocused, accountIDs, prevAccountIDs]);

However, after inviting new users, the beforeRemove event is triggered which clears the invite member draft.

App/src/pages/workspace/WorkspaceInvitePage.tsx

Lines 70 to 76 in b1c1a4b

    
           useEffect(() => { 
        
               const unsubscribe = navigation.addListener('beforeRemove', () => { 
        
                   Member.setWorkspaceInviteMembersDraft(route.params.policyID, {}); 
        
               }); 
        
               return unsubscribe; 
        
           }, [navigation, route.params.policyID]);

So the users are never highlighted because the draft is cleared. This happens after #51227.

But after fixing the above problem, the issue still happens when we invite users that we never chatted with before. In that case, the user is disabled. getItemBackgroundColorStyle will return an undefined background color if the item is disabled and the focused state is only true if it's not disabled.

App/src/components/SelectionList/BaseSelectionList.tsx

Line 490 in 1b9e302

    
           const isItemFocused = (!isDisabled || item.isSelected) && (focusedIndex === normalizedIndex || itemsToHighlight?.has(item.keyForList ?? ''));

App/src/components/SelectionList/BaseListItem.tsx

Lines 101 to 104 in b1c1a4b

    
           style={[ 
        
               pressableStyle, 
        
               isFocused && StyleUtils.getItemBackgroundColorStyle(!!item.isSelected, !!isFocused, !!item.isDisabled, theme.activeComponentBG, theme.hoverComponentBG), 
        
           ]}

App/src/styles/utils/index.ts

Lines 1127 to 1138 in b1c1a4b

    
           function getItemBackgroundColorStyle(isSelected: boolean, isFocused: boolean, isDisabled: boolean, selectedBG: string, focusedBG: string): ViewStyle { 
        
               if (isSelected) { 
        
                   return {backgroundColor: selectedBG}; 
        
               } 
        
               if (isDisabled) { 
        
                   return {backgroundColor: undefined}; 
        
               } 
        
               if (isFocused) { 
        
                   return {backgroundColor: focusedBG}; 
        
               }

It's to fix #51984.

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

We should clear the draft only if the invite page is focused.

App/src/pages/workspace/WorkspaceInvitePage.tsx

Lines 70 to 76 in b1c1a4b

    
           useEffect(() => { 
        
               const unsubscribe = navigation.addListener('beforeRemove', () => { 
        
                   Member.setWorkspaceInviteMembersDraft(route.params.policyID, {}); 
        
               }); 
        
               return unsubscribe; 
        
           }, [navigation, route.params.policyID]);

The original logic was added to solve this issue where the invite member draft is not cleared when we close the page.

useEffect(() => {
    if (!isFocused) {
        return;
    }
    const unsubscribe = navigation.addListener('beforeRemove', () => {
        Member.setWorkspaceInviteMembersDraft(route.params.policyID, {});
    });

    return unsubscribe;
}, [navigation, route.params.policyID, isFocused]);

After applying the above changes, the invite member draft won't be cleared if we open the invite page > invite message page > then press the overlay. But on prod, it's also not cleared if we refresh while on the message page and close the RHP from the overlay. If we want, we can clear it in the invite message page too, but only if sendInvitation is not called.

App/src/pages/workspace/WorkspaceInviteMessagePage.tsx

Lines 100 to 107 in 1b9e302

    
           const sendInvitation = () => { 
        
               Keyboard.dismiss(); 
        
               const policyMemberAccountIDs = Object.values(PolicyUtils.getMemberAccountIDsForWorkspace(policy?.employeeList, false, false)); 
        
               // Please see https://github.com/Expensify/App/blob/main/README.md#Security for more details 
        
               Member.addMembersToWorkspace(invitedEmailsToAccountIDsDraft ?? {}, `${welcomeNoteSubject}\n\n${welcomeNote}`, route.params.policyID, policyMemberAccountIDs); 
        
               debouncedSaveDraft(null); 
        
               Navigation.dismissModal(); 
        
           };

Now, to fix the disabled new member not getting highlighted, we need to separate the itemsToHighlight vaue.

App/src/components/SelectionList/BaseSelectionList.tsx

Lines 490 to 499 in 1b9e302

    
           const isItemFocused = (!isDisabled || item.isSelected) && (focusedIndex === normalizedIndex || itemsToHighlight?.has(item.keyForList ?? '')); 
        
           // We only create tooltips for the first 10 users or so since some reports have hundreds of users, causing performance to degrade. 
        
           const showTooltip = shouldShowTooltips && normalizedIndex < 10; 
        
           return ( 
        
               <View onLayout={(event: LayoutChangeEvent) => onItemLayout(event, item?.keyForList)}> 
        
                   <BaseSelectionListItemRenderer 
        
                       ListItem={ListItem} 
        
                       item={item} 
        
                       index={index}

const isItemFocused = (!isDisabled || item.isSelected) && (focusedIndex === normalizedIndex);
const isItemHighlighted = itemsToHighlight?.has(item.keyForList ?? '');

And if isItemHighlighted is true, we pass the highlighted bg color to the pressableStyle.

pressableStyle={isItemHighlighted ? styles.hoveredComponentBG : {}}

We need to update TableListItem to receive pressableStyle and pass it to BaseListItem. This way, disabled members will still be highlighted. This highlight logic is currently being used in workspace members page only.

sakluger · 2024-11-13T16:35:06Z

The current behavior shown in the video looks fine to me. I'm checking with the team in Slack (https://expensify.slack.com/archives/C06ML6X0W9L/p1731515655449829) to see if this should be considered a bug or not.

melvin-bot · 2024-11-13T18:37:45Z

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

melvin-bot · 2024-11-13T18:37:50Z

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

sakluger · 2024-11-13T18:38:01Z

I got confirmation that the expected behavior is correct in the OP. Let's fix it!

sakluger · 2024-11-13T19:02:53Z

I was asked to clarify the intended behavior after inviting a new member to a workspace:

Make sure that user is in the view port (there could be hundreds of members)
Temporarily highlight the member using yellow

huult · 2024-11-14T07:08:15Z

Edited by proposal-police: This proposal was edited at 2024-11-14 07:19:45 UTC.

Proposal

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

User is not highlighted briefly in the table after being invited

What is the root cause of that problem?

Before returning to the workspace members, we set setWorkspaceInviteMembersDraft to {} from the workspace invite page

App/src/pages/workspace/WorkspaceInvitePage.tsx

Lines 70 to 76 in 04402e9

    
           useEffect(() => { 
        
               const unsubscribe = navigation.addListener('beforeRemove', () => { 
        
                   Member.setWorkspaceInviteMembersDraft(route.params.policyID, {}); 
        
               }); 
        
               return unsubscribe; 
        
           }, [navigation, route.params.policyID]);

This code checks if invitedEmailsToAccountIDsDraft is empty or if accountIDs equals prevAccountIDs. If either condition is true, it returns early. Otherwise, it maps the invited emails and calls scrollAndHighlightItem to scroll and highlight the items in the list.

App/src/pages/workspace/WorkspaceMembersPage.tsx

Line 414 in 4eaf05f

    
           if (isEmptyObject(invitedEmailsToAccountIDsDraft) || accountIDs === prevAccountIDs) {

We set setWorkspaceInviteMembersDraft to {} before returning to the workspace members, therefore it returns early and does not scroll and highlight the item.

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

To resolve this issue, we should check for changes in the accountIDs list. If there are new accountIDs, we will scroll and highlight them. The code will be:

App/src/pages/workspace/WorkspaceMembersPage.tsx

Line 414 in 4eaf05f

    
           if (isEmptyObject(invitedEmailsToAccountIDsDraft) || accountIDs === prevAccountIDs) {

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

        // We check if accountIDs haven't changed, then return
+        if (accountIDs === prevAccountIDs) {
+          return;
+        }

        // We check if one or more members were removed from accountIDs, then return
+        if (accountIDs.length < prevAccountIDs.length) {
+          return;
+        }

+        const diffAccountIDs = accountIDs.filter((id) => !prevAccountIDs.includes(id));

        // If no account changes, return early
+        if (!isEmptyObject(invitedEmailsToAccountIDsDraft) && !diffAccountIDs.length) {
+          return;
+        }

-        if (isEmptyObject(invitedEmailsToAccountIDsDraft) || accountIDs === prevAccountIDs) {
-            return;
-        }
-        const invitedEmails = Object.values(invitedEmailsToAccountIDsDraft).map(String);
-        selectionListRef.current?.scrollAndHighlightItem?.(invitedEmails, 1500);
+        selectionListRef.current?.scrollAndHighlightItem?.(
+            diffAccountIDs.map((item) => String(item)),
+            1500,
+        );
        Member.setWorkspaceInviteMembersDraft(route.params.policyID, {});
    }, [invitedEmailsToAccountIDsDraft, route.params.policyID, isFocused, accountIDs, prevAccountIDs]);

Test branch

POC

Screen.Recording.2024-11-14.at.14.17.32.mp4

What alternative solutions did you explore? (Optional)

suneox · 2024-11-18T15:54:41Z

Thanks for all the proposals. The RCA from @bernhardoj proposal is correct—this issue occurred after merging PR #51227. His proposal also supports updating a custom highlighted BG, so we can proceed with this proposal

🎀 👀 🎀 C+ reviewed

Temporarily highlight the member using yellow

@sakluger We need to confirm whether the expected highlight background should look like the one

Screen.Recording.2024-11-17.at.21.34.56.mp4

or if we need a different background color?

melvin-bot · 2024-11-18T15:54:53Z

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

sakluger · 2024-11-18T16:44:26Z

cc @Expensify/design could you please help verify the correct highlight color for when a new member is invited to a workspace? Can we use the same color as we do on the Expenses page as shown in the comment above?

dannymcclain · 2024-11-18T17:30:01Z

Yes I think we should use the same highlight pattern we use for expenses on the search page.

dubielzyk-expensify · 2024-11-18T23:39:50Z

Yes I think we should use the same highlight pattern we use for expenses on the search page.

Agree

shawnborton · 2024-11-18T23:56:17Z

Agree three

melvin-bot · 2024-11-19T02:27:47Z

📣 @suneox 🎉 An offer has been automatically sent to your Upwork account for the Reviewer role 🎉 Thanks for contributing to the Expensify app!

Offer link
Upwork job

bernhardoj · 2024-11-19T10:42:57Z

PR is ready

cc: @suneox

JmillsExpensify · 2024-11-19T11:18:29Z

Same same. One highlight pattern to rule them all.

melvin-bot · 2024-11-26T16:15:34Z

Reviewing label has been removed, please complete the "BugZero Checklist".

melvin-bot · 2024-11-26T16:15:39Z

The solution for this issue has been 🚀 deployed to production 🚀 in version 9.0.66-8 and is now subject to a 7-day regression period 📆. Here is the list of pull requests that resolve this issue:

Fix new ws member isn't highlighted #52750

If no regressions arise, payment will be issued on 2024-12-03. 🎊

For reference, here are some details about the assignees on this issue:

@suneox requires payment automatic offer (Reviewer)
@bernhardoj requires payment through NewDot Manual Requests

melvin-bot · 2024-11-26T16:15:40Z

@suneox @sakluger @suneox The PR fixing this issue has been merged! The following checklist (instructions) will need to be completed before the issue can be closed. Please copy/paste the BugZero Checklist from here into a new comment on this GH and complete it. If you have the K2 extension, you can simply click: [this button]

sakluger · 2024-12-02T21:53:34Z

Hey @suneox, please complete the BZ checklist before the payment due date tomorrow. Thanks!

suneox · 2024-12-03T03:49:07Z

sakluger · 2024-12-03T16:54:28Z

Summarizing payment on this issue:

Contributor: @bernhardoj $250, please request via NewDot
Contributor+: @suneox $250, paid via Upwork

JmillsExpensify · 2024-12-05T14:00:56Z

$250 approved for @bernhardoj

lanitochka17 added Daily KSv2 Bug Something is broken. Auto assigns a BugZero manager. labels Nov 13, 2024

melvin-bot bot assigned sakluger Nov 13, 2024

sakluger added the External Added to denote the issue can be worked on by a contributor label Nov 13, 2024

melvin-bot bot changed the title ~~Workspace members - User is not highlighted briefly in the table after being invited~~ [$250] Workspace members - User is not highlighted briefly in the table after being invited Nov 13, 2024

melvin-bot bot added the Help Wanted Apply this label when an issue is open to proposals by contributors label Nov 13, 2024

melvin-bot bot assigned suneox Nov 13, 2024

melvin-bot bot assigned techievivek Nov 18, 2024

techievivek assigned bernhardoj Nov 19, 2024

melvin-bot bot removed the Help Wanted Apply this label when an issue is open to proposals by contributors label Nov 19, 2024

bernhardoj mentioned this issue Nov 19, 2024

Fix new ws member isn't highlighted #52750

Merged

49 tasks

melvin-bot bot added Reviewing Has a PR in review and removed Daily KSv2 labels Nov 19, 2024

melvin-bot bot added the Weekly KSv2 label Nov 19, 2024

melvin-bot bot added Weekly KSv2 Awaiting Payment Auto-added when associated PR is deployed to production and removed Weekly KSv2 labels Nov 26, 2024

melvin-bot bot changed the title ~~[$250] Workspace members - User is not highlighted briefly in the table after being invited~~ [HOLD for payment 2024-12-03] [$250] Workspace members - User is not highlighted briefly in the table after being invited Nov 26, 2024

melvin-bot bot removed the Reviewing Has a PR in review label Nov 26, 2024

suneox mentioned this issue Dec 3, 2024

fix: Members are unselected when refresh Add message page and go back #51227

Merged

50 tasks

melvin-bot bot added Daily KSv2 and removed Weekly KSv2 labels Dec 3, 2024

sakluger closed this as completed Dec 3, 2024

sakluger mentioned this issue Jan 3, 2025

[$250] Group - When receiving invitation to group system message is displayed several times in chat #53439

Closed

8 tasks

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

[HOLD for payment 2024-12-03] [$250] Workspace members - User is not highlighted briefly in the table after being invited #52479

[HOLD for payment 2024-12-03] [$250] Workspace members - User is not highlighted briefly in the table after being invited #52479

lanitochka17 commented Nov 13, 2024 •

edited by sakluger

Loading

melvin-bot bot commented Nov 13, 2024

gijoe0295 commented Nov 13, 2024

mkzie2 commented Nov 13, 2024

bernhardoj commented Nov 13, 2024

sakluger commented Nov 13, 2024

melvin-bot bot commented Nov 13, 2024

melvin-bot bot commented Nov 13, 2024

sakluger commented Nov 13, 2024

sakluger commented Nov 13, 2024

huult commented Nov 14, 2024 •

edited by github-actions bot

Loading

suneox commented Nov 18, 2024

melvin-bot bot commented Nov 18, 2024

sakluger commented Nov 18, 2024

dannymcclain commented Nov 18, 2024

dubielzyk-expensify commented Nov 18, 2024

shawnborton commented Nov 18, 2024

melvin-bot bot commented Nov 19, 2024

bernhardoj commented Nov 19, 2024

JmillsExpensify commented Nov 19, 2024

melvin-bot bot commented Nov 26, 2024

melvin-bot bot commented Nov 26, 2024

melvin-bot bot commented Nov 26, 2024

sakluger commented Dec 2, 2024

suneox commented Dec 3, 2024

sakluger commented Dec 3, 2024

JmillsExpensify commented Dec 5, 2024

[HOLD for payment 2024-12-03] [$250] Workspace members - User is not highlighted briefly in the table after being invited #52479

[HOLD for payment 2024-12-03] [$250] Workspace members - User is not highlighted briefly in the table after being invited #52479

Comments

lanitochka17 commented Nov 13, 2024 • edited by sakluger Loading

Action Performed:

Expected Result:

Actual Result:

Workaround:

Platforms:

Screenshots/Videos

melvin-bot bot commented Nov 13, 2024

gijoe0295 commented Nov 13, 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?

mkzie2 commented Nov 13, 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 Nov 13, 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?

sakluger commented Nov 13, 2024

melvin-bot bot commented Nov 13, 2024

melvin-bot bot commented Nov 13, 2024

sakluger commented Nov 13, 2024

sakluger commented Nov 13, 2024

huult commented Nov 14, 2024 • edited by github-actions bot Loading

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?

Test branch

What alternative solutions did you explore? (Optional)

suneox commented Nov 18, 2024

melvin-bot bot commented Nov 18, 2024

sakluger commented Nov 18, 2024

dannymcclain commented Nov 18, 2024

dubielzyk-expensify commented Nov 18, 2024

shawnborton commented Nov 18, 2024

melvin-bot bot commented Nov 19, 2024

bernhardoj commented Nov 19, 2024

JmillsExpensify commented Nov 19, 2024

melvin-bot bot commented Nov 26, 2024

melvin-bot bot commented Nov 26, 2024

melvin-bot bot commented Nov 26, 2024

sakluger commented Dec 2, 2024

suneox commented Dec 3, 2024

BugZero Checklist:

sakluger commented Dec 3, 2024

JmillsExpensify commented Dec 5, 2024

lanitochka17 commented Nov 13, 2024 •

edited by sakluger

Loading

huult commented Nov 14, 2024 •

edited by github-actions bot

Loading