feat: allow uploads in crud view

superset-frontend/src/views/CRUD/data/database/DatabaseList.test.jsx

@@ -18,6 +18,7 @@
  */
 import React from 'react';
 import thunk from 'redux-thunk';
+import * as redux from 'react-redux'
 import configureStore from 'redux-mock-store';
 import fetchMock from 'fetch-mock';
 import { Provider } from 'react-redux';
@@ -26,6 +27,7 @@ import { render, screen, cleanup } from 'spec/helpers/testing-library';
 import userEvent from '@testing-library/user-event';
 import { QueryParamProvider } from 'use-query-params';
 import * as featureFlags from 'src/featureFlags';
+import { getMockStore } from 'spec/fixtures/mockStore';
 
 import DatabaseList from 'src/views/CRUD/data/database/DatabaseList';
 import DatabaseModal from 'src/views/CRUD/data/database/DatabaseModal';
@@ -38,7 +40,20 @@ import { act } from 'react-dom/test-utils';
 
 // store needed for withToasts(DatabaseList)
 const mockStore = configureStore([thunk]);
-const store = mockStore({});
+const store = mockStore({ common: { config: {
+  CSV_EXTENSIONS: ['hello']
+} }});
+
+const mockAppState = { 
+  common: { 
+    config: {
+      CSV_EXTENSIONS: ['csv'],
+      EXCEL_EXTENSIONS: ['xls', 'xlsx'],
+      COLUMNAR_EXTENSIONS: ['parquet', 'zip'],
+      ALLOWED_EXTENSIONS: ['parquet', 'zip', 'xls', 'xlsx', 'csv'],
+    } 
+  }
+};
 
 const databasesInfoEndpoint = 'glob:*/api/v1/database/_info*';
 const databasesEndpoint = 'glob:*/api/v1/database/?*';
@@ -94,16 +109,27 @@ fetchMock.get(databaseRelatedEndpoint, {
   },
 });
 
+const useSelectorMock = jest.spyOn(redux, 'useSelector');
+
 describe('DatabaseList', () => {
+
+  useSelectorMock.mockReturnValue({
+    CSV_EXTENSIONS: ['csv'],
+    EXCEL_EXTENSIONS: ['xls', 'xlsx'],
+    COLUMNAR_EXTENSIONS: ['parquet', 'zip'],
+    ALLOWED_EXTENSIONS: ['parquet', 'zip', 'xls', 'xlsx', 'csv'],
+  });
+
   const wrapper = mount(
     <Provider store={store}>
       <DatabaseList user={mockUser} />
     </Provider>,
   );
+
   beforeAll(async () => {
     await waitForComponentToPaint(wrapper);
   });
-
+  
   it('renders', () => {
     expect(wrapper.find(DatabaseList)).toExist();
   });
@@ -195,6 +221,7 @@ describe('RTL', () => {
           <DatabaseList user={mockUser} />
         </QueryParamProvider>,
         { useRedux: true },
+        mockAppState 
       );
     });
 

superset-frontend/src/views/CRUD/data/database/DatabaseList.tsx

@@ -18,10 +18,14 @@
  */
 import { SupersetClient, t, styled } from '@superset-ui/core';
 import React, { useState, useMemo } from 'react';
+import { useSelector } from 'react-redux';
 import Loading from 'src/components/Loading';
 import { isFeatureEnabled, FeatureFlag } from 'src/featureFlags';
 import { useListViewResource } from 'src/views/CRUD/hooks';
-import { createErrorHandler } from 'src/views/CRUD/utils';
+import {
+  createErrorHandler,
+  checkUploadExtensions,
+} from 'src/views/CRUD/utils';
 import withToasts from 'src/components/MessageToasts/withToasts';
 import SubMenu, { SubMenuProps } from 'src/views/components/SubMenu';
 import DeleteModal from 'src/components/DeleteModal';
@@ -31,6 +35,7 @@ import ListView, { FilterOperator, Filters } from 'src/components/ListView';
 import { commonMenuData } from 'src/views/CRUD/data/common';
 import ImportModelsModal from 'src/components/ImportModal/index';
 import handleResourceExport from 'src/utils/export';
+import { ExtentionConfigs } from 'src/views/components/types';
 import DatabaseModal from './DatabaseModal';
 
 import { DatabaseObject } from './types';
@@ -103,6 +108,12 @@ function DatabaseList({ addDangerToast, addSuccessToast }: DatabaseListProps) {
   const [importingDatabase, showImportModal] = useState<boolean>(false);
   const [passwordFields, setPasswordFields] = useState<string[]>([]);
   const [preparingExport, setPreparingExport] = useState<boolean>(false);
+  const {
+    CSV_EXTENSIONS,
+    COLUMNAR_EXTENSIONS,
+    EXCEL_EXTENSIONS,
+    ALLOWED_EXTENSIONS,
+  } = useSelector<any, ExtentionConfigs>(state => state.common.conf);
 
   const openDatabaseImportModal = () => {
     showImportModal(true);
@@ -171,8 +182,43 @@ function DatabaseList({ addDangerToast, addSuccessToast }: DatabaseListProps) {
   const canExport =
     hasPerm('can_export') && isFeatureEnabled(FeatureFlag.VERSIONED_EXPORT);
 
+  const uploadDropdownMenu = [
+    {
+      label: t('Upload file to database'),
+      childs: [
+        {
+          label: t('Upload a CSV'),
+          name: 'Upload a CSV',
+          url: '/csvtodatabaseview/form',
+          perm: CSV_EXTENSIONS,
+        },
+        {
+          label: t('Upload a Columnar File'),
+          name: 'Upload a Columnar file',
+          url: '/columnartodatabaseview/form',
+          perm: COLUMNAR_EXTENSIONS,
+        },
+        {
+          label: t('Upload Excel'),
+          name: 'Upload Excel',
+          url: '/exceltodatabaseview/form',
+          perm: EXCEL_EXTENSIONS,
+        },
+      ],
+    },
+  ];
+
+  const filteredDropDown = uploadDropdownMenu.map(link => {
+    // eslint-disable-next-line no-param-reassign
+    link.childs = link.childs.filter(item =>
+      checkUploadExtensions(item.perm, ALLOWED_EXTENSIONS),
+    );
+    return link;
+  });
+
   const menuData: SubMenuProps = {
     activeChild: 'Databases',
+    dropDownLinks: filteredDropDown,
     ...commonMenuData,
   };
 
@@ -222,6 +268,7 @@ function DatabaseList({ addDangerToast, addSuccessToast }: DatabaseListProps) {
   }
 
   const initialSort = [{ id: 'changed_on_delta_humanized', desc: true }];
+
   const columns = useMemo(
     () => [
       {

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

@@ -67,7 +67,7 @@ export interface MenuProps {
   isFrontendRoute?: (path?: string) => boolean;
 }
 
-interface MenuObjectChildProps {
+export interface MenuObjectChildProps {
   label: string;
   name?: string;
   icon?: string;

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

@@ -43,6 +43,19 @@ const mockedProps = {
       usesRouter: false,
     },
   ],
+  dropDownLinks: [
+    {
+      label: 'test a upload',
+      childs: [
+        {
+          label: 'Upload Test',
+          name: 'Upload Test',
+          url: '/test/form',
+          perm: true,
+        },
+      ],
+    },
+  ],
 };
 
 test('should render', () => {
@@ -74,6 +87,13 @@ test('should render all the tabs links', () => {
   });
 });
 
+test('should render dropdownlinks', async () => {
+  render(<SubMenu {...mockedProps} />);
+  userEvent.hover(screen.getByText('test a upload'));
+  const label = await screen.findByText('test a upload');
+  expect(label).toBeInTheDocument();
+});
+
 test('should render the buttons', () => {
   const mockFunc = jest.fn();
   const buttons = [
@@ -94,7 +114,7 @@ test('should render the buttons', () => {
   };
   render(<SubMenu {...buttonsProps} />);
   const testButton = screen.getByText(buttons[0].name);
-  expect(screen.getAllByRole('button')).toHaveLength(2);
+  expect(screen.getAllByRole('button')).toHaveLength(3);
   userEvent.click(testButton);
   expect(mockFunc).toHaveBeenCalled();
 });

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

@@ -22,8 +22,10 @@ import { styled } from '@superset-ui/core';
 import cx from 'classnames';
 import { debounce } from 'lodash';
 import { Row } from 'src/common/components';
-import { Menu, MenuMode } from 'src/components/Menu';
+import { Menu, MenuMode, MainNav as DropdownMenu } from 'src/components/Menu';
 import Button, { OnClickHandler } from 'src/components/Button';
+import Icons from 'src/components/Icons';
+import { MenuObjectProps } from './Menu';
 
 const StyledHeader = styled.div`
   margin-bottom: ${({ theme }) => theme.gridUnit * 4}px;
@@ -39,11 +41,17 @@ const StyledHeader = styled.div`
   .nav-right {
     display: flex;
     align-items: center;
-    padding: 14px 0;
+    padding: 20px 0;
     margin-right: ${({ theme }) => theme.gridUnit * 3}px;
     float: right;
     position: absolute;
     right: 0;
+    ul.ant-menu-root {
+      padding: 0px;
+      .ant-menu-submenu-title > span {
+        top: ${({ theme }) => theme.gridUnit * 1.5}px;
+      }
+    }
   }
   .nav-right-collapse {
     display: flex;
@@ -152,8 +160,11 @@ export interface SubMenuProps {
    *  otherwise, a 'You should not use <Link> outside a <Router>' error will be thrown */
   usesRouter?: boolean;
   color?: string;
+  dropDownLinks?: Array<MenuObjectProps>;
 }
 
+const { SubMenu } = DropdownMenu;
+
 const SubMenuComponent: React.FunctionComponent<SubMenuProps> = props => {
   const [showMenu, setMenu] = useState<MenuMode>('horizontal');
   const [navRightStyle, setNavRightStyle] = useState('nav-right');
@@ -177,6 +188,7 @@ const SubMenuComponent: React.FunctionComponent<SubMenuProps> = props => {
         props.buttons.length >= 3 &&
         window.innerWidth >= 795
       ) {
+        // eslint-disable-next-line no-unused-expressions
         setNavRightStyle('nav-right');
       } else if (
         props.buttons &&
@@ -231,6 +243,22 @@ const SubMenuComponent: React.FunctionComponent<SubMenuProps> = props => {
           })}
         </Menu>
         <div className={navRightStyle}>
+          <Menu mode="horizontal">
+            {props.dropDownLinks?.map((link, i) => (
+              <SubMenu key={i} title={link.label} icon={<Icons.TriangleDown />}>
+                {link.childs?.map(item => {
+                  if (typeof item === 'object') {
+                    return (
+                      <DropdownMenu.Item>
+                        <a href={item.url}>{item.label}</a>
+                      </DropdownMenu.Item>
+                    );
+                  }
+                  return null;
+                })}
+              </SubMenu>
+            ))}
+          </Menu>
           {props.buttons?.map((btn, i) => (
             <Button
               key={i}