diff --git a/superset-frontend/src/views/components/Menu.test.tsx b/superset-frontend/src/views/components/Menu.test.tsx index 0d84d2c663ccc..31aad0be8a1e3 100644 --- a/superset-frontend/src/views/components/Menu.test.tsx +++ b/superset-frontend/src/views/components/Menu.test.tsx @@ -476,3 +476,9 @@ test('should hide create button without proper roles', () => { render(, { useRedux: true, useQueryParams: true }); expect(screen.queryByTestId('new-dropdown')).not.toBeInTheDocument(); }); + +test('should render without QueryParamProvider', () => { + useSelectorMock.mockReturnValue({ roles: [] }); + render(, { useRedux: true }); + expect(screen.queryByTestId('new-dropdown')).not.toBeInTheDocument(); +}); diff --git a/superset-frontend/src/views/components/MenuRight.tsx b/superset-frontend/src/views/components/MenuRight.tsx index 61bc6de0d6926..36c5dd37fda2f 100644 --- a/superset-frontend/src/views/components/MenuRight.tsx +++ b/superset-frontend/src/views/components/MenuRight.tsx @@ -88,7 +88,10 @@ const RightMenu = ({ settings, navbarRight, isFrontendRoute, -}: RightMenuProps) => { + setQuery, +}: RightMenuProps & { + setQuery: ({ databaseAdded }: { databaseAdded: boolean }) => void; +}) => { const user = useSelector( state => state.user, ); @@ -96,10 +99,6 @@ const RightMenu = ({ state => state.dashboardInfo?.id, ); - const [, setQuery] = useQueryParams({ - databaseAdded: BooleanParam, - }); - const { roles } = user; const { CSV_EXTENSIONS, @@ -439,4 +438,43 @@ const RightMenu = ({ ); }; -export default RightMenu; +const RightMenuWithQueryWrapper: React.FC = props => { + const [, setQuery] = useQueryParams({ + databaseAdded: BooleanParam, + }); + + return ; +}; + +// Query param manipulation requires that, during the setup, the +// QueryParamProvider is present and configured. +// Superset still has multiple entry points, and not all of them have +// the same setup, and critically, not all of them have the QueryParamProvider. +// This wrapper ensures the RightMenu renders regardless of the provider being present. +class RightMenuErrorWrapper extends React.PureComponent { + state = { + hasError: false, + }; + + static getDerivedStateFromError() { + return { hasError: true }; + } + + noop = () => {}; + + render() { + if (this.state.hasError) { + return ; + } + + return this.props.children; + } +} + +const RightMenuWrapper: React.FC = props => ( + + + +); + +export default RightMenuWrapper;