fix(docs) Enhance ErrorState & ErrorBoundary docs

packages/module/patternfly-docs/content/extensions/component-groups/examples/ErrorBoundaryPage/ErrorBoundaryPage.md

@@ -0,0 +1,32 @@
+---
+# Sidenav top-level section
+# should be the same for all markdown files
+section: extensions
+subsection: Component groups
+# Sidenav secondary level section
+# should be the same for all markdown files
+id: ErrorBoundaryPage
+# Tab (react | react-demos | html | html-demos | design-guidelines | accessibility)
+source: react
+# If you use typescript, the name of the interface to display props for
+# These are found through the sourceProps function provided in patternfly-docs.source.js
+propComponents: ['ErrorBoundaryPage']
+---
+
+import { ErrorBoundaryPage } from "@patternfly/react-component-groups";
+
+## Components Usage
+
+This component reuses the ErrorState component for an app error boundary.
+
+### ErrorBoundaryPage Component
+
+```js file="./ErrorBoundaryPageExample.tsx"
+
+```
+
+### ErrorBoundaryPage Component without error
+
+```js file="./ErrorBoundaryPageNoExample.tsx"
+
+```

packages/module/patternfly-docs/content/extensions/component-groups/examples/ErrorBoundaryPage/ErrorBoundaryPageExample.tsx

@@ -0,0 +1,12 @@
+import React from 'react';
+import { ErrorBoundaryPage } from '@patternfly/react-component-groups';
+
+export const BasicExample: React.FunctionComponent = () => {
+  const Surprise = () => {
+    throw new Error('but a welcome one');
+  };
+
+  return (<ErrorBoundaryPage headerTitle="My app header" errorTitle="Something wrong happened">
+    <Surprise />
+  </ErrorBoundaryPage>);
+}

packages/module/patternfly-docs/content/extensions/component-groups/examples/ErrorBoundaryPage/ErrorBoundaryPageNoExample.tsx

@@ -0,0 +1,7 @@
+import React from 'react';
+import { ErrorBoundaryPage } from '@patternfly/react-component-groups';
+
+export const BasicExample: React.FunctionComponent = () => (<ErrorBoundaryPage headerTitle={'My app header'}>
+  <div>My app content</div>
+</ErrorBoundaryPage>);
+

packages/module/patternfly-docs/content/extensions/component-groups/examples/ErrorState.md → packages/module/patternfly-docs/content/extensions/component-groups/examples/ErrorState/ErrorState.md

@@ -17,7 +17,9 @@ import { ErrorState } from "@patternfly/react-component-groups";
 
 ## Components Usage
 
-### Error State Component
+This component reuses the EmptyState component. Also most of its props is accepted.
+
+### ErrorState Component
 
 ```js file="./ErrorStateExample.tsx"
 

packages/module/src/ErrorBoundary/ErrorStack.tsx → packages/module/src/ErrorBoundaryPage/ErrorStack.tsx

@@ -1,6 +1,7 @@
 import * as React from 'react';
 import { Text } from '@patternfly/react-core';
 import { createUseStyles } from 'react-jss';
+
 interface ErrorStackProps {
   error: Error;
 }

packages/module/src/ErrorBoundary/__tests__/ErrorBoundary.test.tsx → packages/module/src/ErrorBoundaryPage/__tests__/ErrorBoundaryPage.test.tsx

@@ -1,5 +1,5 @@
 import * as React from 'react';
-import ErrorBoundaryPage from '../ErrorBoundary';
+import ErrorBoundaryPage from '../ErrorBoundaryPage';
 import { render, screen } from '@testing-library/react';
 import userEvent from '@testing-library/user-event';
 

packages/module/src/ErrorBoundaryPage/index.ts

@@ -0,0 +1 @@
+export { default as ErrorBoundaryPage } from './ErrorBoundaryPage';

packages/module/src/ErrorState/ErrorState.tsx

@@ -1,6 +1,5 @@
 import React from 'react';
 import { ExclamationCircleIcon } from '@patternfly/react-icons/';
-import DefaultErrorMessage from './DefaultErrorMessage';
 import {
   Button,
   EmptyState,
@@ -27,7 +26,7 @@ export interface ErrorStateProps extends Omit<EmptyStateProps, 'children'> {
   errorDescription?: React.ReactNode;
 }
 
-const ErrorState: React.FunctionComponent<ErrorStateProps> = ({ errorTitle = 'Something went wrong', errorDescription, ...props }) => {
+const ErrorState: React.FunctionComponent<ErrorStateProps> = ({ errorTitle = 'Something went wrong', errorDescription, ...props }: ErrorStateProps) => { 
   const classes = useStyles();
   return (
     <EmptyState variant={EmptyStateVariant.large} {...props}>
@@ -37,8 +36,8 @@ const ErrorState: React.FunctionComponent<ErrorStateProps> = ({ errorTitle = 'So
       </Title>
       <EmptyStateBody>
         <Stack>
-          {!errorDescription && <StackItem>There was a problem processing the request. Please try again.</StackItem>}
-          <StackItem>{errorDescription || <DefaultErrorMessage />}</StackItem>
+          {errorDescription ? <StackItem>{errorDescription}</StackItem> : <><StackItem>There was a problem processing the request. Please try again.</StackItem>
+            <StackItem>If the problem persists, contact system support.</StackItem></>}
         </Stack>
       </EmptyStateBody>
       {document.referrer ? (

packages/module/src/ErrorState/index.ts

@@ -1,2 +1 @@
 export { default as ErrorState } from './ErrorState';
-export { default as DefaultErrorMessage } from './DefaultErrorMessage';

packages/module/src/index.ts

@@ -1,5 +1,5 @@
 export * from './DetailsPage';
 export * from './DetailsPageHeader';
-export * from './ErrorBoundary';
+export * from './ErrorBoundaryPage';
 export * from './ErrorState';
 export * from './HorizontalNav';