18692: Fixed collection beeing editable within the details panel
[arvados.git] / src / views-components / details-panel / project-details.tsx
1 // Copyright (C) The Arvados Authors. All rights reserved.
2 //
3 // SPDX-License-Identifier: AGPL-3.0
4
5 import React from 'react';
6 import { connect } from 'react-redux';
7 import { ProjectIcon, RenameIcon, FilterGroupIcon } from 'components/icon/icon';
8 import { ProjectResource } from 'models/project';
9 import { formatDate } from 'common/formatters';
10 import { ResourceKind } from 'models/resource';
11 import { resourceLabel } from 'common/labels';
12 import { DetailsData } from "./details-data";
13 import { DetailsAttribute } from "components/details-attribute/details-attribute";
14 import { RichTextEditorLink } from 'components/rich-text-editor-link/rich-text-editor-link';
15 import { withStyles, StyleRulesCallback, WithStyles, Button } from '@material-ui/core';
16 import { ArvadosTheme } from 'common/custom-theme';
17 import { Dispatch } from 'redux';
18 import { getPropertyChip } from '../resource-properties-form/property-chip';
19 import { ResourceWithName } from '../data-explorer/renderers';
20 import { GroupClass } from "models/group";
21 import { openProjectUpdateDialog, ProjectUpdateFormDialogData } from 'store/projects/project-update-actions';
22 import { RootState } from 'store/store';
23 import { ResourcesState } from 'store/resources/resources';
24 import { resourceIsFrozen } from 'common/frozen-resources';
25
26 export class ProjectDetails extends DetailsData<ProjectResource> {
27     getIcon(className?: string) {
28         if (this.item.groupClass === GroupClass.FILTER) {
29             return <FilterGroupIcon className={className} />;
30         }
31         return <ProjectIcon className={className} />;
32     }
33
34     getDetails() {
35         return <ProjectDetailsComponent project={this.item} />;
36     }
37 }
38
39 type CssRules = 'tag' | 'editIcon' | 'editButton';
40
41 const styles: StyleRulesCallback<CssRules> = (theme: ArvadosTheme) => ({
42     tag: {
43         marginRight: theme.spacing.unit / 2,
44         marginBottom: theme.spacing.unit / 2,
45     },
46     editIcon: {
47         paddingRight: theme.spacing.unit / 2,
48         fontSize: '1.125rem',
49     },
50     editButton: {
51         boxShadow: 'none',
52         padding: '2px 10px 2px 5px',
53         fontSize: '0.75rem'
54     },
55 });
56
57 interface ProjectDetailsComponentDataProps {
58     project: ProjectResource;
59 }
60
61 interface ProjectDetailsComponentActionProps {
62     onClick: (prj: ProjectUpdateFormDialogData) => () => void;
63 }
64
65 const mapStateToProps = (state: RootState): { resources: ResourcesState } => {
66     return {
67         resources: state.resources
68     };
69 };
70
71 const mapDispatchToProps = (dispatch: Dispatch) => ({
72     onClick: (prj: ProjectUpdateFormDialogData) =>
73         () => dispatch<any>(openProjectUpdateDialog(prj)),
74 });
75
76 type ProjectDetailsComponentProps = ProjectDetailsComponentDataProps & ProjectDetailsComponentActionProps & WithStyles<CssRules>;
77
78 const ProjectDetailsComponent = connect(mapStateToProps, mapDispatchToProps)(
79     withStyles(styles)(
80         ({ classes, project, resources, onClick }: ProjectDetailsComponentProps & { resources: ResourcesState }) => <div>
81             {project.groupClass !== GroupClass.FILTER ?
82                 <Button onClick={onClick({
83                     uuid: project.uuid,
84                     name: project.name,
85                     description: project.description,
86                     properties: project.properties,
87                 })}
88                     disabled={resourceIsFrozen(project, resources)}
89                     className={classes.editButton} variant='contained'
90                     data-cy='details-panel-edit-btn' color='primary' size='small'>
91                     <RenameIcon className={classes.editIcon} /> Edit
92                 </Button>
93                 : ''
94             }
95             <DetailsAttribute label='Type' value={project.groupClass === GroupClass.FILTER ? 'Filter group' : resourceLabel(ResourceKind.PROJECT)} />
96             <DetailsAttribute label='Owner' linkToUuid={project.ownerUuid}
97                 uuidEnhancer={(uuid: string) => <ResourceWithName uuid={uuid} />} />
98             <DetailsAttribute label='Last modified' value={formatDate(project.modifiedAt)} />
99             <DetailsAttribute label='Created at' value={formatDate(project.createdAt)} />
100             <DetailsAttribute label='UUID' linkToUuid={project.uuid} value={project.uuid} />
101             <DetailsAttribute label='Description'>
102                 {project.description ?
103                     <RichTextEditorLink
104                         title={`Description of ${project.name}`}
105                         content={project.description}
106                         label='Show full description' />
107                     : '---'
108                 }
109             </DetailsAttribute>
110             <DetailsAttribute label='Properties' />
111             {
112                 Object.keys(project.properties).map(k =>
113                     Array.isArray(project.properties[k])
114                         ? project.properties[k].map((v: string) =>
115                             getPropertyChip(k, v, undefined, classes.tag))
116                         : getPropertyChip(k, project.properties[k], undefined, classes.tag)
117                 )
118             }
119         </div>
120     ));