Merge branch '14503_keep_services'
[arvados.git] / src / views-components / resource-properties-form / resource-properties-form.tsx
1 // Copyright (C) The Arvados Authors. All rights reserved.
2 //
3 // SPDX-License-Identifier: AGPL-3.0
4
5 import * as React from 'react';
6 import { InjectedFormProps } from 'redux-form';
7 import { Grid, withStyles, WithStyles } from '@material-ui/core';
8 import { PropertyKeyField, PROPERTY_KEY_FIELD_NAME } from './property-key-field';
9 import { PropertyValueField, PROPERTY_VALUE_FIELD_NAME } from './property-value-field';
10 import { ProgressButton } from '~/components/progress-button/progress-button';
11 import { GridClassKey } from '@material-ui/core/Grid';
12
13 export interface ResourcePropertiesFormData {
14     [PROPERTY_KEY_FIELD_NAME]: string;
15     [PROPERTY_VALUE_FIELD_NAME]: string;
16 }
17
18 export type ResourcePropertiesFormProps = InjectedFormProps<ResourcePropertiesFormData> & WithStyles<GridClassKey>;
19
20 export const ResourcePropertiesForm = ({ handleSubmit, submitting, invalid, classes }: ResourcePropertiesFormProps ) =>
21     <form onSubmit={handleSubmit}>
22         <Grid container spacing={16} classes={classes}>
23             <Grid item xs>
24                 <PropertyKeyField />
25             </Grid>
26             <Grid item xs>
27                 <PropertyValueField />
28             </Grid>
29             <Grid item xs>
30                 <Button
31                     disabled={invalid}
32                     loading={submitting}
33                     color='primary'
34                     variant='contained'
35                     type='submit'>
36                     Add
37                 </Button>
38             </Grid>
39         </Grid>
40     </form>;
41
42 const Button = withStyles(theme => ({
43     root: { marginTop: theme.spacing.unit }
44 }))(ProgressButton);