[Pay when ntdiary is setup for NewDot payments][$500] Multilevel tag - Tag name in RHP is not the same as the tag being clicked on

[kbecciv]

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: 1.4.47-2
Reproducible in staging?: Y
Reproducible in production?: Y
Issue reported by: Applause - Internal Team

Action Performed:

Precondition:

• User is an employee of Collect workspace.
• The Collect workspace has dependant multilevel tag set up. (details here for how to setup)
• The multilevel tag is as follow:
  First level: State
  Second level: Region

1. Go to workspace chat.
2. Create a manual request with first and second level of tag.
3. Go to request details page.
4. Click the first level tag (State).
5. Click the second level tag (Region).

Multi Level tag
Dependent - Multi Level tags NEW.csv

Expected Result:

When the respective level tag is opened, the RHP will show the correct tag name (Step 4 and 5).

Actual Result:

In Step 4, when opening RHP for first level tag (State), the tag name is the second level tag (Region).
In Step 5, when opening RHP for second level tag (Region), the tag name is the second level tag (State).

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

Bug6403264_1709667194180.20240305_200515.mp4

View all open jobs on GitHub

Upwork Automation - Do Not Edit

• Upwork Job URL: https://www.upwork.com/jobs/~01fff45536696176bf
• Upwork Job ID: 1765168266617380864
• Last Price Increase: 2024-03-10
• Automatic offers:
• ntdiary | Reviewer | 0
• tienifr | Contributor | 0

[melvin-bot]

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

[kbecciv]

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

[kbecciv]

We think that this bug might be related to #wave6-collect-submitters
CC @greg-schroeder

[gijoe0295]

Proposal

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

Multilevel tag - Tag name in RHP is not the same as the tag being clicked on

What is the root cause of that problem?

In MoneyRequestView, we sort the policy tags object by orderWeight here and here, then use the indexes of that ordered array as tagIndex to identify different tags.

Later in IOURequestStepTag, we used getTagListName to retrieved the tag name based on tagIndex. The problem is getTagListName used policyTags, which is an unordered object taken straight from Onyx.

In short, we first process the policy tags object from Onyx to an array sorted based on orderWeight but later when we retrieve the tag name, we used the plain tags object from Onyx, that causes the order of tags to be messed up.

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

We should modify the getTagListName to use the sorted/processed version of policy tags:

return getTagList(policyTagList, tagIndex).name;

Note: getTagLists and getTagList are different.

What alternative solutions did you explore? (Optional)

NA

[melvin-bot]

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

[melvin-bot]

Triggered auto assignment to Contributor Plus for review of internal employee PR - @ntdiary (Internal)

[mallenexpensify]

@ntdiary can you help me here? I just spent ~20 mins trying to get the account setup to test.

1. On a collect plan, on expensify.com, I'm logged in as mallen@expensifail.com and I invited my test account

2. On staging.new.expensify.com I'm logged in with my test account

3. I don't see the workspace in LHN as an option

Anything you know of that I'm doing wrong?

[gijoe0295]

@mallenexpensify Please take a look at QA steps 1 - 3 from #34127. Also you need to log out then log in again then the collect workspace is there. If that still didn't work, please try to create a money request to the collect workspace from employee account by the bottom bar + button.

[Krishna2323]

Proposal

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

Multilevel tag - Tag name in RHP is not the same as the tag being clicked on

What is the root cause of that problem?

We display sorted tags by name, but we forgot to use getTagLists to sort before passing policyTagLists to getTagListName.

App/src/components/ReportActionItem/MoneyRequestView.tsx

Line 136 in a04481f

const policyTagLists = useMemo(() => PolicyUtils.getTagLists(policyTagList), [policyTagList]);

App/src/libs/PolicyUtils.ts

Lines 179 to 188 in a04481f

	function getTagLists(policyTagList: OnyxEntry<PolicyTagList>): Array<PolicyTagList[keyof PolicyTagList]> {
	if (isEmptyObject(policyTagList)) {
	return [];
	}
	return Object.values(policyTagList)
	.filter((policyTagListValue) => policyTagListValue !== null)
	.sort((tagA, tagB) => tagA.orderWeight - tagB.orderWeight);
	}

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

Line 76 in a04481f

const policyTagListName = PolicyUtils.getTagListName(policyTags, tagIndex);

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

We need to pass sorted policyTagLists to getTagListName.

    const policyTagLists = useMemo(() => PolicyUtils.getTagLists(policyTags), [policyTags]);
    const policyTagListName = PolicyUtils.getTagListName(policyTagLists, tagIndex);
    
    // Update getTagListName
    function getTagListName(policyTagList: PolicyTag[], tagIndex: number): string {
    if (!policyTagList.length) {
        return '';
    }
    return policyTagList[tagIndex]?.name ?? '';
}

Result

tag_list_name.mp4

[Krishna2323]

@mallenexpensify, I think this can be external.