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

@shawnborton

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?

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

@JmillsExpensify

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

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

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

@ntdiary

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

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:

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)

.

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

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

@ntdiary

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)

@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:
[@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:

@Tony-MK

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.

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

Log in with an account that has a workspace.
Click the FAB and select Request Money.
Click Manual tab and type any amount, then click Next button.
Select a workspace report.
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. :)

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

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

@ntdiary

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

Navigation Menu

Repository navigation

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

Action Performed:

Expected Result:

Actual Result:

Workaround:

Platforms:

Screenshots/Videos

Bug0 Triage Checklist (Main S/O)

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 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)

68 remaining items

Metadata

Assignees

Labels

Type

Projects

Milestone

Relationships

Development

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

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

Description

Action Performed:

Expected Result:

Actual Result:

Workaround:

Platforms:

Screenshots/Videos

Activity

melvin-bot commented on Jan 4, 2024

melvin-bot commented on Jan 4, 2024

melvin-bot commented on Jan 4, 2024

Bug0 Triage Checklist (Main S/O)

melvin-bot commented on Jan 4, 2024

abzokhattab commented on Jan 4, 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?

yh-0218 commented on Jan 4, 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)

aim-salam commented on Jan 4, 2024

Tony-MK commented on Jan 4, 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)

68 remaining items

melvin-bot commented on Feb 19, 2024

melvin-bot commented on Feb 19, 2024

melvin-bot commented on Feb 19, 2024

JmillsExpensify commented on Feb 26, 2024

melvin-bot commented on Feb 26, 2024

ntdiary commented on Feb 27, 2024

dangrous commented on Feb 27, 2024

ntdiary commented on Feb 28, 2024

JmillsExpensify commented on Mar 2, 2024

Metadata

Metadata

Assignees

Labels

Type

Projects

Milestone

Relationships

Development

Issue actions