X-Git-Url: https://git.arvados.org/arvados-workbench2.git/blobdiff_plain/08f35d9b26a06b70da6e54533782276617c5bed1..d6d85de50096eb0053d58c5022fd4e949c830929:/src/views/project-panel/project-panel.tsx?ds=sidebyside diff --git a/src/views/project-panel/project-panel.tsx b/src/views/project-panel/project-panel.tsx index 991335dd..37712c7d 100644 --- a/src/views/project-panel/project-panel.tsx +++ b/src/views/project-panel/project-panel.tsx @@ -3,22 +3,34 @@ // SPDX-License-Identifier: AGPL-3.0 import * as React from 'react'; -import { ProjectPanelItem } from './project-panel-item'; import { Button, StyleRulesCallback, WithStyles, withStyles } from '@material-ui/core'; -import { DataExplorer } from "../../views-components/data-explorer/data-explorer"; +import { DataExplorer } from "~/views-components/data-explorer/data-explorer"; import { DispatchProp, connect } from 'react-redux'; -import { DataColumns } from '../../components/data-table/data-table'; +import { DataColumns } from '~/components/data-table/data-table'; import { RouteComponentProps } from 'react-router'; -import { RootState } from '../../store/store'; -import { DataTableFilterItem } from '../../components/data-table-filters/data-table-filters'; -import { ContainerRequestState } from '../../models/container-request'; -import { SortDirection } from '../../components/data-table/data-column'; -import { ResourceKind } from '../../models/resource'; -import { resourceLabel } from '../../common/labels'; -import { ArvadosTheme } from '../../common/custom-theme'; -import { renderName, renderStatus, renderType, renderOwner, renderFileSize, renderDate } from '../../views-components/data-explorer/renderers'; -import { restoreBranch } from '../../store/navigation/navigation-action'; -import { relative } from 'path'; +import { RootState } from '~/store/store'; +import { DataTableFilterItem } from '~/components/data-table-filters/data-table-filters'; +import { ContainerRequestState } from '~/models/container-request'; +import { SortDirection } from '~/components/data-table/data-column'; +import { ResourceKind } from '~/models/resource'; +import { resourceLabel } from '~/common/labels'; +import { ArvadosTheme } from '~/common/custom-theme'; +import { ResourceFileSize, ResourceLastModifiedDate, ProcessStatus, ResourceType, ResourceOwner } from '~/views-components/data-explorer/renderers'; +import { ProjectIcon } from '~/components/icon/icon'; +import { ResourceName } from '~/views-components/data-explorer/renderers'; +import { ResourcesState, getResource } from '~/store/resources/resources'; +import { loadDetailsPanel } from '~/store/details-panel/details-panel-action'; +import { ContextMenuKind } from '~/views-components/context-menu/context-menu'; +import { contextMenuActions } from '~/store/context-menu/context-menu-actions'; +import { CollectionResource } from '~/models/collection'; +import { ProjectResource } from '~/models/project'; +import { openProjectCreator } from '~/store/project/project-action'; +import { reset } from 'redux-form'; +import { COLLECTION_CREATE_DIALOG } from '~/views-components/dialog-create/dialog-collection-create'; +import { collectionCreateActions } from '~/store/collections/creator/collection-creator-action'; +import { navigateToResource } from '~/store/navigation/navigation-action'; +import { getProperty } from '~/store/properties/properties'; +import { PROJECT_PANEL_CURRENT_UUID } from '~/store/project-panel/project-panel-action'; type CssRules = 'root' | "toolbar" | "button"; @@ -50,19 +62,21 @@ export interface ProjectPanelFilter extends DataTableFilterItem { type: ResourceKind | ContainerRequestState; } -export const columns: DataColumns = [ +export const projectPanelColumns: DataColumns = [ { name: ProjectPanelColumnNames.NAME, selected: true, configurable: true, sortDirection: SortDirection.ASC, - render: renderName, + filters: [], + render: uuid => , width: "450px" }, { name: "Status", selected: true, configurable: true, + sortDirection: SortDirection.NONE, filters: [ { name: ContainerRequestState.COMMITTED, @@ -80,13 +94,14 @@ export const columns: DataColumns = [ type: ContainerRequestState.UNCOMMITTED } ], - render: renderStatus, + render: uuid => , width: "75px" }, { name: ProjectPanelColumnNames.TYPE, selected: true, configurable: true, + sortDirection: SortDirection.NONE, filters: [ { name: resourceLabel(ResourceKind.COLLECTION), @@ -104,21 +119,25 @@ export const columns: DataColumns = [ type: ResourceKind.PROJECT } ], - render: item => renderType(item.kind), + render: uuid => , width: "125px" }, { name: ProjectPanelColumnNames.OWNER, selected: true, configurable: true, - render: item => renderOwner(item.owner), + sortDirection: SortDirection.NONE, + filters: [], + render: uuid => , width: "200px" }, { name: ProjectPanelColumnNames.FILE_SIZE, selected: true, configurable: true, - render: item => renderFileSize(item.fileSize), + sortDirection: SortDirection.NONE, + filters: [], + render: uuid => , width: "50px" }, { @@ -126,7 +145,8 @@ export const columns: DataColumns = [ selected: true, configurable: true, sortDirection: SortDirection.NONE, - render: item => renderDate(item.lastModified), + filters: [], + render: uuid => , width: "150px" } ]; @@ -135,22 +155,17 @@ export const PROJECT_PANEL_ID = "projectPanel"; interface ProjectPanelDataProps { currentItemId: string; + resources: ResourcesState; } -interface ProjectPanelActionProps { - onItemClick: (item: ProjectPanelItem) => void; - onContextMenu: (event: React.MouseEvent, item: ProjectPanelItem) => void; - onProjectCreationDialogOpen: (ownerUuid: string) => void; - onCollectionCreationDialogOpen: (ownerUuid: string) => void; - onItemDoubleClick: (item: ProjectPanelItem) => void; - onItemRouteChange: (itemId: string) => void; -} - -type ProjectPanelProps = ProjectPanelDataProps & ProjectPanelActionProps & DispatchProp +type ProjectPanelProps = ProjectPanelDataProps & DispatchProp & WithStyles & RouteComponentProps<{ id: string }>; export const ProjectPanel = withStyles(styles)( - connect((state: RootState) => ({ currentItemId: state.projects.currentItemId }))( + connect((state: RootState) => ({ + currentItemId: getProperty(PROJECT_PANEL_CURRENT_UUID)(state.properties), + resources: state.resources + }))( class extends React.Component { render() { const { classes } = this.props; @@ -168,33 +183,60 @@ export const ProjectPanel = withStyles(styles)( item.uuid} /> + onRowClick={this.handleRowClick} + onRowDoubleClick={this.handleRowDoubleClick} + onContextMenu={this.handleContextMenu} + defaultIcon={ProjectIcon} + defaultMessages={['Your project is empty.', 'Please create a project or create a collection and upload a data.']} /> ; } handleNewProjectClick = () => { - this.props.onProjectCreationDialogOpen(this.props.currentItemId); + this.props.dispatch(openProjectCreator(this.props.currentItemId)); } handleNewCollectionClick = () => { - this.props.onCollectionCreationDialogOpen(this.props.currentItemId); + this.props.dispatch(reset(COLLECTION_CREATE_DIALOG)); + this.props.dispatch(collectionCreateActions.OPEN_COLLECTION_CREATOR({ ownerUuid: this.props.currentItemId })); } - componentWillReceiveProps({ match, currentItemId, onItemRouteChange }: ProjectPanelProps) { - if (match.params.id !== currentItemId) { - onItemRouteChange(match.params.id); + handleContextMenu = (event: React.MouseEvent, resourceUuid: string) => { + event.preventDefault(); + const resource = getResource(resourceUuid)(this.props.resources) as CollectionResource | ProjectResource | undefined; + if (resource) { + let kind: ContextMenuKind; + + if (resource.kind === ResourceKind.PROJECT) { + kind = ContextMenuKind.PROJECT; + } else if (resource.kind === ResourceKind.COLLECTION) { + kind = ContextMenuKind.COLLECTION_RESOURCE; + } else { + kind = ContextMenuKind.RESOURCE; + } + if (kind !== ContextMenuKind.RESOURCE) { + this.props.dispatch( + contextMenuActions.OPEN_CONTEXT_MENU({ + position: { x: event.clientX, y: event.clientY }, + resource: { + uuid: resource.uuid, + name: resource.name || '', + description: resource.description, + kind, + } + }) + ); + } } } - componentDidMount() { - if (this.props.match.params.id && this.props.currentItemId === '') { - this.props.dispatch(restoreBranch(this.props.match.params.id)); - } + handleRowDoubleClick = (uuid: string) => { + this.props.dispatch(navigateToResource(uuid)); } + + handleRowClick = (uuid: string) => { + this.props.dispatch(loadDetailsPanel(uuid)); + } + } ) );