Merge branch '18368-notification-banner' into 19836-new-tooltip-impl

[arvados-workbench2.git] / 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 df9ff84925e92b0717cf8e7321700ecc7f38c2d7..0147312912730849da6fceba14be2fa799f53ec6 100644 (file)
--- a/src/views-components/resource-properties-form/resource-properties-form.tsx
+++ b/src/views-components/resource-properties-form/resource-properties-form.tsx
@@ -2,28 +2,63 @@
 //
 // 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 { PropertyKeyField, PROPERTY_KEY_FIELD_NAME } from './property-key-field';
-import { PropertyValueField, PROPERTY_VALUE_FIELD_NAME } from './property-value-field';
+import React from 'react';
+import { RootState } from 'store/store';
+import { connect } from 'react-redux';
+import { formValueSelector, InjectedFormProps } from 'redux-form';
+import { Grid, withStyles, WithStyles } from '@material-ui/core';
+import { PropertyKeyField, PROPERTY_KEY_FIELD_NAME, PROPERTY_KEY_FIELD_ID } from './property-key-field';
+import { PropertyValueField, PROPERTY_VALUE_FIELD_NAME, PROPERTY_VALUE_FIELD_ID } from './property-value-field';
+import { ProgressButton } from 'components/progress-button/progress-button';
+import { GridClassKey } from '@material-ui/core/Grid';
+
+const AddButton = withStyles(theme => ({
+    root: { marginTop: theme.spacing.unit }
+}))(ProgressButton);
+
+const mapStateToProps = (state: RootState) => {
+    return {
+        applySelector: (selector) => selector(state, 'key', 'value', 'keyID', 'valueID')
+    }
+}
+
+interface ApplySelector {
+    applySelector: (selector) => any;
+}
 
 export interface ResourcePropertiesFormData {
+    uuid: string;
     [PROPERTY_KEY_FIELD_NAME]: string;
+    [PROPERTY_KEY_FIELD_ID]: string;
     [PROPERTY_VALUE_FIELD_NAME]: string;
+    [PROPERTY_VALUE_FIELD_ID]: string;
+    clearPropertyKeyOnSelect?: boolean;
 }
 
-export const ResourcePropertiesForm = ({ handleSubmit }: InjectedFormProps<ResourcePropertiesFormData>) =>
-    <form onSubmit={handleSubmit}>
-        <Grid container spacing={16}>
+type ResourcePropertiesFormProps = {uuid: string; clearPropertyKeyOnSelect?: boolean } & InjectedFormProps<ResourcePropertiesFormData, {uuid: string;}> & WithStyles<GridClassKey> & ApplySelector;
+
+export const ResourcePropertiesForm = connect(mapStateToProps)(({ handleSubmit, change, submitting, invalid, classes, uuid, clearPropertyKeyOnSelect, applySelector,  ...props }: ResourcePropertiesFormProps ) => {
+    change('uuid', uuid); // Sets the uuid field to the uuid of the resource.
+    const propertyValue = applySelector(formValueSelector(props.form));
+    return <form data-cy='resource-properties-form' onSubmit={handleSubmit}>
+        <Grid container spacing={16} classes={classes}>
             <Grid item xs>
-                <PropertyKeyField />
+                <PropertyKeyField clearPropertyKeyOnSelect />
             </Grid>
             <Grid item xs>
                 <PropertyValueField />
             </Grid>
-            <Grid item xs>
-                <Button variant='contained' type='submit'>Add</Button>
+            <Grid item>
+                <AddButton
+                    data-cy='property-add-btn'
+                    disabled={invalid || !(propertyValue.key && propertyValue.value)}
+                    loading={submitting}
+                    color='primary'
+                    variant='contained'
+                    type='submit'>
+                    Add
+                </AddButton>
             </Grid>
         </Grid>
-    </form>;
+    </form>}
+);
\ No newline at end of file