Skip to content

Commit

Permalink
fix: Use Home page in SPA (#21006)
Browse files Browse the repository at this point in the history 
* fix: Use Welcome page in SPA

* Fix Menu.test.tsx

* Handle not frontend routes
  • Loading branch information
@EugeneTorap
EugeneTorap committed Aug 18, 2022
1 parent 1afcdfb commit dcab326
Show file tree
Hide file tree
Showing 3 changed files with 109 additions and 25 deletions.
119 changes: 98 additions & 21 deletions superset-frontend/src/views/components/Menu.test.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -253,13 +253,18 @@ test('should render', () => {
const { container } = render(<Menu {...mockedProps} />, {
useRedux: true,
useQueryParams: true,
useRouter: true,
});
expect(container).toBeInTheDocument();
});

test('should render the navigation', () => {
useSelectorMock.mockReturnValue({ roles: user.roles });
render(<Menu {...mockedProps} />, { useRedux: true, useQueryParams: true });
render(<Menu {...mockedProps} />, {
useRedux: true,
useQueryParams: true,
useRouter: true,
});
expect(screen.getByRole('navigation')).toBeInTheDocument();
});

Expand All @@ -270,7 +275,11 @@ test('should render the brand', () => {
brand: { alt, icon },
},
} = mockedProps;
render(<Menu {...mockedProps} />, { useRedux: true, useQueryParams: true });
render(<Menu {...mockedProps} />, {
useRedux: true,
useQueryParams: true,
useRouter: true,
});
const image = screen.getByAltText(alt);
expect(image).toHaveAttribute('src', icon);
});
Expand All @@ -280,7 +289,11 @@ test('should render all the top navbar menu items', () => {
const {
data: { menu },
} = mockedProps;
render(<Menu {...mockedProps} />, { useRedux: true, useQueryParams: true });
render(<Menu {...mockedProps} />, {
useRedux: true,
useQueryParams: true,
useRouter: true,
});
menu.forEach(item => {
expect(screen.getByText(item.label)).toBeInTheDocument();
});
Expand All @@ -291,7 +304,11 @@ test('should render the top navbar child menu items', async () => {
const {
data: { menu },
} = mockedProps;
render(<Menu {...mockedProps} />, { useRedux: true, useQueryParams: true });
render(<Menu {...mockedProps} />, {
useRedux: true,
useQueryParams: true,
useRouter: true,
});
const sources = screen.getByText('Sources');
userEvent.hover(sources);
const datasets = await screen.findByText('Datasets');
Expand All @@ -305,7 +322,11 @@ test('should render the top navbar child menu items', async () => {

test('should render the dropdown items', async () => {
useSelectorMock.mockReturnValue({ roles: user.roles });
render(<Menu {...notanonProps} />, { useRedux: true, useQueryParams: true });
render(<Menu {...notanonProps} />, {
useRedux: true,
useQueryParams: true,
useRouter: true,
});
const dropdown = screen.getByTestId('new-dropdown-icon');
userEvent.hover(dropdown);
// todo (philip): test data submenu
Expand All @@ -331,14 +352,22 @@ test('should render the dropdown items', async () => {

test('should render the Settings', async () => {
useSelectorMock.mockReturnValue({ roles: user.roles });
render(<Menu {...mockedProps} />, { useRedux: true, useQueryParams: true });
render(<Menu {...mockedProps} />, {
useRedux: true,
useQueryParams: true,
useRouter: true,
});
const settings = await screen.findByText('Settings');
expect(settings).toBeInTheDocument();
});

test('should render the Settings menu item', async () => {
useSelectorMock.mockReturnValue({ roles: user.roles });
render(<Menu {...mockedProps} />, { useRedux: true, useQueryParams: true });
render(<Menu {...mockedProps} />, {
useRedux: true,
useQueryParams: true,
useRouter: true,
});
userEvent.hover(screen.getByText('Settings'));
const label = await screen.findByText('Security');
expect(label).toBeInTheDocument();
Expand All @@ -349,21 +378,33 @@ test('should render the Settings dropdown child menu items', async () => {
const {
data: { settings },
} = mockedProps;
render(<Menu {...mockedProps} />, { useRedux: true, useQueryParams: true });
render(<Menu {...mockedProps} />, {
useRedux: true,
useQueryParams: true,
useRouter: true,
});
userEvent.hover(screen.getByText('Settings'));
const listUsers = await screen.findByText('List Users');
expect(listUsers).toHaveAttribute('href', settings[0].childs[0].url);
});

test('should render the plus menu (+) when user is not anonymous', () => {
useSelectorMock.mockReturnValue({ roles: user.roles });
render(<Menu {...notanonProps} />, { useRedux: true, useQueryParams: true });
render(<Menu {...notanonProps} />, {
useRedux: true,
useQueryParams: true,
useRouter: true,
});
expect(screen.getByTestId('new-dropdown')).toBeInTheDocument();
});

test('should NOT render the plus menu (+) when user is anonymous', () => {
useSelectorMock.mockReturnValue({ roles: user.roles });
render(<Menu {...mockedProps} />, { useRedux: true, useQueryParams: true });
render(<Menu {...mockedProps} />, {
useRedux: true,
useQueryParams: true,
useRouter: true,
});
expect(screen.queryByTestId('new-dropdown')).not.toBeInTheDocument();
});

Expand All @@ -375,7 +416,11 @@ test('should render the user actions when user is not anonymous', async () => {
},
} = mockedProps;

render(<Menu {...notanonProps} />, { useRedux: true, useQueryParams: true });
render(<Menu {...notanonProps} />, {
useRedux: true,
useQueryParams: true,
useRouter: true,
});
userEvent.hover(screen.getByText('Settings'));
const user = await screen.findByText('User');
expect(user).toBeInTheDocument();
Expand All @@ -389,7 +434,11 @@ test('should render the user actions when user is not anonymous', async () => {

test('should NOT render the user actions when user is anonymous', () => {
useSelectorMock.mockReturnValue({ roles: user.roles });
render(<Menu {...mockedProps} />, { useRedux: true, useQueryParams: true });
render(<Menu {...mockedProps} />, {
useRedux: true,
useQueryParams: true,
useRouter: true,
});
expect(screen.queryByText('User')).not.toBeInTheDocument();
});

Expand All @@ -401,7 +450,11 @@ test('should render the Profile link when available', async () => {
},
} = mockedProps;

render(<Menu {...notanonProps} />, { useRedux: true, useQueryParams: true });
render(<Menu {...notanonProps} />, {
useRedux: true,
useQueryParams: true,
useRouter: true,
});

userEvent.hover(screen.getByText('Settings'));
const profile = await screen.findByText('Profile');
Expand All @@ -416,7 +469,11 @@ test('should render the About section and version_string, sha or build_number wh
},
} = mockedProps;

render(<Menu {...mockedProps} />, { useRedux: true, useQueryParams: true });
render(<Menu {...mockedProps} />, {
useRedux: true,
useQueryParams: true,
useRouter: true,
});
userEvent.hover(screen.getByText('Settings'));
const about = await screen.findByText('About');
const version = await screen.findByText(`Version: ${version_string}`);
Expand All @@ -435,7 +492,11 @@ test('should render the Documentation link when available', async () => {
navbar_right: { documentation_url },
},
} = mockedProps;
render(<Menu {...mockedProps} />, { useRedux: true, useQueryParams: true });
render(<Menu {...mockedProps} />, {
useRedux: true,
useQueryParams: true,
useRouter: true,
});
userEvent.hover(screen.getByText('Settings'));
const doc = await screen.findByTitle('Documentation');
expect(doc).toHaveAttribute('href', documentation_url);
Expand All @@ -449,7 +510,11 @@ test('should render the Bug Report link when available', async () => {
},
} = mockedProps;

render(<Menu {...mockedProps} />, { useRedux: true, useQueryParams: true });
render(<Menu {...mockedProps} />, {
useRedux: true,
useQueryParams: true,
useRouter: true,
});
const bugReport = await screen.findByTitle('Report a bug');
expect(bugReport).toHaveAttribute('href', bug_report_url);
});
Expand All @@ -462,26 +527,38 @@ test('should render the Login link when user is anonymous', () => {
},
} = mockedProps;

render(<Menu {...mockedProps} />, { useRedux: true, useQueryParams: true });
render(<Menu {...mockedProps} />, {
useRedux: true,
useQueryParams: true,
useRouter: true,
});
const login = screen.getByText('Login');
expect(login).toHaveAttribute('href', user_login_url);
});

test('should render the Language Picker', () => {
useSelectorMock.mockReturnValue({ roles: user.roles });
render(<Menu {...mockedProps} />, { useRedux: true, useQueryParams: true });
render(<Menu {...mockedProps} />, {
useRedux: true,
useQueryParams: true,
useRouter: true,
});
expect(screen.getByLabelText('Languages')).toBeInTheDocument();
});

test('should hide create button without proper roles', () => {
useSelectorMock.mockReturnValue({ roles: [] });
render(<Menu {...mockedProps} />, { useRedux: true, useQueryParams: true });
render(<Menu {...mockedProps} />, {
useRedux: true,
useQueryParams: true,
useRouter: true,
});
expect(screen.queryByTestId('new-dropdown')).not.toBeInTheDocument();
});

test('should render without QueryParamProvider', () => {
useSelectorMock.mockReturnValue({ roles: [] });
render(<Menu {...mockedProps} />, { useRedux: true });
render(<Menu {...mockedProps} />, { useRedux: true, useRouter: true });
expect(screen.queryByTestId('new-dropdown')).not.toBeInTheDocument();
});

Expand All @@ -494,7 +571,7 @@ test('should render an extension component if one is supplied', () => {

setupExtensions();

render(<Menu {...mockedProps} />);
render(<Menu {...mockedProps} />, { useRouter: true });

expect(
screen.getByText('navbar.right extension component'),
Expand Down
13 changes: 10 additions & 3 deletions superset-frontend/src/views/components/Menu.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -25,6 +25,7 @@ import { Row, Col, Grid } from 'src/components';
import { MainNav as DropdownMenu, MenuMode } from 'src/components/Menu';
import { Tooltip } from 'src/components/Tooltip';
import { Link } from 'react-router-dom';
import { GenericLink } from 'src/components/GenericLink/GenericLink';
import Icons from 'src/components/Icons';
import { useUiConfig } from 'src/components/UiConfigContext';
import { URL_PARAMS } from 'src/constants';
Expand Down Expand Up @@ -282,9 +283,15 @@ export function Menu({
title={brand.tooltip}
arrowPointAtCenter
>
<a className="navbar-brand" href={brand.path}>
<img src={brand.icon} alt={brand.alt} />
</a>
{isFrontendRoute(window.location.pathname) ? (
<GenericLink className="navbar-brand" to={brand.path}>
<img src={brand.icon} alt={brand.alt} />
</GenericLink>
) : (
<a className="navbar-brand" href={brand.path}>
<img src={brand.icon} alt={brand.alt} />
</a>
)}
</Tooltip>
{brand.text && (
<div className="navbar-brand-text">
Expand Down
2 changes: 1 addition & 1 deletion superset/views/base.py
View file
Original file line number Diff line number Diff line change
Expand Up @@ -310,7 +310,7 @@ def menu_data() -> Dict[str, Any]:
return {
"menu": menu,
"brand": {
"path": appbuilder.app.config["LOGO_TARGET_PATH"] or "/",
"path": appbuilder.app.config["LOGO_TARGET_PATH"] or "/superset/welcome/",
"icon": appbuilder.app_icon,
"alt": appbuilder.app_name,
"tooltip": appbuilder.app.config["LOGO_TOOLTIP"],
Expand Down

0 comments on commit dcab326

Please sign in to comment.