pt/superset
1
0
Fork 0
mirror of https://github.com/apache/superset.git synced 2024-09-12 08:39:45 -04:00
Code Issues Packages Projects Releases Wiki Activity

feat: Hide nav create with RBAC (#17157)

Browse Source 
* recommit

* Update MenuRight.tsx
This commit is contained in:
Hugh A. Miles II 2021-10-23 03:47:56 -04:00 committed by GitHub
parent a63a01f158
commit b5246b29df
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
3 changed files with 204 additions and 126 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

52
superset-frontend/src/components/Menu/Menu.test.tsx
View File

@ -17,12 +17,32 @@
* under the License. * under the License.
*/ */
import React from 'react'; import React from 'react';
import * as reactRedux from 'react-redux';
import { render, screen } from 'spec/helpers/testing-library'; import { render, screen } from 'spec/helpers/testing-library';
import userEvent from '@testing-library/user-event'; import userEvent from '@testing-library/user-event';
import { Menu } from './Menu'; import { Menu } from './Menu';
import { dropdownItems } from './MenuRight'; import { dropdownItems } from './MenuRight';
const user = {
createdOn: '2021-04-27T18:12:38.952304',
email: 'admin',
firstName: 'admin',
isActive: true,
lastName: 'admin',
permissions: {},
roles: {
Admin: [
['can_sqllab', 'Superset'],
['can_write', 'Dashboard'],
['can_write', 'Chart'],
],
},
userId: 1,
username: 'admin',
};
const mockedProps = { const mockedProps = {
user,
data: { data: {
menu: [ menu: [
{ {
@ -136,17 +156,27 @@ const notanonProps = {
}, },
}; };
const useSelectorMock = jest.spyOn(reactRedux, 'useSelector');
beforeEach(() => {
// setup a DOM element as a render target
useSelectorMock.mockClear();
});
test('should render', () => { test('should render', () => {
useSelectorMock.mockReturnValue({ roles: user.roles });
const { container } = render(<Menu {...mockedProps} />); const { container } = render(<Menu {...mockedProps} />);
expect(container).toBeInTheDocument(); expect(container).toBeInTheDocument();
}); });
test('should render the navigation', () => { test('should render the navigation', () => {
useSelectorMock.mockReturnValue({ roles: user.roles });
render(<Menu {...mockedProps} />); render(<Menu {...mockedProps} />);
expect(screen.getByRole('navigation')).toBeInTheDocument(); expect(screen.getByRole('navigation')).toBeInTheDocument();
}); });
test('should render the brand', () => { test('should render the brand', () => {
useSelectorMock.mockReturnValue({ roles: user.roles });
const { const {
data: { data: {
brand: { alt, icon }, brand: { alt, icon },
@ -158,6 +188,7 @@ test('should render the brand', () => {
}); });
test('should render all the top navbar menu items', () => { test('should render all the top navbar menu items', () => {
useSelectorMock.mockReturnValue({ roles: user.roles });
const { const {
data: { menu }, data: { menu },
} = mockedProps; } = mockedProps;
@ -168,6 +199,7 @@ test('should render all the top navbar menu items', () => {
}); });
test('should render the top navbar child menu items', async () => { test('should render the top navbar child menu items', async () => {
useSelectorMock.mockReturnValue({ roles: user.roles });
const { const {
data: { menu }, data: { menu },
} = mockedProps; } = mockedProps;
@ -184,6 +216,7 @@ test('should render the top navbar child menu items', async () => {
}); });
test('should render the dropdown items', async () => { test('should render the dropdown items', async () => {
useSelectorMock.mockReturnValue({ roles: user.roles });
render(<Menu {...notanonProps} />); render(<Menu {...notanonProps} />);
const dropdown = screen.getByTestId('new-dropdown-icon'); const dropdown = screen.getByTestId('new-dropdown-icon');
userEvent.hover(dropdown); userEvent.hover(dropdown);
@ -211,12 +244,14 @@ test('should render the dropdown items', async () => {
}); });
test('should render the Settings', async () => { test('should render the Settings', async () => {
useSelectorMock.mockReturnValue({ roles: user.roles });
render(<Menu {...mockedProps} />); render(<Menu {...mockedProps} />);
const settings = await screen.findByText('Settings'); const settings = await screen.findByText('Settings');
expect(settings).toBeInTheDocument(); expect(settings).toBeInTheDocument();
}); });
test('should render the Settings menu item', async () => { test('should render the Settings menu item', async () => {
useSelectorMock.mockReturnValue({ roles: user.roles });
render(<Menu {...mockedProps} />); render(<Menu {...mockedProps} />);
userEvent.hover(screen.getByText('Settings')); userEvent.hover(screen.getByText('Settings'));
const label = await screen.findByText('Security'); const label = await screen.findByText('Security');
@ -224,6 +259,7 @@ test('should render the Settings menu item', async () => {
}); });
test('should render the Settings dropdown child menu items', async () => { test('should render the Settings dropdown child menu items', async () => {
useSelectorMock.mockReturnValue({ roles: user.roles });
const { const {
data: { settings }, data: { settings },
} = mockedProps; } = mockedProps;
@ -234,16 +270,19 @@ test('should render the Settings dropdown child menu items', async () => {
}); });
test('should render the plus menu (+) when user is not anonymous', () => { test('should render the plus menu (+) when user is not anonymous', () => {
useSelectorMock.mockReturnValue({ roles: user.roles });
render(<Menu {...notanonProps} />); render(<Menu {...notanonProps} />);
expect(screen.getByTestId('new-dropdown')).toBeInTheDocument(); expect(screen.getByTestId('new-dropdown')).toBeInTheDocument();
}); });
test('should NOT render the plus menu (+) when user is anonymous', () => { test('should NOT render the plus menu (+) when user is anonymous', () => {
useSelectorMock.mockReturnValue({ roles: user.roles });
render(<Menu {...mockedProps} />); render(<Menu {...mockedProps} />);
expect(screen.queryByTestId('new-dropdown')).not.toBeInTheDocument(); expect(screen.queryByTestId('new-dropdown')).not.toBeInTheDocument();
}); });
test('should render the user actions when user is not anonymous', async () => { test('should render the user actions when user is not anonymous', async () => {
useSelectorMock.mockReturnValue({ roles: mockedProps.user.roles });
const { const {
data: { data: {
navbar_right: { user_info_url, user_logout_url }, navbar_right: { user_info_url, user_logout_url },
@ -263,11 +302,13 @@ test('should render the user actions when user is not anonymous', async () => {
}); });
test('should NOT render the user actions when user is anonymous', () => { test('should NOT render the user actions when user is anonymous', () => {
useSelectorMock.mockReturnValue({ roles: user.roles });
render(<Menu {...mockedProps} />); render(<Menu {...mockedProps} />);
expect(screen.queryByText('User')).not.toBeInTheDocument(); expect(screen.queryByText('User')).not.toBeInTheDocument();
}); });
test('should render the Profile link when available', async () => { test('should render the Profile link when available', async () => {
useSelectorMock.mockReturnValue({ roles: user.roles });
const { const {
data: { data: {
navbar_right: { user_profile_url }, navbar_right: { user_profile_url },
@ -282,6 +323,7 @@ test('should render the Profile link when available', async () => {
}); });
test('should render the About section and version_string, sha or build_number when available', async () => { test('should render the About section and version_string, sha or build_number when available', async () => {
useSelectorMock.mockReturnValue({ roles: user.roles });
const { const {
data: { data: {
navbar_right: { version_sha, version_string, build_number }, navbar_right: { version_sha, version_string, build_number },
@ -301,6 +343,7 @@ test('should render the About section and version_string, sha or build_number wh
}); });
test('should render the Documentation link when available', async () => { test('should render the Documentation link when available', async () => {
useSelectorMock.mockReturnValue({ roles: user.roles });
const { const {
data: { data: {
navbar_right: { documentation_url }, navbar_right: { documentation_url },
@ -313,6 +356,7 @@ test('should render the Documentation link when available', async () => {
}); });
test('should render the Bug Report link when available', async () => { test('should render the Bug Report link when available', async () => {
useSelectorMock.mockReturnValue({ roles: user.roles });
const { const {
data: { data: {
navbar_right: { bug_report_url }, navbar_right: { bug_report_url },
@ -325,6 +369,7 @@ test('should render the Bug Report link when available', async () => {
}); });
test('should render the Login link when user is anonymous', () => { test('should render the Login link when user is anonymous', () => {
useSelectorMock.mockReturnValue({ roles: user.roles });
const { const {
data: { data: {
navbar_right: { user_login_url }, navbar_right: { user_login_url },
@ -337,6 +382,13 @@ test('should render the Login link when user is anonymous', () => {
}); });
test('should render the Language Picker', () => { test('should render the Language Picker', () => {
useSelectorMock.mockReturnValue({ roles: user.roles });
render(<Menu {...mockedProps} />); render(<Menu {...mockedProps} />);
expect(screen.getByLabelText('Languages')).toBeInTheDocument(); expect(screen.getByLabelText('Languages')).toBeInTheDocument();
}); });
test('should hide create button without proper roles', () => {
useSelectorMock.mockReturnValue({ roles: [] });
render(<Menu {...notanonProps} />);
expect(screen.queryByTestId('new-dropdown')).not.toBeInTheDocument();
});

271
superset-frontend/src/components/Menu/MenuRight.tsx
View File

@ -21,6 +21,9 @@ import { MainNav as Menu } from 'src/common/components';
import { t, styled, css, SupersetTheme } from '@superset-ui/core'; import { t, styled, css, SupersetTheme } from '@superset-ui/core';
import { Link } from 'react-router-dom'; import { Link } from 'react-router-dom';
import Icons from 'src/components/Icons'; import Icons from 'src/components/Icons';
import findPermission from 'src/dashboard/util/findPermission';
import { useSelector } from 'react-redux';
import { UserWithPermissionsAndRoles } from 'src/types/bootstrapTypes';
import LanguagePicker from './LanguagePicker'; import LanguagePicker from './LanguagePicker';
import { NavBarProps, MenuObjectProps } from './Menu'; import { NavBarProps, MenuObjectProps } from './Menu';
@ -29,16 +32,22 @@ export const dropdownItems = [
label: t('SQL query'), label: t('SQL query'),
url: '/superset/sqllab?new=true', url: '/superset/sqllab?new=true',
icon: 'fa-fw fa-search', icon: 'fa-fw fa-search',
perm: 'can_sqllab',
view: 'Superset',
}, },
{ {
label: t('Chart'), label: t('Chart'),
url: '/chart/add', url: '/chart/add',
icon: 'fa-fw fa-bar-chart', icon: 'fa-fw fa-bar-chart',
perm: 'can_write',
view: 'Chart',
}, },
{ {
label: t('Dashboard'), label: t('Dashboard'),
url: '/dashboard/new', url: '/dashboard/new',
icon: 'fa-fw fa-dashboard', icon: 'fa-fw fa-dashboard',
perm: 'can_write',
view: 'Dashboard',
}, },
]; ];
@ -83,134 +92,146 @@ const RightMenu = ({
settings, settings,
navbarRight, navbarRight,
isFrontendRoute, isFrontendRoute,
}: RightMenuProps) => ( }: RightMenuProps) => {
<StyledDiv align={align}> const { roles } = useSelector<any, UserWithPermissionsAndRoles>(
<Menu mode="horizontal"> state => state.user,
{!navbarRight.user_is_anonymous && ( );
<SubMenu
data-test="new-dropdown"
title={
<StyledI data-test="new-dropdown-icon" className="fa fa-plus" />
}
icon={<Icons.TriangleDown />}
>
{dropdownItems.map(menu => (
<Menu.Item key={menu.label}>
<a href={menu.url}>
<i
data-test={`menu-item-${menu.label}`}
className={`fa ${menu.icon}`}
/>{' '}
{menu.label}
</a>
</Menu.Item>
))}
</SubMenu>
)}
<SubMenu title="Settings" icon={<Icons.TriangleDown iconSize="xl" />}>
{settings.map((section, index) => [
<Menu.ItemGroup key={`${section.label}`} title={section.label}>
{section.childs?.map(child => {
if (typeof child !== 'string') {
return (
<Menu.Item key={`${child.label}`}>
{isFrontendRoute(child.url) ? (
<Link to={child.url || ''}>{child.label}</Link>
) : (
<a href={child.url}>{child.label}</a>
)}
</Menu.Item>
);
}
return null;
})}
</Menu.ItemGroup>,
index < settings.length - 1 && <Menu.Divider />,
])}
{!navbarRight.user_is_anonymous && [ // if user has any of these roles the dropdown will appear
<Menu.Divider key="user-divider" />, const canSql = findPermission('can_sqllab', 'Superset', roles);
<Menu.ItemGroup key="user-section" title={t('User')}> const canDashboard = findPermission('can_write', 'Dashboard', roles);
{navbarRight.user_profile_url && ( const canChart = findPermission('can_write', 'Chart', roles);
<Menu.Item key="profile"> const showActionDropdown = canSql || canChart || canDashboard;
<a href={navbarRight.user_profile_url}>{t('Profile')}</a> return (
</Menu.Item> <StyledDiv align={align}>
<Menu mode="horizontal">
{!navbarRight.user_is_anonymous && showActionDropdown && (
<SubMenu
data-test="new-dropdown"
title={
<StyledI data-test="new-dropdown-icon" className="fa fa-plus" />
}
icon={<Icons.TriangleDown />}
>
{dropdownItems.map(
menu =>
findPermission(menu.perm, menu.view, roles) && (
<Menu.Item key={menu.label}>
<a href={menu.url}>
<i
data-test={`menu-item-${menu.label}`}
className={`fa ${menu.icon}`}
/>{' '}
{menu.label}
</a>
</Menu.Item>
),
)} )}
{navbarRight.user_info_url && ( </SubMenu>
<Menu.Item key="info"> )}
<a href={navbarRight.user_info_url}>{t('Info')}</a> <SubMenu title="Settings" icon={<Icons.TriangleDown iconSize="xl" />}>
{settings.map((section, index) => [
<Menu.ItemGroup key={`${section.label}`} title={section.label}>
{section.childs?.map(child => {
if (typeof child !== 'string') {
return (
<Menu.Item key={`${child.label}`}>
{isFrontendRoute(child.url) ? (
<Link to={child.url || ''}>{child.label}</Link>
) : (
<a href={child.url}>{child.label}</a>
)}
</Menu.Item>
);
}
return null;
})}
</Menu.ItemGroup>,
index < settings.length - 1 && <Menu.Divider />,
])}
{!navbarRight.user_is_anonymous && [
<Menu.Divider key="user-divider" />,
<Menu.ItemGroup key="user-section" title={t('User')}>
{navbarRight.user_profile_url && (
<Menu.Item key="profile">
<a href={navbarRight.user_profile_url}>{t('Profile')}</a>
</Menu.Item>
)}
{navbarRight.user_info_url && (
<Menu.Item key="info">
<a href={navbarRight.user_info_url}>{t('Info')}</a>
</Menu.Item>
)}
<Menu.Item key="logout">
<a href={navbarRight.user_logout_url}>{t('Logout')}</a>
</Menu.Item> </Menu.Item>
)} </Menu.ItemGroup>,
<Menu.Item key="logout"> ]}
<a href={navbarRight.user_logout_url}>{t('Logout')}</a> {(navbarRight.version_string || navbarRight.version_sha) && [
</Menu.Item> <Menu.Divider key="version-info-divider" />,
</Menu.ItemGroup>, <Menu.ItemGroup key="about-section" title={t('About')}>
]} <div className="about-section">
{(navbarRight.version_string || {navbarRight.show_watermark && (
navbarRight.version_sha || <div css={versionInfoStyles}>
navbarRight.build_number) && [ {t('Powered by Apache Superset')}
<Menu.Divider key="version-info-divider" />, </div>
<Menu.ItemGroup key="about-section" title={t('About')}> )}
<div className="about-section"> {navbarRight.version_string && (
{navbarRight.show_watermark && ( <div css={versionInfoStyles}>
<div css={versionInfoStyles}> Version: {navbarRight.version_string}
{t('Powered by Apache Superset')} </div>
</div> )}
)} {navbarRight.version_sha && (
{navbarRight.version_string && ( <div css={versionInfoStyles}>
<div css={versionInfoStyles}> SHA: {navbarRight.version_sha}
Version: {navbarRight.version_string} </div>
</div> )}
)} {navbarRight.build_number && (
{navbarRight.version_sha && ( <div css={versionInfoStyles}>
<div css={versionInfoStyles}> Build: {navbarRight.build_number}
SHA: {navbarRight.version_sha} </div>
</div> )}
)} </div>
{navbarRight.build_number && ( </Menu.ItemGroup>,
<div css={versionInfoStyles}> ]}
Build: {navbarRight.build_number} </SubMenu>
</div> {navbarRight.show_language_picker && (
)} <LanguagePicker
</div> locale={navbarRight.locale}
</Menu.ItemGroup>, languages={navbarRight.languages}
]} />
</SubMenu> )}
{navbarRight.show_language_picker && ( </Menu>
<LanguagePicker {navbarRight.documentation_url && (
locale={navbarRight.locale} <StyledAnchor
languages={navbarRight.languages} href={navbarRight.documentation_url}
/> target="_blank"
rel="noreferrer"
title={t('Documentation')}
>
<i className="fa fa-question" />
&nbsp;
</StyledAnchor>
)} )}
</Menu> {navbarRight.bug_report_url && (
{navbarRight.documentation_url && ( <StyledAnchor
<StyledAnchor href={navbarRight.bug_report_url}
href={navbarRight.documentation_url} target="_blank"
target="_blank" rel="noreferrer"
rel="noreferrer" title={t('Report a bug')}
title={t('Documentation')} >
> <i className="fa fa-bug" />
<i className="fa fa-question" /> </StyledAnchor>
&nbsp; )}
</StyledAnchor> {navbarRight.user_is_anonymous && (
)} <StyledAnchor href={navbarRight.user_login_url}>
{navbarRight.bug_report_url && ( <i className="fa fa-fw fa-sign-in" />
<StyledAnchor {t('Login')}
href={navbarRight.bug_report_url} </StyledAnchor>
target="_blank" )}
rel="noreferrer" </StyledDiv>
title={t('Report a bug')} );
> };
<i className="fa fa-bug" />
</StyledAnchor>
)}
{navbarRight.user_is_anonymous && (
<StyledAnchor href={navbarRight.user_login_url}>
<i className="fa fa-fw fa-sign-in" />
{t('Login')}
</StyledAnchor>
)}
</StyledDiv>
);
export default RightMenu; export default RightMenu;

7
superset-frontend/src/views/menu.tsx
View File

@ -27,6 +27,9 @@ import { ThemeProvider } from '@superset-ui/core';
import Menu from 'src/components/Menu/Menu'; import Menu from 'src/components/Menu/Menu';
import { theme } from 'src/preamble'; import { theme } from 'src/preamble';
import { Provider } from 'react-redux';
import { store } from './store';
const container = document.getElementById('app'); const container = document.getElementById('app');
const bootstrapJson = container?.getAttribute('data-bootstrap') ?? '{}'; const bootstrapJson = container?.getAttribute('data-bootstrap') ?? '{}';
const bootstrap = JSON.parse(bootstrapJson); const bootstrap = JSON.parse(bootstrapJson);
@ -40,7 +43,9 @@ const app = (
// @ts-ignore: emotion types defs are incompatible between core and cache // @ts-ignore: emotion types defs are incompatible between core and cache
<CacheProvider value={emotionCache}> <CacheProvider value={emotionCache}>
<ThemeProvider theme={theme}> <ThemeProvider theme={theme}>
<Menu data={menu} /> <Provider store={store}>
<Menu data={menu} />
</Provider>
</ThemeProvider> </ThemeProvider>
</CacheProvider> </CacheProvider>
); );