Merge pull request #32365 from FitseTLT/fix-duplicate-search-results-for-tag

fixed duplicate search result of the selected parent:child tag

Author: amyevans

src/components/MoneyTemporaryForRefactorRequestConfirmationList.js

@@ -799,7 +799,7 @@ function MoneyTemporaryForRefactorRequestConfirmationList({
                     {shouldShowTags && (
                         <MenuItemWithTopDescription
                             shouldShowRightIcon={!isReadOnly}
-                            title={iouTag}
+                            title={PolicyUtils.getCleanedTagName(iouTag)}
                             description={policyTagListName}
                             numberOfLinesTitle={2}
                             onPress={() =>

src/components/ReportActionItem/MoneyRequestView.js

@@ -350,7 +350,7 @@ function MoneyRequestView({report, parentReport, parentReportActions, policyCate
                     <OfflineWithFeedback pendingAction={lodashGet(transaction, 'pendingFields.tag') || lodashGet(transaction, 'pendingAction')}>
                         <MenuItemWithTopDescription
                             description={lodashGet(policyTag, 'name', translate('common.tag'))}
-                            title={transactionTag}
+                            title={PolicyUtils.getCleanedTagName(transactionTag)}
                             interactive={canEdit}
                             shouldShowRightIcon={canEdit}
                             titleStyle={styles.flex1}

src/libs/ModifiedExpenseMessage.ts

@@ -187,8 +187,8 @@ function getForReportAction(reportAction: ReportAction): string {
     const hasModifiedTag = reportActionOriginalMessage && 'oldTag' in reportActionOriginalMessage && 'tag' in reportActionOriginalMessage;
     if (hasModifiedTag) {
         buildMessageFragmentForValue(
-            reportActionOriginalMessage?.tag ?? '',
-            reportActionOriginalMessage?.oldTag ?? '',
+            PolicyUtils.getCleanedTagName(reportActionOriginalMessage?.tag ?? ''),
+            PolicyUtils.getCleanedTagName(reportActionOriginalMessage?.oldTag ?? ''),
             policyTagListName,
             true,
             setFragments,

src/libs/OptionsListUtils.js

@@ -17,6 +17,7 @@ import Navigation from './Navigation/Navigation';
 import Permissions from './Permissions';
 import * as PersonalDetailsUtils from './PersonalDetailsUtils';
 import * as PhoneNumber from './PhoneNumber';
+import * as PolicyUtils from './PolicyUtils';
 import * as ReportActionUtils from './ReportActionsUtils';
 import * as ReportUtils from './ReportUtils';
 import * as TaskUtils from './TaskUtils';
@@ -945,19 +946,23 @@ function getCategoryListSections(categories, recentlyUsedCategories, selectedOpt
  * @returns {Array<Object>}
  */
 function getTagsOptions(tags) {
-    return _.map(tags, (tag) => ({
-        text: tag.name,
-        keyForList: tag.name,
-        searchText: tag.name,
-        tooltipText: tag.name,
-        isDisabled: !tag.enabled,
-    }));
+    return _.map(tags, (tag) => {
+        // This is to remove unnecessary escaping backslash in tag name sent from backend.
+        const cleanedName = PolicyUtils.getCleanedTagName(tag.name);
+        return {
+            text: cleanedName,
+            keyForList: tag.name,
+            searchText: tag.name,
+            tooltipText: cleanedName,
+            isDisabled: !tag.enabled,
+        };
+    });
 }
 
 /**
  * Build the section list for tags
  *
- * @param {Object[]} rawTags
+ * @param {Object[]} tags
  * @param {String} tags[].name
  * @param {Boolean} tags[].enabled
  * @param {String[]} recentlyUsedTags
@@ -967,14 +972,8 @@ function getTagsOptions(tags) {
  * @param {Number} maxRecentReportsToShow
  * @returns {Array<Object>}
  */
-function getTagListSections(rawTags, recentlyUsedTags, selectedOptions, searchInputValue, maxRecentReportsToShow) {
+function getTagListSections(tags, recentlyUsedTags, selectedOptions, searchInputValue, maxRecentReportsToShow) {
     const tagSections = [];
-    const tags = _.map(rawTags, (tag) => {
-        // This is to remove unnecessary escaping backslash in tag name sent from backend.
-        const tagName = tag.name && tag.name.replace(/\\{1,2}:/g, ':');
-
-        return {...tag, name: tagName};
-    });
     const sortedTags = sortTags(tags);
     const enabledTags = _.filter(sortedTags, (tag) => tag.enabled);
     const numberOfTags = _.size(enabledTags);
@@ -999,7 +998,7 @@ function getTagListSections(rawTags, recentlyUsedTags, selectedOptions, searchIn
     }
 
     if (!_.isEmpty(searchInputValue)) {
-        const searchTags = _.filter(enabledTags, (tag) => tag.name.toLowerCase().includes(searchInputValue.toLowerCase()));
+        const searchTags = _.filter(enabledTags, (tag) => PolicyUtils.getCleanedTagName(tag.name.toLowerCase()).includes(searchInputValue.toLowerCase()));
 
         tagSections.push({
             // "Search" section

src/libs/PolicyUtils.ts

@@ -195,6 +195,13 @@ function getTagList(policyTags: OnyxCollection<PolicyTags>, tagKey: string) {
     return policyTags?.[policyTagKey]?.tags ?? {};
 }
 
+/**
+ * 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, ':');
+}
+
 function isPendingDeletePolicy(policy: OnyxEntry<Policy>): boolean {
     return policy?.pendingAction === CONST.RED_BRICK_ROAD_PENDING_ACTION.DELETE;
 }
@@ -221,6 +228,7 @@ export {
     getTag,
     getTagListName,
     getTagList,
+    getCleanedTagName,
     isPendingDeletePolicy,
     isPolicyMember,
     isPaidGroupPolicy,