style(menu): clean up right menu - leaving only "Settings" (#11227)

* style(menu): clean up right menu - leaving only settings

* bring pre-commit back

* fix frontend tests

* pre-commit

* re-introduce subtle '+'

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

@@ -24,9 +24,8 @@ import MenuObject, {
   MenuObjectProps,
   MenuObjectChildProps,
 } from './MenuObject';
-import NewMenu from './NewMenu';
-import UserMenu from './UserMenu';
 import LanguagePicker, { Languages } from './LanguagePicker';
+import NewMenu from './NewMenu';
 
 interface BrandProps {
   path: string;
@@ -90,6 +89,10 @@ const StyledHeader = styled.header`
   .nav > li > a {
     padding: ${({ theme }) => theme.gridUnit * 4}px;
   }
+  .dropdown-header {
+    text-transform: uppercase;
+    padding-left: 12px;
+  }
 
   .navbar-nav > li > a {
     color: ${({ theme }) => theme.colors.grayscale.dark1};
@@ -131,10 +134,6 @@ const StyledHeader = styled.header`
   .navbar-right {
     display: flex;
     align-items: center;
-    .dropdown:first-of-type {
-      /* this is the "+ NEW" button. Sweep this up when it's replaced */
-      margin-right: ${({ theme }) => theme.gridUnit * 2}px;
-    }
   }
 `;
 
@@ -202,7 +201,7 @@ export function Menu({
                 }
                 if (section.isHeader) {
                   return (
-                    <MenuItem key={`${section.label}`} disabled>
+                    <MenuItem key={`${section.label}`} header>
                       {section.label}
                     </MenuItem>
                   );
@@ -218,6 +217,47 @@ export function Menu({
                   </MenuItem>
                 );
               })}
+
+              {!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.version_string && (
+                      <div>Version: {navbarRight.version_string}</div>
+                    )}
+                    {navbarRight.version_sha && (
+                      <div>SHA: {navbarRight.version_sha}</div>
+                    )}
+                  </li>
+                </>
+              )}
             </NavDropdown>
           )}
           {navbarRight.documentation_url && (
@@ -246,14 +286,6 @@ export function Menu({
               languages={navbarRight.languages}
             />
           )}
-          {!navbarRight.user_is_anonymous && (
-            <UserMenu
-              userInfoUrl={navbarRight.user_info_url}
-              userLogoutUrl={navbarRight.user_logout_url}
-              versionString={navbarRight.version_string}
-              versionSha={navbarRight.version_sha}
-            />
-          )}
           {navbarRight.user_is_anonymous && (
             <NavItem href={navbarRight.user_login_url}>
               <i className="fa fa-fw fa-sign-in" />
@@ -280,7 +312,6 @@ export default function MenuWrapper({ data }: MenuProps) {
   // Cycle through menu.menu to build out cleanedMenu and settings
   const cleanedMenu: MenuObjectProps[] = [];
   const settings: MenuObjectProps[] = [];
-
   newMenuData.menu.forEach((item: any) => {
     if (!item) {
       return;