[Due for payment 2026-03-24] [$250] Workspace - Mentions are not highlighted in workspace description

[IuliiaHerets]

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. 0.82-0
Reproducible in staging?: Yes
Reproducible in production?: Yes
Issue reported by: Applause Internal Team
Device used: Redmi note 10s android 13
App Component: Workspace Settings

Action Performed:

1. Go to https://staging.new.expensify.com/home
2. Tap settings -- workspace settings
3. Tap workspace profile - description
4. Clear the description and enter #765
5. Save the description
6. Open the description

Expected Result:

Mentions must be highlighted in workspace description.

Actual Result:

Mentions are not highlighted in workspace description but highlighted in preview.

Workaround:

Unknown

Platforms:

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

Screenshots/Videos

Bug6708769_1736311952951.Screenrecorder-2025-01-08-10-16-51-773.mp4

View all open jobs on GitHub

Upwork Automation - Do Not Edit

• Upwork Job URL: https://www.upwork.com/jobs/~021877698306462649748
• Upwork Job ID: 1877698306462649748
• Last Price Increase: 2025-01-24
• Automatic offers:
• truph01 | Contributor | 105879695

Issue Owner

Current Issue Owner: @eh2077

Issue Owner

Current Issue Owner: @getusha

[melvin-bot]

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

[truph01]

Edited by proposal-police: This proposal was edited at 2025-01-08 09:29:11 UTC.

Proposal

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

• Mentions are not highlighted in workspace description but highlighted in preview.

What is the root cause of that problem?

• In here:

App/src/pages/workspace/WorkspaceProfilePage.tsx

Line 283 in 0f6756b

<MenuItemWithTopDescription

we didn't wrap the MenuItemWithTopDescription inside the <MentionReportContext.Provider value={mentionReportContextValue}> so the mention room are not highlighted.

• Also, when user saves the room description as #room-1, BE does not return the correct description like <mention-report reportID={...}>#room-1</mention-report>.

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

• In context, introduce a new variable policyID?: string.

• In here, update the isGroupPolicyReport:

    const isGroupPolicyReport = useMemo(
        () => policyID ?? (currentReport && !isEmptyObject(currentReport) && !!currentReport.policyID && currentReport.policyID !== CONST.POLICY.ID_FAKE),
        [currentReport, policyID],
    );

• Then, introduce an additional param policyID in:

App/src/components/HTMLEngineProvider/HTMLRenderers/MentionReportRenderer/index.tsx

Line 29 in 9293c26

const getMentionDetails = (htmlAttributeReportID: string, currentReport: OnyxEntry<Report>, reports: OnyxCollection<Report>, tnode: TText | TPhrasing) => {

and use it in:

App/src/components/HTMLEngineProvider/HTMLRenderers/MentionReportRenderer/index.tsx

Line 44 in 9293c26

if (report?.policyID === currentReport?.policyID && removeLeadingLTRAndHash(report?.reportName ?? '') === mentionDisplayText) {

            if (report?.policyID === (currentReport?.policyID ?? policyID) && removeLeadingLTRAndHash(report?.reportName ?? '') === mentionDisplayText) {
                reportID = report?.reportID;
            }

• Then we pass a policyID when calling function in:

App/src/components/HTMLEngineProvider/HTMLRenderers/MentionReportRenderer/index.tsx

Line 70 in 9293c26

const mentionDetails = getMentionDetails(htmlAttributeReportID, currentReport, reports, tnode);

• Then, we need to wrap the MenuItemWithTopDescription inside the <MentionReportContext.Provider value={mentionReportContextValue}> with const mentionReportContextValue = useMemo(() => ({policyID: policy.id, exactlyMatch: true}), [policy]); so the room will be highlighted if it exists. The exactlyMatch: true is optional.

• Then, update:

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

Line 1387 in 9293c26

const parsedDescription = ReportUtils.getParsedComment(description);

to:

    const parsedDescription = ReportUtils.getParsedComment(description, {policyID});

• Finally, BE need to return the correct mention-report message with the proper reportID.

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

What alternative solutions did you explore? (Optional)

• We can add excludedMarkdownRules={['reportMentions']} to this place so the the text will never been highlighted.

[zanyrenney]

adding external

[melvin-bot]

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

[melvin-bot]

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