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 2024-02-14] [$500] Web - Settings - The same text is also displayed as tooltips #34961

Closed
1 of 6 tasks
kbecciv opened this issue Jan 23, 2024 · 40 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

@kbecciv
Copy link

kbecciv commented Jan 23, 2024

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: 1.4.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
Expensify/Expensify Issue URL:
Issue reported by: Applause - Internal Team
Slack conversation:

Issue found when executing PR #34702

Action Performed:

  1. Navigate to preferences - priority mode
  2. Hover over the text of the options

Expected Result:

It shouldn't show any tooltips.

Actual Result:

The same text is also displayed as tooltips.

Workaround:

Unknown

Platforms:

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

  • Android: Native
  • Android: mWeb Chrome
  • iOS: Native
  • iOS: mWeb Safari
  • MacOS: Chrome / Safari
  • MacOS: Desktop

Screenshots/Videos

Add any screenshot/video evidence

Bug6351741_1706005634650.bandicam_2024-01-19_13-12-11-895.mp4

View all open jobs on GitHub

Upwork Automation - Do Not Edit
  • Upwork Job URL: https://www.upwork.com/jobs/~01938e9b3ecfb536b8
  • Upwork Job ID: 1749778594977869824
  • Last Price Increase: 2024-01-23
  • Automatic offers:
    • tienifr | Contributor | 28130592
@kbecciv kbecciv added External Added to denote the issue can be worked on by a contributor Daily KSv2 Bug Something is broken. Auto assigns a BugZero manager. labels Jan 23, 2024
@melvin-bot melvin-bot bot changed the title Web - Settings - The same text is also displayed as tooltips [$500] Web - Settings - The same text is also displayed as tooltips Jan 23, 2024
Copy link

melvin-bot bot commented Jan 23, 2024

Job added to Upwork: https://www.upwork.com/jobs/~01938e9b3ecfb536b8

Copy link

melvin-bot bot commented Jan 23, 2024

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

@melvin-bot melvin-bot bot added the Help Wanted Apply this label when an issue is open to proposals by contributors label Jan 23, 2024
Copy link

melvin-bot bot commented Jan 23, 2024

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

@paultsimura
Copy link
Contributor

paultsimura commented Jan 23, 2024

Proposal

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

Priority mode selector shows tooltips with the same text as alternameText.

What is the root cause of that problem?

We do not disable tooltips for the SelectionList on the PriorityModePage.

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

We should set shouldShowTooltips={false} here:

            <SelectionList
                sections={[{data: priorityModes}]}
                onSelectRow={updateMode}
                shouldShowTooltips={false}
                initiallyFocusedOptionKey={_.find(priorityModes, (mode) => mode.isSelected).keyForList}
            />

<SelectionList
sections={[{data: priorityModes}]}
onSelectRow={updateMode}
initiallyFocusedOptionKey={_.find(priorityModes, (mode) => mode.isSelected).keyForList}
/>

We should do the same in other places where we do not need the tooltips:

  • CountrySelectionPage
  • StateSelectorModal
  • LanguagePage
  • ThemePage
  • etc.

There are many such potential places, need to go through them when implementing the PR.

What alternative solutions did you explore? (Optional)

@namhihi237
Copy link
Contributor

namhihi237 commented Jan 23, 2024

Proposal

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

It shouldn't show any tooltips in PriorityModePage LanguagePage ThemePage,...

What is the root cause of that problem?

We do not disable tooltips in some settings configuration pages like:

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

I think for the setting configuration page, we should use shouldShowTooltips = {false} for them.

What alternative solutions did you explore? (Optional)

@adisher
Copy link

adisher commented Jan 23, 2024

Proposal

Please re-state the problem that we are trying to solve in this issue.
On hover, tooltip popups as shown in the video.

What is the root cause of that problem?
Not writing code for disabling the tooltips.

What changes do you think we should make in order to solve the problem?
Write code shouldShowTooltips = {false} here:

 <SelectionList 
     sections={[{data: localesToLanguages}]} 
     onSelectRow={(language) => App.setLocaleAndNavigate(language.value)} 
     initiallyFocusedOptionKey={_.find(localesToLanguages, (locale) => locale.isSelected).keyForList} 
 /> 

Writing this piece of code shouldShowTooltips = {false} should probably fix it.

@namhihi237
Copy link
Contributor

@paultsimura Please add the message if you edit proposal

Copy link

melvin-bot bot commented Jan 23, 2024

📣 @adisher! 📣
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. Make sure you've read and understood the contributing guidelines.
  2. 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.
  3. 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.
  4. 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>

@paultsimura
Copy link
Contributor

Proposal

Updated proposal to add a more complete list of places where the same change should be made. But the solution remains the same.

@adisher
Copy link

adisher commented Jan 23, 2024

Contributor details
Your Expensify account email: adilsher973@gmail.com
Upwork Profile Link: https://www.upwork.com/freelancers/iadilsher

Copy link

melvin-bot bot commented Jan 23, 2024

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

@namhihi237
Copy link
Contributor

namhihi237 commented Jan 23, 2024

Update proposal to explain the list we should not show the tooltip

@Krishna2323
Copy link
Contributor

Proposal

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

What is the root cause of that problem?

We do not pass shouldShowTooltips={false} to the SelectionList.

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

We generally don't need tooltips for most of the components that uses SelectionList. We only need to show tooltips for few component like RoomInvitePage, RoomMembersPage, MoneyRequestParticipantsSelector,SelectionList & WorkspaceMembersPage. So I think it would be better if we set default value of shouldShowTooltips as false. This way we don't need to always pass shouldShowTooltips as false when we use SelectionList in future because most of the time we don't need the tooltip.

Result

@best-luck
Copy link

best-luck commented Jan 23, 2024

Contributor details
Your Expensify account email: edge.of.cliff.amazing@gmail.com
Upwork Profile Link: https://www.upwork.com/freelancers/~0165317e4bab2a9148?viewMode=1

Proposal!

The problem is in this file.
src/components/SelectionList/BaseSelectionList.js

const renderItem = ({item, index, section}) => {
const normalizedIndex = index + lodashGet(section, 'indexOffset', 0);
const isDisabled = section.isDisabled || item.isDisabled;
const isItemFocused = !isDisabled && focusedIndex === normalizedIndex;
// We only create tooltips for the first 10 users or so since some reports have hundreds of users, causing performance to degrade.
const showTooltip = normalizedIndex < 10;

    return (
        <BaseListItem
            item={item}
            isFocused={isItemFocused}
            isDisabled={isDisabled}
            isHide={!maxToRenderPerBatch}
            showTooltip={showTooltip}
            canSelectMultiple={canSelectMultiple}
            onSelectRow={() => selectRow(item, true)}
            onDismissError={onDismissError}
            shouldPreventDefaultFocusOnSelectRow={shouldPreventDefaultFocusOnSelectRow}
            keyForList={item.keyForList}
        />
    );
};

So showToolTip is based on indexOffset of the section.

The section data is in PriorityModePage
<SelectionList
sections={[{data: priorityModes}]}
onSelectRow={updateMode}
initiallyFocusedOptionKey={_.find(priorityModes, (mode) => mode.isSelected).keyForList}
/>

So you should configure to
<SelectionList
sections={[{data: priorityModes, indexOffset: 20}]}
onSelectRow={updateMode}
initiallyFocusedOptionKey={_.find(priorityModes, (mode) => mode.isSelected).keyForList}
/>

Thanks for consideration.

Copy link

melvin-bot bot commented Jan 23, 2024

📣 @edge-of-cliff! 📣
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. Make sure you've read and understood the contributing guidelines.
  2. 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.
  3. 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.
  4. 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>

@best-luck
Copy link

Contributor details
Your Expensify account email: edge.of.cliff.amazing@gmail.com
Upwork Profile Link: https://www.upwork.com/freelancers/~0165317e4bab2a9148?viewMode=1

Copy link

melvin-bot bot commented Jan 23, 2024

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

@best-luck
Copy link

Contributor details
Your Expensify account email: edge.of.cliff.amazing@gmail.com
Upwork Profile Link: https://www.upwork.com/freelancers/~0165317e4bab2a9148

Copy link

melvin-bot bot commented Jan 23, 2024

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

@best-luck
Copy link

Contributor details
Your Expensify account email: edge.of.cliff.amazing@gmail.com
Upwork Profile Link: https://www.upwork.com/freelancers/~0165317e4bab2a9148

Copy link

melvin-bot bot commented Jan 23, 2024

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

@tienifr
Copy link
Contributor

tienifr commented Jan 23, 2024

Proposal

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

The same text is also displayed as tooltips.

What is the root cause of that problem?

We're having the tooltips set for SelectionList on the PriorityModePage. It's the default behavior of SelectionList.

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

The reason we need a tooltip in the first place is so that if the title or subtitle of the SelectionList item are longer than the container width and showing ellipsis, we want the user to be able to view the full content of the title/subtitle. We did that by making the SelectionList items show tooltips by default. This is not ideal because we don't always need the tooltips, in many SelectionList the titles are short and there's no need for tooltips, the user can still see the full page.

And also, Tooltips are expensive, rendering a lot of them can degrade performance.

So we should only show Tooltips when necessary, that means when the "ellipsis" effect occurs. We can create a custom TextWithTooltip component that contains this logic. In onLayout, we'll check if the scrollWidth of the Text is larger than offsetWidth, if yes that means ellipsis is showing and we should show the Tooltip (we can put the Tooltip shouldRender to a state and only set it to true if ellipsis is happening)

And then we use that component for the SelectionListItem, and now we never have to think which page should have tooltips, which page should not any more. Any text that has ellipsis will have the tooltips to let users view full content.

Of course for platforms other than web (that doesn't have Tooltips), we can just return Text in TextWithTooltip, no need for additional logic.

What alternative solutions did you explore? (Optional)

In addition to the main solution, if for any page we want to disable/enable Tooltips always, whether there is ellipsis or not (which I think we should not do because texts/translations can change any time), we can control that by a prop (like shouldShowTooltips), if the prop is enabled/disabled, it will override the value set by the calculation in the main solution.

@wildan-m
Copy link
Contributor

wildan-m commented Jan 23, 2024

Proposal

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

The same text is also displayed as tooltips

What is the root cause of that problem?

In UserListItem and RadioListItem we show exactly the same text for tooltip and its content

                <Tooltip
                    shouldRender={showTooltip}
                    text={item.text}
                >

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

I think we shouldn't show the tooltip by default unless it's defined, also it's not quite useful to have the same text with content.

I'd recommend adding textTooltip and alternateTextTooltip to determine if it's defined and allow us to input custom text.

In UserListItem and RadioListItem we can modify logic to:

                <Tooltip
                    shouldRender={showTooltip && Boolean(item.textTooltip)}
                    text={item.textTooltip}
                >
                    <Text
                        style={StyleUtils.combineStyles(textStyles, style)}
                        numberOfLines={1}
                    >
                        {item.text}
                    </Text>
                </Tooltip>
                {Boolean(item.alternateText) && (
                    <Tooltip
                        shouldRender={showTooltip && Boolean(item.alternateTextTooltip)}
                        text={item.alternateTextTooltip}
                    >
                        <Text
                            style={StyleUtils.combineStyles(alternateTextStyles, style)}
                            numberOfLines={1}
                        >
                            {item.alternateText}
                        </Text>
                    </Tooltip>
                )}

What alternative solutions did you explore? (Optional)

Copy link

melvin-bot bot commented Jan 30, 2024

📣 @tienifr 🎉 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 📖

@melvin-bot melvin-bot bot added Reviewing Has a PR in review Weekly KSv2 and removed Daily KSv2 labels Jan 31, 2024
@melvin-bot melvin-bot bot added Weekly KSv2 Awaiting Payment Auto-added when associated PR is deployed to production and removed Weekly KSv2 labels Feb 7, 2024
@melvin-bot melvin-bot bot changed the title [$500] Web - Settings - The same text is also displayed as tooltips [HOLD for payment 2024-02-14] [$500] Web - Settings - The same text is also displayed as tooltips Feb 7, 2024
@melvin-bot melvin-bot bot removed the Reviewing Has a PR in review label Feb 7, 2024
Copy link

melvin-bot bot commented Feb 7, 2024

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

Copy link

melvin-bot bot commented Feb 7, 2024

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

If no regressions arise, payment will be issued on 2024-02-14. 🎊

For reference, here are some details about the assignees on this issue:

Copy link

melvin-bot bot commented Feb 7, 2024

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

@melvin-bot melvin-bot bot added Daily KSv2 and removed Weekly KSv2 labels Feb 13, 2024
@eVoloshchak
Copy link
Contributor

Continuing the discussion in #35460 (comment)
@kavimuru, @tienifr, could you double-check if this was resolved please?

@sonialiap
Copy link
Contributor

@eVoloshchak is #35460 (comment) a regression?

@melvin-bot melvin-bot bot added the Overdue label Feb 16, 2024
@sonialiap
Copy link
Contributor

melvin, I just commented on this issue, not overdue

@melvin-bot melvin-bot bot added Overdue and removed Overdue labels Feb 16, 2024
@sonialiap
Copy link
Contributor

@eVoloshchak bumping my question above #34961 (comment)
is #35460 (comment) a regression?

@melvin-bot melvin-bot bot removed the Overdue label Feb 20, 2024
@eVoloshchak
Copy link
Contributor

@sonialiap, I cannot reproduce this, works fine for me on both Chrome and Safari

Screen.Recording.2024-02-20.at.16.00.06.mov

@sonialiap
Copy link
Contributor

Sounds good, making payments

@eVoloshchak $500 please request in ND and complete the checklist
@tienifr $500 - paid ✔️

@eVoloshchak
Copy link
Contributor

  • The PR that introduced the bug has been identified. Link to the PR: there isn't a PR that caused this, this is a limitation of the original 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: I don't think an additional discussion is needed, the bug is very minor and we've applied a different approach that resolves it throughout the app

Regression Test Proposal

  1. Navigate to Profile -> Preferences -> Priority mode
  2. Hover over the text of the options
  3. Verify that the tooltip does not appear

Do we agree 👍 or 👎

@JmillsExpensify
Copy link

$500 approved for @eVoloshchak based on summary above.

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