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-07-05][$1000] copy to clipboard tooltip is missing in Contact methods #21074

Closed
1 of 6 tasks
kavimuru opened this issue Jun 19, 2023 · 53 comments
Closed
1 of 6 tasks
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 Jun 19, 2023

If you haven’t already, check out our contributing guidelines for onboarding and email contributors@expensify.com to request to join our Slack channel!


Action Performed:

  1. go to Settings > Profile > Contact methods
  2. hover on clipboard icon

Expected Result:

should show copy to clipboard tooltip

Actual Result:

does not show copy to clipboard tooltip

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

Screen.Recording.2023-06-12.at.4.33.43.PM.mov
Recording.1029.mp4

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

View all open jobs on GitHub

Upwork Automation - Do Not Edit
  • Upwork Job URL: https://www.upwork.com/jobs/~014363b93cc961b40f
  • Upwork Job ID: 1671204270043312128
  • Last Price Increase: 2023-06-20
@kavimuru kavimuru added Daily KSv2 Bug Something is broken. Auto assigns a BugZero manager. labels Jun 19, 2023
@melvin-bot
Copy link

melvin-bot bot commented Jun 19, 2023

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

@melvin-bot
Copy link

melvin-bot bot commented Jun 19, 2023

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

@chiragxarora
Copy link
Contributor

chiragxarora commented Jun 19, 2023

Proposal

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

copy to clipboard tooltip is missing in Contact methods page when we hover over the copy icon next to the email address

What is the root cause of that problem?

Root cause of the problem is the changes happened in past with the CopyTextToClipboard component.

<PressableWithDelayToggle
text={props.text}
tooltipText={props.translate('reportActionContextMenu.copyToClipboard')}
tooltipTextChecked={props.translate('reportActionContextMenu.copied')}
icon={Expensicons.Copy}
textStyles={props.textStyles}
onPress={copyToClipboard}
/>
);
};

Upon introduction of PressableWithDelayToggle component in the pr here, tooltips stopped working because in this component we are adding <Text /> along with RN's wrapper <Pressable /> as children to the <Tooltip/> component. This makes the tooltip non functional as it does not expect <Text/> inside it.

<Tooltip
containerStyles={[styles.flexRow]}
text={props.isDelayButtonStateComplete ? props.tooltipTextChecked : props.tooltipText}
>
<>
<Text
suppressHighlighting
style={[styles.mr1, ...props.textStyles]}
>
{props.isDelayButtonStateComplete && props.textChecked ? props.textChecked : props.text}
</Text>
<Pressable
ref={props.innerRef}
focusable
accessibilityLabel={props.isDelayButtonStateComplete ? props.tooltipTextChecked : props.tooltipText}
onPress={updatePressState}
>
{({hovered, pressed}) => (
<>
{props.icon && (
<Icon
src={props.isDelayButtonStateComplete ? props.iconChecked : props.icon}
fill={StyleUtils.getIconFillColor(getButtonState(hovered, pressed, props.isDelayButtonStateComplete))}
style={props.iconStyles}
width={variables.iconSizeSmall}
height={variables.iconSizeSmall}
/>
)}
</>
)}
</Pressable>
</>
</Tooltip>

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

We need to update the PressableWithDelayToggle component by taking out the <Text/> out of the <Tooltip/> component. Tooltip will only have one child, the <Pressable/> wrapper which will make the tooltip functional again.

<PressableView
            style={[styles.flexRow, ...props.styles]}
            onPress={updatePressState}
        >
            <>
                <Text
                    suppressHighlighting
                    style={[styles.mr1, ...props.textStyles]}
                >
                    {props.isDelayButtonStateComplete && props.textChecked ? props.textChecked : props.text}
                </Text>
                <Tooltip
                    containerStyles={[styles.flexRow]}
                    text={props.isDelayButtonStateComplete ? props.tooltipTextChecked : props.tooltipText}
                >
                    <Pressable
                        ref={props.innerRef}
                        focusable
                        accessibilityLabel={props.isDelayButtonStateComplete ? props.tooltipTextChecked : props.tooltipText}
                        onPress={updatePressState}
                    >
                        {({hovered, pressed}) => (
                            <>
                                {props.icon && (
                                    <Icon
                                        src={props.isDelayButtonStateComplete ? props.iconChecked : props.icon}
                                        fill={StyleUtils.getIconFillColor(getButtonState(hovered, pressed, props.isDelayButtonStateComplete))}
                                        style={props.iconStyles}
                                        width={variables.iconSizeSmall}
                                        height={variables.iconSizeSmall}
                                    />
                                )}
                            </>
                        )}
                    </Pressable>
                </Tooltip>
            </>
        </PressableView>

NOTE: adding the below information later, and no other proposal has mentioned this till the time of edit

EDIT: The above change is consistent with the prior version of CopyTextToClipboard which used to be there before we introduced <PressableWithDelayToggle/>

source:

return (
<Text
onPress={copyToClipboard}
style={[styles.flexRow, styles.cursorPointer]}
suppressHighlighting
>
<Text style={textStyles}>{`${text} `}</Text>
<Tooltip text={translate(`reportActionContextMenu.${isDelayButtonStateComplete ? 'copied' : 'copyToClipboard'}`)}>
<Pressable onPress={copyToClipboard}>
{({ hovered, pressed }) => (
<Icon
src={isDelayButtonStateComplete ? Expensicons.Checkmark : Expensicons.Copy}
fill={StyleUtils.getIconFillColor(getButtonState(hovered, pressed, isDelayButtonStateComplete))}
width={variables.iconSizeSmall}
height={variables.iconSizeSmall}
inline
/>
)}
</Pressable>
</Tooltip>
</Text>
);

Results
bandicam.2023-06-12.19-48-20-113.mp4

What alternative solutions did you explore? (Optional)

None

@bernhardoj
Copy link
Contributor

Proposal

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

Tooltip doesn't show in the contact method copy text to clipboard.

What is the root cause of that problem?

CopyTextToClipboard uses PressableWithDelayToggle. In PressableWithDelayToggle, we have a Tooltip that wraps a React.Fragment.

<PressableView
style={[styles.flexRow, ...props.styles]}
onPress={updatePressState}
>
<Tooltip
containerStyles={[styles.flexRow]}
text={props.isDelayButtonStateComplete ? props.tooltipTextChecked : props.tooltipText}
>
<>
<Text
suppressHighlighting
style={props.textStyles}
>
{props.isDelayButtonStateComplete && props.textChecked ? props.textChecked : props.text}
&nbsp;
</Text>
<Pressable
ref={props.innerRef}
focusable
accessibilityLabel={props.isDelayButtonStateComplete ? props.tooltipTextChecked : props.tooltipText}
onPress={updatePressState}
>
{({hovered, pressed}) => (
<>
{props.icon && (
<Icon
src={props.isDelayButtonStateComplete ? props.iconChecked : props.icon}
fill={StyleUtils.getIconFillColor(getButtonState(hovered, pressed, props.isDelayButtonStateComplete))}
style={props.iconStyles}
width={variables.iconSizeSmall}
height={variables.iconSizeSmall}
/>
)}
</>
)}
</Pressable>
</>
</Tooltip>
</PressableView>

Why doesn't it work? Tooltip internally uses Hoverable. To make Hoverable work, the children should be able to accept both the onMouseEnter and onMouseLeave props, which is not the case for React.Fragment. React.Fragment only accepts key props.

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

  1. Remove the fragment
  2. Switch Tooltip and PressableView position
  3. Additionally, remove containerStyles from Tooltip

@zanyrenney
Copy link
Contributor

Yep fair, i can reproduce and this seems like a sensible addition to contact methods. though should it only apply to email addresses or also to phone numbers seeing as both will be available as contact methods?

@zanyrenney zanyrenney added the External Added to denote the issue can be worked on by a contributor label Jun 20, 2023
@melvin-bot melvin-bot bot changed the title copy to clipboard tooltip is missing in Contact methods [$1000] copy to clipboard tooltip is missing in Contact methods Jun 20, 2023
@melvin-bot
Copy link

melvin-bot bot commented Jun 20, 2023

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

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

melvin-bot bot commented Jun 20, 2023

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

@melvin-bot
Copy link

melvin-bot bot commented Jun 20, 2023

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

@kevinleerongordon
Copy link

Here is my suggestion:

To fix the issue where the copy to clipboard tooltip is not displaying, you can try the following steps:

Verify Tooltip Configuration: Ensure that the text prop provided to the Tooltip component contains the appropriate value for the copy to clipboard functionality. Double-check that props.tooltipTextChecked and props.tooltipText are correctly set.

Check Button State: Confirm that the isDelayButtonStateComplete prop is correctly indicating the state of the button. If this prop is not being set or evaluated correctly, it may impact the display of the tooltip.

Review Icon Configuration: Make sure that props.iconChecked and props.icon are set correctly and that the icons are being rendered conditionally based on the button state.

Inspect Component Styling: Check if there are any conflicting or overriding styles applied to the Tooltip component or its parent components. Ensure that the containerStyles prop provided to the Tooltip component is not interfering with the tooltip's visibility.

Verify Accessibility Properties: Double-check the accessibility properties such as focusable and accessibilityLabel provided to the Pressable component. These properties should accurately reflect the button's functionality and state.

<PressableView style={[styles.flexRow, ...props.styles]} onPress={updatePressState}>
<Tooltip containerStyles={[styles.flexRow]} text={props.isDelayButtonStateComplete ? props.tooltipTextChecked : props.tooltipText}>
<>

{props.isDelayButtonStateComplete && props.textChecked ? props.textChecked : props.text} 

<Pressable ref={props.innerRef} focusable accessibilityLabel={props.isDelayButtonStateComplete ? props.tooltipTextChecked : props.tooltipText} onPress={updatePressState}>
{({ hovered, pressed }) => (
<>
{props.icon && (
<Icon
src={props.isDelayButtonStateComplete ? props.iconChecked : props.icon}
fill={StyleUtils.getIconFillColor(getButtonState(hovered, pressed, props.isDelayButtonStateComplete))}
style={props.iconStyles}
width={variables.iconSizeSmall}
height={variables.iconSizeSmall}
/>
)}
</>
)}

</>

@melvin-bot
Copy link

melvin-bot bot commented Jun 20, 2023

📣 @kevinleerongordon! 📣
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>

@staticGuru
Copy link

@MelvinBot

I can able to replicate the issues and I find the reason for this issue.

Issue:
Can't able to see the tooltip on the copy to clipboard in the contact methods sections.

Reason for the issues
Actually, Tooltip components can only support single children only. So, here both the text component and icon component are hidden in the tooltip's position.

Fixes
Here, I fix the issues in the following ways:
I treat the children component as the whole text with <span> tag.

<span>
<-- text component -->
<-- icon component -->
</span>

Issues fixes link
https://www.loom.com/share/b614241ddc2c436dbbb093da7eeb16e6?sid=d9ecce4e-31e1-4cf2-a434-3f8d0904c961

Contributor details
Your Expensify account email: vigneshguru274@gmail.com
Upwork Profile Link: https://www.upwork.com/freelancers/~010f381f7a58a7ba26

@melvin-bot
Copy link

melvin-bot bot commented Jun 20, 2023

📣 @staticGuru! 📣
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>

@staticGuru
Copy link

Contributor details
Your Expensify account email:vigneshguru274@gmail.com
Upwork Profile Link: https://www.upwork.com/freelancers/~010f381f7a58a7ba26

@devhd9
Copy link

devhd9 commented Jun 20, 2023

Proposal

Please re-state the problem that we are trying to solve in this issue.
Copy to clipboard tooltip is missing in Contact methods.

What is the root cause of that problem?
CopyTextToClipboard uses PressableWithDelayToggle. In PressableWithDelayToggle, we have a Tooltip that wraps a react fragment(<></>). Tooltip component uses Hoverable. To make Hoverable work, the children should be able to accept both the onMouseEnter and onMouseLeave props. Since we are using Fragment, props cannot be passed except key prop (react doc reference).

<PressableView 
     style={[styles.flexRow, ...props.styles]} 
     onPress={updatePressState} 
 > 
     <Tooltip 
         containerStyles={[styles.flexRow]} 
         text={props.isDelayButtonStateComplete ? props.tooltipTextChecked : props.tooltipText} 
     > 
         <> 
             <Text 
                 suppressHighlighting 
                 style={props.textStyles} 
             > 
                 {props.isDelayButtonStateComplete && props.textChecked ? props.textChecked : props.text} 
                 &nbsp; 
             </Text> 
             <Pressable 
                 ref={props.innerRef} 
                 focusable 
                 accessibilityLabel={props.isDelayButtonStateComplete ? props.tooltipTextChecked : props.tooltipText} 
                 onPress={updatePressState} 
             > 
                 {({hovered, pressed}) => ( 
                     <> 
                         {props.icon && ( 
                             <Icon 
                                 src={props.isDelayButtonStateComplete ? props.iconChecked : props.icon} 
                                 fill={StyleUtils.getIconFillColor(getButtonState(hovered, pressed, props.isDelayButtonStateComplete))} 
                                 style={props.iconStyles} 
                                 width={variables.iconSizeSmall} 
                                 height={variables.iconSizeSmall} 
                             /> 
                         )} 
                     </> 
                 )} 
             </Pressable> 
         </> 
     </Tooltip> 
 </PressableView>

What changes do you think we should make in order to solve the problem?
We can simply use Text component instead of Fragment.

<PressableView 
     style={[styles.flexRow, ...props.styles]} 
     onPress={updatePressState} 
 > 
     <Tooltip 
         containerStyles={[styles.flexRow]} 
         text={props.isDelayButtonStateComplete ? props.tooltipTextChecked : props.tooltipText} 
     > 
         <Text> 
             <Text 
                 suppressHighlighting 
                 style={props.textStyles} 
             > 
                 {props.isDelayButtonStateComplete && props.textChecked ? props.textChecked : props.text} 
                 &nbsp; 
             </Text> 
             <Pressable 
                 ref={props.innerRef} 
                 focusable 
                 accessibilityLabel={props.isDelayButtonStateComplete ? props.tooltipTextChecked : props.tooltipText} 
                 onPress={updatePressState} 
             > 
                 {({hovered, pressed}) => ( 
                     <> 
                         {props.icon && ( 
                             <Icon 
                                 src={props.isDelayButtonStateComplete ? props.iconChecked : props.icon} 
                                 fill={StyleUtils.getIconFillColor(getButtonState(hovered, pressed, props.isDelayButtonStateComplete))} 
                                 style={props.iconStyles} 
                                 width={variables.iconSizeSmall} 
                                 height={variables.iconSizeSmall} 
                             /> 
                         )} 
                     </> 
                 )} 
             </Pressable> 
         <Text/> 
     </Tooltip> 
 </PressableView>

@melvin-bot
Copy link

melvin-bot bot commented Jun 20, 2023

📣 @devhd9! 📣
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>

@devhd9
Copy link

devhd9 commented Jun 20, 2023

Contributor details
Your Expensify account email: hetdesai068@gmail.com
Upwork Profile Link: https://www.upwork.com/freelancers/~014f4ef0d1f901cc35

@melvin-bot
Copy link

melvin-bot bot commented Jun 20, 2023

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

@chiragxarora
Copy link
Contributor

you made a PR @staticGuru ?
@narefyev91 is yet to review the proposals bro

@narefyev91
Copy link
Contributor

Proposal of @chiragxarora #21074 (comment) looks good for me - it's correctly indicate the issue - and mostly suggesting to have the same structure of component which we have before inside CopyTextToClipboard
🎀 👀 🎀 C+ reviewed

@melvin-bot
Copy link

melvin-bot bot commented Jun 21, 2023

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

@bondydaa bondydaa changed the title [$1000] copy to clipboard tooltip is missing in Contact methods [Hold for payment 2023-07-05][$1000] copy to clipboard tooltip is missing in Contact methods Jun 29, 2023
@bondydaa bondydaa added Weekly KSv2 Awaiting Payment Auto-added when associated PR is deployed to production and removed Daily KSv2 labels Jun 29, 2023
@bondydaa
Copy link
Contributor

okay i believe all that happens is we add the [hold] to the title, add the awaiting payment label so i just manually did those things. zany will send payment next week assuming no regressions.

@melvin-bot melvin-bot bot added Daily KSv2 Overdue and removed Weekly KSv2 labels Jul 5, 2023
@zanyrenney
Copy link
Contributor

Thanks @bondydaa !

@melvin-bot melvin-bot bot removed the Overdue label Jul 10, 2023
@zanyrenney
Copy link
Contributor

Hey @chiragxarora I don't see that you applied for the job on Upwork as was requested in this comment. I am manually sending you an invite.

Also invited the reporter - Manan Gadhiya.

I believe @narefyev91 is paid outside Upwork! Let me know if I've gotten any of that wrong!

@chiragxarora
Copy link
Contributor

invite accepted @zanyrenney

@zanyrenney
Copy link
Contributor

Thank you!

@gadhiyamanan
Copy link
Contributor

@zanyrenney applied, thanks!

@zanyrenney
Copy link
Contributor

Thanks both! Just getting this error when trying to move forward on Upwork:
2023-07-10_11-54-36

Hang tight whilst i figure it out, please!

@chiragxarora
Copy link
Contributor

Hi @zanyrenney
I think @bondydaa needs to un-assign and then re-assign me and then the automation will work and send automatic offers to me and the reporter

@zanyrenney
Copy link
Contributor

@bondydaa please can you un-assign and then re-assign @chiragxarora as I keep getting this error and I think it might be due to the automation as @chiragxarora said.

Thanks!

@chiragxarora
Copy link
Contributor

BUMP: @bondydaa

@bondydaa
Copy link
Contributor

hmm sorry why does it matter who unassigns/re-assigns? pretty sure zany could have and it would have worked just fine too.

@melvin-bot
Copy link

melvin-bot bot commented Jul 12, 2023

📣 @chiragxarora 🎉 An offer has been automatically sent to your Upwork account for the Contributor role 🎉 Thanks for contributing to the Expensify app!

Upwork job
Please accept the offer 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 📖

@melvin-bot
Copy link

melvin-bot bot commented Jul 12, 2023

📣 @gadhiyamanan 🎉 An offer has been automatically sent to your Upwork account for the Reporter role 🎉 Thanks for contributing to the Expensify app!

Upwork job

@chiragxarora
Copy link
Contributor

@zanyrenney I've received the offer, can you please approve the milestones as this one is already way past the regression period?
Thankyou

@zanyrenney
Copy link
Contributor

Paid for Manan and Chirag, other contributor paid outside GH so we are all set here, closing!

@chiragxarora
Copy link
Contributor

@zanyrenney , this GH qualifies for urgency bonus too, please check

@chiragxarora
Copy link
Contributor

WhatsApp Image 2023-07-14 at 15 00 23
WhatsApp Image 2023-07-14 at 15 00 24
24, 25 were sat, sun @zanyrenney

@chiragxarora
Copy link
Contributor

bump: @zanyrenney

@chiragxarora
Copy link
Contributor

@zanyrenney could you pls check this when you find time?

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