[HOLD for payment 2024-04-30][$500] Tag - Tag in Parent: Child format is displayed as Parent/: Child in Tag list

[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.48-0
Reproducible in staging?: y
Reproducible in production?: n
Issue reported by: Applause - Internal Team

Action Performed:

Precondition:

• User is an admin of Collect workspace with tags.
• The tags include tag in Parent: Child format.

1. Go to staging.new.expensify.com
2. Go to Workspace settings > Collect workspace.
3. Go to Tags.

Expected Result:

Tag in Parent: Child format is displayed correctly.

Actual Result:

Tag in Parent: Child format is displayed as Parent/: Child.

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/~01c364cca7b2db41ce
• Upwork Job ID: 1767986259945525248
• Last Price Increase: 2024-03-13
• Automatic offers:
• hoangzinh | Contributor | 0

[github-actions]

👋 Friendly reminder that deploy blockers are time-sensitive ⏱ issues! Check out the open `StagingDeployCash` deploy checklist to see the list of PRs included in this release, then work quickly to do one of the following:

1. Identify the pull request that introduced this issue and revert it.
2. Find someone who can quickly fix the issue.
3. Fix the issue yourself.

[melvin-bot]

Triggered auto assignment to @marcaaron (Engineering), see https://stackoverflowteams.com/c/expensify/questions/9980/ for more details.

[kbecciv]

We think that this bug might be related to #wave8-collect-admins
@zanyrenney

[Tony-MK]

Proposal

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

Tag - Tag in Parent: Child format is displayed as Parent/: Child in the Tag list

What is the root cause of that problem?

We are showing all types of policy tags even if they are multiple tags.

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

Lines 53 to 54 in 98129e6

	Object.values(policyTagList.tags).map((value) => ({
	value: value.name,

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

We should filter out the policy multi-level tags from the policyTagList.tags by checking if the value.name equals the string result from the PolicyUtils.getCleanTagName function.

Object.values(
  policyTagList.tags.filter(
     (value) => value.name == getCleanTagName(value.name)).map((value) => ({
      ...

What alternative solutions did you explore? (Optional)

Create a regex to test if the tag is multi-level by checking if the Parent: Child format exits in the value.name string.

The regex will be similar to the regex the PolicyUtils.getCleanTagName function uses.

App/src/libs/PolicyUtils.ts

Lines 208 to 213 in 13f8bc0

	/**
	* Cleans up escaping of colons (used to create multi-level tags, e.g. "Parent: Child") in the tag name we receive from the backend
	*/
	function getCleanedTagName(tag: string) {
	return tag?.replace(/\\{1,2}:/g, CONST.COLON);
	}

Optional

Implement one of the above solutions in the PolicyUtils.getTagLists function and create an argument called shouldExcudeMultiTags, defaulted to false, to exclude the policy's multi-level tags from the result array.

Additional

To handle possible regressions, in this line, let's check the tagList.length instead of policyTags.

[allgandalf]

Proposal

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

Child format is displayed as Parent/: Child in Tag list

What is the root cause of that problem?

We flatten out the array of tags:

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

Lines 51 to 73 in 98129e6

	policyTagLists
	.map((policyTagList) =>
	Object.values(policyTagList.tags).map((value) => ({
	value: value.name,
	text: value.name,
	keyForList: value.name,
	isSelected: !!selectedTags[value.name],
	rightElement: (
	<View style={styles.flexRow}>
	<Text style={[styles.disabledText, styles.alignSelfCenter]}>
	{value.enabled ? translate('workspace.common.enabled') : translate('workspace.common.disabled')}
	</Text>
	<View style={[styles.p1, styles.pl2]}>
	<Icon
	src={Expensicons.ArrowRight}
	fill={theme.icon}
	/>
	</View>
	</View>
	),
	})),
	)
	.flat(),

See at the end of the code above

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

We should not do this, we should follow similar pattern as we do with categories and remove the flat() funciton

Considering that both tags and categories are on the same option menu, it would be good to remove flat() function to maintain consistency in codebase.

What alternative solutions did you explore? (Optional)

Considering the comments, the updated solution is as follows:

As this is a temporary fix, i suggest that we shouldn't update the util function, instead we should modify the FE as follows, we should update the mapping:

 const tagList = useMemo<PolicyForList[]>(
     () =>
         policyTagLists
             .map((policyTagList) =>
                 Object.values(policyTagList.tags || []).map((value) => {
+                    let cleanValue = value.name;
+                    const colonIndex = cleanValue.indexOf('\\:');
+                    if (colonIndex !== -1 && colonIndex > 0) {
+                        cleanValue = cleanValue.substring(0, colonIndex);
+                    }
                     return {
+                        value: cleanValue,
+                        text: cleanValue,
+                        keyForList: cleanValue,
                         isSelected: !!selectedTags[value.name],
                         rightElement: (
                             <View style={styles.flexRow}>
                                 <Text style={[styles.textSupporting, styles.alignSelfCenter, styles.pl2, styles.label]}>
                                     {value.enabled ? translate('workspace.common.enabled') : translate('workspace.common.disabled')}
                                 </Text>
                                 <View style={[styles.p1, styles.pl2]}>
                                     <Icon
                                         src={Expensicons.ArrowRight}
                                         fill={theme.icon}
                                     />
                                 </View>
                             </View>
                         ),
                     };
                 })
             )
             .flat(),
     [policyTagLists, selectedTags, styles.alignSelfCenter, styles.flexRow, styles.label, styles.p1, styles.pl2, styles.textSupporting, theme.icon, translate],
 );

[marcaaron]

cc @luacmartins @waterim might be able to triage this faster than me. Will take a look soon if not.

[luacmartins]

we're discussing this internally since multi-level tags were out of scope for the doc