Preserve white space in breadcrumb disply and navigation (#2932)

Author: prakashsvmx

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

@@ -24,7 +24,7 @@ const styles = (theme: Theme) =>
       },
     },
     fileNameText: {
-      whiteSpace: "nowrap",
+      whiteSpace: "pre",
       overflow: "hidden",
       textOverflow: "ellipsis",
     },

portal-ui/src/screens/Console/ObjectBrowser/BrowserBreadcrumbs.tsx

@@ -22,7 +22,7 @@ import makeStyles from "@mui/styles/makeStyles";
 import { Theme } from "@mui/material/styles";
 import { Link, useNavigate } from "react-router-dom";
 import { objectBrowserCommon } from "../Common/FormComponents/common/styleLibrary";
-import { encodeURLString } from "../../../common/utils";
+import { encodeURLString, safeDecodeURIComponent } from "../../../common/utils";
 import { Button, CopyIcon, NewPathIcon, Tooltip, Breadcrumbs } from "mds";
 import { hasPermission } from "../../../common/SecureComponent";
 import {
@@ -127,17 +127,26 @@ const BrowserBreadcrumbs = ({
       <Fragment key={`breadcrumbs-${index.toString()}`}>
         <span className={classes.slashSpacingStyle}>/</span>
         {index === lastBreadcrumbsIndex ? (
-          <span style={{ cursor: "default" }}>{objectItem}</span>
+          <span style={{ cursor: "default", whiteSpace: "pre" }}>
+            {safeDecodeURIComponent(objectItem) /*Only for display*/}
+          </span>
         ) : (
           <Link
+            style={{
+              whiteSpace: "pre",
+            }}
             to={route}
             onClick={() => {
               dispatch(
                 setVersionsModeEnabled({ status: false, objectName: "" })
               );
             }}
           >
-            {objectItem}
+            {
+              safeDecodeURIComponent(
+                objectItem
+              ) /*Only for display to preserve */
+            }
           </Link>
         )}
       </Fragment>
@@ -210,6 +219,9 @@ const BrowserBreadcrumbs = ({
           />
         )}
         <Breadcrumbs
+          sx={{
+            whiteSpace: "pre",
+          }}
           goBackFunction={goBackFunction}
           additionalOptions={
             <Fragment>