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 { CustomStyleRulesCallback } from 'common/custom-theme';
  13 import { FormGroup, FormLabel } from '@mui/material';
  14 import { WithStyles } from '@mui/styles';
  15 import withStyles from '@mui/styles/withStyles';
  16 import { UpdateProjectPropertiesForm } from 'views-components/project-properties/update-project-properties-form';
  17 import { resourcePropertiesList } from 'views-components/resource-properties/resource-properties-list';
  18
  19 type CssRules = 'propertiesForm' | 'description';
  20
  21 const styles: CustomStyleRulesCallback<CssRules> = theme => ({
  22     propertiesForm: {
  23         marginTop: theme.spacing(2),
  24         marginBottom: theme.spacing(2),
  25     },
  26     description: {
  27         marginTop: theme.spacing(2),
  28         marginBottom: theme.spacing(2),
  29     },
  30 });
  31
  32 type DialogProjectProps = WithDialogProps<{sourcePanel: GroupClass}> & InjectedFormProps<ProjectUpdateFormDialogData>;
  33
  34 export const DialogProjectUpdate = (props: DialogProjectProps) => {
  35     let title = 'Edit Project';
  36     const sourcePanel = props.data.sourcePanel || '';
  37
  38     if (sourcePanel === GroupClass.ROLE) {
  39         title = 'Edit Group';
  40     }
  41
  42     return <FormDialog
  43         dialogTitle={title}
  44         formFields={ProjectEditFields as any}
  45         submitLabel='Save'
  46         {...props}
  47     />;
  48 };
  49
  50 const UpdateProjectPropertiesList = resourcePropertiesList(PROJECT_UPDATE_FORM_NAME);
  51
  52 // Also used as "Group Edit Fields"
  53 const ProjectEditFields = withStyles(styles)(
  54     ({ classes }: WithStyles<CssRules>) => <span>
  55         <ProjectNameField />
  56         <div className={classes.description}>
  57             <ProjectDescriptionField />
  58         </div>
  59         <div className={classes.propertiesForm}>
  60             <FormLabel>Properties</FormLabel>
  61             <FormGroup>
  62                 <UpdateProjectPropertiesForm />
  63                 <UpdateProjectPropertiesList />
  64             </FormGroup>
  65         </div>
  66     </span>);