Fixed create path issue when object details is open (#1885)

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

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

@@ -31,14 +31,17 @@ import { decodeFileName, encodeFileName } from "../../../../../../common/utils";
 import { setModalErrorSnackMessage } from "../../../../../../actions";
 import { BucketObjectItem } from "./types";
 import { CreateNewPathIcon } from "../../../../../../icons";
+import { AppState } from "../../../../../../store";
 
-interface ICreateFolder {
+interface ICreatePath {
   classes: any;
   modalOpen: boolean;
   bucketName: string;
   folderName: string;
   onClose: () => any;
   existingFiles: BucketObjectItem[];
+  detailsOpen: boolean;
+  selectedInternalPaths: string | null;
   setModalErrorSnackMessage: typeof setModalErrorSnackMessage;
 }
 
@@ -48,7 +51,7 @@ const styles = (theme: Theme) =>
     ...formFieldStyles,
   });
 
-const CreateFolderModal = ({
+const CreatePathModal = ({
   modalOpen,
   folderName,
   bucketName,
@@ -56,11 +59,24 @@ const CreateFolderModal = ({
   setModalErrorSnackMessage,
   classes,
   existingFiles,
-}: ICreateFolder) => {
+  detailsOpen,
+  selectedInternalPaths,
+}: ICreatePath) => {
   const [pathUrl, setPathUrl] = useState("");
   const [isFormValid, setIsFormValid] = useState<boolean>(false);
 
-  const currentPath = `${bucketName}/${decodeFileName(folderName)}`;
+  let currentPath = `${bucketName}/${decodeFileName(folderName)}`;
+
+  if(selectedInternalPaths && detailsOpen) {
+    const decodedPathFileName = decodeFileName(selectedInternalPaths).split("/");
+
+    if(decodedPathFileName) {
+      decodedPathFileName.pop();
+      const joinFileName = decodedPathFileName.join("/")
+      const joinPaths = `${joinFileName}${joinFileName.endsWith("/") ? "" : "/"}`;
+      currentPath = `${bucketName}/${joinPaths}`;
+    }
+  }
 
   const resetForm = () => {
     setPathUrl("");
@@ -68,12 +84,25 @@ const CreateFolderModal = ({
 
   const createProcess = () => {
     let folderPath = "";
-    if (folderName !== "") {
+
-      const decodedFolderName = decodeFileName(folderName);
+    if(selectedInternalPaths && detailsOpen) {
-      folderPath = decodedFolderName.endsWith("/")
+      const decodedPathFileName = decodeFileName(selectedInternalPaths).split("/");
-        ? decodedFolderName
+
-        : `${decodedFolderName}/`;
+      if(decodedPathFileName) {
+        decodedPathFileName.pop();
+        const joinFileName = decodedPathFileName.join("/")
+        folderPath = `${joinFileName}${joinFileName.endsWith("/") ? "" : "/"}`;
+      }
+    } else {
+      if (folderName !== "") {
+        const decodedFolderName = decodeFileName(folderName);
+        folderPath = decodedFolderName.endsWith("/")
+            ? decodedFolderName
+            : `${decodedFolderName}/`;
+      }
     }
+
+
     const sharesName = (record: BucketObjectItem) =>
       record.name === folderPath + pathUrl;
 
@@ -119,7 +148,19 @@ const CreateFolderModal = ({
       >
         <Grid container>
           <Grid item xs={12} className={classes.formFieldRow}>
-            Current Path: {currentPath}
+            <strong>Current Path:</strong> <br />
+            <div
+              style={{
+                textOverflow: "ellipsis",
+                whiteSpace: "nowrap",
+                overflow: "hidden",
+                fontSize: 14,
+                textAlign: "left"
+              }}
+              dir={"rtl"}
+            >
+              {currentPath}
+            </div>
           </Grid>
           <Grid item xs={12} className={classes.formFieldRow}>
             <InputBoxWrapper
@@ -158,10 +199,15 @@ const CreateFolderModal = ({
   );
 };
 
+const mapStateToProps = ({ objectBrowser }: AppState) => ({
+  detailsOpen: objectBrowser.objectDetailsOpen,
+  selectedInternalPaths: objectBrowser.selectedInternalPaths,
+});
+
 const mapDispatchToProps = {
   setModalErrorSnackMessage,
 };
 
-const connector = connect(null, mapDispatchToProps);
+const connector = connect(mapStateToProps, mapDispatchToProps);
 
-export default connector(withStyles(styles)(CreateFolderModal));
+export default connector(withStyles(styles)(CreatePathModal));

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

@@ -1094,10 +1094,30 @@ const ListObjects = ({
   }
 
   const onClosePanel = (forceRefresh: boolean) => {
-    setObjectDetailsView(false);
     setSelectedObjectView(null);
-    setSelectedObjects([]);
     setVersionsModeEnabled(false);
+    if (detailsOpen && selectedInternalPaths !== null) {
+      setSelectedObjectView(null);
+      setVersionsModeEnabled(false);
+      // We change URL to be the contained folder
+
+      const decodedPath = decodeFileName(internalPaths);
+      const splitURLS = decodedPath.split("/");
+
+      // We remove the last section of the URL as it should be a file
+      splitURLS.pop();
+
+      let URLItem = '';
+
+      if(splitURLS && splitURLS.length > 0) {
+        URLItem = `${splitURLS.join("/")}/`;
+      }
+
+      history.push(`/buckets/${bucketName}/browse/${encodeFileName(URLItem)}`)
+    }
+
+    setObjectDetailsView(false);
+    setSelectedObjects([]);
 
     if (forceRefresh) {
       setLoadingObjectsList(true);

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

@@ -34,9 +34,9 @@ import { setVersionsModeEnabled } from "./actions";
 import history from "../../../history";
 import withSuspense from "../Common/Components/withSuspense";
 
-const CreateFolderModal = withSuspense(
+const CreatePathModal = withSuspense(
   React.lazy(
-    () => import("../Buckets/ListBuckets/Objects/ListObjects/CreateFolderModal")
+    () => import("../Buckets/ListBuckets/Objects/ListObjects/CreatePathModal")
   )
 );
 
@@ -154,7 +154,7 @@ const BrowserBreadcrumbs = ({
   return (
     <div className={classes.breadcrumbsMain}>
       {createFolderOpen && (
-        <CreateFolderModal
+        <CreatePathModal
           modalOpen={createFolderOpen}
           bucketName={bucketName}
           folderName={internalPaths}