20846: Merge branch '19213-ubuntu2204-support' into 20846-ubuntu2204
[arvados.git] / services / workbench2 / src / views-components / dialog-update / dialog-project-update.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 { InjectedFormProps } from 'redux-form';
7 import { WithDialogProps } from 'store/dialog/with-dialog';
8 import { ProjectUpdateFormDialogData, PROJECT_UPDATE_FORM_NAME } from 'store/projects/project-update-actions';
9 import { FormDialog } from 'components/form-dialog/form-dialog';
10 import { ProjectNameField, ProjectDescriptionField } from 'views-components/form-fields/project-form-fields';
11 import { GroupClass } from 'models/group';
12 import { FormGroup, FormLabel, StyleRulesCallback, WithStyles, withStyles } from '@material-ui/core';
13 import { UpdateProjectPropertiesForm } from 'views-components/project-properties/update-project-properties-form';
14 import { resourcePropertiesList } from 'views-components/resource-properties/resource-properties-list';
15
16 type CssRules = 'propertiesForm' | 'description';
17
18 const styles: StyleRulesCallback<CssRules> = theme => ({
19     propertiesForm: {
20         marginTop: theme.spacing.unit * 2,
21         marginBottom: theme.spacing.unit * 2,
22     },
23     description: {
24         marginTop: theme.spacing.unit * 2,
25         marginBottom: theme.spacing.unit * 2,
26     },
27 });
28
29 type DialogProjectProps = WithDialogProps<{sourcePanel: GroupClass}> & InjectedFormProps<ProjectUpdateFormDialogData>;
30
31 export const DialogProjectUpdate = (props: DialogProjectProps) => {
32     let title = 'Edit Project';
33     const sourcePanel = props.data.sourcePanel || '';
34
35     if (sourcePanel === GroupClass.ROLE) {
36         title = 'Edit Group';
37     }
38
39     return <FormDialog
40         dialogTitle={title}
41         formFields={ProjectEditFields as any}
42         submitLabel='Save'
43         {...props}
44     />;
45 };
46
47 const UpdateProjectPropertiesList = resourcePropertiesList(PROJECT_UPDATE_FORM_NAME);
48
49 // Also used as "Group Edit Fields"
50 const ProjectEditFields = withStyles(styles)(
51     ({ classes }: WithStyles<CssRules>) => <span>
52         <ProjectNameField />
53         <div className={classes.description}>
54             <ProjectDescriptionField />
55         </div>
56         <div className={classes.propertiesForm}>
57             <FormLabel>Properties</FormLabel>
58             <FormGroup>
59                 <UpdateProjectPropertiesForm />
60                 <UpdateProjectPropertiesList />
61             </FormGroup>
62         </div>
63     </span>);