services/workbench2/src/views-components/resource-properties/resource-properties-list.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 { connect } from 'react-redux';
   7 import { Dispatch } from 'redux';
   8 import { CustomStyleRulesCallback } from 'common/custom-theme';
   9 import { WithStyles } from '@mui/styles';
  10 import withStyles from '@mui/styles/withStyles';
  11 import { RootState } from 'store/store';
  12 import { ArvadosTheme } from 'common/custom-theme';
  13 import { getPropertyChip } from '../resource-properties-form/property-chip';
  14 import { removePropertyFromResourceForm } from 'store/resources/resources-actions';
  15 import { formValueSelector } from 'redux-form';
  16
  17 type CssRules = 'tag';
  18
  19 const styles: CustomStyleRulesCallback<CssRules> = (theme: ArvadosTheme) => ({
  20     tag: {
  21         marginRight: theme.spacing(1),
  22         marginBottom: theme.spacing(1)
  23     }
  24 });
  25
  26 interface ResourcePropertiesListDataProps {
  27     properties: {[key: string]: string | string[]};
  28 }
  29
  30 interface ResourcePropertiesListActionProps {
  31     handleDelete: (key: string, value: string) => void;
  32 }
  33
  34 type ResourcePropertiesListProps = ResourcePropertiesListDataProps &
  35 ResourcePropertiesListActionProps & WithStyles<CssRules>;
  36
  37 const List = withStyles(styles)(
  38     ({ classes, handleDelete, properties }: ResourcePropertiesListProps) =>
  39         <div data-cy="resource-properties-list">
  40             {properties &&
  41                 Object.keys(properties).map(k =>
  42                     Array.isArray(properties[k])
  43                     ? (properties[k] as string[]).map((v: string) =>
  44                         getPropertyChip(
  45                             k, v,
  46                             () => handleDelete(k, v),
  47                             classes.tag))
  48                     : getPropertyChip(
  49                         k, (properties[k] as string),
  50                         () => handleDelete(k, (properties[k] as string)),
  51                         classes.tag))
  52                 }
  53         </div>
  54 );
  55
  56 export const resourcePropertiesList = (formName: string) =>
  57     connect(
  58         (state: RootState): ResourcePropertiesListDataProps => ({
  59             properties: formValueSelector(formName)(state, 'properties')
  60         }),
  61         (dispatch: Dispatch): ResourcePropertiesListActionProps => ({
  62                 handleDelete: (key: string, value: string) => dispatch<any>(removePropertyFromResourceForm(key, value, formName))
  63         })
  64     )(List);