From 761c6529a21ed94e3982ecca67ebb6767465e6ca Mon Sep 17 00:00:00 2001 From: Alex <33497058+bexsoft@users.noreply.github.com> Date: Wed, 18 Nov 2020 00:05:46 -0600 Subject: [PATCH] Fixed issue with back arrows & navigation in object browser (#397) Co-authored-by: Benjamin Perez --- .../Objects/ListObjects/ListObjects.tsx | 42 +++++++++++++++++-- .../Objects/ListObjects/ObjectRouting.tsx | 17 ++++---- .../screens/Console/ObjectBrowser/actions.ts | 15 ++++++- .../screens/Console/ObjectBrowser/reducers.ts | 15 +++++++ 4 files changed, 77 insertions(+), 12 deletions(-) diff --git a/portal-ui/src/screens/Console/Buckets/ListBuckets/Objects/ListObjects/ListObjects.tsx b/portal-ui/src/screens/Console/Buckets/ListBuckets/Objects/ListObjects/ListObjects.tsx index 771590991..fe37b465c 100644 --- a/portal-ui/src/screens/Console/Buckets/ListBuckets/Objects/ListObjects/ListObjects.tsx +++ b/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([]); const [totalRecords, setTotalRecords] = useState(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); diff --git a/portal-ui/src/screens/Console/Buckets/ListBuckets/Objects/ListObjects/ObjectRouting.tsx b/portal-ui/src/screens/Console/Buckets/ListBuckets/Objects/ListObjects/ObjectRouting.tsx index 116556515..c49332784 100644 --- a/portal-ui/src/screens/Console/Buckets/ListBuckets/Objects/ListObjects/ObjectRouting.tsx +++ b/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); diff --git a/portal-ui/src/screens/Console/ObjectBrowser/actions.ts b/portal-ui/src/screens/Console/ObjectBrowser/actions.ts index a8c8a081d..57a690c5a 100644 --- a/portal-ui/src/screens/Console/ObjectBrowser/actions.ts +++ b/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, + }; +}; diff --git a/portal-ui/src/screens/Console/ObjectBrowser/reducers.ts b/portal-ui/src/screens/Console/ObjectBrowser/reducers.ts index 0757f8f4b..617082dc5 100644 --- a/portal-ui/src/screens/Console/ObjectBrowser/reducers.ts +++ b/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; }