From 3eb28f919d2abfd0e51d668392d9fc60c4caaa2c Mon Sep 17 00:00:00 2001
From: Wroud <wrouds@gmail.com>
Date: Fri, 27 Aug 2021 12:32:42 +0300
Subject: [PATCH] fix: remount block with error

---
 .../packages/core-app/src/AppScreen/Main.tsx  |  2 +-
 .../core-app/src/AppScreen/RightArea.tsx      |  6 +++---
 .../core-blocks/src/ErrorBoundary.tsx         | 21 +++++++++++++++++--
 .../core-blocks/src/Tabs/TabPanel.tsx         |  4 ++--
 4 files changed, 25 insertions(+), 8 deletions(-)

diff --git a/webapp/packages/core-app/src/AppScreen/Main.tsx b/webapp/packages/core-app/src/AppScreen/Main.tsx
index 85cd837a7d..6c4c6fbbeb 100644
--- a/webapp/packages/core-app/src/AppScreen/Main.tsx
+++ b/webapp/packages/core-app/src/AppScreen/Main.tsx
@@ -47,7 +47,7 @@ export const Main: React.FC = function Main() {
     <space as="main">
       <Split sticky={30}>
         <Pane main>
-          <ErrorBoundary>
+          <ErrorBoundary remount>
             <NavigationTree />
           </ErrorBoundary>
         </Pane>
diff --git a/webapp/packages/core-app/src/AppScreen/RightArea.tsx b/webapp/packages/core-app/src/AppScreen/RightArea.tsx
index 222e5a00d0..11e679dac2 100644
--- a/webapp/packages/core-app/src/AppScreen/RightArea.tsx
+++ b/webapp/packages/core-app/src/AppScreen/RightArea.tsx
@@ -61,18 +61,18 @@ export const RightArea = observer(function RightArea() {
   return styled(useStyles(styles, splitStyles, splitHorizontalStyles, slideBoxStyles))(
     <SlideBox open={optionsPanelService.active}>
       <SlideElement>
-        <ErrorBoundary><OptionsPanel /></ErrorBoundary>
+        <ErrorBoundary remount><OptionsPanel /></ErrorBoundary>
       </SlideElement>
       <SlideElement>
         <Split sticky={30} split="horizontal" mode={logViewerService.isActive ? undefined : 'minimize'} keepRatio>
           <Pane>
-            <ErrorBoundary>
+            <ErrorBoundary remount>
               <NavigationTabsBar />
             </ErrorBoundary>
           </Pane>
           {logViewerService.isActive && <ResizerControls />}
           <Pane main>
-            <ErrorBoundary>
+            <ErrorBoundary remount>
               <LogViewer />
             </ErrorBoundary>
           </Pane>
diff --git a/webapp/packages/core-blocks/src/ErrorBoundary.tsx b/webapp/packages/core-blocks/src/ErrorBoundary.tsx
index e784fdec41..db34d30fad 100644
--- a/webapp/packages/core-blocks/src/ErrorBoundary.tsx
+++ b/webapp/packages/core-blocks/src/ErrorBoundary.tsx
@@ -22,6 +22,7 @@ const style = css`
 interface IProps {
   onRefresh?: () => any;
   root?: boolean;
+  remount?: boolean;
 }
 
 interface IState {
@@ -36,6 +37,9 @@ export class ErrorBoundary extends React.Component<IProps, IState> {
       error: null,
       errorInfo: null,
     };
+
+    this.remount = this.remount.bind(this);
+    this.refresh = this.refresh.bind(this);
   }
 
   componentDidCatch(error: Error, errorInfo: ErrorInfo): void {
@@ -47,13 +51,14 @@ export class ErrorBoundary extends React.Component<IProps, IState> {
 
   render(): React.ReactNode {
     const { errorInfo, error } = this.state;
-    const { root, onRefresh } = this.props;
+    const { remount, root, onRefresh } = this.props;
 
     if (errorInfo) {
       return styled(style)(
         <DisplayError root={root}>
           {root && <action><AppRefreshButton /></action>}
-          {onRefresh && <action><Button onClick={onRefresh}>Refresh</Button></action>}
+          {onRefresh && <action><Button onClick={this.refresh}>Refresh</Button></action>}
+          {remount && <action><Button onClick={this.remount}>Refresh</Button></action>}
           <details style={{ whiteSpace: 'pre-wrap' }}>
             {error?.toString() ?? ''}
             <br />
@@ -65,4 +70,16 @@ export class ErrorBoundary extends React.Component<IProps, IState> {
 
     return this.props.children;
   }
+
+  private remount() {
+    this.setState({
+      error: null,
+      errorInfo: null,
+    });
+  }
+
+  private refresh() {
+    this.props.onRefresh?.();
+    this.remount();
+  }
 }
diff --git a/webapp/packages/core-blocks/src/Tabs/TabPanel.tsx b/webapp/packages/core-blocks/src/Tabs/TabPanel.tsx
index 223210a83f..348421a291 100644
--- a/webapp/packages/core-blocks/src/Tabs/TabPanel.tsx
+++ b/webapp/packages/core-blocks/src/Tabs/TabPanel.tsx
@@ -34,7 +34,7 @@ export const TabPanel: React.FC<TabPanelProps> = function TabPanel({
 
   if (typeof children === 'function') {
     return (
-      <ErrorBoundary>
+      <ErrorBoundary remount>
         <TabContext.Provider value={tabContext}>
           <BaseTabPanel {...state.state} tabId={tabId} className={className}>
             {(children as (state: TabStateReturn) => React.ReactNode)(state.state)}
@@ -45,7 +45,7 @@ export const TabPanel: React.FC<TabPanelProps> = function TabPanel({
   }
 
   return (
-    <ErrorBoundary>
+    <ErrorBoundary remount>
       <TabContext.Provider value={tabContext}>
         <BaseTabPanel {...state.state} tabId={tabId} className={className}>
           {children}