diff --git a/.changeset/dull-experts-kiss.md b/.changeset/dull-experts-kiss.md new file mode 100644 index 0000000000..eaea346e49 --- /dev/null +++ b/.changeset/dull-experts-kiss.md @@ -0,0 +1,5 @@ +--- +'@backstage/plugin-catalog-react': patch +--- + +Fixed an issue causing `EntityPage` to show an error for entities containing special characters diff --git a/plugins/catalog-react/src/components/EntityRefLink/EntityRefLink.test.tsx b/plugins/catalog-react/src/components/EntityRefLink/EntityRefLink.test.tsx index b0a6b46bf5..cecf27be24 100644 --- a/plugins/catalog-react/src/components/EntityRefLink/EntityRefLink.test.tsx +++ b/plugins/catalog-react/src/components/EntityRefLink/EntityRefLink.test.tsx @@ -174,4 +174,26 @@ describe('', () => { '/catalog/test/component/software', ); }); + + it('renders link by encoding name as URI component', async () => { + const entityName = { + kind: 'Compone&nt', + namespace: 'tes[t', + name: 'softw#are', + }; + await renderInTestApp( + + Custom Children + , + { + mountedRoutes: { + '/catalog/:namespace/:kind/:name/*': entityRouteRef, + }, + }, + ); + expect(screen.getByText('Custom Children')).toHaveAttribute( + 'href', + '/catalog/tes%5Bt/compone%26nt/softw%23are', + ); + }); }); diff --git a/plugins/catalog-react/src/components/EntityRefLink/EntityRefLink.tsx b/plugins/catalog-react/src/components/EntityRefLink/EntityRefLink.tsx index 06a632232e..d682abdc2b 100644 --- a/plugins/catalog-react/src/components/EntityRefLink/EntityRefLink.tsx +++ b/plugins/catalog-react/src/components/EntityRefLink/EntityRefLink.tsx @@ -71,7 +71,11 @@ export const EntityRefLink = forwardRef( kind = kind.toLocaleLowerCase('en-US'); namespace = namespace?.toLocaleLowerCase('en-US') ?? DEFAULT_NAMESPACE; - const routeParams = { kind, namespace, name }; + const routeParams = { + kind: encodeURIComponent(kind), + namespace: encodeURIComponent(namespace), + name: encodeURIComponent(name), + }; const formattedEntityRefTitle = humanizeEntityRef( { kind, namespace, name }, { defaultKind },