Use ProgressButton in ResourcePropertiesForm

Feature #14393

Arvados-DCO-1.1-Signed-off-by: Michal Klobukowski <michal.klobukowski@contractors.roche.com>

diff --git a/src/views-components/resource-properties-form/resource-properties-form.tsx b/src/views-components/resource-properties-form/resource-properties-form.tsx
index df9ff84925e92b0717cf8e7321700ecc7f38c2d7..c881928c3e1b3774624f515499a76afe23db4ae0 100644 (file)
--- a/src/views-components/resource-properties-form/resource-properties-form.tsx
+++ b/src/views-components/resource-properties-form/resource-properties-form.tsx
@@ -4,16 +4,17 @@
 
 import * as React from 'react';
 import { InjectedFormProps, reduxForm } from 'redux-form';
-import { Grid, Button } from '@material-ui/core';
+import { Grid, withStyles } from '@material-ui/core';
 import { PropertyKeyField, PROPERTY_KEY_FIELD_NAME } from './property-key-field';
 import { PropertyValueField, PROPERTY_VALUE_FIELD_NAME } from './property-value-field';
+import { ProgressButton } from '~/components/progress-button/progress-button';
 
 export interface ResourcePropertiesFormData {
     [PROPERTY_KEY_FIELD_NAME]: string;
     [PROPERTY_VALUE_FIELD_NAME]: string;
 }
 
-export const ResourcePropertiesForm = ({ handleSubmit }: InjectedFormProps<ResourcePropertiesFormData>) =>
+export const ResourcePropertiesForm = ({ handleSubmit, submitting, invalid }: InjectedFormProps<ResourcePropertiesFormData>) =>
     <form onSubmit={handleSubmit}>
         <Grid container spacing={16}>
             <Grid item xs>
@@ -23,7 +24,18 @@ export const ResourcePropertiesForm = ({ handleSubmit }: InjectedFormProps<Resou
                 <PropertyValueField />
             </Grid>
             <Grid item xs>
-                <Button variant='contained' type='submit'>Add</Button>
+                <Button
+                    disabled={invalid}
+                    loading={submitting}
+                    color='primary'
+                    variant='contained'
+                    type='submit'>
+                    Add
+                </Button>
             </Grid>
         </Grid>
     </form>;
+
+const Button = withStyles(theme => ({
+    root: { marginTop: theme.spacing.unit }
+}))(ProgressButton);