[HOLD for payment 2024-12-05] [$250] First QAB missing tooltip for new user #51987

m-natarajan · 2024-11-04T20:24:42Z

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.57-0
Reproducible in staging?: y
Reproducible in production?: y
If this was caught on HybridApp, is this reproducible on New Expensify Standalone?:
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: @ishpaul777
Slack conversation (hyperlinked to channel name): Expensify-bugs

Action Performed:

Sign up with new account
Open FAB, complete scan receipt flow
Open FAB again

Expected Result:

you see a QAB with tooltip

Actual Result:

you see a QAB without tooltip

Workaround:

unknown

this is the tooltip that should be visible ^

Platforms:

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

Screenshots/Videos

Add any screenshot/video evidence

Recording.729.mp4

Expected tooltip:

View all open jobs on GitHub

Upwork Automation - Do Not Edit

Upwork Job URL: https://www.upwork.com/jobs/~021853953365086766977
Upwork Job ID: 1853953365086766977
Last Price Increase: 2024-11-06
Automatic offers:

rayane-djouah | Reviewer | 104869466

Issue Owner

Current Issue Owner: @mallenexpensify

melvin-bot · 2024-11-04T20:24:52Z

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

Nodebrute · 2024-11-04T21:59:50Z

Proposal

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

First QAB missing tooltip for new user

What is the root cause of that problem?

This issue began after the changes in this PR. In this PR, we updated EducationalTooltip by adding a new variable, shouldShow, which included two additional checks: !modal?.willAlertModalBecomeVisible && !modal?.isVisible.

App/src/components/Tooltip/EducationalTooltip/BaseEducationalTooltip.tsx

Line 26 in a84cb31

    
           const shouldShow = !modal?.willAlertModalBecomeVisible && !modal?.isVisible && shouldRender;

The problem arises because when we open the FAB, willAlertModalBecomeVisible is set to true, which causes shouldShow to be evaluated as false, preventing the tooltip from displaying.

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

We can change the condition so when isPopover is true we ignore these !modal?.willAlertModalBecomeVisible && !modal?.isVisible

App/src/components/Tooltip/EducationalTooltip/BaseEducationalTooltip.tsx

Line 26 in a84cb31

    
           const shouldShow = !modal?.willAlertModalBecomeVisible && !modal?.isVisible && shouldRender;

we can do something like this

const shouldShow = shouldRender && (modal?.isPopover || (!modal?.willAlertModalBecomeVisible && !modal?.isVisible));

Note: This is just pseudo code. We can achieve the same results by passing props

What alternative solutions did you explore? (Optional)

We can remove !modal?.willAlertModalBecomeVisible from here

App/src/components/Tooltip/EducationalTooltip/BaseEducationalTooltip.tsx

Line 26 in a84cb31

    
           const shouldShow = !modal?.willAlertModalBecomeVisible && !modal?.isVisible && shouldRender;

bernhardoj · 2024-11-05T07:05:55Z

Proposal

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

The QAB toolltip doesn't show for new user.

What is the root cause of that problem?

This happens after #49682 where we prevent the tooltip to show in a modal. The issue that they are trying to solve is that the tooltip doesn't hide when we open a modal (or RHP).

App/src/components/Tooltip/EducationalTooltip/BaseEducationalTooltip.tsx

Line 26 in 10454f0

    
           const shouldShow = !modal?.willAlertModalBecomeVisible && !modal?.isVisible && shouldRender;

But using that condition means that the tooltip isn't allowed to show in a modal.

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

Because we want to close the tooltip when a modal will show, we need to change the logic a bit. What we should do instead is, if a modal is previously not shown, but now is visible, then close the tooltip. We can do that inside this onyx subscription.

App/src/components/Tooltip/EducationalTooltip/BaseEducationalTooltip.tsx

Lines 32 to 41 in 10454f0

    
           const unsubscribeOnyxModal = onyxSubscribe({ 
        
               key: ONYXKEYS.MODAL, 
        
               callback: (modalArg) => { 
        
                   if (modalArg === undefined) { 
        
                       return; 
        
                   } 
        
                   setModal(modalArg); 
        
               }, 
        
           }); 
        
           return () => {

let prevModal: Modal;
const unsubscribeOnyxModal = onyxSubscribe({
    key: ONYXKEYS.MODAL,
    callback: (modal) => {
        if (modal === undefined) {
            return;
        }
        if (!prevModal) {
            prevModal = modal;
        } else if ((!prevModal.willAlertModalBecomeVisible && modal.willAlertModalBecomeVisible) || (!prevModal.isVisible && modal.isVisible)) {
            clearTimeout(showTimer.current);
            clearTimeout(autoCloseTimer.current);
            closeTooltip();
        }
    },
});

// If we want to replace above with useOnxy hooks (we use the above logic so it will re-render based on modal only when visible)
// const [modal] = useOnyx(ONYXKEYS.MODAL);
// const prevModal = usePrevious(modal)
// useEffect(() => {
//     if ((!prevModal?.willAlertModalBecomeVisible && modal?.willAlertModalBecomeVisible) || (!prevModal?.isVisible && modal?.isVisible)) {
//         clearTimeout(showTimer.current);
//         clearTimeout(autoCloseTimer.current);
//         closeTooltip();
//     }
// }, [modal, prevModal, closeTooltip]);

And when we close the tooltip, we need to make sure we cancel both the timeout of show and auto close/dismiss.

App/src/components/Tooltip/EducationalTooltip/BaseEducationalTooltip.tsx

Lines 79 to 85 in 10454f0

    
           // Automatically hide tooltip after 5 seconds if shouldAutoDismiss is true 
        
           const timerID = setTimeout(() => { 
        
               closeTooltip(); 
        
           }, 5000); 
        
           return () => { 
        
               clearTimeout(timerID); 
        
           };

App/src/components/Tooltip/EducationalTooltip/BaseEducationalTooltip.tsx

Lines 93 to 99 in 10454f0

    
           const timerID = setTimeout(() => { 
        
               show.current?.(); 
        
               didShow.current = true; 
        
           }, 500); 
        
           return () => { 
        
               clearTimeout(timerID); 
        
           };

That's why we need to store it on a ref so we can use it later. Then, we can remove this shouldShow and this logic.

App/src/components/Tooltip/EducationalTooltip/BaseEducationalTooltip.tsx

Line 26 in 10454f0

    
           const shouldShow = !modal?.willAlertModalBecomeVisible && !modal?.isVisible && shouldRender;

App/src/components/Tooltip/EducationalTooltip/BaseEducationalTooltip.tsx

Lines 73 to 77 in 10454f0

    
           // If the modal is open, hide the tooltip immediately and clear the timeout 
        
           if (!shouldShow) { 
        
               closeTooltip(); 
        
               return; 
        
           }

Also, replaces all shouldShow with shouldRender back.

melvin-bot · 2024-11-06T00:11:43Z

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

melvin-bot · 2024-11-06T00:11:48Z

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

mallenexpensify · 2024-11-06T00:13:25Z

@ishpaul777 can you provide more details plz?

Sign up with new account

Which do you select here?

Open FAB, complete scan receipt flow

Track expense or Submit expense?

Thx

ishpaul777 · 2024-11-06T07:56:15Z

Track expense or Submit expense?

Submit expense, not only scan receipt but the any of the submit flow will work

mallenexpensify · 2024-11-06T19:04:37Z

Was able to reproduce

Video

2024-11-06_10-59-43.mp4

melvin-bot · 2024-11-06T19:06:37Z

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

mallenexpensify · 2024-11-06T19:07:26Z

@sakluger , I'm off the next week, can you please keep an eye on this issue til I'm back? Thx

sakluger · 2024-11-08T17:12:59Z

@rayane-djouah could you please check the two proposals we got already to see if they would work? Thanks!

rayane-djouah · 2024-11-09T19:41:27Z

Reviewing 👀

rayane-djouah · 2024-11-09T22:18:58Z

@Nodebrute Thank you for the proposal. However, the proposed solution will not be effective in scenarios where a tooltip is already displayed and a modal (popover) containing another tooltip is opened subsequently:

Screen.Recording.2024-11-09.at.10.07.48.PM.mov

Also, the tooltip will not be closed when we click on the three dots menu in saved searches:

Screen.Recording.2024-11-09.at.11.15.46.PM.mov

rayane-djouah · 2024-11-09T22:19:59Z

@bernhardoj Thank you for your proposal. I agree with your root cause analysis and the solution you've suggested.

🎀👀🎀 C+ reviewed

melvin-bot · 2024-11-09T22:20:16Z

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

bernhardoj · 2024-11-13T05:57:32Z

PR is ready

cc: @rayane-djouah

melvin-bot · 2024-11-28T14:29:17Z

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

melvin-bot · 2024-11-28T14:29:23Z

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

Fix tooltip for QAB doesn't show for new user #52446

If no regressions arise, payment will be issued on 2024-12-05. 🎊

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

@bernhardoj requires payment through NewDot Manual Requests
@rayane-djouah requires payment automatic offer (Reviewer)
@ishpaul777 requires payment (Needs manual offer from BZ)

melvin-bot · 2024-11-28T14:29:24Z

@rayane-djouah @mallenexpensify @rayane-djouah The PR fixing this issue has been merged! The following checklist (instructions) will need to be completed before the issue can be closed. Please copy/paste the BugZero Checklist from here into a new comment on this GH and complete it. If you have the K2 extension, you can simply click: [this button]

rayane-djouah · 2024-11-29T15:05:41Z

BugZero Checklist:

Regression Test Proposal

#### Precondition:

- N/A

#### Test:

1. Log in as a new user.
2. Submit a new expense to any user.
3. Press the FAB (Floating Action Button).
4. Verify that a tooltip is shown for the QAB (Quick Access Bar).
5. Verify that the tooltip auto-hides after 5 seconds.

Do we agree 👍 or 👎

mallenexpensify · 2024-12-02T23:45:09Z

Thanks @rayane-djouah
Test case created

https://github.com/Expensify/Expensify/issues/449650

ishpaul777 · 2024-12-09T16:47:24Z

This seems to be not fixed on mobile screen size

Screen.Recording.2024-12-09.at.10.13.41.PM.mov

Screen.Recording.2024-12-09.at.10.16.32.PM.mov

rayane-djouah · 2024-12-09T18:13:11Z

@ishpaul777 This appears to be a recent regression, reproducible only on staging, and it seems unrelated to our PR, which is already in production:

Screen.Recording.2024-12-09.at.7.09.36.PM.mov

Reported on Slack: https://expensify.slack.com/archives/C049HHMV9SM/p1733768184773589

rayane-djouah · 2024-12-09T21:30:24Z

Resolved: #53777 (comment)

rayane-djouah · 2024-12-09T22:07:18Z

@mallenexpensify This is ready for payment

mallenexpensify · 2024-12-09T22:38:35Z

Contributor: @bernhardoj due $250 via NewDot
Contributor+: @rayane-djouah paid $250 via Upwork.

Thanks!

bernhardoj · 2024-12-10T02:56:39Z

Requested in ND.

JmillsExpensify · 2024-12-11T13:33:17Z

$250 approved for @bernhardoj

m-natarajan added Daily KSv2 Bug Something is broken. Auto assigns a BugZero manager. labels Nov 4, 2024

melvin-bot bot assigned mallenexpensify Nov 4, 2024

mallenexpensify added the External Added to denote the issue can be worked on by a contributor label Nov 6, 2024

melvin-bot bot changed the title ~~First QAB missing tooltip for new user~~ [$250] First QAB missing tooltip for new user Nov 6, 2024

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

melvin-bot bot assigned rayane-djouah Nov 6, 2024

mallenexpensify removed the Help Wanted Apply this label when an issue is open to proposals by contributors label Nov 6, 2024

mallenexpensify added Help Wanted Apply this label when an issue is open to proposals by contributors and removed Bug Something is broken. Auto assigns a BugZero manager. labels Nov 6, 2024

mallenexpensify removed their assignment Nov 6, 2024

mallenexpensify added the Bug Something is broken. Auto assigns a BugZero manager. label Nov 6, 2024

melvin-bot bot assigned sakluger Nov 6, 2024

mallenexpensify self-assigned this Nov 6, 2024

melvin-bot bot assigned pecanoro Nov 9, 2024

melvin-bot bot added the Weekly KSv2 label Nov 13, 2024

mallenexpensify unassigned sakluger Nov 18, 2024

melvin-bot bot added Weekly KSv2 Awaiting Payment Auto-added when associated PR is deployed to production and removed Weekly KSv2 labels Nov 28, 2024

melvin-bot bot changed the title ~~[$250] First QAB missing tooltip for new user~~ [HOLD for payment 2024-12-05] [$250] First QAB missing tooltip for new user Nov 28, 2024

melvin-bot bot removed the Reviewing Has a PR in review label Nov 28, 2024

rayane-djouah mentioned this issue Nov 29, 2024

fix: tooltip show over dialog #49682

Merged

50 tasks

melvin-bot bot added Daily KSv2 Overdue and removed Weekly KSv2 labels Dec 5, 2024

ishpaul777 mentioned this issue Dec 9, 2024

clean up existing Product training tooltips #53396

Merged

50 tasks

melvin-bot bot added Reviewing Has a PR in review Weekly KSv2 and removed Daily KSv2 Overdue labels Dec 9, 2024

mallenexpensify closed this as completed Dec 9, 2024

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

[HOLD for payment 2024-12-05] [$250] First QAB missing tooltip for new user #51987

[HOLD for payment 2024-12-05] [$250] First QAB missing tooltip for new user #51987

m-natarajan commented Nov 4, 2024 •

edited by melvin-bot bot

Loading

melvin-bot bot commented Nov 4, 2024

Nodebrute commented Nov 4, 2024

bernhardoj commented Nov 5, 2024

melvin-bot bot commented Nov 6, 2024

melvin-bot bot commented Nov 6, 2024

mallenexpensify commented Nov 6, 2024 •

edited

Loading

ishpaul777 commented Nov 6, 2024

mallenexpensify commented Nov 6, 2024

melvin-bot bot commented Nov 6, 2024

mallenexpensify commented Nov 6, 2024

sakluger commented Nov 8, 2024

rayane-djouah commented Nov 9, 2024

rayane-djouah commented Nov 9, 2024

rayane-djouah commented Nov 9, 2024

melvin-bot bot commented Nov 9, 2024

bernhardoj commented Nov 13, 2024

melvin-bot bot commented Nov 28, 2024

melvin-bot bot commented Nov 28, 2024

melvin-bot bot commented Nov 28, 2024

rayane-djouah commented Nov 29, 2024 •

edited by mallenexpensify

Loading

mallenexpensify commented Dec 2, 2024

ishpaul777 commented Dec 9, 2024

rayane-djouah commented Dec 9, 2024 •

edited

Loading

rayane-djouah commented Dec 9, 2024

rayane-djouah commented Dec 9, 2024

mallenexpensify commented Dec 9, 2024

bernhardoj commented Dec 10, 2024

JmillsExpensify commented Dec 11, 2024

[HOLD for payment 2024-12-05] [$250] First QAB missing tooltip for new user #51987

[HOLD for payment 2024-12-05] [$250] First QAB missing tooltip for new user #51987

Comments

m-natarajan commented Nov 4, 2024 • edited by melvin-bot bot Loading

Action Performed:

Expected Result:

Actual Result:

Workaround:

Platforms:

Screenshots/Videos

melvin-bot bot commented Nov 4, 2024

Nodebrute commented Nov 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?

What alternative solutions did you explore? (Optional)

bernhardoj commented Nov 5, 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 Nov 6, 2024

melvin-bot bot commented Nov 6, 2024

mallenexpensify commented Nov 6, 2024 • edited Loading

ishpaul777 commented Nov 6, 2024

mallenexpensify commented Nov 6, 2024

melvin-bot bot commented Nov 6, 2024

mallenexpensify commented Nov 6, 2024

sakluger commented Nov 8, 2024

rayane-djouah commented Nov 9, 2024

rayane-djouah commented Nov 9, 2024

rayane-djouah commented Nov 9, 2024

melvin-bot bot commented Nov 9, 2024

bernhardoj commented Nov 13, 2024

melvin-bot bot commented Nov 28, 2024

melvin-bot bot commented Nov 28, 2024

melvin-bot bot commented Nov 28, 2024

rayane-djouah commented Nov 29, 2024 • edited by mallenexpensify Loading

BugZero Checklist:

Regression Test Proposal

mallenexpensify commented Dec 2, 2024

ishpaul777 commented Dec 9, 2024

rayane-djouah commented Dec 9, 2024 • edited Loading

rayane-djouah commented Dec 9, 2024

rayane-djouah commented Dec 9, 2024

mallenexpensify commented Dec 9, 2024

bernhardoj commented Dec 10, 2024

JmillsExpensify commented Dec 11, 2024

m-natarajan commented Nov 4, 2024 •

edited by melvin-bot bot

Loading

mallenexpensify commented Nov 6, 2024 •

edited

Loading

rayane-djouah commented Nov 29, 2024 •

edited by mallenexpensify

Loading

rayane-djouah commented Dec 9, 2024 •

edited

Loading