Merge branch '17231-stuck-on-loading-page-after-login'
[arvados.git] / src / views-components / collection-panel-files / collection-panel-files.ts
1 // Copyright (C) The Arvados Authors. All rights reserved.
2 //
3 // SPDX-License-Identifier: AGPL-3.0
4
5 import { connect } from "react-redux";
6 import {
7     CollectionPanelFiles as Component,
8     CollectionPanelFilesProps
9 } from "~/components/collection-panel-files/collection-panel-files";
10 import { RootState } from "~/store/store";
11 import { TreeItemStatus } from "~/components/tree/tree";
12 import { VirtualTreeItem as TreeItem } from "~/components/tree/virtual-tree";
13 import {
14     CollectionPanelDirectory,
15     CollectionPanelFile,
16     CollectionPanelFilesState
17 } from "~/store/collection-panel/collection-panel-files/collection-panel-files-state";
18 import { FileTreeData } from "~/components/file-tree/file-tree-data";
19 import { Dispatch } from "redux";
20 import { collectionPanelFilesAction } from "~/store/collection-panel/collection-panel-files/collection-panel-files-actions";
21 import { ContextMenuKind } from "../context-menu/context-menu";
22 import { getNode, getNodeChildrenIds, Tree, TreeNode, initTreeNode } from "~/models/tree";
23 import { CollectionFileType, createCollectionDirectory } from "~/models/collection-file";
24 import { openContextMenu, openCollectionFilesContextMenu } from '~/store/context-menu/context-menu-actions';
25 import { openUploadCollectionFilesDialog } from '~/store/collections/collection-upload-actions';
26 import { ResourceKind } from "~/models/resource";
27 import { openDetailsPanel } from '~/store/details-panel/details-panel-action';
28
29 const memoizedMapStateToProps = () => {
30     let prevState: CollectionPanelFilesState;
31     let prevTree: Array<TreeItem<FileTreeData>>;
32
33     return (state: RootState): Pick<CollectionPanelFilesProps, "items" | "currentItemUuid"> => {
34         if (prevState !== state.collectionPanelFiles) {
35             prevState = state.collectionPanelFiles;
36             prevTree = [].concat.apply(
37                 [], getNodeChildrenIds('')(state.collectionPanelFiles)
38                     .map(collectionItemToList(0)(state.collectionPanelFiles)));
39         }
40         return {
41             items: prevTree,
42             currentItemUuid: state.detailsPanel.resourceUuid
43         };
44     };
45 };
46
47 const mapDispatchToProps = (dispatch: Dispatch): Pick<CollectionPanelFilesProps, 'onSearchChange' | 'onFileClick' | 'onUploadDataClick' | 'onCollapseToggle' | 'onSelectionToggle' | 'onItemMenuOpen' | 'onOptionsMenuOpen'> => ({
48     onUploadDataClick: () => {
49         dispatch<any>(openUploadCollectionFilesDialog());
50     },
51     onCollapseToggle: (id) => {
52         dispatch(collectionPanelFilesAction.TOGGLE_COLLECTION_FILE_COLLAPSE({ id }));
53     },
54     onSelectionToggle: (event, item) => {
55         dispatch(collectionPanelFilesAction.TOGGLE_COLLECTION_FILE_SELECTION({ id: item.id }));
56     },
57     onItemMenuOpen: (event, item, isWritable) => {
58         dispatch<any>(openContextMenu(
59             event,
60             {
61                 menuKind: isWritable
62                     ? ContextMenuKind.COLLECTION_FILES_ITEM
63                     : ContextMenuKind.READONLY_COLLECTION_FILES_ITEM,
64                 kind: ResourceKind.COLLECTION,
65                 name: item.data.name,
66                 uuid: item.id,
67                 ownerUuid: ''
68             }
69         ));
70     },
71     onSearchChange: (searchValue: string) => {
72         dispatch(collectionPanelFilesAction.ON_SEARCH_CHANGE(searchValue));
73     },
74     onOptionsMenuOpen: (event, isWritable) => {
75         dispatch<any>(openCollectionFilesContextMenu(event, isWritable));
76     },
77     onFileClick: (id) => {
78         dispatch<any>(openDetailsPanel(id));
79     },
80 });
81
82 export const CollectionPanelFiles = connect(memoizedMapStateToProps(), mapDispatchToProps)(Component);
83
84 const collectionItemToList = (level: number) => (tree: Tree<CollectionPanelDirectory | CollectionPanelFile>) =>
85     (id: string): TreeItem<FileTreeData>[] => {
86         const node: TreeNode<CollectionPanelDirectory | CollectionPanelFile> = getNode(id)(tree) || initTreeNode({
87             id: '',
88             parent: '',
89             value: {
90                 ...createCollectionDirectory({ name: 'Invalid file' }),
91                 selected: false,
92                 collapsed: true
93             }
94         });
95
96         const treeItem = {
97             active: false,
98             data: {
99                 name: node.value.name,
100                 size: node.value.type === CollectionFileType.FILE ? node.value.size : undefined,
101                 type: node.value.type,
102                 url: node.value.url,
103             },
104             id: node.id,
105             items: [], // Not used in this case as we're converting a tree to a list.
106             itemCount: node.children.length,
107             open: node.value.type === CollectionFileType.DIRECTORY ? !node.value.collapsed : false,
108             selected: node.value.selected,
109             status: TreeItemStatus.LOADED,
110             level,
111         };
112
113         const treeItemChilds = treeItem.open
114             ? [].concat.apply([], node.children.map(collectionItemToList(level+1)(tree)))
115             : [];
116
117         return [
118             treeItem,
119             ...treeItemChilds,
120         ];
121     };