[$250] Workspace - WS invite message briefly shows code when the WS description has native emojis

[lanitochka17]

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.85-0
Reproducible in staging?: Y
Reproducible in production?: Y
If this was caught during regression testing, add the test name, ID and link from TestRail: https://expensify.testrail.io/index.php?/tests/view/4646131&group_by=cases:section_id&group_id=229065&group_order=asc
Issue reported by: Applause - Internal Team

Action Performed:

Precondition: Have a workspace where it's description contains one or more native Android emojis

1. Open the app
2. Navigate to the workspace members page
3. Tap on the "Invite" button
4. Select any account
5. Tap on the "Next" button
6. Navigate back
7. Select the account again
8. Tap on the "Next" button

Expected Result:

Only the emoji should be shown

Actual Result:

The workspace invite message briefly shows code when the workspace description has native Android emojis. Sometimes it appears after navigating back and to the invite message page again

Workaround:

Unknown

Platforms:

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

• Android: Native
• Android: mWeb Chrome
• iOS: Native
• iOS: mWeb Safari
• MacOS: Chrome / Safari
• MacOS: Desktop

Screenshots/Videos

Add any screenshot/video evidence

Bug6517585_1718784045725.az_recorder_20240619_095701.mp4

View all open jobs on GitHub

Upwork Automation - Do Not Edit

• Upwork Job URL: https://www.upwork.com/jobs/~01cf332ff1f1f26822
• Upwork Job ID: 1803436573122955546
• Last Price Increase: 2024-06-19

Issue Owner

Current Issue Owner: @abdulrahuman5196

[melvin-bot]

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

[lanitochka17]

@sonialiap FYI I haven't added the External label as I wasn't 100% sure about this issue. Please take a look and add the label if you agree it's a bug and can be handled by external contributors

[melvin-bot]

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

[melvin-bot]

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

[Sparth19]

Proposal

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

WS invite message flickers <emoji> </emoji> code when description has native emoji symbols

What is the root cause of that problem?

inviteMessage input field's default value is passed without parseHtmlToMarkdown. so its briefly showing Html code.

App/src/pages/workspace/WorkspaceInviteMessagePage.tsx

Line 204 in de66757

defaultValue={getDefaultWelcomeNote()}

after that we are updating with parseHtmlToMarkdown then it works fine

App/src/pages/workspace/WorkspaceInviteMessagePage.tsx

Line 99 in de66757

setWelcomeNote(parseHtmlToMarkdown(getDefaultWelcomeNote()));

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

we need to use parseHtmlToMarkdown in defaultValue

<InputWrapper
...
defaultValue = {parseHtmlToMarkdown(getDefaultWelcomeNote())}
/>

or, we can combine the getDefaultWelcomeNote function with the parseHtmlToMarkdown function to streamline the process and eliminate the brief display of the raw tags

App/src/pages/workspace/WorkspaceInviteMessagePage.tsx

Lines 84 to 95 in de66757

	const getDefaultWelcomeNote = () =>
	// workspaceInviteMessageDraft can be an empty string
	// eslint-disable-next-line @typescript-eslint/prefer-nullish-coalescing
	workspaceInviteMessageDraft ||
	// policy?.description can be an empty string
	// eslint-disable-next-line @typescript-eslint/prefer-nullish-coalescing
	policy?.description ||
	parser.replace(
	translate('workspace.common.welcomeNote', {
	workspaceName: policy?.name ?? '',
	}),
	);

[bernhardoj]

Same root cause as #42668

[abdulrahuman5196]

Same root cause as #42668

@sonialiap seems to be a dupe

[sonialiap]

Closing as dupe