list objects in browser ordered by last modified (#7805)

- return all objects in web-handlers listObjects response
- added local pagination to object list ui
- also fixed infinite loader and removed unused fields

browser/app/js/objects/__tests__/ObjectsHeader.test.js

@@ -17,6 +17,7 @@
 import React from "react"
 import { shallow } from "enzyme"
 import { ObjectsHeader } from "../ObjectsHeader"
+import { SORT_ORDER_ASC, SORT_ORDER_DESC } from "../../constants"
 
 describe("ObjectsHeader", () => {
   it("should render without crashing", () => {
@@ -24,44 +25,84 @@ describe("ObjectsHeader", () => {
     shallow(<ObjectsHeader sortObjects={sortObjects} />)
   })
 
-  it("should render columns with asc classes by default", () => {
+  it("should render the name column with asc class when objects are sorted by name asc", () => {
     const sortObjects = jest.fn()
-    const wrapper = shallow(<ObjectsHeader sortObjects={sortObjects} />)
+    const wrapper = shallow(
+      <ObjectsHeader
+        sortObjects={sortObjects}
+        sortedByName={true}
+        sortOrder={SORT_ORDER_ASC}
+      />
+    )
     expect(
       wrapper.find("#sort-by-name i").hasClass("fa-sort-alpha-asc")
     ).toBeTruthy()
-    expect(
-      wrapper.find("#sort-by-size i").hasClass("fa-sort-amount-asc")
-    ).toBeTruthy()
-    expect(
-      wrapper.find("#sort-by-last-modified i").hasClass("fa-sort-numeric-asc")
-    ).toBeTruthy()
   })
 
-  it("should render name column with desc class when objects are sorted by name", () => {
+  it("should render the name column with desc class when objects are sorted by name desc", () => {
     const sortObjects = jest.fn()
     const wrapper = shallow(
-      <ObjectsHeader sortObjects={sortObjects} sortNameOrder={true} />
+      <ObjectsHeader
+        sortObjects={sortObjects}
+        sortedByName={true}
+        sortOrder={SORT_ORDER_DESC}
+      />
     )
     expect(
       wrapper.find("#sort-by-name i").hasClass("fa-sort-alpha-desc")
     ).toBeTruthy()
   })
 
-  it("should render size column with desc class when objects are sorted by size", () => {
+  it("should render the size column with asc class when objects are sorted by size asc", () => {
     const sortObjects = jest.fn()
     const wrapper = shallow(
-      <ObjectsHeader sortObjects={sortObjects} sortSizeOrder={true} />
+      <ObjectsHeader
+        sortObjects={sortObjects}
+        sortedBySize={true}
+        sortOrder={SORT_ORDER_ASC}
+      />
+    )
+    expect(
+      wrapper.find("#sort-by-size i").hasClass("fa-sort-amount-asc")
+    ).toBeTruthy()
+  })
+
+  it("should render the size column with desc class when objects are sorted by size desc", () => {
+    const sortObjects = jest.fn()
+    const wrapper = shallow(
+      <ObjectsHeader
+        sortObjects={sortObjects}
+        sortedBySize={true}
+        sortOrder={SORT_ORDER_DESC}
+      />
     )
     expect(
       wrapper.find("#sort-by-size i").hasClass("fa-sort-amount-desc")
     ).toBeTruthy()
   })
 
-  it("should render last modified column with desc class when objects are sorted by last modified", () => {
+  it("should render the date column with asc class when objects are sorted by date asc", () => {
     const sortObjects = jest.fn()
     const wrapper = shallow(
-      <ObjectsHeader sortObjects={sortObjects} sortLastModifiedOrder={true} />
+      <ObjectsHeader
+        sortObjects={sortObjects}
+        sortedByLastModified={true}
+        sortOrder={SORT_ORDER_ASC}
+      />
+    )
+    expect(
+      wrapper.find("#sort-by-last-modified i").hasClass("fa-sort-numeric-asc")
+    ).toBeTruthy()
+  })
+
+  it("should render the date column with desc class when objects are sorted by date desc", () => {
+    const sortObjects = jest.fn()
+    const wrapper = shallow(
+      <ObjectsHeader
+        sortObjects={sortObjects}
+        sortedByLastModified={true}
+        sortOrder={SORT_ORDER_DESC}
+      />
     )
     expect(
       wrapper.find("#sort-by-last-modified i").hasClass("fa-sort-numeric-desc")

browser/app/js/objects/__tests__/ObjectsListContainer.test.js

@@ -20,14 +20,13 @@ import { ObjectsListContainer } from "../ObjectsListContainer"
 
 describe("ObjectsList", () => {
   it("should render without crashing", () => {
-    shallow(<ObjectsListContainer loadObjects={jest.fn()} />)
+    shallow(<ObjectsListContainer objects={[]} />)
   })
 
   it("should render ObjectsList with objects", () => {
     const wrapper = shallow(
       <ObjectsListContainer
         objects={[{ name: "test1.jpg" }, { name: "test2.jpg" }]}
-        loadObjects={jest.fn()}
       />
     )
     expect(wrapper.find("ObjectsList").length).toBe(1)
@@ -37,10 +36,14 @@ describe("ObjectsList", () => {
     ])
   })
 
-  it("should show the loading indicator at the bottom if there are more elements to display", () => {
+  it("should show the loading indicator when the objects are being loaded", () => {
     const wrapper = shallow(
-      <ObjectsListContainer currentBucket="test1" isTruncated={true} />
+      <ObjectsListContainer
+        currentBucket="test1"
+        objects={[]}
+        listLoading={true}
+      />
     )
-    expect(wrapper.find(".text-center").prop("style")).toHaveProperty("display", "block")
+    expect(wrapper.find(".loading").exists()).toBeTruthy()
   })
 })

browser/app/js/objects/__tests__/actions.test.js

@@ -18,7 +18,13 @@ import configureStore from "redux-mock-store"
 import thunk from "redux-thunk"
 import * as actionsObjects from "../actions"
 import * as alertActions from "../../alert/actions"
-import { minioBrowserPrefix } from "../../constants"
+import {
+  minioBrowserPrefix,
+  SORT_BY_NAME,
+  SORT_ORDER_ASC,
+  SORT_BY_LAST_MODIFIED,
+  SORT_ORDER_DESC
+} from "../../constants"
 import history from "../../history"
 
 jest.mock("../../web", () => ({
@@ -37,8 +43,6 @@ jest.mock("../../web", () => ({
     } else {
       return Promise.resolve({
         objects: [{ name: "test1" }, { name: "test2" }],
-        istruncated: false,
-        nextmarker: "test2",
         writable: false
       })
     }
@@ -77,17 +81,11 @@ describe("Objects actions", () => {
     const expectedActions = [
       {
         type: "objects/SET_LIST",
-        objects: [{ name: "test1" }, { name: "test2" }],
-        isTruncated: false,
-        marker: "test2"
+        objects: [{ name: "test1" }, { name: "test2" }]
       }
     ]
     store.dispatch(
-      actionsObjects.setList(
-        [{ name: "test1" }, { name: "test2" }],
-        "test2",
-        false
-      )
+      actionsObjects.setList([{ name: "test1" }, { name: "test2" }])
     )
     const actions = store.getActions()
     expect(actions).toEqual(expectedActions)
@@ -98,10 +96,10 @@ describe("Objects actions", () => {
     const expectedActions = [
       {
         type: "objects/SET_SORT_BY",
-        sortBy: "name"
+        sortBy: SORT_BY_NAME
       }
     ]
-    store.dispatch(actionsObjects.setSortBy("name"))
+    store.dispatch(actionsObjects.setSortBy(SORT_BY_NAME))
     const actions = store.getActions()
     expect(actions).toEqual(expectedActions)
   })
@@ -111,10 +109,10 @@ describe("Objects actions", () => {
     const expectedActions = [
       {
         type: "objects/SET_SORT_ORDER",
-        sortOrder: true
+        sortOrder: SORT_ORDER_ASC
       }
     ]
-    store.dispatch(actionsObjects.setSortOrder(true))
+    store.dispatch(actionsObjects.setSortOrder(SORT_ORDER_ASC))
     const actions = store.getActions()
     expect(actions).toEqual(expectedActions)
   })
@@ -126,23 +124,26 @@ describe("Objects actions", () => {
     })
     const expectedActions = [
       {
-        type: "objects/SET_LIST",
-        objects: [{ name: "test1" }, { name: "test2" }],
-        marker: "test2",
-        isTruncated: false
+        type: "objects/RESET_LIST"
       },
+      { listLoading: true, type: "objects/SET_LIST_LOADING" },
       {
         type: "objects/SET_SORT_BY",
-        sortBy: ""
+        sortBy: SORT_BY_LAST_MODIFIED
       },
       {
         type: "objects/SET_SORT_ORDER",
-        sortOrder: false
+        sortOrder: SORT_ORDER_DESC
+      },
+      {
+        type: "objects/SET_LIST",
+        objects: [{ name: "test2" }, { name: "test1" }]
       },
       {
         type: "objects/SET_PREFIX_WRITABLE",
         prefixWritable: false
-      }
+      },
+      { listLoading: false, type: "objects/SET_LIST_LOADING" }
     ]
     return store.dispatch(actionsObjects.fetchObjects()).then(() => {
       const actions = store.getActions()
@@ -150,35 +151,16 @@ describe("Objects actions", () => {
     })
   })
 
-  it("creates objects/APPEND_LIST after fetching more objects", () => {
-    const store = mockStore({
-      buckets: { currentBucket: "bk1" },
-      objects: { currentPrefix: "" }
-    })
-    const expectedActions = [
-      {
-        type: "objects/APPEND_LIST",
-        objects: [{ name: "test1" }, { name: "test2" }],
-        marker: "test2",
-        isTruncated: false
-      },
-      {
-        type: "objects/SET_PREFIX_WRITABLE",
-        prefixWritable: false
-      }
-    ]
-    return store.dispatch(actionsObjects.fetchObjects(true)).then(() => {
-      const actions = store.getActions()
-      expect(actions).toEqual(expectedActions)
-    })
-  })
-
   it("creates objects/RESET_LIST after failing to fetch the objects from bucket with ListObjects denied for LoggedIn users", () => {
     const store = mockStore({
       buckets: { currentBucket: "test-deny" },
       objects: { currentPrefix: "" }
     })
     const expectedActions = [
+      {
+        type: "objects/RESET_LIST"
+      },
+      { listLoading: true, type: "objects/SET_LIST_LOADING" },
       {
         type: "alert/SET",
         alert: {
@@ -189,8 +171,9 @@ describe("Objects actions", () => {
         }
       },
       {
-        type: "object/RESET_LIST"
-      }
+        type: "objects/RESET_LIST"
+      },
+      { listLoading: false, type: "objects/SET_LIST_LOADING" }
     ]
     return store.dispatch(actionsObjects.fetchObjects()).then(() => {
       const actions = store.getActions()
@@ -213,28 +196,24 @@ describe("Objects actions", () => {
       objects: {
         list: [],
         sortBy: "",
-        sortOrder: false,
-        isTruncated: false,
-        marker: ""
+        sortOrder: SORT_ORDER_ASC
       }
     })
     const expectedActions = [
       {
         type: "objects/SET_SORT_BY",
-        sortBy: "name"
+        sortBy: SORT_BY_NAME
       },
       {
         type: "objects/SET_SORT_ORDER",
-        sortOrder: true
+        sortOrder: SORT_ORDER_ASC
       },
       {
         type: "objects/SET_LIST",
-        objects: [],
-        isTruncated: false,
-        marker: ""
+        objects: []
       }
     ]
-    store.dispatch(actionsObjects.sortObjects("name"))
+    store.dispatch(actionsObjects.sortObjects(SORT_BY_NAME))
     const actions = store.getActions()
     expect(actions).toEqual(expectedActions)
   })
@@ -246,6 +225,10 @@ describe("Objects actions", () => {
     })
     const expectedActions = [
       { type: "objects/SET_CURRENT_PREFIX", prefix: "abc/" },
+      {
+        type: "objects/RESET_LIST"
+      },
+      { listLoading: true, type: "objects/SET_LIST_LOADING" },
       { type: "objects/CHECKED_LIST_RESET" }
     ]
     store.dispatch(actionsObjects.selectPrefix("abc/"))

browser/app/js/objects/__tests__/reducer.test.js

@@ -16,17 +16,17 @@
 
 import reducer from "../reducer"
 import * as actions from "../actions"
+import { SORT_ORDER_ASC, SORT_BY_NAME } from "../../constants"
 
 describe("objects reducer", () => {
   it("should return the initial state", () => {
     const initialState = reducer(undefined, {})
     expect(initialState).toEqual({
       list: [],
+      listLoading: false,
       sortBy: "",
-      sortOrder: false,
+      sortOrder: SORT_ORDER_ASC,
       currentPrefix: "",
-      marker: "",
-      isTruncated: false,
       prefixWritable: false,
       shareObject: {
         show: false,
@@ -40,37 +40,9 @@ describe("objects reducer", () => {
   it("should handle SET_LIST", () => {
     const newState = reducer(undefined, {
       type: actions.SET_LIST,
-      objects: [{ name: "obj1" }, { name: "obj2" }],
-      marker: "obj2",
-      isTruncated: false
+      objects: [{ name: "obj1" }, { name: "obj2" }]
     })
     expect(newState.list).toEqual([{ name: "obj1" }, { name: "obj2" }])
-    expect(newState.marker).toBe("obj2")
-    expect(newState.isTruncated).toBeFalsy()
-  })
-
-  it("should handle APPEND_LIST", () => {
-    const newState = reducer(
-      {
-        list: [{ name: "obj1" }, { name: "obj2" }],
-        marker: "obj2",
-        isTruncated: true
-      },
-      {
-        type: actions.APPEND_LIST,
-        objects: [{ name: "obj3" }, { name: "obj4" }],
-        marker: "obj4",
-        isTruncated: false
-      }
-    )
-    expect(newState.list).toEqual([
-      { name: "obj1" },
-      { name: "obj2" },
-      { name: "obj3" },
-      { name: "obj4" }
-    ])
-    expect(newState.marker).toBe("obj4")
-    expect(newState.isTruncated).toBeFalsy()
   })
 
   it("should handle REMOVE", () => {
@@ -98,30 +70,28 @@ describe("objects reducer", () => {
   it("should handle SET_SORT_BY", () => {
     const newState = reducer(undefined, {
       type: actions.SET_SORT_BY,
-      sortBy: "name"
+      sortBy: SORT_BY_NAME
     })
-    expect(newState.sortBy).toEqual("name")
+    expect(newState.sortBy).toEqual(SORT_BY_NAME)
   })
 
   it("should handle SET_SORT_ORDER", () => {
     const newState = reducer(undefined, {
       type: actions.SET_SORT_ORDER,
-      sortOrder: true
+      sortOrder: SORT_ORDER_ASC
     })
-    expect(newState.sortOrder).toEqual(true)
+    expect(newState.sortOrder).toEqual(SORT_ORDER_ASC)
   })
 
   it("should handle SET_CURRENT_PREFIX", () => {
     const newState = reducer(
-      { currentPrefix: "test1/", marker: "abc", isTruncated: true },
+      { currentPrefix: "test1/" },
       {
         type: actions.SET_CURRENT_PREFIX,
         prefix: "test2/"
       }
     )
     expect(newState.currentPrefix).toEqual("test2/")
-    expect(newState.marker).toEqual("")
-    expect(newState.isTruncated).toBeFalsy()
   })
 
   it("should handle SET_PREFIX_WRITABLE", () => {