fix(ErrorBoundary): Align "Show details" center (#133)

Author: fhlavac

packages/module/src/ErrorBoundary/ErrorBoundary.tsx

@@ -1,9 +1,18 @@
 import * as React from 'react';
 import { ExpandableSection, Title } from '@patternfly/react-core';
+import { createUseStyles } from 'react-jss';
 import ErrorState from '../ErrorState';
 import ErrorStack from '../ErrorStack';
 
-export interface ErrorPageProps {
+const useStyles = createUseStyles({
+  expandableSectionToggle: {
+    "& > .pf-v5-c-expandable-section__toggle": {
+      margin: "auto",
+    }
+  },
+})
+
+export interface ErrorBoundaryProps {
   /** The title text to display on the error page */
   headerTitle: string;
   /** Indicates if the error is silent */
@@ -22,7 +31,7 @@ export interface ErrorPageProps {
   ouiaId?: string | number;
 }
 
-export interface ErrorPageState {
+export interface ErrorBoundaryState {
   /** Indicates if there is currently an error */
   hasError: boolean;
   /** Error */
@@ -31,8 +40,18 @@ export interface ErrorPageState {
   historyState: History['state'];
 }
 
+interface ErrorPageProps extends ErrorBoundaryProps {
+  /** JSS classes */
+  classes: Record<string | number | symbol, string>;
+}
+
+export const ErrorBoundary: React.FunctionComponent<ErrorBoundaryProps> = (props: ErrorBoundaryProps) => {
+  const classes = useStyles();
+  return <ErrorBoundaryContent classes={classes} {...props} />
+}
+
 // As of time of writing, React only supports error boundaries in class components
-class ErrorBoundary extends React.Component<ErrorPageProps, ErrorPageState> {
+class ErrorBoundaryContent extends React.Component<ErrorPageProps, ErrorBoundaryState> {
   constructor(props: Readonly<ErrorPageProps>) {
     super(props);
     this.state = {
@@ -41,7 +60,7 @@ class ErrorBoundary extends React.Component<ErrorPageProps, ErrorPageState> {
     };
   }
 
-  static getDerivedStateFromError(error: Error): ErrorPageState {
+  static getDerivedStateFromError(error: Error): ErrorBoundaryState {
     return { hasError: true, error, historyState: history.state };
   }
 
@@ -79,7 +98,7 @@ class ErrorBoundary extends React.Component<ErrorPageProps, ErrorPageState> {
               <>
                 <span>{props.errorDescription}</span>
                 {this.state.error && ( 
-                  <ExpandableSection toggleText={props.errorToggleText ? props.errorToggleText : "Show details"} data-ouia-component-id={`${ouiaId}-toggle`}>
+                  <ExpandableSection className={props.classes.expandableSectionToggle} toggleText={props.errorToggleText ? props.errorToggleText : "Show details"} data-ouia-component-id={`${ouiaId}-toggle`}>
                     <ErrorStack error={this.state.error} data-ouia-component-id={`${ouiaId}-stack`}/>
                   </ExpandableSection>
                 )}

packages/module/src/ErrorState/ErrorState.tsx

@@ -18,6 +18,9 @@ const useStyles = createUseStyles({
   errorIcon: {
     fill: 'var(--pf-v5-global--danger-color--100)',
   },
+  errorDescription: {
+    margin: 'auto'
+  }
 })
 
 export interface ErrorStateProps extends Omit<EmptyStateProps, 'children'> {
@@ -40,7 +43,7 @@ const ErrorState: React.FunctionComponent<ErrorStateProps> = ({ errorTitle = 'So
       <EmptyStateHeader titleText={<>{errorTitle}</>} icon={<EmptyStateIcon className={classes.errorIcon} icon={ExclamationCircleIcon} data-ouia-component-id={`${ouiaId}-icon`} />} headingLevel="h4" data-ouia-component-id={`${ouiaId}-header`}/>
       <EmptyStateBody data-ouia-component-id={`${ouiaId}-body`}>
         <Stack>
-          {errorDescription ? <StackItem>{errorDescription}</StackItem> : defaultErrorDescription}
+          {errorDescription ? <StackItem className={classes.errorDescription}>{errorDescription}</StackItem> : defaultErrorDescription}
         </Stack>
       </EmptyStateBody>
       <EmptyStateFooter data-ouia-component-id={`${ouiaId}-footer`}>