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 React from 'react';
   6 import { RootState } from 'store/store';
   7 import { connect } from 'react-redux';
   8 import { formValueSelector, InjectedFormProps } from 'redux-form';
   9 import { Grid, withStyles, WithStyles } from '@material-ui/core';
  10 import { PropertyKeyField, PROPERTY_KEY_FIELD_NAME, PROPERTY_KEY_FIELD_ID } from './property-key-field';
  11 import { PropertyValueField, PROPERTY_VALUE_FIELD_NAME, PROPERTY_VALUE_FIELD_ID } from './property-value-field';
  12 import { ProgressButton } from 'components/progress-button/progress-button';
  13 import { GridClassKey } from '@material-ui/core/Grid';
  14
  15 const AddButton = withStyles(theme => ({
  16     root: { marginTop: theme.spacing.unit }
  17 }))(ProgressButton);
  18
  19 const mapStateToProps = (state: RootState) => {
  20     return {
  21         applySelector: (selector) => selector(state, 'key', 'value', 'keyID', 'valueID')
  22     }
  23 }
  24
  25 interface ApplySelector {
  26     applySelector: (selector) => any;
  27 }
  28
  29 export interface ResourcePropertiesFormData {
  30     uuid: string;
  31     [PROPERTY_KEY_FIELD_NAME]: string;
  32     [PROPERTY_KEY_FIELD_ID]: string;
  33     [PROPERTY_VALUE_FIELD_NAME]: string;
  34     [PROPERTY_VALUE_FIELD_ID]: string;
  35     clearPropertyKeyOnSelect?: boolean;
  36 }
  37
  38 type ResourcePropertiesFormProps = {uuid: string; clearPropertyKeyOnSelect?: boolean } & InjectedFormProps<ResourcePropertiesFormData, {uuid: string;}> & WithStyles<GridClassKey> & ApplySelector;
  39
  40 export const ResourcePropertiesForm = connect(mapStateToProps)(({ handleSubmit, change, submitting, invalid, classes, uuid, clearPropertyKeyOnSelect, applySelector,  ...props }: ResourcePropertiesFormProps ) => {
  41     change('uuid', uuid); // Sets the uuid field to the uuid of the resource.
  42     const propertyValue = applySelector(formValueSelector(props.form));
  43     return <form data-cy='resource-properties-form' onSubmit={handleSubmit}>
  44         <Grid container spacing={16} classes={classes}>
  45             <Grid item xs>
  46                 <PropertyKeyField clearPropertyKeyOnSelect />
  47             </Grid>
  48             <Grid item xs>
  49                 <PropertyValueField />
  50             </Grid>
  51             <Grid item>
  52                 <AddButton
  53                     data-cy='property-add-btn'
  54                     disabled={invalid || !(propertyValue.key && propertyValue.value)}
  55                     loading={submitting}
  56                     color='primary'
  57                     variant='contained'
  58                     type='submit'>
  59                     Add
  60                 </AddButton>
  61             </Grid>
  62         </Grid>
  63     </form>}
  64 );