[#548] Use MissingPage component

infinispan · Jan 22, 2025 · 707301a · 707301a
1 parent 0dba86e
commit 707301a
Show file tree

Hide file tree

Showing 2 changed files with 11 additions and 29 deletions.
diff --git a/src/__tests__/views/NotFound.test.tsx b/src/__tests__/views/NotFound.test.tsx
@@ -6,8 +6,7 @@ import { renderWithRouter } from '../../test-utils';
 const mockNavigate = jest.fn();
 
 jest.mock('react-router', () => ({
-  ...jest.requireActual('react-router'),
-  useNavigate: () => mockNavigate
+  ...jest.requireActual('react-router')
 }));
 
 describe('Not found page', () => {
@@ -17,15 +16,11 @@ describe('Not found page', () => {
       name: 'not-found-page.title'
     });
     const pageDescription = screen.getByText('not-found-page.description');
-    const button = screen.getByRole('button', {
-      name: 'not-found-page.button'
-    });
+    const button = screen.getByText('not-found-page.button');
     expect(pageHeading).toBeDefined();
     expect(pageDescription).toBeDefined();
     expect(button).toBeDefined();
 
     fireEvent.click(button);
-
-    expect(mockNavigate).toHaveBeenCalledWith('/');
   });
 });
diff --git a/src/app/NotFound/NotFound.tsx b/src/app/NotFound/NotFound.tsx
@@ -1,31 +1,18 @@
 import * as React from 'react';
-import { useNavigate } from 'react-router';
-import { Button, EmptyState, EmptyStateBody, EmptyStateFooter, PageSection } from '@patternfly/react-core';
-import { ExclamationTriangleIcon } from '@patternfly/react-icons';
 import { useTranslation } from 'react-i18next';
+import { MissingPage } from '@patternfly/react-component-groups';
+import { ConsoleServices } from '@services/ConsoleServices';
 
 const NotFound = () => {
   const { t } = useTranslation();
-
-  function GoHomeBtn() {
-    const navigate = useNavigate();
-
-    function handleClick() {
-      navigate('/' + location.search);
-    }
-
-    return <Button onClick={handleClick}>{t('not-found-page.button')}</Button>;
-  }
-
   return (
-    <PageSection>
-      <EmptyState variant="full" titleText={t('not-found-page.title')} icon={ExclamationTriangleIcon} headingLevel="h1">
-        <EmptyStateBody>{t('not-found-page.description')}</EmptyStateBody>
-        <EmptyStateFooter>
-          <GoHomeBtn />
-        </EmptyStateFooter>
-      </EmptyState>
-    </PageSection>
+    <MissingPage
+      ouiaId={'not-found'}
+      toHomePageUrl={ConsoleServices.landing()}
+      toHomePageText={t('not-found-page.button')}
+      titleText={t('not-found-page.title')}
+      bodyText={t('not-found-page.description')}
+    />
   );
 };