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