1 // Copyright (C) The Arvados Authors. All rights reserved.
3 // SPDX-License-Identifier: AGPL-3.0
5 import * as React from 'react';
6 import { DataTableProps } from "../../components/data-table";
7 import { RouteComponentProps } from 'react-router';
8 import { Project } from '../../models/project';
9 import { ProjectState, findTreeItem } from '../../store/project/project-reducer';
10 import { RootState } from '../../store/store';
11 import { connect, DispatchProp } from 'react-redux';
12 import { push } from 'react-router-redux';
13 import projectActions from "../../store/project/project-action";
14 import { DataExplorer, DataItem } from '../../components/data-explorer';
15 import { TreeItem } from '../../components/tree/tree';
16 import { DataExplorerContextActions } from '../../components/data-explorer/data-explorer';
18 interface DataExplorerViewDataProps {
19 projects: ProjectState;
22 type DataExplorerViewProps = DataExplorerViewDataProps & RouteComponentProps<{ name: string }> & DispatchProp;
24 type DataExplorerViewState = Pick<DataTableProps<Project>, "columns">;
26 interface MappedProjectItem extends DataItem {
30 class DataExplorerView extends React.Component<DataExplorerViewProps, DataExplorerViewState> {
33 const project = findTreeItem(this.props.projects, this.props.match.params.name);
34 const projectItems = project && project.items || [];
37 items={projectItems.map(mapTreeItem)}
38 onItemClick={this.goToProject}
39 contextActions={this.contextActions}
44 contextActions: DataExplorerContextActions = {
45 onAddToFavourite: console.log,
47 onDownload: console.log,
48 onMoveTo: console.log,
49 onRemove: console.log,
50 onRename: console.log,
54 goToProject = (project: MappedProjectItem) => {
55 this.props.dispatch(push(`/project/${project.uuid}`));
56 this.props.dispatch(projectActions.TOGGLE_PROJECT_TREE_ITEM(project.uuid));
61 const mapTreeItem = (item: TreeItem<Project>): MappedProjectItem => ({
64 owner: item.data.ownerUuid,
65 lastModified: item.data.modifiedAt,
70 export default connect(
71 (state: RootState) => ({
72 projects: state.projects