X-Git-Url: https://git.arvados.org/arvados-workbench2.git/blobdiff_plain/5b38ed263a3efd88a215c0911dc969303001645c..c952afae1af2fb31b68be04f70bd7ae6f9d52aba:/src/views/project-panel/project-panel.tsx diff --git a/src/views/project-panel/project-panel.tsx b/src/views/project-panel/project-panel.tsx index b6985a93..892d2819 100644 --- a/src/views/project-panel/project-panel.tsx +++ b/src/views/project-panel/project-panel.tsx @@ -2,29 +2,56 @@ // // 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 React from 'react'; +import withStyles from "@material-ui/core/styles/withStyles"; import { DispatchProp, connect } from 'react-redux'; -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 { PROJECT_PANEL_ID } from "../../store/project-panel/project-panel-action"; - -type CssRules = "toolbar" | "button"; +import { StyleRulesCallback, WithStyles } from "@material-ui/core"; + +import { DataExplorer } from "views-components/data-explorer/data-explorer"; +import { DataColumns } from 'components/data-table/data-table'; +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, Resource } from 'models/resource'; +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 { + openContextMenu, + resourceUuidToContextMenuKind +} from 'store/context-menu/context-menu-actions'; +import { navigateTo } from 'store/navigation/navigation-action'; +import { getProperty } from 'store/properties/properties'; +import { PROJECT_PANEL_CURRENT_UUID } from 'store/project-panel/project-panel-action'; +import { DataTableDefaultView } from 'components/data-table-default-view/data-table-default-view'; +import { ArvadosTheme } from "common/custom-theme"; +import { createTree } from 'models/tree'; +import { + getInitialResourceTypeFilters, + getInitialProcessStatusFilters +} from 'store/resource-type-filters/resource-type-filters'; +import { GroupContentsResource } from 'services/groups-service/groups-service'; +import { GroupClass, GroupResource } from 'models/group'; +import { CollectionResource } from 'models/collection'; + +type CssRules = 'root' | "button"; const styles: StyleRulesCallback = (theme: ArvadosTheme) => ({ - toolbar: { - paddingBottom: theme.spacing.unit * 3, - textAlign: "right" + root: { + width: '100%', }, button: { marginLeft: theme.spacing.unit @@ -44,137 +71,149 @@ 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, - width: "450px" + sortDirection: SortDirection.NONE, + filters: createTree(), + render: uuid => }, { name: "Status", selected: true, configurable: true, - filters: [ - { - name: ContainerRequestState.COMMITTED, - selected: true, - type: ContainerRequestState.COMMITTED - }, - { - name: ContainerRequestState.FINAL, - selected: true, - type: ContainerRequestState.FINAL - }, - { - name: ContainerRequestState.UNCOMMITTED, - selected: true, - type: ContainerRequestState.UNCOMMITTED - } - ], - render: renderStatus, - width: "75px" + mutuallyExclusiveFilters: true, + filters: getInitialProcessStatusFilters(), + render: uuid => , }, { name: ProjectPanelColumnNames.TYPE, selected: true, configurable: true, - filters: [ - { - name: resourceLabel(ResourceKind.COLLECTION), - selected: true, - type: ResourceKind.COLLECTION - }, - { - name: resourceLabel(ResourceKind.PROCESS), - selected: true, - type: ResourceKind.PROCESS - }, - { - name: resourceLabel(ResourceKind.PROJECT), - selected: true, - type: ResourceKind.PROJECT - } - ], - render: item => renderType(item.kind), - width: "125px" + filters: getInitialResourceTypeFilters(), + render: uuid => }, { name: ProjectPanelColumnNames.OWNER, - selected: true, + selected: false, configurable: true, - render: item => renderOwner(item.owner), - width: "200px" + filters: createTree(), + render: uuid => }, { name: ProjectPanelColumnNames.FILE_SIZE, selected: true, configurable: true, - render: item => renderFileSize(item.fileSize), - width: "50px" + filters: createTree(), + render: uuid => }, { name: ProjectPanelColumnNames.LAST_MODIFIED, selected: true, configurable: true, - sortDirection: SortDirection.NONE, - render: item => renderDate(item.lastModified), - width: "150px" + sortDirection: SortDirection.DESC, + filters: createTree(), + render: uuid => } ]; +export const PROJECT_PANEL_ID = "projectPanel"; + +const DEFAULT_VIEW_MESSAGES = [ + 'Your project is empty.', + 'Please create a project or create a collection and upload a data.', +]; + interface ProjectPanelDataProps { currentItemId: string; + resources: ResourcesState; + isAdmin: boolean; + userUuid: string; + dataExplorerItems: any; } -interface ProjectPanelActionProps { - onItemClick: (item: ProjectPanelItem) => void; - onContextMenu: (event: React.MouseEvent, item: ProjectPanelItem) => void; - onDialogOpen: (ownerUuid: string) => void; - onItemDoubleClick: (item: ProjectPanelItem) => void; - onItemRouteChange: (itemId: string) => void; -} - -type ProjectPanelProps = ProjectPanelDataProps & ProjectPanelActionProps & DispatchProp +type ProjectPanelProps = ProjectPanelDataProps & DispatchProp & WithStyles & RouteComponentProps<{ id: string }>; +let data: any[] = []; +let href: 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, + userUuid: state.auth.user!.uuid, + dataExplorerItems: state.dataExplorer?.projectPanel.items, + }))( class extends React.Component { render() { - const { classes } = this.props; - return
-
- - - -
+ const { classes, dataExplorerItems } = this.props; + let loading = false; + + if (dataExplorerItems.length > 0 && data === dataExplorerItems && href !== window.location.href) { + loading = true + } else { + href = window.location.href; + data = dataExplorerItems; + } + + return
item.uuid} /> + onRowClick={this.handleRowClick} + onRowDoubleClick={this.handleRowDoubleClick} + onContextMenu={this.handleContextMenu} + contextMenuColumn={true} + dataTableDefaultView={ + + } />
; } - handleNewProjectClick = () => { - this.props.onDialogOpen(this.props.currentItemId); + isCurrentItemChild = (resource: Resource) => { + return resource.ownerUuid === this.props.currentItemId; } - componentWillReceiveProps({ match, currentItemId, onItemRouteChange }: ProjectPanelProps) { - if (match.params.id !== currentItemId) { - onItemRouteChange(match.params.id); + + handleContextMenu = (event: React.MouseEvent, resourceUuid: string) => { + const { resources } = this.props; + const resource = getResource(resourceUuid)(resources); + // When viewing the contents of a filter group, all contents should be treated as read only. + let readonly = false; + const project = getResource(this.props.currentItemId)(resources); + if (project && project.groupClass === GroupClass.FILTER) { + readonly = true; + } + + const menuKind = this.props.dispatch(resourceUuidToContextMenuKind(resourceUuid, readonly)); + if (menuKind && resource) { + this.props.dispatch(openContextMenu(event, { + name: resource.name, + uuid: resource.uuid, + ownerUuid: resource.ownerUuid, + isTrashed: ('isTrashed' in resource) ? resource.isTrashed: false, + kind: resource.kind, + menuKind, + description: resource.description, + storageClassesDesired: (resource as CollectionResource).storageClassesDesired, + properties: ('properties' in resource) ? resource.properties : {}, + })); } + this.props.dispatch(loadDetailsPanel(resourceUuid)); + } + + handleRowDoubleClick = (uuid: string) => { + this.props.dispatch(navigateTo(uuid)); } + + handleRowClick = (uuid: string) => { + this.props.dispatch(loadDetailsPanel(uuid)); + } + } ) );