From 9acd15edb4c436ae66fe3cad46c5fc75884f3357 Mon Sep 17 00:00:00 2001
From: Diego Medina <diegomedina24@gmail.com>
Date: Mon, 13 Jun 2022 14:48:19 -0300
Subject: [PATCH 1/2] fix: A newly connected database doesn't appear in the
 databases list if user connected database using the 'plus' button

---
 .../src/views/components/MenuRight.tsx        | 45 ++++++++++++++++---
 1 file changed, 39 insertions(+), 6 deletions(-)

diff --git a/superset-frontend/src/views/components/MenuRight.tsx b/superset-frontend/src/views/components/MenuRight.tsx
index 61bc6de0d6926..4db2d258c7a5c 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<any, UserWithPermissionsAndRoles>(
     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,38 @@ const RightMenu = ({
   );
 };
 
-export default RightMenu;
+const RightMenuWithQueryWrapper: React.FC<RightMenuProps> = props => {
+  const [, setQuery] = useQueryParams({
+    databaseAdded: BooleanParam,
+  });
+
+  return <RightMenu setQuery={setQuery} {...props} />;
+};
+
+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;

From 86e5b19f063f5b337871cb7af13c4416147f8f7c Mon Sep 17 00:00:00 2001
From: Diego Medina <diegomedina24@gmail.com>
Date: Tue, 14 Jun 2022 14:48:29 -0300
Subject: [PATCH 2/2] PR comments

---
 superset-frontend/src/views/components/Menu.test.tsx | 6 ++++++
 superset-frontend/src/views/components/MenuRight.tsx | 5 +++++
 2 files changed, 11 insertions(+)

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(<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();
+});
diff --git a/superset-frontend/src/views/components/MenuRight.tsx b/superset-frontend/src/views/components/MenuRight.tsx
index 4db2d258c7a5c..36c5dd37fda2f 100644
--- a/superset-frontend/src/views/components/MenuRight.tsx
+++ b/superset-frontend/src/views/components/MenuRight.tsx
@@ -446,6 +446,11 @@ const RightMenuWithQueryWrapper: React.FC<RightMenuProps> = props => {
   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,