fix: A newly connected database doesn't appear in the databases list …

…if user connected database using the 'plus' button (#20363)

* fix: A newly connected database doesn't appear in the databases list if user connected database using the 'plus' button

* PR comments

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

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

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

@@ -88,18 +88,17 @@ const RightMenu = ({
   settings,
   navbarRight,
   isFrontendRoute,
-}: RightMenuProps) => {
+  setQuery,
+}: RightMenuProps & {
+  setQuery: ({ databaseAdded }: { databaseAdded: boolean }) => void;
+}) => {
   const user = useSelector<any, UserWithPermissionsAndRoles>(
     state => state.user,
   );
   const dashboardId = useSelector<RootState, number | undefined>(
     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<RightMenuProps> = props => {
+  const [, setQuery] = useQueryParams({
+    databaseAdded: BooleanParam,
+  });
+
+  return <RightMenu setQuery={setQuery} {...props} />;
+};
+
+// 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<RightMenuProps> {
+  state = {
+    hasError: false,
+  };
+
+  static getDerivedStateFromError() {
+    return { hasError: true };
+  }
+
+  noop = () => {};
+
+  render() {
+    if (this.state.hasError) {
+      return <RightMenu setQuery={this.noop} {...this.props} />;
+    }
+
+    return this.props.children;
+  }
+}
+
+const RightMenuWrapper: React.FC<RightMenuProps> = props => (
+  <RightMenuErrorWrapper {...props}>
+    <RightMenuWithQueryWrapper {...props} />
+  </RightMenuErrorWrapper>
+);
+
+export default RightMenuWrapper;