feat: Global nav menus open on hover (#12025)

* hover opens menus

* hover opens menus

* linting, removing some styles I added

* moving useState up (non-conditional)

* just a tweak to prevent a conflict.

superset-frontend/src/components/Menu/LanguagePicker.tsx

@@ -16,7 +16,7 @@
  * specific language governing permissions and limitations
  * under the License.
  */
-import React from 'react';
+import React, { useState } from 'react';
 import { Menu } from 'src/common/components';
 import NavDropdown from 'src/components/NavDropdown';
 
@@ -37,8 +37,13 @@ export default function LanguagePicker({
   locale,
   languages,
 }: LanguagePickerProps) {
+  const [dropdownOpen, setDropdownOpen] = useState(false);
+
   return (
     <NavDropdown
+      onMouseEnter={() => setDropdownOpen(true)}
+      onMouseLeave={() => setDropdownOpen(false)}
+      open={dropdownOpen}
       id="locale-dropdown"
       title={
         <span className="f16">

superset-frontend/src/components/Menu/Menu.tsx

@@ -16,7 +16,7 @@
  * specific language governing permissions and limitations
  * under the License.
  */
-import React from 'react';
+import React, { useState } from 'react';
 import { t, styled } from '@superset-ui/core';
 import { Nav, Navbar, NavItem } from 'react-bootstrap';
 import NavDropdown from 'src/components/NavDropdown';
@@ -154,6 +154,8 @@ const StyledHeader = styled.header`
 export function Menu({
   data: { menu, brand, navbar_right: navbarRight, settings },
 }: MenuProps) {
+  const [dropdownOpen, setDropdownOpen] = useState(false);
+
   return (
     <StyledHeader className="top" id="main-menu">
       <Navbar inverse fluid staticTop role="navigation">
@@ -173,7 +175,13 @@ export function Menu({
         <Nav className="navbar-right">
           {!navbarRight.user_is_anonymous && <NewMenu />}
           {settings && settings.length > 0 && (
-            <NavDropdown id="settings-dropdown" title={t('Settings')}>
+            <NavDropdown
+              id="settings-dropdown"
+              title={t('Settings')}
+              onMouseEnter={() => setDropdownOpen(true)}
+              onMouseLeave={() => setDropdownOpen(false)}
+              open={dropdownOpen}
+            >
               <DropdownMenu>
                 {settings.map((section, index) => [
                   <DropdownMenu.ItemGroup

superset-frontend/src/components/Menu/MenuObject.tsx

@@ -16,7 +16,7 @@
  * specific language governing permissions and limitations
  * under the License.
  */
-import React from 'react';
+import React, { useState } from 'react';
 import { NavItem } from 'react-bootstrap';
 import { Menu } from 'src/common/components';
 import NavDropdown from '../NavDropdown';
@@ -44,6 +44,8 @@ export default function MenuObject({
   url,
   index,
 }: MenuObjectProps) {
+  const [dropdownOpen, setDropdownOpen] = useState(false);
+
   if (url) {
     return (
       <NavItem eventKey={index} href={url}>
@@ -53,7 +55,13 @@ export default function MenuObject({
   }
 
   return (
-    <NavDropdown id={`menu-dropdown-${label}`} title={label}>
+    <NavDropdown
+      id={`menu-dropdown-${label}`}
+      title={label}
+      onMouseEnter={() => setDropdownOpen(true)}
+      onMouseLeave={() => setDropdownOpen(false)}
+      open={dropdownOpen}
+    >
       <Menu>
         {childs?.map((child: MenuObjectChildProps | string, index1: number) => {
           if (typeof child === 'string' && child === '-') {

superset-frontend/src/components/Menu/NewMenu.tsx

@@ -16,7 +16,7 @@
  * specific language governing permissions and limitations
  * under the License.
  */
-import React from 'react';
+import React, { useState } from 'react';
 import { t, styled } from '@superset-ui/core';
 import { Menu } from 'src/common/components';
 import NavDropdown from 'src/components/NavDropdown';
@@ -43,8 +43,16 @@ const StyledI = styled.div`
 `;
 
 export default function NewMenu() {
+  const [dropdownOpen, setDropdownOpen] = useState(false);
+
   return (
-    <NavDropdown id="new-dropdown" title={<StyledI className="fa fa-plus" />}>
+    <NavDropdown
+      id="new-dropdown"
+      title={<StyledI className="fa fa-plus" />}
+      onMouseEnter={() => setDropdownOpen(true)}
+      onMouseLeave={() => setDropdownOpen(false)}
+      open={dropdownOpen}
+    >
       <Menu>
         {dropdownItems.map((menu, i) => (
           <Menu.Item key={i}>