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

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.

Go to staging.new.expensify.com
Go to Workspace settings > Collect workspace.
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?

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

👋 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:

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

@marcaaron

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

@zanyrenney

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

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.

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],
 );

@luacmartins

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

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

We've discussed this internally and the solution we're going with is to just hide any tags that are on level 2 or above, so we only want to display the root level for now.

We're still discussing some nuances for this case. I'll circle back once we made a decision on the expected behavior

@hoangzinh

This issue has not been updated in over 15 days. @hoangzinh, @luacmartins, @Tony-MK, @adelekennedy eroding to Monthly issue.

P.S. Is everyone reading this sure this is really a near-term priority? Be brave: if you disagree, go ahead and close it out. If someone disagrees, they'll reopen it, and if they don't: one less thing to do!

The fix has been landed in Prod #38759 (comment)

@luacmartins

payments made - @luacmartins are we good to close?

Yes, should be good to close. Thanks!

Navigation Menu

Repository navigation

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

Action Performed:

Expected Result:

Actual Result:

Workaround:

Platforms:

Screenshots/Videos

Proposal

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

What is the root cause of that problem?

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

What alternative solutions did you explore? (Optional)

Proposal

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

What is the root cause of that problem?

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

What alternative solutions did you explore? (Optional)

49 remaining items

Metadata

Assignees

Labels

Type

Projects

Milestone

Relationships

Development

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

	/**
	* 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);
	}

	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(),

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

Description

Action Performed:

Expected Result:

Actual Result:

Workaround:

Platforms:

Screenshots/Videos

Activity

github-actions commented on Mar 6, 2024

melvin-bot commented on Mar 6, 2024

kbecciv commented on Mar 6, 2024

Tony-MK commented on Mar 6, 2024

Proposal

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

What is the root cause of that problem?

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

What alternative solutions did you explore? (Optional)

allgandalf commented on Mar 6, 2024

Proposal

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

What is the root cause of that problem?

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

What alternative solutions did you explore? (Optional)

marcaaron commented on Mar 6, 2024

luacmartins commented on Mar 6, 2024

luacmartins commented on Mar 7, 2024

luacmartins commented on Mar 7, 2024

49 remaining items

melvin-bot commented on Apr 22, 2024

hoangzinh commented on Apr 23, 2024

adelekennedy commented on Apr 30, 2024

luacmartins commented on Apr 30, 2024

Metadata

Metadata

Assignees

Labels

Type

Projects

Milestone

Relationships

Development

Issue actions