[$500] Disabled tags are showing as required for "Multi level tags"

[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: 1.4.43-12
Reproducible in staging?: y
Reproducible in production?: y
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: @joeldavis
Slack conversation: https://expensify.slack.com/archives/C049HHMV9SM/p1708607040166479

Action Performed:

1. In OD as admin enable "People must tag expenses" for some workspace
2. Enable "Use multiple levels of tags"
3. Create/import some multi-level tags and mark at least one as disabled
4. Invite user B to the policy as employee
5. As employee go to the workspace chat invited to
6. Request money and enter the amount and click next

Expected Result:

Disabled tags shouldn't appear

Actual Result:

Disabled tag appear as required (Multi-level tags all show as required)

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/~019af1911417c9325b
• Upwork Job ID: 1760727691225997312
• Last Price Increase: 2024-02-22

Issue Owner

Current Issue Owner: @akinwale

[melvin-bot]

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

[melvin-bot]

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

[melvin-bot]

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

[dukenv0307]

Proposal

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

• Disabled tags are showing as required for "Multi level tags"

What is the root cause of that problem?

• I think the issue's title should be changed to: "No required tags are showing as required for "Multi level tags""
• We display required text based on the below:
  

  App/src/components/MoneyTemporaryForRefactorRequestConfirmationList.js

  Line 777 in 94dc249

  rightLabel={isTagRequired ? translate('common.required') : ''}

• It is not correct in case of multiple levels tags, because in multiple levels tags, each tag already had a required field.

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

• In case of multiple levels tags, we can display the required text based on the required field in each tag. We can do it by updating the above logic to:

                    rightLabel={isMultipleLevelsTags ? (required ? translate('common.required') : '') : isTagRequired ? translate('common.required') : ''}

with

    const isMultipleLevelsTags = policyTagLists && policyTagLists.length > 1;

• We also need to update isSupplementary
• Note: BE need to return the required field for each tag in multiple levels tags beside the name and tags fields

What alternative solutions did you explore? (Optional)

• NA

[FitseTLT]

Proposal

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

Disabled tags are showing as required for "Multi level tags"

What is the root cause of that problem?

Currently we are displaying the tags menu without checking whether it is disabled or not here

App/src/components/MoneyTemporaryForRefactorRequestConfirmationList.js

Lines 761 to 766 in 29ad878

	..._.map(policyTagLists, ({name}, index) => ({
	item: (
	<MenuItemWithTopDescription
	key={name}
	shouldShowRightIcon={!isReadOnly}
	title={TransactionUtils.getTag(transaction, index)}

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

When we disable a tag on OD it's required field is set to false so we can filter out tags with required false before displaying here

App/src/components/MoneyTemporaryForRefactorRequestConfirmationList.js

Lines 761 to 766 in 29ad878

	..._.map(policyTagLists, ({name}, index) => ({
	item: (
	<MenuItemWithTopDescription
	key={name}
	shouldShowRightIcon={!isReadOnly}
	title={TransactionUtils.getTag(transaction, index)}

 ..._.map(
            _.filter(policyTagLists, ({required}) => required !== false),
            ({name}, index) => ({
                item: (
                    <MenuItemWithTopDescription
                        key={name}

What alternative solutions did you explore? (Optional)

[akinwale]

Since this is a fairly straightforward issue, we can go with the first correct solution, which can be found in @dukenv0307's proposal.

🎀👀🎀 C+ reviewed.

[melvin-bot]

Triggered auto assignment to @MonilBhavsar, see https://stackoverflow.com/c/expensify/questions/7972 for more details.