Buttons with tooltip raise deprecation warning in StrictMode

Bug Description

Initially raised as part of the bug bash for dashboard sharing, this issue is not DS-specific and applies to all Button component use with tooltips.

To reproduce, open the browser console and then hover a button that has a tooltip (e.g. user menu, help menu, idea hub action button, etc). They all raise the same warning (with a different trace):

Warning: findDOMNode is deprecated in StrictMode. findDOMNode was passed an instance of Transition which is inside StrictMode. Instead, add a ref directly to the element you want to reference. Learn more about using refs safely here: https://fb.me/react-strict-mode-find-node

Bug bash issue

Bug bash issue: https://app.asana.com/0/1202258919887896/1202436389160100 please refer to Asana issue for background

Not sure exactly how I triggered this but noticed it in the console. We don’t use this prop directly anywhere but the trace indicates UserRoleSelect.

Warning: Failed prop type: Material-UI: The `anchorEl` prop provided to the component is invalid.
The anchor element should be part of the document layout.
Make sure the element is present in the document or that it's not display none.
    in ForwardRef(Popper) (created by ForwardRef(Tooltip))
    in ForwardRef(Tooltip) (created by WithStyles(ForwardRef(Tooltip)))
    in WithStyles(ForwardRef(Tooltip)) (created by Button)
    in Button (created by UserRoleSelect)
    in div (created by UserRoleSelect)
    in UserRoleSelect (created by Module)
    in div (created by Module)
    in div (created by Module)
    in Module (created by DashboardSharingSettings)
    in div (created by DashboardSharingSettings)
    in div (created by DashboardSharingSettings)
    in DashboardSharingSettings (created by DashboardSharingSettingsButton)
    in div (created by DashboardSharingSettingsButton)
    in div
    in Unknown (created by DashboardSharingSettingsButton)
    in div (created by e)
    in div (created by e)
    in div (created by e)
    in e (created by DashboardSharingSettingsButton)
    in Portal (created by DashboardSharingSettingsButton)
    in DashboardSharingSettingsButton (created by DashboardMainApp)
    in div (created by Cell)
    in Cell (created by Header)
    in div (created by Row)
    in Row (created by Header)
    in div (created by ForwardRef)
    in ForwardRef (created by Header)
    in header (created by Header)
    in Header (created by DashboardMainApp)
    in DashboardMainApp (created by DashboardEntryPoint)
    in DashboardEntryPoint
    in RestoreSnapshots (created by Root)
    in ErrorHandler (created by Root)
    in Root

Steps to reproduce

Note: this warning will only appear in development builds because it is triggered by React’s Strict Mode

1. Go to the Site Kit dashboard
2. Hover a button that has a tooltip (e.g. user menu avatar button)
3. See warning in console

---

Do not alter or remove anything below. The following sections will be managed by moderators only.

Acceptance criteria

• Buttons with tooltips should not raise deprecation warnings when interacting with them

Implementation Brief

• Within assets/js/components/Root/index.js:
  • As per this comment, within say <ViewContextProvider>, add <ThemeProvider theme={createTheme}> where createTheme is unstable_createMuiStrictModeTheme() only when in dev mode, otherwise it is createTheme(). <ThemeProvider>, unstable_createMuiStrictModeTheme and createTheme should all be imported from '@material-ui/core'

Test Coverage

• No new tests required.

QA Brief

• In addition to verifying the ACs:
  • This issue makes a change to the <Root> component which is used by all pages of the plugin. Hence, smoke testing should be done on all pages, including the WP Admin Bar and WP Dashboard.

Changelog entry

• Fix React StrictMode warning when using Material button tooltips in development mode.

[eclarke1]

@wpdarren see comment above, could you please try to reproduce this one again?

[wpdarren]

QA Update: ✅

Verified:

• Buttons with tooltips do not raise deprecation warnings when interacting with them.
• I tested this on develop branch and also on the development build.
• I went through all of the pages within Site Kit and did not discover any additional warnings or errors in the console.