accept JSX Element as additionalInfo prop

Signed-off-by: Emma Indal <emma.indahl@gmail.com>

packages/core-components/src/layout/ErrorPage/ErrorPage.test.tsx

@@ -16,6 +16,7 @@
 
 import React from 'react';
 import { ErrorPage } from './ErrorPage';
+import { Link } from '../../components/Link';
 import { renderInTestApp } from '@backstage/test-utils';
 
 describe('<ErrorPage/>', () => {
@@ -30,4 +31,15 @@ describe('<ErrorPage/>', () => {
     ).toBeInTheDocument();
     expect(getByTestId('go-back-link')).toBeInTheDocument();
   });
+
+  it('should render with additional information including link', async () => {
+    const { getByText } = await renderInTestApp(
+      <ErrorPage status="404" statusMessage="PAGE NOT FOUND" additionalInfo={<>This is some additional information including <Link to="/test">a link</Link></>} />,
+    );
+    expect(
+      getByText(/looks like someone dropped the mic!/i),
+    ).toBeInTheDocument();
+    expect(getByText(/a link/i)).toBeInTheDocument();
+    expect(getByText(/a link/i)).toHaveAttribute('href', '/test');
+  });
 });

packages/core-components/src/layout/ErrorPage/ErrorPage.tsx

@@ -27,7 +27,7 @@ import { MicDrop } from './MicDrop';
 interface IErrorPageProps {
   status: string;
   statusMessage: string;
-  additionalInfo?: string;
+  additionalInfo?: string | JSX.Element;
 }
 
 /** @public */