POC - Add tooltip to modal, Modal provider (for computer challenge, language picker, game fork)

[andrewjcasal]

Fixes #

Screen.Recording.2024-10-05.at.3.44.28.PM.mov

Background

• We had been unable to add tooltips on modals because modals were never a nested component under the main tree containing the DynamicHelp provider.
• Feel free to try this out by following the video!

Proposed Changes

• Infrastructure: add the modal provider as a component under the OGSHelpProvider to consumer tooltip information.
• ActivateTooltip - React component to make it easy to trigger tooltips anywhere. Happy to update if I'm not handling all cases.
• Modal Context
• Modal Provider - A context for modals to be rendered at the top of the tree, right under the DynamicHelp functionality. CURRENTLY used only for creating a computer challenge
• Modal Registry - This will include the list of modals that will use this logic - currently there's only three. Other modals can be added to the registry over time, or can use the register and unregister functions to do this dynamically.
• ForkModal and LanguagePickerModal switched to functional components to better utilize useContext.
• Backwards compatibility with other existing modals.

[github-actions]

Uffizzi Ephemeral Environment Deploying

☁️ https://app.uffizzi.com/github.com/online-go/online-go+com/pull/2845

⚙️ Updating now by workflow run 11506001637.

What is Uffizzi? Learn more!

[anoek]

I'm switching this to draft until while you work on it, feel free to change it back to ready for merge when you're ready

[anoek]

Aside from the test message, it seems to function well to me. @GreenAsJade does all of this look good from an RDH perspective?

[anoek]

Thanks for fixing the tests!

[anoek]

I think this is the cause of:

I think we can probably get rid of that before merging?

[GreenAsJade]

I love the look of Modal implementation now - it cleaned up heaps since last review.

The "test for whether RDH works" is not implemented in the normal RDH way, and it would probably be worth doing it "the RDH way" to totally confirm everything works.

Instead of instantiating a component like ActivateTooltip, you want to get registerTargetItem from the DynamicHelp context and use that to point to the react component that should be annotated. You don't need to "trigger the flow" if you have ShowInitially set, which you do.

This is probably most simply demonstrated in OnlineLeagueSpectatorLanding.tsx and src/views/HelpFlows/OOLSpectatorIntro.tsx .

[GreenAsJade]

@andrewjcasal I realised an even better way of testing this is to get rid of the TBD in GameLog :)

I thought "oh, I will quickly do that right now", but of course that requires GameLogModal to be a new modal, which is not a 2 minute job.

I can do it when I have a moment soonish, or if you add it to the PR, I'll test it out.

[GreenAsJade]

See above PR: I made GameLogModal use this, which lets it have RDH about autoscore (🎉). I took out the "test case" RDH, and did a slight refactor as per comment on that commit.

[anoek]

Marking as draft while stuff is being worked on, mark as ready to merge when everything is set, and thanks again!