Merge pull request #19575 from backstage/vinzscam/encode-entity-name

catalog: encode entity name in EntityRefLink

.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

plugins/catalog-react/src/components/EntityRefLink/EntityRefLink.test.tsx

@@ -174,4 +174,26 @@ describe('<EntityRefLink />', () => {
       '/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(
+      <EntityRefLink entityRef={entityName} defaultKind="component">
+        Custom Children
+      </EntityRefLink>,
+      {
+        mountedRoutes: {
+          '/catalog/:namespace/:kind/:name/*': entityRouteRef,
+        },
+      },
+    );
+    expect(screen.getByText('Custom Children')).toHaveAttribute(
+      'href',
+      '/catalog/tes%5Bt/compone%26nt/softw%23are',
+    );
+  });
 });

plugins/catalog-react/src/components/EntityRefLink/EntityRefLink.tsx

@@ -71,7 +71,11 @@ export const EntityRefLink = forwardRef<any, EntityRefLinkProps>(
     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 },