@webiny/app-file-manager 6.3.0 → 6.4.0-beta.0

package/presentation/FileList/components/Grid/FileGrid.test.js

@@ -0,0 +1,387 @@
+import { describe, expect, it, vi } from "vitest";
+import { observable } from "mobx";
+function createMockFile(overrides = {}) {
+    return {
+        id: "file-1",
+        name: "photo.jpg",
+        key: "files/photo.jpg",
+        src: "https://cdn.example.com/files/photo.jpg",
+        type: "image/jpeg",
+        size: 1024,
+        metadata: {},
+        tags: [],
+        createdOn: "2025-01-01T00:00:00Z",
+        savedOn: "2025-01-02T00:00:00Z",
+        createdBy: {
+            id: "user-1",
+            displayName: "Alice",
+            type: "admin"
+        },
+        savedBy: {
+            id: "user-1",
+            displayName: "Alice",
+            type: "admin"
+        },
+        location: {
+            folderId: "root"
+        },
+        ...overrides
+    };
+}
+const emptyIdentity = {
+    id: "",
+    displayName: "",
+    type: ""
+};
+function createMockFolderDto(overrides = {}) {
+    return {
+        id: "folder-1",
+        title: "Documents",
+        slug: "documents",
+        type: "",
+        parentId: null,
+        path: "",
+        permissions: [],
+        hasNonInheritedPermissions: false,
+        canManagePermissions: false,
+        canManageStructure: true,
+        canManageContent: false,
+        createdBy: emptyIdentity,
+        createdOn: "",
+        savedBy: emptyIdentity,
+        savedOn: "",
+        modifiedBy: null,
+        modifiedOn: null,
+        extensions: {},
+        ...overrides
+    };
+}
+function createMockPresenter(vmOverrides = {}) {
+    const defaultVm = observable({
+        fileModel: null,
+        list: {
+            rows: [],
+            sort: null,
+            filters: {},
+            search: "",
+            appliedQuery: null,
+            pagination: {
+                hasMore: false,
+                loading: false,
+                loadingMore: false,
+                totalCount: 0,
+                currentCount: 0
+            },
+            selection: {
+                selectedIds: new Set(),
+                selectedCount: 0,
+                allSelected: false
+            },
+            empty: true,
+            emptyWithFilters: false,
+            error: null
+        },
+        folders: {
+            folders: [],
+            tree: [],
+            currentFolderId: null,
+            currentFolder: null,
+            loading: false,
+            operation: {
+                active: false,
+                mode: null
+            },
+            isRootFolder: true,
+            currentFolderTitle: "All Files",
+            childFolders: [],
+            loadingNodeIds: []
+        },
+        permissions: {
+            canRead: true,
+            canCreate: true,
+            canEdit: true,
+            canDelete: true,
+            canEditFile: ()=>true,
+            canDeleteFile: ()=>true
+        },
+        upload: {
+            jobs: [],
+            overallProgress: {
+                percentage: 0,
+                bytesSent: 0,
+                totalBytes: 0
+            },
+            isUploading: false
+        },
+        tags: [],
+        showFolders: true,
+        viewMode: "grid",
+        dragging: false,
+        showingFilters: false,
+        isOverlay: false,
+        accept: [],
+        multiple: false,
+        scope: void 0,
+        fileDetails: null,
+        ...vmOverrides
+    });
+    return {
+        vm: defaultVm,
+        actions: {
+            search: {
+                set: vi.fn(),
+                clear: vi.fn()
+            },
+            sort: {
+                set: vi.fn(),
+                toggle: vi.fn()
+            },
+            filter: {
+                set: vi.fn(),
+                clear: vi.fn(),
+                clearAll: vi.fn()
+            },
+            selection: {
+                toggle: vi.fn(),
+                selectRangeTo: vi.fn(),
+                selectAll: vi.fn(),
+                deselectAll: vi.fn(),
+                selectRows: vi.fn(),
+                isSelected: vi.fn().mockReturnValue(false)
+            },
+            loadMore: vi.fn().mockResolvedValue(void 0),
+            refresh: vi.fn().mockResolvedValue(void 0),
+            upload: vi.fn().mockResolvedValue(void 0),
+            setViewMode: vi.fn(),
+            showFileDetails: vi.fn(),
+            hideFileDetails: vi.fn(),
+            setDragging: vi.fn(),
+            showFilters: vi.fn(),
+            hideFilters: vi.fn(),
+            folders: {
+                selectFolder: vi.fn(),
+                createFolder: vi.fn(),
+                editFolder: vi.fn(),
+                deleteFolder: vi.fn().mockResolvedValue(void 0),
+                moveFolder: vi.fn().mockResolvedValue(void 0),
+                loadChildFolders: vi.fn().mockResolvedValue(void 0),
+                canManageStructure: vi.fn().mockReturnValue(true),
+                getAncestorIds: vi.fn().mockReturnValue([]),
+                submitOperation: vi.fn().mockResolvedValue(true),
+                cancelOperation: vi.fn()
+            }
+        },
+        init: vi.fn(),
+        dispose: vi.fn()
+    };
+}
+describe("FileGrid — child folder resolution", ()=>{
+    it("should use vm.folders.childFolders when no current folder is selected", ()=>{
+        const childFolders = [
+            createMockFolderDto({
+                id: "f1",
+                title: "Docs"
+            }),
+            createMockFolderDto({
+                id: "f2",
+                title: "Photos"
+            })
+        ];
+        const presenter = createMockPresenter({
+            folders: observable({
+                folders: childFolders,
+                tree: [],
+                currentFolderId: null,
+                currentFolder: null,
+                loading: false,
+                operation: {
+                    active: false,
+                    mode: null
+                },
+                isRootFolder: true,
+                currentFolderTitle: "All Files",
+                childFolders,
+                loadingNodeIds: []
+            })
+        });
+        expect(presenter.vm.folders.childFolders).toHaveLength(2);
+        expect(presenter.vm.folders.childFolders[0].id).toBe("f1");
+        expect(presenter.vm.folders.childFolders[1].id).toBe("f2");
+    });
+    it("should expose child folders via vm.folders.childFolders when a folder is selected", ()=>{
+        const childA = createMockFolderDto({
+            id: "child-a",
+            title: "Sub A"
+        });
+        const childB = createMockFolderDto({
+            id: "child-b",
+            title: "Sub B"
+        });
+        const presenter = createMockPresenter({
+            folders: observable({
+                folders: [],
+                tree: [],
+                currentFolderId: "parent",
+                currentFolder: null,
+                loading: false,
+                operation: {
+                    active: false,
+                    mode: null
+                },
+                isRootFolder: false,
+                currentFolderTitle: "Parent",
+                childFolders: [
+                    childA,
+                    childB
+                ],
+                loadingNodeIds: []
+            })
+        });
+        expect(presenter.vm.folders.childFolders).toHaveLength(2);
+        expect(presenter.vm.folders.childFolders[0].id).toBe("child-a");
+        expect(presenter.vm.folders.childFolders[1].id).toBe("child-b");
+    });
+    it("should return empty childFolders when current folder has no children", ()=>{
+        const presenter = createMockPresenter({
+            folders: observable({
+                folders: [],
+                tree: [],
+                currentFolderId: "leaf",
+                currentFolder: null,
+                loading: false,
+                operation: {
+                    active: false,
+                    mode: null
+                },
+                isRootFolder: false,
+                currentFolderTitle: "Leaf",
+                childFolders: [],
+                loadingNodeIds: []
+            })
+        });
+        expect(presenter.vm.folders.childFolders).toHaveLength(0);
+    });
+});
+describe("FileGrid — selection action wiring", ()=>{
+    it("should call actions.selection.toggle with file id on file click", ()=>{
+        const presenter = createMockPresenter();
+        const fileId = "file-1";
+        presenter.actions.selection.toggle(fileId);
+        expect(presenter.actions.selection.toggle).toHaveBeenCalledWith("file-1");
+    });
+    it("should call actions.selection.deselectAll on background click", ()=>{
+        const presenter = createMockPresenter();
+        presenter.actions.selection.deselectAll();
+        expect(presenter.actions.selection.deselectAll).toHaveBeenCalled();
+    });
+    it("should correctly determine selected state from vm.list.selection.selectedIds", ()=>{
+        const file1 = createMockFile({
+            id: "file-1"
+        });
+        const file2 = createMockFile({
+            id: "file-2",
+            name: "doc.pdf"
+        });
+        const presenter = createMockPresenter({
+            list: observable({
+                rows: [
+                    file1,
+                    file2
+                ],
+                sort: null,
+                filters: {},
+                search: "",
+                pagination: {
+                    hasMore: false,
+                    loading: false,
+                    loadingMore: false,
+                    totalCount: 2,
+                    currentCount: 2
+                },
+                selection: {
+                    selectedIds: new Set([
+                        "file-1"
+                    ]),
+                    selectedCount: 1,
+                    allSelected: false
+                },
+                empty: false,
+                emptyWithFilters: false,
+                appliedQuery: null,
+                error: null
+            })
+        });
+        expect(presenter.vm.list.selection.selectedIds.has("file-1")).toBe(true);
+        expect(presenter.vm.list.selection.selectedIds.has("file-2")).toBe(false);
+    });
+});
+describe("FileGrid — folder navigation wiring", ()=>{
+    it("should call actions.filter.set with folderId on folder card click", ()=>{
+        const presenter = createMockPresenter();
+        const folderId = "folder-1";
+        presenter.actions.filter.set("folderId", folderId);
+        expect(presenter.actions.filter.set).toHaveBeenCalledWith("folderId", "folder-1");
+    });
+});
+describe("FileGrid — loading state", ()=>{
+    it("should show loading state when loading with no rows", ()=>{
+        const presenter = createMockPresenter({
+            list: observable({
+                rows: [],
+                sort: null,
+                filters: {},
+                search: "",
+                pagination: {
+                    hasMore: false,
+                    loading: true,
+                    loadingMore: false,
+                    totalCount: 0,
+                    currentCount: 0
+                },
+                selection: {
+                    selectedIds: new Set(),
+                    selectedCount: 0,
+                    allSelected: false
+                },
+                empty: true,
+                emptyWithFilters: false,
+                appliedQuery: null,
+                error: null
+            })
+        });
+        const showLoader = presenter.vm.list.pagination.loading && 0 === presenter.vm.list.rows.length;
+        expect(showLoader).toBe(true);
+    });
+    it("should not show loading state when loading with existing rows", ()=>{
+        const presenter = createMockPresenter({
+            list: observable({
+                rows: [
+                    createMockFile()
+                ],
+                sort: null,
+                filters: {},
+                search: "",
+                pagination: {
+                    hasMore: false,
+                    loading: true,
+                    loadingMore: false,
+                    totalCount: 1,
+                    currentCount: 1
+                },
+                selection: {
+                    selectedIds: new Set(),
+                    selectedCount: 0,
+                    allSelected: false
+                },
+                empty: false,
+                emptyWithFilters: false,
+                appliedQuery: null,
+                error: null
+            })
+        });
+        const showLoader = presenter.vm.list.pagination.loading && 0 === presenter.vm.list.rows.length;
+        expect(showLoader).toBe(false);
+    });
+});
+
+//# sourceMappingURL=FileGrid.test.js.map

package/presentation/FileList/components/Grid/FileGrid.test.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"presentation/FileList/components/Grid/FileGrid.test.js","sources":["../../../../../src/presentation/FileList/components/Grid/FileGrid.test.ts"],"sourcesContent":["// @vitest-environment jsdom\nimport { describe, it, expect, vi } from \"vitest\";\nimport { observable } from \"mobx\";\nimport type { IFileManagerPresenter, IFileManagerViewModel } from \"../../abstractions.js\";\nimport type { FolderDto } from \"@webiny/app-aco\";\nimport type { FmFile } from \"~/features/shared/types.js\";\n\n// ---------------------------------------------------------------------------\n// Mock factories.\n// ---------------------------------------------------------------------------\n\nfunction createMockFile(overrides: Partial<FmFile> = {}): FmFile {\n    return {\n        id: \"file-1\",\n        name: \"photo.jpg\",\n        key: \"files/photo.jpg\",\n        src: \"https://cdn.example.com/files/photo.jpg\",\n        type: \"image/jpeg\",\n        size: 1024,\n        metadata: {},\n        tags: [],\n        createdOn: \"2025-01-01T00:00:00Z\",\n        savedOn: \"2025-01-02T00:00:00Z\",\n        createdBy: { id: \"user-1\", displayName: \"Alice\", type: \"admin\" },\n        savedBy: { id: \"user-1\", displayName: \"Alice\", type: \"admin\" },\n        location: { folderId: \"root\" },\n        ...overrides\n    };\n}\n\nconst emptyIdentity = { id: \"\", displayName: \"\", type: \"\" };\n\nfunction createMockFolderDto(overrides: Partial<FolderDto> = {}): FolderDto {\n    return {\n        id: \"folder-1\",\n        title: \"Documents\",\n        slug: \"documents\",\n        type: \"\",\n        parentId: null,\n        path: \"\",\n        permissions: [],\n        hasNonInheritedPermissions: false,\n        canManagePermissions: false,\n        canManageStructure: true,\n        canManageContent: false,\n        createdBy: emptyIdentity,\n        createdOn: \"\",\n        savedBy: emptyIdentity,\n        savedOn: \"\",\n        modifiedBy: null,\n        modifiedOn: null,\n        extensions: {},\n        ...overrides\n    };\n}\n\nfunction createMockPresenter(\n    vmOverrides: Partial<IFileManagerViewModel> = {}\n): IFileManagerPresenter {\n    const defaultVm: IFileManagerViewModel = observable({\n        fileModel: null,\n        list: {\n            rows: [],\n            sort: null,\n            filters: {},\n            search: \"\",\n            appliedQuery: null,\n            pagination: {\n                hasMore: false,\n                loading: false,\n                loadingMore: false,\n                totalCount: 0,\n                currentCount: 0\n            },\n            selection: {\n                selectedIds: new Set<string>(),\n                selectedCount: 0,\n                allSelected: false\n            },\n            empty: true,\n            emptyWithFilters: false,\n            error: null\n        },\n        folders: {\n            folders: [],\n            tree: [],\n            currentFolderId: null,\n            currentFolder: null,\n            loading: false,\n            operation: { active: false, mode: null },\n            isRootFolder: true,\n            currentFolderTitle: \"All Files\",\n            childFolders: [],\n            loadingNodeIds: []\n        },\n        permissions: {\n            canRead: true,\n            canCreate: true,\n            canEdit: true,\n            canDelete: true,\n            canEditFile: () => true,\n            canDeleteFile: () => true\n        },\n        upload: {\n            jobs: [],\n            overallProgress: { percentage: 0, bytesSent: 0, totalBytes: 0 },\n            isUploading: false\n        },\n        tags: [],\n        showFolders: true,\n        viewMode: \"grid\" as const,\n        dragging: false,\n        showingFilters: false,\n        isOverlay: false,\n        accept: [],\n        multiple: false,\n        scope: undefined,\n        fileDetails: null,\n        ...vmOverrides\n    });\n\n    return {\n        vm: defaultVm,\n        actions: {\n            search: { set: vi.fn(), clear: vi.fn() },\n            sort: { set: vi.fn(), toggle: vi.fn() },\n            filter: { set: vi.fn(), clear: vi.fn(), clearAll: vi.fn() },\n            selection: {\n                toggle: vi.fn(),\n                selectRangeTo: vi.fn(),\n                selectAll: vi.fn(),\n                deselectAll: vi.fn(),\n                selectRows: vi.fn(),\n                isSelected: vi.fn().mockReturnValue(false)\n            },\n            loadMore: vi.fn().mockResolvedValue(undefined),\n            refresh: vi.fn().mockResolvedValue(undefined),\n            upload: vi.fn().mockResolvedValue(undefined),\n            setViewMode: vi.fn(),\n            showFileDetails: vi.fn(),\n            hideFileDetails: vi.fn(),\n            setDragging: vi.fn(),\n            showFilters: vi.fn(),\n            hideFilters: vi.fn(),\n            folders: {\n                selectFolder: vi.fn(),\n                createFolder: vi.fn(),\n                editFolder: vi.fn(),\n                deleteFolder: vi.fn().mockResolvedValue(undefined),\n                moveFolder: vi.fn().mockResolvedValue(undefined),\n                loadChildFolders: vi.fn().mockResolvedValue(undefined),\n                canManageStructure: vi.fn().mockReturnValue(true),\n                getAncestorIds: vi.fn().mockReturnValue([]),\n                submitOperation: vi.fn().mockResolvedValue(true),\n                cancelOperation: vi.fn()\n            }\n        },\n        init: vi.fn(),\n        dispose: vi.fn()\n    };\n}\n\n// ---------------------------------------------------------------------------\n// Tests — Grid data composition logic.\n// ---------------------------------------------------------------------------\n\ndescribe(\"FileGrid — child folder resolution\", () => {\n    it(\"should use vm.folders.childFolders when no current folder is selected\", () => {\n        const childFolders = [\n            createMockFolderDto({ id: \"f1\", title: \"Docs\" }),\n            createMockFolderDto({ id: \"f2\", title: \"Photos\" })\n        ];\n        const presenter = createMockPresenter({\n            folders: observable({\n                folders: childFolders,\n                tree: [],\n                currentFolderId: null,\n                currentFolder: null,\n                loading: false,\n                operation: { active: false, mode: null },\n                isRootFolder: true,\n                currentFolderTitle: \"All Files\",\n                childFolders,\n                loadingNodeIds: []\n            })\n        });\n\n        expect(presenter.vm.folders.childFolders).toHaveLength(2);\n        expect(presenter.vm.folders.childFolders[0].id).toBe(\"f1\");\n        expect(presenter.vm.folders.childFolders[1].id).toBe(\"f2\");\n    });\n\n    it(\"should expose child folders via vm.folders.childFolders when a folder is selected\", () => {\n        const childA = createMockFolderDto({ id: \"child-a\", title: \"Sub A\" });\n        const childB = createMockFolderDto({ id: \"child-b\", title: \"Sub B\" });\n\n        const presenter = createMockPresenter({\n            folders: observable({\n                folders: [],\n                tree: [],\n                currentFolderId: \"parent\",\n                currentFolder: null,\n                loading: false,\n                operation: { active: false, mode: null },\n                isRootFolder: false,\n                currentFolderTitle: \"Parent\",\n                childFolders: [childA, childB],\n                loadingNodeIds: []\n            })\n        });\n\n        expect(presenter.vm.folders.childFolders).toHaveLength(2);\n        expect(presenter.vm.folders.childFolders[0].id).toBe(\"child-a\");\n        expect(presenter.vm.folders.childFolders[1].id).toBe(\"child-b\");\n    });\n\n    it(\"should return empty childFolders when current folder has no children\", () => {\n        const presenter = createMockPresenter({\n            folders: observable({\n                folders: [],\n                tree: [],\n                currentFolderId: \"leaf\",\n                currentFolder: null,\n                loading: false,\n                operation: { active: false, mode: null },\n                isRootFolder: false,\n                currentFolderTitle: \"Leaf\",\n                childFolders: [],\n                loadingNodeIds: []\n            })\n        });\n\n        expect(presenter.vm.folders.childFolders).toHaveLength(0);\n    });\n});\n\ndescribe(\"FileGrid — selection action wiring\", () => {\n    it(\"should call actions.selection.toggle with file id on file click\", () => {\n        const presenter = createMockPresenter();\n\n        // Simulate what the component does when a file card is clicked.\n        const fileId = \"file-1\";\n        presenter.actions.selection.toggle(fileId);\n\n        expect(presenter.actions.selection.toggle).toHaveBeenCalledWith(\"file-1\");\n    });\n\n    it(\"should call actions.selection.deselectAll on background click\", () => {\n        const presenter = createMockPresenter();\n\n        // Simulate background click handler.\n        presenter.actions.selection.deselectAll();\n\n        expect(presenter.actions.selection.deselectAll).toHaveBeenCalled();\n    });\n\n    it(\"should correctly determine selected state from vm.list.selection.selectedIds\", () => {\n        const file1 = createMockFile({ id: \"file-1\" });\n        const file2 = createMockFile({ id: \"file-2\", name: \"doc.pdf\" });\n\n        const presenter = createMockPresenter({\n            list: observable({\n                rows: [file1, file2],\n                sort: null,\n                filters: {},\n                search: \"\",\n                pagination: {\n                    hasMore: false,\n                    loading: false,\n                    loadingMore: false,\n                    totalCount: 2,\n                    currentCount: 2\n                },\n                selection: {\n                    selectedIds: new Set<string>([\"file-1\"]),\n                    selectedCount: 1,\n                    allSelected: false\n                },\n                empty: false,\n                emptyWithFilters: false,\n                appliedQuery: null,\n                error: null\n            })\n        });\n\n        expect(presenter.vm.list.selection.selectedIds.has(\"file-1\")).toBe(true);\n        expect(presenter.vm.list.selection.selectedIds.has(\"file-2\")).toBe(false);\n    });\n});\n\ndescribe(\"FileGrid — folder navigation wiring\", () => {\n    it(\"should call actions.filter.set with folderId on folder card click\", () => {\n        const presenter = createMockPresenter();\n\n        // Simulate what the component does when a folder card is clicked.\n        const folderId = \"folder-1\";\n        presenter.actions.filter.set(\"folderId\", folderId);\n\n        expect(presenter.actions.filter.set).toHaveBeenCalledWith(\"folderId\", \"folder-1\");\n    });\n});\n\ndescribe(\"FileGrid — loading state\", () => {\n    it(\"should show loading state when loading with no rows\", () => {\n        const presenter = createMockPresenter({\n            list: observable({\n                rows: [],\n                sort: null,\n                filters: {},\n                search: \"\",\n                pagination: {\n                    hasMore: false,\n                    loading: true,\n                    loadingMore: false,\n                    totalCount: 0,\n                    currentCount: 0\n                },\n                selection: {\n                    selectedIds: new Set<string>(),\n                    selectedCount: 0,\n                    allSelected: false\n                },\n                empty: true,\n                emptyWithFilters: false,\n                appliedQuery: null,\n                error: null\n            })\n        });\n\n        // Replicate the component's loading check.\n        const showLoader =\n            presenter.vm.list.pagination.loading && presenter.vm.list.rows.length === 0;\n\n        expect(showLoader).toBe(true);\n    });\n\n    it(\"should not show loading state when loading with existing rows\", () => {\n        const presenter = createMockPresenter({\n            list: observable({\n                rows: [createMockFile()],\n                sort: null,\n                filters: {},\n                search: \"\",\n                pagination: {\n                    hasMore: false,\n                    loading: true,\n                    loadingMore: false,\n                    totalCount: 1,\n                    currentCount: 1\n                },\n                selection: {\n                    selectedIds: new Set<string>(),\n                    selectedCount: 0,\n                    allSelected: false\n                },\n                empty: false,\n                emptyWithFilters: false,\n                appliedQuery: null,\n                error: null\n            })\n        });\n\n        const showLoader =\n            presenter.vm.list.pagination.loading && presenter.vm.list.rows.length === 0;\n\n        expect(showLoader).toBe(false);\n    });\n});\n"],"names":["createMockFile","overrides","emptyIdentity","createMockFolderDto","createMockPresenter","vmOverrides","defaultVm","observable","Set","undefined","vi","describe","it","childFolders","presenter","expect","childA","childB","fileId","file1","file2","folderId","showLoader"],"mappings":"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"}

package/presentation/FileList/components/Grid/index.d.ts

@@ -0,0 +1 @@
+export { FileGrid } from "./FileGrid.js";

package/presentation/FileList/components/Grid/index.js

@@ -0,0 +1 @@
+export { FileGrid } from "./FileGrid.js";

package/presentation/FileList/components/Header/FileManagerHeader.d.ts

@@ -0,0 +1,7 @@
+import React from "react";
+export interface FileManagerHeaderProps {
+    browseFiles?: () => void;
+}
+export declare const FileManagerHeader: (({ browseFiles }: FileManagerHeaderProps) => React.JSX.Element) & {
+    displayName: string;
+};

package/presentation/FileList/components/Header/FileManagerHeader.js

@@ -0,0 +1,114 @@
+import react, { useMemo } from "react";
+import { observer } from "mobx-react-lite";
+import { Button, Heading, Icon, IconButton, Skeleton, Tooltip } from "@webiny/admin-ui";
+import { Filters, FiltersToggle, OptionsMenu } from "@webiny/app-admin";
+import { FolderProvider } from "@webiny/app-aco";
+import { ReactComponent } from "@webiny/icons/home.svg";
+import { ReactComponent as folder_svg_ReactComponent } from "@webiny/icons/folder.svg";
+import { ReactComponent as more_vert_svg_ReactComponent } from "@webiny/icons/more_vert.svg";
+import { ReactComponent as add_svg_ReactComponent } from "@webiny/icons/add.svg";
+import { ReactComponent as file_upload_svg_ReactComponent } from "@webiny/icons/file_upload.svg";
+import { ReactComponent as grid_on_svg_ReactComponent } from "@webiny/icons/grid_on.svg";
+import { ReactComponent as format_list_bulleted_svg_ReactComponent } from "@webiny/icons/format_list_bulleted.svg";
+import { i18n } from "@webiny/app/i18n/index.js";
+import { useFileManagerPresenter } from "../../FileManagerPresenterProvider.js";
+import { useFileManagerConfig } from "../../../config/FileManagerViewConfig.js";
+import { useOverlay } from "../../../FileManager/OverlayContext.js";
+import { SearchBar } from "../Search/SearchBar.js";
+const t = i18n.ns("app-file-manager/presentation/header");
+const FileManagerHeader_Title = observer(function() {
+    const { vm } = useFileManagerPresenter();
+    const { browser } = useFileManagerConfig();
+    const { currentFolder, isRootFolder, currentFolderTitle } = vm.folders;
+    const icon = useMemo(()=>isRootFolder ? /*#__PURE__*/ react.createElement(ReactComponent, null) : /*#__PURE__*/ react.createElement(folder_svg_ReactComponent, null), [
+        isRootFolder
+    ]);
+    if (!currentFolderTitle) return /*#__PURE__*/ react.createElement(Skeleton, {
+        size: "xl"
+    });
+    return /*#__PURE__*/ react.createElement("div", {
+        className: "flex gap-xs items-center"
+    }, /*#__PURE__*/ react.createElement("div", {
+        className: "flex gap-sm items-center truncate"
+    }, /*#__PURE__*/ react.createElement(Icon, {
+        icon: icon,
+        label: currentFolderTitle,
+        size: "md",
+        color: "neutral-strong"
+    }), /*#__PURE__*/ react.createElement(Heading, {
+        level: 4,
+        as: "h1",
+        className: "truncate"
+    }, currentFolderTitle)), currentFolder && /*#__PURE__*/ react.createElement(FolderProvider, {
+        folder: currentFolder
+    }, /*#__PURE__*/ react.createElement(OptionsMenu, {
+        actions: browser.folder.actions,
+        "data-testid": "folder.title.menu-action",
+        trigger: /*#__PURE__*/ react.createElement(IconButton, {
+            icon: /*#__PURE__*/ react.createElement(more_vert_svg_ReactComponent, null),
+            size: "sm",
+            iconSize: "lg",
+            variant: "ghost",
+            disabled: isRootFolder
+        })
+    })));
+});
+const FileManagerHeader_FileManagerHeader = observer(function({ browseFiles }) {
+    const { vm, actions } = useFileManagerPresenter();
+    const { browser } = useFileManagerConfig();
+    const overlay = useOverlay();
+    const applyFilters = (data)=>{
+        if (!Object.keys(data).length) return;
+        const convertedFilters = browser.filtersToWhere.reduce((current, converter)=>converter(current), data);
+        for (const [key, value] of Object.entries(convertedFilters))if (null == value || "" === value) actions.filter.clear(key);
+        else actions.filter.set(key, value);
+    };
+    return /*#__PURE__*/ react.createElement("div", {
+        "data-testid": "fm-header"
+    }, /*#__PURE__*/ react.createElement("div", {
+        className: "pl-lg pr-md py-sm-extra flex items-center justify-between"
+    }, /*#__PURE__*/ react.createElement(FileManagerHeader_Title, null)), /*#__PURE__*/ react.createElement("div", {
+        className: "px-md py-xs flex items-center gap-sm"
+    }, /*#__PURE__*/ react.createElement(SearchBar, null), /*#__PURE__*/ react.createElement(FiltersToggle, {
+        onFiltersToggle: ()=>vm.showingFilters ? actions.hideFilters() : actions.showFilters(),
+        showingFilters: vm.showingFilters,
+        "data-testid": "fm.list-entries.toggle-filters"
+    }), /*#__PURE__*/ react.createElement(Tooltip, {
+        side: "bottom",
+        content: "table" === vm.viewMode ? t`Switch to Grid` : t`Switch to Table`,
+        trigger: /*#__PURE__*/ react.createElement(IconButton, {
+            variant: "ghost",
+            size: "md",
+            icon: "table" === vm.viewMode ? /*#__PURE__*/ react.createElement(grid_on_svg_ReactComponent, null) : /*#__PURE__*/ react.createElement(format_list_bulleted_svg_ReactComponent, null),
+            onClick: ()=>actions.setViewMode("table" === vm.viewMode ? "grid" : "table"),
+            "data-testid": "fm-header-layout-switch"
+        })
+    }), vm.permissions.canCreate && /*#__PURE__*/ react.createElement(Button, {
+        variant: "secondary",
+        size: "md",
+        onClick: ()=>actions.folders.createFolder(vm.folders.currentFolderId ?? void 0),
+        text: t`New Folder`,
+        icon: /*#__PURE__*/ react.createElement(add_svg_ReactComponent, null),
+        "data-testid": "fm-header-new-folder-button"
+    }), overlay?.multiple && vm.list.selection.selectedCount > 0 ? /*#__PURE__*/ react.createElement(Button, {
+        onClick: ()=>overlay.confirmSelection(),
+        size: "md",
+        text: t`Select ({count})`({
+            count: vm.list.selection.selectedCount
+        }),
+        "data-testid": "fm-header-select-button"
+    }) : browseFiles && vm.permissions.canCreate && /*#__PURE__*/ react.createElement(Button, {
+        onClick: browseFiles,
+        size: "md",
+        text: t`Upload`,
+        icon: /*#__PURE__*/ react.createElement(file_upload_svg_ReactComponent, null),
+        "data-testid": "fm-header-upload-button"
+    })), /*#__PURE__*/ react.createElement(Filters, {
+        filters: browser.filters,
+        show: vm.showingFilters,
+        onChange: applyFilters
+    }));
+});
+export { FileManagerHeader_FileManagerHeader as FileManagerHeader };
+
+//# sourceMappingURL=FileManagerHeader.js.map

package/presentation/FileList/components/Header/FileManagerHeader.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"presentation/FileList/components/Header/FileManagerHeader.js","sources":["../../../../../src/presentation/FileList/components/Header/FileManagerHeader.tsx"],"sourcesContent":["import React, { useMemo } from \"react\";\nimport { observer } from \"mobx-react-lite\";\nimport { Button, Heading, Icon, IconButton, Skeleton, Tooltip } from \"@webiny/admin-ui\";\nimport { Filters, type FiltersOnSubmit, FiltersToggle, OptionsMenu } from \"@webiny/app-admin\";\nimport { FolderProvider } from \"@webiny/app-aco\";\nimport { ReactComponent as HomeIcon } from \"@webiny/icons/home.svg\";\nimport { ReactComponent as FolderIcon } from \"@webiny/icons/folder.svg\";\nimport { ReactComponent as MoreVerticalIcon } from \"@webiny/icons/more_vert.svg\";\nimport { ReactComponent as AddIcon } from \"@webiny/icons/add.svg\";\nimport { ReactComponent as FileUploadIcon } from \"@webiny/icons/file_upload.svg\";\nimport { ReactComponent as GridIcon } from \"@webiny/icons/grid_on.svg\";\nimport { ReactComponent as TableIcon } from \"@webiny/icons/format_list_bulleted.svg\";\nimport { i18n } from \"@webiny/app/i18n/index.js\";\nimport { useFileManagerPresenter } from \"../../FileManagerPresenterProvider.js\";\nimport { useFileManagerConfig } from \"~/presentation/config/FileManagerViewConfig.js\";\nimport { useOverlay } from \"~/presentation/FileManager/OverlayContext.js\";\nimport { SearchBar } from \"../Search/SearchBar.js\";\n\nconst t = i18n.ns(\"app-file-manager/presentation/header\");\n\nconst Title = observer(function Title() {\n    const { vm } = useFileManagerPresenter();\n    const { browser } = useFileManagerConfig();\n    const { currentFolder, isRootFolder, currentFolderTitle } = vm.folders;\n\n    const icon = useMemo(() => {\n        return isRootFolder ? <HomeIcon /> : <FolderIcon />;\n    }, [isRootFolder]);\n\n    if (!currentFolderTitle) {\n        return <Skeleton size={\"xl\"} />;\n    }\n\n    return (\n        <div className={\"flex gap-xs items-center\"}>\n            <div className={\"flex gap-sm items-center truncate\"}>\n                <Icon icon={icon} label={currentFolderTitle} size={\"md\"} color={\"neutral-strong\"} />\n                <Heading level={4} as={\"h1\"} className={\"truncate\"}>\n                    {currentFolderTitle}\n                </Heading>\n            </div>\n            {currentFolder && (\n                <FolderProvider folder={currentFolder}>\n                    <OptionsMenu\n                        actions={browser.folder.actions}\n                        data-testid={\"folder.title.menu-action\"}\n                        trigger={\n                            <IconButton\n                                icon={<MoreVerticalIcon />}\n                                size={\"sm\"}\n                                iconSize={\"lg\"}\n                                variant={\"ghost\"}\n                                disabled={isRootFolder}\n                            />\n                        }\n                    />\n                </FolderProvider>\n            )}\n        </div>\n    );\n});\n\nexport interface FileManagerHeaderProps {\n    browseFiles?: () => void;\n}\n\nexport const FileManagerHeader = observer(function FileManagerHeader({\n    browseFiles\n}: FileManagerHeaderProps) {\n    const { vm, actions } = useFileManagerPresenter();\n    const { browser } = useFileManagerConfig();\n    const overlay = useOverlay();\n\n    const applyFilters: FiltersOnSubmit = data => {\n        if (!Object.keys(data).length) {\n            return;\n        }\n\n        const convertedFilters = browser.filtersToWhere.reduce(\n            (\n                current: Record<string, unknown>,\n                converter: (d: Record<string, unknown>) => Record<string, unknown>\n            ) => converter(current),\n            data as Record<string, unknown>\n        );\n\n        for (const [key, value] of Object.entries(convertedFilters)) {\n            if (value === undefined || value === null || value === \"\") {\n                actions.filter.clear(key);\n            } else {\n                actions.filter.set(key, value);\n            }\n        }\n    };\n\n    return (\n        <div data-testid={\"fm-header\"}>\n            <div className={\"pl-lg pr-md py-sm-extra flex items-center justify-between\"}>\n                <Title />\n            </div>\n            <div className={\"px-md py-xs flex items-center gap-sm\"}>\n                <SearchBar />\n                <FiltersToggle\n                    onFiltersToggle={() =>\n                        vm.showingFilters ? actions.hideFilters() : actions.showFilters()\n                    }\n                    showingFilters={vm.showingFilters}\n                    data-testid=\"fm.list-entries.toggle-filters\"\n                />\n                <Tooltip\n                    side={\"bottom\"}\n                    content={vm.viewMode === \"table\" ? t`Switch to Grid` : t`Switch to Table`}\n                    trigger={\n                        <IconButton\n                            variant={\"ghost\"}\n                            size={\"md\"}\n                            icon={vm.viewMode === \"table\" ? <GridIcon /> : <TableIcon />}\n                            onClick={() =>\n                                actions.setViewMode(vm.viewMode === \"table\" ? \"grid\" : \"table\")\n                            }\n                            data-testid={\"fm-header-layout-switch\"}\n                        />\n                    }\n                />\n                {vm.permissions.canCreate && (\n                    <Button\n                        variant={\"secondary\"}\n                        size={\"md\"}\n                        onClick={() =>\n                            actions.folders.createFolder(vm.folders.currentFolderId ?? undefined)\n                        }\n                        text={t`New Folder`}\n                        icon={<AddIcon />}\n                        data-testid={\"fm-header-new-folder-button\"}\n                    />\n                )}\n                {overlay?.multiple && vm.list.selection.selectedCount > 0 ? (\n                    <Button\n                        onClick={() => overlay.confirmSelection()}\n                        size={\"md\"}\n                        text={t`Select ({count})`({ count: vm.list.selection.selectedCount })}\n                        data-testid={\"fm-header-select-button\"}\n                    />\n                ) : (\n                    browseFiles &&\n                    vm.permissions.canCreate && (\n                        <Button\n                            onClick={browseFiles}\n                            size={\"md\"}\n                            text={t`Upload`}\n                            icon={<FileUploadIcon />}\n                            data-testid={\"fm-header-upload-button\"}\n                        />\n                    )\n                )}\n            </div>\n            <Filters filters={browser.filters} show={vm.showingFilters} onChange={applyFilters} />\n        </div>\n    );\n});\n"],"names":["t","i18n","Title","observer","vm","useFileManagerPresenter","browser","useFileManagerConfig","currentFolder","isRootFolder","currentFolderTitle","icon","useMemo","HomeIcon","FolderIcon","Skeleton","Icon","Heading","FolderProvider","OptionsMenu","IconButton","MoreVerticalIcon","FileManagerHeader","browseFiles","actions","overlay","useOverlay","applyFilters","data","Object","convertedFilters","current","converter","key","value","SearchBar","FiltersToggle","Tooltip","GridIcon","TableIcon","Button","undefined","AddIcon","FileUploadIcon","Filters"],"mappings":"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"}

package/presentation/FileList/components/LayoutSwitch/LayoutSwitch.js

@@ -0,0 +1,24 @@
+import react from "react";
+import { IconButton, Tooltip } from "@webiny/admin-ui";
+import { ReactComponent } from "@webiny/icons/view_module.svg";
+import { ReactComponent as view_list_svg_ReactComponent } from "@webiny/icons/view_list.svg";
+import { i18n } from "@webiny/app/i18n/index.js";
+import { useFileManagerPresenter } from "../../FileManagerPresenterProvider.js";
+const t = i18n.ns("app-file-manager/components/layout-switch");
+const LayoutSwitch = ()=>{
+    const { vm, actions } = useFileManagerPresenter();
+    const isTable = "table" === vm.viewMode;
+    return /*#__PURE__*/ react.createElement(Tooltip, {
+        side: "bottom",
+        trigger: /*#__PURE__*/ react.createElement(IconButton, {
+            icon: isTable ? /*#__PURE__*/ react.createElement(ReactComponent, null) : /*#__PURE__*/ react.createElement(view_list_svg_ReactComponent, null),
+            onClick: ()=>actions.setViewMode(isTable ? "grid" : "table")
+        }),
+        content: t`{mode} layout`({
+            mode: isTable ? "Grid" : "Table"
+        })
+    });
+};
+export { LayoutSwitch };
+
+//# sourceMappingURL=LayoutSwitch.js.map

package/presentation/FileList/components/LayoutSwitch/LayoutSwitch.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"presentation/FileList/components/LayoutSwitch/LayoutSwitch.js","sources":["../../../../../src/presentation/FileList/components/LayoutSwitch/LayoutSwitch.tsx"],"sourcesContent":["import React from \"react\";\nimport { IconButton, Tooltip } from \"@webiny/admin-ui\";\nimport { ReactComponent as GridIcon } from \"@webiny/icons/view_module.svg\";\nimport { ReactComponent as TableIcon } from \"@webiny/icons/view_list.svg\";\nimport { i18n } from \"@webiny/app/i18n/index.js\";\nimport { useFileManagerPresenter } from \"~/presentation/FileList/FileManagerPresenterProvider.js\";\n\nconst t = i18n.ns(\"app-file-manager/components/layout-switch\");\n\nexport const LayoutSwitch = () => {\n    const { vm, actions } = useFileManagerPresenter();\n    const isTable = vm.viewMode === \"table\";\n\n    return (\n        <Tooltip\n            side={\"bottom\"}\n            trigger={\n                <IconButton\n                    icon={isTable ? <GridIcon /> : <TableIcon />}\n                    onClick={() => actions.setViewMode(isTable ? \"grid\" : \"table\")}\n                />\n            }\n            content={t`{mode} layout`({\n                mode: isTable ? \"Grid\" : \"Table\"\n            })}\n        />\n    );\n};\n"],"names":["t","i18n","LayoutSwitch","vm","actions","useFileManagerPresenter","isTable","Tooltip","IconButton","GridIcon","TableIcon"],"mappings":";;;;;;AAOA,MAAMA,IAAIC,KAAK,EAAE,CAAC;AAEX,MAAMC,eAAe;IACxB,MAAM,EAAEC,EAAE,EAAEC,OAAO,EAAE,GAAGC;IACxB,MAAMC,UAAUH,AAAgB,YAAhBA,GAAG,QAAQ;IAE3B,OAAO,WAAP,GACI,oBAACI,SAAOA;QACJ,MAAM;QACN,uBACI,oBAACC,YAAUA;YACP,MAAMF,UAAU,WAAVA,GAAU,oBAACG,gBAAQA,QAAAA,WAAAA,GAAM,oBAACC,8BAASA;YACzC,SAAS,IAAMN,QAAQ,WAAW,CAACE,UAAU,SAAS;;QAG9D,SAASN,CAAC,CAAC,aAAa,CAAC,CAAC;YACtB,MAAMM,UAAU,SAAS;QAC7B;;AAGZ"}

package/presentation/FileList/components/LayoutSwitch/index.js

@@ -0,0 +1 @@
+export * from "./LayoutSwitch.js";

package/presentation/FileList/components/NoPermissions/NoPermissions.js

@@ -0,0 +1,27 @@
+import react from "react";
+import { Heading, Text } from "@webiny/admin-ui";
+import { ReactComponent } from "@webiny/icons/visibility_off.svg";
+const NoPermissions = ()=>/*#__PURE__*/ react.createElement("div", {
+        className: "w-full h-full p-lg flex items-center justify-center bg-neutral-base"
+    }, /*#__PURE__*/ react.createElement("div", {
+        className: "flex flex-col items-center justify-center gap-sm"
+    }, /*#__PURE__*/ react.createElement("div", {
+        className: "fill-neutral-strong"
+    }, /*#__PURE__*/ react.createElement(ReactComponent, {
+        width: 75,
+        height: 75
+    })), /*#__PURE__*/ react.createElement("div", {
+        className: "text-center"
+    }, /*#__PURE__*/ react.createElement(Heading, {
+        level: 4,
+        className: "text-neutral-strong"
+    }, "Permission Required"), /*#__PURE__*/ react.createElement(Text, {
+        as: "div",
+        style: {
+            width: "300px"
+        },
+        className: "text-neutral-strong"
+    }, "You don’t have the necessary permissions to access these files. Please contact your administrator for access."))));
+export { NoPermissions };
+
+//# sourceMappingURL=NoPermissions.js.map

package/presentation/FileList/components/NoPermissions/NoPermissions.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"presentation/FileList/components/NoPermissions/NoPermissions.js","sources":["../../../../../src/presentation/FileList/components/NoPermissions/NoPermissions.tsx"],"sourcesContent":["import React from \"react\";\nimport { Heading, Text } from \"@webiny/admin-ui\";\nimport { ReactComponent as VisibilityOffIcon } from \"@webiny/icons/visibility_off.svg\";\n\nexport const NoPermissions = () => {\n    return (\n        <div className={\"w-full h-full p-lg flex items-center justify-center bg-neutral-base\"}>\n            <div className={\"flex flex-col items-center justify-center gap-sm\"}>\n                <div className={\"fill-neutral-strong\"}>\n                    <VisibilityOffIcon width={75} height={75} />\n                </div>\n                <div className={\"text-center\"}>\n                    <Heading level={4} className={\"text-neutral-strong\"}>\n                        {\"Permission Required\"}\n                    </Heading>\n                    <Text\n                        as={\"div\"}\n                        style={{\n                            width: \"300px\"\n                        }}\n                        className={\"text-neutral-strong\"}\n                    >\n                        {\n                            \"You don’t have the necessary permissions to access these files. Please contact your administrator for access.\"\n                        }\n                    </Text>\n                </div>\n            </div>\n        </div>\n    );\n};\n"],"names":["NoPermissions","VisibilityOffIcon","Heading","Text"],"mappings":";;;AAIO,MAAMA,gBAAgB,IAClB,WAAP,GACI,oBAAC;QAAI,WAAW;qBACZ,oBAAC;QAAI,WAAW;qBACZ,oBAAC;QAAI,WAAW;qBACZ,oBAACC,gBAAiBA;QAAC,OAAO;QAAI,QAAQ;uBAE1C,oBAAC;QAAI,WAAW;qBACZ,oBAACC,SAAOA;QAAC,OAAO;QAAG,WAAW;OACzB,sCAEL,oBAACC,MAAIA;QACD,IAAI;QACJ,OAAO;YACH,OAAO;QACX;QACA,WAAW;OAGP"}

package/presentation/FileList/components/NoPermissions/index.js

@@ -0,0 +1 @@
+export * from "./NoPermissions.js";