diff --git a/plugins/catalog-react/src/components/EntityRefLink/EntityRefLink.test.tsx b/plugins/catalog-react/src/components/EntityRefLink/EntityRefLink.test.tsx index b0a6b46bf5..eb783ae02b 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: 'Component', + namespace: 'test', + name: 'softw#are', + }; + await renderInTestApp( + + Custom Children + , + { + mountedRoutes: { + '/catalog/:namespace/:kind/:name/*': entityRouteRef, + }, + }, + ); + expect(screen.getByText('Custom Children')).toHaveAttribute( + 'href', + '/catalog/test/component/softw%23are', + ); + }); }); diff --git a/plugins/catalog-react/src/components/EntityRefLink/EntityRefLink.tsx b/plugins/catalog-react/src/components/EntityRefLink/EntityRefLink.tsx index 06a632232e..82a98ca417 100644 --- a/plugins/catalog-react/src/components/EntityRefLink/EntityRefLink.tsx +++ b/plugins/catalog-react/src/components/EntityRefLink/EntityRefLink.tsx @@ -71,7 +71,7 @@ export const EntityRefLink = forwardRef( kind = kind.toLocaleLowerCase('en-US'); namespace = namespace?.toLocaleLowerCase('en-US') ?? DEFAULT_NAMESPACE; - const routeParams = { kind, namespace, name }; + const routeParams = { kind, namespace, name: encodeURIComponent(name) }; const formattedEntityRefTitle = humanizeEntityRef( { kind, namespace, name }, { defaultKind },