Merge branch 'master' into 14452-my-account

[arvados-workbench2.git] / src / views-components / collection-panel-files / collection-panel-files.ts

diff --git a/src/views-components/collection-panel-files/collection-panel-files.ts b/src/views-components/collection-panel-files/collection-panel-files.ts
index e61007a405476f44bf04d71ca8eee3b0e0b9eb3a..d912ac1302c9b066e059c9a31dddc1e0602e4a5e 100644 (file)
--- a/src/views-components/collection-panel-files/collection-panel-files.ts
+++ b/src/views-components/collection-panel-files/collection-panel-files.ts
@@ -3,53 +3,88 @@
 // SPDX-License-Identifier: AGPL-3.0
 
 import { connect } from "react-redux";
-import { CollectionPanelFiles as Component, CollectionPanelFilesProps } from "../../components/collection-panel-files/collection-panel-files";
-import { RootState } from "../../store/store";
-import { TreeItemStatus } from "../../components/tree/tree";
+import {
+    CollectionPanelFiles as Component,
+    CollectionPanelFilesProps
+} from "~/components/collection-panel-files/collection-panel-files";
+import { RootState } from "~/store/store";
+import { TreeItem, TreeItemStatus } from "~/components/tree/tree";
+import {
+    CollectionPanelDirectory,
+    CollectionPanelFile,
+    CollectionPanelFilesState
+} from "~/store/collection-panel/collection-panel-files/collection-panel-files-state";
+import { FileTreeData } from "~/components/file-tree/file-tree-data";
+import { Dispatch } from "redux";
+import { collectionPanelFilesAction } from "~/store/collection-panel/collection-panel-files/collection-panel-files-actions";
+import { ContextMenuKind } from "../context-menu/context-menu";
+import { getNode, getNodeChildrenIds, Tree, TreeNode, initTreeNode } from "~/models/tree";
+import { CollectionFileType, createCollectionDirectory } from "~/models/collection-file";
+import { openContextMenu, openCollectionFilesContextMenu } from '~/store/context-menu/context-menu-actions';
+import { openUploadCollectionFilesDialog } from '~/store/collections/collection-upload-actions';
+import { ResourceKind } from "~/models/resource";
 
-const mapStateToProps = (state: RootState): Pick<CollectionPanelFilesProps, "items"> => ({
-    items: [{
-        active: false,
-        data: {
-            name: "Directory 1",
-            type: "directory"
-        },
-        id: "Directory 1",
-        open: true,
-        status: TreeItemStatus.LOADED,
-        items: [{
-            active: false,
-            data: {
-                name: "Directory 1.1",
-                type: "directory"
-            },
-            id: "Directory 1.1",
-            open: false,
-            status: TreeItemStatus.LOADED,
-            items: []
-        }, {
-            active: false,
-            data: {
-                name: "File 1.1",
-                type: "file",
-                size: 20033
-            },
-            id: "File 1.1",
-            open: false,
-            status: TreeItemStatus.LOADED,
-            items: []
-        }]
-    }, {
-        active: false,
-        data: {
-            name: "Directory 2",
-            type: "directory"
-        },
-        id: "Directory 2",
-        open: false,
-        status: TreeItemStatus.LOADED
-    }]
+const memoizedMapStateToProps = () => {
+    let prevState: CollectionPanelFilesState;
+    let prevTree: Array<TreeItem<FileTreeData>>;
+
+    return (state: RootState): Pick<CollectionPanelFilesProps, "items"> => {
+        if (prevState !== state.collectionPanelFiles) {
+            prevState = state.collectionPanelFiles;
+            prevTree = getNodeChildrenIds('')(state.collectionPanelFiles)
+                .map(collectionItemToTreeItem(state.collectionPanelFiles));
+        }
+        return {
+            items: prevTree
+        };
+    };
+};
+
+const mapDispatchToProps = (dispatch: Dispatch): Pick<CollectionPanelFilesProps, 'onUploadDataClick' | 'onCollapseToggle' | 'onSelectionToggle' | 'onItemMenuOpen' | 'onOptionsMenuOpen'> => ({
+    onUploadDataClick: () => {
+        dispatch<any>(openUploadCollectionFilesDialog());
+    },
+    onCollapseToggle: (id) => {
+        dispatch(collectionPanelFilesAction.TOGGLE_COLLECTION_FILE_COLLAPSE({ id }));
+    },
+    onSelectionToggle: (event, item) => {
+        dispatch(collectionPanelFilesAction.TOGGLE_COLLECTION_FILE_SELECTION({ id: item.id }));
+    },
+    onItemMenuOpen: (event, item) => {
+        dispatch<any>(openContextMenu(event, { menuKind: ContextMenuKind.COLLECTION_FILES_ITEM, kind: ResourceKind.COLLECTION, name: item.data.name, uuid: item.id, ownerUuid: '' }));
+    },
+    onOptionsMenuOpen: (event) => {
+        dispatch<any>(openCollectionFilesContextMenu(event));
+    },
 });
 
 
-export const CollectionPanelFiles = connect(mapStateToProps)(Component);
+export const CollectionPanelFiles = connect(memoizedMapStateToProps(), mapDispatchToProps)(Component);
+
+const collectionItemToTreeItem = (tree: Tree<CollectionPanelDirectory | CollectionPanelFile>) =>
+    (id: string): TreeItem<FileTreeData> => {
+        const node: TreeNode<CollectionPanelDirectory | CollectionPanelFile> = getNode(id)(tree) || initTreeNode({
+            id: '',
+            parent: '',
+            value: {
+                ...createCollectionDirectory({ name: 'Invalid file' }),
+                selected: false,
+                collapsed: true
+            }
+        });
+        return {
+            active: false,
+            data: {
+                name: node.value.name,
+                size: node.value.type === CollectionFileType.FILE ? node.value.size : undefined,
+                type: node.value.type,
+                url: node.value.url,
+            },
+            id: node.id,
+            items: getNodeChildrenIds(node.id)(tree)
+                .map(collectionItemToTreeItem(tree)),
+            open: node.value.type === CollectionFileType.DIRECTORY ? !node.value.collapsed : false,
+            selected: node.value.selected,
+            status: TreeItemStatus.LOADED
+        };
+    };