Add reset for initial state

Author: mattrunyon

plugins/ui/src/js/src/layout/ReactPanel.tsx

@@ -1,4 +1,10 @@
-import React, { useCallback, useEffect, useMemo, useRef } from 'react';
+import React, {
+  useCallback,
+  useEffect,
+  useMemo,
+  useRef,
+  useState,
+} from 'react';
 import ReactDOM from 'react-dom';
 import { nanoid } from 'nanoid';
 import {
@@ -95,6 +101,12 @@ function ReactPanel({
   const portalManager = usePortalPanelManager();
   const portal = portalManager.get(panelId);
   const panelTitle = title ?? metadata?.name ?? '';
+  const [initialData, setInitialData] = useState(getInitialData());
+  const onErrorReset = useCallback(() => {
+    // Not EMPTY_ARRAY, because we always want to trigger a re-render
+    // in case a panel is reloaded and errors again
+    setInitialData([]);
+  }, []);
 
   // Tracks whether the panel is open and that we have emitted the onOpen event
   const isPanelOpenRef = useRef(false);
@@ -236,13 +248,13 @@ function ReactPanel({
               rowGap={rowGap}
               columnGap={columnGap}
             >
-              <ReactPanelErrorBoundary>
+              <ReactPanelErrorBoundary onReset={onErrorReset}>
                 {/**
                  * Don't render the children if there's an error with the widget. If there's an error with the widget, we can assume the children won't render properly,
                  * but we still want the panels to appear so things don't disappear/jump around.
                  */}
                 <PersistentStateProvider
-                  initialState={getInitialData()}
+                  initialState={initialData}
                   onChange={onDataChange}
                 >
                   {React.Children.map(renderedChildren, child =>

plugins/ui/src/js/src/layout/ReactPanelErrorBoundary.test.tsx

@@ -3,14 +3,6 @@ import { TestUtils } from '@deephaven/test-utils';
 import { render, screen } from '@testing-library/react';
 import { ReactPanelErrorBoundary } from './ReactPanelErrorBoundary';
 
-// Mock the WidgetErrorView component
-jest.mock('../widget/WidgetErrorView', () => ({
-  __esModule: true,
-  default: function MockWidgetErrorView({ error }: { error: Error }) {
-    return <div data-testid="mock-error-view">{error.message}</div>;
-  },
-}));
-
 describe('ReactPanelErrorBoundary', () => {
   // Suppress console.error for our intentional errors
   beforeAll(() => {
@@ -44,10 +36,27 @@ describe('ReactPanelErrorBoundary', () => {
       </ReactPanelErrorBoundary>
     );
 
-    expect(screen.getByTestId('mock-error-view')).toBeInTheDocument();
     expect(screen.getByText('Test error message')).toBeInTheDocument();
   });
 
+  it('renders error view with reload button when using onReset', () => {
+    const ErrorComponent = () => {
+      throw new Error('Test error message');
+    };
+
+    const onReset = jest.fn();
+
+    render(
+      <ReactPanelErrorBoundary onReset={onReset}>
+        <ErrorComponent />
+      </ReactPanelErrorBoundary>
+    );
+
+    expect(screen.getByText('Test error message')).toBeInTheDocument();
+    screen.getByRole('button', { name: 'Reload' }).click();
+    expect(onReset).toHaveBeenCalled();
+  });
+
   it('recovers when children are updated after error', () => {
     const ErrorComponent = () => {
       throw new Error('Test error message');
@@ -60,7 +69,6 @@ describe('ReactPanelErrorBoundary', () => {
     );
 
     // Verify error state
-    expect(screen.getByTestId('mock-error-view')).toBeInTheDocument();
     expect(screen.getByText('Test error message')).toBeInTheDocument();
 
     // Update with working component
@@ -73,7 +81,7 @@ describe('ReactPanelErrorBoundary', () => {
     // Verify recovery
     expect(screen.getByTestId('working-component')).toBeInTheDocument();
     expect(screen.getByText('Working Content')).toBeInTheDocument();
-    expect(screen.queryByTestId('mock-error-view')).not.toBeInTheDocument();
+    expect(screen.queryByText('Test error message')).not.toBeInTheDocument();
   });
 
   it('maintains error state when props update does not include children change', () => {
@@ -88,7 +96,7 @@ describe('ReactPanelErrorBoundary', () => {
     );
 
     // Verify initial error state
-    expect(screen.getByTestId('mock-error-view')).toBeInTheDocument();
+    expect(screen.getByText('Test error message')).toBeInTheDocument();
 
     // Rerender with same children
     rerender(
@@ -98,7 +106,6 @@ describe('ReactPanelErrorBoundary', () => {
     );
 
     // Error view should still be present
-    expect(screen.getByTestId('mock-error-view')).toBeInTheDocument();
     expect(screen.getByText('Test error message')).toBeInTheDocument();
   });
 

plugins/ui/src/js/src/layout/ReactPanelErrorBoundary.tsx

@@ -1,17 +1,19 @@
 import Log from '@deephaven/log';
 import React, { Component, ReactNode } from 'react';
 import WidgetErrorView from '../widget/WidgetErrorView';
+import { type WidgetError } from '../widget/WidgetTypes';
 
 const log = Log.module('ReactPanelErrorBoundary');
 
 export interface ReactPanelErrorBoundaryProps {
+  onReset?: () => void;
   /** Children to catch errors from. Error will reset when the children have been updated. */
   children: ReactNode;
 }
 
 export interface ReactPanelErrorBoundaryState {
   /** Currently displayed error. Reset when children are updated. */
-  error?: Error;
+  error?: Error | WidgetError;
 }
 
 /**
@@ -49,9 +51,43 @@ export class ReactPanelErrorBoundary extends Component<
     log.error('Error caught by ErrorBoundary', error, errorInfo);
   }
 
+  getError(): WidgetError | undefined {
+    const { error } = this.state;
+    const { onReset } = this.props;
+
+    if (error == null) {
+      return error;
+    }
+    if (error instanceof Error) {
+      return {
+        name: error.name,
+        message: error.message,
+        stack: error.stack,
+        action: onReset
+          ? {
+              title: 'Reload',
+              action: () => {
+                onReset();
+              },
+            }
+          : undefined,
+      };
+    }
+    return {
+      ...error,
+      action: {
+        title: error.action?.title ?? 'Reload',
+        action: () => {
+          error.action?.action?.();
+          onReset?.();
+        },
+      },
+    };
+  }
+
   render(): ReactNode {
     const { children } = this.props;
-    const { error } = this.state;
+    const error = this.getError();
     // We need to check for undefined children because React will throw an error if we return undefined from a render method
     // Note this behaviour was changed in React 18: https://github.com/reactwg/react-18/discussions/75
     return error != null ? <WidgetErrorView error={error} /> : children ?? null;