encode Kind path component (#12)

remko · Jan 4, 2024 · c334e79 · c334e79
1 parent 8c85589
commit c334e79
Show file tree

Hide file tree

Showing 4 changed files with 22 additions and 10 deletions.
diff --git a/src/DatastoreAdmin.tsx b/src/DatastoreAdmin.tsx
@@ -138,9 +138,10 @@ function DatastoreAdminView({ project }: { project: string }) {
               const { page, pageSize } = qs.parse(
                 window.location.search,
               ) as Record<string, string>;
+              const decodedKind = decodeURIComponent(kind);
               return (
                 <KindPage
-                  kind={kind}
+                  kind={decodedKind}
                   page={page == null ? 0 : parseInt(page, 10) || 0}
                   pageSize={
                     pageSize == null ? 50 : parseInt(pageSize, 10) || 50

diff --git a/src/EntityPage.tsx b/src/EntityPage.tsx
@@ -202,7 +202,10 @@ export default function EntityPage({
       <ol className="breadcrumb">
         <li className="breadcrumb-item">
           <Link
-            href={namespacedLocation(`/kinds/${lkey.kind}`, keyNamespace(key))}
+            href={namespacedLocation(
+              `/kinds/${encodeURIComponent(lkey.kind)}`,
+              keyNamespace(key),
+            )}
           >
             {lkey.kind}
           </Link>

diff --git a/src/HomePage.tsx b/src/HomePage.tsx
@@ -16,9 +16,12 @@ export default function HomePage({ namespace }: { namespace: string | null }) {
     if (kinds == null || kinds.length === 0) {
       return;
     }
-    setLocation(namespacedLocation(`/kinds/${kinds[0]}`, namespace), {
-      replace: true,
-    });
+    setLocation(
+      namespacedLocation(`/kinds/${encodeURIComponent(kinds[0])}`, namespace),
+      {
+        replace: true,
+      },
+    );
   }, [kinds, namespace, setLocation]);
 
   // When we have an empty page, try to find a namespace that has kinds

diff --git a/src/KindPage.tsx b/src/KindPage.tsx
@@ -29,7 +29,12 @@ function KindSelector({
 
   const onLocationChange = React.useCallback(
     (ev) => {
-      setLocation(namespacedLocation(`/kinds/${ev.target.value}`, namespace));
+      setLocation(
+        namespacedLocation(
+          `/kinds/${encodeURIComponent(ev.target.value)}`,
+          namespace,
+        ),
+      );
     },
     [namespace, setLocation],
   );
@@ -115,7 +120,7 @@ function KindTable({
       }
       setLocation(
         namespacedLocation(
-          `/kinds/${kind}` + qs.stringify(nq, true),
+          `/kinds/${encodeURIComponent(kind)}` + qs.stringify(nq, true),
           namespace,
         ),
       );
@@ -126,7 +131,7 @@ function KindTable({
   const onPrevious = React.useCallback(() => {
     setLocation(
       namespacedLocation(
-        `/kinds/${kind}` +
+        `/kinds/${encodeURIComponent(kind)}` +
           updateQuery(window.location.search, {
             page: page > 1 ? page - 1 : undefined,
           }),
@@ -138,7 +143,7 @@ function KindTable({
   const onNext = React.useCallback(() => {
     setLocation(
       namespacedLocation(
-        `/kinds/${kind}` +
+        `/kinds/${encodeURIComponent(kind)}` +
           updateQuery(window.location.search, { page: page + 1 }),
         namespace,
       ),
@@ -149,7 +154,7 @@ function KindTable({
     (v: number) => {
       setLocation(
         namespacedLocation(
-          `/kinds/${kind}` +
+          `/kinds/${encodeURIComponent(kind)}` +
             updateQuery(window.location.search, { pageSize: v }),
           namespace,
         ),