From 2f2b9c4d71a047355665c35635b971bbe573b166 Mon Sep 17 00:00:00 2001
From: maryliag <marylia@cockroachlabs.com>
Date: Fri, 12 May 2023 22:05:33 +0000
Subject: [PATCH] ui: no need to refresh page after error

Previously, if one page crashes on DB Console, all other
pages would show the same error message and the user had to
force a refresh on the browser to be able to see the other pages.
Now only the broken page shows the error and all the other pages
load as expected. The user still needs to force a refresh on
the broken page if they want to retry.

Fixes #97533

Release note (ui change): If a page crashed, a force refresh is
no longer required to be able to see the other pages on DB Console.
---
 .../db-console/src/views/app/containers/layout/index.tsx      | 4 +++-
 1 file changed, 3 insertions(+), 1 deletion(-)

diff --git a/pkg/ui/workspaces/db-console/src/views/app/containers/layout/index.tsx b/pkg/ui/workspaces/db-console/src/views/app/containers/layout/index.tsx
index 98bbb80f6994..7c0f1418fe0f 100644
--- a/pkg/ui/workspaces/db-console/src/views/app/containers/layout/index.tsx
+++ b/pkg/ui/workspaces/db-console/src/views/app/containers/layout/index.tsx
@@ -98,7 +98,9 @@ class Layout extends React.Component<LayoutProps & RouteComponentProps> {
               <NavigationBar />
             </div>
             <div ref={this.contentRef} className="layout-panel__content">
-              <ErrorBoundary>{this.props.children}</ErrorBoundary>
+              <ErrorBoundary key={this.props.location.pathname}>
+                {this.props.children}
+              </ErrorBoundary>
             </div>
           </div>
         </div>