Merge pull request openshift#12170 from jcaianirh/expose-error-boundary

CONSOLE-3276: Expose ErrorBoundary capabilities in the SDK

Author: openshift-merge-robot

dynamic-demo-plugin/console-extensions.json

@@ -360,6 +360,23 @@
       "href": "/test-modal"
     }
   },
+  {
+    "type": "console.page/route",
+    "properties": {
+      "path": "/sample-error-boundary-page",
+      "component": { "$codeRef": "sampleErrorBoundaryPage.default" }
+    }
+  },
+  {
+    "type": "console.navigation/href",
+    "properties": {
+      "id": "error-boundary-page",
+      "perspective": "admin",
+      "section": "admin-demo-section",
+      "name": "%plugin__console-demo-plugin~Sample Error Boundary Page%",
+      "href": "/sample-error-boundary-page"
+    }
+  },
   {
     "type": "console.page/route",
     "properties": {

dynamic-demo-plugin/locales/en/plugin__console-demo-plugin.json

@@ -3,6 +3,10 @@
   "{{count}} Worker Node_plural": "{{count}} Worker Node",
   "Worker Nodes": "Worker Nodes",
   "Custom Overview Detail Info": "Custom Overview Detail Info",
+  "Oops something went wrong in your dynamic plug-in": "Oops something went wrong in your dynamic plug-in",
+  "Sample Error Boundary Page": "Sample Error Boundary Page",
+  "Create an exception": "Create an exception",
+  "Launch buggy component": "Launch buggy component",
   "Example page with a namespace bar": "Example page with a namespace bar",
   "Currently selected namespace": "Currently selected namespace",
   "Example info alert": "Example info alert",

dynamic-demo-plugin/package.json

@@ -68,7 +68,8 @@
       "customOverviewDetailItem": "./components/CustomOverviewDetailItem",
       "projectOverviewInventory": "./components/ProjectOverview/Inventory",
       "projectOverview": "./utils/project-overview",
-      "modalPage": "./components/Modals/ModalPage"
+      "modalPage": "./components/Modals/ModalPage",
+      "sampleErrorBoundaryPage": "./components/ErrorBoundary/SampleErrorBoundaryPage"
     },
     "dependencies": {
       "@console/pluginAPI": "*"

dynamic-demo-plugin/src/components/ErrorBoundary/DemoErrorBoundary.tsx

@@ -0,0 +1,43 @@
+import * as React from 'react';
+import { withTranslation } from 'react-i18next';
+import { TFunction } from 'i18next';
+import { ErrorBoundaryFallbackProps } from "@openshift-console/dynamic-plugin-sdk";
+
+type DemoErrorBoundaryState = {
+  error: { message: string; stack: string; name: string };
+  errorInfo: { componentStack: string };
+};
+
+type DemoErrorBoundaryProps = {
+  FallbackComponent?: React.ComponentType<ErrorBoundaryFallbackProps>;
+  t: TFunction;
+};
+
+const DefaultFallback: React.FC = () => <div />;
+
+class DemoErrorBoundaryWithTranslation extends React.Component<DemoErrorBoundaryProps, DemoErrorBoundaryState> {
+  constructor(props) {
+    super(props);
+    this.state = { error: null, errorInfo: null };
+  }
+
+  componentDidCatch(error, errorInfo) {
+    this.setState({
+      error,
+      errorInfo,
+    });
+  }
+
+  render() {
+    const { t } = this.props;
+    const { error, errorInfo } = this.state;
+    const FallbackComponent = this.props.FallbackComponent || DefaultFallback;
+    if (error) {
+      return <FallbackComponent title={t('plugin__console-demo-plugin~Oops something went wrong in your dynamic plug-in')} errorMessage={error?.message} componentStack={errorInfo?.componentStack} stack={error?.stack} />;
+    }
+    return this.props.children;
+  }
+}
+
+export const DemoErrorBoundary = withTranslation()(DemoErrorBoundaryWithTranslation);
+

dynamic-demo-plugin/src/components/ErrorBoundary/SampleErrorBoundaryPage.tsx

@@ -0,0 +1,39 @@
+import * as React from 'react';
+import { useTranslation } from "react-i18next";
+import { Button, Card, CardBody, CardTitle, Page, PageSection, Title } from "@patternfly/react-core";
+import { ErrorBoundaryFallbackPage } from '@openshift-console/dynamic-plugin-sdk';
+import { DemoErrorBoundary }  from './DemoErrorBoundary';
+
+const BuggyComponent: React.FC = () => {
+    throw new Error('test error');
+}
+
+const SampleErrorBoundaryPage: React.FC = () => {
+  const { t } = useTranslation("plugin__console-demo-plugin");
+  const [ isBuggyComponentRendered, setBuggyComponentRendered ] = React.useState(false);
+  const onClick = () => {setBuggyComponentRendered(!isBuggyComponentRendered)};
+
+  return (
+    <DemoErrorBoundary FallbackComponent={ErrorBoundaryFallbackPage}>
+        <Page
+          additionalGroupedContent={
+            <PageSection variant="light">
+                <Title headingLevel="h1">{t('Sample Error Boundary Page')}</Title>
+            </PageSection>
+          }
+        >
+          <PageSection>
+            <Card>
+              <CardTitle>{t("Create an exception")}</CardTitle>
+              <CardBody>
+                  <Button onClick={onClick}>{t('Launch buggy component')}</Button>
+                  {isBuggyComponentRendered && <BuggyComponent/>}
+              </CardBody>
+            </Card>
+          </PageSection>
+        </Page>
+    </DemoErrorBoundary>
+  );
+};
+
+export default SampleErrorBoundaryPage;

dynamic-demo-plugin/src/i18n.ts

@@ -14,3 +14,4 @@
 // t('plugin__console-demo-plugin~Bar item')
 // t('plugin__console-demo-plugin~Custom Overview Detail Title')
 // t('plugin__console-demo-plugin~Example Namespaced Page')
+// t('plugin__console-demo-plugin~Sample Error Boundary Page')

frontend/packages/console-dynamic-plugin-sdk/docs/api.md

@@ -61,9 +61,10 @@
 59.  [`useModal`](#usemodal)
 60.  [`ActionServiceProvider`](#actionserviceprovider)
 61.  [`NamespaceBar`](#namespacebar)
-62. [DEPRECATED] [`PerspectiveContext`](#perspectivecontext)
-63. [DEPRECATED] [`useAccessReviewAllowed`](#useaccessreviewallowed)
-64. [DEPRECATED] [`useSafetyFirst`](#usesafetyfirst)
+62.  [`ErrorBoundaryFallbackPage`](#errorboundaryfallbackpage)
+63. [DEPRECATED] [`PerspectiveContext`](#perspectivecontext)
+64. [DEPRECATED] [`useAccessReviewAllowed`](#useaccessreviewallowed)
+65. [DEPRECATED] [`useSafetyFirst`](#usesafetyfirst)
 
 ---
 
@@ -2119,6 +2120,47 @@ A component that renders a horizontal toolbar with a namespace dropdown menu in
 
 
 
+---
+
+## `ErrorBoundaryFallbackPage`
+
+### Summary 
+
+Creates full page ErrorBoundaryFallbackPage component to display the "Oh no! Something went wrong."<br/>message along with the stack trace and other helpful debugging information. This is to be used in<br/>conjunction with an <ErrorBoundary> component.
+
+
+
+### Example
+
+
+ ```tsx
+ //in ErrorBoundary component
+  return (
+    if (this.state.hasError) {
+      return <ErrorBoundaryFallbackPage errorMessage={errorString} componentStack={componentStackString}
+       stack={stackTraceString} title={errorString}/>;
+    }
+
+    return this.props.children;
+  }
+ )
+```
+
+
+
+
+
+### Parameters
+
+| Parameter Name | Description |
+| -------------- | ----------- |
+| `errorMessage` | text description of the error message |
+| `componentStack` | component trace of the exception |
+| `stack` | stack trace of the exception |
+| `title` | title to render as the header of the error boundary page |
+
+
+
 ---
 
 ## `PerspectiveContext`

frontend/packages/console-dynamic-plugin-sdk/src/api/dynamic-core-api.ts

@@ -2,6 +2,7 @@
 import * as React from 'react';
 import { ActionServiceProviderProps } from '../extensions/actions';
 import {
+  ErrorBoundaryFallbackProps,
   HorizontalNavProps,
   UseResolvedExtensions,
   VirtualizedTableFC,
@@ -694,3 +695,29 @@ export const ActionServiceProvider: React.FC<ActionServiceProviderProps> = requi
  */
 export const NamespaceBar: React.FC<NamespaceBarProps> = require('@console/internal/components/namespace-bar')
   .NamespaceBar;
+
+/**
+ * Creates full page ErrorBoundaryFallbackPage component to display the "Oh no! Something went wrong."
+ * message along with the stack trace and other helpful debugging information. This is to be used in
+ * conjunction with an <ErrorBoundary> component.
+ *
+ * @param {string} errorMessage - text description of the error message
+ * @param {string} componentStack - component trace of the exception
+ * @param {string} stack - stack trace of the exception
+ * @param {string} title - title to render as the header of the error boundary page
+ * @example
+ *  ```tsx
+ *  //in ErrorBoundary component
+ *   return (
+ *     if (this.state.hasError) {
+ *       return <ErrorBoundaryFallbackPage errorMessage={errorString} componentStack={componentStackString}
+ *        stack={stackTraceString} title={errorString}/>;
+ *     }
+ *
+ *     return this.props.children;
+ *   }
+ *  )
+ * ```
+ */
+export const ErrorBoundaryFallbackPage: React.FC<ErrorBoundaryFallbackProps> = require('@console/shared/src/components/error/fallbacks/ErrorBoundaryFallbackPage')
+  .default;

frontend/packages/console-dynamic-plugin-sdk/src/extensions/console-types.ts

@@ -654,3 +654,10 @@ export type NamespaceBarProps = {
   isDisabled?: boolean;
   children?: React.ReactNode;
 };
+
+export type ErrorBoundaryFallbackProps = {
+  errorMessage: string;
+  componentStack: string;
+  stack: string;
+  title: string;
+};

frontend/packages/console-shared/src/components/error/error-boundary.tsx

@@ -1,6 +1,6 @@
 import * as React from 'react';
+import { ErrorBoundaryFallbackProps } from '@console/dynamic-plugin-sdk';
 import { history } from '@console/internal/components/utils/router';
-import { ErrorBoundaryFallbackProps } from './types';
 
 type ErrorBoundaryProps = {
   FallbackComponent?: React.ComponentType<ErrorBoundaryFallbackProps>;

frontend/packages/console-shared/src/components/error/fallbacks/ErrorBoundaryFallbackInline.tsx

@@ -1,7 +1,7 @@
 import * as React from 'react';
 import { Alert, Button, Modal, ModalVariant, Split, SplitItem } from '@patternfly/react-core';
 import { useTranslation } from 'react-i18next';
-import { ErrorBoundaryFallbackProps } from '../types';
+import { ErrorBoundaryFallbackProps } from '@console/dynamic-plugin-sdk';
 import ErrorDetailsBlock from './ErrorDetailsBlock';
 
 /**

frontend/packages/console-shared/src/components/error/fallbacks/ErrorBoundaryFallbackPage.tsx

@@ -1,8 +1,8 @@
 import * as React from 'react';
 import { Text, TextVariants } from '@patternfly/react-core';
 import { useTranslation } from 'react-i18next';
+import { ErrorBoundaryFallbackProps } from '@console/dynamic-plugin-sdk';
 import { ExpandCollapse } from '@console/internal/components/utils/expand-collapse';
-import { ErrorBoundaryFallbackProps } from '../types';
 import ErrorDetailsBlock from './ErrorDetailsBlock';
 
 /**

frontend/packages/console-shared/src/components/error/fallbacks/ErrorDetailsBlock.tsx

@@ -1,7 +1,7 @@
 import * as React from 'react';
 import { useTranslation } from 'react-i18next';
+import { ErrorBoundaryFallbackProps } from '@console/dynamic-plugin-sdk';
 import { CopyToClipboard } from '@console/internal/components/utils/copy-to-clipboard';
-import { ErrorBoundaryFallbackProps } from '../types';
 
 const ErrorDetailsBlock: React.FC<ErrorBoundaryFallbackProps> = (props) => {
   const { t } = useTranslation();

frontend/packages/console-shared/src/components/error/index.ts

@@ -1,6 +1,5 @@
 // Default ErrorBoundary usage
 export { default as ErrorBoundary } from './error-boundary';
-export * from './types';
 
 // Packaged, easy to use, fallback options
 export { default as ErrorBoundaryPage } from './fallbacks/ErrorBoundaryPage';