From f5bf2b7137119cd68661f8584b4af13751199a01 Mon Sep 17 00:00:00 2001
From: Robert Stupp <snazy@snazy.de>
Date: Thu, 11 May 2023 16:02:04 +0200
Subject: [PATCH] UI: Handle reference names with `/`

Fixes #6802
---
 ui/src/App.tsx                       |  2 +-
 ui/src/CommitLog/CommitLog.tsx       |  4 ++--
 ui/src/TableHead/TableHead.tsx       | 21 +++++++++++++--------
 ui/src/TableListing/TableListing.tsx |  2 +-
 4 files changed, 17 insertions(+), 12 deletions(-)

diff --git a/ui/src/App.tsx b/ui/src/App.tsx
index 6bf3125d08a..5ec75dc47bb 100644
--- a/ui/src/App.tsx
+++ b/ui/src/App.tsx
@@ -155,7 +155,7 @@ const updateRef = (
   const view = locationParts[0];
 
   if (view === "commits" || view === "tree" || view === "content") {
-    const branch = locationParts[1];
+    const branch = decodeURIComponent(locationParts[1]);
     const slug =
       locationParts.length > 2 ? locationParts.slice(2).join("/") : "";
 
diff --git a/ui/src/CommitLog/CommitLog.tsx b/ui/src/CommitLog/CommitLog.tsx
index 5c419f1ab1e..7515c9ee1f2 100644
--- a/ui/src/CommitLog/CommitLog.tsx
+++ b/ui/src/CommitLog/CommitLog.tsx
@@ -77,7 +77,7 @@ const CommitLog = ({
           <div>
             <Nav.Item>
               <ExploreLink
-                toRef={branch}
+                toRef={encodeURIComponent(branch)}
                 path={(hash ?? "#").split("/")}
                 type="COMMIT"
                 className="commitLog__messageLink"
@@ -103,7 +103,7 @@ const CommitLog = ({
                 </Button>
               </Tooltip>
               <ExploreLink
-                toRef={branch}
+                toRef={encodeURIComponent(branch)}
                 path={(hash ?? "#").split("/")}
                 type="COMMIT"
                 className="commitLog__hashBtn rightBtnHover"
diff --git a/ui/src/TableHead/TableHead.tsx b/ui/src/TableHead/TableHead.tsx
index 911423c247e..74656069a26 100644
--- a/ui/src/TableHead/TableHead.tsx
+++ b/ui/src/TableHead/TableHead.tsx
@@ -56,7 +56,7 @@ const BranchesDropdown = ({
       {branches.map((branch) => {
         return (
           <ExploreLink
-            toRef={branch.name}
+            toRef={encodeURIComponent(branch.name)}
             path={path}
             type={type}
             key={branch.name}
@@ -80,7 +80,12 @@ const BranchesDropdown = ({
       <NavDropdown.Item disabled>Tags</NavDropdown.Item>
       {tags.map((tag) => {
         return (
-          <ExploreLink toRef={tag.name} path={path} type={type} key={tag.name}>
+          <ExploreLink
+            toRef={encodeURIComponent(tag.name)}
+            path={path}
+            type={type}
+            key={tag.name}
+          >
             <NavDropdown.Item as={"button"} key={tag.name}>
               {tag.name}
             </NavDropdown.Item>
@@ -129,7 +134,7 @@ const TreeTableHead = ({
       </div>
       <Nav.Item className="tableHead__rightContentWrapper">
         <ExploreLink
-          toRef={currentRef}
+          toRef={encodeURIComponent(currentRef)}
           path={path || []}
           type="COMMIT"
           className="nav-link"
@@ -155,7 +160,7 @@ const PathTableHead = ({
 }: PathTableHeadProps): React.ReactElement => {
   return (
     <Nav.Item className="nav-link">
-      <ExploreLink toRef={currentRef}>nessie</ExploreLink>
+      <ExploreLink toRef={encodeURIComponent(currentRef)}>nessie</ExploreLink>
       {path.map((p, index) => {
         return (
           <Fragment key={`path${index}`}>
@@ -164,7 +169,7 @@ const PathTableHead = ({
             </span>
             <ExploreLink
               key={index}
-              toRef={currentRef}
+              toRef={encodeURIComponent(currentRef)}
               path={(path || []).slice(0, index + 1)}
             >
               {p}
@@ -182,9 +187,9 @@ const PathCommitTableHead = ({
 }: PathTableHeadProps): React.ReactElement => {
   return (
     <Nav.Item className="nav-link">
-      <ExploreLink toRef={currentRef}>nessie</ExploreLink>
+      <ExploreLink toRef={encodeURIComponent(currentRef)}>nessie</ExploreLink>
       <span style={{ paddingLeft: "0.5em", paddingRight: "0.5em" }}>/</span>
-      <ExploreLink toRef={currentRef} type={"COMMIT"}>
+      <ExploreLink toRef={encodeURIComponent(currentRef)} type={"COMMIT"}>
         commits
       </ExploreLink>
       {path.map((p, index) => {
@@ -195,7 +200,7 @@ const PathCommitTableHead = ({
             </span>
             <ExploreLink
               key={index}
-              toRef={currentRef}
+              toRef={encodeURIComponent(currentRef)}
               path={(path || []).slice(0, index + 1)}
               type={"COMMIT"}
             >
diff --git a/ui/src/TableListing/TableListing.tsx b/ui/src/TableListing/TableListing.tsx
index 5add49d9f60..2e718d2bcf6 100644
--- a/ui/src/TableListing/TableListing.tsx
+++ b/ui/src/TableListing/TableListing.tsx
@@ -33,7 +33,7 @@ const groupItem = (
   return (
     <ListGroupItem key={key.name}>
       <ExploreLink
-        toRef={ref}
+        toRef={encodeURIComponent(ref)}
         path={path.concat(key.name)}
         type={key.type === "CONTAINER" ? "CONTAINER" : "OBJECT"}
       >