Added data selector for workbench data explorer

[arvados-workbench2.git] / src / views / data-explorer / data-explorer.tsx

diff --git a/src/views/data-explorer/data-explorer.tsx b/src/views/data-explorer/data-explorer.tsx
index 5f17b638f1a89888e117d275b5f737b182a79dd8..a667469a2e5317678ea31909132d0aee68b2f64a 100644 (file)
--- a/src/views/data-explorer/data-explorer.tsx
+++ b/src/views/data-explorer/data-explorer.tsx
@@ -3,60 +3,65 @@
 // SPDX-License-Identifier: AGPL-3.0
 
 import * as React from 'react';
-import { DataTableProps } from "../../components/data-table";
 import { RouteComponentProps } from 'react-router';
 import { Project } from '../../models/project';
-import { ProjectState, findTreeItem } from '../../store/project/project-reducer';
+import { ProjectState } from '../../store/project/project-reducer';
 import { RootState } from '../../store/store';
 import { connect, DispatchProp } from 'react-redux';
 import { push } from 'react-router-redux';
+import { DataColumns } from "../../components/data-table/data-table";
+import DataExplorer, { DataExplorerContextActions } from "../../views-components/data-explorer/data-explorer";
+import { projectExplorerItems } from "./data-explorer-selectors";
+import { DataItem } from "../../views-components/data-explorer/data-item";
+import { CollectionState } from "../../store/collection/collection-reducer";
+import { ResourceKind } from "../../models/resource";
 import projectActions from "../../store/project/project-action";
-import { DataExplorer, DataItem } from '../../components/data-explorer';
-import { TreeItem } from '../../components/tree/tree';
+import { getCollectionList } from "../../store/collection/collection-action";
 
 interface DataExplorerViewDataProps {
     projects: ProjectState;
+    collections: CollectionState;
 }
 
-type DataExplorerViewProps = DataExplorerViewDataProps & RouteComponentProps<{ name: string }> & DispatchProp;
-
-type DataExplorerViewState = Pick<DataTableProps<Project>, "columns">;
-
-interface MappedProjectItem extends DataItem {
-    uuid: string;
-}
+type DataExplorerViewProps = DataExplorerViewDataProps & RouteComponentProps<{ uuid: string }> & DispatchProp;
+type DataExplorerViewState = DataColumns<Project>;
 
 class DataExplorerView extends React.Component<DataExplorerViewProps, DataExplorerViewState> {
-
     render() {
-        const project = findTreeItem(this.props.projects, this.props.match.params.name);
-        const projectItems = project && project.items || [];
+        const treeItemId = this.props.match.params.uuid;
+        const items = projectExplorerItems(this.props.projects, treeItemId, this.props.collections);
         return (
             <DataExplorer
-                items={projectItems.map(mapTreeItem)}
-                onItemClick={this.goToProject}
+                items={items}
+                onItemClick={this.goToItem}
+                contextActions={this.contextActions}
             />
         );
     }
 
-    goToProject = (project: MappedProjectItem) => {
-        this.props.dispatch(push(`/project/${project.uuid}`));
-        this.props.dispatch(projectActions.TOGGLE_PROJECT_TREE_ITEM(project.uuid));
-    }
+    contextActions: DataExplorerContextActions = {
+        onAddToFavourite: console.log,
+        onCopy: console.log,
+        onDownload: console.log,
+        onMoveTo: console.log,
+        onRemove: console.log,
+        onRename: console.log,
+        onShare: console.log
+    };
 
+    goToItem = (item: DataItem) => {
+        // FIXME: Unify project tree switch action
+        this.props.dispatch(push(item.url));
+        if (item.type === ResourceKind.PROJECT || item.type === ResourceKind.LEVEL_UP) {
+            this.props.dispatch(projectActions.TOGGLE_PROJECT_TREE_ITEM(item.uuid));
+        }
+        this.props.dispatch<any>(getCollectionList(item.uuid));
+    }
 }
 
-const mapTreeItem = (item: TreeItem<Project>): MappedProjectItem => ({
-    name: item.data.name,
-    type: item.data.kind,
-    owner: item.data.ownerUuid,
-    lastModified: item.data.modifiedAt,
-    uuid: item.data.uuid
-});
-
-
 export default connect(
     (state: RootState) => ({
-        projects: state.projects
+        projects: state.projects,
+        collections: state.collections
     })
 )(DataExplorerView);