[HOLD for payment 2023-05-22] [$1000] Copy to clipboard has inconsistent behavior in the (Reimburse expenses and contact method page) VS (the profile's details page)

[kavimuru]

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. Go to mweb chrome
2. Go to any workspaces
3. Go to reimburse expenses and try to click the copy icon besides email multiple times. Notice that the copy icon appears in between. But follow the same process by going to any chat and by clicking on any user's profile page
4. Click on the copy icon multiple times and notice that in the user's email copy icon, only green check marks appears. Thus, it is inconsistent with the reimburse page where clicking on multiple times on copy icon doesn't display green mark continuously.
5. Even the contact method page behaves the same like Reimburse page

Expected Result:

Copying to clipboard should behave in the same manner on Reimburse expenses and contact method page like that of the profile's details page

Actual Result:

Copying to clipboard behaves differently in reimburse expenses and contact method page unlike the profile's details page

Workaround:

Can the user still use Expensify without this being fixed? Have you informed them of the workaround?

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

copy.mp4

Expensify/Expensify Issue URL:
Issue reported by: @priya-zha
Slack conversation: https://expensify.slack.com/archives/C049HHMV9SM/p1681978408152299

View all open jobs on GitHub

Upwork Automation - Do Not Edit

• Upwork Job URL: https://www.upwork.com/jobs/~01a8489353b4a203b3
• Upwork Job ID: 1651171903300116480
• Last Price Increase: 2023-05-03

[MelvinBot]

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

[MelvinBot]

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

[flaviadefaria]

Discussing this in Slack before applying the label.

[MelvinBot]

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

[MelvinBot]

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

[MelvinBot]

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

[MelvinBot]

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

[MelvinBot]

Triggered auto assignment to @danieldoglas (External), see https://stackoverflow.com/c/expensify/questions/7972 for more details.

[flaviadefaria]

Added the external label.

[situchan]

Proposal

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

Copy to clipboard has inconsistent behavior between Contacts page and Profile detail page

What is the root cause of that problem?

In Contacts page, CopyTextToClipboard component is used. Here, we clear checkmark after 2000ms timeout.
But timeout is not cleared when icon is clicked so clearing checkmark still applies.

In Profile detail page, ContextMenuItem component is used which uses withDelayToggleButtonState HOC. Here, we clear checkmark after 1800ms timeout and timeout is cleared whenever click icon again. So clearing checkmark timer starts again.

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

Extend withDelayToggleButtonState HOC to support functionality of preventing restart interval before 1800ms timeout.
So add new param like canResetBeforeDelay to toggleDelayButtonState() function with default value to true.
If true, it's the current behavior as is.
If false, don't call clearTimeout and early return.
And to prevent redundant check, set this.resetButtonStateCompleteTimer to null on setTimeout callback.

• In ContextMenuItem, call props.toggleDelayButtonState with 2nd param set to false
• In CopyTextToClipboard, deprecate showCheckmark state value, and wrap with withDelayToggleButtonState to get isDelayButtonStateComplete prop. And instead of old setTimeout code, call props.toggleDelayButtonState(true, false)

Improvement: for consistency, we can deprecate 2nd param of toggleDelayButtonState in withDelayToggleButtonState and remove clearTimeout logic to prevent restarting timer whenever clicked.

[abdulrahuman5196]

Proposal

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

Copy to clipboard is in-consistent between Reimburse page and profile detail page.

What is the root cause of that problem?

In Reimburse page we use CopyTextToClipboard component which set 2000ms timeout but doesn't reset the timeout once user clicks again. So the old timeouts reset the icon while continously pressing.
https://github.com/Expensify/App/blob/main/src/components/CopyTextToClipboard.js#L47

In profile detail page we are using CommunicationLink Component which uses withDelayToggleButtonState component at last to handle the timeout logics. This uses 1800ms timeout and also handles clearing of timeout after user presses again.
https://github.com/Expensify/App/blob/main/src/components/withDelayToggleButtonState.js#L35

This is why we have inconsistency.

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

1. We can remove custom timeout handling in CopyTextToClipboard and start using withDelayToggleButtonState in CopyTextToClipboard as well. Suggesting to use withDelayToggleButtonState since it seems to work good and handle more cases and it seems right for the purpose. This way we can avoid duplicate code and the overhead of maintaining consistency. Similar implementation of ContextMenuItem using withDelayToggleButtonState https://github.com/Expensify/App/blob/main/src/components/ContextMenuItem.js
2. In withDelayToggleButtonState toggleDelayButtonState function, if 'isDelayButtonStateComplete' state value is already true, do an early exit, since we don't want to affect existing timeouts. This way all existing components using withDelayToggleButtonState will have the common behaviour in terms of delayed button actions.
   https://github.com/Expensify/App/blob/main/src/components/withDelayToggleButtonState.js#L36

For 2) action item the Current components usage is:

1. Details page copy to clipboard(CommunicationLink)
2. Attachment download button(HeaderWithCloseButton)
3. Download button in wallet statement page(Not sure if its active page though)

We can unify all delayable actions to work like -> Take action "copy to clipboard" or "download" -> action blocked -> Wait 1800ms -> action unblocked -> take action -> action blocked -> wait 1800ms -> action unblocked

What alternative solutions did you explore? (Optional)

We can also create helper classes to have the common timeout handling code and icon showing logic and make the components use it.

We can also reset the timer in CopyTextToClipboard component when user clicks again.

We can remove the reseting of timer logic in withDelayToggleButtonState component and make it in sync with the CopyTextToClipboard logic.

[Santhosh-Sellavel]

@flaviadefaria I'm unassigning due to low bandwidth, can you assign a new C+ here, by reapplying external here, thanks!

cc: @danieldoglas

[MelvinBot]

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

[MelvinBot]

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

[melvin-bot]

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

[arielgreen]

@priya-zha @sobitneupane @situchan please apply to the Upwork posting so that I can issue payment

[priya-zha]

@arielgreen Submitted the proposal.Thanks

[sobitneupane]

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:

It is an inconsistency issue not really a bug. So, I don't think we can point a specific PR or issue as a culprit.

[sobitneupane]

Regression Test Proposal:

1. Login any account
2. Go to Settings > Workspaces > any workspace > Reimburse expenses
3. Click copy icon many times quickly
4. Verify that copy icon changed to copied and keep copied icon with no impact on pressing for sometime (1800ms).
5. Verify that after sometime (1800ms), it resets to copy icon and able to press again
6. Press icon again and verify Steps 4. and 5.
7. Go to any chat and click user profile avatar in any chat message
8. Repeat Steps 3-6

Do we agree 👍 or 👎

[arielgreen]

Calculating payments:

• 5/4 issue assigned to @situchan
• 5/9 PR merged

3 business days = 50% bonus

$500 to @priya-zha
$1000 + 50% = $1500 to @situchan
$1000 + 50% = $1500 to @sobitneupane

[arielgreen]

Offers sent, ready for payment once accepted.

[arielgreen]

I am OOO tomorrow, so reassigning

[melvin-bot]

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

[arielgreen]

Also reassigning Flavia and I for credit.

[laurenreidexpensify]

Have issued all payments in Upwork. Please reopen if I've missed anything. thanks