[HOLD for payment 2025-02-04] [$250] Search - Suggestion shows A: B tag as tag:A\: B

[vincdargento]

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: 9.0.70-1
Reproducible in staging?: Yes
Reproducible in production?: Yes
If this was caught on HybridApp, is this reproducible on New Expensify Standalone?: Yes
If this was caught during regression testing, add the test name, ID and link from TestRail: N/A
Email or phone of affected tester (no customers): applausetester+kh1311020@applause.expensifail.com
Issue reported by: Applause Internal Team

Action Performed:

Precondition:

• Workspace has a tag in A: B format.

1. Go to staging.new.expensify.com
2. Go to workspace chat.
3. Submit an expense with A:B tag.
4. Open search router on the top right.
5. Type tag:

Expected Result:

The A: B tag in the suggestion list should display tag:A: B

Actual Result:

The A: B tag in the suggestion list displays tag:A: B.

Workaround:

Unknown

Platforms:

Which of our officially supported platforms is this issue occurring on?

• Android: Standalone
• Android: HybridApp
• Android: mWeb Chrome
• iOS: Standalone
• iOS: HybridApp
• iOS: mWeb Safari
• MacOS: Chrome / Safari
• MacOS: Desktop

Screenshots/Videos

bug.mp4

View all open jobs on GitHub

Upwork Automation - Do Not Edit

• Upwork Job URL: https://www.upwork.com/jobs/~021866767308689135307
• Upwork Job ID: 1866767308689135307
• Last Price Increase: 2024-12-11
• Automatic offers:
• jaydamani | Contributor | 105727264

Issue Owner

Current Issue Owner: @JmillsExpensify

[melvin-bot]

Triggered auto assignment to @JmillsExpensify (Bug), see https://stackoverflow.com/c/expensify/questions/14418 for more details. Please add this bug to a GH project, as outlined in the SO.

[etCoderDysto]

Edited by proposal-police: This proposal was edited at 2024-12-18 12:33:59 UTC.

Proposal

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

Search - Suggestion shows A: B tag as tag:A\: B

What is the root cause of that problem?

• When user tries to search for tag by entering tag: the returned tagName(text) from parseForAutocomplete have A\: B format. Then it will be assigned to autocompleteList when autocompleteValue is falsy - meaning there is no chrater entered after tag: in the search input
  

  App/src/components/Search/SearchRouter/SearchRouterList.tsx

  Lines 211 to 216 in 4195ffc

  	switch (autocompleteKey) {
  	case CONST.SEARCH.SYNTAX_FILTER_KEYS.TAG: {
  	const autocompleteList = autocompleteValue ? tagAutocompleteList : recentTagsAutocompleteList ?? [];
  	const filteredTags = autocompleteList
  	.filter((tag) => tag.toLowerCase().includes(autocompleteValue.toLowerCase()) && !alreadyAutocompletedKeys.includes(tag))
  	.sort()

• When autocompleteValue is truthy we get cleaned tag names(tagAutocompleteList) that are available from all the workspaces using getAutocompleteTags, which in turn use getTagNamesFromTagsLists to fetch cleaned tagNames
• And here we are not cleaning the tag from recentTagsAutocompleteList before assigning it to text property and displaying it
  

  App/src/components/Search/SearchRouter/SearchRouterList.tsx

  Lines 363 to 367 in 4195ffc

  	const autocompleteData = autocompleteSuggestions.map(({filterKey, text, autocompleteID}) => {
  	return {
  	text: getSubstitutionMapKey(filterKey, text),
  	singleIcon: Expensicons.MagnifyingGlass,
  	searchQuery: text,

There are two problems here:

1. Tag is not being cleaned and displayed in the correct format as the issue report decribes
2. We are assigning a cleaned tag to searchQuery prop that is returned from getAutocompleteTags when there is a search value in the input (tag: a). And when the searchQuery is cleaned tag format, search page won't display the the appropriate transactions. You can see the issue in this video

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

• We should create a utility function similar to getTagNamesFromTagsLists but it should return uncleaned tag name.
• Use it here to get uncleaned tag name instead of using getTagNamesFromTagsLists
  

  App/src/libs/SearchAutocompleteUtils.ts

  Line 30 in 1466c02

  .map(getTagNamesFromTagsLists)

• Then if filterKey equals to tag, we should convert A\: B format to A: B using ReportUtils.getCleanedTagName before assigning to text property. Or we can clean the tag name in getAutocompleteDisplayText function. We should pass uncleaned tag name to searchQuery. This will make sure that we will pass the right searchQuery to search page

const cleanedText = filterKey === CONST.SEARCH.SYNTAX_FILTER_KEYS.TAG ? getCleanedTagName(text) : text;
return {
     text: getAutocompleteDisplayText(filterKey, cleanedText),

Note: we should only clean the tag name for text property. If we clean tag name for searchQuery it will break search results on search page when the tag is selected.

What specific scenarios should we cover in automated tests to prevent reintroducing this issue in the future?

We should add a test that asserts that the newly created utility function returns a list of tags with uncleaned tag names.

What alternative solutions did you explore? (Optional)

We can return searchQuery with uncleaned tag name, and text with cleaned tag name here

App/src/components/Search/SearchRouter/SearchRouterList.tsx

Lines 219 to 221 in 4195ffc

	return filteredTags.map((tagName) => ({
	filterKey: CONST.SEARCH.SYNTAX_FILTER_KEYS.TAG,
	text: tagName,

Then we can assign searchQuery from above when the filter test is tag, and assing text to searchQuery if it is not

App/src/components/Search/SearchRouter/SearchRouterList.tsx

Line 367 in 4195ffc

searchQuery: text,

[saifelance]

Proposal

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

A: B tag is being formatted in the search suggestion results. The tag is displaying as tag:A: B in the suggestion list, which is due to escaping the colon (:) character.

What is the root cause of that problem?

• Tag Filtering and Rendering Logic: Ensure that when the tags are processed for autocomplete suggestions, the colon is correctly handled and not escaped. The section of your code where the tagAutocompleteList is filtered and mapped could be adjusted to prevent escaping of the colon when it's part of the tag.

• Search Autocomplete Parsing Logic: Check the parseForAutocomplete function or any related logic that processes the query string for search suggestions. If there's any special handling for the : character that escapes it, that might be the root cause.

• Update the Mapping Function: Specifically, within the filtering logic where tags are matched with the query value, ensure that the tagName is returned in the format tag:A: B instead of tag:A\: B. This can be done by updating the .map() function in the autocompleteSuggestions logic:

App/src/components/Search/SearchRouter/SearchRouterList.tsx

return filteredTags.map((tagName) => ({
    filterKey: CONST.SEARCH.SYNTAX_FILTER_KEYS.TAG,
    text: tagName.replace("\\:", ":"),
}));

Avoid Overriding Special Characters: If you're using regex or any string manipulation elsewhere to clean or modify the tag value, make sure the colon (:) is not being replaced or escaped unless it's necessary for the actual query parsing.

[Tony-MK]

Proposal

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

Suggestion shows A: B tag as tag:A: B

What is the root cause of that problem?

In the getAutocompleteRecentTags function, we do not clean the recently used policy tag names retrieved from the alllRecentTags and singlePolicyRecentTags arrays.

App/src/libs/SearchAutocompleteUtils.ts

Lines 42 to 51 in a1585a9

	const singlePolicyRecentTags: RecentlyUsedTags | undefined = allRecentTags?.[`${ONYXKEYS.COLLECTION.POLICY_RECENTLY_USED_TAGS}${policyID}`];
	if (!singlePolicyRecentTags) {
	const uniqueTagNames = new Set<string>();
	Object.values(allRecentTags ?? {})
	.map((recentTag) => Object.values(recentTag ?? {}))
	.flat(2)
	.forEach((tag) => uniqueTagNames.add(tag));
	return Array.from(uniqueTagNames);
	}
	return Object.values(singlePolicyRecentTags ?? {}).flat(2);

Therefore, the tag names in recentTagsAutocompleteList have not yet been cleaned.

App/src/components/Search/SearchRouter/SearchRouterList.tsx

Lines 211 to 213 in a40eb99

	switch (autocompleteKey) {
	case CONST.SEARCH.SYNTAX_FILTER_KEYS.TAG: {
	const autocompleteList = autocompleteValue ? tagAutocompleteList : recentTagsAutocompleteList ?? [];

This is unlike the getAutocompleteTags function, where it uses the getTagNamesFromTagsLists function.

The getTagNamesFromTagsLists function cleans the tag name over here so tag names in the tagAutocompleteList array are already cleaned.

App/src/libs/SearchAutocompleteUtils.ts

Lines 28 to 35 in a1585a9

	const tagListsUnpacked = Object.values(allPoliciesTagsLists ?? {}).filter((item) => !!item) as PolicyTagLists[];
	tagListsUnpacked
	.map(getTagNamesFromTagsLists)
	.flat()
	.forEach((tag) => uniqueTagNames.add(tag));
	return Array.from(uniqueTagNames);
	}
	return getTagNamesFromTagsLists(singlePolicyTagsList);

This is the reason why this only happens with recently used policy tags.

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

To get the expected clean tag name format for recently used tags, we need to map both the allRecentTags and singlePolicyRecentTags arrays to the getCleanedTagName function.

Therefore, the getAutocompleteRecentTags should be modified to something like the snippet.

...
if (!singlePolicyRecentTags) {
    const uniqueTagNames = new Set<string>();
    Object.values(allRecentTags ?? {})
      .map((recentTag) => Object.values(recentTag ?? {}))
      .flat(2)
      .forEach((tag) => uniqueTagNames.add(getCleanedTagName(tag))); // clean tag name
    return Array.from(uniqueTagNames);
}
return Object.values(singlePolicyRecentTags ?? {})
    .flat(2)
    .map(getCleanedTagName); // clean tag name
}

What specific scenarios should we cover in automated tests to prevent reintroducing this issue in the future?

N/A

What alternative solutions did you explore? (Optional)

Alternative Solution 1

We can map the autocompleteList with the getCleanedTagName function, however, we will also clean the tag name twice if the autocompleteList was retrieved from tagAutocompleteList instead of recentTagsAutocompleteList since it was cleaned in the getTagNamesFromTagsLists function.

App/src/components/Search/SearchRouter/SearchRouterList.tsx

Lines 214 to 215 in 072b2a6

	const filteredTags = autocompleteList
	.filter((tag) => tag.toLowerCase().includes(autocompleteValue.toLowerCase()) && !alreadyAutocompletedKeys.includes(tag))

const filteredTags = autocompleteList
                    .map(getCleanedTagName) // clean here
                    .filter((tag) => tag.toLowerCase().includes(autocompleteValue.toLowerCase()) && !alreadyAutocompletedKeys.includes(tag))
                     ...

Alternative Solution 2

We could also clean the tags inrecentTagsAutocompleteList over here.

[melvin-bot]

@JmillsExpensify Eep! 4 days overdue now. Issues have feelings too...

[melvin-bot]

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