chore: move data nav menu to plus menu

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

@@ -89,6 +89,44 @@ const mockedProps = {
         url: '/dashboard/list/',
         index: 4,
       },
+      {
+        name: 'Data',
+        icon: 'fa-database',
+        label: 'Data',
+        childs: [
+          {
+            name: 'Databases',
+            icon: 'fa-database',
+            label: 'Databases',
+            url: '/databaseview/list/',
+          },
+          {
+            name: 'Datasets',
+            icon: 'fa-table',
+            label: 'Datasets',
+            url: '/tablemodelview/list/',
+          },
+          '-',
+          {
+            name: 'Upload a CSV',
+            icon: 'fa-upload',
+            label: 'Upload a CSV',
+            url: '/csvtodatabaseview/form',
+          },
+          {
+            name: 'Upload a Columnar file',
+            icon: 'fa-upload',
+            label: 'Upload a Columnar File',
+            url: '/columnartodatabaseview/form',
+          },
+          {
+            name: 'Upload Excel',
+            icon: 'fa-upload',
+            label: 'Upload Excel',
+            url: '/exceltodatabaseview/form',
+          },
+        ],
+      },
     ],
     brand: {
       path: '/superset/profile/admin/',
@@ -220,13 +258,11 @@ test('should render the dropdown items', async () => {
   render(<Menu {...notanonProps} />);
   const dropdown = screen.getByTestId('new-dropdown-icon');
   userEvent.hover(dropdown);
-  expect(await screen.findByText(dropdownItems[0].label)).toHaveAttribute(
+  // Todo: test data submenu
+  expect(await screen.findByText(dropdownItems[1].label)).toHaveAttribute(
     'href',
-    dropdownItems[0].url,
+    dropdownItems[1].url,
   );
-  expect(
-    screen.getByTestId(`menu-item-${dropdownItems[0].label}`),
-  ).toBeInTheDocument();
   expect(await screen.findByText(dropdownItems[1].label)).toHaveAttribute(
     'href',
     dropdownItems[1].url,

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

@@ -75,8 +75,8 @@ export interface MenuProps {
 interface MenuObjectChildProps {
   label: string;
   name?: string;
-  icon: string;
-  index: number;
+  icon?: string;
+  index?: number;
   url?: string;
   isFrontendRoute?: boolean;
 }
@@ -185,6 +185,24 @@ export function Menu({
   const screens = useBreakpoint();
   const uiConig = useUiConfig();
 
+  const nonItemsToRender = {
+    'Upload a CSV': 'Upload a CSV',
+    'Upload a Columnar File': 'Upload a Columnar File',
+    'Upload Excel': 'Upload Excel',
+  };
+
+  const createPlusMenuItems = () => {
+    const list: any = [];
+    const dataMenu = menu.filter(item => item.name === 'Data');
+    if (dataMenu[0].childs) {
+      dataMenu[0]?.childs.forEach(menuItem => {
+        if (typeof menuItem !== 'string' && nonItemsToRender[menuItem.label]) {
+          list.push(menuItem);
+        }
+      });
+    }
+    return list;
+  };
   useEffect(() => {
     function handleResize() {
       if (window.innerWidth <= 767) {
@@ -230,6 +248,9 @@ export function Menu({
         icon={showMenu === 'inline' ? <></> : <Icons.TriangleDown />}
       >
         {childs?.map((child: MenuObjectChildProps | string, index1: number) => {
+          if (typeof child !== 'string' && nonItemsToRender[child.label]) {
+            return null;
+          }
           if (typeof child === 'string' && child === '-') {
             return <DropdownMenu.Divider key={`$${index1}`} />;
           }
@@ -259,6 +280,15 @@ export function Menu({
           .ant-menu-submenu.ant-menu-submenu-popup.ant-menu.ant-menu-light {
             border-radius: 0px;
           }
+          .ant-menu-vertical
+            > .ant-menu-submenu.data-menu
+            > .ant-menu-submenu-title {
+            height: 28px;
+            i {
+              padding-right: 8px;
+              margin-left: 7px;
+            }
+          }
         `}
       />
       <Row>
@@ -305,6 +335,7 @@ export function Menu({
         </Col>
         <Col md={8} xs={24}>
           <RightMenu
+            menuProps={createPlusMenuItems()}
             align={screens.md ? 'flex-end' : 'flex-start'}
             settings={settings}
             navbarRight={navbarRight}

superset-frontend/src/views/components/MenuRight.tsx

@@ -28,6 +28,10 @@ import LanguagePicker from './LanguagePicker';
 import { NavBarProps, MenuObjectProps } from './Menu';
 
 export const dropdownItems = [
+  {
+    label: t('Data'),
+    icon: 'fa-database',
+  },
   {
     label: t('SQL query'),
     url: '/superset/sqllab?new=true',
@@ -85,13 +89,15 @@ interface RightMenuProps {
   settings: MenuObjectProps[];
   navbarRight: NavBarProps;
   isFrontendRoute: (path?: string) => boolean;
+  menuProps: Array<MenuObjectProps>;
 }
 
 const RightMenu = ({
   align,
   settings,
   navbarRight,
   isFrontendRoute,
+  menuProps,
 }: RightMenuProps) => {
   const { roles } = useSelector<any, UserWithPermissionsAndRoles>(
     state => state.user,
@@ -102,6 +108,12 @@ const RightMenu = ({
   const canDashboard = findPermission('can_write', 'Dashboard', roles);
   const canChart = findPermission('can_write', 'Chart', roles);
   const showActionDropdown = canSql || canChart || canDashboard;
+  const menuIconAndLabel = (menu: MenuObjectProps) => (
+    <>
+      <i data-test={`menu-item-${menu.label}`} className={`fa ${menu.icon}`} />
+      {menu.label}
+    </>
+  );
   return (
     <StyledDiv align={align}>
       <Menu mode="horizontal">
@@ -113,9 +125,28 @@ const RightMenu = ({
             }
             icon={<Icons.TriangleDown />}
           >
-            {dropdownItems.map(
-              menu =>
-                findPermission(menu.perm, menu.view, roles) && (
+            {dropdownItems.map(menu => {
+              if (menu.label === 'Data') {
+                return (
+                  <SubMenu
+                    key="sub2"
+                    className="data-menu"
+                    title={menuIconAndLabel(menu as MenuObjectProps)}
+                  >
+                    {menuProps.map(item => (
+                      <Menu.Item key={item.name}>
+                        <a href={item.url}> {item.label} </a>
+                      </Menu.Item>
+                    ))}
+                  </SubMenu>
+                );
+              }
+              return (
+                findPermission(
+                  menu.perm as string,
+                  menu.view as string,
+                  roles,
+                ) && (
                   <Menu.Item key={menu.label}>
                     <a href={menu.url}>
                       <i
@@ -125,8 +156,9 @@ const RightMenu = ({
                       {menu.label}
                     </a>
                   </Menu.Item>
-                ),
-            )}
+                )
+              );
+            })}
           </SubMenu>
         )}
         <SubMenu