From c0ed2394f53678ae55dcd56512c6fd7180acd031 Mon Sep 17 00:00:00 2001
From: Vincenzo Scamporlino <vincenzos@spotify.com>
Date: Thu, 24 Aug 2023 14:58:09 +0200
Subject: [PATCH 1/4] catalog: encode entity name in EntityRefLink

Signed-off-by: Vincenzo Scamporlino <vincenzos@spotify.com>
---
 .../EntityRefLink/EntityRefLink.test.tsx      | 22 +++++++++++++++++++
 .../EntityRefLink/EntityRefLink.tsx           |  2 +-
 2 files changed, 23 insertions(+), 1 deletion(-)

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('<EntityRefLink />', () => {
       '/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(
+      <EntityRefLink entityRef={entityName} defaultKind="component">
+        Custom Children
+      </EntityRefLink>,
+      {
+        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<any, EntityRefLinkProps>(
     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 },

From 300466e1c1a202645e196968ad70f8268360ee4c Mon Sep 17 00:00:00 2001
From: Vincenzo Scamporlino <vincenzos@spotify.com>
Date: Mon, 18 Sep 2023 23:37:31 +0200
Subject: [PATCH 2/4] catalog: encode entity namespace and kind

Signed-off-by: Vincenzo Scamporlino <vincenzos@spotify.com>
---
 .../src/components/EntityRefLink/EntityRefLink.tsx          | 6 +++++-
 1 file changed, 5 insertions(+), 1 deletion(-)

diff --git a/plugins/catalog-react/src/components/EntityRefLink/EntityRefLink.tsx b/plugins/catalog-react/src/components/EntityRefLink/EntityRefLink.tsx
index 82a98ca417..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<any, EntityRefLinkProps>(
     kind = kind.toLocaleLowerCase('en-US');
     namespace = namespace?.toLocaleLowerCase('en-US') ?? DEFAULT_NAMESPACE;
 
-    const routeParams = { kind, namespace, name: encodeURIComponent(name) };
+    const routeParams = {
+      kind: encodeURIComponent(kind),
+      namespace: encodeURIComponent(namespace),
+      name: encodeURIComponent(name),
+    };
     const formattedEntityRefTitle = humanizeEntityRef(
       { kind, namespace, name },
       { defaultKind },

From a402e1dfb977aa2d33627dfc34d15e34aacfb78f Mon Sep 17 00:00:00 2001
From: Vincenzo Scamporlino <vincenzos@spotify.com>
Date: Mon, 18 Sep 2023 23:43:30 +0200
Subject: [PATCH 3/4] changeset

Signed-off-by: Vincenzo Scamporlino <vincenzos@spotify.com>
---
 .changeset/dull-experts-kiss.md | 5 +++++
 1 file changed, 5 insertions(+)
 create mode 100644 .changeset/dull-experts-kiss.md

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

From 951a8a71d79db06fda212270b939b75ecb958826 Mon Sep 17 00:00:00 2001
From: Vincenzo Scamporlino <vincenzos@spotify.com>
Date: Mon, 18 Sep 2023 23:46:19 +0200
Subject: [PATCH 4/4] catalog: add tests for special characters in namespace
 and kind

Signed-off-by: Vincenzo Scamporlino <vincenzos@spotify.com>
---
 .../src/components/EntityRefLink/EntityRefLink.test.tsx     | 6 +++---
 1 file changed, 3 insertions(+), 3 deletions(-)

diff --git a/plugins/catalog-react/src/components/EntityRefLink/EntityRefLink.test.tsx b/plugins/catalog-react/src/components/EntityRefLink/EntityRefLink.test.tsx
index eb783ae02b..cecf27be24 100644
--- a/plugins/catalog-react/src/components/EntityRefLink/EntityRefLink.test.tsx
+++ b/plugins/catalog-react/src/components/EntityRefLink/EntityRefLink.test.tsx
@@ -177,8 +177,8 @@ describe('<EntityRefLink />', () => {
 
   it('renders link by encoding name as URI component', async () => {
     const entityName = {
-      kind: 'Component',
-      namespace: 'test',
+      kind: 'Compone&nt',
+      namespace: 'tes[t',
       name: 'softw#are',
     };
     await renderInTestApp(
@@ -193,7 +193,7 @@ describe('<EntityRefLink />', () => {
     );
     expect(screen.getByText('Custom Children')).toHaveAttribute(
       'href',
-      '/catalog/test/component/softw%23are',
+      '/catalog/tes%5Bt/compone%26nt/softw%23are',
     );
   });
 });