From 437659b92f0a0adb1056bf6a386b9edfbafbbbf2 Mon Sep 17 00:00:00 2001 From: Emma Indal Date: Fri, 4 Feb 2022 14:59:12 +0100 Subject: [PATCH 1/6] accept JSX Element as additionalInfo prop Signed-off-by: Emma Indal --- .../src/layout/ErrorPage/ErrorPage.test.tsx | 12 ++++++++++++ .../src/layout/ErrorPage/ErrorPage.tsx | 2 +- 2 files changed, 13 insertions(+), 1 deletion(-) diff --git a/packages/core-components/src/layout/ErrorPage/ErrorPage.test.tsx b/packages/core-components/src/layout/ErrorPage/ErrorPage.test.tsx index a314128bce..12ac0927ed 100644 --- a/packages/core-components/src/layout/ErrorPage/ErrorPage.test.tsx +++ b/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('', () => { @@ -30,4 +31,15 @@ describe('', () => { ).toBeInTheDocument(); expect(getByTestId('go-back-link')).toBeInTheDocument(); }); + + it('should render with additional information including link', async () => { + const { getByText } = await renderInTestApp( + This is some additional information including a 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'); + }); }); diff --git a/packages/core-components/src/layout/ErrorPage/ErrorPage.tsx b/packages/core-components/src/layout/ErrorPage/ErrorPage.tsx index 08c002d849..b8e0193bcf 100644 --- a/packages/core-components/src/layout/ErrorPage/ErrorPage.tsx +++ b/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 */ From f2dfbd3fb06f3fccb4c8c36cd52b469eb9ce6429 Mon Sep 17 00:00:00 2001 From: Emma Indal Date: Fri, 4 Feb 2022 14:59:41 +0100 Subject: [PATCH 2/6] add changeset Signed-off-by: Emma Indal --- .changeset/khaki-jokes-grab.md | 5 +++++ 1 file changed, 5 insertions(+) create mode 100644 .changeset/khaki-jokes-grab.md diff --git a/.changeset/khaki-jokes-grab.md b/.changeset/khaki-jokes-grab.md new file mode 100644 index 0000000000..967ed1e0e4 --- /dev/null +++ b/.changeset/khaki-jokes-grab.md @@ -0,0 +1,5 @@ +--- +'@backstage/core-components': patch +--- + +Accept JSX Element as additionalInfo property of ErrorPage component From 308efff0ac09d9255786edbac15b218f85165ea9 Mon Sep 17 00:00:00 2001 From: Emma Indal Date: Fri, 4 Feb 2022 15:11:40 +0100 Subject: [PATCH 3/6] add optional supportUrl property Signed-off-by: Emma Indal --- .../src/layout/ErrorPage/ErrorPage.test.tsx | 22 +++++++++++++++++++ .../src/layout/ErrorPage/ErrorPage.tsx | 5 +++-- 2 files changed, 25 insertions(+), 2 deletions(-) diff --git a/packages/core-components/src/layout/ErrorPage/ErrorPage.test.tsx b/packages/core-components/src/layout/ErrorPage/ErrorPage.test.tsx index 12ac0927ed..d6ef392f76 100644 --- a/packages/core-components/src/layout/ErrorPage/ErrorPage.test.tsx +++ b/packages/core-components/src/layout/ErrorPage/ErrorPage.test.tsx @@ -42,4 +42,26 @@ describe('', () => { expect(getByText(/a link/i)).toBeInTheDocument(); expect(getByText(/a link/i)).toHaveAttribute('href', '/test'); }); + + it('should render with default support url if supportUrl is not provided', async () => { + const { getByText } = await renderInTestApp( + , + ); + expect( + getByText(/looks like someone dropped the mic!/i), + ).toBeInTheDocument(); + expect(getByText(/contact support/i)).toBeInTheDocument(); + expect(getByText(/contact support/i)).toHaveAttribute('href', 'https://github.com/backstage/backstage/issues'); + }); + + it('should override support url if supportUrl property is provided', async () => { + const { getByText } = await renderInTestApp( + , + ); + expect( + getByText(/looks like someone dropped the mic!/i), + ).toBeInTheDocument(); + expect(getByText(/contact support/i)).toBeInTheDocument(); + expect(getByText(/contact support/i)).toHaveAttribute('href', 'https://error-page-test-support-url.com'); + }); }); diff --git a/packages/core-components/src/layout/ErrorPage/ErrorPage.tsx b/packages/core-components/src/layout/ErrorPage/ErrorPage.tsx index b8e0193bcf..cae8f95ec8 100644 --- a/packages/core-components/src/layout/ErrorPage/ErrorPage.tsx +++ b/packages/core-components/src/layout/ErrorPage/ErrorPage.tsx @@ -28,6 +28,7 @@ interface IErrorPageProps { status: string; statusMessage: string; additionalInfo?: string | JSX.Element; + supportUrl?: string; } /** @public */ @@ -62,7 +63,7 @@ const useStyles = makeStyles( * */ export function ErrorPage(props: IErrorPageProps) { - const { status, statusMessage, additionalInfo } = props; + const { status, statusMessage, additionalInfo, supportUrl } = props; const classes = useStyles(); const navigate = useNavigate(); const support = useSupportConfig(); @@ -88,7 +89,7 @@ export function ErrorPage(props: IErrorPageProps) { navigate(-1)}> Go back - ... or please contact support if you + ... or please contact support if you think this is a bug. From 0912186d16154c59fedf56a3eeff0096a9fa5828 Mon Sep 17 00:00:00 2001 From: Emma Indal Date: Fri, 4 Feb 2022 15:17:37 +0100 Subject: [PATCH 4/6] update changelog and prettier fixups Signed-off-by: Emma Indal --- .changeset/khaki-jokes-grab.md | 2 +- .../src/layout/ErrorPage/ErrorPage.test.tsx | 29 +++++++++++++++---- .../src/layout/ErrorPage/ErrorPage.tsx | 3 +- 3 files changed, 27 insertions(+), 7 deletions(-) diff --git a/.changeset/khaki-jokes-grab.md b/.changeset/khaki-jokes-grab.md index 967ed1e0e4..e94a580e58 100644 --- a/.changeset/khaki-jokes-grab.md +++ b/.changeset/khaki-jokes-grab.md @@ -2,4 +2,4 @@ '@backstage/core-components': patch --- -Accept JSX Element as additionalInfo property of ErrorPage component +Adjust ErrorPage to accept optional supportUrl property to override app config and JSX Element as additionalInfo property. diff --git a/packages/core-components/src/layout/ErrorPage/ErrorPage.test.tsx b/packages/core-components/src/layout/ErrorPage/ErrorPage.test.tsx index d6ef392f76..57d0ba34a1 100644 --- a/packages/core-components/src/layout/ErrorPage/ErrorPage.test.tsx +++ b/packages/core-components/src/layout/ErrorPage/ErrorPage.test.tsx @@ -34,7 +34,16 @@ describe('', () => { it('should render with additional information including link', async () => { const { getByText } = await renderInTestApp( - This is some additional information including a link} />, + + This is some additional information including{' '} + a link + + } + />, ); expect( getByText(/looks like someone dropped the mic!/i), @@ -45,23 +54,33 @@ describe('', () => { it('should render with default support url if supportUrl is not provided', async () => { const { getByText } = await renderInTestApp( - , + , ); expect( getByText(/looks like someone dropped the mic!/i), ).toBeInTheDocument(); expect(getByText(/contact support/i)).toBeInTheDocument(); - expect(getByText(/contact support/i)).toHaveAttribute('href', 'https://github.com/backstage/backstage/issues'); + expect(getByText(/contact support/i)).toHaveAttribute( + 'href', + 'https://github.com/backstage/backstage/issues', + ); }); it('should override support url if supportUrl property is provided', async () => { const { getByText } = await renderInTestApp( - , + , ); expect( getByText(/looks like someone dropped the mic!/i), ).toBeInTheDocument(); expect(getByText(/contact support/i)).toBeInTheDocument(); - expect(getByText(/contact support/i)).toHaveAttribute('href', 'https://error-page-test-support-url.com'); + expect(getByText(/contact support/i)).toHaveAttribute( + 'href', + 'https://error-page-test-support-url.com', + ); }); }); diff --git a/packages/core-components/src/layout/ErrorPage/ErrorPage.tsx b/packages/core-components/src/layout/ErrorPage/ErrorPage.tsx index cae8f95ec8..27d884684b 100644 --- a/packages/core-components/src/layout/ErrorPage/ErrorPage.tsx +++ b/packages/core-components/src/layout/ErrorPage/ErrorPage.tsx @@ -89,7 +89,8 @@ export function ErrorPage(props: IErrorPageProps) { navigate(-1)}> Go back - ... or please contact support if you + ... or please{' '} + contact support if you think this is a bug. From 4922f11fe3d35607201b41fcc51e37fe57b7453c Mon Sep 17 00:00:00 2001 From: Emma Indal Date: Mon, 7 Feb 2022 14:33:12 +0100 Subject: [PATCH 5/6] update type from JSX.Element or string to ReactNode + add test for string based prop Signed-off-by: Emma Indal --- .../src/layout/ErrorPage/ErrorPage.test.tsx | 16 ++++++++++++++++ .../src/layout/ErrorPage/ErrorPage.tsx | 2 +- 2 files changed, 17 insertions(+), 1 deletion(-) diff --git a/packages/core-components/src/layout/ErrorPage/ErrorPage.test.tsx b/packages/core-components/src/layout/ErrorPage/ErrorPage.test.tsx index 57d0ba34a1..2efdc5da33 100644 --- a/packages/core-components/src/layout/ErrorPage/ErrorPage.test.tsx +++ b/packages/core-components/src/layout/ErrorPage/ErrorPage.test.tsx @@ -32,6 +32,22 @@ describe('', () => { expect(getByTestId('go-back-link')).toBeInTheDocument(); }); + it('should render with additional information of type string', async () => { + const { getByText } = await renderInTestApp( + , + ); + expect( + getByText(/looks like someone dropped the mic!/i), + ).toBeInTheDocument(); + expect( + getByText(/This is a string based additional information/i), + ).toBeInTheDocument(); + }); + it('should render with additional information including link', async () => { const { getByText } = await renderInTestApp( Date: Mon, 7 Feb 2022 14:35:31 +0100 Subject: [PATCH 6/6] update changeset Signed-off-by: Emma Indal --- .changeset/khaki-jokes-grab.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/.changeset/khaki-jokes-grab.md b/.changeset/khaki-jokes-grab.md index e94a580e58..31201c1078 100644 --- a/.changeset/khaki-jokes-grab.md +++ b/.changeset/khaki-jokes-grab.md @@ -2,4 +2,4 @@ '@backstage/core-components': patch --- -Adjust ErrorPage to accept optional supportUrl property to override app config and JSX Element as additionalInfo property. +Adjust ErrorPage to accept optional supportUrl property to override app support config. Update type of additionalInfo property to be ReactNode to accept both string and component.