[PAID] [$250] [Collect] Workspace - User name and avatar disappears when opening profile immediately after invite #38925

izarutskaya · 2024-03-25T11:17:37Z

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.56-2
Reproducible in staging?: Y
Reproducible in production?: Y
Logs: https://stackoverflow.com/c/expensify/questions/4856
Issue reported by: Applause-Internal team

Action Performed:

Precondition:

User is admin of Collect workspace.

Go to staging.new.expensify.com.
Go to Profile > Workspaces > Collect workspace.
Go to Members.
Invite a new member that does not have Expensify account.
Immediately after inviting the member, click on the highlighted new user in the list.

Expected Result:

The user name and avatar will not disappear.

Actual Result:

The user name disappears and avatar changes to placeholder avatar.

Workaround:

Unknown

Platforms:

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

Screenshots/Videos

Bug6425580_1711344257027.20240325_132027.mp4

View all open jobs on GitHub

Upwork Automation - Do Not Edit

Upwork Job URL: https://www.upwork.com/jobs/~011d6aa43dad80012f
Upwork Job ID: 1778901063514075136
Last Price Increase: 2024-04-26
Automatic offers:

ikevin127 | Reviewer | 0
nkdengineer | Contributor | 0
bernhardoj | Contributor | 102955490

Issue Owner

Current Issue Owner: @strepanier03

melvin-bot · 2024-03-25T11:17:49Z

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

izarutskaya · 2024-03-25T11:18:45Z

We think that this bug might be related to #wave-control.

bernhardoj · 2024-03-25T15:06:16Z

Proposal

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

The user name and avatar disappear if we view the recently added workspace member. We can easily reproduce this by adding the member while offline, viewing the member detail, and go online.

What is the root cause of that problem?

When we start adding a new member, we generate an optimistic personal detail for that user and clear it when the request is successful.

App/src/libs/actions/Policy.ts

Lines 1130 to 1138 in b3baa68

    
           const optimisticData: OnyxUpdate[] = [ 
        
               { 
        
                   onyxMethod: Onyx.METHOD.MERGE, 
        
                   key: membersListKey, 
        
                   // Convert to object with each key containing {pendingAction: ‘add’} 
        
                   value: optimisticMembersState, 
        
               }, 
        
               ...newPersonalDetailsOnyxData.optimisticData,

App/src/libs/actions/Policy.ts

Lines 1143 to 1161 in b3baa68

    
           const successData: OnyxUpdate[] = [ 
        
               { 
        
                   onyxMethod: Onyx.METHOD.MERGE, 
        
                   key: membersListKey, 
        
                   // Convert to object with each key clearing pendingAction, when it is an existing account. 
        
                   // Remove the object, when it is a newly created account. 
        
                   value: accountIDs.reduce((accountIDsWithClearedPendingAction, accountID) => { 
        
                       let value = null; 
        
                       const accountAlreadyExists = !isEmptyObject(allPersonalDetails?.[accountID]); 
        
                       if (accountAlreadyExists) { 
        
                           value = {pendingAction: null, errors: null}; 
        
                       } 
        
                       return {...accountIDsWithClearedPendingAction, [accountID]: value}; 
        
                   }, {}), 
        
               }, 
        
               ...newPersonalDetailsOnyxData.finallyData,

That's why after the request is completed, the name and avatar disappear because we are viewing the optimistic personal detail data that is already gone.

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

We can disable it when the personal detail is still an optimistic one until we receive the correct personal detail from the server. This is what we do in several places too, for example:

App/src/components/ReportWelcomeText.tsx

Lines 143 to 153 in b3baa68

    
           {ReportUtils.isOptimisticPersonalDetail(accountID) ? ( 
        
               <Text style={[styles.textStrong]}>{displayName}</Text> 
        
           ) : ( 
        
               <Text 
        
                   style={[styles.textStrong]} 
        
                   onPress={() => Navigation.navigate(ROUTES.PROFILE.getRoute(accountID))} 
        
                   suppressHighlighting 
        
               > 
        
                   {displayName} 
        
               </Text> 
        
           )}

App/src/components/MoneyTemporaryForRefactorRequestConfirmationList.js

Lines 422 to 425 in 1c632fe

    
           formattedParticipantsList = _.map(formattedParticipantsList, (participant) => ({ 
        
               ...participant, 
        
               isDisabled: ReportUtils.isOptimisticPersonalDetail(participant.accountID), 
        
           }));

First, add isOptimisticPersonalDetail: true to getNewPersonalDetailsOnyxData.

App/src/libs/PersonalDetailsUtils.ts

Lines 125 to 138 in 1c632fe

    
           function getNewPersonalDetailsOnyxData(logins: string[], accountIDs: number[]): Required<Pick<OnyxData, 'optimisticData' | 'finallyData'>> { 
        
               const personalDetailsNew: PersonalDetailsList = {}; 
        
               const personalDetailsCleanup: PersonalDetailsList = {}; 
        
               logins.forEach((login, index) => { 
        
                   const accountID = accountIDs[index]; 
        
                   if (allPersonalDetails && Object.keys(allPersonalDetails?.[accountID] ?? {}).length === 0) { 
        
                       personalDetailsNew[accountID] = { 
        
                           login, 
        
                           accountID, 
        
                           avatar: UserUtils.getDefaultAvatarURL(accountID), 
        
                           displayName: LocalePhoneNumber.formatPhoneNumber(login), 
        
                       };

Then, disable it when isOptimisticPersonalDetail is true.

App/src/pages/workspace/WorkspaceMembersPage.tsx

Lines 362 to 367 in 1c632fe

    
           isDisabled: 
        
               isPolicyAdmin && 
        
               (accountID === session?.accountID || 
        
                   accountID === policy?.ownerAccountID || 
        
                   policyMember.pendingAction === CONST.RED_BRICK_ROAD_PENDING_ACTION.DELETE || 
        
                   !isEmptyObject(policyMember.errors)),

This will disable the checkbox too, we can customize to not disable the checkbox, but I don't think that's a good idea separating the checkbox disabled state and the row disabled state. Or we can keep it enable, but do nothing when clicked (or just toggle the checkbox when clicked).

optionally we can show not found page on member detail page when it's an optimistic personal detail, but I see we don't do that for profile page, so not sure whether we want to do this or not

What alternative solutions did you explore? (Optional)

Don't clear the optimistic personal detail, but this would keep stacking unnecessary data every time we add a new member. Also, it's useless for the user to see the outdated optimistic personal detail when the server already sends us the correct data.

or don't rerender the detail page when personal details change. we can use memo for this case.

Another alternative is, save the member optimistic login in a ref, then if the member personal details become empty, iterate through the policy members collection and find the one that has the same login. If found, close the current member page and navigate to the new one. But this would fail if we invite the user with their secondary login.

bernhardoj · 2024-03-25T15:12:16Z

Just FYI, we don't need to perform the 5th step quickly. We can perform it while offline to reproduce it easier.

Go offline
Add a new member (any user that doesn't exist in your contact, it can be a registered expensify user or non-registered, doesn't matter)
Click the member to open the detail
Go online
Wait for a few seconds until the apps reconnecting and the name and avatar will disappear

strepanier03 · 2024-03-26T23:14:42Z

Hmmm, I'm having a slightly different experience with the avatar, but the username isn't an issue when testing Mac/Chrome and Android mobile web for me.

On both here's what I am doing and seeing:

Go to staging.new.expensify.com.
Go to Profile > Workspaces > Collect workspace.
Go to Members.
Invite a new member that does not have Expensify account.
Immediately after inviting the member, click on the highlighted new user in the list.

Expected Result:
The user name and avatar will not disappear and remain as they appear until the user updates them..

Actual Result:
In the RHP the username and avatar remain as they appear initially, but in the member table the avatar changes to a different default avatar. Pressing back and then clicking on the new member, shows the updated avatar.

2024-03-26_16-12-53.mp4

bernhardoj · 2024-03-27T02:52:49Z

@strepanier03 did you test it on a collect workspace? Looking at the left side of the workspace menu, I guess it's a free workspace. The new RHP for workspace member detail (instead of a profile page that is shown in your video) is only available for collect workspace.

strepanier03 · 2024-03-27T16:08:37Z

I'll retest, I made a collect workspace but maybe clicked the wrong button afterward and added on the free workspace.

strepanier03 · 2024-03-27T19:34:42Z

Running into an issue recreating this. I get a "Hmm ... its not here" in the RHP when clicking on any Collect workspace member.

I'm going to ask for a hand repro'ing and then tie to a project.

strepanier03 · 2024-03-27T19:54:19Z

Not sure what was different on the second collect workspace I made but I was able to repro with a fresh slate.

2024-03-27_12-53-12.mp4

melvin-bot · 2024-04-08T18:05:30Z

@strepanier03 this issue was created 2 weeks ago. Are we close to a solution? Let's make sure we're treating this as a top priority. Don't hesitate to create a thread in #expensify-open-source to align faster in real time. Thanks!

melvin-bot · 2024-04-08T18:21:45Z

@strepanier03 10 days overdue. Is anyone even seeing these? Hello?

melvin-bot · 2024-04-10T18:03:18Z

@strepanier03 12 days overdue now... This issue's end is nigh!

melvin-bot · 2024-04-12T21:40:40Z

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

melvin-bot · 2024-04-12T21:40:44Z

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

nkdengineer · 2024-04-13T10:31:07Z

Proposal

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

The user name disappears and avatar changes to placeholder avatar.

What is the root cause of that problem?

The problem here happens because when we add a new workspace member, if that member doesn't exist in personal details list yet, we'll create optimistic personal details for them and then clearing the personal details after the request is done, see here.

This leads to the user seeing user name and avatar disappearing because the optimistic personal details is gone now.

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

We had this same problem with the optimistic report: we create a new optimistic report with a user, but the report with that user already exists, so what we did is we'll navigate to the new report when the API request is successful.

Here's exactly how we implement it, we should do the same for the optimistic personal detail in this case

Do not clear the personal details of the existing users when the API request is successful
Modify the back-end to merge preexistingAccountID into the personalDetailsList item of the current optimistic personal detail created in front end. For example, if the optimisticAccountID created in front-end is 123456, and the actual accountID of the existing user is 654321, then the backend will return this Onyx data:

{
  "key": "personalDetailsList",
  "onyxMethod": "merge",
  "value": {
    "123456": {
      "preexistingAccountID": 654321
  }
}

Now, in the front-end, when we detect that there's the preexistingAccountID being merged into personalDetailsList, we'll do the following (same as here for report):
- Check if the user is on the workspace member URL with optimistic account ID, if yes, navigate the user to the workspace member URL with the preexistingAccountID
- Clear the optimistic personal details

This is the same approach as we did with the optimistic report, just that we do for optimistic personal details now. This will make sure the user has a seamless experience when using the product.

What alternative solutions did you explore? (Optional)

NA

strepanier03 · 2024-04-15T23:32:07Z

@ikevin127 - Friendly bump on the proposal here, thanks!

bernhardoj · 2024-07-02T14:46:07Z

PR is ready

cc: @ikevin127

melvin-bot · 2024-07-10T10:59:03Z

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

melvin-bot · 2024-07-10T10:59:08Z

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

Disable newly added workspace member row if the personal detail is optimistic #44734

If no regressions arise, payment will be issued on 2024-07-17. 🎊

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

@bernhardoj requires payment automatic offer (Contributor)
@ikevin127 requires payment automatic offer (Reviewer)

melvin-bot · 2024-07-10T10:59:09Z

BugZero Checklist: The PR fixing this issue has been merged! The following checklist (instructions) will need to be completed before the issue can be closed:

[@ikevin127] The PR that introduced the bug has been identified. Link to the PR:
[@ikevin127] The offending PR has been commented on, pointing out the bug it caused and why, so the author and reviewers can learn from the mistake. Link to comment:
[@ikevin127] A discussion in #expensify-bugs has been started about whether any other steps should be taken (e.g. updating the PR review checklist) in order to catch this type of bug sooner. Link to discussion:
[@ikevin127] Determine if we should create a regression test for this bug.
[@ikevin127] If we decide to create a regression test for the bug, please propose the regression test steps to ensure the same bug will not reach production again.
[@strepanier03] Link the GH issue for creating/updating the regression test once above steps have been agreed upon:

bernhardoj · 2024-07-10T12:39:11Z

I'll request in ND once payment is due.

ikevin127 · 2024-07-12T20:41:36Z

[@ikevin127] The PR that introduced the bug has been identified. Link to the PR: refactor: SelectionList multiple selection #22622
[@ikevin127] The offending PR has been commented on, pointing out the bug it caused and why, so the author and reviewers can learn from the mistake. Link to comment: https://github.com/Expensify/App/pull/22622/files#r1676435226
[@ikevin127] A discussion in #expensify-bugs has been started about whether any other steps should be taken (e.g. updating the PR review checklist) in order to catch this type of bug sooner. Link to discussion: N/A.
[@ikevin127] Determine if we should create a regression test for this bug.
[@ikevin127] If we decide to create a regression test for the bug, please propose the regression test steps to ensure the same bug will not reach production again.

Regression Test Proposal

Precondition: User is admin of a Collect workspace.

Go to Profile > Workspaces > Collect workspace.
Go to Members.
Invite a new member that does not have an Expensify account, using an email address.
Immediately after inviting the member, verify that the newly added member row is disabled until the BE returns the created user information. While this happens, the default avatar should be shown.

Do we agree 👍 or 👎.

nkdengineer · 2024-07-13T11:23:33Z

We can discuss the compensation for @nkdengineer once the issue is fixed.

@techievivek Could you help with the discussion here, thanks 🙇

melvin-bot · 2024-07-15T20:20:41Z

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

Disable newly added workspace member row if the personal detail is optimistic #44734

If no regressions arise, payment will be issued on 2024-07-22. 🎊

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

@bernhardoj requires payment automatic offer (Contributor)
@ikevin127 requires payment automatic offer (Reviewer)

melvin-bot · 2024-07-15T20:20:43Z

BugZero Checklist: The PR fixing this issue has been merged! The following checklist (instructions) will need to be completed before the issue can be closed:

[@ikevin127] The PR that introduced the bug has been identified. Link to the PR:
[@ikevin127] The offending PR has been commented on, pointing out the bug it caused and why, so the author and reviewers can learn from the mistake. Link to comment:
[@ikevin127] A discussion in #expensify-bugs has been started about whether any other steps should be taken (e.g. updating the PR review checklist) in order to catch this type of bug sooner. Link to discussion:
[@ikevin127] Determine if we should create a regression test for this bug.
[@ikevin127] If we decide to create a regression test for the bug, please propose the regression test steps to ensure the same bug will not reach production again.
[@strepanier03] Link the GH issue for creating/updating the regression test once above steps have been agreed upon:

ikevin127 · 2024-07-15T21:03:39Z

@strepanier03 This was deployed to production 5 days ago (reference) meaning payment is due on 17th of July.
BZ checklist already completed in #38925 (comment).

bernhardoj · 2024-07-17T03:06:19Z

As @ikevin127 mentioned, the payment is due on the 17, so I've requested it in ND.

strepanier03 · 2024-07-17T23:00:21Z

@bernhardoj - I closed the contract in Upwork without payment since you're requesting in Newdot now.

@ikevin127 - I've paid your contract and closed it as well.

@nkdengineer and @techievivek - What payment should I authorize here? The full $250?

strepanier03 · 2024-07-17T23:01:17Z

Payment summary

$250 - @bernhardoj via Manual Requests in Newdot (requested)
$250 - @ikevin127 via Upwork (paid)
$250 - @nkdengineer via Upwork (paid)

@JmillsExpensify - Request incoming.

JmillsExpensify · 2024-07-19T02:22:04Z

$250 approved for @bernhardoj

izarutskaya added Daily KSv2 Bug Something is broken. Auto assigns a BugZero manager. labels Mar 25, 2024

melvin-bot bot assigned strepanier03 Mar 25, 2024

strepanier03 added this to [#whatsnext] #wave-collect Mar 27, 2024

strepanier03 changed the title ~~Workspace - User name and avatar disappears when opening profile immediately after invite~~ [Collect] Workspace - User name and avatar disappears when opening profile immediately after invite Mar 27, 2024

melvin-bot bot added the Overdue label Apr 1, 2024

trjExpensify moved this to Polish in [#whatsnext] #wave-collect Apr 4, 2024

strepanier03 added the External Added to denote the issue can be worked on by a contributor label Apr 12, 2024

melvin-bot bot changed the title ~~[Collect] Workspace - User name and avatar disappears when opening profile immediately after invite~~ [$250] [Collect] Workspace - User name and avatar disappears when opening profile immediately after invite Apr 12, 2024

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

melvin-bot bot assigned ikevin127 Apr 12, 2024

melvin-bot bot removed the Overdue label Apr 12, 2024

melvin-bot bot added the Overdue label Apr 15, 2024

melvin-bot bot removed the Overdue label Apr 15, 2024

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

melvin-bot bot changed the title ~~[$250] [Collect] Workspace - User name and avatar disappears when opening profile immediately after invite~~ [HOLD for payment 2024-07-17] [$250] [Collect] Workspace - User name and avatar disappears when opening profile immediately after invite Jul 10, 2024

melvin-bot bot removed the Reviewing Has a PR in review label Jul 10, 2024

ikevin127 mentioned this issue Jul 12, 2024

refactor: SelectionList multiple selection #22622

Merged

62 tasks

melvin-bot bot added Weekly KSv2 and removed Weekly KSv2 labels Jul 15, 2024

melvin-bot bot added Daily KSv2 and removed Weekly KSv2 labels Jul 16, 2024

strepanier03 assigned JmillsExpensify Jul 17, 2024

strepanier03 closed this as completed Jul 19, 2024

github-project-automation bot moved this from Polish to Done in [#whatsnext] #wave-collect Jul 19, 2024

hoangzinh mentioned this issue Nov 28, 2024

fix enable user checkbox on workspace members page #52173

Merged

49 tasks

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

[PAID] [$250] [Collect] Workspace - User name and avatar disappears when opening profile immediately after invite #38925

[PAID] [$250] [Collect] Workspace - User name and avatar disappears when opening profile immediately after invite #38925

izarutskaya commented Mar 25, 2024 •

edited by melvin-bot bot

Loading

melvin-bot bot commented Mar 25, 2024

izarutskaya commented Mar 25, 2024

bernhardoj commented Mar 25, 2024 •

edited

Loading

bernhardoj commented Mar 25, 2024

strepanier03 commented Mar 26, 2024

bernhardoj commented Mar 27, 2024

strepanier03 commented Mar 27, 2024 •

edited

Loading

strepanier03 commented Mar 27, 2024

strepanier03 commented Mar 27, 2024

melvin-bot bot commented Apr 8, 2024

melvin-bot bot commented Apr 8, 2024

melvin-bot bot commented Apr 10, 2024

melvin-bot bot commented Apr 12, 2024

melvin-bot bot commented Apr 12, 2024

nkdengineer commented Apr 13, 2024

strepanier03 commented Apr 15, 2024

bernhardoj commented Jul 2, 2024

melvin-bot bot commented Jul 10, 2024

melvin-bot bot commented Jul 10, 2024

melvin-bot bot commented Jul 10, 2024

bernhardoj commented Jul 10, 2024

ikevin127 commented Jul 12, 2024

nkdengineer commented Jul 13, 2024

melvin-bot bot commented Jul 15, 2024

melvin-bot bot commented Jul 15, 2024

ikevin127 commented Jul 15, 2024 •

edited

Loading

bernhardoj commented Jul 17, 2024

strepanier03 commented Jul 17, 2024

strepanier03 commented Jul 17, 2024 •

edited

Loading

JmillsExpensify commented Jul 19, 2024

[PAID] [$250] [Collect] Workspace - User name and avatar disappears when opening profile immediately after invite #38925

[PAID] [$250] [Collect] Workspace - User name and avatar disappears when opening profile immediately after invite #38925

Comments

izarutskaya commented Mar 25, 2024 • edited by melvin-bot bot Loading

Action Performed:

Expected Result:

Actual Result:

Workaround:

Platforms:

Screenshots/Videos

melvin-bot bot commented Mar 25, 2024

izarutskaya commented Mar 25, 2024

bernhardoj commented Mar 25, 2024 • edited 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?

What alternative solutions did you explore? (Optional)

bernhardoj commented Mar 25, 2024

strepanier03 commented Mar 26, 2024

bernhardoj commented Mar 27, 2024

strepanier03 commented Mar 27, 2024 • edited Loading

strepanier03 commented Mar 27, 2024

strepanier03 commented Mar 27, 2024

melvin-bot bot commented Apr 8, 2024

melvin-bot bot commented Apr 8, 2024

melvin-bot bot commented Apr 10, 2024

melvin-bot bot commented Apr 12, 2024

melvin-bot bot commented Apr 12, 2024

nkdengineer commented Apr 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)

strepanier03 commented Apr 15, 2024

bernhardoj commented Jul 2, 2024

melvin-bot bot commented Jul 10, 2024

melvin-bot bot commented Jul 10, 2024

melvin-bot bot commented Jul 10, 2024

bernhardoj commented Jul 10, 2024

ikevin127 commented Jul 12, 2024

Regression Test Proposal

nkdengineer commented Jul 13, 2024

melvin-bot bot commented Jul 15, 2024

melvin-bot bot commented Jul 15, 2024

ikevin127 commented Jul 15, 2024 • edited Loading

bernhardoj commented Jul 17, 2024

strepanier03 commented Jul 17, 2024

strepanier03 commented Jul 17, 2024 • edited Loading

Payment summary

JmillsExpensify commented Jul 19, 2024

izarutskaya commented Mar 25, 2024 •

edited by melvin-bot bot

Loading

bernhardoj commented Mar 25, 2024 •

edited

Loading

strepanier03 commented Mar 27, 2024 •

edited

Loading

ikevin127 commented Jul 15, 2024 •

edited

Loading

strepanier03 commented Jul 17, 2024 •

edited

Loading