refactor: Use Antd Menu in Menu component (#11528)

* Menu dropdown refactored

* MenuObject refactored

* Fix unit tests

* Style menu

* Use theme variables

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

@@ -18,8 +18,9 @@
  */
 import React from 'react';
 import { t, styled } from '@superset-ui/core';
-import { Nav, Navbar, NavItem, MenuItem } from 'react-bootstrap';
+import { Nav, Navbar, NavItem } from 'react-bootstrap';
 import NavDropdown from 'src/components/NavDropdown';
+import { Menu as DropdownMenu } from 'src/common/components';
 import MenuObject, {
   MenuObjectProps,
   MenuObjectChildProps,
@@ -71,7 +72,10 @@ const StyledHeader = styled.header`
   }
 
   .version-info {
-    padding: 5px 20px;
+    padding: ${({ theme }) => theme.gridUnit * 1.5}px
+      ${({ theme }) => theme.gridUnit * 4}px
+      ${({ theme }) => theme.gridUnit * 1.5}px
+      ${({ theme }) => theme.gridUnit * 7}px;
     color: ${({ theme }) => theme.colors.grayscale.base};
     font-size: ${({ theme }) => theme.typography.sizes.xs}px;
 
@@ -107,7 +111,6 @@ const StyledHeader = styled.header`
       left: 50%;
       width: 0;
       height: 3px;
-      background-color: ${({ theme }) => theme.colors.primary.base};
       opacity: 0;
       transform: translateX(-50%);
       transition: all ${({ theme }) => theme.transitionTiming}s;
@@ -127,10 +130,6 @@ const StyledHeader = styled.header`
     }
   }
 
-  .settings-divider {
-    margin-bottom: 8px;
-    border-bottom: 1px solid ${({ theme }) => theme.colors.grayscale.light2};
-  }
   .navbar-right {
     display: flex;
     align-items: center;
@@ -140,34 +139,6 @@ const StyledHeader = styled.header`
 export function Menu({
   data: { menu, brand, navbar_right: navbarRight, settings },
 }: MenuProps) {
-  // Flatten settings
-  const flatSettings: any[] = [];
-
-  if (settings) {
-    settings.forEach((section: object, index: number) => {
-      const newSection: MenuObjectProps = {
-        ...section,
-        index,
-        isHeader: true,
-      };
-
-      flatSettings.push(newSection);
-
-      // Filter out '-'
-      if (newSection.childs) {
-        newSection.childs.forEach((child: any) => {
-          if (child !== '-') {
-            flatSettings.push(child);
-          }
-        });
-      }
-
-      if (index !== settings.length - 1) {
-        flatSettings.push('-');
-      }
-    });
-  }
-
   return (
     <StyledHeader className="top" id="main-menu">
       <Navbar inverse fluid staticTop role="navigation">
@@ -188,76 +159,56 @@ export function Menu({
           {!navbarRight.user_is_anonymous && <NewMenu />}
           {settings && settings.length > 0 && (
             <NavDropdown id="settings-dropdown" title={t('Settings')}>
-              {flatSettings.map((section, index) => {
-                if (section === '-') {
-                  return (
-                    <MenuItem
-                      key={`$${index}`}
-                      divider
-                      disabled
-                      className="settings-divider"
-                    />
-                  );
-                }
-                if (section.isHeader) {
-                  return (
-                    <MenuItem key={`${section.label}`} header>
-                      {section.label}
-                    </MenuItem>
-                  );
-                }
-
-                return (
-                  <MenuItem
+              <DropdownMenu>
+                {settings.map((section, index) => [
+                  <DropdownMenu.ItemGroup
                     key={`${section.label}`}
-                    href={section.url}
-                    eventKey={index}
+                    title={section.label}
                   >
-                    {section.label}
-                  </MenuItem>
-                );
-              })}
+                    {section.childs?.map(child => {
+                      if (typeof child !== 'string') {
+                        return (
+                          <DropdownMenu.Item key={`${child.label}`}>
+                            <a href={child.url}>{child.label}</a>
+                          </DropdownMenu.Item>
+                        );
+                      }
+                      return null;
+                    })}
+                  </DropdownMenu.ItemGroup>,
+                  index < settings.length - 1 && <DropdownMenu.Divider />,
+                ])}
 
-              {!navbarRight.user_is_anonymous && (
-                <>
-                  <MenuItem
-                    key="user-divider"
-                    divider
-                    disabled
-                    className="settings-divider"
-                  />
-                  <MenuItem key="user-section" header>
-                    {t('User')}
-                  </MenuItem>
-                  <MenuItem href={navbarRight.user_info_url}>
-                    {t('Profile')}
-                  </MenuItem>
-                  <MenuItem href={navbarRight.user_logout_url}>
-                    {t('Logout')}
-                  </MenuItem>
-                </>
-              )}
-              {(navbarRight.version_string || navbarRight.version_sha) && (
-                <>
-                  <MenuItem
-                    key="user-divider"
-                    divider
-                    disabled
-                    className="settings-divider"
-                  />
-                  <MenuItem key="about-section" header>
-                    {t('About')}
-                  </MenuItem>
-                  <li className="version-info">
+                {!navbarRight.user_is_anonymous && [
+                  <DropdownMenu.Divider key="user-divider" />,
+                  <DropdownMenu.ItemGroup key="user-section" title={t('User')}>
+                    <DropdownMenu.Item key="profile">
+                      <a href={navbarRight.user_info_url}>{t('Profile')}</a>
+                    </DropdownMenu.Item>
+                    <DropdownMenu.Item key="logout">
+                      <a href={navbarRight.user_logout_url}>{t('Logout')}</a>
+                    </DropdownMenu.Item>
+                  </DropdownMenu.ItemGroup>,
+                ]}
+                {(navbarRight.version_string || navbarRight.version_sha) && [
+                  <DropdownMenu.Divider key="user-divider" />,
+                  <DropdownMenu.ItemGroup
+                    key="about-section"
+                    title={t('About')}
+                  >
                     {navbarRight.version_string && (
-                      <div>Version: {navbarRight.version_string}</div>
+                      <li className="version-info">
+                        <span>Version: {navbarRight.version_string}</span>
+                      </li>
                     )}
                     {navbarRight.version_sha && (
-                      <div>SHA: {navbarRight.version_sha}</div>
+                      <li className="version-info">
+                        <span>SHA: {navbarRight.version_sha}</span>
+                      </li>
                     )}
-                  </li>
-                </>
-              )}
+                  </DropdownMenu.ItemGroup>,
+                ]}
+              </DropdownMenu>
             </NavDropdown>
           )}
           {navbarRight.documentation_url && (