[$250] Editing a tagged message with emoji results in tag disappearing

[m-natarajan]

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: v1.4.76-3 Reproducible in staging?: y Reproducible in production?: y If this was caught during regression testing, add the test name, ID and link from TestRail: Email or phone of affected tester (no customers): Logs: https://stackoverflow.com/c/expensify/questions/4856 Expensify/Expensify Issue URL: Issue reported by: @jliexpensify Slack conversation: https://expensify.slack.com/archives/C049HHMV9SM/p1716768618432089

Action Performed:

1. Go to staging.new.expensify.com
2. Select any room from LHN
3. Tag someone by email or by name and write a message
4. Right click the message and edit with emoji
5. Again edit and add second emoji

   Expected Result:

   Tagged person not disappear from message

   Actual Result:

   Tagged person name/email disappeared during editing and also emoji size changed to larger one Note: Sometimes happens on first edit itself

   Workaround:

   Unknown

   Platforms:

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

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

Screenshots/Videos

Add any screenshot/video evidence

https://github.com/Expensify/App/assets/38435837/a3b010dd-187a-454a-baa5-c6aa174885ba

https://github.com/Expensify/App/assets/38435837/d9f653de-e315-435f-a670-ab199e002421

https://github.com/Expensify/App/assets/38435837/d5ac4d65-705a-4cce-8380-afeb46a62476

View all open jobs on GitHub

Upwork Automation - Do Not Edit

• Upwork Job URL: https://www.upwork.com/jobs/~01ca19f874c465396c
• Upwork Job ID: 1795500664754409472
• Last Price Increase: 2024-06-04

Issue Owner

Current Issue Owner: @parasharrajat

[melvin-bot[bot]]

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

[johncschuster]

I was able to reproduce this without adding an emoji. I think it's more related to editing the message in general.

[johncschuster]

https://github.com/Expensify/App/assets/5579997/f84957ff-791c-4763-90c3-2581547db38a

I'm not sure If I've captured the logs correctly, but here's what I've found:

Logs for Update comment that still contains the mention: 88afc20f3dab44e4-ATL

Logs for Update comment where the mention has now been removed: 88afc23ace6244e4-ATL

As far as reproduction steps go – it's a bit unclear to me. There wasn't a specific number of times that I needed to edit the comment before the mention disappeared.

[melvin-bot[bot]]

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

[melvin-bot[bot]]

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

[crazydevworker]

Proposal

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

Editing a tagged message results in tag disappearing

What is the root cause of that problem?

We call parser.htmlToMarkDown() here when editing message.

In htmlToMarkDown() function, <metion-user> tags will be replaced with user name in following logic.

node_modules/expensify-common/lib/ExpensiMark.js
{
    name: 'userMention',
    regex: /<mention-user accountID="(\d+)" *\/>/gi,
    replacement: (match, g1, offset, string, extras) => {
        const accountToNameMap = extras.accountIdToName;
        if (!accountToNameMap || !accountToNameMap[g1]) {
            return '';
        }

        return `@${extras.accountIdToName(g1)}`;
    },
},

As we can see here, in this function we get user name from account id by using extras.accountIdToName. And accountIdToName is sent as second parameter of htmlToMarkDown() function. But as we did not send accountIdToName as parameter in below part, user mentions are not displayed in edit box. https://github.com/Expensify/App/blob/6129b386a704f42a7eae6af6537364f4ec38c90d/src/pages/home/report/ContextMenu/ContextMenuActions.tsx#L243

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

We can use usePersonalDetails() hook to solve this problem.

1. Add const personalDetails = usePersonalDetails() || CONST.EMPTY_OBJECT; in BaseReportActionContextMenu and send it as parameter to ContextMenuActions in below part. https://github.com/Expensify/App/blob/6129b386a704f42a7eae6af6537364f4ec38c90d/src/pages/home/report/ContextMenu/BaseReportActionContextMenu.tsx#L275-L280

2. Then in ContextMenuActions, we get personalDetails here. Here we have two solutions. One involves node module(expensify-common) changes and another one doesn't need module change. In expensify-common as I mentioned before, we are getting user name from account id with below code.

   {
   name: 'userMention',
   regex: /<mention-user accountID="(\d+)" *\/>/gi,
   replacement: (match, g1, offset, string, extras) => {
       const accountToNameMap = extras.accountIdToName;
       if (!accountToNameMap || !accountToNameMap[g1]) {
           return '';
       }
   
       return `@${extras.accountIdToName(g1)}`;
   },
   }

   It assumes that accountIdToName is object which has accountId as key and userName as value.

   {
   0: "craydev@test.com"
   1: "crayzde1@gmail.com",
   ...
   }

   But the value of usePersonalDetails() object is user info object.

   {
   12602521: {
   accountID: 12602521
   avatar: "https://d2k5nsl2zxldvw.cloudfront.net/images/avatars/default-avatar_14.png"
   displayName: "crazydev@gmail.com"
   firstName: ""
   lastName: ""
   login: "kmichel1030+test1@gmail.com"
   payPalMeAddress: ""
   phoneNumber: ""
   pronouns: ""
   timezone: {automatic: true, selected: 'America/Los_Angeles'}
   validated: false
   }
   }

   If we want to solve this problem without module change, we have to modify value of usePersonalDetails to desired structure. But it will cause some problems like performance issues as size of personalDetails is large.

We can also change this line with below part. And in module we can get user name with function something like accountIdToName(accountId)

Report.saveReportActionDraft(reportID, reportAction, parser.htmlToMarkdown(getActionHtml(reportAction), { 'accountIdToName': (accountId) => {
                        return personalDetails[accountId]?.login;
                    }  }));

[melvin-bot[bot]]

📣 @crazydevworker! 📣 Hey, it seems we don’t have your contributor details yet! You'll only have to do this once, and this is how we'll hire you on Upwork. Please follow these steps:

1. Make sure you've read and understood the contributing guidelines.
2. Get the email address used to login to your Expensify account. If you don't already have an Expensify account, create one here. If you have multiple accounts (e.g. one for testing), please use your main account email.
3. Get the link to your Upwork profile. It's necessary because we only pay via Upwork. You can access it by logging in, and then clicking on your name. It'll look like this. If you don't already have an account, sign up for one here.
4. Copy the format below and paste it in a comment on this issue. Replace the placeholder text with your actual details. Format:

   Contributor details
   Your Expensify account email: <REPLACE EMAIL HERE>
   Upwork Profile Link: <REPLACE LINK HERE>

[parasharrajat]

Thanks for the proposal @crazydevworker. Looks like this issue was a mistake.

Editing comments with mention is being worked upon in https://github.com/Expensify/App/pull/40565 so this is not a issue. Let's close it @johncschuster .

[parasharrajat]

@m-natarajan Please keep an eye on such issues.

[kabeer95]

Hey i just saw your post for the job "Editing a tagged message with emoji results in tag disappearing", i checked out the details on your github issue https://github.com/Expensify/App/issues/42689 and debugged your web app , your exact problem is in the event listner function of the app with socket connection distruption . react DOM works on unreal engine and sometime it dont fully compile the object document instead add it as a json log which eventually leads to the disapearing of the tagged person . its compile time error on the DOM which could be solved in just hours . let's discuss the more technical details over a short call .

i am adding thr test logs here for you to check . { cookies with the SameSite=None; Secure and not Partitioned attributes that operate in cross-site contexts are third-party cookies. In future Chrome versions, reading third-party cookies will be blocked. This behavior protects user data from cross-site tracking. Please refer to the article linked to learn more about preparing your site to avoid potential breakage. 7 cookies 2 requests Learn more: Prepare for phasing out third-party cookies

}

Myself Kabeer Anees Full Stack InfraStructure Engineer , I have 6 years plus experienceas Full stack developer having built large scale data applications with complex business logicsto incorporate cutting edge technologies . At scoro.com I used asynchronous generators in JS to stream 250K products to the S3 bucket in real-time, to generate multiple 250mb+ files via ECS and Fargate.

⚡ Architected Pub/Sub APIs and Serverless Node AWS Lambda functions leveraging AWS SQS and AWS SNS to execute functions on specific triggers and to handle complicated eCommerce flows. Engineered a solution to stream multiple 250mb+ files uploaded daily using AWS ECS on S3.

⚡️ Implemented DevOps CI/CD pipelines using Infrastructure as a Code tooling such as Terraform and AWS CDK. Developed applications on Nest.js and infrastructure involving bash Scripting, IAC, NX monorepos, and external Integrations.

I possess an advanced understanding of the development life cycle, utilizing Test Driven Development (TDD), iterative methodologies, and Agile Scrum practices. I am highly proficient in backend web development with Python and JavaScript.

● Python Backend Development: Skilled in developing web applications using Flask, Django, and FastAPI. ● JavaScript Backend Development: Experienced in building backend services with Node.js. ● Containerized Development: Expert in Docker for containerized development and deployment. ● AWS Cloud Expertise: Four years of extensive experience in AWS cloud development, automating the deployment of numerous web applications across various AWS hosting environments. ● AWS Microservices and Serverless: Proficient in leveraging AWS Serverless technologies to build infinitely scalable applications. Expertise in AWS Lambda, API Gateway, S3, SNS, SQS, AWS Aurora, EventBridge, SES, Pinpoint, and CloudFront. ● High Workload Management: Experienced in running high workload jobs using AWS Batch. ● Workflow Automation: Proficient in using AWS Step Functions for building distributed applications, automating processes, and orchestrating microservices. ● Container Management on AWS: Skilled in running containerized applications on AWS ECS and managing container images with ECR. ● Domain and Certificate Management: Utilizing Route53 and ACM for managing domains and SSL/TLS certificates. ● Scalable Infrastructure: Expertise in setting up EC2 instances for various workloads with automated scaling and traffic management using Auto Scaling Groups and Load Balancers. ● Access Management: Utilizing AWS IAM for granular access control to different AWS services. ● Infrastructure as Code (IaC): Proficient with Serverless Framework, AWS CloudFormation, AWS CDK, and Terraform for infrastructure provisioning and management.

Let's get onto the short call to disucss the technical aspects of the project where i can show you workflow daigram to how this automation will work . i am waiting for your response .

[melvin-bot[bot]]

📣 @kabeer95! 📣 Hey, it seems we don’t have your contributor details yet! You'll only have to do this once, and this is how we'll hire you on Upwork. Please follow these steps:

1. Make sure you've read and understood the contributing guidelines.
2. Get the email address used to login to your Expensify account. If you don't already have an Expensify account, create one here. If you have multiple accounts (e.g. one for testing), please use your main account email.
3. Get the link to your Upwork profile. It's necessary because we only pay via Upwork. You can access it by logging in, and then clicking on your name. It'll look like this. If you don't already have an account, sign up for one here.
4. Copy the format below and paste it in a comment on this issue. Replace the placeholder text with your actual details. Format:

   Contributor details
   Your Expensify account email: <REPLACE EMAIL HERE>
   Upwork Profile Link: <REPLACE LINK HERE>

[parasharrajat]

@johncschuster We can close this issue.

[parasharrajat]

Bump @johncschuster. https://github.com/Expensify/App/issues/42689#issuecomment-2136741154

[melvin-bot[bot]]

@johncschuster, @parasharrajat Whoops! This issue is 2 days overdue. Let's get this updated quick!

[melvin-bot[bot]]

📣 It's been a week! Do we have any satisfactory proposals yet? Do we need to adjust the bounty for this issue? 💸

[johncschuster]

Ah, sorry I missed the ping, @parasharrajat! Ok, I'll go ahead and close it. Thanks!

[kabeer95]

Contributor details Your Expensify account email: spellmensabrina96@gmail.com Upwork Profile Link: https://www.upwork.com/freelancers/~01359d6d1421cb86ce

[melvin-bot[bot]]

✅ Contributor details stored successfully. Thank you for contributing to Expensify!