Fix tooltip for QAB doesn't show for new user #52446
Merged
Conversation
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
|
@rayane-djouah Please copy/paste the Reviewer Checklist from here into a new comment on this PR and complete it. If you have the K2 extension, you can simply click: [this button] |
|
I use a different approach since the previous one fails to close the tooltip automatically. The new solution is similar to actions/Modal.ts Lines 13 to 24 in 7256ad6 There are 2 cases we need to handle for tooltip.
So, TooltipManager holds all the pending and active tooltip. When a modal will show, we cancel them all. |
bernhardoj
commented
Nov 13, 2024
| @@ -86,6 +87,9 @@ function setDisableDismissOnEscape(disableDismissOnEscape: boolean) { | |||
| * isPopover indicates that the next open modal is popover or bottom docked | |||
| */ | |||
| function willAlertModalBecomeVisible(isVisible: boolean, isPopover = false) { | |||
| if (isVisible) { | |||
| TooltipManager.cancelPendingAndActiveTooltips(); | |||
| } | |||
There was a problem hiding this comment.
We only cancel it in willAlertModalBecomeVisible and not in setModalVisibility because setModalVisibility is called when the modal is shown, not when the modal will show.
App/src/components/Modal/BaseModal.tsx
Lines 102 to 109 in 7256ad6
App/src/components/Modal/BaseModal.tsx
Lines 131 to 136 in 7256ad6
There was a problem hiding this comment.
Could you please add a comment in the code for this?
bernhardoj
commented
Nov 13, 2024
| @@ -202,6 +203,7 @@ const RootStack = createCustomStackNavigator<AuthScreensParamList>(); | |||
|
|
|||
| const modalScreenListeners = { | |||
| focus: () => { | |||
| TooltipManager.cancelPendingAndActiveTooltips(); | |||
| Modal.setModalVisibility(true); | |||
| }, | |||
There was a problem hiding this comment.
And because the RHP modal uses setModalVisbility, we need to manually cancel it here.
There was a problem hiding this comment.
Could you please add a comment in the code for this?
Reviewer Checklist
Screenshots/VideosAndroid: NativeScreen.Recording.2024-11-23.at.12.52.34.PM.movAndroid: mWeb ChromeScreen.Recording.2024-11-23.at.12.46.48.PM.moviOS: NativeSimulator.Screen.Recording.-.iPhone.15.Pro.Max.-.2024-11-23.at.12.44.50.mp4iOS: mWeb SafariSimulator.Screen.Recording.-.iPhone.15.Pro.Max.-.2024-11-23.at.12.46.14.mp4MacOS: Chrome / SafariScreen.Recording.2024-11-23.at.12.37.12.PM.movMacOS: DesktopScreen.Recording.2024-11-23.at.12.35.55.PM.mov |
rayane-djouah
suggested changes
Nov 20, 2024
Comment on lines
1
to
2
| const pendingTooltip: NodeJS.Timeout[] = []; | ||
| const tooltipCloseCallback: Array<() => void> = []; |
There was a problem hiding this comment.
Suggested change
| const pendingTooltip: NodeJS.Timeout[] = []; | |
| const tooltipCloseCallback: Array<() => void> = []; | |
| const pendingTooltips = new Set<NodeJS.Timeout>(); | |
| const activeTooltips = new Set<() => void>(); |
Comment on lines
5
to
9
| pendingTooltip.push(timeout); | ||
| return () => { | ||
| const index = pendingTooltip.indexOf(timeout); | ||
| pendingTooltip.splice(index, 1); | ||
| }; |
There was a problem hiding this comment.
Suggested change
| pendingTooltip.push(timeout); | |
| return () => { | |
| const index = pendingTooltip.indexOf(timeout); | |
| pendingTooltip.splice(index, 1); | |
| }; | |
| pendingTooltips.add(timeout); | |
| return () => { | |
| pendingTooltips.delete(timeout); | |
| }; |
Comment on lines
13
to
17
| tooltipCloseCallback.push(closeCallback); | ||
| return () => { | ||
| const index = tooltipCloseCallback.indexOf(closeCallback); | ||
| tooltipCloseCallback.splice(index, 1); | ||
| }; |
There was a problem hiding this comment.
Suggested change
| tooltipCloseCallback.push(closeCallback); | |
| return () => { | |
| const index = tooltipCloseCallback.indexOf(closeCallback); | |
| tooltipCloseCallback.splice(index, 1); | |
| }; | |
| activeTooltips.add(closeCallback); | |
| return () => { | |
| activeTooltips.delete(closeCallback); | |
| }; |
Comment on lines
21
to
26
| while (pendingTooltip.length > 0) { | ||
| clearTimeout(pendingTooltip.pop()); | ||
| } | ||
| while (tooltipCloseCallback.length > 0) { | ||
| tooltipCloseCallback.pop()?.(); | ||
| } |
There was a problem hiding this comment.
Suggested change
| while (pendingTooltip.length > 0) { | |
| clearTimeout(pendingTooltip.pop()); | |
| } | |
| while (tooltipCloseCallback.length > 0) { | |
| tooltipCloseCallback.pop()?.(); | |
| } | |
| pendingTooltips.forEach((timeout) => clearTimeout(timeout)); | |
| pendingTooltips.clear(); | |
| activeTooltips.forEach((closeCallback) => closeCallback()); | |
| activeTooltips.clear(); |
rayane-djouah
suggested changes
Nov 20, 2024
| }; | ||
| }, [shouldRender]); | ||
| const removeActiveTooltipRef = useRef(() => {}); | ||
| const removePendingToltipRef = useRef(() => {}); |
There was a problem hiding this comment.
Suggested change
| const removePendingToltipRef = useRef(() => {}); | |
| const removePendingTooltipRef = useRef(() => {}); |
rayane-djouah
suggested changes
Nov 20, 2024
Comment on lines
1
to
2
| const pendingTooltip: NodeJS.Timeout[] = []; | ||
| const tooltipCloseCallback: Array<() => void> = []; |
There was a problem hiding this comment.
Suggested change
| const pendingTooltip: NodeJS.Timeout[] = []; | |
| const tooltipCloseCallback: Array<() => void> = []; | |
| // We store the timeouts for each pending tooltip here. We're using the timeout because when a tooltip is used inside an animated view (e.g., popover), we need to wait for the animation to finish before measuring content. | |
| const pendingTooltipsTimouts: NodeJS.Timeout[] = []; | |
| // We store the callback for closing a tooltip here. | |
| const closeActiveTooltipCallbacks: Array<() => void> = []; |
|
Addressed all |
rayane-djouah
approved these changes
Nov 23, 2024
pecanoro
approved these changes
Nov 26, 2024
|
✋ This PR was not deployed to staging yet because QA is ongoing. It will be automatically deployed to staging after the next production release. |
75 tasks
|
🚀 Deployed to staging by https://github.com/pecanoro in version: 9.0.67-0 🚀
|
|
🚀 Deployed to production by https://github.com/mountiny in version: 9.0.67-9 🚀
|
8 tasks
50 tasks
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
Explanation of Change
We previously prevent the tooltip to show in a modal. In this PR, we hide the tooltip when a modal will show.
Fixed Issues
$ #51987
PROPOSAL: #51987 (comment)
Tests
Same as QA Steps
Offline tests
Same as QA Steps
QA Steps
// TODO: These must be filled out, or the issue title must include "[No QA]."
PR Author Checklist
### Fixed Issuessection aboveTestssectionOffline stepssectionQA stepssectiontoggleReportand notonIconClick)src/languages/*files and using the translation methodSTYLE.md) were followedAvatar, I verified the components usingAvatarare working as expected)StyleUtils.getBackgroundAndBorderStyle(theme.componentBG))Avataris modified, I verified thatAvataris working as expected in all cases)Designlabel and/or tagged@Expensify/designso the design team can review the changes.ScrollViewcomponent to make it scrollable when more elements are added to the page.mainbranch was merged into this PR after a review, I tested again and verified the outcome was still expected according to theTeststeps.Screenshots/Videos
Android: Native
android.mp4
Android: mWeb Chrome
android.mweb.mp4
iOS: Native
ios.mp4
iOS: mWeb Safari
ios.mweb.mp4
MacOS: Chrome / Safari
web.mp4
MacOS: Desktop
desktop.mp4