[Due for payment 2025-05-14] [$250] Admin - Workspace description with markdown is shown as html tags in admin room system message.

[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.21-3
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): Slottwo1 aya@gmail.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. Tap settings - workspaces - create a new workspace
3. Tap overview - description
4. Change description as 5 & save
5. Go to admin room

Expected Result:

Workspace description with markdown must not be shown as html tags in admin room system message.

Actual Result:

Workspace description with markdown is shown as html tags in admin room system message.

Workaround:

Unknown

Platforms:

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

Screenshots/Videos

Bug6784750_1743110346795.Dvnb8264_1_.mp4

View all open jobs on GitHub

Upwork Automation - Do Not Edit

• Upwork Job URL: https://www.upwork.com/jobs/~021910766257068312583
• Upwork Job ID: 1910766257068312583
• Last Price Increase: 2025-04-25

Issue Owner

Current Issue Owner: @adelekennedy

[melvin-bot]

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

[nkdengineer]

Proposal

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

Workspace description with markdown is shown as html tags in admin room system message.

What is the root cause of that problem?

We don't convert the newDescription/oldDescription to text when we get the workspace update description message here then, the description still contains markdown.

App/src/pages/home/report/PureReportActionItem.tsx

Line 903 in 69bfd3d

children = <ReportActionItemBasicMessage message={getWorkspaceDescriptionUpdatedMessage(action)} />;

App/src/libs/ReportActionsUtils.ts

Line 1879 in 69bfd3d

typeof oldDescription === 'string' && newDescription ? translateLocal('workspaceActions.updateWorkspaceDescription', {newDescription, oldDescription}) : getReportActionText(action);

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

We should convert the description to text and use this to display the message

const oldDescriptionText = getTextFromHtml(oldDescription);
const newDescriptionText = getTextFromHtml(newDescription);
const message =
    typeof oldDescriptionText === 'string' && newDescriptionText ? translateLocal('workspaceActions.updateWorkspaceDescription', {newDescription: newDescriptionText, oldDescription: oldDescriptionText}) : getReportActionText(action);
return message;

App/src/pages/home/report/PureReportActionItem.tsx

Line 903 in 69bfd3d

children = <ReportActionItemBasicMessage message={getWorkspaceDescriptionUpdatedMessage(action)} />;

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)

If we want to display the message with markdown style, we can remove this case here

App/src/pages/home/report/PureReportActionItem.tsx

Lines 902 to 904 in 69bfd3d

	} else if (action.actionName === CONST.REPORT.ACTIONS.TYPE.POLICY_CHANGE_LOG.UPDATE_DESCRIPTION) {
	children = <ReportActionItemBasicMessage message={getWorkspaceDescriptionUpdatedMessage(action)} />;
	} else if (action.actionName === CONST.REPORT.ACTIONS.TYPE.POLICY_CHANGE_LOG.UPDATE_CURRENCY) {

And create a util to get the workspace description fragment like we did for the update room description action here

App/src/pages/home/report/ReportActionItemMessage.tsx

Lines 74 to 80 in 69bfd3d

	if (action.actionName === CONST.REPORT.ACTIONS.TYPE.ROOM_CHANGE_LOG.UPDATE_ROOM_DESCRIPTION) {
	const fragment = getUpdateRoomDescriptionFragment(action);
	return (
	<View style={[styles.chatItemMessage, style]}>
	<TextCommentFragment
	fragment={fragment}
	displayAsGroup={displayAsGroup}

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-04-01 12:28:12 UTC.

Proposal

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

Workspace description with markdown is shown as html tags in admin room system message.

What is the root cause of that problem?

Here

App/src/libs/ReportActionsUtils.ts

Line 1854 in 1c74508

const {oldDescription, newDescription} = getOriginalMessage(action as ReportAction<typeof CONST.REPORT.ACTIONS.TYPE.POLICY_CHANGE_LOG.UPDATE_DESCRIPTION>) ?? {};

We are not converting HTML we get from getOriginalMessage to text before displaying in system message in #admin room

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

We should explicitly convert HTML to text using Parser.htmlToText like we doing at multiple locations

const {oldDescription, newDescription} = getOriginalMessage(action as ReportAction<typeof CONST.REPORT.ACTIONS.TYPE.POLICY_CHANGE_LOG.UPDATE_DESCRIPTION>) ?? {};
const oldDescriptionText = Parser.htmlToText(oldDescription ?? '');
const newDescriptionText = Parser.htmlToText(newDescription ?? '');
const message =
  typeof oldDescriptionText === 'string' && newDescriptionText ? translateLocal('workspaceActions.updateWorkspaceDescription', {newDescriptionText, oldDescriptionText}) : getReportActionText(action);
return message;

and update UpdatedPolicyDescriptionParams

App/src/languages/params.ts

Line 300 in 1c74508

type UpdatedPolicyDescriptionParams = {oldDescription: string; newDescription: string};

to

type UpdatedPolicyDescriptionParams = {oldDescriptionText: string; newDescriptionText: string};

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 also reflector our getOriginalMessage to always return text since we mostly use getOriginalMessage for alternateText or system message
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.

[huult]

Proposal

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

Workspace description with markdown is shown as html tags in admin room system message

What is the root cause of that problem?

We still keep the HTML format for newDescription or oldDescription and return it as assigned.

App/src/libs/ReportActionsUtils.ts

Line 1858 in 96562a9

return message;

App/src/pages/home/report/PureReportActionItem.tsx

Line 901 in 5b83820

children = <ReportActionItemBasicMessage message={getWorkspaceDescriptionUpdatedMessage(action)} />;

And since we're using the component to render it, the HTML tags will be displayed as plain text — which leads to this issue

App/src/pages/home/report/ReportActionItemBasicMessage.tsx

Line 16 in 4ffbd42

<Text style={[styles.chatItemMessage, styles.colorMuted]}>{Str.htmlDecode(message)}</Text>

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

To resolve this issue we just need use RenderHTML to render this message

App/src/pages/home/report/ReportActionItemBasicMessage.tsx

Line 16 in 4ffbd42

<Text style={[styles.chatItemMessage, styles.colorMuted]}>{Str.htmlDecode(message)}</Text>

update to:

  <View style={[styles.chatItemMessage]}>
      <RenderHTML html={`<muted-text>${message}</muted-text>`} />
  </View>

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)

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.

[bernhardoj]

Proposal

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

The workspace description update system message shows HTML tag.

What is the root cause of that problem?

This happens after #53238 where we want to translate the admin system messages. Previously, the system message is rendered in HTML. But since now we render it using ReportActionItemBasicMessage, it will be rendered as a plain text.

App/src/pages/home/report/PureReportActionItem.tsx

Lines 935 to 936 in a099aa1

	} else if (action.actionName === CONST.REPORT.ACTIONS.TYPE.POLICY_CHANGE_LOG.UPDATE_DESCRIPTION) {
	children = <ReportActionItemBasicMessage message={getWorkspaceDescriptionUpdatedMessage(action)} />;

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

First, remove this case.

App/src/pages/home/report/PureReportActionItem.tsx

Lines 935 to 936 in a099aa1

	} else if (action.actionName === CONST.REPORT.ACTIONS.TYPE.POLICY_CHANGE_LOG.UPDATE_DESCRIPTION) {
	children = <ReportActionItemBasicMessage message={getWorkspaceDescriptionUpdatedMessage(action)} />;

We will let the message be rendered using ReportActionItemMessage. In getReportActionMessageFragments, add a new case for the description update system message.

App/src/libs/ReportActionsUtils.ts

Lines 1512 to 1534 in a099aa1

	function getReportActionMessageFragments(action: ReportAction): Message[] {
	if (isOldDotReportAction(action)) {
	const oldDotMessage = getMessageOfOldDotReportAction(action);
	const html = isActionOfType(action, CONST.REPORT.ACTIONS.TYPE.SELECTED_FOR_RANDOM_AUDIT) ? Parser.replace(oldDotMessage) : oldDotMessage;
	return [{text: oldDotMessage, html: `<muted-text>${html}</muted-text>`, type: 'COMMENT'}];
	}
	if (isActionOfType(action, CONST.REPORT.ACTIONS.TYPE.ROOM_CHANGE_LOG.UPDATE_ROOM_DESCRIPTION)) {
	const message = getUpdateRoomDescriptionMessage(action);
	return [{text: message, html: `<muted-text>${message}</muted-text>`, type: 'COMMENT'}];
	}
	if (isActionOfType(action, CONST.REPORT.ACTIONS.TYPE.REIMBURSED)) {
	const message = getReportActionMessageText(action);
	return [{text: message, html: `<muted-text>${message}</muted-text>`, type: 'COMMENT'}];
	}
	const actionMessage = action.previousMessage ?? action.message;
	if (Array.isArray(actionMessage)) {
	return actionMessage.filter((item): item is Message => !!item);
	}
	return actionMessage ? [actionMessage] : [];
	}

if (isActionOfType(action, CONST.REPORT.ACTIONS.TYPE.POLICY_CHANGE_LOG.UPDATE_DESCRIPTION)) {
    const message = getWorkspaceDescriptionUpdatedMessage(action);
    return [{text: message, html: `<muted-text>${message}</muted-text>`, type: 'COMMENT'}];
}

We can do the same for other action that suffers the same issue.

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

Not really sure if we should add a test to `getReportActionMessageFragments for description update case since it's just a straightforward if case. If we want to add one, we can add it to the existing test suite.

[melvin-bot]

@adelekennedy Huh... This is 4 days overdue. Who can take care of this?

[melvin-bot]

@adelekennedy 6 days overdue. This is scarier than being forced to listen to Vogon poetry!

[adelekennedy]

I can reproduce - definitely a polish