diff --git a/packages/core/src/layout/ErrorPage/ErrorPage.tsx b/packages/core/src/layout/ErrorPage/ErrorPage.tsx index d6620295c1..71a24652ba 100644 --- a/packages/core/src/layout/ErrorPage/ErrorPage.tsx +++ b/packages/core/src/layout/ErrorPage/ErrorPage.tsx @@ -24,6 +24,7 @@ import { useNavigate } from 'react-router'; interface IErrorPageProps { status: string; statusMessage: string; + additionalInfo?: string; } const useStyles = makeStyles(theme => ({ @@ -38,7 +39,11 @@ const useStyles = makeStyles(theme => ({ }, })); -export const ErrorPage = ({ status, statusMessage }: IErrorPageProps) => { +export const ErrorPage = ({ + status, + statusMessage, + additionalInfo, +}: IErrorPageProps) => { const classes = useStyles(); const navigate = useNavigate(); @@ -49,6 +54,9 @@ export const ErrorPage = ({ status, statusMessage }: IErrorPageProps) => { ERROR {status}: {statusMessage} + + {additionalInfo} + Looks like someone dropped the mic! diff --git a/packages/core/src/layout/index.ts b/packages/core/src/layout/index.ts index e8245119f3..d97d30982e 100644 --- a/packages/core/src/layout/index.ts +++ b/packages/core/src/layout/index.ts @@ -17,13 +17,14 @@ export * from './Content'; export * from './ContentHeader'; export * from './ErrorBoundary'; +export * from './ErrorPage'; export * from './Header'; export * from './HeaderLabel'; +export * from './HeaderTabs'; export * from './HomepageTimer'; export * from './InfoCard'; +export * from './ItemCard'; export * from './Page'; export * from './Sidebar'; export * from './SignInPage'; export * from './TabbedCard'; -export * from './HeaderTabs'; -export * from './ItemCard'; diff --git a/plugins/techdocs/src/reader/components/TechDocsNotFound.test.tsx b/plugins/techdocs/src/reader/components/TechDocsNotFound.test.tsx index 7792164b14..7b0ec80619 100644 --- a/plugins/techdocs/src/reader/components/TechDocsNotFound.test.tsx +++ b/plugins/techdocs/src/reader/components/TechDocsNotFound.test.tsx @@ -18,9 +18,12 @@ import React from 'react'; import { render } from '@testing-library/react'; import { wrapInTestApp } from '@backstage/test-utils'; -describe('TechDocs Not Found', () => { - it('should render a Documentation not found page', async () => { - const { queryByText } = render(wrapInTestApp()); - expect(queryByText(/error: documentation not found/i)).toBeInTheDocument(); +describe('', () => { + it('should render with status code, status message and go back link', () => { + const rendered = render(wrapInTestApp()); + rendered.getByText(/Documentation not found/i); + rendered.getByText(/404/i); + rendered.getByText(/Looks like someone dropped the mic!/i); + expect(rendered.getByTestId('go-back-link')).toBeDefined(); }); }); diff --git a/plugins/techdocs/src/reader/components/TechDocsNotFound.tsx b/plugins/techdocs/src/reader/components/TechDocsNotFound.tsx index 2a961b5bc0..c774000bd5 100644 --- a/plugins/techdocs/src/reader/components/TechDocsNotFound.tsx +++ b/plugins/techdocs/src/reader/components/TechDocsNotFound.tsx @@ -15,20 +15,14 @@ */ import React from 'react'; -import { Typography, Button } from '@material-ui/core'; -import { TechDocsPageWrapper } from './TechDocsPageWrapper'; +import { ErrorPage } from '@backstage/core'; export const TechDocsNotFound = () => { return ( - - Error: Documentation not found - Path: {window.location.pathname} - - + ); };