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