Expensify / App

Welcome to New Expensify: a complete re-imagination of financial collaboration, centered around chat. Help us build the next generation of Expensify by sharing feedback and contributing to the code.
https://new.expensify.com
MIT License
3.56k stars 2.9k forks source link

[HOLD for payment 2023-09-29] [$500] Workspace details don't show up in participants selector #27510

Closed thienlnam closed 1 year ago

thienlnam commented 1 year ago

Clean up for: https://github.com/Expensify/App/pull/25564

When you select a workspace in the new request money flow, the workspace details do not show up.

image

  1. Request money
  2. Select a workspace
  3. Notice that it doesn't contain the details
Upwork Automation - Do Not Edit
  • Upwork Job URL: https://www.upwork.com/jobs/~018607cb9d54e7235a
  • Upwork Job ID: 1702632412164861952
  • Last Price Increase: 2023-09-15
  • Automatic offers:
    • situchan | Reviewer | 26745052
    • bernhardoj | Contributor | 26745057
melvin-bot[bot] commented 1 year ago

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

melvin-bot[bot] commented 1 year ago

Bug0 Triage Checklist (Main S/O)

melvin-bot[bot] commented 1 year ago

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

melvin-bot[bot] commented 1 year ago

Current assignee @sophiepintoraetz is eligible for the External assigner, not assigning anyone new.

melvin-bot[bot] commented 1 year ago

Current assignee @situchan is eligible for the External assigner, not assigning anyone new.

studentofcoding commented 1 year ago

Clean up for: #25564

When you select a workspace in the new request money flow, the workspace details do not show up.

image

  1. Request money
  2. Select a workspace
  3. Notice that it doesn't contain the details

Upwork Automation - Do Not Edit

Hey @thienlnam, the Image is broken, can you re-attach again? thanks!

situchan commented 1 year ago
Screenshot 2023-09-15
BhuvaneshPatil commented 1 year ago

Proposal

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

What is the root cause of that problem?

Currently we use getParticipantsOptions to find the details for getting the sections items in MoneyRequestParticipantsSelector. In case of workspace, we have accountID = 0, and we don't find the record for that in personalDetails. and hence the fields are empty and thus we don't have details for them.

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

  1. For first problem
    • Create a new function that will specifically handle the workspaces as participant.
    • it will take two arguments, participants and chatReports
      function getParticipatingWorkspace(participants, chatReports) {
      const reportIDs = participants.filter((p) => p.accountID === 0).map((workspace) => workspace.reportID);
      const workspaces = chatReports.filter((report) => {
      return reportIDs.includes(report.reportID);
      });
      return workspaces;
      }

      It will filter the workspaces from recent chatReports and return the participating workspaces. we then concat this array for sections in MoneyRequestParticipantSelector, in the following section's data

https://github.com/Expensify/App/blob/144e932c2ea863bffafbd26e9cc7602e89b1e352/src/pages/iou/steps/MoneyRequstParticipantsPage/MoneyRequestParticipantsSelector.js#L106-L111

The code can be cleaned and handle the conditions better. result -

Screenshot 2023-09-15 at 5 06 03 PM
  1. For second problem While getting value for isSelected in BaseOptionsList, we are only taking accountID into consideration, but as workspaces have accountID as 0, all workspaces shown as selected.
    if (option.accountID && option.accountID === item.accountID) return true
    if (option.reportID && option.reportID === item.reportID) return true

and while selecting more than one participants, we are not adding the reportID to participant object, as we do while selecting the subsequent participant here -

https://github.com/Expensify/App/blob/76c1559fb3fbee1d07c8f210b522b63edd03920e/src/pages/iou/steps/MoneyRequstParticipantsPage/MoneyRequestParticipantsSelector.js#L169

We shall add reportID here as well

What alternative solutions did you explore? (Optional)

bernhardoj commented 1 year ago

Proposal

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

I see there are 2 issues.

  1. Selecting workspace as a split bill participant shows an empty detail
  2. Selecting one workspace will show other workspaces as selected

What is the root cause of that problem?

1. In the participant page, the participant detail is coming from OptionsListUtils.getParticipantsOptions https://github.com/Expensify/App/blob/76c1559fb3fbee1d07c8f210b522b63edd03920e/src/pages/iou/steps/MoneyRequstParticipantsPage/MoneyRequestParticipantsSelector.js#L106-L108 https://github.com/Expensify/App/blob/76c1559fb3fbee1d07c8f210b522b63edd03920e/src/libs/OptionsListUtils.js#L209-L218 It only works for a user as it gets the detail from personal details onyx based on accountID.

2. In BaseOptionsList, we have a logic to detect whether an item is selected or not by comparing the accountID. https://github.com/Expensify/App/blob/76c1559fb3fbee1d07c8f210b522b63edd03920e/src/components/OptionsList/BaseOptionsList.js#L174-L179

However, workspace accountID is 0, so the condition is always true as both value is 0.

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

Below solutions assume that we can split bill with more than 1 workspace

For the first problem, we should use OptionsListUtils.getPolicyExpenseReportOptions to get the details for workspace participants. We already do this on the confirmation page. https://github.com/Expensify/App/blob/76c1559fb3fbee1d07c8f210b522b63edd03920e/src/pages/iou/steps/MoneyRequestConfirmPage.js#L67-L73

But because we can now select a user along with a workspace as participants, we need to adjust the above code a little bit. We will map each participant to use either getPolicyExpenseReportOptions or getParticipantsOptions (on both participant and confirmation page).

participants.map(participant => {
    const isPolicyExpenseChat = lodashGet(participant, 'isPolicyExpenseChat', false);
    return isPolicyExpenseChat ? OptionsListUtils.getPolicyExpenseReportOptions(participant) : OptionsListUtils.getParticipantsOptions(participant, personalDetails)
})

This also means we need to update both getPolicyExpenseReportOptions and getParticipantsOptions to return an object instead of an array.

However, this still won't work because we need isPolicyExpenseChat and reportID for workspace participants. When we select a participant for split, it will only have these properties. https://github.com/Expensify/App/blob/76c1559fb3fbee1d07c8f210b522b63edd03920e/src/pages/iou/steps/MoneyRequstParticipantsPage/MoneyRequestParticipantsSelector.js#L169

We need to include both isPolicyExpenseChat and reportID into it as we do in addSingleParticipant. https://github.com/Expensify/App/blob/76c1559fb3fbee1d07c8f210b522b63edd03920e/src/pages/iou/steps/MoneyRequstParticipantsPage/MoneyRequestParticipantsSelector.js#L151-L152

For the second problem, currently, the option item selected logic only considers the accountID of the participant, but the workspace doesn't have that and we need to rely on reportID for the workspace.

https://github.com/Expensify/App/blob/76c1559fb3fbee1d07c8f210b522b63edd03920e/src/components/OptionsList/BaseOptionsList.js#L176-L180

So, we need to make sure accountID exists before comparing and also need to compare for a reportID.

if (option.accountID && option.accountID === item.accountID) return true
if (option.reportID && option.reportID === item.reportID) return true

Last, after fixing it all, I realize we still have another selection issue. Selecting a second workspace participant will deselect all workspaces and the root cause is the same as above and needs the same solution as above. https://github.com/Expensify/App/blob/76c1559fb3fbee1d07c8f210b522b63edd03920e/src/pages/iou/steps/MoneyRequstParticipantsPage/MoneyRequestParticipantsSelector.js#L162-L167

~note: the solution will crash if we select a user participant along with workspace, but we have an issue to not allow that~ nvm, I just reread the discussion and understand the expected behavior and updated my proposal

thienlnam commented 1 year ago

@situchan Mind reviewing these proposals today? This is a bit of a critical issue with the new global create

situchan commented 1 year ago

Sure!

situchan commented 1 year ago

@BhuvaneshPatil @bernhardoj thanks for the proposals. While @BhuvaneshPatil first identified both issues with the root cause, @bernhardoj provided more detailed solution with regression fixes. Also I checked edited timeline and @bernhardoj first proposed complete solution. So I'd like to go with @bernhardoj's proposal. 🎀 👀 🎀 C+ reviewed

melvin-bot[bot] commented 1 year ago

Current assignee @thienlnam is eligible for the choreEngineerContributorManagement assigner, not assigning anyone new.

strepanier03 commented 1 year ago

@bernhardoj @situchan - Would the fix here resolve this report as well?

@kbecciv for visibility.

situchan commented 1 year ago

@strepanier03 yes, should be fixed here

cc: @bernhardoj

melvin-bot[bot] commented 1 year ago

⚠️ Looks like this issue was linked to a Deploy Blocker here

If you are the assigned CME please investigate whether the linked PR caused a regression and leave a comment with the results.

If a regression has occurred and you are the assigned CM follow the instructions here.

If this regression could have been avoided please consider also proposing a recommendation to the PR checklist so that we can avoid it in the future.

chiragsalian commented 1 year ago

Once the PR is done i think we should CP it so that it addresses the blocker.

bernhardoj commented 1 year ago

@strepanier03 yes, it would resolve the empty user after going back.

melvin-bot[bot] commented 1 year ago

📣 @situchan 🎉 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

melvin-bot[bot] commented 1 year ago

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

bernhardoj commented 1 year ago

@situchan I can't finish the recording because of the freezing issue https://github.com/Expensify/App/issues/27713. It is a different issue from what we have here. I remember that it works fine when working on the proposal and I found that this PR is the one that causes the freeze.

I think we should fix that first before continuing

situchan commented 1 year ago

@bernhardoj if that is the offending PR, please continue test after reverting it locally.

bernhardoj commented 1 year ago

PR is ready

melvin-bot[bot] commented 1 year ago

🎯 ⚡️ Woah @situchan / @bernhardoj, great job pushing this forwards! ⚡️

The pull request got merged within 3 working days of assignment, so this job is eligible for a 50% #urgency bonus 🎉

On to the next one 🚀

melvin-bot[bot] commented 1 year ago

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

melvin-bot[bot] commented 1 year ago

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

If no regressions arise, payment will be issued on 2023-09-29. :confetti_ball:

After the hold period is over and BZ checklist items are completed, please complete any of the applicable payments for this issue, and check them off once done.

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

As a reminder, here are the bonuses/penalties that should be applied for any External issue:

melvin-bot[bot] commented 1 year ago

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:

sophiepintoraetz commented 1 year ago

Payouts due:

Issue Reporter: N/A Contributor: $750 @bernhardoj Contributor+: $750 @situchan (once you have completed the BZ checklist, I'll release payment!)

Eligible for 50% #urgency bonus? Y

situchan commented 1 year ago

No regression. This was clean-up of https://github.com/Expensify/App/pull/25564 in Simplify Global Create project. I think regression test will be part of https://github.com/Expensify/Expensify/issues/318720

sophiepintoraetz commented 1 year ago

Ah good point - @thienlnam - can you confirm there is a regression test included for this bug in https://github.com/Expensify/Expensify/issues/318720?