style: Move security/manage navigation tabs into a settings dropdown (#10439)

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

@@ -18,7 +18,7 @@
  */
 import React from 'react';
 import { t } from '@superset-ui/translation';
-import { Nav, Navbar, NavItem } from 'react-bootstrap';
+import { Nav, Navbar, NavDropdown, NavItem, MenuItem } from 'react-bootstrap';
 import styled from '@superset-ui/style';
 import MenuObject, { MenuObjectProps } from './MenuObject';
 import NewMenu from './NewMenu';
@@ -51,6 +51,7 @@ export interface MenuProps {
     menu: MenuObjectProps[];
     brand: BrandProps;
     navbar_right: NavBarProps;
+    settings: MenuObjectProps[];
   };
 }
 
@@ -115,11 +116,44 @@ const StyledHeader = styled.header`
       margin: 0;
     }
   }
+
+  .settings-divider {
+    margin-bottom: 8px;
+    border-bottom: 1px solid ${({ theme }) => theme.colors.grayscale.light2};
+  }
 `;
 
 export default function Menu({
-  data: { menu, brand, navbar_right: navbarRight },
+  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">
@@ -138,6 +172,38 @@ export default function Menu({
         </Nav>
         <Nav className="navbar-right">
           {!navbarRight.user_is_anonymous && <NewMenu />}
+          {settings && settings.length && (
+            <NavDropdown id={`settings-dropdown`} title="Settings">
+              {flatSettings.map((section, index) => {
+                if (section === '-') {
+                  return (
+                    <MenuItem
+                      key={`$${index}`}
+                      divider
+                      disabled
+                      className="settings-divider"
+                    />
+                  );
+                } else if (section.isHeader) {
+                  return (
+                    <MenuItem key={`${section.label}`} disabled>
+                      {section.label}
+                    </MenuItem>
+                  );
+                }
+
+                return (
+                  <MenuItem
+                    key={`${section.label}`}
+                    href={section.url}
+                    eventKey={index}
+                  >
+                    {section.label}
+                  </MenuItem>
+                );
+              })}
+            </NavDropdown>
+          )}
           {navbarRight.documentation_url && (
             <NavItem
               href={navbarRight.documentation_url}