From 7e5e77e82a406ec6ea3427f96344f04640b3ac18 Mon Sep 17 00:00:00 2001
From: Phillip Kelley-Dotson <pkelleydotson@yahoo.com>
Date: Fri, 25 Feb 2022 14:20:24 -0800
Subject: [PATCH 01/17] feat: allow uploads in crud view

---
 .../views/CRUD/data/database/DatabaseList.tsx | 49 ++++++++++++++++++-
 .../src/views/components/Menu.tsx             |  2 +-
 .../src/views/components/SubMenu.tsx          | 32 +++++++++++-
 3 files changed, 79 insertions(+), 4 deletions(-)

diff --git a/superset-frontend/src/views/CRUD/data/database/DatabaseList.tsx b/superset-frontend/src/views/CRUD/data/database/DatabaseList.tsx
index 08f75a6bac5e5..53ff72189afde 100644
--- a/superset-frontend/src/views/CRUD/data/database/DatabaseList.tsx
+++ b/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(
     () => [
       {
diff --git a/superset-frontend/src/views/components/Menu.tsx b/superset-frontend/src/views/components/Menu.tsx
index 313c4b5cac071..31276b4c0c3e9 100644
--- a/superset-frontend/src/views/components/Menu.tsx
+++ b/superset-frontend/src/views/components/Menu.tsx
@@ -72,7 +72,7 @@ export interface MenuProps {
   isFrontendRoute?: (path?: string) => boolean;
 }
 
-interface MenuObjectChildProps {
+export interface MenuObjectChildProps {
   label: string;
   name?: string;
   icon?: string;
diff --git a/superset-frontend/src/views/components/SubMenu.tsx b/superset-frontend/src/views/components/SubMenu.tsx
index 917adfab703f2..55a4719a07600 100644
--- a/superset-frontend/src/views/components/SubMenu.tsx
+++ b/superset-frontend/src/views/components/SubMenu.tsx
@@ -21,8 +21,15 @@ import { Link, useHistory } from 'react-router-dom';
 import { styled } from '@superset-ui/core';
 import cx from 'classnames';
 import { debounce } from 'lodash';
-import { Menu, MenuMode, Row } from 'src/common/components';
+import {
+  Menu,
+  MenuMode,
+  Row,
+  MainNav as DropdownMenu,
+} from 'src/common/components';
 import Button, { OnClickHandler } from 'src/components/Button';
+import Icons from 'src/components/Icons';
+import { MenuObjectChildProps, MenuObjectProps } from './Menu';
 
 const StyledHeader = styled.div`
   margin-bottom: ${({ theme }) => theme.gridUnit * 4}px;
@@ -38,11 +45,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;
@@ -151,8 +164,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');
@@ -176,6 +192,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 &&
@@ -230,6 +247,17 @@ 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 => (
+                  <DropdownMenu.Item>
+                    <a href={item.url}>{item.label}</a>
+                  </DropdownMenu.Item>
+                ))}
+              </SubMenu>
+            ))}
+          </Menu>
           {props.buttons?.map((btn, i) => (
             <Button
               key={i}

From 6ccb68604b01a4b2223a6a36560f4a4e6b742c7f Mon Sep 17 00:00:00 2001
From: Phillip Kelley-Dotson <pkelleydotson@yahoo.com>
Date: Fri, 25 Feb 2022 14:48:40 -0800
Subject: [PATCH 02/17] fix merge conflict and fix ts

---
 .../src/views/components/SubMenu.tsx              | 15 ++++++++++-----
 1 file changed, 10 insertions(+), 5 deletions(-)

diff --git a/superset-frontend/src/views/components/SubMenu.tsx b/superset-frontend/src/views/components/SubMenu.tsx
index 83c6f6cc6b3fc..ef0de491da5ed 100644
--- a/superset-frontend/src/views/components/SubMenu.tsx
+++ b/superset-frontend/src/views/components/SubMenu.tsx
@@ -250,11 +250,16 @@ const SubMenuComponent: React.FunctionComponent<SubMenuProps> = props => {
           <Menu mode="horizontal">
             {props.dropDownLinks?.map((link, i) => (
               <SubMenu key={i} title={link.label} icon={<Icons.TriangleDown />}>
-                {link.childs?.map(item => (
-                  <DropdownMenu.Item>
-                    <a href={item.url}>{item.label}</a>
-                  </DropdownMenu.Item>
-                ))}
+                {link.childs?.map(item => {
+                  if (typeof item === 'object') {
+                    return (
+                      <DropdownMenu.Item>
+                        <a href={item.url}>{item.label}</a>
+                      </DropdownMenu.Item>
+                    );
+                  }
+                  return null;
+                })}
               </SubMenu>
             ))}
           </Menu>

From 3497f2b3585bc131b0eb32954f9a3d5d5d21813a Mon Sep 17 00:00:00 2001
From: Phillip Kelley-Dotson <pkelleydotson@yahoo.com>
Date: Fri, 25 Feb 2022 15:04:31 -0800
Subject: [PATCH 03/17] fix import

---
 superset-frontend/src/views/components/SubMenu.tsx | 8 ++------
 1 file changed, 2 insertions(+), 6 deletions(-)

diff --git a/superset-frontend/src/views/components/SubMenu.tsx b/superset-frontend/src/views/components/SubMenu.tsx
index ef0de491da5ed..b3cc9080f8a03 100644
--- a/superset-frontend/src/views/components/SubMenu.tsx
+++ b/superset-frontend/src/views/components/SubMenu.tsx
@@ -21,12 +21,8 @@ import { Link, useHistory } from 'react-router-dom';
 import { styled } from '@superset-ui/core';
 import cx from 'classnames';
 import { debounce } from 'lodash';
-import {
-  Menu,
-  MenuMode,
-  Row,
-  MainNav as DropdownMenu,
-} from 'src/common/components';
+import { Row } from 'src/common/components';
+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';

From 50df2d2f89f87bc1c75ad0968b3d2a4e68df84bd Mon Sep 17 00:00:00 2001
From: Phillip Kelley-Dotson <pkelleydotson@yahoo.com>
Date: Mon, 28 Feb 2022 16:09:27 -0800
Subject: [PATCH 04/17] fix tests

---
 .../CRUD/data/database/DatabaseList.test.jsx  | 31 +++++++++++++++++--
 .../src/views/components/SubMenu.test.tsx     | 22 ++++++++++++-
 2 files changed, 50 insertions(+), 3 deletions(-)

diff --git a/superset-frontend/src/views/CRUD/data/database/DatabaseList.test.jsx b/superset-frontend/src/views/CRUD/data/database/DatabaseList.test.jsx
index 2c01e6c106e22..ae08cd9803771 100644
--- a/superset-frontend/src/views/CRUD/data/database/DatabaseList.test.jsx
+++ b/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 
       );
     });
 
diff --git a/superset-frontend/src/views/components/SubMenu.test.tsx b/superset-frontend/src/views/components/SubMenu.test.tsx
index a7c2a557f38af..6359e03cc261f 100644
--- a/superset-frontend/src/views/components/SubMenu.test.tsx
+++ b/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();
 });

From d2796c3f17cad941304fd6735efc1c0191c76551 Mon Sep 17 00:00:00 2001
From: Phillip Kelley-Dotson <pkelleydotson@yahoo.com>
Date: Mon, 28 Feb 2022 18:17:55 -0800
Subject: [PATCH 05/17] fix lint

---
 .../CRUD/data/database/DatabaseList.test.jsx  | 19 ++++++++-----------
 1 file changed, 8 insertions(+), 11 deletions(-)

diff --git a/superset-frontend/src/views/CRUD/data/database/DatabaseList.test.jsx b/superset-frontend/src/views/CRUD/data/database/DatabaseList.test.jsx
index ae08cd9803771..03bd7a5e7beee 100644
--- a/superset-frontend/src/views/CRUD/data/database/DatabaseList.test.jsx
+++ b/superset-frontend/src/views/CRUD/data/database/DatabaseList.test.jsx
@@ -18,7 +18,7 @@
  */
 import React from 'react';
 import thunk from 'redux-thunk';
-import * as redux from 'react-redux'
+import * as redux from 'react-redux';
 import configureStore from 'redux-mock-store';
 import fetchMock from 'fetch-mock';
 import { Provider } from 'react-redux';
@@ -40,19 +40,17 @@ import { act } from 'react-dom/test-utils';
 
 // store needed for withToasts(DatabaseList)
 const mockStore = configureStore([thunk]);
-const store = mockStore({ common: { config: {
-  CSV_EXTENSIONS: ['hello']
-} }});
+const store = mockStore({});
 
-const mockAppState = { 
-  common: { 
+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*';
@@ -112,7 +110,6 @@ fetchMock.get(databaseRelatedEndpoint, {
 const useSelectorMock = jest.spyOn(redux, 'useSelector');
 
 describe('DatabaseList', () => {
-
   useSelectorMock.mockReturnValue({
     CSV_EXTENSIONS: ['csv'],
     EXCEL_EXTENSIONS: ['xls', 'xlsx'],
@@ -129,7 +126,7 @@ describe('DatabaseList', () => {
   beforeAll(async () => {
     await waitForComponentToPaint(wrapper);
   });
-  
+
   it('renders', () => {
     expect(wrapper.find(DatabaseList)).toExist();
   });
@@ -221,7 +218,7 @@ describe('RTL', () => {
           <DatabaseList user={mockUser} />
         </QueryParamProvider>,
         { useRedux: true },
-        mockAppState 
+        mockAppState,
       );
     });
 

From ce76949899718b115b676235889d3d236b03c59c Mon Sep 17 00:00:00 2001
From: Phillip Kelley-Dotson <pkelleydotson@yahoo.com>
Date: Mon, 28 Feb 2022 18:26:03 -0800
Subject: [PATCH 06/17] remove unused var

---
 .../src/views/CRUD/data/database/DatabaseList.test.jsx           | 1 -
 1 file changed, 1 deletion(-)

diff --git a/superset-frontend/src/views/CRUD/data/database/DatabaseList.test.jsx b/superset-frontend/src/views/CRUD/data/database/DatabaseList.test.jsx
index 03bd7a5e7beee..12580d8ee73fa 100644
--- a/superset-frontend/src/views/CRUD/data/database/DatabaseList.test.jsx
+++ b/superset-frontend/src/views/CRUD/data/database/DatabaseList.test.jsx
@@ -27,7 +27,6 @@ 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';

From 1b16f0727bd0970a58d3ab214d273f4a12e26ec9 Mon Sep 17 00:00:00 2001
From: Phillip Kelley-Dotson <pkelleydotson@yahoo.com>
Date: Mon, 7 Mar 2022 09:08:32 -0800
Subject: [PATCH 07/17] fix underline flash and alignment

---
 .../src/views/components/SubMenu.tsx              | 15 ++++++++++++---
 1 file changed, 12 insertions(+), 3 deletions(-)

diff --git a/superset-frontend/src/views/components/SubMenu.tsx b/superset-frontend/src/views/components/SubMenu.tsx
index b3cc9080f8a03..26db59064f630 100644
--- a/superset-frontend/src/views/components/SubMenu.tsx
+++ b/superset-frontend/src/views/components/SubMenu.tsx
@@ -41,7 +41,7 @@ const StyledHeader = styled.div`
   .nav-right {
     display: flex;
     align-items: center;
-    padding: 20px 0;
+    padding: ${({ theme }) => theme.gridUnit * 3.5}px 0;
     margin-right: ${({ theme }) => theme.gridUnit * 3}px;
     float: right;
     position: absolute;
@@ -52,6 +52,13 @@ const StyledHeader = styled.div`
         top: ${({ theme }) => theme.gridUnit * 1.5}px;
       }
     }
+    li[role='menuitem'] {
+      border: 0;
+      border-bottom: none;
+      &:hover {
+        border-bottom: transparent;
+      }
+    }
   }
   .nav-right-collapse {
     display: flex;
@@ -66,8 +73,10 @@ const StyledHeader = styled.div`
     .ant-menu-horizontal {
       line-height: inherit;
       .ant-menu-item {
+        border-bottom: none;
         &:hover {
           border-bottom: none;
+          text-decoration: none;
         }
       }
     }
@@ -243,13 +252,13 @@ const SubMenuComponent: React.FunctionComponent<SubMenuProps> = props => {
           })}
         </Menu>
         <div className={navRightStyle}>
-          <Menu mode="horizontal">
+          <Menu mode="horizontal" triggerSubMenuAction="click">
             {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>
+                      <DropdownMenu.Item key={item.label}>
                         <a href={item.url}>{item.label}</a>
                       </DropdownMenu.Item>
                     );

From 33d231c445782d47dfbb9bd7948f0fec1d3ee9c4 Mon Sep 17 00:00:00 2001
From: Phillip Kelley-Dotson <pkelleydotson@yahoo.com>
Date: Mon, 7 Mar 2022 15:14:28 -0800
Subject: [PATCH 08/17] fix offset

---
 superset-frontend/src/views/components/SubMenu.tsx | 7 ++++++-
 1 file changed, 6 insertions(+), 1 deletion(-)

diff --git a/superset-frontend/src/views/components/SubMenu.tsx b/superset-frontend/src/views/components/SubMenu.tsx
index 26db59064f630..f0d5e872e7d8f 100644
--- a/superset-frontend/src/views/components/SubMenu.tsx
+++ b/superset-frontend/src/views/components/SubMenu.tsx
@@ -254,7 +254,12 @@ const SubMenuComponent: React.FunctionComponent<SubMenuProps> = props => {
         <div className={navRightStyle}>
           <Menu mode="horizontal" triggerSubMenuAction="click">
             {props.dropDownLinks?.map((link, i) => (
-              <SubMenu key={i} title={link.label} icon={<Icons.TriangleDown />}>
+              <SubMenu
+                key={i}
+                title={link.label}
+                icon={<Icons.TriangleDown />}
+                popupOffset={[10, 20]}
+              >
                 {link.childs?.map(item => {
                   if (typeof item === 'object') {
                     return (

From 0b59ced849b7443c8038e90b23e2b5f71504a4e7 Mon Sep 17 00:00:00 2001
From: Phillip Kelley-Dotson <pkelleydotson@yahoo.com>
Date: Mon, 7 Mar 2022 15:41:40 -0800
Subject: [PATCH 09/17] fix icon alignment

---
 superset-frontend/src/views/components/SubMenu.tsx | 10 +++++++---
 1 file changed, 7 insertions(+), 3 deletions(-)

diff --git a/superset-frontend/src/views/components/SubMenu.tsx b/superset-frontend/src/views/components/SubMenu.tsx
index f0d5e872e7d8f..9fc339c9a1294 100644
--- a/superset-frontend/src/views/components/SubMenu.tsx
+++ b/superset-frontend/src/views/components/SubMenu.tsx
@@ -48,9 +48,6 @@ const StyledHeader = styled.div`
     right: 0;
     ul.ant-menu-root {
       padding: 0px;
-      .ant-menu-submenu-title > span {
-        top: ${({ theme }) => theme.gridUnit * 1.5}px;
-      }
     }
     li[role='menuitem'] {
       border: 0;
@@ -134,6 +131,13 @@ const StyledHeader = styled.div`
       margin-left: ${({ theme }) => theme.gridUnit * 2}px;
     }
   }
+  .ant-menu-submenu {
+    span[role='img'] {
+      position: absolute;
+      right: ${({ theme }) => -theme.gridUnit + -2}px;
+      top: ${({ theme }) => theme.gridUnit + 1}px !important;
+    }
+  }
 `;
 
 type MenuChild = {

From 68e3deee42def4256a8165b597f54950c8582890 Mon Sep 17 00:00:00 2001
From: Phillip Kelley-Dotson <pkelleydotson@yahoo.com>
Date: Tue, 8 Mar 2022 14:04:42 -0800
Subject: [PATCH 10/17] fix labels and css issues

---
 .../src/views/CRUD/data/database/DatabaseList.tsx      | 10 +++++-----
 superset-frontend/src/views/components/SubMenu.tsx     |  8 +++++++-
 2 files changed, 12 insertions(+), 6 deletions(-)

diff --git a/superset-frontend/src/views/CRUD/data/database/DatabaseList.tsx b/superset-frontend/src/views/CRUD/data/database/DatabaseList.tsx
index 53ff72189afde..3a0b88d4fda0c 100644
--- a/superset-frontend/src/views/CRUD/data/database/DatabaseList.tsx
+++ b/superset-frontend/src/views/CRUD/data/database/DatabaseList.tsx
@@ -188,19 +188,19 @@ function DatabaseList({ addDangerToast, addSuccessToast }: DatabaseListProps) {
       childs: [
         {
           label: t('Upload a CSV'),
-          name: 'Upload a CSV',
+          name: 'Upload a CSV file',
           url: '/csvtodatabaseview/form',
           perm: CSV_EXTENSIONS,
         },
         {
-          label: t('Upload a Columnar File'),
-          name: 'Upload a Columnar file',
+          label: t('Upload a columnar file'),
+          name: 'Upload a columnar file',
           url: '/columnartodatabaseview/form',
           perm: COLUMNAR_EXTENSIONS,
         },
         {
-          label: t('Upload Excel'),
-          name: 'Upload Excel',
+          label: t('Upload a Excel file'),
+          name: 'Upload Excel file',
           url: '/exceltodatabaseview/form',
           perm: EXCEL_EXTENSIONS,
         },
diff --git a/superset-frontend/src/views/components/SubMenu.tsx b/superset-frontend/src/views/components/SubMenu.tsx
index 9fc339c9a1294..b37a1c4f540af 100644
--- a/superset-frontend/src/views/components/SubMenu.tsx
+++ b/superset-frontend/src/views/components/SubMenu.tsx
@@ -21,7 +21,7 @@ import { Link, useHistory } from 'react-router-dom';
 import { styled } from '@superset-ui/core';
 import cx from 'classnames';
 import { debounce } from 'lodash';
-import { Row } from 'src/common/components';
+import { Row } from 'src/components';
 import { Menu, MenuMode, MainNav as DropdownMenu } from 'src/components/Menu';
 import Button, { OnClickHandler } from 'src/components/Button';
 import Icons from 'src/components/Icons';
@@ -56,6 +56,11 @@ const StyledHeader = styled.div`
         border-bottom: transparent;
       }
     }
+    .dropdown-menu-links > div.ant-menu-submenu-title:hover,
+    .ant-menu-submenu-open.ant-menu-submenu-active
+      > div.ant-menu-submenu-title {
+      color: ${({ theme }) => theme.colors.primary.dark1};
+    }
   }
   .nav-right-collapse {
     display: flex;
@@ -263,6 +268,7 @@ const SubMenuComponent: React.FunctionComponent<SubMenuProps> = props => {
                 title={link.label}
                 icon={<Icons.TriangleDown />}
                 popupOffset={[10, 20]}
+                className="dropdown-menu-links"
               >
                 {link.childs?.map(item => {
                   if (typeof item === 'object') {

From f2ba99645ce07ab70f6042fe36b44e6fff8d7951 Mon Sep 17 00:00:00 2001
From: Phillip Kelley-Dotson <pkelleydotson@yahoo.com>
Date: Thu, 10 Mar 2022 09:12:34 -0800
Subject: [PATCH 11/17] make drowdown primary all the time

---
 superset-frontend/src/views/components/SubMenu.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/superset-frontend/src/views/components/SubMenu.tsx b/superset-frontend/src/views/components/SubMenu.tsx
index b37a1c4f540af..f661d8934dc3b 100644
--- a/superset-frontend/src/views/components/SubMenu.tsx
+++ b/superset-frontend/src/views/components/SubMenu.tsx
@@ -56,7 +56,7 @@ const StyledHeader = styled.div`
         border-bottom: transparent;
       }
     }
-    .dropdown-menu-links > div.ant-menu-submenu-title:hover,
+    .dropdown-menu-links > div.ant-menu-submenu-title,
     .ant-menu-submenu-open.ant-menu-submenu-active
       > div.ant-menu-submenu-title {
       color: ${({ theme }) => theme.colors.primary.dark1};

From 21116db425facf84204d39b17828d32f19c05e37 Mon Sep 17 00:00:00 2001
From: Phillip Kelley-Dotson <pkelleydotson@yahoo.com>
Date: Thu, 10 Mar 2022 09:32:39 -0800
Subject: [PATCH 12/17] make global

---
 superset-frontend/src/views/components/SubMenu.tsx | 9 ++++-----
 1 file changed, 4 insertions(+), 5 deletions(-)

diff --git a/superset-frontend/src/views/components/SubMenu.tsx b/superset-frontend/src/views/components/SubMenu.tsx
index f661d8934dc3b..4ad3cfe42ede5 100644
--- a/superset-frontend/src/views/components/SubMenu.tsx
+++ b/superset-frontend/src/views/components/SubMenu.tsx
@@ -56,11 +56,6 @@ const StyledHeader = styled.div`
         border-bottom: transparent;
       }
     }
-    .dropdown-menu-links > div.ant-menu-submenu-title,
-    .ant-menu-submenu-open.ant-menu-submenu-active
-      > div.ant-menu-submenu-title {
-      color: ${({ theme }) => theme.colors.primary.dark1};
-    }
   }
   .nav-right-collapse {
     display: flex;
@@ -143,6 +138,10 @@ const StyledHeader = styled.div`
       top: ${({ theme }) => theme.gridUnit + 1}px !important;
     }
   }
+  .dropdown-menu-links > div.ant-menu-submenu-title,
+  .ant-menu-submenu-open.ant-menu-submenu-active > div.ant-menu-submenu-title {
+    color: ${({ theme }) => theme.colors.primary.dark1};
+  }
 `;
 
 type MenuChild = {

From 3491f020421d0be217dfb4286fb16f9337e7fd22 Mon Sep 17 00:00:00 2001
From: Phillip Kelley-Dotson <pkelleydotson@yahoo.com>
Date: Thu, 10 Mar 2022 10:58:30 -0800
Subject: [PATCH 13/17] fix lables

---
 .../src/views/CRUD/data/database/DatabaseList.tsx      | 10 +++++-----
 1 file changed, 5 insertions(+), 5 deletions(-)

diff --git a/superset-frontend/src/views/CRUD/data/database/DatabaseList.tsx b/superset-frontend/src/views/CRUD/data/database/DatabaseList.tsx
index 3a0b88d4fda0c..f91bf3d6797d3 100644
--- a/superset-frontend/src/views/CRUD/data/database/DatabaseList.tsx
+++ b/superset-frontend/src/views/CRUD/data/database/DatabaseList.tsx
@@ -187,19 +187,19 @@ function DatabaseList({ addDangerToast, addSuccessToast }: DatabaseListProps) {
       label: t('Upload file to database'),
       childs: [
         {
-          label: t('Upload a CSV'),
-          name: 'Upload a CSV file',
+          label: t('Upload CSV'),
+          name: 'Upload CSV file',
           url: '/csvtodatabaseview/form',
           perm: CSV_EXTENSIONS,
         },
         {
-          label: t('Upload a columnar file'),
-          name: 'Upload a columnar file',
+          label: t('Upload columnar file'),
+          name: 'Upload columnar file',
           url: '/columnartodatabaseview/form',
           perm: COLUMNAR_EXTENSIONS,
         },
         {
-          label: t('Upload a Excel file'),
+          label: t('Upload Excel file'),
           name: 'Upload Excel file',
           url: '/exceltodatabaseview/form',
           perm: EXCEL_EXTENSIONS,

From 6c834d23f44dd3d230d02a7473fcbda37f96e5cc Mon Sep 17 00:00:00 2001
From: Phillip Kelley-Dotson <pkelleydotson@yahoo.com>
Date: Wed, 16 Mar 2022 20:24:46 -0700
Subject: [PATCH 14/17] add upload perms to utils

---
 .../views/CRUD/data/database/DatabaseList.tsx | 24 ++++++++++++++-----
 superset-frontend/src/views/CRUD/utils.tsx    | 16 +++++++++++++
 .../src/views/components/MenuRight.tsx        | 19 +++------------
 3 files changed, 37 insertions(+), 22 deletions(-)

diff --git a/superset-frontend/src/views/CRUD/data/database/DatabaseList.tsx b/superset-frontend/src/views/CRUD/data/database/DatabaseList.tsx
index f91bf3d6797d3..821a7cd31607f 100644
--- a/superset-frontend/src/views/CRUD/data/database/DatabaseList.tsx
+++ b/superset-frontend/src/views/CRUD/data/database/DatabaseList.tsx
@@ -25,6 +25,7 @@ import { useListViewResource } from 'src/views/CRUD/hooks';
 import {
   createErrorHandler,
   checkUploadExtensions,
+  uploadUserPerms,
 } from 'src/views/CRUD/utils';
 import withToasts from 'src/components/MessageToasts/withToasts';
 import SubMenu, { SubMenuProps } from 'src/views/components/SubMenu';
@@ -36,6 +37,7 @@ 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 { UserWithPermissionsAndRoles } from 'src/types/bootstrapTypes';
 import DatabaseModal from './DatabaseModal';
 
 import { DatabaseObject } from './types';
@@ -108,6 +110,9 @@ function DatabaseList({ addDangerToast, addSuccessToast }: DatabaseListProps) {
   const [importingDatabase, showImportModal] = useState<boolean>(false);
   const [passwordFields, setPasswordFields] = useState<string[]>([]);
   const [preparingExport, setPreparingExport] = useState<boolean>(false);
+  const { roles } = useSelector<any, UserWithPermissionsAndRoles>(
+    state => state.user,
+  );
   const {
     CSV_EXTENSIONS,
     COLUMNAR_EXTENSIONS,
@@ -182,6 +187,9 @@ function DatabaseList({ addDangerToast, addSuccessToast }: DatabaseListProps) {
   const canExport =
     hasPerm('can_export') && isFeatureEnabled(FeatureFlag.VERSIONED_EXPORT);
 
+  const { canUploadCSV, canUploadColumnar, canUploadExcel } =
+    uploadUserPerms(roles);
+
   const uploadDropdownMenu = [
     {
       label: t('Upload file to database'),
@@ -190,19 +198,25 @@ function DatabaseList({ addDangerToast, addSuccessToast }: DatabaseListProps) {
           label: t('Upload CSV'),
           name: 'Upload CSV file',
           url: '/csvtodatabaseview/form',
-          perm: CSV_EXTENSIONS,
+          perm:
+            checkUploadExtensions(CSV_EXTENSIONS, ALLOWED_EXTENSIONS) &&
+            canUploadCSV,
         },
         {
           label: t('Upload columnar file'),
           name: 'Upload columnar file',
           url: '/columnartodatabaseview/form',
-          perm: COLUMNAR_EXTENSIONS,
+          perm:
+            checkUploadExtensions(COLUMNAR_EXTENSIONS, ALLOWED_EXTENSIONS) &&
+            canUploadColumnar,
         },
         {
           label: t('Upload Excel file'),
           name: 'Upload Excel file',
           url: '/exceltodatabaseview/form',
-          perm: EXCEL_EXTENSIONS,
+          perm:
+            checkUploadExtensions(EXCEL_EXTENSIONS, ALLOWED_EXTENSIONS) &&
+            canUploadExcel,
         },
       ],
     },
@@ -210,9 +224,7 @@ function DatabaseList({ addDangerToast, addSuccessToast }: DatabaseListProps) {
 
   const filteredDropDown = uploadDropdownMenu.map(link => {
     // eslint-disable-next-line no-param-reassign
-    link.childs = link.childs.filter(item =>
-      checkUploadExtensions(item.perm, ALLOWED_EXTENSIONS),
-    );
+    link.childs = link.childs.filter(item => item.perm);
     return link;
   });
 
diff --git a/superset-frontend/src/views/CRUD/utils.tsx b/superset-frontend/src/views/CRUD/utils.tsx
index c2ae0d8cbed13..816eb956f30c9 100644
--- a/superset-frontend/src/views/CRUD/utils.tsx
+++ b/superset-frontend/src/views/CRUD/utils.tsx
@@ -32,7 +32,9 @@ import rison from 'rison';
 import { getClientErrorObject } from 'src/utils/getClientErrorObject';
 import { FetchDataConfig } from 'src/components/ListView';
 import SupersetText from 'src/utils/textUtils';
+import findPermission from 'src/dashboard/util/findPermission';
 import { Dashboard, Filters } from './types';
+import { UserWithPermissionsAndRoles } from 'src/types/bootstrapTypes';
 
 // Modifies the rison encoding slightly to match the backend's rison encoding/decoding. Applies globally.
 // Code pulled from rison.js (https://github.com/Nanonid/rison), rison is licensed under the MIT license.
@@ -420,3 +422,17 @@ export const checkUploadExtensions = (
   }
   return false;
 };
+
+export const uploadUserPerms = (roles: Record<string, [string, string][]>) => ({
+  canUploadCSV: findPermission('can_this_form_get', 'CsvToDatabaseView', roles),
+  canUploadColumnar: findPermission(
+    'can_this_form_get',
+    'ColumnarToDatabaseView',
+    roles,
+  ),
+  canUploadExcel: findPermission(
+    'can_this_form_get',
+    'ExcelToDatabaseView',
+    roles,
+  ),
+});
diff --git a/superset-frontend/src/views/components/MenuRight.tsx b/superset-frontend/src/views/components/MenuRight.tsx
index ab5b5d8d82a7e..45025ac3d0c5b 100644
--- a/superset-frontend/src/views/components/MenuRight.tsx
+++ b/superset-frontend/src/views/components/MenuRight.tsx
@@ -26,7 +26,7 @@ import { useSelector } from 'react-redux';
 import { UserWithPermissionsAndRoles } from 'src/types/bootstrapTypes';
 import LanguagePicker from './LanguagePicker';
 import DatabaseModal from '../CRUD/data/database/DatabaseModal';
-import { checkUploadExtensions } from '../CRUD/utils';
+import { checkUploadExtensions, uploadUserPerms } from '../CRUD/utils';
 import {
   ExtentionConfigs,
   GlobalMenuDataOptions,
@@ -86,21 +86,8 @@ const RightMenu = ({
   const canChart = findPermission('can_write', 'Chart', roles);
   const canDatabase = findPermission('can_write', 'Database', roles);
 
-  const canUploadCSV = findPermission(
-    'can_this_form_get',
-    'CsvToDatabaseView',
-    roles,
-  );
-  const canUploadColumnar = findPermission(
-    'can_this_form_get',
-    'ColumnarToDatabaseView',
-    roles,
-  );
-  const canUploadExcel = findPermission(
-    'can_this_form_get',
-    'ExcelToDatabaseView',
-    roles,
-  );
+  const { canUploadCSV, canUploadColumnar, canUploadExcel } =
+    uploadUserPerms(roles);
 
   const canUpload = canUploadCSV || canUploadColumnar || canUploadExcel;
   const showActionDropdown = canSql || canChart || canDashboard;

From 792e710e09c31d73e4355ae274fcb310d9313d96 Mon Sep 17 00:00:00 2001
From: Phillip Kelley-Dotson <pkelleydotson@yahoo.com>
Date: Wed, 16 Mar 2022 20:56:52 -0700
Subject: [PATCH 15/17] remove unused code

---
 superset-frontend/src/views/CRUD/utils.tsx | 1 -
 1 file changed, 1 deletion(-)

diff --git a/superset-frontend/src/views/CRUD/utils.tsx b/superset-frontend/src/views/CRUD/utils.tsx
index 816eb956f30c9..8aa65c3b59c29 100644
--- a/superset-frontend/src/views/CRUD/utils.tsx
+++ b/superset-frontend/src/views/CRUD/utils.tsx
@@ -34,7 +34,6 @@ import { FetchDataConfig } from 'src/components/ListView';
 import SupersetText from 'src/utils/textUtils';
 import findPermission from 'src/dashboard/util/findPermission';
 import { Dashboard, Filters } from './types';
-import { UserWithPermissionsAndRoles } from 'src/types/bootstrapTypes';
 
 // Modifies the rison encoding slightly to match the backend's rison encoding/decoding. Applies globally.
 // Code pulled from rison.js (https://github.com/Nanonid/rison), rison is licensed under the MIT license.

From 72016cbd8fb31762fe79308edc6e117ca38251da Mon Sep 17 00:00:00 2001
From: Phillip Kelley-Dotson <pkelleydotson@yahoo.com>
Date: Fri, 18 Mar 2022 16:26:24 -0700
Subject: [PATCH 16/17] add suggested changes

---
 .../views/CRUD/data/database/DatabaseList.tsx | 21 +++++++-------
 superset-frontend/src/views/CRUD/utils.tsx    | 28 +++++++++++--------
 2 files changed, 26 insertions(+), 23 deletions(-)

diff --git a/superset-frontend/src/views/CRUD/data/database/DatabaseList.tsx b/superset-frontend/src/views/CRUD/data/database/DatabaseList.tsx
index 821a7cd31607f..bf57f2efb6fb5 100644
--- a/superset-frontend/src/views/CRUD/data/database/DatabaseList.tsx
+++ b/superset-frontend/src/views/CRUD/data/database/DatabaseList.tsx
@@ -187,8 +187,13 @@ function DatabaseList({ addDangerToast, addSuccessToast }: DatabaseListProps) {
   const canExport =
     hasPerm('can_export') && isFeatureEnabled(FeatureFlag.VERSIONED_EXPORT);
 
-  const { canUploadCSV, canUploadColumnar, canUploadExcel } =
-    uploadUserPerms(roles);
+  const { canUploadCSV, canUploadColumnar, canUploadExcel } = uploadUserPerms(
+    roles,
+    CSV_EXTENSIONS,
+    COLUMNAR_EXTENSIONS,
+    EXCEL_EXTENSIONS,
+    ALLOWED_EXTENSIONS,
+  );
 
   const uploadDropdownMenu = [
     {
@@ -198,25 +203,19 @@ function DatabaseList({ addDangerToast, addSuccessToast }: DatabaseListProps) {
           label: t('Upload CSV'),
           name: 'Upload CSV file',
           url: '/csvtodatabaseview/form',
-          perm:
-            checkUploadExtensions(CSV_EXTENSIONS, ALLOWED_EXTENSIONS) &&
-            canUploadCSV,
+          perm: canUploadCSV,
         },
         {
           label: t('Upload columnar file'),
           name: 'Upload columnar file',
           url: '/columnartodatabaseview/form',
-          perm:
-            checkUploadExtensions(COLUMNAR_EXTENSIONS, ALLOWED_EXTENSIONS) &&
-            canUploadColumnar,
+          perm: canUploadColumnar,
         },
         {
           label: t('Upload Excel file'),
           name: 'Upload Excel file',
           url: '/exceltodatabaseview/form',
-          perm:
-            checkUploadExtensions(EXCEL_EXTENSIONS, ALLOWED_EXTENSIONS) &&
-            canUploadExcel,
+          perm: canUploadExcel,
         },
       ],
     },
diff --git a/superset-frontend/src/views/CRUD/utils.tsx b/superset-frontend/src/views/CRUD/utils.tsx
index 8aa65c3b59c29..c6c5282738c60 100644
--- a/superset-frontend/src/views/CRUD/utils.tsx
+++ b/superset-frontend/src/views/CRUD/utils.tsx
@@ -422,16 +422,20 @@ export const checkUploadExtensions = (
   return false;
 };
 
-export const uploadUserPerms = (roles: Record<string, [string, string][]>) => ({
-  canUploadCSV: findPermission('can_this_form_get', 'CsvToDatabaseView', roles),
-  canUploadColumnar: findPermission(
-    'can_this_form_get',
-    'ColumnarToDatabaseView',
-    roles,
-  ),
-  canUploadExcel: findPermission(
-    'can_this_form_get',
-    'ExcelToDatabaseView',
-    roles,
-  ),
+export const uploadUserPerms = (
+  roles: Record<string, [string, string][]>,
+  csvExt: Array<string>,
+  colExt: Array<string>,
+  excelExt: Array<string>,
+  allowedExt: Array<string>,
+) => ({
+  canUploadCSV:
+    findPermission('can_this_form_get', 'CsvToDatabaseView', roles) &&
+    checkUploadExtensions(csvExt, allowedExt),
+  canUploadColumnar:
+    checkUploadExtensions(colExt, allowedExt) &&
+    findPermission('can_this_form_get', 'ColumnarToDatabaseView', roles),
+  canUploadExcel:
+    checkUploadExtensions(excelExt, allowedExt) &&
+    findPermission('can_this_form_get', 'ExcelToDatabaseView', roles),
 });

From 5f01fda3a788259e14dae1e30e447a87dc4af54f Mon Sep 17 00:00:00 2001
From: Phillip Kelley-Dotson <pkelleydotson@yahoo.com>
Date: Fri, 18 Mar 2022 16:35:02 -0700
Subject: [PATCH 17/17] update menuright

---
 .../views/CRUD/data/database/DatabaseList.tsx |  6 +----
 .../src/views/components/MenuRight.tsx        | 23 +++++++++----------
 2 files changed, 12 insertions(+), 17 deletions(-)

diff --git a/superset-frontend/src/views/CRUD/data/database/DatabaseList.tsx b/superset-frontend/src/views/CRUD/data/database/DatabaseList.tsx
index bf57f2efb6fb5..10149bc9e8a16 100644
--- a/superset-frontend/src/views/CRUD/data/database/DatabaseList.tsx
+++ b/superset-frontend/src/views/CRUD/data/database/DatabaseList.tsx
@@ -22,11 +22,7 @@ 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,
-  checkUploadExtensions,
-  uploadUserPerms,
-} from 'src/views/CRUD/utils';
+import { createErrorHandler, uploadUserPerms } 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';
diff --git a/superset-frontend/src/views/components/MenuRight.tsx b/superset-frontend/src/views/components/MenuRight.tsx
index 45025ac3d0c5b..5753ef5311c0c 100644
--- a/superset-frontend/src/views/components/MenuRight.tsx
+++ b/superset-frontend/src/views/components/MenuRight.tsx
@@ -26,7 +26,7 @@ import { useSelector } from 'react-redux';
 import { UserWithPermissionsAndRoles } from 'src/types/bootstrapTypes';
 import LanguagePicker from './LanguagePicker';
 import DatabaseModal from '../CRUD/data/database/DatabaseModal';
-import { checkUploadExtensions, uploadUserPerms } from '../CRUD/utils';
+import { uploadUserPerms } from '../CRUD/utils';
 import {
   ExtentionConfigs,
   GlobalMenuDataOptions,
@@ -86,8 +86,13 @@ const RightMenu = ({
   const canChart = findPermission('can_write', 'Chart', roles);
   const canDatabase = findPermission('can_write', 'Database', roles);
 
-  const { canUploadCSV, canUploadColumnar, canUploadExcel } =
-    uploadUserPerms(roles);
+  const { canUploadCSV, canUploadColumnar, canUploadExcel } = uploadUserPerms(
+    roles,
+    CSV_EXTENSIONS,
+    COLUMNAR_EXTENSIONS,
+    EXCEL_EXTENSIONS,
+    ALLOWED_EXTENSIONS,
+  );
 
   const canUpload = canUploadCSV || canUploadColumnar || canUploadExcel;
   const showActionDropdown = canSql || canChart || canDashboard;
@@ -110,25 +115,19 @@ const RightMenu = ({
           label: t('Upload CSV to database'),
           name: 'Upload a CSV',
           url: '/csvtodatabaseview/form',
-          perm:
-            checkUploadExtensions(CSV_EXTENSIONS, ALLOWED_EXTENSIONS) &&
-            canUploadCSV,
+          perm: canUploadCSV,
         },
         {
           label: t('Upload columnar file to database'),
           name: 'Upload a Columnar file',
           url: '/columnartodatabaseview/form',
-          perm:
-            checkUploadExtensions(COLUMNAR_EXTENSIONS, ALLOWED_EXTENSIONS) &&
-            canUploadColumnar,
+          perm: canUploadColumnar,
         },
         {
           label: t('Upload Excel file to database'),
           name: 'Upload Excel',
           url: '/exceltodatabaseview/form',
-          perm:
-            checkUploadExtensions(EXCEL_EXTENSIONS, ALLOWED_EXTENSIONS) &&
-            canUploadExcel,
+          perm: canUploadExcel,
         },
       ],
     },