[HOLD for payment 2024-12-07] [$250] Tag rules - Approver field in tag editor shows user email instead of user name

[IuliiaHerets]

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

Action Performed:

1. Go to staging.new.expensify.com
2. Go to workspace settings > Workflows.
3. Click on the existing approval workflow under Add approvals.
4. Note that Approver field shows user name.
5. Go to workspace settings > Tags.
6. Click on any tag.
7. Click Approver.
8. Select a user with custom name.

Expected Result:

Approver field in tag editor will show user name.

Actual Result:

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

In Category editor, Approver field shows user name.

Workaround:

Unknown

Platforms:

• Android: Standalone
• Android: HybridApp
• Android: mWeb Chrome
• iOS: Standalone
• iOS: HybridApp
• iOS: mWeb Safari
• MacOS: Chrome / Safari
• MacOS: Desktop

Screenshots/Videos

bandicam.2024-11-16.22-36-42-497.mp4

View all open jobs on GitHub

Upwork Automation - Do Not Edit

• Upwork Job URL: https://www.upwork.com/jobs/~021858313853614949592
• Upwork Job ID: 1858313853614949592
• Last Price Increase: 2024-11-18
• Automatic offers:
• etCoderDysto | Contributor | 104985198

Issue Owner

Current Issue Owner: @kadiealexander

[melvin-bot]

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

[etCoderDysto]

Proposal

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

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

What is the root cause of that problem?

We are getting the approvers email address here

App/src/pages/workspace/tags/TagSettingsPage.tsx

Line 107 in 9774032

const tagApprover = PolicyUtils.getTagApproverRule(policyID, route.params.tagName)?.approver;

And we are displying the email address

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

We should get user's display name using PersonalDetailsUtils.getPersonalDetailByEmail(tagApprover)?.displayName;
And display the user display name when it is available and fallback to displaying the user email when display name is not available

Code implementation

    const tagApprover = PolicyUtils.getTagApproverRule(policyID, route.params.tagName)?.approver ?? '';
    const approver = PersonalDetailsUtils.getPersonalDetailByEmail(tagApprover)?.displayName;

Note: we can use useMemo to optimize recalculating displayName as we do on categories page

What alternative solutions did you explore? (Optional)

[mkzie2]

Edited by proposal-police: This proposal was edited at 2024-11-18 04:57:50 UTC.

Proposal

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

Tag rules - Approver field in tag editor shows user email instead of user name

What is the root cause of that problem?

We display this display name --> email in CategorySettingsPage

App/src/pages/workspace/categories/CategorySettingsPage.tsx

Lines 79 to 83 in 9774032

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

But we only display the text returns from getTagApproverRule function which is the user email

App/src/pages/workspace/tags/TagSettingsPage.tsx

Line 107 in 9774032

const tagApprover = PolicyUtils.getTagApproverRule(policyID, route.params.tagName)?.approver;

App/src/pages/workspace/tags/TagSettingsPage.tsx

Line 183 in 9774032

title={tagApprover ?? ''}

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

In TagSettingsPage, we should do the same way here to display the tag approver display name first.

I notice that we need to use || because approverDetails?.displayName can be an empty string if the user doesn't have a custom display name. And we need to fix the same in CategorySettingsPage

const tagApprover = useMemo(() => {
    const tagApproverEmail = PolicyUtils.getTagApproverRule(policyID, route.params.tagName)?.approver ?? '';
    const approverDetails = getPersonalDetailByEmail(tagApproverEmail);
    return approverDetails?.displayName || tagApproverEmail;
}, [policyID, route.params.tagName]);

App/src/pages/workspace/tags/TagSettingsPage.tsx

Line 107 in 9774032

const tagApprover = PolicyUtils.getTagApproverRule(policyID, route.params.tagName)?.approver;

App/src/pages/workspace/tags/TagSettingsPage.tsx

Line 183 in 9774032

title={tagApprover ?? ''}

What alternative solutions did you explore? (Optional)

Reminder: Please use plain English, be brief and avoid jargon. Feel free to use images, charts or pseudo-code if necessary. Do not post large multi-line diffs or write walls of text. Do not create PRs unless you have been hired for this job.

[etCoderDysto]

Proposal updated:

Added code implementation details

[melvin-bot]

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

[melvin-bot]

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

[mkzie2]

Updated proposal.

• Add an edge case.

[eh2077]

Thank you for your speedy proposals!

This issue is straightforward and @etCoderDysto 's proposal was first, so let's go with their proposal!

🎀👀🎀 C+ reviewed