(superset) branch master updated: refactor: Migrate ErrorBoundary to typescript (#27143)

[mi...@apache.org]

This is an automated email from the ASF dual-hosted git repository.

michaelsmolina pushed a commit to branch master
in repository https://gitbox.apache.org/repos/asf/superset.git


The following commit(s) were added to refs/heads/master by this push:
     new 1776405903 refactor: Migrate ErrorBoundary to typescript (#27143)
1776405903 is described below

commit 1776405903cc9a2d65b9cc8844709be7c20863ef
Author: Enzo Martellucci <52...@users.noreply.github.com>
AuthorDate: Fri Feb 16 22:10:13 2024 +0100

    refactor: Migrate ErrorBoundary to typescript (#27143)
    
    Co-authored-by: Michael S. Molina <70...@users.noreply.github.com>
---
 .../ErrorBoundary/ErrorBoundary.test.tsx           |  8 ++--
 .../ErrorBoundary/{index.jsx => index.tsx}         | 49 +++++++++++++---------
 2 files changed, 33 insertions(+), 24 deletions(-)

diff --git a/superset-frontend/src/components/ErrorBoundary/ErrorBoundary.test.tsx b/superset-frontend/src/components/ErrorBoundary/ErrorBoundary.test.tsx
index 75ddc1c6fa..0226bd731c 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 0a1d0c7c46..0c4efe1b50 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;