From 1776405903cc9a2d65b9cc8844709be7c20863ef Mon Sep 17 00:00:00 2001
From: Enzo Martellucci <52219496+EnxDev@users.noreply.github.com>
Date: Fri, 16 Feb 2024 22:10:13 +0100
Subject: [PATCH] refactor: Migrate ErrorBoundary to typescript (#27143)

Co-authored-by: Michael S. Molina <70410625+michael-s-molina@users.noreply.github.com>
---
 .../ErrorBoundary/ErrorBoundary.test.tsx      |  8 +--
 .../ErrorBoundary/{index.jsx => index.tsx}    | 49 +++++++++++--------
 2 files changed, 33 insertions(+), 24 deletions(-)
 rename superset-frontend/src/components/ErrorBoundary/{index.jsx => index.tsx} (64%)

diff --git a/superset-frontend/src/components/ErrorBoundary/ErrorBoundary.test.tsx b/superset-frontend/src/components/ErrorBoundary/ErrorBoundary.test.tsx
index 75ddc1c6fa9..0226bd731c4 100644
--- a/superset-frontend/src/components/ErrorBoundary/ErrorBoundary.test.tsx
+++ b/superset-frontend/src/components/ErrorBoundary/ErrorBoundary.test.tsx
@@ -18,15 +18,15 @@
  */
 import React from 'react';
 import { render, screen } from 'spec/helpers/testing-library';
-import ErrorBoundary from '.';
+import ErrorBoundary, { ErrorBoundaryProps } from '.';
 
-const mockedProps = {
+const mockedProps: Partial<ErrorBoundaryProps> = {
   children: <span>Error children</span>,
-  onError: () => null,
+  onError: jest.fn(),
   showMessage: false,
 };
 
-const Child = () => {
+const Child = (): React.ReactElement => {
   throw new Error('Thrown error');
 };
 
diff --git a/superset-frontend/src/components/ErrorBoundary/index.jsx b/superset-frontend/src/components/ErrorBoundary/index.tsx
similarity index 64%
rename from superset-frontend/src/components/ErrorBoundary/index.jsx
rename to superset-frontend/src/components/ErrorBoundary/index.tsx
index 0a1d0c7c465..0c4efe1b509 100644
--- a/superset-frontend/src/components/ErrorBoundary/index.jsx
+++ b/superset-frontend/src/components/ErrorBoundary/index.tsx
@@ -17,28 +17,35 @@
  * under the License.
  */
 import React from 'react';
-import PropTypes from 'prop-types';
 import { t } from '@superset-ui/core';
 import ErrorMessageWithStackTrace from 'src/components/ErrorMessage/ErrorMessageWithStackTrace';
 
-const propTypes = {
-  children: PropTypes.node.isRequired,
-  onError: PropTypes.func,
-  showMessage: PropTypes.bool,
-};
-const defaultProps = {
-  onError: () => {},
-  showMessage: true,
-};
+export interface ErrorBoundaryProps {
+  children: React.ReactNode;
+  onError?: (error: Error, info: React.ErrorInfo) => void;
+  showMessage?: boolean;
+}
+
+interface ErrorBoundaryState {
+  error: Error | null;
+  info: React.ErrorInfo | null;
+}
 
-export default class ErrorBoundary extends React.Component {
-  constructor(props) {
+export default class ErrorBoundary extends React.Component<
+  ErrorBoundaryProps,
+  ErrorBoundaryState
+> {
+  static defaultProps: Partial<ErrorBoundaryProps> = {
+    showMessage: true,
+  };
+
+  constructor(props: ErrorBoundaryProps) {
     super(props);
     this.state = { error: null, info: null };
   }
 
-  componentDidCatch(error, info) {
-    if (this.props.onError) this.props.onError(error, info);
+  componentDidCatch(error: Error, info: React.ErrorInfo): void {
+    this.props.onError?.(error, info);
     this.setState({ error, info });
   }
 
@@ -46,18 +53,22 @@ export default class ErrorBoundary extends React.Component {
     const { error, info } = this.state;
     if (error) {
       const firstLine = error.toString();
-      const message = (
+      const messageString = `${t('Unexpected error')}${
+        firstLine ? `: ${firstLine}` : ''
+      }`;
+      const messageElement = (
         <span>
           <strong>{t('Unexpected error')}</strong>
           {firstLine ? `: ${firstLine}` : ''}
         </span>
       );
+
       if (this.props.showMessage) {
         return (
           <ErrorMessageWithStackTrace
-            subtitle={message}
-            copyText={message}
-            stackTrace={info ? info.componentStack : null}
+            subtitle={messageElement}
+            copyText={messageString}
+            stackTrace={info?.componentStack}
           />
         );
       }
@@ -66,5 +77,3 @@ export default class ErrorBoundary extends React.Component {
     return this.props.children;
   }
 }
-ErrorBoundary.propTypes = propTypes;
-ErrorBoundary.defaultProps = defaultProps;