From 95217034b6283f8af86fb86e031cdc0c17d81592 Mon Sep 17 00:00:00 2001
From: platex-rehor-bot <platform-experience-services@redhat.com>
Date: Wed, 26 Aug 2026 15:09:47 +0000
Subject: [PATCH] feat(MissingPage): add customFooter prop for multiple action
 buttons

PF-4547
Add a customFooter prop to MissingPage, matching the existing pattern
used by ErrorState. When provided, customFooter replaces the default
homepage link, allowing consumers to render multiple actions (e.g.
"Go Home" and "Go Back" buttons).

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
---
 .../examples/MissingPage/MissingPage.md       |  8 +++++
 .../MissingPage/MissingPageFooterExample.tsx  | 18 ++++++++++
 .../src/MissingPage/MissingPage.test.tsx      | 36 +++++++++++++++++--
 .../module/src/MissingPage/MissingPage.tsx    | 11 ++++--
 4 files changed, 68 insertions(+), 5 deletions(-)
 create mode 100644 packages/module/patternfly-docs/content/extensions/component-groups/examples/MissingPage/MissingPageFooterExample.tsx

diff --git a/packages/module/patternfly-docs/content/extensions/component-groups/examples/MissingPage/MissingPage.md b/packages/module/patternfly-docs/content/extensions/component-groups/examples/MissingPage/MissingPage.md
index e6be576d..f0055f0c 100644
--- a/packages/module/patternfly-docs/content/extensions/component-groups/examples/MissingPage/MissingPage.md
+++ b/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"
+
+```
diff --git a/packages/module/patternfly-docs/content/extensions/component-groups/examples/MissingPage/MissingPageFooterExample.tsx b/packages/module/patternfly-docs/content/extensions/component-groups/examples/MissingPage/MissingPageFooterExample.tsx
new file mode 100644
index 00000000..23ad7bdd
--- /dev/null
+++ b/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>
+      </>
+    }
+  />
+);
diff --git a/packages/module/src/MissingPage/MissingPage.test.tsx b/packages/module/src/MissingPage/MissingPage.test.tsx
index 3ca41c0a..288dc117 100644
--- a/packages/module/src/MissingPage/MissingPage.test.tsx
+++ b/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();
   });
-});
\ No newline at end of file
+
+  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');
+  });
+});
diff --git a/packages/module/src/MissingPage/MissingPage.tsx b/packages/module/src/MissingPage/MissingPage.tsx
index c8f75949..37ea7f5d 100644
--- a/packages/module/src/MissingPage/MissingPage.tsx
+++ b/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,6 +23,7 @@ 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
@@ -28,9 +31,11 @@ export const MissingPage: FunctionComponent<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>
 );