Fixed issue with back arrows & navigation in object browser (#397)

Co-authored-by: Benjamin Perez <benjamin@bexsoft.net>

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

@@ -42,7 +42,11 @@ import Snackbar from "@material-ui/core/Snackbar";
 import BrowserBreadcrumbs from "../../../../ObjectBrowser/BrowserBreadcrumbs";
 import get from "lodash/get";
 import { withRouter } from "react-router-dom";
-import { addRoute, setAllRoutes } from "../../../../ObjectBrowser/actions";
+import {
+  addRoute,
+  setAllRoutes,
+  setLastAsFile,
+} from "../../../../ObjectBrowser/actions";
 import { connect } from "react-redux";
 import { ObjectBrowserState, Route } from "../../../../ObjectBrowser/reducers";
 import CreateFolderModal from "./CreateFolderModal";
@@ -132,6 +136,7 @@ interface IListObjectsProps {
   addRoute: (param1: string, param2: string, param3: string) => any;
   setAllRoutes: (path: string) => any;
   routesList: Route[];
+  setLastAsFile: () => any;
 }
 
 interface ObjectBrowserReducer {
@@ -144,6 +149,7 @@ const ListObjects = ({
   addRoute,
   setAllRoutes,
   routesList,
+  setLastAsFile,
 }: IListObjectsProps) => {
   const [records, setRecords] = useState<BucketObject[]>([]);
   const [totalRecords, setTotalRecords] = useState<number>(0);
@@ -170,13 +176,16 @@ const ListObjects = ({
     api
       .invoke("GET", `/api/v1/buckets/${bucketName}/objects${extraPath}`)
       .then((res: BucketObjectsList) => {
-        setLoading(false);
         setSelectedBucket(bucketName);
         setRecords(res.objects || []);
         setTotalRecords(!res.objects ? 0 : res.total);
         setError("");
-        // TODO:
-        // if we get 0 results, and page > 0 , go down 1 page
+        // In case no objects were retrieved, We check if item is a file
+        if (!res.objects && extraPath !== "") {
+          verifyIfIsFile();
+          return;
+        }
+        setLoading(false);
       })
       .catch((err: any) => {
         setLoading(false);
@@ -191,6 +200,30 @@ const ListObjects = ({
     }
   }, [match, routesList, setAllRoutes]);
 
+  const verifyIfIsFile = () => {
+    const bucketName = match.params["bucket"];
+    const internalPaths = match.params[0];
+
+    api
+      .invoke(
+        "GET",
+        `/api/v1/buckets/${bucketName}/objects?prefix=${internalPaths}`
+      )
+      .then((res: BucketObjectsList) => {
+        //It is a file since it has elements in the object, setting file flag and waiting for component mount
+        if (res.objects !== null) {
+          setLastAsFile();
+        } else {
+          // It is a folder, we remove loader
+          setLoading(false);
+        }
+      })
+      .catch((err: any) => {
+        setLoading(false);
+        setError(err);
+      });
+  };
+
   const closeDeleteModalAndRefresh = (refresh: boolean) => {
     setDeleteOpen(false);
 
@@ -521,6 +554,7 @@ const mapStateToProps = ({ objectBrowser }: ObjectBrowserReducer) => ({
 const mapDispatchToProps = {
   addRoute,
   setAllRoutes,
+  setLastAsFile,
 };
 
 const connector = connect(mapStateToProps, mapDispatchToProps);

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

@@ -1,8 +1,8 @@
-import React, { useEffect, useState } from "react";
+import React, { useEffect } from "react";
 import ListObjects from "./ListObjects";
 import ObjectDetails from "../ObjectDetails/ObjectDetails";
 import get from "lodash/get";
-import { addRoute, setAllRoutes } from "../../../../ObjectBrowser/actions";
+import { setAllRoutes } from "../../../../ObjectBrowser/actions";
 import { connect } from "react-redux";
 import { withRouter } from "react-router-dom";
 import { ObjectBrowserState, Route } from "../../../../ObjectBrowser/reducers";
@@ -13,10 +13,15 @@ interface ObjectBrowserReducer {
 
 interface ObjectRoutingProps {
   routesList: Route[];
+  setAllRoutes: (path: string) => any;
   match: any;
 }
 
-const ObjectRouting = ({ routesList, match }: ObjectRoutingProps) => {
+const ObjectRouting = ({
+  routesList,
+  match,
+  setAllRoutes,
+}: ObjectRoutingProps) => {
   const currentItem = routesList[routesList.length - 1];
 
   useEffect(() => {
@@ -38,10 +43,8 @@ const mapStateToProps = ({ objectBrowser }: ObjectBrowserReducer) => ({
   routesList: get(objectBrowser, "routesList", []),
 });
 
-const mapDispatchToProps = (dispatch: any) => {
-  return {
-    dispatchSetAllRoutes: (route: string) => dispatch(setAllRoutes(route)),
-  };
+const mapDispatchToProps = {
+  setAllRoutes,
 };
 
 const connector = connect(mapStateToProps, mapDispatchToProps);

portal-ui/src/screens/Console/ObjectBrowser/actions.ts

@@ -21,6 +21,8 @@ export const OBJECT_BROWSER_REMOVE_ROUTE_LEVEL =
   "OBJECT_BROWSER/REMOVE_ROUTE_LEVEL";
 export const OBJECT_BROWSER_SET_ALL_ROUTES = "OBJECT_BROWSER/SET_ALL_ROUTES";
 export const OBJECT_BROWSER_CREATE_FOLDER = "OBJECT_BROWSER/CREATE_FOLDER";
+export const OBJECT_BROWSER_SET_LAST_AS_FILE =
+  "OBJECT_BROWSER/SET_LAST_AS_FILE";
 
 interface AddRouteAction {
   type: typeof OBJECT_BROWSER_ADD_ROUTE;
@@ -49,12 +51,17 @@ interface CreateFolder {
   newRoute: string;
 }
 
+interface SetLastAsFile {
+  type: typeof OBJECT_BROWSER_SET_LAST_AS_FILE;
+}
+
 export type ObjectBrowserActionTypes =
   | AddRouteAction
   | ResetRoutesList
   | RemoveRouteLevel
   | SetAllRoutes
-  | CreateFolder;
+  | CreateFolder
+  | SetLastAsFile;
 
 export const addRoute = (route: string, label: string, routeType: string) => {
   return {
@@ -92,3 +99,9 @@ export const createFolder = (newRoute: string) => {
     newRoute,
   };
 };
+
+export const setLastAsFile = () => {
+  return {
+    type: OBJECT_BROWSER_SET_LAST_AS_FILE,
+  };
+};

portal-ui/src/screens/Console/ObjectBrowser/reducers.ts

@@ -21,6 +21,7 @@ import {
   OBJECT_BROWSER_REMOVE_ROUTE_LEVEL,
   OBJECT_BROWSER_RESET_ROUTES_LIST,
   OBJECT_BROWSER_SET_ALL_ROUTES,
+  OBJECT_BROWSER_SET_LAST_AS_FILE,
   ObjectBrowserActionTypes,
 } from "./actions";
 
@@ -116,6 +117,20 @@ export function objectBrowserReducer(
         ...state,
         routesList: newFoldersRoutes,
       };
+    case OBJECT_BROWSER_SET_LAST_AS_FILE:
+      const currentList = state.routesList;
+      const lastItem = currentList.slice(-1)[0];
+
+      if (lastItem.type === "path") {
+        lastItem.type = "file";
+      }
+
+      const newList = [...currentList.slice(0, -1), lastItem];
+
+      return {
+        ...state,
+        routesList: newList,
+      };
     default:
       return state;
   }