@oat-sa/tao-core-ui 3.23.0 → 3.24.1

package/src/resourcemgr/fileBrowser.js

@@ -11,65 +11,194 @@
  *
  * You should have received a copy of the GNU General Public License
  * along with this program; if not, write to the Free Software
- * Foundation, Inc., 51 Franklin Street, Fifth Floor, Boston, MA  02110-1301, USA.
+ * Foundation, Inc., 31 Milk St # 960789 Boston, MA 02196 USA.
  *
- * Copyright (c) 2018-2020 (original work) Open Assessment Technologies SA;
+ * Copyright (c) 2018-2026 (original work) Open Assessment Technologies SA;
  */
 import $ from 'jquery';
 import _ from 'lodash';
-import request from 'core/request';
 import paginationComponent from 'ui/pagination';
 import rootFolderTpl from 'ui/resourcemgr/tpl/rootFolder';
 import folderTpl from 'ui/resourcemgr/tpl/folder';
+import loggerFactory from 'core/logger';
 import updatePermissions from './util/updatePermissions';
+import { DEFAULT_SORT, sortAssetItems } from 'ui/resourcemgr/assetSearchContract';
 
-const ns = 'resourcemgr';
+const NS = 'resourcemgr';
+const LOGGER = loggerFactory(`ui/${NS}`);
+const DEFAULT_AJAX_TIMEOUT_MS = 30000;
+const TREE_LOADING_REF_KEY = `${NS}TreeLoadingRefCount`;
+
+/**
+ * @param {Object} data
+ * @returns {Array}
+ */
+function folderChildrenOnly(data) {
+    return _.filter(data && data.children, function (child) {
+        return child && child.path && !child.uri;
+    });
+}
 
 export default function (options) {
+    if (!options.browseUrl && options.url) {
+        options.browseUrl = options.url;
+    }
+
     const root = options.root || 'local';
     const rootPath = options.path || '/';
+    const initialPath = options.initialPath || rootPath;
     const $container = options.$target;
     const $fileBrowser = $('.file-browser .file-browser-wrapper', $container);
     const $divContainer = $(`.${root}`, $fileBrowser);
     const $folderContainer = $('.folders', $divContainer);
+    const $paginationContainer = $('.pagination-bottom', $container);
     const fileTree = {};
     // for pagination
     let selectedClass = {
         path: rootPath,
-        childrenLimit: 10,
+        childrenLimit: 11,
         total: 0,
         page: 1
     };
+    let searchMode = false;
+    let sort = Object.assign({}, DEFAULT_SORT);
+    const splitBrowse = options.splitBrowse !== false;
+    const ajaxTimeoutMs = Number.isFinite(Number(options.ajaxTimeoutMs)) && Number(options.ajaxTimeoutMs) > 0
+        ? Number(options.ajaxTimeoutMs)
+        : DEFAULT_AJAX_TIMEOUT_MS;
+    const $treeLoadingOverlay = $('.file-browser-tree-loading', $fileBrowser);
+    const $treeLoadingStatus = $('.file-browser-tree-loading-status', $treeLoadingOverlay);
+
+    /**
+     * Ref-count in-flight browse requests and toggle the tree loading overlay.
+     * @param {Boolean} increment - true when a load starts, false when it finishes
+     */
+    function setTreeLoading(increment) {
+        let treeLoadingRefCount = Number($fileBrowser.data(TREE_LOADING_REF_KEY)) || 0;
+        treeLoadingRefCount += increment ? 1 : -1;
+        if (treeLoadingRefCount < 0) {
+            treeLoadingRefCount = 0;
+        }
+        $fileBrowser.data(TREE_LOADING_REF_KEY, treeLoadingRefCount);
+        const loading = treeLoadingRefCount > 0;
+        $fileBrowser.toggleClass('is-tree-loading', loading);
+        $fileBrowser.attr('aria-busy', loading ? 'true' : 'false');
+        $treeLoadingOverlay.toggleClass('hidden', !loading).attr('aria-hidden', loading ? 'false' : 'true');
+        $treeLoadingStatus.attr('aria-busy', loading ? 'true' : 'false');
+    }
+
+    /**
+     * Show or hide the asset table loading overlay (browse mode only).
+     * @param {Boolean} loading
+     */
+    function setFilesLoading(loading) {
+        if (searchMode) {
+            return;
+        }
+        $container.trigger(`filesloading.${NS}`, [!!loading]);
+    }
+
+    $container.on(`searchmode.${NS}`, function (e, enabled) {
+        searchMode = !!enabled;
+        if (searchMode) {
+            $container.trigger(`filesloading.${NS}`, [false]);
+        }
+    });
+
+    $container.on(`sortchange.${NS}`, function (e, nextSort) {
+        sort = Object.assign({}, DEFAULT_SORT, nextSort || {});
+        selectedClass.page = 1;
+        invalidateFolderFiles(selectedClass.path);
+        if (searchMode || !isActiveBrowser()) {
+            return;
+        }
+        reloadSortedFolder();
+    });
+
+    $container.on(`searchclear.${NS}`, function (e, path) {
+        const targetPath = path || selectedClass.path;
+        selectedClass.page = 1;
+        invalidateFolderFiles(targetPath);
+        if (!isActiveBrowser()) {
+            return;
+        }
+        const subTree = getByExactPath(fileTree, targetPath) || getByPath(fileTree, targetPath) || fileTree;
+        if (!searchMode) {
+            setFilesLoading(true);
+        }
+        getFolderContent(subTree, targetPath, function (content) {
+            if (content) {
+                selectFolder(content, targetPath);
+            } else {
+                setFilesLoading(false);
+            }
+        });
+    });
+
+    // Reopen with resolved parent (AC3 edit/change): leave search, open folder again.
+    $container.on(`applycontext.${NS}`, function (e, ctx) {
+        const path = (ctx && ctx.path) || rootPath;
+        const pathIsTaomedia = path && String(path).indexOf('taomedia://') === 0;
+        if (pathIsTaomedia && root === 'local') {
+            return;
+        }
+        if (!pathIsTaomedia && root !== 'local') {
+            return;
+        }
+        $container.data('activeFileBrowserRoot', root);
+        if (searchMode) {
+            $container.trigger(`requestexitsearch.${NS}`);
+        }
+        selectedClass.page = 1;
+        openInitialPath(path);
+    });
 
     //load the content of the ROOT
+    const showInitialListLoading = !searchMode && root === 'local';
+    if (showInitialListLoading) {
+        setFilesLoading(true);
+    }
     getFolderContent(fileTree, rootPath, function (content) {
+        if (!content) {
+            if (showInitialListLoading) {
+                setFilesLoading(false);
+            }
+            return;
+        }
         indexTree(content);
 
         //create the tree node for the ROOT folder by default once the initial content loaded
-        $folderContainer.append(rootFolderTpl(content));
+        $folderContainer.append(
+            rootFolderTpl(
+                Object.assign({}, content, {
+                    showToggle: hasNestedFolderChildren(content) !== false
+                })
+            )
+        );
 
         const $rootNode = $('.root-folder', $folderContainer);
         //create an inner list and append found elements
         const $innerList = $('.root ul', $folderContainer);
-        if (content.children) {
+        if (hasNestedFolderChildren(content)) {
             $rootNode.addClass('opened');
+        } else if (hasNestedFolderChildren(content) === false) {
+            setFolderToggleState($rootNode, false);
         }
         updateFolders(content, $innerList);
 
-        if (content.permissions.read && !options.hasAlreadySelected) {
-            $('.file-browser').find('li.active').removeClass('active');
-            updateSelectedClass(content.path, content.total, content.childrenLimit);
-            $container.trigger('folderselect.'.concat(ns), [
-                content.label,
-                getPage(content.children),
-                content.path,
-                content
-            ]);
-            renderPagination();
+        if (content.permissions && content.permissions.read && !options.hasAlreadySelected) {
+            if (initialPath && initialPath !== rootPath) {
+                openInitialPath(initialPath);
+            } else {
+                selectFolder(content, content.path);
+                syncTreeActiveFolder(content.path || rootPath);
+            }
 
             if (root !== 'local') {
                 options.hasAlreadySelected = true;
             }
+        } else if (showInitialListLoading) {
+            setFilesLoading(false);
         }
     });
 
@@ -77,9 +206,17 @@ export default function (options) {
     $divContainer.off('click', '.folders a').on('click', '.folders a', function (e) {
         e.preventDefault();
         const $selected = $(this);
-        const $folders = $('.folders li', $fileBrowser);
         const fullPath = $selected.data('path');
-        const subTree = getByPath(fileTree, fullPath);
+        const subTree = getByExactPath(fileTree, fullPath);
+        const openingFolder = !searchMode && fullPath !== selectedClass.path;
+
+        if (openingFolder) {
+            selectedClass.page = 1;
+        }
+        if (!searchMode) {
+            setFilesLoading(true);
+        }
+        invalidateFolderFiles(fullPath);
 
         //get the folder content
         getFolderContent(subTree, fullPath, function (content) {
@@ -88,10 +225,12 @@ export default function (options) {
             if (content) {
                 //either create the inner list of the content is new or just show it
                 let $innerList = $selected.siblings('ul');
-                if (!$innerList.length && content.children && _.find(content.children, 'path') && !content.empty) {
+                const nested = hasNestedFolderChildren(content);
+                if (!$innerList.length && nested) {
                     $innerList = $('<ul></ul>').insertAfter($selected);
                     updateFolders(content, $innerList);
                     $selected.addClass('opened');
+                    setFolderToggleState($selected, true);
                 } else if ($innerList.length) {
                     if ($innerList.css('display') === 'none') {
                         $innerList.show();
@@ -100,68 +239,222 @@ export default function (options) {
                         $innerList.hide();
                         $selected.removeClass('opened');
                     }
+                } else if (nested === false) {
+                    // Leaf folder: keep alignment spacer, hide expand chevron.
+                    setFolderToggleState($selected, false);
                 }
 
-                //toggle active element
-                $folders.removeClass('active');
-                $selected.parent('li').addClass('active');
+                syncTreeActiveFolder(fullPath, $selected);
 
                 //internal event to set the file-selector content
-                updateSelectedClass(fullPath, content.total, content.childrenLimit);
-                $container.trigger(`folderselect.${ns}`, [
-                    content.label,
-                    getPage(content.children),
-                    content.path,
-                    content
-                ]);
-                renderPagination();
+                selectFolder(content, fullPath);
+            } else if (!searchMode) {
+                setFilesLoading(false);
             }
         });
     });
 
-    $container.on(`filenew.${ns}`, function (e, file, path) {
-        const subTree = getByPath(fileTree, path);
-        if (subTree) {
-            if (!subTree.children) {
-                subTree.children = [];
-            }
-            if (root !== 'local' || !_.find(subTree.children, { name: file.name })) {
-                updatePermissions(file);
-                const childrenFilesOnly = _.filter(subTree.children, function (child) {
-                    // Only file object has link property
-                    return Object.prototype.hasOwnProperty.call(child, 'link');
-                });
+    $container.on(`filenew.${NS}`, function (e, file, path) {
+        const targetPath = path || selectedClass.path;
+        if (!targetPath || searchMode) {
+            return;
+        }
 
-                if (childrenFilesOnly.length === subTree.total) {
-                    // all children loaded new file can be pushed to the end of tree
-                    // if not all, new file will be loaded with next page
-                    subTree.children.push(file);
-                }
-                subTree.total = Number.isFinite(Number(subTree.total)) ? Number(subTree.total) + 1 : 1;
-                if (selectedClass.path === path) {
-                    selectedClass.total = subTree.total;
-                }
-                $container.trigger(`folderselect.${ns}`, [subTree.label, getPage(subTree.children), path, subTree]);
-                renderPagination();
-            }
+        const activeRoot = $container.data('activeFileBrowserRoot');
+        if (activeRoot && activeRoot !== root) {
+            return;
+        }
+
+        const subTree = getByExactPath(fileTree, targetPath) || getByPath(fileTree, targetPath);
+        if (subTree && root === 'local' && file && file.name && _.find(subTree.children, { name: file.name })) {
+            return;
         }
+
+        if (targetPath !== selectedClass.path) {
+            selectedClass.path = targetPath;
+        }
+        selectedClass.page = 1;
+
+        invalidateFolderFiles(targetPath);
+        const pendingUpload =
+            file && !file.error && (file.uri || file.name) ? file : null;
+        reloadSortedFolder(pendingUpload ? [pendingUpload] : []);
     });
 
-    $container.on(`filedelete.${ns}`, function (e, path) {
-        if (removeFromPath(fileTree, path)) {
-            selectedClass.total--;
-            loadPage();
+    $container.on(`filedelete.${NS}`, function (e, path) {
+        if (searchMode) {
+            return;
         }
+
+        const activeRoot = $container.data('activeFileBrowserRoot');
+        if (activeRoot && activeRoot !== root) {
+            return;
+        }
+
+        if (path) {
+            removeFromPath(fileTree, path);
+        }
+
+        invalidateFolderFiles(selectedClass.path);
+        reloadSortedFolder();
     });
+
+    /**
+     * Open and select an initial folder path after the root tree is available.
+     * @param {String} path
+     */
+    function findFolderLink(path) {
+        return $folderContainer.find('a').filter(function () {
+            return $(this).data('path') === path;
+        });
+    }
+
+    /**
+     * Render directory children under an expanded folder anchor (replace / reopen).
+     * @param {String} parentPath
+     * @param {Object} parentContent
+     */
+    function mountFolderBranch(parentPath, parentContent) {
+        const $parentLink = findFolderLink(parentPath);
+        if (!$parentLink.length || !parentContent) {
+            return;
+        }
+        let $innerList = $parentLink.siblings('ul');
+        if (!$innerList.length) {
+            $innerList = $('<ul></ul>').insertAfter($parentLink);
+        }
+        updateFolders(parentContent, $innerList);
+        $parentLink.addClass('opened');
+        if ($innerList.css('display') === 'none') {
+            $innerList.show();
+        }
+        setFolderToggleState($parentLink, hasNestedFolderChildren(parentContent) !== false);
+    }
+
+    function markFolderActive(path) {
+        const $targetLink = findFolderLink(path);
+        if ($targetLink.length) {
+            $targetLink.parents('li').each(function () {
+                const $li = $(this);
+                const $anchor = $li.children('a');
+                const $list = $li.children('ul');
+                $anchor.addClass('opened');
+                if ($list.length) {
+                    $list.show();
+                }
+            });
+            syncTreeActiveFolder(path, $targetLink);
+        } else if (path === rootPath) {
+            syncTreeActiveFolder(rootPath);
+        }
+    }
+
+    function openInitialPath(path) {
+        getFolderContent(fileTree, path, function (content) {
+            indexTree(fileTree);
+            if (!content) {
+                const rootContent = getByPath(fileTree, rootPath) || fileTree;
+                const fallbackPath = rootContent.path || rootPath;
+                selectFolder(rootContent, fallbackPath);
+                syncTreeActiveFolder(fallbackPath);
+                return;
+            }
+
+            function finishOpen() {
+                markFolderActive(path);
+                selectFolder(content, path);
+            }
+
+            if (findFolderLink(path).length) {
+                finishOpen();
+                return;
+            }
+
+            const parentFolderPath = content.parentFolderPath;
+            if (parentFolderPath && parentFolderPath !== path) {
+                getFolderContent(fileTree, parentFolderPath, function (parentContent) {
+                    mountFolderBranch(parentFolderPath, parentContent);
+                    finishOpen();
+                });
+                return;
+            }
+
+            finishOpen();
+        });
+    }
+
+    /**
+     * Mark the folder row that matches path as active (open folder icon for leaves).
+     * @param {String} path
+     * @param {jQuery} [$link]
+     */
+    function syncTreeActiveFolder(path, $link) {
+        $('.folders li', $fileBrowser).removeClass('active');
+        const $target =
+            $link && $link.length
+                ? $link
+                : $folderContainer.find('a').filter(function () {
+                    return $(this).data('path') === path;
+                });
+        if ($target.length) {
+            $target.parent('li').addClass('active');
+        }
+    }
+
+    /**
+     * Whether this media source currently owns the file table.
+     * @returns {Boolean}
+     */
+    function isActiveBrowser() {
+        return $container.data('activeFileBrowserRoot') === root;
+    }
+
+    /**
+     * Select a folder and publish its page of files to the selector.
+     * @param {Object} content
+     * @param {String} path
+     */
+    function selectFolder(content, path) {
+        if (!content) {
+            return;
+        }
+        $container.data('activeFileBrowserRoot', root);
+        if (searchMode) {
+            $container.trigger(`folderpath.${NS}`, [path, content.label]);
+        $container.trigger(`folderselect.${NS}`, [
+            content.label,
+            getFilesForDisplay(content),
+            path,
+            content
+        ]);
+        return;
+    }
+        updateSelectedClass(path, content.total, content.childrenLimit);
+        $container.trigger(`folderpath.${NS}`, [path, content.label]);
+        $container.trigger(`folderselect.${NS}`, [
+            content.label,
+            getFilesForDisplay(content),
+            path,
+            content
+        ]);
+        renderPagination();
+        if (!searchMode) {
+            setFilesLoading(false);
+        }
+    }
+
     /**
      * Get files for page
      * @param {Array} children
      * @returns {Array} files for this page
      */
     function getPage(children) {
-        const files = _.filter(children, function (item) {
-            return !!item.uri;
-        });
+        const files = sortAssetItems(
+            _.filter(children, function (item) {
+                return !!item.uri;
+            }),
+            sort
+        );
         if (selectedClass.childrenLimit) {
             return files.slice(
                 (selectedClass.page - 1) * selectedClass.childrenLimit,
@@ -170,45 +463,295 @@ export default function (options) {
         }
         return files;
     }
+
+    /**
+     * Files for the table (split list payload or legacy children slice).
+     * @param {Object} content
+     * @returns {Array}
+     */
+    function getFilesForDisplay(content) {
+        if (!content) {
+            return [];
+        }
+        if (splitBrowse) {
+            return content.listItems || [];
+        }
+        return getPage(content.children || []);
+    }
+
+    function listCacheKey() {
+        return `${sort.field}:${sort.direction}:${selectedClass.page}`;
+    }
+
+    /**
+     * Snapshot list request identity (folder + page/sort) when a browse starts.
+     * @returns {{path: String, cacheKey: String}}
+     */
+    function captureListRequestContext() {
+        return {
+            path: selectedClass.path,
+            cacheKey: listCacheKey()
+        };
+    }
+
+    /**
+     * Whether navigation changed before an in-flight list response should apply.
+     * @param {{path: String, cacheKey: String}} captured
+     * @returns {Boolean}
+     */
+    function isListRequestStale(captured) {
+        return (
+            !captured ||
+            captured.path !== selectedClass.path ||
+            captured.cacheKey !== listCacheKey()
+        );
+    }
+
+    /**
+     * @param {Object} response
+     * @returns {Object}
+     */
+    function unwrapBrowseResponse(response) {
+        if (response && response.success === false) {
+            return Promise.reject(response);
+        }
+        let data = response && response.data ? response.data : response;
+        data = updatePermissions(data);
+        if (data.children && data.children.length > 0) {
+            data.children = data.children.map(function (child) {
+                return updatePermissions(child);
+            });
+        }
+        if (data.items && data.items.length > 0) {
+            data.items = data.items.map(function (item) {
+                return updatePermissions(item);
+            });
+        }
+        return data;
+    }
+
+    /**
+     * @param {String} path
+     * @param {Object} extraData
+     * @returns {Promise}
+     */
+    function browseRequest(path, extraData) {
+        const parameters = {};
+        parameters[options.pathParam || 'path'] = path;
+        return Promise.resolve(
+            $.ajax({
+                url: options.browseUrl,
+                method: 'GET',
+                dataType: 'json',
+                timeout: ajaxTimeoutMs,
+                data: _.merge(parameters, options.params, extraData)
+            })
+        ).then(unwrapBrowseResponse);
+    }
+
+    /**
+     * @param {Object} tree
+     * @param {String} path
+     * @param {Object} data
+     */
+    function applyTreePayload(tree, path, data) {
+        const folderData = Object.assign({}, data, { children: folderChildrenOnly(data) });
+        if (!tree.path) {
+            _.merge(tree, folderData);
+        } else if (folderData.children) {
+            setToPath(tree, path, folderData);
+            if (!_.find(folderData.children, 'path')) {
+                markFolderEmptyAtPath(tree, path);
+            }
+        } else {
+            setToPath(tree, path, folderData);
+            markFolderEmptyAtPath(tree, path);
+        }
+    }
+
+    /**
+     * @param {Object} tree
+     * @param {String} path
+     * @param {Object} listData
+     * @param {String} cacheKey
+     */
+    function applyListPayload(tree, path, listData, cacheKey) {
+        const node = getByExactPath(tree, path) || getByPath(tree, path);
+        if (!node || !listData) {
+            return;
+        }
+        node.listItems = listData.items || [];
+        node.total = listData.total;
+        node.childrenLimit = listData.pageSize || listData.childrenLimit || selectedClass.childrenLimit;
+        node.listPage = listData.page;
+        node.totalIsApproximate = listData.totalIsApproximate;
+        node.listCacheKey = cacheKey;
+    }
+
+    /**
+     * Ensure upload responses appear in the table before Elasticsearch catches up.
+     * @param {String} path
+     * @param {Array<Object>} uploads
+     */
+    function mergePendingUploads(path, uploads) {
+        if (!uploads || !uploads.length) {
+            return;
+        }
+        const node = getByExactPath(fileTree, path) || getByPath(fileTree, path);
+        if (!node) {
+            return;
+        }
+        if (!Array.isArray(node.listItems)) {
+            node.listItems = [];
+        }
+        let added = 0;
+        uploads.forEach(function (uploaded) {
+            if (!uploaded || uploaded.error) {
+                return;
+            }
+            const normalized = updatePermissions(uploaded);
+            if (!normalized.uri && !normalized.name) {
+                return;
+            }
+            const exists = _.some(node.listItems, function (item) {
+                return (
+                    (normalized.uri && item.uri === normalized.uri) ||
+                    (normalized.name && item.name === normalized.name)
+                );
+            });
+            if (exists) {
+                return;
+            }
+            node.listItems.push(normalized);
+            added++;
+        });
+        if (!added) {
+            return;
+        }
+        if (splitBrowse) {
+            node.listItems = sortAssetItems(node.listItems, sort);
+        }
+        const total = Number(node.total);
+        if (Number.isFinite(total) && total >= 0) {
+            node.total = total + added;
+        }
+    }
+
     /**
      * Get the content of a folder, either in the model or load it
      * @param {Object} tree - the tree model
      * @param {String} path - the folder path (relative to the root)
      * @param {Function} cb - called back with the content in 1st parameter
      */
+    function markFolderEmptyAtPath(tree, path) {
+        const node = getByExactPath(tree, path);
+        if (node) {
+            node.empty = true;
+        }
+    }
+
     function getFolderContent(tree, path, cb) {
+        if (splitBrowse) {
+            const existing = getByExactPath(tree, path) || getByPath(tree, path);
+            const needTree = !existing || (!existing.children && !existing.empty);
+            const cacheKey = listCacheKey();
+            const needList = !existing || existing.listCacheKey !== cacheKey;
+
+            const treePromise = needTree
+                ? (setTreeLoading(true),
+                browseRequest(path, {
+                    part: 'tree',
+                    depth: 1,
+                    sortBy: sort.field,
+                    sortDir: sort.direction
+                }).then(
+                    function (data) {
+                        setTreeLoading(false);
+                        return data;
+                    },
+                    function (error) {
+                        setTreeLoading(false);
+                        return Promise.reject(error);
+                    }
+                ))
+                : Promise.resolve(null);
+
+            const listPromise = needList
+                ? browseRequest(path, {
+                    part: 'list',
+                    page: selectedClass.page,
+                    pageSize: selectedClass.childrenLimit || 11,
+                    sortBy: sort.field,
+                    sortDir: sort.direction
+                })
+                : Promise.resolve(null);
+
+            Promise.all([treePromise, listPromise])
+                .then(function ([treeData, listData]) {
+                    if (treeData) {
+                        applyTreePayload(tree, path, treeData);
+                    }
+                    if (listData) {
+                        applyListPayload(tree, path, listData, cacheKey);
+                    }
+                    cb(getByExactPath(tree, path) || getByPath(tree, path));
+                })
+                .catch(function () {
+                    cb(null);
+                });
+            return;
+        }
+
         let content = getByPath(tree, path);
         if (!content || (!content.children && !content.empty)) {
             loadContent(path).then(function (data) {
                 if (!tree.path) {
                     tree = _.merge(tree, data);
                 } else if (data.children) {
+                    setToPath(tree, path, data);
                     if (!_.find(data.children, 'path')) {
                         // no subfolders inside folder
-                        tree.empty = true;
+                        markFolderEmptyAtPath(tree, path);
                     }
-                    setToPath(tree, path, data);
                 } else {
-                    tree.empty = true;
+                    setToPath(tree, path, data);
+                    markFolderEmptyAtPath(tree, path);
                 }
                 cb(data);
+            }).catch(function () {
+                cb(null);
             });
         } else if (content.children) {
             const files = _.filter(content.children, function (item) {
                 return !!item.uri;
             });
-            // if files less then total and need toload this page
-            if (files.length < selectedClass.total && files.length < selectedClass.page * selectedClass.childrenLimit) {
+            // Use folder total (not selectedClass): openInitialPath runs before selectFolder.
+            const expectedTotal = Number(content.total);
+            const pageSize = Number(content.childrenLimit) || selectedClass.childrenLimit || 11;
+            const page = selectedClass.page || 1;
+            // Missing/NaN total → unknown size; refetch so invalidated cache is not treated as complete.
+            if (
+                !Number.isFinite(expectedTotal) ||
+                (files.length < expectedTotal && files.length < page * pageSize)
+            ) {
                 loadContent(path).then(function (data) {
                     const loadedFiles = _.filter(data.children, function (item) {
                         return !!item.uri;
                     });
+                    const node = getByExactPath(tree, path);
+                    if (node && !Number.isFinite(expectedTotal)) {
+                        node.children = _.filter(node.children, function (item) {
+                            return !item.uri;
+                        });
+                    }
                     setToPath(tree, path, {
                         children: loadedFiles,
                         total: data.total,
                         childrenLimit: data.childrenLimit
                     });
-                    content = getByPath(tree, path);
+                    content = getByExactPath(tree, path) || getByPath(tree, path);
+                    cb(content);
+                }).catch(function () {
                     cb(content);
                 });
             } else {
@@ -257,6 +800,29 @@ export default function (options) {
         return match;
     }
 
+    /**
+     * Get a subtree by exact path equality.
+     * @param {Object} tree
+     * @param {String} path
+     * @returns {Object|undefined}
+     */
+    function getByExactPath(tree, path) {
+        let match;
+        if (tree) {
+            if (tree.path === path) {
+                match = tree;
+            } else if (tree.children) {
+                _.forEach(tree.children, function (child) {
+                    match = getByExactPath(child, path);
+                    if (match) {
+                        return false;
+                    }
+                });
+            }
+        }
+        return match;
+    }
+
     /**
      * Merge data into at into the subtree
      * @param {Object} tree - the tree model
@@ -300,8 +866,11 @@ export default function (options) {
                 return child.path === path || (child.name && tree.path + child.name === path) || child.uri === path;
             });
             done = removed.length > 0;
-            tree.total--;
-            if (!done) {
+            if (done) {
+                if (Number.isFinite(Number(tree.total))) {
+                    tree.total = Math.max(0, Number(tree.total) - removed.length);
+                }
+            } else {
                 _.forEach(tree.children, function (child) {
                     done = removeFromPath(child, path);
                     if (done) {
@@ -313,31 +882,141 @@ export default function (options) {
         return done;
     }
 
+    /**
+     * Drop cached file rows for a folder so the next load hits the service
+     * with the current sort. Nested folder nodes are kept.
+     * @param {String} path
+     */
+    function invalidateFolderFiles(path) {
+        const content = getByExactPath(fileTree, path);
+        if (!content) {
+            return;
+        }
+        if (splitBrowse) {
+            delete content.listItems;
+            delete content.listCacheKey;
+            delete content.listPage;
+            return;
+        }
+        if (Array.isArray(content.children)) {
+            content.children = content.children.filter(function (child) {
+                return child.path && !child.uri;
+            });
+        }
+    }
+
+    /**
+     * Replace a folder node with a freshly loaded payload (files + folders).
+     * @param {String} path
+     * @param {Object} data
+     */
+    function replaceFolderContent(path, data, cacheKey) {
+        const content = getByExactPath(fileTree, path);
+        if (!content || !data) {
+            return;
+        }
+        if (splitBrowse && Object.prototype.hasOwnProperty.call(data, 'items')) {
+            applyListPayload(fileTree, path, data, cacheKey || listCacheKey());
+            return;
+        }
+        if (Object.prototype.hasOwnProperty.call(data, 'children')) {
+            content.children = data.children;
+        } else {
+            content.children = [];
+            content.empty = true;
+            content.total = 0;
+        }
+        if (Object.prototype.hasOwnProperty.call(data, 'total')) {
+            content.total = data.total;
+        }
+        if (Object.prototype.hasOwnProperty.call(data, 'childrenLimit')) {
+            content.childrenLimit = data.childrenLimit;
+        }
+        if (data.label) {
+            content.label = data.label;
+        }
+        if (data.path) {
+            content.path = data.path;
+        }
+    }
+
     /**
      * Get the content of a folder
      * @param {String} path - the folder path
-     * @returns {jQuery.Deferred} the defferred object to run done/complete/fail
+     * @returns {Promise} resolves with folder content
      */
     function loadContent(path) {
         const parameters = {};
-        parameters[options.pathParam] = path;
-        return request({
-            url: options.browseUrl,
-            method: 'GET',
-            dataType: 'json',
-            data: _.merge(parameters, options.params, {
-                childrenOffset: (selectedClass.page - 1) * selectedClass.childrenLimit
-            }),
-            noToken: true
-        })
-            .then(response => response.data)
-            .then(response => {
-                response = updatePermissions(response);
-                if (response.children && response.children.length > 0) {
-                    response.children.map(responseChildren => updatePermissions(responseChildren));
+        parameters[options.pathParam || 'path'] = path;
+        setTreeLoading(true);
+        return Promise.resolve(
+            $.ajax({
+                url: options.browseUrl,
+                method: 'GET',
+                dataType: 'json',
+                timeout: ajaxTimeoutMs,
+                data: _.merge(parameters, options.params, {
+                    // depth=2 so each rendered child folder includes its own dir children,
+                    // allowing leaf folders to hide the expand chevron without an extra click.
+                    depth: 2,
+                    childrenOffset: (selectedClass.page - 1) * selectedClass.childrenLimit,
+                    sortBy: sort.field,
+                    sortDir: sort.direction
+                })
+            })
+        )
+            .then(function (response) {
+                if (response && response.success === false) {
+                    return Promise.reject(response);
                 }
-                return response;
-            });
+                let data = response && response.data ? response.data : response;
+                data = updatePermissions(data);
+                if (data.children && data.children.length > 0) {
+                    data.children.map(responseChildren => updatePermissions(responseChildren));
+                }
+                return data;
+            })
+            .then(
+                function (data) {
+                    setTreeLoading(false);
+                    return data;
+                },
+                function (error) {
+                    setTreeLoading(false);
+                    return Promise.reject(error);
+                }
+            );
+    }
+
+    /**
+     * Whether a folder node has nested directory children.
+     * @param {Object} node
+     * @returns {boolean|null} true/false when known; null when children were not loaded yet
+     */
+    function hasNestedFolderChildren(node) {
+        if (!node || node.empty === true) {
+            return false;
+        }
+        if (!Array.isArray(node.children)) {
+            return null;
+        }
+        return Boolean(_.find(node.children, 'path'));
+    }
+
+    /**
+     * Show or hide the expand chevron on a folder anchor (keep spacer width).
+     * @param {jQuery} $anchor
+     * @param {boolean} hasNested
+     */
+    function setFolderToggleState($anchor, hasNested) {
+        const $toggle = $anchor.children('.tree-toggle');
+        if (hasNested) {
+            $toggle.addClass('icon-right').removeClass('is-leaf');
+            $anchor.removeClass('is-leaf');
+        } else {
+            $toggle.removeClass('icon-right').addClass('is-leaf');
+            $anchor.removeClass('opened').addClass('is-leaf');
+        }
     }
 
     /**
@@ -351,7 +1030,10 @@ export default function (options) {
             if (typeof data.relPath === 'undefined') {
                 data.relPath = data.path;
             }
+            // Unknown nested state (lazy depth) keeps the chevron until the folder is opened.
+            data.showToggle = hasNestedFolderChildren(data) !== false;
             $parent.append(folderTpl(data));
+            return;
         }
         if (data && data.children && _.isArray(data.children) && !data.empty) {
             _.forEach(data.children, function (child) {
@@ -376,7 +1058,7 @@ export default function (options) {
             childrenLimit:
                 Number.isFinite(normalizedChildrenLimit) && normalizedChildrenLimit > 0
                     ? normalizedChildrenLimit
-                    : selectedClass.childrenLimit || 10,
+                    : selectedClass.childrenLimit || 11,
             page: 1
         };
     }
@@ -384,7 +1066,11 @@ export default function (options) {
      * Render pagination
      */
     function renderPagination() {
-        const $paginationContainer = $('.pagination-bottom', $container);
+        if (searchMode) {
+            // Drop browse pagination controls/handlers when search owns the table.
+            $paginationContainer.empty();
+            return;
+        }
         const total = Number(selectedClass.total);
         const childrenLimit = Number(selectedClass.childrenLimit);
 
@@ -413,19 +1099,113 @@ export default function (options) {
                 .render($paginationContainer);
         }
     }
+    /**
+     * Re-fetch the current folder with the active sort and publish files.
+     */
+    function reloadSortedFolder(pendingUploads) {
+        const listRequest = captureListRequestContext();
+        const path = listRequest.path;
+        if (!searchMode && isActiveBrowser()) {
+            setFilesLoading(true);
+        }
+        const loadPromise = splitBrowse
+            ? browseRequest(path, {
+                part: 'list',
+                page: selectedClass.page,
+                pageSize: selectedClass.childrenLimit || 11,
+                sortBy: sort.field,
+                sortDir: sort.direction
+            })
+            : loadContent(path);
+
+        loadPromise
+            .then(function (data) {
+                if (!data) {
+                    setFilesLoading(false);
+                    return;
+                }
+                if (isListRequestStale(listRequest)) {
+                    setFilesLoading(false);
+                    return;
+                }
+                replaceFolderContent(path, data, listRequest.cacheKey);
+                mergePendingUploads(path, pendingUploads);
+                const content = getByExactPath(fileTree, path) || data;
+                selectFolder(content, content.path || path);
+            })
+            .catch(function (error) {
+                LOGGER.error(error);
+                setFilesLoading(false);
+            });
+    }
+
     /**
      * Load page
      */
     function loadPage() {
-        const subTree = getByPath(fileTree, selectedClass.path);
+        const listRequest = captureListRequestContext();
+
+        if (!searchMode && isActiveBrowser()) {
+            setFilesLoading(true);
+        }
+
+        if (splitBrowse) {
+            const path = listRequest.path;
+            browseRequest(path, {
+                part: 'list',
+                page: selectedClass.page,
+                pageSize: selectedClass.childrenLimit || 11,
+                sortBy: sort.field,
+                sortDir: sort.direction
+            })
+                .then(function (data) {
+                    if (isListRequestStale(listRequest)) {
+                        setFilesLoading(false);
+                        return;
+                    }
+                    applyListPayload(fileTree, path, data, listRequest.cacheKey);
+                    const content = getByExactPath(fileTree, path);
+                    if (content) {
+                        $container.trigger(`folderselect.${NS}`, [
+                            content.label,
+                            getFilesForDisplay(content),
+                            content.path,
+                            content
+                        ]);
+                        renderPagination();
+                    }
+                    setFilesLoading(false);
+                })
+                .catch(function (error) {
+                    LOGGER.error(error);
+                    setFilesLoading(false);
+                });
+            return;
+        }
+
+        const subTree = getByPath(fileTree, selectedClass.path) || fileTree;
 
         //get the folder content
         getFolderContent(subTree, selectedClass.path, function (content) {
+            if (isListRequestStale(listRequest)) {
+                if (!searchMode) {
+                    setFilesLoading(false);
+                }
+                return;
+            }
             indexTree(fileTree);
 
             if (content) {
                 //internal event to set the file-selector content
-                $container.trigger(`folderselect.${ns}`, [content.label, getPage(content.children), content.path]);
+                $container.trigger(`folderselect.${NS}`, [
+                    content.label,
+                    getFilesForDisplay(content),
+                    content.path,
+                    content
+                ]);
+            }
+            if (!searchMode) {
+                setFilesLoading(false);
             }
         });
     }