Fixed incompatibility with some base64 strings & React Router v6 (#2208)

* Fixed incompatibility with some base64 strings & React Router v6

This affected Object Browser & certain Cyrillic / Chinese names

Signed-off-by: Benjamin Perez <benjamin@bexsoft.net>

portal-ui/src/screens/Console/Buckets/BucketDetails/BrowserHandler.tsx

@@ -16,12 +16,11 @@
 
 import React, { Fragment, useEffect } from "react";
 import { useSelector } from "react-redux";
-import { useNavigate, useParams } from "react-router-dom";
+import { useLocation, useNavigate, useParams } from "react-router-dom";
 import { Theme } from "@mui/material/styles";
 import createStyles from "@mui/styles/createStyles";
 import withStyles from "@mui/styles/withStyles";
 import { Grid, IconButton, Tooltip } from "@mui/material";
-import get from "lodash/get";
 import { AppState, useAppDispatch } from "../../../../store";
 import { containerForHeader } from "../../Common/FormComponents/common/styleLibrary";
 
@@ -55,6 +54,7 @@ const BrowserHandler = () => {
   const dispatch = useAppDispatch();
   const navigate = useNavigate();
   const params = useParams();
+  const location = useLocation();
 
   const versionsMode = useSelector(
     (state: AppState) => state.objectBrowser.versionsMode
@@ -72,7 +72,9 @@ const BrowserHandler = () => {
   const features = useSelector(selFeatures);
 
   const bucketName = params.bucketName || "";
-  const internalPaths = get(params, "subpaths", "");
+  const pathSegment = location.pathname.split("/browse/");
+
+  const internalPaths = pathSegment.length === 2 ? pathSegment[1] : "";
 
   const obOnly = !!features?.includes("object-browser-only");
 

portal-ui/src/screens/Console/Buckets/Buckets.tsx

@@ -57,7 +57,7 @@ const Buckets = () => {
         }
       />
       <Route
-        path=":bucketName/browse/:subpaths"
+        path=":bucketName/browse/*"
         element={
           <Suspense fallback={<LoadingComponent />}>
             <BrowserHandler />

portal-ui/src/screens/Console/Buckets/ListBuckets/Objects/ListObjects/ListObjects.tsx

@@ -23,7 +23,7 @@ import React, {
   useState,
 } from "react";
 import { useSelector } from "react-redux";
-import { useNavigate, useParams } from "react-router-dom";
+import { useLocation, useNavigate, useParams } from "react-router-dom";
 import { useDropzone } from "react-dropzone";
 import { Theme } from "@mui/material/styles";
 import createStyles from "@mui/styles/createStyles";
@@ -275,6 +275,7 @@ const ListObjects = () => {
   const dispatch = useAppDispatch();
   const params = useParams();
   const navigate = useNavigate();
+  const location = useLocation();
 
   const rewindEnabled = useSelector(
     (state: AppState) => state.objectBrowser.rewind.rewindEnabled
@@ -340,7 +341,9 @@ const ListObjects = () => {
   const [downloadRenameModal, setDownloadRenameModal] =
     useState<BucketObjectItem | null>(null);
 
-  const internalPaths = get(params, "subpaths", "");
+  const pathSegment = location.pathname.split("/browse/");
+
+  const internalPaths = pathSegment.length === 2 ? pathSegment[1] : "";
   const bucketName = params.bucketName || "";
 
   const fileUpload = useRef<HTMLInputElement>(null);

portal-ui/tests/permissions-1/bucketWritePrefixOnly.ts

@@ -48,7 +48,7 @@ test
       const uploadButton = elements.uploadButton;
       await t
         .useRole(roles.bucketWritePrefixOnly)
-        .navigateTo("http://localhost:9090/buckets/testcafe/browse/d3JpdGU=/")
+        .navigateTo("http://localhost:9090/buckets/testcafe/browse/d3JpdGU=")
         .click(uploadButton)
         .expect(Selector("li").withText("Upload File").hasClass("Mui-disabled"))
         .notOk()