feat(MissingPage): add customFooter prop

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

@@ -28,3 +28,11 @@ A basic missing page component informs users that an error has occurred. It also
 ```js file="./MissingPageExample.tsx"
 
 ```
+
+### Custom footer
+
+To override the default homepage link, specify your own footer actions using `customFooter`. This is useful when you need multiple action buttons, such as both "Go to home page" and "Return to previous page".
+
+```js file="./MissingPageFooterExample.tsx"
+
+```

packages/module/patternfly-docs/content/extensions/component-groups/examples/MissingPage/MissingPageFooterExample.tsx

@@ -0,0 +1,18 @@
+import { FunctionComponent } from 'react';
+import { Button } from '@patternfly/react-core';
+import MissingPage from '@patternfly/react-component-groups/dist/dynamic/MissingPage';
+
+export const MissingPageFooterExample: FunctionComponent = () => (
+  <MissingPage
+    customFooter={
+      <>
+        <Button variant="primary" component="a" href="/">
+          Go to home page
+        </Button>
+        <Button variant="link" onClick={() => history.back()}>
+          Return to previous page
+        </Button>
+      </>
+    }
+  />
+);

packages/module/src/MissingPage/MissingPage.test.tsx

@@ -1,8 +1,40 @@
 import MissingPage from './MissingPage';
-import { render } from '@testing-library/react';
+import { render, screen } from '@testing-library/react';
+import { Button } from '@patternfly/react-core';
 
 describe('MissingPage component', () => {
   test('should render', () => {
     expect(render(<MissingPage />)).toMatchSnapshot();
   });
-});
+
+  it('should render custom footer instead of default link', () => {
+    render(
+      <MissingPage
+        customFooter={
+          <>
+            <Button>Go home</Button>
+            <Button variant="link">Go back</Button>
+          </>
+        }
+      />
+    );
+
+    expect(screen.getByText('Go home')).toBeVisible();
+    expect(screen.getByText('Go back')).toBeVisible();
+    expect(screen.queryByText('Return to homepage')).not.toBeInTheDocument();
+  });
+
+  it('should render default link when customFooter is not provided', () => {
+    render(<MissingPage />);
+
+    expect(screen.getByText('We lost that page')).toBeVisible();
+    expect(screen.getByText('Return to homepage')).toBeVisible();
+  });
+
+  it('should spread empty state props', () => {
+    render(<MissingPage headingLevel="h2" variant="xs" data-testid="test" />);
+
+    expect(screen.getByRole('heading', { level: 2 })).toBeInTheDocument();
+    expect(screen.getByTestId('test')).toHaveClass('pf-m-xs');
+  });
+});

packages/module/src/MissingPage/MissingPage.tsx

@@ -12,6 +12,8 @@ export interface MissingPageProps extends Omit<EmptyStateProps, 'children' | 'ti
   titleText?: React.ReactNode;
   /** The body text for the invalid object message */
   bodyText?: React.ReactNode;
+  /** Custom footer content. Replaces the default home page link when specified. */
+  customFooter?: React.ReactNode;
   /** Custom OUIA ID */
   ouiaId?: string | number;
 }
@@ -21,16 +23,19 @@ export const MissingPage: FunctionComponent<MissingPageProps> = ({
   toHomePageText = 'Return to homepage',
   titleText = 'We lost that page',
   bodyText = "Let's find you a new one. Try a new search or return home.",
+  customFooter,
   ouiaId = "MissingPage",
   headingLevel = 'h1',
   ...props
 }: MissingPageProps) => (
   <EmptyState headingLevel={headingLevel} icon={NotFoundIcon} variant={EmptyStateVariant.full} data-ouia-component-id={ouiaId} {...props} titleText={titleText}>
     <EmptyStateBody data-ouia-component-id={`${ouiaId}-body`}>{bodyText}</EmptyStateBody>
     <EmptyStateFooter data-ouia-component-id={`${ouiaId}-footer`}>
-      <Button variant="link" component="a" href={toHomePageUrl} ouiaId={`${ouiaId}-home-button`}>
-        {toHomePageText}
-      </Button>
+      {customFooter || (
+        <Button variant="link" component="a" href={toHomePageUrl} ouiaId={`${ouiaId}-home-button`}>
+          {toHomePageText}
+        </Button>
+      )}
     </EmptyStateFooter>
   </EmptyState>
 );