src/views/data-explorer/data-explorer.tsx

   1 // Copyright (C) The Arvados Authors. All rights reserved.
   2 //
   3 // SPDX-License-Identifier: AGPL-3.0
   4
   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';
  17
  18 interface DataExplorerViewDataProps {
  19     projects: ProjectState;
  20 }
  21
  22 type DataExplorerViewProps = DataExplorerViewDataProps & RouteComponentProps<{ name: string }> & DispatchProp;
  23
  24 type DataExplorerViewState = Pick<DataTableProps<Project>, "columns">;
  25
  26 interface MappedProjectItem extends DataItem {
  27     uuid: string;
  28 }
  29
  30 class DataExplorerView extends React.Component<DataExplorerViewProps, DataExplorerViewState> {
  31
  32     render() {
  33         const project = findTreeItem(this.props.projects, this.props.match.params.name);
  34         const projectItems = project && project.items || [];
  35         return (
  36             <DataExplorer
  37                 items={projectItems.map(mapTreeItem)}
  38                 onItemClick={this.goToProject}
  39                 contextActions={this.contextActions}
  40             />
  41         );
  42     }
  43
  44     contextActions: DataExplorerContextActions = {
  45         onAddToFavourite: console.log,
  46         onCopy: console.log,
  47         onDownload: console.log,
  48         onMoveTo: console.log,
  49         onRemove: console.log,
  50         onRename: console.log,
  51         onShare: console.log
  52     };
  53
  54     goToProject = (project: MappedProjectItem) => {
  55         this.props.dispatch(push(`/project/${project.uuid}`));
  56         this.props.dispatch(projectActions.TOGGLE_PROJECT_TREE_ITEM(project.uuid));
  57     }
  58
  59 }
  60
  61 const mapTreeItem = (item: TreeItem<Project>): MappedProjectItem => ({
  62     name: item.data.name,
  63     type: item.data.kind,
  64     owner: item.data.ownerUuid,
  65     lastModified: item.data.modifiedAt,
  66     uuid: item.data.uuid
  67 });
  68
  69
  70 export default connect(
  71     (state: RootState) => ({
  72         projects: state.projects
  73     })
  74 )(DataExplorerView);