1 // Copyright (C) The Arvados Authors. All rights reserved.
3 // SPDX-License-Identifier: AGPL-3.0
5 import * as React from 'react';
6 import { Button, StyleRulesCallback, WithStyles, withStyles } from '@material-ui/core';
7 import { DataExplorer } from "~/views-components/data-explorer/data-explorer";
8 import { DispatchProp, connect } from 'react-redux';
9 import { DataColumns } from '~/components/data-table/data-table';
10 import { RouteComponentProps } from 'react-router';
11 import { RootState } from '~/store/store';
12 import { DataTableFilterItem } from '~/components/data-table-filters/data-table-filters';
13 import { ContainerRequestState } from '~/models/container-request';
14 import { SortDirection } from '~/components/data-table/data-column';
15 import { ResourceKind } from '~/models/resource';
16 import { resourceLabel } from '~/common/labels';
17 import { ArvadosTheme } from '~/common/custom-theme';
18 import { ResourceFileSize, ResourceLastModifiedDate, ProcessStatus, ResourceType, ResourceOwner } from '~/views-components/data-explorer/renderers';
19 import { ProjectIcon } from '~/components/icon/icon';
20 import { ResourceName } from '~/views-components/data-explorer/renderers';
21 import { ResourcesState, getResource } from '~/store/resources/resources';
22 import { loadDetailsPanel } from '~/store/details-panel/details-panel-action';
23 import { resourceKindToContextMenuKind, openContextMenu } from '~/store/context-menu/context-menu-actions';
24 import { ProjectResource } from '~/models/project';
25 import { navigateTo } from '~/store/navigation/navigation-action';
26 import { getProperty } from '~/store/properties/properties';
27 import { PROJECT_PANEL_CURRENT_UUID } from '~/store/project-panel/project-panel-action';
28 import { openCollectionCreateDialog } from '../../store/collections/collection-create-actions';
29 import { openProjectCreateDialog } from '~/store/projects/project-create-actions';
31 type CssRules = 'root' | "toolbar" | "button";
33 const styles: StyleRulesCallback<CssRules> = (theme: ArvadosTheme) => ({
40 paddingBottom: theme.spacing.unit * 3,
44 marginLeft: theme.spacing.unit
48 export enum ProjectPanelColumnNames {
53 FILE_SIZE = "File size",
54 LAST_MODIFIED = "Last modified"
57 export interface ProjectPanelFilter extends DataTableFilterItem {
58 type: ResourceKind | ContainerRequestState;
61 export const projectPanelColumns: DataColumns<string, ProjectPanelFilter> = [
63 name: ProjectPanelColumnNames.NAME,
66 sortDirection: SortDirection.ASC,
68 render: uuid => <ResourceName uuid={uuid} />,
75 sortDirection: SortDirection.NONE,
78 name: ContainerRequestState.COMMITTED,
80 type: ContainerRequestState.COMMITTED
83 name: ContainerRequestState.FINAL,
85 type: ContainerRequestState.FINAL
88 name: ContainerRequestState.UNCOMMITTED,
90 type: ContainerRequestState.UNCOMMITTED
93 render: uuid => <ProcessStatus uuid={uuid} />,
97 name: ProjectPanelColumnNames.TYPE,
100 sortDirection: SortDirection.NONE,
103 name: resourceLabel(ResourceKind.COLLECTION),
105 type: ResourceKind.COLLECTION
108 name: resourceLabel(ResourceKind.PROCESS),
110 type: ResourceKind.PROCESS
113 name: resourceLabel(ResourceKind.PROJECT),
115 type: ResourceKind.PROJECT
118 render: uuid => <ResourceType uuid={uuid} />,
122 name: ProjectPanelColumnNames.OWNER,
125 sortDirection: SortDirection.NONE,
127 render: uuid => <ResourceOwner uuid={uuid} />,
131 name: ProjectPanelColumnNames.FILE_SIZE,
134 sortDirection: SortDirection.NONE,
136 render: uuid => <ResourceFileSize uuid={uuid} />,
140 name: ProjectPanelColumnNames.LAST_MODIFIED,
143 sortDirection: SortDirection.NONE,
145 render: uuid => <ResourceLastModifiedDate uuid={uuid} />,
150 export const PROJECT_PANEL_ID = "projectPanel";
152 interface ProjectPanelDataProps {
153 currentItemId: string;
154 resources: ResourcesState;
157 type ProjectPanelProps = ProjectPanelDataProps & DispatchProp
158 & WithStyles<CssRules> & RouteComponentProps<{ id: string }>;
160 export const ProjectPanel = withStyles(styles)(
161 connect((state: RootState) => ({
162 currentItemId: getProperty(PROJECT_PANEL_CURRENT_UUID)(state.properties),
163 resources: state.resources
165 class extends React.Component<ProjectPanelProps> {
167 const { classes } = this.props;
168 return <div className={classes.root}>
169 <div className={classes.toolbar}>
170 <Button color="primary" onClick={this.handleNewCollectionClick} variant="raised" className={classes.button}>
173 <Button color="primary" variant="raised" className={classes.button}>
176 <Button color="primary" onClick={this.handleNewProjectClick} variant="raised" className={classes.button}>
181 id={PROJECT_PANEL_ID}
182 onRowClick={this.handleRowClick}
183 onRowDoubleClick={this.handleRowDoubleClick}
184 onContextMenu={this.handleContextMenu}
185 defaultIcon={ProjectIcon}
186 defaultMessages={['Your project is empty.', 'Please create a project or create a collection and upload a data.']}
187 contextMenuColumn={true}/>
191 handleNewProjectClick = () => {
192 this.props.dispatch<any>(openProjectCreateDialog(this.props.currentItemId));
195 handleNewCollectionClick = () => {
196 this.props.dispatch<any>(openCollectionCreateDialog(this.props.currentItemId));
199 handleContextMenu = (event: React.MouseEvent<HTMLElement>, resourceUuid: string) => {
200 const kind = resourceKindToContextMenuKind(resourceUuid);
201 const resource = getResource<ProjectResource>(resourceUuid)(this.props.resources);
202 if (kind && resource) {
203 this.props.dispatch<any>(openContextMenu(event, {
206 ownerUuid: resource.ownerUuid,
207 isTrashed: resource.isTrashed,
213 handleRowDoubleClick = (uuid: string) => {
214 this.props.dispatch<any>(navigateTo(uuid));
217 handleRowClick = (uuid: string) => {
218 this.props.dispatch(loadDetailsPanel(uuid));