[HOLD for payment 2024-10-25] [$250] Room-Description with mentions shown in preview but after saved disappeared

[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: 9.0.37-0
Reproducible in staging?: Y
Reproducible in production?: Y
Issue reported by: Applause Internal Team

Action Performed:

1. Go to https://staging.new.expensify.com/home
2. Open a room chat
3. Tap header -- description
4. Enter description with mention and save it eg : Hamburger squishes content on mobile web (native?) #233

Expected Result:

Description with mentions shown in preview and must be displayed after saved also.

Actual Result:

Description with mentions shown in preview but after saved shown briefly and disappears.

Workaround:

Unknown

Platforms:

• Android: Native
• Android: mWeb Chrome
• iOS: Native
• iOS: mWeb Safari
• [x ] MacOS: Chrome / Safari
• MacOS: Desktop

Screenshots/Videos

Bug6607424_1726644443287.screenrecorder-2024-09-18-10-28-17-734_compress_1.mp4

View all open jobs on GitHub

Upwork Automation - Do Not Edit

• Upwork Job URL: https://www.upwork.com/jobs/~021836660554703667076
• Upwork Job ID: 1836660554703667076
• Last Price Increase: 2024-10-03
• Automatic offers:
• rayane-djouah | Reviewer | 104326440
• truph01 | Contributor | 104326443

Issue Owner

Current Issue Owner: @greg-schroeder

[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.

[IuliiaHerets]

@greg-schroeder 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

[truph01]

Edited by proposal-police: This proposal was edited at 2024-09-19 17:04:09 UTC.

Proposal

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

• Description with mentions shown in preview but after saved shown briefly and disappears.

What is the root cause of that problem?

• When we save description "#123xxx", we sent to BE "<mention-report>#123xxx</mention-report>" but BE returns "#123xxx" - a MD string.

• And shouldParseTitle is not added in this:

App/src/pages/ReportDetailsPage.tsx

Line 729 in 0c618ac

<MenuItemWithTopDescription

while the description returned by BE is a MD string.

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

• When display "#123xxx" we should check if "123xxx" is reportName data of any report in the current policy. If yes, highlight that text.

• First, update:
  

  App/src/pages/ReportDetailsPage.tsx

  Line 729 in 0c618ac

  <MenuItemWithTopDescription

                           <MentionReportContext.Provider value={mentionReportContextValue}>
                                <MenuItemWithTopDescription ... />
                           </MentionReportContext.Provider> 

  const mentionReportContextValue = useMemo(() => ({currentReportID: report.reportID, exact: true}), [report.reportID]);

• Second, update:

App/src/pages/RoomDescriptionPage.tsx

Line 82 in ace39e8

<InputWrapper

                            excludedMarkdownStyles={isReportInGroupPolicy ? ['mentionReport'] : []}

with:

    const isReportInGroupPolicy = !!report?.policyID && report.policyID !== CONST.POLICY.ID_FAKE;

to make sure the reportMentions markdown is only applied if the current report belongs to policy.

• Finally, update this:

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

Line 89 in ace39e8

isGroupPolicyReport

to:

                        isGroupPolicyReport && (!exact || navigationRoute)

What alternative solutions did you explore? (Optional)

See

Fix the description preview

• We should update that MenuItemWithTopDescription to:

+                          <MentionReportContext.Provider value={mentionReportContextValue}>
                                <MenuItemWithTopDescription
+                                  shouldParseTitle
-                                  shoudlRenderAsHTML
+                                 excludedMarkdownRules={!policy ? ['reportMentions'] : []}
                                />
+                          </MentionReportContext.Provider>

+  const mentionReportContextValue = useMemo(() => ({currentReportID: report.reportID}), [report.reportID]);

Fix the description's form

• Next, we need to fix the RoomDescriptionPage so that it will send the markdown data to BE instead of HTML.

• First, update:

App/src/pages/RoomDescriptionPage.tsx

Line 36 in 0c618ac

const [description, setDescription] = useState(() => Parser.htmlToMarkdown(report?.description ?? ''));

    const [description, setDescription] = useState(report?.description ?? '');

• Last, update:
  

  App/src/libs/actions/Report.ts

  Line 2053 in 0c618ac

  const optimisticDescriptionUpdatedReportAction = ReportUtils.buildOptimisticRoomDescriptionUpdatedReportAction(parsedDescription);

    const parsedDescription = Parser.htmlToMarkdown(ReportUtils.getParsedComment(newValue, {reportID}));

[melvin-bot]

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

[melvin-bot]

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

[FitseTLT]

This is not a bug. If we mention a correct room the BE sets the description to the mention of that room and it is a correct clickable mention but if the BE doesn't get a room with that name it will consider it a normal text so the mention will disappear. In compose we have a option to deal with this case with a whisper message explaining that the room doesn't exist and ask if the user wants to create it but in this case I think it is unnecessary.

[truph01]

@greg-schroeder Can you confirm the expected behavior here? In the preview, should we always highlight the text #any-text, or we just highlight it if #any-text is the reportName of the existing report?