Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

[HOLD for payment 2023-05-03] [$1000] Long pressing any of the app download link on mweb Safari does not open the copy to clipboard menu #16946

Closed
2 of 6 tasks
kavimuru opened this issue Apr 4, 2023 · 87 comments
Assignees
Labels
Awaiting Payment Auto-added when associated PR is deployed to production Bug Something is broken. Auto assigns a BugZero manager. Daily KSv2 External Added to denote the issue can be worked on by a contributor

Comments

@kavimuru
Copy link

kavimuru commented Apr 4, 2023

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 to any account
  2. Open the App download links in the About section.
  3. Long press on any of the link.

Expected result:

Copy to clipboard menu item should show up

Actual result:

Copy to clipboard menu item does not show up

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.2.94-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:
Email or phone of affected tester (no customers):
Logs: https://stackoverflow.com/c/expensify/questions/4856
Notes/Photos/Videos: Any additional supporting documentation

RPReplay_Final1680518101.MP4
SGVA8663.1.MP4

Expensify/Expensify Issue URL:
Issue reported by: @mallenexpensify
Slack conversation: https://expensify.slack.com/archives/C049HHMV9SM/p1680564052842509

View all open jobs on GitHub

Upwork Automation - Do Not Edit
  • Upwork Job URL: https://www.upwork.com/jobs/~014fb329f5e82a7436
  • Upwork Job ID: 1643618667751460864
  • Last Price Increase: 2023-04-05
@kavimuru kavimuru added Daily KSv2 Bug Something is broken. Auto assigns a BugZero manager. labels Apr 4, 2023
@MelvinBot
Copy link

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

@MelvinBot
Copy link

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

@koko57
Copy link
Contributor

koko57 commented Apr 5, 2023

Hi I'm Agata from Callstack - expert contributor group - maybe we could help with this one?

@mountiny mountiny added the External Added to denote the issue can be worked on by a contributor label Apr 5, 2023
@melvin-bot melvin-bot bot changed the title Long pressing any of the app download link on mweb Safari does not open the copy to clipboard menu [$1000] Long pressing any of the app download link on mweb Safari does not open the copy to clipboard menu Apr 5, 2023
@MelvinBot
Copy link

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

@MelvinBot
Copy link

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

@MelvinBot
Copy link

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

@melvin-bot melvin-bot bot added the Help Wanted Apply this label when an issue is open to proposals by contributors label Apr 5, 2023
@MelvinBot
Copy link

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

@akinwale
Copy link
Contributor

akinwale commented Apr 5, 2023

Proposal

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

When the app download links are displayed, long-pressing one of the menu items should display the "Copy to clipboard" menu item expected in a custom context menu, but the menu item text is being highlighted instead.

What is the root cause of that problem?

The root component of the custom MenuItem component is a React Native Pressable, which is capturing the onPressIn and onPressOut events, causing the event handlers for the similarly named events in the parent PressableWithSecondaryInteraction component to be ignored.

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

After some testing, it appears that MenuItem should be refactored to make use of a PressableWithSecondaryInteraction component as its root component. A PressableWithSecondaryInteraction is already based on the Pressable component, so this shouldn't be a breaking change.

However, this would require refactoring PressableWithSecondaryInteraction to set the style prop to make use of a style passed as a property if the inline prop is false, in order to maintain compatibility with other components or pages that are already making use of the PressableWithSecondaryInteraction component.

style={this.props.inline && styles.dInline}

The style property would be refactored like so:
style={this.props.inline ? styles.dInline : this.props.style}

MenuItem would also be refactored to accept the following props: onPressIn, onPressOut and onSecondaryInteraction. Additionally, all MenuItems which are links will have the Copy to Clipboard behaviour implemented.

What alternative solutions did you explore?

Attempted to make use of the stopPropagation() and event.nativeEvent.stopImmediatePropagation() methods for the event parameter with the onPressIn and onPressOut event handlers, but these calls did not work.

@ImBIOS
Copy link

ImBIOS commented Apr 6, 2023

Proposal

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

When long-pressing on a menu item in the app download links, the custom context menu is not being displayed correctly. Instead of showing a "Copy to clipboard" option, the menu item text is being highlighted.

What is the root cause of that problem?

The app download links are part of an existing codebase that uses React Native. The MenuItem component, which is used to display the menu items, has a root component of Pressable, which is causing the issue.

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

Proposed solution

Refactor the MenuItem component to use the PressableWithSecondaryInteraction component as its root component. The PressableWithSecondaryInteraction component is based on the Pressable component, but it also includes support for secondary interactions like long presses. By using this component as the root, we can ensure that the custom context menu is displayed correctly when long-pressing on a menu item.

Benefits

Refactoring the MenuItem component to use PressableWithSecondaryInteraction will provide the following benefits:

The custom context menu will be displayed correctly when long-pressing on a menu item.
The MenuItem component will be more consistent with other components in the app that use the PressableWithSecondaryInteraction component.
The solution should be relatively straightforward to implement and test.
Implementation steps
Modify the MenuItem component to use the PressableWithSecondaryInteraction component as its root component.
Add the onPressIn, onPressOut, and onSecondaryInteraction props to the MenuItem component.
Update the style prop in PressableWithSecondaryInteraction to make use of the inline prop if it is provided, or use the style prop if the inline is false.
Test the MenuItem component to ensure that the custom context menu is displayed correctly when long-pressing on a menu item.

Potential drawbacks

The proposed solution should not cause any significant performance issues or require a significant amount of development time. However, there may be some minor changes required in other parts of the app that use the MenuItem component, as they may need to be updated to include the new onPressIn, onPressOut, and onSecondaryInteraction props.

Overall, the proposed solution provides a straightforward and effective way to address the issue of the custom context menu not being displayed correctly.

@mountiny
Copy link
Contributor

mountiny commented Apr 6, 2023

@eVoloshchak please review the proposals once you get time!

@eVoloshchak
Copy link
Contributor

@mountiny, just to be clear, are we expecting all menu items containing links to have "Copy to clipboard" menu item?

Simulator Screen Shot - iPhone 13 - 2023-04-06 at 20 32 34
Simulator Screen Shot - iPhone 13 - 2023-04-06 at 20 32 28

In this case Help, View the code and View open jobs. Or should it be added exclusively to the items on App download links page?

@huzaifa-99
Copy link
Contributor

Proposal

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

We want to show the context-menu/popover when there is a long press on any link in the app download links page. This does not work in iOS Safari.

What is the root cause of that problem?

Each link in the app download links page has nested Pressable components (both the MenuItem and PressableWithSecondaryInteraction implement Pressable). The onPress event does not propagate from the MenuItem pressable to PressableWithSecondaryInteraction pressable in iOS Safari. It does propagate in mWeb Chrome.

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

We want the onPress of parent Pressable (in PressableWithSecondaryInteraction) to work first and then the onPress of child Pressable (in MenuItem).

This can be done by adding

onStartShouldSetResponderCapture={() => true} // this could be done via prop

in PressableWithSecondaryInteraction here.

Since now the onPress of PressableWithSecondaryInteraction works first, the button hover/press styles from MenuItem are not applied on initial long press. We need to apply these styles here

style={({hovered, pressed}) => ([
    StyleUtils.getButtonBackgroundColorStyle(getButtonState(hovered, pressed, props.success, props.disabled, props.interactive), true),
])}
iOS Demo
Screen.Recording.2023-04-07.at.4.26.15.AM.mov

What alternative solutions did you explore? (Optional)

As others have pointed out, we could remove the PressableWithSecondaryInteraction here and add proper event listeners to MenuItem to handle the press interaction.

@melvin-bot melvin-bot bot added the Overdue label Apr 10, 2023
@MelvinBot
Copy link

@eVoloshchak, @abekkala, @mountiny Whoops! This issue is 2 days overdue. Let's get this updated quick!

1 similar comment
@MelvinBot
Copy link

@eVoloshchak, @abekkala, @mountiny Whoops! This issue is 2 days overdue. Let's get this updated quick!

@eVoloshchak
Copy link
Contributor

Not overdue, reviewing proposals today

@melvin-bot melvin-bot bot removed the Overdue label Apr 10, 2023
@b1tjoy
Copy link
Contributor

b1tjoy commented Apr 10, 2023

Proposal

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

We want to show the context-menu/popover when long pressing on link in the app download links page. This does not work in iOS Safari.

What is the root cause of that problem?

This is a regression of PR #12987.

In that PR, we replace LongPressGestureHandler with Pressable in PressableWithSecondaryInteraction. Since React Native Gesture Handler is independent of React Native's gesture responder system, the outer PressableWithSecondaryInteraction component can catch and handle long press event when we long press on the link before that PR.

After we replace LongPressGestureHandler with Pressable in PressableWithSecondaryInteraction, there are nested Pressable in component AppDownloadLinks, the inner Pressable catch press event and the outer Pressable can't be marked as press start when we long press the link, so long press event handler of the outer Pressable won't work.

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

We have fixed similar issue in PR #12987 for component IOUPreview here. Make the inner MenuItem handle onPressIn, onPressOut and onLongPress event will fix current issue.

Add prop types definition here:

onPressIn: PropTypes.func,
onPressOut: PropTypes.func,
onLongPress: PropTypes.func,

Add default props here:

onPressIn: () => {},
onPressOut: () => {},
onLongPress: () => {},

Add onPressIn, onPressOut, onLongPress handler for Pressable in MenuItem here:

onPressIn={props.onPressIn}
onPressOut={props.onPressOut}
onLongPress={props.onLongPress}

Pass handler function to MenuItem in AppDownloadLinks here:

onPressIn={() => props.isSmallScreenWidth && DeviceCapabilities.canUseTouchScreen() && ControlSelection.block()}
onPressOut={() => ControlSelection.unblock()}
onLongPress={e => showPopover(e, item.link)}

Why we need to add onPressIn and onPressout handler for Pressable in MenuItem? If we don't do that, the link text become selected when we long press link text on Android Chrome, and the background become blue when we long press link text on iOS Safari.

Link text become selected when we long press link text on Android Chrome
Android-Chrome-20230410-215822.mp4

Screenshots/Videos

Mobile Web - Safari
iOS-Safari-20230410-214443.mp4
Mobile Web - Chrome
Android-Chrome-20230410-220429.mp4

@MelvinBot
Copy link

📣 @b1tjoy! 📣

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.

Screen Shot 2022-11-16 at 4 42 54 PM

Format:

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

@b1tjoy

This comment was marked as resolved.

@MelvinBot
Copy link

MelvinBot commented Apr 26, 2023

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.
  • [@abekkala] Link the GH issue for creating/updating the regression test once above steps have been agreed upon: N/A

@abekkala
Copy link
Contributor

@mountiny I'm not sure why the title updated the payment date twice but didn't replace the date.
Can the 4-27 date be removed and payout is actually 05-03 now?

@mountiny
Copy link
Contributor

I'm not sure why the title updated the payment date twice but didn't replace the date. Can the 4-27 date be removed and payout is actually 05-03 now?

@abekkala correct always consider the later one unless said otherwise

But the code is dumb and adds the new hold without looking if there is already one 😄

@melvin-bot melvin-bot bot added Daily KSv2 and removed Weekly KSv2 labels Apr 27, 2023
@abekkala abekkala changed the title [HOLD for payment 2023-05-03] [HOLD for payment 2023-04-27] [$1000] Long pressing any of the app download link on mweb Safari does not open the copy to clipboard menu [HOLD for payment 2023-05-03] [$1000] Long pressing any of the app download link on mweb Safari does not open the copy to clipboard menu Apr 27, 2023
@melvin-bot melvin-bot bot added the Overdue label May 1, 2023
@eVoloshchak
Copy link
Contributor

Not overdue, will fill out first 3 items of the BZ checklist today

@melvin-bot melvin-bot bot removed the Overdue label May 1, 2023
@mountiny
Copy link
Contributor

mountiny commented May 2, 2023

@eVoloshchak Bump

@eVoloshchak
Copy link
Contributor

  • The PR that introduced the bug has been identified. Link to the PR:
    n/a, this was missed during the initial implementation. As @b1tjoy said here,
    This was caused by Fix context menu when long press on url and email link #12987 for AboutPage specifically, but we ended up adding link context menus to all of the menu items on all pages, which was missed during the initial implementation

  • 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: n/a

  • 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: This should be caught during the PR review, I think there isn't much more we can do. We can add a checklist item All of the menu items should have a link context menu, but that seems obvious.

  • Determine if we should create a regression test for this bug.

    Is it easy to test for this bug?

    Yes

    Is the bug related to an important user flow? (For example, adding a bank account)

    No

    Is it an impactful bug?

    No

    This is a non-breaking bug, that isn't affecting user flow. I don't think the regression test is needed here. It would mean testing that every menu item that has a link also has a context menu with the said link. A simple 1 step test, but for every menu item in the app.

@abekkala
Copy link
Contributor

abekkala commented May 3, 2023

@eVoloshchak and @akinwale
You've each been paid and contract ended in Upwork 🎉
Thank you!

@abekkala abekkala closed this as completed May 3, 2023
@eVoloshchak
Copy link
Contributor

eVoloshchak commented May 3, 2023

@abekkala, I think the amount supposed to be $500 instead of $1500
This has caused a regression

@eVoloshchak
Copy link
Contributor

@abekkala, bump on the above

@mountiny
Copy link
Contributor

Not sure whats the process on this one, maybe we can just cut the price down on some future payments

@mountiny mountiny reopened this May 14, 2023
@abekkala
Copy link
Contributor

hmm, yeah, I can't retract a payment.

Each regression reduces the pay amount for C+ by 50% (only C+ gets reduced pay). Additionally, no efficiency bonus is paid for merging quickly if there are any regressions.

So yes, you're correct your payment for this should have been only $500 vs $1500.
A future job of yours will need to be reduced by $1000 to make up for the overpayment here.

@abekkala
Copy link
Contributor

@eVoloshchak I'm actually the payer on this GH #18006
And I can reduce your pay on that one by $1000 to make up for the overpayment here.

@mountiny
Copy link
Contributor

@akinwale can you link some issue where you active that we could reduce the payment for to compensate for this please?

@akinwale
Copy link
Contributor

@akinwale can you link some issue where you active that we could reduce the payment for to compensate for this please?

I thought the decision here was to not cut payment (#16946 (comment)), since it was an edge case that wasn't anticipated. If that's changed, I'm currently active on these issues:

#18210
#18482

@mountiny
Copy link
Contributor

Oh damn yeah, was there no payment on the follow up issues/regression?

@akinwale
Copy link
Contributor

Oh damn yeah, was there no payment on the follow up issues/regression?

No, there wasn't. @eVoloshchak did the review for the follow up issue/regression as well (#17656 (comment)). Note that this also covered a new issue that was discovered in a different commit.

@mountiny
Copy link
Contributor

@abekkala ok so we are all good here, thanks for raising this. With millions of issues its easy to get lost in this

@abekkala
Copy link
Contributor

@mountiny Only the C+ gets a reduced payment in the case of a regression. (in this case it would have meant a reduction for evoloshchak only - not akinwale)
Are you saying that there actually isn't a need for a reduction in payment due to this being an edge case?

I have a payment coming up for evoloshchak (on a different GH) that I was going to reduce in order to even out this GH. Is that not necessary and I can just do a normal full pay out without reducing due to this GH regressIon?

@mountiny
Copy link
Contributor

Yes full pay out!

Oh I thought its both who get reduced payment.

@melvin-bot melvin-bot bot added the Overdue label May 22, 2023
@mountiny
Copy link
Contributor

I think everything was done and paid here so closing, thanks for all the help, please comment if otherwise

@melvin-bot melvin-bot bot removed the Overdue label May 22, 2023
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
Awaiting Payment Auto-added when associated PR is deployed to production Bug Something is broken. Auto assigns a BugZero manager. Daily KSv2 External Added to denote the issue can be worked on by a contributor
Projects
None yet
Development

No branches or pull requests

10 participants