[HOLD for payment 2024-02-26] [$500] Workspace name in Distance request flow is wrong color

[m-natarajan]

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: v1.4.22-0
Reproducible in staging?: yes
Reproducible in production?: yes
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: @shawnborton
Slack conversation: https://expensify.slack.com/archives/C049HHMV9SM/p1704218630440349

Action Performed:

Create a distance request, send it to a workspace

Expected Result:

The workspace name under the "To" label should use our standard text color.

Actual Result:

The workspace name under the "To" field uses our supporting text color

Workaround:

unknown

Platforms:

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

• Android: Native
• Android: mWeb Chrome
• iOS: Native
• iOS: mWeb Safari
• MacOS: Chrome / Safari
• MacOS: Desktop

Screenshots/Videos

Add any screenshot/video evidence

View all open jobs on GitHub

Upwork Automation - Do Not Edit

• Upwork Job URL: https://www.upwork.com/jobs/~015105603136672151
• Upwork Job ID: 1742979127739854848
• Last Price Increase: 2024-01-25
• Automatic offers:
• ntdiary | Reviewer | 28130781
• Tony-MK | Contributor | 28130782

[melvin-bot]

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

[melvin-bot]

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

[melvin-bot]

Bug0 Triage Checklist (Main S/O)

• This "bug" occurs on a supported platform (ensure Platforms in OP are ✅)
• This bug is not a duplicate report (check E/App issues and #expensify-bugs)
  • If it is, comment with a link to the original report, close the issue and add any novel details to the original issue instead
• This bug is reproducible using the reproduction steps in the OP. S/O
  • If the reproduction steps are clear and you're unable to reproduce the bug, check with the reporter and QA first, then close the issue.
  • If the reproduction steps aren't clear and you determine the correct steps, please update the OP.
• This issue is filled out as thoroughly and clearly as possible
  • Pay special attention to the title, results, platforms where the bug occurs, and if the bug happens on staging/production.
• I have reviewed and subscribed to the linked Slack conversation to ensure Slack/Github stay in sync

[melvin-bot]

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

[abzokhattab]

Proposal

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

the workspace item under To in the confirmation list is disabled

What is the root cause of that problem?

in the confimration list, the to participants items are listed as disabled if the target participant is isOptimisticPersonalDetail (a new user)

App/src/components/MoneyTemporaryForRefactorRequestConfirmationList.js

Lines 439 to 442 in 5b0ceb2

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

and here the isOptimisticPersonalDetail is true when the accountID of the report is 0 so in this case the report of the workspace has a 0 accountID:

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

we need to add a check that the report is not a workspace

or in case of the worksapce we can pass the ownerAccountID instead of the accountID:

     const formattedSelectedParticipants = _.map(selectedParticipants, (participant) => {
                const accountID = ReportUtils.isPolicyExpenseChat(participant) ? participant?.ownerAccountID : participant?.accountID;
                // or
                //const accountID = participant?.accountID === 0 ? participant?.ownerAccountID : participant?.accountID;
                return {...participant, isDisabled: ReportUtils.isOptimisticPersonalDetail(accountID)};
            });

this needs to be updated also here , here and here

POC:

[yh-0218]

Proposal

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

Workspace name in Distance request flow is wrong color

What is the root cause of that problem?

Because that workspace is disabled here
So Workspace name in Distance request flow is wrong color

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

Option1: We can make isDisabled as false for workspace.

isDisabled: participant.accountID? ReportUtils.isOptimisticPersonalDetail(participant.accountID) : false

Option2: we can keep isDisabled as true for workspace and only change disable color of workspace as default text color

What alternative solutions did you explore? (Optional)

[aim-salam]

.

[Tony-MK]

Proposal

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

The workspace name in the Distance request flow is the wrong color

What is the root cause of that problem?

The following condition is true because the participant.accountID is zero.

App/src/components/MoneyTemporaryForRefactorRequestConfirmationList.js

Line 441 in 5b0ceb2

isDisabled: ReportUtils.isOptimisticPersonalDetail(participant.accountID),

Therefore, the OptionRow component applies the isDisbaled style to the displayNameStyle. Hence, any workspace will look different from the rest of the items on the menu.

App/src/components/OptionRow.tsx

Line 131 in 5b0ceb2

isDisabled ? styles.optionRowDisabled : {},

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

Just like how IOURequestStepConfirmation uses the value of participant.isPolicyExpenseChat to get the policyExpenseChat, we should replicate it in MoneyTemporaryForRefactorRequestConfirmationList for consistency.

App/src/pages/iou/request/step/IOURequestStepConfirmation.js

Line 138 in 5b0ceb2

const policyExpenseChat = _.find(participants, (participant) => participant.isPolicyExpenseChat);

Firstly, we can change the line, which brought the issue, to something similar to the code below.

isDisabled: !participant.isPolicyExpenseChat && ReportUtils.isOptimisticPersonalDetail(participant.accountID)

Secondly, to navigate back to the request page, we will have to set activeRoute as the backTo param.

Therefore, we will change the navigateToReportOrUserDetail function to this.

const activeRoute = Navigation.getActiveRouteWithoutParams();
        
if (option.accountID) {
    Navigation.navigate(ROUTES.PROFILE.getRoute(option.accountID, activeRoute));
} else if (option.reportID) {
    Navigation.navigate(ROUTES.REPORT_WITH_ID_DETAILS.getRoute(option.reportID, activeRoute));
}

Futhermore, introduce the backTo argument in the getRoute function for ROUTES.REPORT_WITH_ID_DETAILS.

getRoute: (reportID: string, backTo?: string) => getUrlWithBackToParam(`r/${reportID}`, backTo),

Finally, we need to ensure the shouldNavigateToTopMostReport prop does not cause any regressions when it is set to false.

Edit the props of the HeaderWithBackButton component like this.
Also, introduce backTo param in props.route.params.

shouldNavigateToTopMostReport={Boolean(props.route.params.backTo)}
onBackButtonPress={() => {
    Navigation.goBack(props.route.params.backTo, Boolean(props.route.params.backTo));
    Navigation.navigate(ROUTES.REPORT_WITH_ID.getRoute(props.report.reportID));
}}

What alternative solutions did you explore? (Optional)

We could also use the prop isPolicyExpenseChat, instead of using !participant.isPolicyExpenseChat. It is already passed to the MoneyTemporaryForRefactorRequestConfirmationList component by IOURequestStepConfirmation

Result

[Krishna2323]

Proposal

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

the workspace item under To in the confirmation list is disabled

What is the root cause of that problem?

Because of the check below we set isDisabled to false, the function only works with the personal account of the user but not with workspaces, for workspaces it will always return true.

App/src/components/MoneyTemporaryForRefactorRequestConfirmationList.js

Line 441 in d4c3e63

isDisabled: ReportUtils.isOptimisticPersonalDetail(participant.accountID),

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

We should fix isOptimisticPersonalDetail because it should return false when report is not a personal account. We can modify isOptimisticPersonalDetail function to return false if accountID is a falsy value. This way isOptimisticPersonalDetail will work in every case. if we don't want to use !accountID we can use isPolicyExpenseChat instead. If we want to use isPolicyExpenseChat then we need to also pass reportId to isOptimisticPersonalDetail and then get the report using getReport or by searching allReports and pass the report to isPolicyExpenseChat.

// Option 1: Return false if accountID is a falsy value.
function isOptimisticPersonalDetail(accountID: number): boolean {
    if (!accountID) {
        return false;
    }
    return isEmptyObject(allPersonalDetails?.[accountID]) || !!allPersonalDetails?.[accountID]?.isOptimisticPersonalDetail;
}


// Option 2: Return false if isPolicyExpenseChat is true.
function isOptimisticPersonalDetail(accountID: number, reportId: number): boolean {
    const report = allReports?.[`${ONYXKEYS.COLLECTION.REPORT}${reportId}`] ?? null;
    if (isPolicyExpenseChat(report)) {
        return false;
    }
    return isEmptyObject(allPersonalDetails?.[accountID]) || !!allPersonalDetails?.[accountID]?.isOptimisticPersonalDetail;
}

We already have functions related to personal account details where we return early if accountId is a falsy value.

App/src/libs/ReportUtils.ts

Lines 1475 to 1478 in 6fad557

	function getDisplayNameForParticipant(accountID?: number, shouldUseShortForm = false, shouldFallbackToHidden = true): string | undefined {
	if (!accountID) {
	return '';
	}

App/src/libs/ReportUtils.ts

Lines 1452 to 1455 in 6fad557

	function getPersonalDetailsForAccountID(accountID: number): Partial<PersonalDetails> {
	if (!accountID) {
	return {};
	}

Option 2

If we don't want to make workspace name appear disabled in any case then we can just remove the isDisabled property from both places.

Result

[shawnborton]

Yeah, something to consider is that I don't think we need to make the workspace name appear disabled.

[ntdiary]

Will review over the weekend.

[ntdiary]

All proposals have been reviewed.

So far, I lean towards @Tony-MK's proposal, using policyExpenseChat as a condition looks appropriate and clear.
Additionally, if we want to allow navigating from the confirm page to the workspace detail page, then we also need to support the ability to return to the confirmation page when clicking the back button in the detail page. :)

---

@abzokhattab's proposal does not explicitly state how to check if the report is not a workspace.

The condition in @yh-0218's proposal is not as easy to understand as policyExpenseChat.

As for @Krishna2323's proposal, I feel it's unnecessary to modify the logic of ReportUtils.isOptimisticPersonalDetail, because it's also used in other components, which may introduce duplicate checks.

[abzokhattab]

Hi @ntdiary

@abzokhattab's #33976 (comment) does not explicitly state how to check if the report is not a workspace.

I am already mentioned in the code snippet to use ReportUtils.isPolicyExpenseChat(participant)

                const accountID = ReportUtils.isPolicyExpenseChat(participant) ? participant?.ownerAccountID : participant?.accountID;

this will give the accountID of the ownerAccountIDto the isOptimisticPersonalDetail as input in case the report is a workspace .. this way if the ownerAccountID is not 0 then it means it's not an optimisticPersonalDetail and wont be disabled .. this is just a safe guard so that whenever the ownerAccountID is zero it means that the workspace is anoptimisticPersonalDetail and thus can be disabled.

for your information here is the isPolicyExpenseChat function... it returns this condition:

App/src/libs/ReportUtils.ts

Lines 704 to 706 in 8aec07c

	function isPolicyExpenseChat(report: OnyxEntry<Report>): boolean {
	return getChatType(report) === CONST.REPORT.CHAT_TYPE.POLICY_EXPENSE_CHAT || (report?.isPolicyExpenseChat ?? false);
	}

last thing: please also keep mind that this needs to be updated in mutliple locations as i am mentioning in my proposal

[abzokhattab]

@ntdiary as for the navigation issue we should add an optional backTo param in the REPORT_WITH_ID_DETAILS route
similar to the profile route

then we add this new new backTo param to the navigateToReportOrUserDetail
like this:

Navigation.navigate(ROUTES.REPORT_WITH_ID_DETAILS.getRoute(option.reportID,activeRoute));

Thanks

[Krishna2323]

@ntdiary, the logic for isOptimisticPersonalDetail is currently wrong and IMO its the root cause because in code below allPersonalDetails?.[accountID] is undefined & !!allPersonalDetails?.[accountID]?.isOptimisticPersonalDetail is false. We get true due to isEmptyObject function because it uses a empty object when value passed to it is undefined. The function name itself suggests that isOptimisticPersonalDetail is for only personal account details check and it should return false when allPersonalDetails?.[accountID] is undefined.

Also I don't think it will cause any regression.

App/src/libs/ReportUtils.ts

Line 780 in 6fad557

return isEmptyObject(allPersonalDetails?.[accountID]) || !!allPersonalDetails?.[accountID]?.isOptimisticPersonalDetail;

[Tony-MK]

Thanks for reviewing my proposal and also for the feedback, @ntdiary.

I have retested and updated my proposal based on your comments from #33976 (comment).

It works like a charm. Thank you. 😄

[ntdiary]

Thanks for all the responses. So far, I still need to do some investigations to confirm there won't be any regressions when navigating back.

[melvin-bot]

📣 It's been a week! Do we have any satisfactory proposals yet? Do we need to adjust the bounty for this issue? 💸

[JmillsExpensify]

Proposals and on-going discussion still in progress.

[Tony-MK]

Hey, @ntdiary, the PR is now ready to review.
Please let me know if you have any questions.
Thank you.

[ntdiary]

Hey, @ntdiary, the PR is now ready to review. Please let me know if you have any questions. Thank you.

@Tony-MK, thank you for the reminder, I took a day off yesterday and will review the PR within 24 hours. :)

[dangrous]

How are we looking on this one @Tony-MK @ntdiary ? Looks like one outstanding question and a merge conflict now. Can we get this ready for final review / merge on Monday or Tuesday? Thanks!

[Tony-MK]

@dangrous, I believe we can finalize it before Tuesday. 👍

[melvin-bot]

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

[melvin-bot]

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

• Fix/33976: Workspace name in request flow is wrong color and navigating back #35594

If no regressions arise, payment will be issued on 2024-02-26. 🎊

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

• @ntdiary requires payment automatic offer (Reviewer)
• @Tony-MK requires payment automatic offer (Contributor)

[melvin-bot]

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:

• [@ntdiary] The PR that introduced the bug has been identified. Link to the PR:
• [@ntdiary] 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:
• [@ntdiary] 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:
• [@ntdiary] Determine if we should create a regression test for this bug.
• [@ntdiary] 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.
• [@JmillsExpensify] Link the GH issue for creating/updating the regression test once above steps have been agreed upon:

[JmillsExpensify]

Alright, so circling back on this one. Payment summary as follows:

• Contributor: @Tony-MK $500
• Contributor+: @ntdiary $500

I'm not seeing any issues with regressions, so @ntdiary please fill out the BZ checklist above and we can get this checklist closed out.

[melvin-bot]

⚠️ 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.

[ntdiary]

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:

• [@ntdiary] The PR that introduced the bug has been identified. Link to the PR: Disable go to profile page for optimistic user #23802
• [@ntdiary] 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/23802/files#r1504244419
• [@ntdiary] 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: No need
• [@ntdiary] Determine if we should create a regression test for this bug. Yes
• [@ntdiary] 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. As shown below
• [@JmillsExpensify] Link the GH issue for creating/updating the regression test once above steps have been agreed upon:

Regression test steps:

1. Log in with an account that has a workspace.
2. Click the FAB and select Request Money.
3. Click Manual tab and type any amount, then click Next button.
4. Select a workspace report.
5. Verify that the workspace name under the To fields is in our standard text color and clickable to open the details page.

---

BTW, I'm applying to switch to NewDot for payment, so it might be better to hold this temporarily if possible. :)

[dangrous]

Even though it's small I think it's pretty quick to check, it would just be adding a line confirming the color to whatever existing test creates the workflow. I think it's worth adding!

If you want to do a quick test, I'm sure QA can roll it in to what they already have and simplify

[ntdiary]

Even though it's small I think it's pretty quick to check, it would just be adding a line confirming the color to whatever existing test creates the workflow. I think it's worth adding!

Makes sense, have updated the testing steps. 😄

[JmillsExpensify]

@ntdiary Let's use the Slack thread to align on next steps, I just commented there. I'm going to close this issue for now, though I can re-open if you need to be paid via Upwork.