[UI] Fix: error boundary does not allow user to navigate away from the page (#2167)

* Error boundary implementation with core component

* Add Error Boundary component

* Revert to main version of core

Co-authored-by: Ahmed Magdy <[email protected]>

Author: AlinaGoaga

ui-cra/src/components/ErrorBoundary.tsx

@@ -1,30 +1,45 @@
-import * as React from 'react';
+import React, { useState, useEffect, FC } from 'react';
+import { useLocation } from 'react-router-dom';
 import { ContentWrapper } from './Layout/ContentWrapper';
 import { PageTemplate } from './Layout/PageTemplate';
-export default class ErrorBoundary extends React.Component<
-  any,
-  { hasError: boolean; error: Error | null }
-> {
+
+interface Props {
+  hasError: boolean;
+  error: Error | null;
+}
+
+class ErrorBoundaryDetail extends React.Component<any, Props> {
   constructor(props: any) {
     super(props);
     this.state = { hasError: false, error: null };
   }
 
   static getDerivedStateFromError(error: Error) {
-    // Update state so the next render will show the fallback UI.
     return { hasError: true, error };
   }
 
+  componentDidUpdate(prevProps: Props) {
+    if (!this.props.hasError && prevProps.hasError) {
+      this.setState({ hasError: false });
+    }
+  }
+
   componentDidCatch(error: Error) {
-    // You can also log the error to an error reporting service
     console.error(error);
+    this.props.setHasError(true);
   }
 
   render() {
     if (this.state.hasError) {
-      // You can render any custom fallback UI
       return (
-        <PageTemplate documentTitle="Error" path={[{ label: 'Error' }]}>
+        <PageTemplate
+          documentTitle="Error"
+          path={[
+            {
+              label: 'Error',
+            },
+          ]}
+        >
           <ContentWrapper>
             <h3>Something went wrong.</h3>
             <pre>{this.state.error?.message}</pre>
@@ -37,3 +52,25 @@ export default class ErrorBoundary extends React.Component<
     return this.props.children;
   }
 }
+
+/** Function component wrapper as we need useEffect to set the state back to false on location changing **/
+const ErrorBoundary: FC<{
+  children: React.ReactNode;
+}> = ({ children }) => {
+  const [hasError, setHasError] = useState<boolean>(false);
+  const location = useLocation();
+
+  useEffect(() => {
+    if (hasError) {
+      setHasError(false);
+    }
+  }, [location.key]);
+
+  return (
+    <ErrorBoundaryDetail hasError={hasError} setHasError={setHasError}>
+      {children}
+    </ErrorBoundaryDetail>
+  );
+};
+
+export default ErrorBoundary;

ui-cra/src/components/ResponsiveDrawer.tsx

@@ -29,11 +29,11 @@ import EnterpriseClientProvider from '../contexts/EnterpriseClient/Provider';
 import { TerraformProvider } from '../contexts/Terraform';
 import NotificationsProvider from '../contexts/Notifications/Provider';
 import AppRoutes from '../routes';
-import ErrorBoundary from './ErrorBoundary';
 import { Navigation } from './Navigation';
 import Compose from './ProvidersCompose';
 import { resolver } from '../utils/link-resolver';
 import { ListConfigProvider, VersionProvider } from '../contexts/ListConfig';
+import ErrorBoundary from './ErrorBoundary';
 
 const drawerWidth = 220;