X-Git-Url: https://git.arvados.org/arvados.git/blobdiff_plain/366a714c6d51fae8905c50d960555b4707305f42..519b431a41a9ab4815a1e4180ee78395b74a85de:/src/views-components/resource-properties-form/resource-properties-form.tsx

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 2f3e0cd4d2..a62b3d1563 100644
--- a/src/views-components/resource-properties-form/resource-properties-form.tsx
+++ b/src/views-components/resource-properties-form/resource-properties-form.tsx
@@ -3,28 +3,42 @@
 // SPDX-License-Identifier: AGPL-3.0
 
 import * as React from 'react';
-import { InjectedFormProps, reduxForm } from 'redux-form';
-import { Grid, Button } from '@material-ui/core';
+import { InjectedFormProps } from 'redux-form';
+import { Grid, withStyles, 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';
+import { GridClassKey } from '@material-ui/core/Grid';
 
 export interface ResourcePropertiesFormData {
     [PROPERTY_KEY_FIELD_NAME]: string;
     [PROPERTY_VALUE_FIELD_NAME]: string;
 }
 
-export const ResourcePropertiesForm = reduxForm({ form: 'rpform' })(
-    ({ handleSubmit }: InjectedFormProps) =>
-        <form onSubmit={handleSubmit}>
-            <Grid container spacing={16}>
-                <Grid item xs>
-                    <PropertyKeyField />
-                </Grid>
-                <Grid item xs>
-                    <PropertyValueField />
-                </Grid>
-                <Grid item xs>
-                    <Button variant='contained'>Add</Button>
-                </Grid>
+export type ResourcePropertiesFormProps = InjectedFormProps<ResourcePropertiesFormData> & WithStyles<GridClassKey>;
+
+export const ResourcePropertiesForm = ({ handleSubmit, submitting, invalid, classes }: ResourcePropertiesFormProps ) =>
+    <form onSubmit={handleSubmit}>
+        <Grid container spacing={16} classes={classes}>
+            <Grid item xs>
+                <PropertyKeyField />
+            </Grid>
+            <Grid item xs>
+                <PropertyValueField />
             </Grid>
-        </form>);
+            <Grid item xs>
+                <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);