[$250] Rules - Custom rules with emojis are shown as html tags

[jponikarchuk]

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: V9.1.17-0
Reproducible in staging?: Yes
Reproducible in production?: Yes
If this was caught on HybridApp, is this reproducible on New Expensify Standalone?: Yes, reproducible on both
If this was caught during regression testing, add the test name, ID and link from TestRail: N
Email or phone of affected tester (no customers): Applausetester+df@applause.exoensifail.com
Issue reported by: Applause Internal Team
Device used: Redminote 10s android 13
App Component: Workspace Settings

Action Performed:

1. Go to https://staging.new.expensify.com/home
2. Login with expensifail account
3. Go to workspace settings - enable rules
4. Tap rules - scroll down to custom rules
5. Enter an emoji and save

Expected Result:

Custom rules with emojis musn't be shown as html tags.

Actual Result:

Custom rules with emojis are shown as html tags.

Workaround:

Unknown

Platforms:

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

Screenshots/Videos

1.mp4

View all open jobs on GitHub

Upwork Automation - Do Not Edit

• Upwork Job URL: https://www.upwork.com/jobs/~021904835301154908100
• Upwork Job ID: 1904835301154908100
• Last Price Increase: 2025-04-16
• Automatic offers:
• thelullabyy | Contributor | 107007802

Issue Owner

Current Issue Owner: @thelullabyy

[melvin-bot]

Triggered auto assignment to @greg-schroeder (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.

🚨 Edited by proposal-police: This proposal was edited at 2025-03-23 18:58:53 UTC.

Proposal

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

Rules - Custom rules with emojis are shown as html tags

What is the root cause of that problem?

We convert markdown to html when call API

App/src/libs/actions/Policy/Policy.ts

Line 4029 in 76ccd36

const parsedCustomRules = ReportUtils.getParsedComment(customRules);

And convert again in component

App/src/pages/workspace/rules/CustomRulesSection.tsx

Lines 20 to 25 in 76ccd36

	const parsedRules = useMemo(() => {
	const customRules = policy?.customRules ?? '';
	const options = policy?.isLoading ? {shouldEscapeText: false} : undefined;
	return getParsedComment(customRules, options);
	}, [policy]);

Looks like BE has updated to return html format so we pass the wrong value

App/src/pages/workspace/rules/CustomRulesSection.tsx

Lines 41 to 49 in 76ccd36

	<MenuItemWithTopDescription
	title={rulesDescription}
	description={translate('workspace.rules.customRules.subtitle')}
	shouldShowRightIcon
	interactive
	wrapperStyle={styles.sectionMenuItemTopDescription}
	onPress={() => Navigation.navigate(ROUTES.RULES_CUSTOM.getRoute(policyID))}
	shouldRenderAsHTML
	/>

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

We can remove function getParsedComment

App/src/pages/workspace/rules/CustomRulesSection.tsx

Lines 20 to 25 in 76ccd36

	const parsedRules = useMemo(() => {
	const customRules = policy?.customRules ?? '';
	const options = policy?.isLoading ? {shouldEscapeText: false} : undefined;
	return getParsedComment(customRules, options);
	}, [policy]);

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

None

What alternative solutions did you explore? (Optional)

We can remove all function getParsedComment in both API and component

And use shouldParseTitle instead of shouldRenderAsHTML in this input to render markdow

Reminder: Please use plain English, be brief and avoid jargon. Feel free to use images, charts or pseudo-code if necessary. Do not post large multi-line diffs or write walls of text. Do not create PRs unless you have been hired for this job.

[samranahm]

🚨 Edited by proposal-police: This proposal was edited at 2025-03-30 18:02:21 UTC.

Proposal

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

Rules - Custom rules with emojis are shown as html tags

What is the root cause of that problem?

Here

App/src/pages/workspace/rules/CustomRulesSection.tsx

Line 21 in 8deddfa

const customRules = policy?.customRules ?? '';

Currently we are not handling cases like these, we need to explicitly convert our policy?.customRules to text before getting ParsedComment here

App/src/pages/workspace/rules/CustomRulesSection.tsx

Line 24 in 770363a

return getParsedComment(customRules, options);

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

We should use Parser.htmlToMarkdown to convert policy?.customRules to markdown, update the parsedRules like this

const parsedRules = useMemo(() => {
const customRules = Parser.htmlToMarkdown(policy?.customRules ?? '');
const options = policy?.isLoading ? {shouldEscapeText: false} : undefined;

return getParsedComment(customRules, options);
}, [policy]);

To handle the cases where parsedRules will not be html tags we can use shouldParseTitle

to do so add

    const shouldParseTitle = parsedRules !== policy?.customRules;

and on MenuItemWithTopDescription pass

shouldParseTitle={shouldParseTitle}

This approach handles all cases, whether online or offline.

we are doing the similar here

App/src/pages/workspace/rules/RulesCustomPage.tsx

Line 37 in 8deddfa

const [customRulesValue, setCustomRulesValue] = useState(() => Parser.htmlToMarkdown(policy?.customRules ?? ''));

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)

We can completely remove the getParsedComment here and simply pass our policy?.customRules to MenuItemWithTopDescription as it is

const rulesDescription = policy?.customRules ?? '';

we don't need to change shouldRenderAsHTML

Results

[thelullabyy]

Proposal

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

• Custom rules with emojis are shown as html tags.

What is the root cause of that problem?

• It looks like there was a recent change in the backend logic. Previously, the custom rule text sent to the backend differed from the custom rule text returned by the backend. For more details, refer to the video in this issue.

To handle this inconsistency, the following logic was added to ensure the backend's custom rules render correctly:

App/src/pages/workspace/rules/CustomRulesSection.tsx

Lines 20 to 25 in 4750e38

	const parsedRules = useMemo(() => {
	const customRules = policy?.customRules ?? '';
	const options = policy?.isLoading ? {shouldEscapeText: false} : undefined;
	return getParsedComment(customRules, options);
	}, [policy]);

is added to make sure the custom rules returned by BE are rendered properly. So, this bug didn't appear in the past.

• However, with the new backend behavior, the custom rule text sent and received is now identical. This makes the logic unnecessary — and instead, it causes the bug by escaping HTML text incorrectly.

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

• First, we just need to update this logic, to:

const parsedRules = policy?.customRules ?? '';

• Next, remove the isLoading actions introduced in this PR (isLoading: true and isLoading: false). These actions are redundant and caused a regression where policy.isLoading affects not only CustomRulesSection but also other components like WorkspaceOverviewPlanTypePage. This results in unintended behavior, such as the WorkspaceOverviewPlanTypePage showing a loading indicator when updating custom rules.

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)

We can implement the solution I proposed here, details below:

• We don't need to use ReportUtils.getParsedComment in:

App/src/libs/actions/Policy/Policy.ts

Line 3880 in 48520ec

const parsedCustomRules = ReportUtils.getParsedComment(customRules);

and

App/src/pages/workspace/rules/CustomRulesSection.tsx

Line 20 in 48520ec

const parsedRules = useMemo(() => getParsedComment(policy?.customRules ?? ''), [policy]);

• And update:
  

  App/src/pages/workspace/rules/CustomRulesSection.tsx

  Line 43 in 48520ec

  shouldRenderAsHTML

to use shouldParseTitle instead of shouldRenderAsHTML like we implemented in:

App/src/pages/tasks/NewTaskPage.tsx

Line 158 in bf68759

shouldParseTitle

App/src/components/ReportActionItem/MoneyRequestView.tsx

Line 588 in bf68759

shouldParseTitle

to display the markdown text.

[melvin-bot]

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

[melvin-bot]

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