Category rules - Approver field in category editor shows user email instead of user name

IuliiaHerets commented 2 days ago

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.35-0 Reproducible in staging?: Y Reproducible in production?: Y Email or phone of affected tester (no customers): applausetester+kh010901@applause.expensifail.com Issue reported by: Applause Internal Team

Action Performed:

Precondition:

Rules is enabled.
User has custom name.

Go to staging.new.expensify.com
Go to workspace settings > Workflows.
Click on the existing approval workflow under Add approvals.
Note that Approver field shows user name.
Go to workspace settings > Categories.
Click on any category.
Click Approver.
Select a user with custom name.

Expected Result:

Approver field in category editor will show user name.

Actual Result:

Approver field in category editor shows user email instead of user name.

Workaround:

Unknown

Platforms:

[x] Android: Native
[x] Android: mWeb Chrome
[x] iOS: Native
[x] iOS: mWeb Safari
[x] MacOS: Chrome / Safari
[x] MacOS: Desktop

Screenshots/Videos

https://github.com/user-attachments/assets/8b3b3166-0e59-42e9-a2e9-427353d7b9f6

View all open jobs on GitHub

melvin-bot[bot] commented 2 days ago

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

IuliiaHerets commented 2 days ago

@anmurali FYI I haven't added the External label as I wasn't 100% sure about this issue. Please take a look and add the label if you agree it's a bug and can be handled by external contributors

nyomanjyotisa commented 2 days ago

Proposal

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

Approver field in category editor shows user email instead of user name

What is the root cause of that problem?

https://github.com/Expensify/App/blob/d860f2d0ffb31c478d9400bab1df18022a14a0b5/src/libs/CategoryUtils.ts#L47-L49 We display the approver field here which is the approver email

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

Update getCategoryApprover to get the approver display name using the email, and return the display name

function getCategoryApprover(approvalRules: ApprovalRule[], categoryName: string) {
    const approverEmail = approvalRules?.find((rule) => rule.applyWhen.some((when) => when.value === categoryName))?.approver;

    if(!approverEmail){
        return;
    }

    const approver = PersonalDetailsUtils.getPersonalDetailByEmail(approverEmail);

    return approver?.displayName ?? approverEmail;
}

What alternative solutions did you explore? (Optional)

cretadn22 commented 2 days ago

Proposal

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

Approver field in category editor shows user email instead of user name

What is the root cause of that problem?

We show the approver field here which is email of approver

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

We should avoid updating the getCategoryApprover function, as changes could impact other places

https://github.com/Expensify/App/blob/d860f2d0ffb31c478d9400bab1df18022a14a0b5/src/pages/workspace/categories/CategorySettingsPage.tsx#L85-L88

We should retrieve the display name from PersonalDetails and show that instead of displaying the email address directly.

    const approverText = useMemo(() => {
        const categoryApprover = CategoryUtils.getCategoryApprover(policy?.rules?.approvalRules ?? [], categoryName);
        const approver = PersonalDetailsUtils.getPersonalDetailByEmail(categoryApprover ?? '');
        return approver.displayName ?? categoryApprover ?? '';
    }, [categoryName, policy?.rules?.approvalRules]);

What alternative solutions did you explore? (Optional)

nkdengineer commented 1 day ago

Proposal

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

Approver field in category editor shows user email instead of user name.

What is the root cause of that problem?

categoryApprover here is the email of approver

https://github.com/Expensify/App/blob/14b99ca0a12e9686818bc3e937f091199de69750/src/pages/workspace/categories/CategorySettingsPage.tsx#L86

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

We should get the personal details of the approver based on the email then use getDisplayNameOrDefault function to get the display name of the approver

const approverText = useMemo(() => {
    const categoryApprover = CategoryUtils.getCategoryApprover(policy?.rules?.approvalRules ?? [], categoryName);
    if (!categoryApprover) {
        return '';
    }
    const personalDetails = getPersonalDetailByEmail(categoryApprover);
    return getDisplayNameOrDefault(personalDetails) ?? '';
}, [categoryName, policy?.rules?.approvalRules]);

https://github.com/Expensify/App/blob/14b99ca0a12e9686818bc3e937f091199de69750/src/pages/workspace/categories/CategorySettingsPage.tsx#L86

getDisplayNameOrDefault function will cover all cases of the user like remove SMS domain of phone number user, ....

What alternative solutions did you explore? (Optional)

We can create a new util like getCategoryApproverDisplayName and use getCategoryApprover function and the logic above to return the display name of the approver

Expensify / App