[HOLD for Payment 2024-10-4][$250] Profile - There is tooltip for Profile Share button but no tooltip for Workspace Share button #48418

lanitochka17 · 2024-09-02T16:51:40Z

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: 9.0.27-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: applausetester+kh050806@applause.expensifail.com
Issue reported by: Applause - Internal Team

Action Performed:

Go to staging.new.expensify.com
Go to Account settings > Profile
Hover over Share button
Note that there is a tooltip
Go to any workspace > Profile
Hover over Share button
Note that there is no tooltip

Expected Result:

In Step 4 and 7, there should be consistency whether tooltip is required for Share code button

Actual Result:

There is tooltip when hovering over Share button in Profile page (Step 4), but there is no tooltip when hovering over Share button in Workspace Profile page
The font used in Profile Share button is also larger than Workspace Profile Share button

Workaround:

Unknown

Platforms:

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

Screenshots/Videos

Add any screenshot/video evidence

Bug6590725_1725293163834.20240903_000032.mp4

View all open jobs on GitHub

Upwork Automation - Do Not Edit

Upwork Job URL: https://www.upwork.com/jobs/~01df3c5b108dfdd9f0
Upwork Job ID: 1831003804836352528
Last Price Increase: 2024-09-03
Automatic offers:

c3024 | Reviewer | 103918746
Krishna2323 | Contributor | 103918747

Issue Owner

Current Issue Owner: @zanyrenney

melvin-bot · 2024-09-02T16:51:50Z

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

lanitochka17 · 2024-09-02T16:52:29Z

@zanyrenney FYI I haven't added the External label as I wasn't 100% sure about this issue. Please take a look and add the label if you agree it's a bug and can be handled by external contributors

Krishna2323 · 2024-09-02T17:02:20Z

Edited by proposal-police: This proposal was edited at 2024-09-03 01:31:02 UTC.

Proposal 

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

Profile - There is tooltip for Profile Share button but no tooltip for Workspace Share button

What is the root cause of that problem?

The button isn't wrapped with <Tooltip text={translate('common.shareCode')}>

App/src/pages/workspace/WorkspaceProfilePage.tsx

Lines 269 to 275 in e60b821

    
           <Button 
        
               accessibilityLabel={translate('common.share')} 
        
               text={translate('common.share')} 
        
               onPress={onPressShare} 
        
               medium 
        
               icon={Expensicons.QrCode} 
        
           />

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

We first need to adjust the font size to be consistent.

We can do two things, first we can replace the PressableWithFeedback with Button or Button to PressableWithFeedback and add the same props/styles added in WorkspaceProfilePage.

We can remove the medium prop from the button component in WorkspaceProfilePage. If we do that then we also need to make few style changes like horizontal padding to match the button in WorkspaceProfilePage.

App/src/pages/workspace/WorkspaceProfilePage.tsx

Lines 269 to 275 in e60b821

<Button

accessibilityLabel={translate('common.share')}

text={translate('common.share')}

onPress={onPressShare}

medium

icon={Expensicons.QrCode}

/>

We can modify the PressableWithFeedback in WorkspaceProfilePage to use the same text size and button styles as used in Button component. This will required changing the icon size to iconSizeSmall or replacing the height & width prop with small prop.

Note

Every suggested option above may require minor styling changes also if we don't use the same component at both places.

If we use button in any component then would need to wrap the Button component with Tooltip. The button also needs to be wrapped in a View first because the button returns sibling elements.

Optional: We can modify the Button to only return a single element by wrapping the child elements with View or rendering KeyboardShortcutComponent inside PressableWithFeedback.

What alternative solutions did you explore? (Optional)

Remove the tooltip from ProfilePage.
Add buttonMedium style here.
Change the icon size here to iconSizeSmall or replacing the height & width prop with small prop.
Instead of updating styles, we can replace PressableWithFeedback with Button.
We also need to do minor style fixes like adjusting the padding to match both buttons.

What alternative solutions did you explore? (Optional) 2

Wrap the button with <Tooltip text={translate('common.shareCode')}>.

We can even change the Button to PressableWithFeedback or PressableWithFeedback to a Button component to make them consistent.

App/src/pages/settings/Profile/ProfilePage.tsx

Lines 193 to 208 in e60b821

    
           <Tooltip text={translate('common.shareCode')}> 
        
               <PressableWithFeedback 
        
                   accessibilityLabel={translate('common.shareCode')} 
        
                   accessibilityRole="button" 
        
                   accessible 
        
                   onPress={() => Navigation.navigate(ROUTES.SETTINGS_SHARE_CODE)} 
        
                   style={[styles.button, styles.flexRow, styles.gap1, styles.ph4]} 
        
               > 
        
                   <Icon 
        
                       src={Expensicons.QrCode} 
        
                       width={variables.iconSizeNormal} 
        
                       height={variables.iconSizeNormal} 
        
                       fill={theme.icon} 
        
                   /> 
        
                   <Text style={styles.buttonText}>{translate('common.share')}</Text> 
        
               </PressableWithFeedback>

We can also have a tooltip for delete button.
We also need to remove the medium from the button and

Result

Nodebrute · 2024-09-02T17:19:46Z

Proposal

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

There is tooltip for Profile Share button but no tooltip for Workspace Share button

What is the root cause of that problem?

We haven't added the tooltip in the workspace profile page.

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

Wrap this button in a View.
And then wrap that View in Tooltip <Tooltip text={translate('common.shareCode')} >

  <Tooltip text={translate('common.shareCode')}>
                                    <View>
                                        <Button
                                            accessibilityLabel={translate('common.share')}
                                            text={translate('common.share')}
                                            onPress={onPressShare}
                                            medium
                                            icon={Expensicons.QrCode}
                                        />
                                    </View>
                                </Tooltip>

We can do the same for delete button

Note

We can't wrap the button directly in the tooltip as suggested in the other proposal. We need to wrap it in a view first.

What alternative solutions did you explore? (Optional)

Krishna2323 · 2024-09-03T01:35:43Z

Proposal Updated

Updated main solution and added alternative 2.

melvin-bot · 2024-09-03T16:18:21Z

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

melvin-bot · 2024-09-03T16:18:27Z

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

haris-ali9211 · 2024-09-03T21:58:14Z

Proposal

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

There is no tooltip for the Workspace Share button as there is for the Profile Share button.

What is the root cause of that problem?

The previous implementation did not include a tooltip for the Workspace Share button. When attempting to directly wrap the Button component with a Tooltip, it did not work correctly due to the Button component's structure, which returns sibling elements. Tooltips require a single child element, causing the tooltip to malfunction.

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

To address this issue, We can add a PressableWithFeedback component wrapped with the Tooltip instead of directly applying the tooltip to the Button. The PressableWithFeedback component allows for the required flexibility, ensuring the tooltip functions correctly while maintaining the intended button behavior and styling. The same approach was applied to the Delete button for consistency.

File: App/src/pages/workspace/WorkspaceProfilePage.tsx
Line: 274 to 291

<View style={[styles.flexRow, styles.mt6, styles.mnw120, styles.gap2]}>
    <Tooltip text={translate('common.shareCode')}>
        <PressableWithFeedback
            accessibilityLabel={translate('common.shareCode')}
            accessibilityRole="button"
            accessible
            onPress={onPressShare}
            style={[styles.button, styles.flexRow, styles.gap1, styles.p3]}
        >
            <Icon
                src={Expensicons.QrCode}
                width={variables.iconSizeSmall}
                height={variables.iconSizeSmall}
                fill={theme.icon}
            />
            <Text style={styles.buttonMediumText}>{translate('common.share')}</Text>
        </PressableWithFeedback>
    </Tooltip>
</View>

melvin-bot · 2024-09-03T21:58:17Z

📣 @haris-ali9211! 📣
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:

Make sure you've read and understood the contributing guidelines.
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.
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.
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>

melvin-bot · 2024-09-03T22:09:34Z

⚠️ Missing/invalid email or upwork profile link. Please make sure you add both your Expensify email and Upwork profile link in the format specified.

haris-ali9211 · 2024-09-03T22:16:41Z

Contributor details
Your Expensify account email: haris.aali9211@gmail.com
Upwork Profile Link: https://www.upwork.com/freelancers/~01d817e5e279394799

melvin-bot · 2024-09-03T22:16:44Z

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

Gajendra-Gupta · 2024-09-04T13:57:02Z

Proposal

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

There is no tooltip for the Workspace Share button as there is for the Profile Share button.

What is the root cause of that problem?

Tooltip not added for button.

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

Wrap this button in a ToolTip with Pressable

<Tooltip text={translate('common.shareCode')}>
                                    <Pressable>
                                <Button
                                    accessibilityLabel={translate('common.share')}
                                    text={translate('common.share')}
                                    onPress={onPressShare}
                                    medium
                                    icon={Expensicons.QrCode}
                                />
                                </Pressable>
                                </Tooltip>

bondydaa · 2024-09-05T17:40:41Z

@c3024 can you get to these proposals? thanks!

bondydaa · 2024-09-06T17:32:11Z

i'll be OOO next week so if we get proposals ready please ask for another engineer to review

melvin-bot · 2024-09-06T18:19:37Z

@bondydaa, @zanyrenney, @c3024 Whoops! This issue is 2 days overdue. Let's get this updated quick!

c3024 · 2024-09-06T18:21:18Z

Sure. Thanks. I'll update today.

c3024 · 2024-09-08T14:21:59Z

@Expensify/design

The actual result of the issue states:

There is a tooltip when hovering over the Share button on the Profile page (Step 4), but no tooltip appears when hovering over the Share button on the Workspace Profile page. The font used on the Profile Share button is also larger than that on the Workspace Profile Share button.

Can you please confirm:

Is a tooltip necessary for the Share button on the Profile page? The button text seems to be clear enough and the tooltip does not seem to provide any useful info.
Do we need to match the button and font sizes on the Workspace Profile page with those on the Profile page?

shawnborton · 2024-09-08T15:28:42Z

Hmm I feel like we usually don't use tooltips on buttons with labels, so I am cool with removing it.

As for the font size differences, it does look like the font size on the Profile's share button is too big. This should easily be fixed by passing in the correct medium prop.

Krishna2323 · 2024-09-08T16:37:18Z

@c3024, Updated alternative 1 section in my proposal.

Sorry, it's messed up a bit but I tried to keep the alternative 1 section very clear and understandable.

c3024 · 2024-09-08T16:50:47Z

@Krishna2323 's proposal LGTM!

🎀 👀 🎀 C+ Reviewed

melvin-bot · 2024-09-08T16:51:02Z

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

dangrous · 2024-09-09T18:18:35Z

Hi! Just to confirm from here - it looks like we want to move forward with @Krishna2323's alternative solution, removing the tooltip and updating the button on the Profile Page? If so, I'd probably go with updating the PressableWithFeedback to a Button.

Let me know if I'm understanding correctly, and I can assign!

I also feel like this is probably a $125 issue, since it's very minor - @bondydaa / @zanyrenney what do you think?

c3024 · 2024-09-11T14:57:12Z

Hi! Just to confirm from #48418 (comment) - it looks like we want to move forward with @Krishna2323's alternative solution, removing the tooltip and updating the button on the Profile Page? If so, I'd probably go with updating the PressableWithFeedback to a Button.

Let me know if I'm understanding correctly, and I can assign!

Yes, that’s correct. Apologies for not being fully clear.

dangrous · 2024-09-11T18:01:10Z

No worries! This was helpful. Assigning now, and we'll stick to $250 on this one since that was what was shown when proposals were submitted/reviewed.

melvin-bot · 2024-09-11T18:01:25Z

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

Offer link
Upwork job

melvin-bot · 2024-09-11T18:01:31Z

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

Offer link
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 📖

zanyrenney · 2024-09-13T15:34:00Z

how are we getting along here @Krishna2323 @c3024 ?

c3024 · 2024-09-13T15:40:38Z

PR yet to be opened. I think @Krishna2323 will soon open a PR.

Krishna2323 · 2024-09-13T21:43:59Z

@c3024, PR ready for review ^

dangrous · 2024-09-30T14:40:01Z

melvin is doing an awful job recently on the automations - this was deployed to prod on 9/27, according to the comments on the PR....

melvin-bot · 2024-10-02T14:48:16Z

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

zanyrenney · 2024-10-02T14:48:48Z

Hi! I am going OOO tomorrow when this payment is due, back on 7th october. please could you handle the payment? I would be happy to take it back if there are any blockers when I am back. thanks!

sonialiap · 2024-10-04T11:20:40Z

Payment summary:
@Krishna2323 $250 - paid in upwork ✔️
@c3024 $250 - paid in upwork ✔️

lanitochka17 added Daily KSv2 Bug Something is broken. Auto assigns a BugZero manager. labels Sep 2, 2024

melvin-bot bot assigned zanyrenney Sep 2, 2024

bondydaa self-assigned this Sep 2, 2024

bondydaa added the External Added to denote the issue can be worked on by a contributor label Sep 3, 2024

melvin-bot bot changed the title ~~Profile - There is tooltip for Profile Share button but no tooltip for Workspace Share button~~ [$250] Profile - There is tooltip for Profile Share button but no tooltip for Workspace Share button Sep 3, 2024

melvin-bot bot added the Help Wanted Apply this label when an issue is open to proposals by contributors label Sep 3, 2024

melvin-bot bot assigned c3024 Sep 3, 2024

melvin-bot bot added the Overdue label Sep 5, 2024

melvin-bot bot removed the Overdue label Sep 6, 2024

melvin-bot bot assigned dangrous Sep 8, 2024

dangrous assigned Krishna2323 Sep 11, 2024

melvin-bot bot removed the Help Wanted Apply this label when an issue is open to proposals by contributors label Sep 11, 2024

Krishna2323 mentioned this issue Sep 13, 2024

fix: Profile - There is tooltip for Profile Share button but no tooltip for Workspace Share button. #49193

Merged

50 tasks

melvin-bot bot added Reviewing Has a PR in review Weekly KSv2 and removed Daily KSv2 labels Sep 13, 2024

dangrous changed the title ~~[$250] Profile - There is tooltip for Profile Share button but no tooltip for Workspace Share button~~ [HOLD for Payment 2024-10-4][$250] Profile - There is tooltip for Profile Share button but no tooltip for Workspace Share button Oct 1, 2024

zanyrenney removed their assignment Oct 2, 2024

zanyrenney added Bug Something is broken. Auto assigns a BugZero manager. and removed Bug Something is broken. Auto assigns a BugZero manager. labels Oct 2, 2024

melvin-bot bot assigned sonialiap Oct 2, 2024

melvin-bot bot added Daily KSv2 and removed Weekly KSv2 labels Oct 2, 2024

zanyrenney self-assigned this Oct 2, 2024

sonialiap closed this as completed Oct 4, 2024

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

[HOLD for Payment 2024-10-4][$250] Profile - There is tooltip for Profile Share button but no tooltip for Workspace Share button #48418

[HOLD for Payment 2024-10-4][$250] Profile - There is tooltip for Profile Share button but no tooltip for Workspace Share button #48418

lanitochka17 commented Sep 2, 2024 •

edited by bondydaa

Loading

melvin-bot bot commented Sep 2, 2024

lanitochka17 commented Sep 2, 2024

Krishna2323 commented Sep 2, 2024 •

edited

Loading

Nodebrute commented Sep 2, 2024 •

edited

Loading

Krishna2323 commented Sep 3, 2024

melvin-bot bot commented Sep 3, 2024

melvin-bot bot commented Sep 3, 2024

haris-ali9211 commented Sep 3, 2024

melvin-bot bot commented Sep 3, 2024

melvin-bot bot commented Sep 3, 2024

haris-ali9211 commented Sep 3, 2024

melvin-bot bot commented Sep 3, 2024

Gajendra-Gupta commented Sep 4, 2024

bondydaa commented Sep 5, 2024

bondydaa commented Sep 6, 2024

melvin-bot bot commented Sep 6, 2024

c3024 commented Sep 6, 2024

c3024 commented Sep 8, 2024

shawnborton commented Sep 8, 2024

Krishna2323 commented Sep 8, 2024

c3024 commented Sep 8, 2024 •

edited

Loading

melvin-bot bot commented Sep 8, 2024

dangrous commented Sep 9, 2024

c3024 commented Sep 11, 2024

dangrous commented Sep 11, 2024

melvin-bot bot commented Sep 11, 2024

melvin-bot bot commented Sep 11, 2024

zanyrenney commented Sep 13, 2024

c3024 commented Sep 13, 2024

Krishna2323 commented Sep 13, 2024

dangrous commented Sep 30, 2024

melvin-bot bot commented Oct 2, 2024

zanyrenney commented Oct 2, 2024

sonialiap commented Oct 4, 2024

[HOLD for Payment 2024-10-4][$250] Profile - There is tooltip for Profile Share button but no tooltip for Workspace Share button #48418

[HOLD for Payment 2024-10-4][$250] Profile - There is tooltip for Profile Share button but no tooltip for Workspace Share button #48418

Comments

lanitochka17 commented Sep 2, 2024 • edited by bondydaa Loading

Action Performed:

Expected Result:

Actual Result:

Workaround:

Platforms:

Screenshots/Videos

melvin-bot bot commented Sep 2, 2024

lanitochka17 commented Sep 2, 2024

Krishna2323 commented Sep 2, 2024 • edited Loading

Proposal

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

What is the root cause of that problem?

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

What alternative solutions did you explore? (Optional)

What alternative solutions did you explore? (Optional) 2

Result

Nodebrute commented Sep 2, 2024 • edited Loading

Proposal

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

What is the root cause of that problem?

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

What alternative solutions did you explore? (Optional)

Krishna2323 commented Sep 3, 2024

Proposal Updated

melvin-bot bot commented Sep 3, 2024

melvin-bot bot commented Sep 3, 2024

haris-ali9211 commented Sep 3, 2024

Proposal

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

What is the root cause of that problem?

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

melvin-bot bot commented Sep 3, 2024

melvin-bot bot commented Sep 3, 2024

haris-ali9211 commented Sep 3, 2024

melvin-bot bot commented Sep 3, 2024

Gajendra-Gupta commented Sep 4, 2024

Proposal

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

What is the root cause of that problem?

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

bondydaa commented Sep 5, 2024

bondydaa commented Sep 6, 2024

melvin-bot bot commented Sep 6, 2024

c3024 commented Sep 6, 2024

c3024 commented Sep 8, 2024

shawnborton commented Sep 8, 2024

Krishna2323 commented Sep 8, 2024

c3024 commented Sep 8, 2024 • edited Loading

melvin-bot bot commented Sep 8, 2024

dangrous commented Sep 9, 2024

c3024 commented Sep 11, 2024

dangrous commented Sep 11, 2024

melvin-bot bot commented Sep 11, 2024

melvin-bot bot commented Sep 11, 2024

zanyrenney commented Sep 13, 2024

c3024 commented Sep 13, 2024

Krishna2323 commented Sep 13, 2024

dangrous commented Sep 30, 2024

melvin-bot bot commented Oct 2, 2024

zanyrenney commented Oct 2, 2024

sonialiap commented Oct 4, 2024

lanitochka17 commented Sep 2, 2024 •

edited by bondydaa

Loading

Krishna2323 commented Sep 2, 2024 •

edited

Loading

Proposal 

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

Nodebrute commented Sep 2, 2024 •

edited

Loading

c3024 commented Sep 8, 2024 •

edited

Loading