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
  17 interface DataExplorerViewDataProps {
  18     projects: ProjectState;
  19 }
  20
  21 type DataExplorerViewProps = DataExplorerViewDataProps & RouteComponentProps<{ name: string }> & DispatchProp;
  22
  23 type DataExplorerViewState = Pick<DataTableProps<Project>, "columns">;
  24
  25 interface MappedProjectItem extends DataItem {
  26     uuid: string;
  27 }
  28
  29 class DataExplorerView extends React.Component<DataExplorerViewProps, DataExplorerViewState> {
  30
  31     render() {
  32         const project = findTreeItem(this.props.projects, this.props.match.params.name);
  33         const projectItems = project && project.items || [];
  34         return (
  35             <DataExplorer
  36                 items={projectItems.map(mapTreeItem)}
  37                 onItemClick={this.goToProject}
  38             />
  39         );
  40     }
  41
  42     goToProject = (project: MappedProjectItem) => {
  43         this.props.dispatch(push(`/project/${project.uuid}`));
  44         this.props.dispatch(projectActions.TOGGLE_PROJECT_TREE_ITEM(project.uuid));
  45     }
  46
  47 }
  48
  49 const mapTreeItem = (item: TreeItem<Project>): MappedProjectItem => ({
  50     name: item.data.name,
  51     type: item.data.kind,
  52     owner: item.data.ownerUuid,
  53     lastModified: item.data.modifiedAt,
  54     uuid: item.data.uuid
  55 });
  56
  57
  58 export default connect(
  59     (state: RootState) => ({
  60         projects: state.projects
  61     })
  62 )(DataExplorerView);