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