[HOLD for payment 2023-07-10] [$1000] Web - site preview is still visible after flag as intimidation

[kbecciv]

If you haven’t already, check out our contributing guidelines for onboarding and email [email protected] to request to join our Slack channel!

---

Action Performed:

1. Login as User A
2. Go to any chat
3. Send a site url to User B
4. Login as User B
5. Go to chat from User A
6. And mark the site url message as intimidation
7. Observe the preview

Expected Result:

Site preview should also hide after the message is flagged as intimidation

Actual Result:

Site preview is showing even after flagged as intimidation. Message was hidden but site preview is still visible.

Workaround:

Unknown

Platforms:

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

• Android / native
• Android / Chrome
• iOS / native
• iOS / Safari
• MacOS / Chrome / Safari
• MacOS / Desktop

Version Number: 1.3.27-6

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

Notes/Photos/Videos: Any additional supporting documentation

Screen.Recording.2023-06-14.at.2.48.21.PM.mov

Expensify/Expensify Issue URL:

Issue reported by: @niravkakadiya25

Slack conversation: https://expensify.slack.com/archives/C049HHMV9SM/p1686734496202909

View all open jobs on GitHub

Upwork Automation - Do Not Edit

• Upwork Job URL: https://www.upwork.com/jobs/~011945ec2304a37d15
• Upwork Job ID: 1671846062900129792
• Last Price Increase: 2023-06-22

[melvin-bot]

Triggered auto assignment to @laurenreidexpensify (Bug), see https://stackoverflow.com/c/expensify/questions/14418 for more details.

[melvin-bot]

Bug0 Triage Checklist (Main S/O)

• This "bug" occurs on a supported platform (ensure Platforms in OP are ✅)
• This bug is not a duplicate report (check E/App issues and #expensify-bugs)
  • If it is, comment with a link to the original report, close the issue and add any novel details to the original issue instead
• This bug is reproducible using the reproduction steps in the OP. S/O
  • If the reproduction steps are clear and you're unable to reproduce the bug, check with the reporter and QA first, then close the issue.
  • If the reproduction steps aren't clear and you determine the correct steps, please update the OP.
• This issue is filled out as thoroughly and clearly as possible
  • Pay special attention to the title, results, platforms where the bug occurs, and if the bug happens on staging/production.
• I have reviewed and subscribed to the linked Slack conversation to ensure Slack/Github stay in sync

[AmjedNazzal]

Proposal

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

Web - message was hide but site preview is visible even after flag as intimidation

What is the root cause of that problem?

The problem is that the message is being hidden within the ReportActionItemMessage which doesn't include LinkPreviewer and so even when the message is hidden, LinkPreviewer is left visible because it has no rule to include it in the hidden section of the report item.

App/src/pages/home/report/ReportActionItem.js

Lines 332 to 334 in e6c2704

	{!_.isEmpty(props.action.linkMetadata) && (
	<View style={props.draftMessage ? styles.chatItemReactionsDraftRight : {}}>
	<LinkPreviewer linkMetadata={_.filter(props.action.linkMetadata, (item) => !_.isEmpty(item))} />

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

We need to include a rule to hide the LinkPreviewer when the message is supposed to be hidden.

{!isHidden && !_.isEmpty(props.action.linkMetadata) && (
    ...rest of the code

Result

Screen.Recording.2023-06-20.at.5.56.14.PM.mov

[getusha]

Proposal

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

Website previewer is not hidden after a report is flagged

What is the root cause of that problem?

The rendering of the LinkPreviewer is independent of the ReportActionItemMessage, which will be rendered based on the condition of !props.isHidden. However, the LinkPreviewer does not have this check. Here:

App/src/pages/home/report/ReportActionItem.js

Line 334 in e6c2704

<LinkPreviewer linkMetadata={_.filter(props.action.linkMetadata, (item) => !_.isEmpty(item))} />

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

There are two ways of solving this issue

1. Render LinkPreviewer inside ReportActionItemMessage

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

Line 34 in e6c2704

{!props.isHidden ? (

This will insure the LinkPreviewer is rendered under the condition and also fixes the order of the link and reveal button.

This is what it will look like if we just add the check leaving it the place it is currently/

Moving below/inside ReportActionItemMessage

2. Render LinkPreviewer right below ReportActionItemMessage with !props.isHidden condition.

Both solution will make sure, the LinkPreviewer will be hidden after the flag and while editing, keeping the right order.

What alternative solutions did you explore? (Optional)

[melvin-bot]

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

[melvin-bot]

Current assignee @laurenreidexpensify is eligible for the External assigner, not assigning anyone new.

[melvin-bot]

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

[laurenreidexpensify]

@eVoloshchak do you think it's the same as this? #21191

[melvin-bot]

📣 @popcorn-del! 📣
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. 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.
2. 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.
3. 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>

[laurenreidexpensify]

@eVoloshchak what do you think about the proposals above?

[eVoloshchak]

I think we should proceed with @AmjedNazzal's proposal here
The fix is pretty straightforward, this is just a missed case from #17288

🎀👀🎀 C+ reviewed!
cc: @laurenreidexpensify

[getusha]

@eVoloshchak any comment in my proposal? I have improved the UI it looks weird when the preview is below the hide/show button

[melvin-bot]

📣 @AmjedNazzal You have been assigned to this job by @laurenreidexpensify!
Please apply to this job in Upwork and leave a comment on the Github issue letting us know when we can expect a PR to be ready for review 🧑‍💻
Keep in mind: Code of Conduct | Contributing 📖

[AmjedNazzal]

Thank you! applied on upwork and PR will be ready within a couple of hours.

[AmjedNazzal]

@eVoloshchak PR ready for review.

[melvin-bot]

Triggered auto assignment to @pecanoro (Engineering), see https://stackoverflow.com/c/expensify/questions/4319 for more details.

[eVoloshchak]

any comment in my proposal? I have improved the UI it looks weird when the preview is below the hide/show button

@getusha, while I agree the improved UI is nice, the main fix for this issue was proposed by @AmjedNazzal first. While improvements are always welcome of course, the difference between proposals should be important, meaningful or considerable (source)

[getusha]

@getusha, while I agree the improved UI is nice, the main fix for this issue was proposed by @AmjedNazzal first. While improvements are always welcome of course, the difference between proposals should be important, meaningful or considerable (source)

Thanks for your response, I believe the difference is considerable that's why i proposed it after @AmjedNazzal's proposal, i proposed to move it inside ReportActionItemMessage which doesn't require the condition, and if the improvement is needed isn't the change considerable?

[melvin-bot]

🎯 ⚡️ Woah @eVoloshchak / @AmjedNazzal, great job pushing this forwards! ⚡️

The pull request got merged within 3 working days of assignment, so this job is eligible for a 50% #urgency bonus 🎉

• when @AmjedNazzal got assigned: 2023-06-27 07:34:45 Z
• when the PR got merged: 2023-06-29 21:24:59 UTC

On to the next one 🚀

[eVoloshchak]

and if the improvement is needed isn't the change considerable?

@getusha, we didn't implement the UI changes, so this change wasn't needed. I'd consider that an improvement, while this issue is definitely a bug

[melvin-bot]

Reviewing label has been removed, please complete the "BugZero Checklist".

[melvin-bot]

The solution for this issue has been 🚀 deployed to production 🚀 in version 1.3.35-5 and is now subject to a 7-day regression period 📆. Here is the list of pull requests that resolve this issue:

• Fix - Web - site preview is still visible after flag as intimidation #21195 #21663

If no regressions arise, payment will be issued on 2023-07-10. 🎊

After the hold period is over and BZ checklist items are completed, please complete any of the applicable payments for this issue, and check them off once done.

• External issue reporter
• Contributor that fixed the issue
• Contributor+ that helped on the issue and/or PR

As a reminder, here are the bonuses/penalties that should be applied for any External issue:

• Merged PR within 3 business days of assignment - 50% bonus
• Merged PR more than 9 business days after assignment - 50% penalty

[melvin-bot]

BugZero Checklist: The PR fixing this issue has been merged! The following checklist (instructions) will need to be completed before the issue can be closed:

• [@eVoloshchak] The PR that introduced the bug has been identified. Link to the PR:
• [@eVoloshchak] The offending PR has been commented on, pointing out the bug it caused and why, so the author and reviewers can learn from the mistake. Link to comment:
• [@eVoloshchak] A discussion in #expensify-bugs has been started about whether any other steps should be taken (e.g. updating the PR review checklist) in order to catch this type of bug sooner. Link to discussion:
• [@eVoloshchak] Determine if we should create a regression test for this bug.
• [@eVoloshchak] If we decide to create a regression test for the bug, please propose the regression test steps to ensure the same bug will not reach production again.
• [@laurenreidexpensify] Link the GH issue for creating/updating the regression test once above steps have been agreed upon:

[laurenreidexpensify]

@AmjedNazzal and @niravkakadiya25 have been paid in Upwork 👍

@eVoloshchak pls accept the contract and let me know steps above re regression testing so we can issue payment and close this one out, thanks!

[AmjedNazzal]

Thank you!

[eVoloshchak]

• The PR that introduced the bug has been identified. Link to the PR: Link Previews #17288

• The offending PR has been commented on, pointing out the bug it caused and why, so the author and reviewers can learn from the mistake. Link to comment: https://github.com/Expensify/App/pull/17288/files#r1258620931

• A discussion in #expensify-bugs has been started about whether any other steps should be taken (e.g. updating the PR review checklist) in order to catch this type of bug sooner. Link to discussion: I don't think there's much we can change besides adding a regression test

• Determine if we should create a regression test for this bug
  Is it easy to test for this bug? No
  Is the bug related to an important user flow? Yes
  Is it an impactful bug? Yes

[eVoloshchak]

Regression Test Proposal

1. Login as User A
2. Go to any chat
3. Send a site URL to User B
4. Login as User B
5. Go to chat from User A
6. Mark the site URL message as intimidation
7. Verify that the site preview is hidden

Do we agree 👍 or 👎

[eVoloshchak]

@laurenreidexpensify, I've requested the payment for this via NewDot

[laurenreidexpensify]

@anmurali am assigning you for @eVoloshchak's C+ payment

[popcorn-del]

ok

…

On Tue, 11 Jul 2023 at 00:54, laurenreidexpensify ***@***.***> wrote: @anmurali <https://github.com/anmurali> am assigning you for @eVoloshchak <https://github.com/eVoloshchak>'s C+ payment — Reply to this email directly, view it on GitHub <#21195 (comment)>, or unsubscribe <https://github.com/notifications/unsubscribe-auth/BACOQIEW5BGDT25NTLNYROTXPUBEZANCNFSM6AAAAAAZOUXL3Y> . You are receiving this because you were mentioned.Message ID: ***@***.***>